style(dashboard): Refine modal, tooltip, and preview content accordion (

#7086)

apps/dashboard/src/components/confirmation-modal.tsx

@@ -10,14 +10,15 @@ import {
   DialogTitle,
   DialogFooter,
 } from '@/components/primitives/dialog';
+import { ReactNode } from 'react';
 import { RiAlertFill } from 'react-icons/ri';
 
 type ConfirmationModalProps = {
   open: boolean;
   onOpenChange: (open: boolean) => void;
   onConfirm: () => void;
   title: string;
-  description: string;
+  description: ReactNode;
   confirmButtonText: string;
   isLoading?: boolean;
 };

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';

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

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

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

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) {

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

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.`;