novuhq · BiswaViraj · Nov 18, 2024 · Nov 18, 2024 · Nov 18, 2024 · Nov 18, 2024
diff --git a/apps/dashboard/src/components/primitives/badge.tsx b/apps/dashboard/src/components/primitives/badge.tsx
@@ -11,7 +11,7 @@ const badgeVariants = cva(
         destructive: 'border-transparent bg-destructive/10 text-destructive',
         success: 'border-transparent bg-success/10 text-success',
         warning: 'border-transparent bg-warning/10 text-warning',
-        soft: 'border-neutral-alpha-200 bg-neutral-alpha-200 text-foreground-500',
+        soft: 'bg-neutral-alpha-200 text-foreground-500 border-transparent',
         outline: 'border-neutral-alpha-200 bg-transparent font-normal text-foreground-600 shadow-sm',
       },
       size: {

diff --git a/apps/dashboard/src/components/workflow-editor/configure-workflow.tsx b/apps/dashboard/src/components/workflow-editor/configure-workflow.tsx
@@ -1,32 +1,49 @@
+import { useState } from 'react';
+import * as z from 'zod';
 import { useFormContext } from 'react-hook-form';
 import { motion } from 'framer-motion';
 import { RouteFill } from '../icons';
 import { Input, InputField } from '../primitives/input';
-// import { RiArrowRightSLine, RiSettingsLine } from 'react-icons/ri';
-import * as z from 'zod';
 import { Separator } from '../primitives/separator';
 import { TagInput } from '../primitives/tag-input';
 import { Textarea } from '../primitives/textarea';
 import { workflowSchema } from './schema';
 import { useTagsQuery } from '@/hooks/use-tags-query';
-// import { Button } from '../primitives/button';
 import { CopyButton } from '../primitives/copy-button';
 import { FormControl, FormField, FormItem, FormLabel, FormMessage } from '../primitives/form/form';
 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 { PageMeta } from '../page-meta';
+import { ConfirmationModal } from '../confirmation-modal';
+import { PAUSE_MODAL_DESCRIPTION, PAUSE_MODAL_TITLE } from '@/utils/constants';
 
 export function ConfigureWorkflow() {
+  const [isPauseModalOpen, setIsPauseModalOpen] = useState(false);
   const tagsQuery = useTagsQuery();
   const { isReadOnly } = useWorkflowEditorContext();
 
-  const { control, watch } = useFormContext<z.infer<typeof workflowSchema>>();
+  const { control, watch, setValue } = useFormContext<z.infer<typeof workflowSchema>>();
   const workflowName = watch('name');
 
+  const  => {
+    setValue('active', false, { shouldValidate: true, shouldDirty: true });
+  };
+
   return (
     <>
+      <ConfirmationModal
+        open={isPauseModalOpen}
+        >
+         => {
+          onPauseWorkflow();
+          setIsPauseModalOpen(false);
+        }}
+        title={PAUSE_MODAL_TITLE}
+        description={PAUSE_MODAL_DESCRIPTION}
+        confirmButtonText="Proceed"
+      />
       <PageMeta title={workflowName} />
       <motion.div
         className={cn('relative flex h-full w-full flex-col')}
@@ -56,7 +73,17 @@ export function ConfigureWorkflow() {
                   <FormLabel>Active Workflow</FormLabel>
                 </div>
                 <FormControl>
-                  <Switch checked={field.value}  disabled={isReadOnly} />
+                  <Switch
+                    checked={field.value}
+                     => {
+                      if (!checked) {
+                        setIsPauseModalOpen(true);
+                        return;
+                      }
+                      field.onChange(checked);
+                    }}
+                    disabled={isReadOnly}
+                  />
                 </FormControl>
               </FormItem>
             )}

