[go: up one dir, main page]
Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(dashboard): Add pause modal #7046

Open
wants to merge 5 commits into
base: next
Choose a base branch
from
+63 −10
Open

feat(dashboard): Add pause modal #7046

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
0bc9586
feat(dashboard): add pause workflow functionality with confirmation m…
BiswaViraj Nov 18, 2024
a206fde
feat(workflow-editor): add confirmation modal for pausing workflow
BiswaViraj Nov 18, 2024
cf67daf
fix(badge): reorder classes for soft variant styling
BiswaViraj Nov 18, 2024
2d2bb0a
fix(workflow-editor): simplify onConfirm function in confirmation modal
BiswaViraj Nov 18, 2024
40b702c
feat(workflow-editor): replace hardcoded pause modal text with constants
BiswaViraj Nov 18, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion apps/dashboard/src/components/primitives/badge.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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: {
Expand Down
35 changes: 31 additions & 4 deletions apps/dashboard/src/components/workflow-editor/configure-workflow.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
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';
Expand All @@ -17,16 +17,33 @@ 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';

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="Proceeding will pause the workflow"
description="This workflow cannot be triggered if paused, please confirm to proceed."
confirmButtonText="Proceed"
/>
BiswaViraj marked this conversation as resolved.
Show resolved Hide resolved
<PageMeta title={workflowName} />
<motion.div
className={cn('relative flex h-full w-full flex-col')}
Expand Down Expand Up @@ -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>
)}
Expand Down
30 changes: 26 additions & 4 deletions apps/dashboard/src/components/workflow-row.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,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);

Expand All @@ -79,7 +80,7 @@ export const WorkflowRow = ({ workflow }: WorkflowRowProps) => {
workflowSlug: workflow.slug,
});

const { deleteWorkflow, isPending } = useDeleteWorkflow({
const { deleteWorkflow, isPending: isDeleteWorkflowPending } = useDeleteWorkflow({
onSuccess: () => {
showToast({
children: () => (
Expand Down Expand Up @@ -110,7 +111,7 @@ export const WorkflowRow = ({ workflow }: WorkflowRowProps) => {
});
};

const { patchWorkflow } = usePatchWorkflow({
const { patchWorkflow, isPending: isPauseWorkflowPending } = usePatchWorkflow({
onSuccess: (data) => {
showToast({
children: () => (
Expand Down Expand Up @@ -203,7 +204,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}
>
() => {
await onPauseWorkflow();
setIsPauseModalOpen(false);
}}
title="Proceeding will pause the workflow"
description="This workflow cannot be triggered if paused, please confirm to proceed."
confirmButtonText="Proceed"
isLoading={isPauseWorkflowPending}
/>
{/**
* Needs modal={false} to prevent the click freeze after the modal is closed
Expand Down Expand Up @@ -237,7 +250,16 @@ export const WorkflowRow = ({ workflow }: WorkflowRowProps) => {
</DropdownMenuGroup>
<DropdownMenuSeparator />
<DropdownMenuGroup className="*:cursor-pointer">
<DropdownMenuItem disabled={workflow.status === WorkflowStatusEnum.ERROR}>
<DropdownMenuItem
=> {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Prefer to make this an onClick handler function.

if (workflow.status === WorkflowStatusEnum.ACTIVE) {
setIsPauseModalOpen(true);
return;
}
onPauseWorkflow();
}}
disabled={workflow.status === WorkflowStatusEnum.ERROR}
>
{workflow.status === WorkflowStatusEnum.ACTIVE ? (
<>
<RiPauseCircleLine />
Expand Down
Loading