From cef319d4c3341e2168fb5c9da2177c2014b1d6a3 Mon Sep 17 00:00:00 2001
From: Richard Fontein <32132657+rifont@users.noreply.github.com>
Date: Wed, 20 Nov 2024 15:32:15 +0100
Subject: [PATCH] style(dashboard): Refine modal, tooltip, and preview content
 accordion (#7086)

---
 .../src/components/confirmation-modal.tsx        |  3 ++-
 .../src/components/pause-workflow-dialog.tsx     | 13 +++++++++++++
 .../src/components/primitives/hover-to-copy.tsx  |  1 +
 .../workflow-editor/configure-workflow.tsx       |  4 ++--
 .../workflow-editor/steps/configure-step.tsx     | 13 +++++++++++--
 .../steps/in-app/in-app-editor-preview.tsx       | 16 +++++++++++++++-
 apps/dashboard/src/components/workflow-row.tsx   |  4 ++--
 apps/dashboard/src/utils/constants.ts            |  5 -----
 8 files changed, 46 insertions(+), 13 deletions(-)
 create mode 100644 apps/dashboard/src/components/pause-workflow-dialog.tsx

diff --git a/apps/dashboard/src/components/confirmation-modal.tsx b/apps/dashboard/src/components/confirmation-modal.tsx
index 0bacdbd4029..b3c5a34a490 100644
--- a/apps/dashboard/src/components/confirmation-modal.tsx
+++ b/apps/dashboard/src/components/confirmation-modal.tsx
@@ -10,6 +10,7 @@ import {
   DialogTitle,
   DialogFooter,
 } from '@/components/primitives/dialog';
+import { ReactNode } from 'react';
 import { RiAlertFill } from 'react-icons/ri';
 
 type ConfirmationModalProps = {
@@ -17,7 +18,7 @@ type ConfirmationModalProps = {
   onOpenChange: (open: boolean) => void;
   onConfirm: () => void;
   title: string;
-  description: string;
+  description: ReactNode;
   confirmButtonText: string;
   isLoading?: boolean;
 };
diff --git a/apps/dashboard/src/components/pause-workflow-dialog.tsx b/apps/dashboard/src/components/pause-workflow-dialog.tsx
new file mode 100644
index 00000000000..d88c4bbed83
--- /dev/null
+++ b/apps/dashboard/src/components/pause-workflow-dialog.tsx
@@ -0,0 +1,13 @@
+import TruncatedText from './truncated-text';
+
+export const PauseModalDescription = ({ workflowName }: { workflowName: string }) => (
+  <>
+    Pausing the{' '}
+    <strong>
+      <TruncatedText className="max-w-[32ch]">{workflowName}</TruncatedText>
+    </strong>{' '}
+    workflow will immediately prevent you from being able to trigger it.
+  </>
+);
+
+export const PAUSE_MODAL_TITLE = 'Proceeding will pause the workflow';
diff --git a/apps/dashboard/src/components/primitives/hover-to-copy.tsx b/apps/dashboard/src/components/primitives/hover-to-copy.tsx
index c4e599a9d37..fe1e3405d00 100644
--- a/apps/dashboard/src/components/primitives/hover-to-copy.tsx
+++ b/apps/dashboard/src/components/primitives/hover-to-copy.tsx
@@ -24,6 +24,7 @@ export const HoverToCopy = (props: HoverToCopyProps) => {
     <Tooltip>
       <TooltipTrigger aria-label="Copy to clipboard" onClick={copyToClipboard} {...rest} />
       <TooltipContent
+        side="right"
         onPointerDownOutside={(e) => {
           e.preventDefault();
         }}
diff --git a/apps/dashboard/src/components/workflow-editor/configure-workflow.tsx b/apps/dashboard/src/components/workflow-editor/configure-workflow.tsx
index 55ab8242eab..2e4bbe8b686 100644
--- a/apps/dashboard/src/components/workflow-editor/configure-workflow.tsx
+++ b/apps/dashboard/src/components/workflow-editor/configure-workflow.tsx
@@ -20,7 +20,7 @@ import { cn } from '@/utils/ui';
 import { SidebarContent, SidebarHeader } from '@/components/side-navigation/Sidebar';
 import { PageMeta } from '../page-meta';
 import { ConfirmationModal } from '../confirmation-modal';
-import { PAUSE_MODAL_DESCRIPTION, PAUSE_MODAL_TITLE } from '@/utils/constants';
+import { PauseModalDescription, PAUSE_MODAL_TITLE } from '@/components/pause-workflow-dialog';
 import { buildRoute, ROUTES } from '@/utils/routes';
 import { useEnvironment } from '@/context/environment/hooks';
 
@@ -70,7 +70,7 @@ export function ConfigureWorkflow() {
           setIsPauseModalOpen(false);
         }}
         title={PAUSE_MODAL_TITLE}
-        description={PAUSE_MODAL_DESCRIPTION(workflowName)}
+        description={<PauseModalDescription workflowName={workflowName} />}
         confirmButtonText="Proceed"
       />
       <PageMeta title={workflowName} />
diff --git a/apps/dashboard/src/components/workflow-editor/steps/configure-step.tsx b/apps/dashboard/src/components/workflow-editor/steps/configure-step.tsx
index 46fac797a1a..deed3adaeb2 100644
--- a/apps/dashboard/src/components/workflow-editor/steps/configure-step.tsx
+++ b/apps/dashboard/src/components/workflow-editor/steps/configure-step.tsx
@@ -14,6 +14,7 @@ import { ConfigureStepContent } from './configure-step-content';
 import { PageMeta } from '@/components/page-meta';
 import { StepEditorProvider } from '@/components/workflow-editor/steps/step-editor-provider';
 import { EXCLUDED_EDITOR_TYPES } from '@/utils/constants';
+import TruncatedText from '@/components/truncated-text';
 
 const ConfigureStepInternal = () => {
   const { step } = useStep();
@@ -84,8 +85,16 @@ const ConfigureStepInternal = () => {
                 open={isDeleteModalOpen}
                 onOpenChange={setIsDeleteModalOpen}
                 onConfirm={onDeleteStep}
-                title="Are you sure?"
-                description={`You're about to delete the ${step?.name}, this action cannot be undone.`}
+                title="Proceeding will delete the step"
+                description={
+                  <>
+                    You're about to delete the{' '}
+                    <strong>
+                      <TruncatedText className="max-w-[32ch]">{step?.name}</TruncatedText>
+                    </strong>{' '}
+                    step, this action is permanent.
+                  </>
+                }
                 confirmButtonText="Delete"
               />
               <Button
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
index 89f4c6af0c4..c9c5d6012b3 100644
--- 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
@@ -9,6 +9,14 @@ import { InAppPreview } from '@/components/workflow-editor/in-app-preview';
 import { loadLanguage } from '@uiw/codemirror-extensions-langs';
 import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/components/primitives/accordion';
 
+const getInitialAccordionValue = (value: string) => {
+  try {
+    return Object.keys(JSON.parse(value)).length > 0 ? 'payload' : undefined;
+  } catch (e) {
+    return undefined;
+  }
+};
+
 type InAppEditorPreviewProps = {
   value: string;
   onChange: (value: string) => void;
@@ -18,11 +26,17 @@ type InAppEditorPreviewProps = {
 };
 export const InAppEditorPreview = (props: InAppEditorPreviewProps) => {
   const { value, onChange, previewData, applyPreview, isPreviewLoading } = props;
-  const [accordionValue, setAccordionValue] = useState('payload');
+  const [accordionValue, setAccordionValue] = useState<string | undefined>(getInitialAccordionValue(value));
   const [payloadError, setPayloadError] = useState('');
   const [height, setHeight] = useState(0);
   const contentRef = useRef<HTMLDivElement>(null);
 
+  useEffect(() => {
+    setAccordionValue(getInitialAccordionValue(value));
+  }, [value]);
+
+  console.log({ value });
+
   useEffect(() => {
     setTimeout(() => {
       if (contentRef.current) {
diff --git a/apps/dashboard/src/components/workflow-row.tsx b/apps/dashboard/src/components/workflow-row.tsx
index 9f0e775fa1a..667b271cae9 100644
--- a/apps/dashboard/src/components/workflow-row.tsx
+++ b/apps/dashboard/src/components/workflow-row.tsx
@@ -39,7 +39,7 @@ import { ConfirmationModal } from './confirmation-modal';
 import { showToast } from './primitives/sonner-helpers';
 import { ToastIcon } from './primitives/sonner';
 import { usePatchWorkflow } from '@/hooks/use-patch-workflow';
-import { PAUSE_MODAL_DESCRIPTION, PAUSE_MODAL_TITLE } from '@/utils/constants';
+import { PauseModalDescription, PAUSE_MODAL_TITLE } from '@/components/pause-workflow-dialog';
 
 type WorkflowRowProps = {
   workflow: WorkflowListResponseDto;
@@ -215,7 +215,7 @@ export const WorkflowRow = ({ workflow }: WorkflowRowProps) => {
             setIsPauseModalOpen(false);
           }}
           title={PAUSE_MODAL_TITLE}
-          description={PAUSE_MODAL_DESCRIPTION(workflow.name)}
+          description={<PauseModalDescription workflowName={workflow.name} />}
           confirmButtonText="Proceed"
           isLoading={isPauseWorkflowPending}
         />
diff --git a/apps/dashboard/src/utils/constants.ts b/apps/dashboard/src/utils/constants.ts
index 8093dbefe39..af471d31d10 100644
--- a/apps/dashboard/src/utils/constants.ts
+++ b/apps/dashboard/src/utils/constants.ts
@@ -12,8 +12,3 @@ export const EXCLUDED_EDITOR_TYPES: string[] = [
   StepTypeEnum.TRIGGER,
   StepTypeEnum.CUSTOM,
 ];
-
-export const PAUSE_MODAL_TITLE = 'Proceeding will pause the workflow';
-// convert it to accept dynamic workflow name
-export const PAUSE_MODAL_DESCRIPTION = (workflowName: string) =>
-  `The ${workflowName} cannot be triggered if paused, please confirm to proceed.`;