diff --git a/apps/dashboard/src/components/workflow-row.tsx b/apps/dashboard/src/components/workflow-row.tsx
@@ -45,6 +45,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';
 
 type WorkflowRowProps = {
   workflow: WorkflowListResponseDto;
@@ -59,6 +60,7 @@ const toastOptions: ExternalToast = {
 
 export const WorkflowRow = ({ workflow }: WorkflowRowProps) => {
   const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
+  const [isPauseModalOpen, setIsPauseModalOpen] = useState(false);
   const { currentEnvironment } = useEnvironment();
   const { safeSync, isSyncable, tooltipContent, PromoteConfirmModal } = useSyncWorkflow(workflow);
 
@@ -79,7 +81,7 @@ export const WorkflowRow = ({ workflow }: WorkflowRowProps) => {
         workflowSlug: workflow.slug,
       });
 
-  const { deleteWorkflow, isPending } = useDeleteWorkflow({
+  const { deleteWorkflow, isPending: isDeleteWorkflowPending } = useDeleteWorkflow({
     onSuccess: () => {
       showToast({
         children: () => (
@@ -110,7 +112,7 @@ export const WorkflowRow = ({ workflow }: WorkflowRowProps) => {
     });
   };
 
-  const { patchWorkflow } = usePatchWorkflow({
+  const { patchWorkflow, isPending: isPauseWorkflowPending } = usePatchWorkflow({
     onSuccess: (data) => {
       showToast({
         children: () => (
@@ -203,7 +205,19 @@ export const WorkflowRow = ({ workflow }: WorkflowRowProps) => {
           title="Are you sure?"
           description={`You're about to delete the ${workflow.name}, this action cannot be undone.`}
           confirmButtonText="Delete"
-          isLoading={isPending}
+          isLoading={isDeleteWorkflowPending}
+        />
+        <ConfirmationModal
+          open={isPauseModalOpen}
+          onOpenChange={setIsPauseModalOpen}
+          onConfirm={async () => {
+            await onPauseWorkflow();
+            setIsPauseModalOpen(false);
+          }}
+          title={PAUSE_MODAL_TITLE}
+          description={PAUSE_MODAL_DESCRIPTION}
+          confirmButtonText="Proceed"
+          isLoading={isPauseWorkflowPending}
         />
         {/**
          * Needs modal={false} to prevent the click freeze after the modal is closed
@@ -237,7 +251,16 @@ export const WorkflowRow = ({ workflow }: WorkflowRowProps) => {
             </DropdownMenuGroup>
             <DropdownMenuSeparator />
             <DropdownMenuGroup className="*:cursor-pointer">
-              <DropdownMenuItem onClick={onPauseWorkflow} disabled={workflow.status === WorkflowStatusEnum.ERROR}>
+              <DropdownMenuItem
+                onClick={() => {
+                  if (workflow.status === WorkflowStatusEnum.ACTIVE) {
+                    setIsPauseModalOpen(true);
+                    return;
+                  }
+                  onPauseWorkflow();
+                }}
+                disabled={workflow.status === WorkflowStatusEnum.ERROR}
+              >
                 {workflow.status === WorkflowStatusEnum.ACTIVE ? (
                   <>
                     <RiPauseCircleLine />

diff --git a/apps/dashboard/src/utils/constants.ts b/apps/dashboard/src/utils/constants.ts
@@ -12,3 +12,6 @@ export const EXCLUDED_EDITOR_TYPES: string[] = [
   StepTypeEnum.TRIGGER,
   StepTypeEnum.CUSTOM,
 ];
+
+export const PAUSE_MODAL_TITLE = 'Proceeding will pause the workflow';
+export const PAUSE_MODAL_DESCRIPTION = 'This workflow cannot be triggered if paused, please confirm to proceed.';
-export const PAUSE_MODAL_DESCRIPTION = 'This workflow cannot be triggered if paused, please confirm to proceed.';
+export const PAUSE_MODAL_DESCRIPTION = 'The ${workflowName} cannot be triggered if paused, please confirm to proceed.';
-export const PAUSE_MODAL_DESCRIPTION = 'This workflow cannot be triggered if paused, please confirm to proceed.';
+export const PAUSE_MODAL_DESCRIPTION = 'The ${workflowName} cannot be triggered if paused, please confirm to proceed.';