chore(dashboard): Cleanup step related components

novuhq · Nov 25, 2024 · 6075ff9 · 6075ff9
1 parent b7c1267
commit 6075ff9
Show file tree

Hide file tree

Showing 7 changed files with 76 additions and 62 deletions.
diff --git a/apps/dashboard/src/components/side-navigation/side-navigation.tsx b/apps/dashboard/src/components/side-navigation/side-navigation.tsx
@@ -19,7 +19,7 @@ import { buildRoute, LEGACY_ROUTES, ROUTES } from '@/utils/routes';
 import { SubscribersStayTunedModal } from './subscribers-stay-tuned-modal';
 import { TelemetryEvent } from '@/utils/telemetry';
 import { useTelemetry } from '@/hooks/use-telemetry';
-import { SidebarContent } from '@/components/side-navigation/Sidebar';
+import { SidebarContent } from '@/components/side-navigation/sidebar';
 
 const linkVariants = cva(
   `flex items-center gap-2 text-sm py-1.5 px-2 rounded-lg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring cursor-pointer`,

diff --git a/...rc/components/side-navigation/Sidebar.tsx → ...rc/components/side-navigation/sidebar.tsx b/...rc/components/side-navigation/Sidebar.tsx → ...rc/components/side-navigation/sidebar.tsx
diff --git a/apps/dashboard/src/components/workflow-editor/configure-workflow.tsx b/apps/dashboard/src/components/workflow-editor/configure-workflow.tsx
@@ -17,7 +17,7 @@ import { FormControl, FormField, FormItem, FormLabel, FormMessage } from '../pri
 import { Switch } from '../primitives/switch';
 import { useWorkflowEditorContext } from '@/components/workflow-editor/hooks';
 import { cn } from '@/utils/ui';
-import { SidebarContent, SidebarHeader } from '@/components/side-navigation/Sidebar';
+import { SidebarContent, SidebarHeader } from '@/components/side-navigation/sidebar';
 import { PageMeta } from '../page-meta';
 import { ConfirmationModal } from '../confirmation-modal';
 import { PauseModalDescription, PAUSE_MODAL_TITLE } from '@/components/pause-workflow-dialog';

diff --git a/apps/dashboard/src/components/workflow-editor/steps/configure-step-content.tsx b/apps/dashboard/src/components/workflow-editor/steps/configure-step-content.tsx
@@ -1,17 +1,17 @@
+import { StepTypeEnum } from '@novu/shared';
 import { useMemo } from 'react';
+import { RiArrowRightSLine, RiPencilRuler2Fill } from 'react-icons/ri';
 import { Link } from 'react-router-dom';
-import { RiArrowRightSLine, RiArrowRightUpLine, RiPencilRuler2Fill } from 'react-icons/ri';
-import { StepTypeEnum } from '@novu/shared';
 
-import { Button } from '../../primitives/button';
-import { Separator } from '../../primitives/separator';
-import { CommonFields } from './common-fields';
-import { SidebarContent } from '@/components/side-navigation/Sidebar';
-import { ConfigureInAppPreview } from './configure-in-app-preview';
-import { SdkBanner } from './sdk-banner';
-import { useStep } from './use-step';
-import { getFirstControlsErrorMessage, getFirstBodyErrorMessage } from '../step-utils';
+import { Button } from '@/components/primitives/button';
+import { Separator } from '@/components/primitives/separator';
+import { SidebarContent } from '@/components/side-navigation/sidebar';
+import { getFirstBodyErrorMessage, getFirstControlsErrorMessage } from '@/components/workflow-editor/step-utils';
+import { CommonFields } from '@/components/workflow-editor/steps/common-fields';
+import { SdkBanner } from '@/components/workflow-editor/steps/sdk-banner';
+import { useStep } from '@/components/workflow-editor/steps/use-step';
 import { EXCLUDED_EDITOR_TYPES } from '@/utils/constants';
+import { ConfigureInAppStepTemplate } from '@/components/workflow-editor/steps/in-app/configure-in-app-step-template';
 
 export const ConfigureStepContent = () => {
   const { step } = useStep();
@@ -22,54 +22,7 @@ export const ConfigureStepContent = () => {
   );
 
   if (step?.type === StepTypeEnum.IN_APP) {
-    return (
-      <>
-        <SidebarContent>
-          <CommonFields />
-        </SidebarContent>
-        <Separator />
-        <SidebarContent>
-          <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">
-              <RiPencilRuler2Fill className="h-4 w-4 text-neutral-600" />
-              Configure in-app template <RiArrowRightSLine className="ml-auto h-4 w-4 text-neutral-600" />
-            </Button>
-          </Link>
-
-          {!firstError && <ConfigureInAppPreview />}
-        </SidebarContent>
-        {firstError && (
-          <>
-            <Separator />
-            <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" />
-                  <span className="overflow-hidden text-ellipsis">{firstError}</span>
-                  <RiArrowRightUpLine className="text-destructive ml-auto h-4 w-4" />
-                </Button>
-              </Link>
-            </SidebarContent>
-          </>
-        )}
-      </>
-    );
+    return <ConfigureInAppStepTemplate step={step} issue={firstError} />;
   }
 
   return (

diff --git a/apps/dashboard/src/components/workflow-editor/steps/configure-step.tsx b/apps/dashboard/src/components/workflow-editor/steps/configure-step.tsx
@@ -4,7 +4,7 @@ import { RiArrowLeftSLine, RiCloseFill, RiDeleteBin2Line } from 'react-icons/ri'
 import { motion } from 'framer-motion';
 import { Button } from '@/components/primitives/button';
 import { Separator } from '@/components/primitives/separator';
-import { SidebarFooter, SidebarHeader } from '@/components/side-navigation/Sidebar';
+import { SidebarFooter, SidebarHeader } from '@/components/side-navigation/sidebar';
 import { useWorkflowEditorContext } from '@/components/workflow-editor/hooks';
 import { useEnvironment } from '@/context/environment/hooks';
 import { buildRoute, ROUTES } from '@/utils/routes';

diff --git a/...editor/steps/configure-in-app-preview.tsx → .../in-app/configure-in-app-step-preview.tsx b/...editor/steps/configure-in-app-preview.tsx → .../in-app/configure-in-app-step-preview.tsx
@@ -13,7 +13,7 @@ import {
 import { useStepEditorContext } from '@/components/workflow-editor/steps/hooks';
 import { InAppRenderOutput } from '@novu/shared';
 
-export function ConfigureInAppPreview() {
+export function ConfigureInAppStepPreview() {
   const { previewStep, data, isPending: isPreviewPending } = usePreviewStep();
   const { step, isPendingStep } = useStepEditorContext();
 

diff --git a/.../dashboard/src/components/workflow-editor/steps/in-app/configure-in-app-step-template.tsx b/.../dashboard/src/components/workflow-editor/steps/in-app/configure-in-app-step-template.tsx
@@ -0,0 +1,61 @@
+import { Button } from '@/components/primitives/button';
+import { Separator } from '@/components/primitives/separator';
+import { SidebarContent } from '@/components/side-navigation/sidebar';
+import { CommonFields } from '@/components/workflow-editor/steps/common-fields';
+import { ConfigureInAppStepPreview } from '@/components/workflow-editor/steps/in-app/configure-in-app-step-preview';
+import { Step } from '@/utils/types';
+import { RiPencilRuler2Fill, RiArrowRightSLine, RiArrowRightUpLine } from 'react-icons/ri';
+import { Link } from 'react-router-dom';
+
+type ConfigureInAppStepTemplateProps = {
+  step: Step;
+  issue?: string;
+};
+export const ConfigureInAppStepTemplate = (props: ConfigureInAppStepTemplateProps) => {
+  const { step, issue } = props;
+
+  return (
+    <>
+      <SidebarContent>
+        <CommonFields />
+      </SidebarContent>
+      <Separator />
+      <SidebarContent>
+        <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">
+            <RiPencilRuler2Fill className="h-4 w-4 text-neutral-600" />
+            Configure in-app template <RiArrowRightSLine className="ml-auto h-4 w-4 text-neutral-600" />
+          </Button>
+        </Link>
+
+        {!issue && <ConfigureInAppStepPreview />}
+      </SidebarContent>
+      {issue && (
+        <>
+          <Separator />
+          <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" />
+                <span className="overflow-hidden text-ellipsis">{issue}</span>
+                <RiArrowRightUpLine className="text-destructive ml-auto h-4 w-4" />
+              </Button>
+            </Link>
+          </SidebarContent>
+        </>
+      )}
+    </>
+  );
+};