Action playground snippet

packages/admin/package.json

@@ -33,9 +33,9 @@
     "core": "workspace:*",
     "date-fns": "^3.0.5",
     "fs-extra": "^11.2.0",
-    "future-rewatch": "workspace:*",
     "future-google": "workspace:*",
     "future-mailchimp": "workspace:*",
+    "future-rewatch": "workspace:*",
     "future-slack": "workspace:*",
     "glob": "^11.0.0",
     "json-schema-to-zod": "^2.4.0",
@@ -69,6 +69,7 @@
     "eslint-plugin-unused-imports": "^4.1.3",
     "jest": "^29.7.0",
     "postcss": "^8",
+    "shiki": "^1.14.1",
     "tailwindcss": "^3.4.1",
     "ts-jest": "^29.2.4",
     "typescript": "^5"

packages/admin/src/app/actions-playground/page.tsx

@@ -1,23 +1,15 @@
-'use client';
-
-import { useRef } from 'react';
-
 import { ScrollArea, ScrollBar } from '@/components/ui/scroll-area';
 
 import ActionDetail from '@/domains/playground/components/action-detail';
 import { ActionPlaygroundSidebar } from '@/domains/playground/components/actions-list';
 
 function ActionsPlayground() {
-  const containerRef = useRef<HTMLDivElement>(null);
-
   return (
     <section className="flex h-full w-full overflow-hidden">
       <ScrollArea
-        innerRef={containerRef}
         className="grow bg-[url(/images/workflow-bg.svg)]"
         viewportClassName="kepler-workflows-scroll-area scroll-mb-6"
       >
-        <div>action playground</div>
         <ActionDetail />
         <ScrollBar orientation="horizontal" />
       </ScrollArea>

packages/admin/src/app/globals.css

@@ -148,3 +148,11 @@ html {
 .delete-action-button:hover .body {
   transform: translateY(2px);
 }
+
+.shiki code {
+    font-size: 14px !important;
+}
+
+.shiki code .line{
+  max-width: 80%;
+}

packages/admin/src/domains/playground/components/action-detail.tsx

@@ -1,8 +1,69 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+
+import { codeToHtml } from 'shiki/bundle/web';
+
 import { useActionPlaygroundContext } from '../providers/action-playground-provider';
 
 function ActionDetail() {
-  const { selectedAction } = useActionPlaygroundContext();
-  return <div>{selectedAction?.label || 'no action selected'}</div>;
+  const { selectedAction, payload } = useActionPlaygroundContext();
+  const selectedActionPlugin = selectedAction?.pluginName;
+  const [codeBlock, setCodeBlock] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!selectedAction || !selectedActionPlugin) {
+      return;
+    }
+
+    const stringifiedPayload = JSON.stringify(payload, null, 10);
+
+    const snippet = `
+        'use server';
+
+        import frameworkInstance from 'path-to-framework-instance';
+
+
+        frameworkInstance.executeAction({
+          pluginName: '${selectedActionPlugin}',
+          action: '${selectedAction.type}',
+          payload:  {
+            ${stringifiedPayload.substring(1, stringifiedPayload.length - 1)}
+
+          },
+        });
+
+      `;
+
+    const getCodeBlock = async () => {
+      const html = await codeToHtml(snippet, {
+        theme: 'vitesse-dark',
+        lang: 'ts',
+        decorations: [
+          {
+            start: 21,
+            end: 24,
+
+            properties: { class: 'highlighted-word' },
+          },
+        ],
+      });
+
+      return html;
+    };
+
+    getCodeBlock().then(html => setCodeBlock(html));
+  }, [selectedAction, selectedActionPlugin, payload]);
+
+  return (
+    <div className="px-8 h-full grid place-items-center max-w-full overflow-auto">
+      <div
+        dangerouslySetInnerHTML={{
+          __html: codeBlock || '',
+        }}
+      />
+    </div>
+  );
 }
 
 export default ActionDetail;

packages/admin/src/domains/playground/components/actions-list.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { useEffect, useState } from 'react';
 
 import { ScrollArea } from '@/components/ui/scroll-area';

packages/admin/src/domains/playground/components/dynamic-form.tsx

@@ -2,7 +2,7 @@
 
 import { zodResolver } from '@hookform/resolvers/zod';
 import { RefinedIntegrationAction } from 'core';
-import React, { useState } from 'react';
+import React from 'react';
 import { Control, FieldErrors, useForm } from 'react-hook-form';
 import { z, ZodSchema } from 'zod';
 
@@ -22,8 +22,7 @@ import { executeFrameworkAction } from '../server-actions/execute-framework-acti
 import ExecuteAction from './action-runner';
 
 function DynamicForm<T extends ZodSchema>() {
-  const { selectedAction, setSelectedAction } = useActionPlaygroundContext();
-  const [payload, setPayload] = useState<any>({});
+  const { selectedAction, setSelectedAction, setPayload } = useActionPlaygroundContext();
 
   const blockSchemaTypeName = (selectedAction?.zodSchema as any)?._def?.typeName;
   const discriminatedUnionSchemaOptions = (selectedAction?.schema as any)?._def?.options;
@@ -69,8 +68,16 @@ function DynamicForm<T extends ZodSchema>() {
     if (key === discriminatedUnionSchemaDiscriminator) {
       setValue(key as any, value);
       setPayload({ ...formValues, [key]: value });
+      console.log({
+        key,
+        value,
+      });
     } else {
       setValue(key as any, value);
+      console.log({
+        key,
+        value,
+      });
       setPayload({ ...formValues, [key]: value });
     }
   }

packages/admin/src/domains/playground/providers/action-playground-provider.tsx

@@ -9,6 +9,8 @@ export interface ActionPlaygroundContextProps {
   frameworkActions: RefinedIntegrationAction[];
   selectedAction: RefinedIntegrationAction | undefined;
   setSelectedAction: React.Dispatch<React.SetStateAction<RefinedIntegrationAction | undefined>>;
+  payload: Record<string, any>;
+  setPayload: React.Dispatch<React.SetStateAction<Record<string, any>>>;
 }
 
 export const ActionPlaygroundContext = createContext({} as ActionPlaygroundContextProps);
@@ -34,13 +36,17 @@ export const ActionPlaygroundProvider = ({
 
   const [selectedAction, setSelectedAction] = useState<RefinedIntegrationAction | undefined>(undefined);
 
+  const [payload, setPayload] = useState<Record<string, any>>({});
+
   const contextValue: ActionPlaygroundContextProps = useMemo(() => {
     return {
       selectedAction,
       frameworkActions,
       setSelectedAction,
+      payload,
+      setPayload,
     };
-  }, [selectedAction, frameworkActions]);
+  }, [selectedAction, frameworkActions, payload]);
 
   return <ActionPlaygroundContext.Provider value={contextValue}>{children}</ActionPlaygroundContext.Provider>;
 };

packages/admin/src/domains/workflows/components/workflow-sidebar/config-forms/multi-select.tsx

@@ -96,7 +96,10 @@ function MultiSelect({
           <Button
             type="button"
             role="combobox"
-            className={cn('ring-neutral-750 text-text-dim h-8 justify-between text-[0.75rem] ring-1')}
+            variant={'outline'}
+            className={cn(
+              'ring-white/[0.05] hover: bg-transparent text-text-dim h-8 justify-between text-[0.75rem] ring-1',
+            )}
           >
             Add {lodashTitleCase(field.name.split('.').pop() || '')}
             <Icon name="down-caret" className="text-icon h-3.5 w-3.5" />