fix(dashboard): Nv 4679 visiting UI based workflow shows framework co…

…de (#6951)
novuhq · Nov 12, 2024 · 496f588 · 496f588
1 parent 7636824
commit 496f588
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 18 deletions.
diff --git a/apps/dashboard/src/components/create-workflow-button.tsx b/apps/dashboard/src/components/create-workflow-button.tsx
@@ -83,7 +83,7 @@ export const CreateWorkflowButton = (props: CreateWorkflowButtonProps) => {
       }}
     >
       <SheetTrigger {...props} />
-      <SheetContent>
+      <SheetContent onOpenAutoFocus={(e) => e.preventDefault()}>
         <SheetHeader>
           <SheetTitle>Create workflow</SheetTitle>
           <div>
@@ -134,7 +134,7 @@ export const CreateWorkflowButton = (props: CreateWorkflowButtonProps) => {
                         />
                       </InputField>
                     </FormControl>
-                    <FormMessage>Name is required</FormMessage>
+                    <FormMessage />
                   </FormItem>
                 )}
               />

diff --git a/apps/dashboard/src/components/workflow-editor/test-workflow/test-workflow-form.tsx b/apps/dashboard/src/components/workflow-editor/test-workflow/test-workflow-form.tsx
@@ -23,9 +23,10 @@ import { TestWorkflowFormType } from '../schema';
 import { SnippetLanguage } from './types';
 import { SnippetEditor } from './snippet-editor';
 import { Editor } from '@/components/primitives/editor';
+import { WorkflowOriginEnum } from '@/utils/enums';
 
 const tabsTriggerClassName = 'pt-1';
-const codePanelClassName = 'bg-background h-full w-full rounded-lg border border-neutral-200 p-3';
+const codePanelClassName = 'bg-background flex-1 w-full rounded-lg border border-neutral-200 p-3 overflow-y-auto';
 
 const LANGUAGE_TO_SNIPPET_UTIL: Record<SnippetLanguage, (props: CodeSnippet) => string> = {
   shell: createCurlSnippet,
@@ -41,7 +42,9 @@ export const TestWorkflowForm = ({ workflow }: { workflow?: WorkflowResponseDto
     control,
     formState: { errors },
   } = useFormContext<TestWorkflowFormType>();
-  const [activeSnippetTab, setActiveSnippetTab] = useState<SnippetLanguage>('framework');
+  const [activeSnippetTab, setActiveSnippetTab] = useState<SnippetLanguage>(() =>
+    workflow?.origin === WorkflowOriginEnum.EXTERNAL ? 'framework' : 'typescript'
+  );
   const to = useWatch({ name: 'to', control });
   const payload = useWatch({ name: 'payload', control });
   const identifier = workflow?.workflowId ?? '';
@@ -51,7 +54,7 @@ export const TestWorkflowForm = ({ workflow }: { workflow?: WorkflowResponseDto
   }, [activeSnippetTab, identifier, to, payload]);
 
   return (
-    <div className="flex h-full w-full flex-1 flex-col gap-3 p-3">
+    <div className="flex w-full flex-1 flex-col gap-3 overflow-hidden p-3">
       <div className="flex flex-1 flex-col gap-3 xl:flex-row">
         <div className="flex-1">
           <Panel className="h-full">
@@ -110,23 +113,25 @@ export const TestWorkflowForm = ({ workflow }: { workflow?: WorkflowResponseDto
           />
         </div>
       </div>
-      <div className="flex-1">
-        <Panel className="h-full">
+      <div className="flex h-1/3 flex-1 flex-col">
+        <Panel className="flex flex-1 flex-col overflow-hidden">
           <Tabs
-            className="flex h-full flex-1 flex-col border-none"
+            className="flex max-h-full flex-1 flex-col border-none"
             value={activeSnippetTab}
             onValueChange={(value) => setActiveSnippetTab(value as SnippetLanguage)}
           >
             <TabsList className="border-t-0" variant="regular">
-              <TabsTrigger className={tabsTriggerClassName} value="framework" variant="regular">
-                Framework
+              {workflow?.origin === WorkflowOriginEnum.EXTERNAL && (
+                <TabsTrigger className={tabsTriggerClassName} value="framework" variant="regular">
+                  Framework
+                </TabsTrigger>
+              )}
+              <TabsTrigger className={tabsTriggerClassName} value="typescript" variant="regular">
+                NodeJS
               </TabsTrigger>
               <TabsTrigger className={tabsTriggerClassName} value="shell" variant="regular">
                 cURL
               </TabsTrigger>
-              <TabsTrigger className={tabsTriggerClassName} value="typescript" variant="regular">
-                NodeJS
-              </TabsTrigger>
               <TabsTrigger className={tabsTriggerClassName} value="php" variant="regular">
                 PHP
               </TabsTrigger>
@@ -144,9 +149,11 @@ export const TestWorkflowForm = ({ workflow }: { workflow?: WorkflowResponseDto
                 value="Copy code"
               />
             </TabsList>
-            <TabsContent value="framework" className={codePanelClassName} variant="regular">
-              <SnippetEditor language="framework" value={snippetValue} />
-            </TabsContent>
+            {workflow?.origin === WorkflowOriginEnum.EXTERNAL && (
+              <TabsContent value="framework" className={codePanelClassName} variant="regular">
+                <SnippetEditor language="framework" value={snippetValue} />
+              </TabsContent>
+            )}
             <TabsContent value="shell" className={codePanelClassName} variant="regular">
               <SnippetEditor language="shell" value={snippetValue} />
             </TabsContent>

diff --git a/apps/dashboard/src/components/workflow-editor/test-workflow/test-workflow-tabs.tsx b/apps/dashboard/src/components/workflow-editor/test-workflow/test-workflow-tabs.tsx
@@ -74,7 +74,7 @@ export const TestWorkflowTabs = ({ testData }: { testData: WorkflowTestDataRespo
     <div className="h-full w-full">
       <Form {...form}>
         <form onSubmit={handleSubmit(onSubmit)} className="roun flex h-full flex-1 flex-nowrap">
-          <Tabs defaultValue="workflow" className="-mt-[1px] flex h-full flex-1 flex-col" value="trigger">
+          <Tabs defaultValue="workflow" className="-mt-[1px] flex flex-1 flex-col" value="trigger">
             <TabsList variant="regular">
               <TabsTrigger value="workflow" asChild variant="regular">
                 <Link
@@ -103,7 +103,7 @@ export const TestWorkflowTabs = ({ testData }: { testData: WorkflowTestDataRespo
                 </Button>
               </div>
             </TabsList>
-            <TabsContent value="trigger" className="mt-0 h-full w-full" variant="regular">
+            <TabsContent value="trigger" className="mt-0 flex w-full flex-1 flex-col overflow-hidden" variant="regular">
               <TestWorkflowForm workflow={workflow} />
             </TabsContent>
           </Tabs>