From be4b2767aba0b1e032d583d61875c1aa3d9767a1 Mon Sep 17 00:00:00 2001
From: desiprisg <george.desipris.56@gmail.com>
Date: Mon, 9 Dec 2024 13:59:12 +0200
Subject: [PATCH] fix(dashboard): Fix double separator on step template sheet

---
 .../steps/configure-step-form.tsx             | 37 ++++++++-----
 .../steps/configure-step-template-cta.tsx     | 52 -------------------
 .../configure-step-template-issue-cta.tsx     | 38 ++++++++++++++
 3 files changed, 63 insertions(+), 64 deletions(-)
 delete mode 100644 apps/dashboard/src/components/workflow-editor/steps/configure-step-template-cta.tsx
 create mode 100644 apps/dashboard/src/components/workflow-editor/steps/configure-step-template-issue-cta.tsx

diff --git a/apps/dashboard/src/components/workflow-editor/steps/configure-step-form.tsx b/apps/dashboard/src/components/workflow-editor/steps/configure-step-form.tsx
index d826e777b39..ad09c71ec12 100644
--- a/apps/dashboard/src/components/workflow-editor/steps/configure-step-form.tsx
+++ b/apps/dashboard/src/components/workflow-editor/steps/configure-step-form.tsx
@@ -41,7 +41,7 @@ import { buildDefaultValuesOfDataSchema, buildDynamicZodSchema } from '@/utils/s
 import { buildDefaultValues } from '@/utils/schema';
 import merge from 'lodash.merge';
 import { DelayControlValues } from '@/components/workflow-editor/steps/delay/delay-control-values';
-import { ConfigureStepTemplateCta } from '@/components/workflow-editor/steps/configure-step-template-cta';
+import { ConfigureStepTemplateIssueCta } from '@/components/workflow-editor/steps/configure-step-template-issue-cta';
 import { ConfigureInAppStepPreview } from '@/components/workflow-editor/steps/in-app/configure-in-app-step-preview';
 import { ConfigureEmailStepPreview } from '@/components/workflow-editor/steps/email/configure-email-step-preview';
 import { useFeatureFlag } from '@/hooks/use-feature-flag';
@@ -58,16 +58,16 @@ const STEP_TYPE_TO_INLINE_CONTROL_VALUES: Record<StepTypeEnum, () => React.JSX.E
   [StepTypeEnum.DIGEST]: () => null,
 };
 
