fix(dashboard): Fix double separator on step template sheet

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 />
+                </>
+              )
+            )}
           </>
         )}
 

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>
+  );
+};