fix(dashboard): Instant preview on preview tab for step (#6924)

novuhq · Nov 11, 2024 · 10834e7 · 10834e7
1 parent 9cb79a5
commit 10834e7
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 19 deletions.
diff --git a/apps/dashboard/src/components/workflow-editor/steps/in-app/in-app-editor-preview.tsx b/apps/dashboard/src/components/workflow-editor/steps/in-app/in-app-editor-preview.tsx
@@ -7,24 +7,18 @@ import { Button } from '@/components/primitives/button';
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/primitives/collapsible';
 import { Editor } from '@/components/primitives/editor';
 import { InAppPreview } from '@/components/workflow-editor/in-app-preview';
-import { usePreviewStep } from '@/hooks/use-preview-step';
+import { GeneratePreviewResponseDto } from '@novu/shared';
 import { loadLanguage } from '@uiw/codemirror-extensions-langs';
-import { useFormContext } from 'react-hook-form';
-import { useParams } from 'react-router-dom';
 
 type InAppEditorPreviewProps = {
   value: string;
   onChange: (value: string) => void;
+  previewData?: GeneratePreviewResponseDto;
+  applyPreview: () => void;
 };
 export const InAppEditorPreview = (props: InAppEditorPreviewProps) => {
-  const { value, onChange } = props;
+  const { value, onChange, previewData, applyPreview } = props;
   const [isEditorOpen, setIsEditorOpen] = useState(true);
-  const { previewStep, data } = usePreviewStep();
-  const { workflowSlug = '', stepSlug = '' } = useParams<{
-    workflowSlug: string;
-    stepSlug: string;
-  }>();
-  const form = useFormContext();
   const [payloadError, setPayloadError] = useState('');
 
   return (
@@ -68,11 +62,7 @@ export const InAppEditorPreview = (props: InAppEditorPreviewProps) => {
             className="self-end"
             onClick={() => {
               try {
-                previewStep({
-                  workflowSlug,
-                  stepSlug,
-                  data: { controlValues: form.getValues(), previewPayload: JSON.parse(value) },
-                });
+                applyPreview();
               } catch (e) {
                 setPayloadError(String(e));
               }
@@ -83,7 +73,7 @@ export const InAppEditorPreview = (props: InAppEditorPreviewProps) => {
         </CollapsibleContent>
       </Collapsible>
 
-      {data && <InAppPreview data={data} />}
+      {previewData && <InAppPreview data={previewData} />}
     </div>
   );
 };
diff --git a/apps/dashboard/src/components/workflow-editor/steps/in-app/in-app-tabs.tsx b/apps/dashboard/src/components/workflow-editor/steps/in-app/in-app-tabs.tsx
@@ -1,7 +1,7 @@
 import { RiEdit2Line, RiPencilRuler2Line } from 'react-icons/ri';
 import { Cross2Icon } from '@radix-ui/react-icons';
 import { useNavigate, useParams } from 'react-router-dom';
-import { useForm, useWatch } from 'react-hook-form';
+import { FieldValues, useForm, useWatch } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { type WorkflowResponseDto, type StepDataDto, type StepUpdateDto } from '@novu/shared';
 
@@ -38,7 +38,7 @@ export const InAppTabs = ({ workflow, step }: { workflow: WorkflowResponseDto; s
   const [editorValue, setEditorValue] = useState('{}');
   const { reset, formState } = form;
 
-  const { previewStep } = usePreviewStep();
+  const { previewStep, data: previewData } = usePreviewStep();
   const { updateWorkflow } = useUpdateWorkflow({
     onSuccess: () => {
       showToast({
@@ -159,7 +159,18 @@ export const InAppTabs = ({ workflow, step }: { workflow: WorkflowResponseDto; s
             <CustomStepControls dataSchema={dataSchema} />
           </TabsContent>
           <TabsContent value="preview" className={tabsContentClassName}>
-            <InAppEditorPreview value={editorValue} onChange={setEditorValue} />
+            <InAppEditorPreview
+              value={editorValue}
+              onChange={setEditorValue}
+              previewData={previewData}
+              applyPreview={() => {
+                previewStep({
+                  stepSlug,
+                  workflowSlug,
+                  data: { controlValues: form.getValues() as FieldValues, previewPayload: JSON.parse(editorValue) },
+                });
+              }}
+            />
           </TabsContent>
           <Separator />
           <footer className="flex justify-end px-3 py-3.5">