-const STEP_TYPE_TO_PREVIEW: Record<StepTypeEnum, (props: HTMLAttributes<HTMLDivElement>) => ReactNode> = {
+const STEP_TYPE_TO_PREVIEW: Record<StepTypeEnum, ((props: HTMLAttributes<HTMLDivElement>) => ReactNode) | null> = {
   [StepTypeEnum.IN_APP]: ConfigureInAppStepPreview,
   [StepTypeEnum.EMAIL]: ConfigureEmailStepPreview,
-  [StepTypeEnum.SMS]: () => null,
-  [StepTypeEnum.CHAT]: () => null,
-  [StepTypeEnum.PUSH]: () => null,
-  [StepTypeEnum.CUSTOM]: () => null,
-  [StepTypeEnum.TRIGGER]: () => null,
-  [StepTypeEnum.DIGEST]: () => null,
-  [StepTypeEnum.DELAY]: () => null,
+  [StepTypeEnum.SMS]: null,
+  [StepTypeEnum.CHAT]: null,
+  [StepTypeEnum.PUSH]: null,
+  [StepTypeEnum.CUSTOM]: null,
+  [StepTypeEnum.TRIGGER]: null,
+  [StepTypeEnum.DIGEST]: null,
+  [StepTypeEnum.DELAY]: null,
 };
 
 const calculateDefaultControlsValues = (step: StepDataDto) => {
@@ -286,9 +286,22 @@ export const ConfigureStepForm = (props: ConfigureStepFormProps) => {
               </Link>
             </SidebarContent>
             <Separator />
-            <ConfigureStepTemplateCta step={step} issue={firstError}>
-              <Preview />
-            </ConfigureStepTemplateCta>
+
+            {firstError ? (
+              <>
+                <ConfigureStepTemplateIssueCta step={step} issue={firstError} />
+                <Separator />
+              </>
+            ) : (
+              Preview && (
+                <>
+                  <SidebarContent>
+                    <Preview />
+                  </SidebarContent>
+                  <Separator />
+                </>
+              )
+            )}
           </>
         )}
 
diff --git a/apps/dashboard/src/components/workflow-editor/steps/configure-step-template-cta.tsx b/apps/dashboard/src/components/workflow-editor/steps/configure-step-template-cta.tsx
deleted file mode 100644
index 9ac385aad08..00000000000
--- a/apps/dashboard/src/components/workflow-editor/steps/configure-step-template-cta.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import { Button } from '@/components/primitives/button';
-import { Separator } from '@/components/primitives/separator';
-import { SidebarContent } from '@/components/side-navigation/sidebar';
-import TruncatedText from '@/components/truncated-text';
-import { StepDataDto } from '@novu/shared';
-import { PropsWithChildren } from 'react';
-import { RiArrowRightUpLine } from 'react-icons/ri';
-import { Link } from 'react-router-dom';
-
-type ConfigureStepTemplateCtaProps = PropsWithChildren & {
-  step: StepDataDto;
-  issue?: string;
-};
-export const ConfigureStepTemplateCta = (props: ConfigureStepTemplateCtaProps) => {
-  const { step, children, issue } = props;
-
-  if (issue) {
-    return (
-      <>
-        <SidebarContent>
-          <div className="flex items-center justify-between">
-            <span className="text-xs font-medium">Action required</span>
-            <Link
-              to="https://docs.novu.co/sdks/framework/typescript/steps/inApp"
-              reloadDocument
-              className="text-xs"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              <span>Help?</span>
-            </Link>
-          </div>
-          <Link to={'./edit'} relative="path" state={{ stepType: step.type }}>
-            <Button variant="outline" className="flex w-full justify-start gap-1.5 text-xs font-medium" type="button">
-              <span className="bg-destructive h-4 min-w-1 rounded-full" />
-              <TruncatedText>{issue}</TruncatedText>
-              <RiArrowRightUpLine className="text-destructive ml-auto h-4 w-4" />
-            </Button>
-          </Link>
-        </SidebarContent>
-        <Separator />
-      </>
-    );
-  }
-
-  return (
-    <>
-      <SidebarContent>{children}</SidebarContent>
-      <Separator />
-    </>
-  );
-};
diff --git a/apps/dashboard/src/components/workflow-editor/steps/configure-step-template-issue-cta.tsx b/apps/dashboard/src/components/workflow-editor/steps/configure-step-template-issue-cta.tsx
new file mode 100644
index 00000000000..2cdbce0b78c
--- /dev/null
+++ b/apps/dashboard/src/components/workflow-editor/steps/configure-step-template-issue-cta.tsx
@@ -0,0 +1,38 @@
+import { Button } from '@/components/primitives/button';
+import { SidebarContent } from '@/components/side-navigation/sidebar';
+import TruncatedText from '@/components/truncated-text';
+import { StepDataDto } from '@novu/shared';
+import { RiArrowRightUpLine } from 'react-icons/ri';
+import { Link } from 'react-router-dom';
+
+type ConfigureStepTemplateIssueCtaProps = {
+  step: StepDataDto;
+  issue: string;
+};
+export const ConfigureStepTemplateIssueCta = (props: ConfigureStepTemplateIssueCtaProps) => {
+  const { step, issue } = props;
+
+  return (
+    <SidebarContent>
+      <div className="flex items-center justify-between">
+        <span className="text-xs font-medium">Action required</span>
+        <Link
+          to="https://docs.novu.co/sdks/framework/typescript/steps/inApp"
+          reloadDocument
+          className="text-xs"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <span>Help?</span>
+        </Link>
+      </div>
+      <Link to={'./edit'} relative="path" state={{ stepType: step.type }}>
+        <Button variant="outline" className="flex w-full justify-start gap-1.5 text-xs font-medium" type="button">
+          <span className="bg-destructive h-4 min-w-1 rounded-full" />
+          <TruncatedText>{issue}</TruncatedText>
+          <RiArrowRightUpLine className="text-destructive ml-auto h-4 w-4" />
+        </Button>
+      </Link>
+    </SidebarContent>
+  );
+};