From f5a64e3e333312216d2025502bf00a70809854a8 Mon Sep 17 00:00:00 2001 From: desiprisg Date: Mon, 30 Dec 2024 15:30:14 +0200 Subject: [PATCH] feat(dashboard): Make the whole workflow row clickable --- .../src/components/primitives/table.tsx | 6 +- .../dashboard/src/components/workflow-row.tsx | 104 ++++++++++-------- 2 files changed, 64 insertions(+), 46 deletions(-) diff --git a/apps/dashboard/src/components/primitives/table.tsx b/apps/dashboard/src/components/primitives/table.tsx index 77312ffad51..123a0d2b3c3 100644 --- a/apps/dashboard/src/components/primitives/table.tsx +++ b/apps/dashboard/src/components/primitives/table.tsx @@ -1,6 +1,7 @@ import * as React from 'react'; import { cn } from '@/utils/ui'; +import { cva } from 'class-variance-authority'; import { ClassNameValue } from 'tailwind-merge'; interface TableProps extends React.HTMLAttributes { @@ -97,9 +98,10 @@ const TableHead = React.forwardRef>( - ({ className, ...props }, ref) => + ({ className, ...props }, ref) => ); TableCell.displayName = 'TableCell'; -export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell }; +export { Table, TableBody, TableCell, TableFooter, TableHead, TableHeader, TableRow }; diff --git a/apps/dashboard/src/components/workflow-row.tsx b/apps/dashboard/src/components/workflow-row.tsx index b8d3d502583..a19f6f1d433 100644 --- a/apps/dashboard/src/components/workflow-row.tsx +++ b/apps/dashboard/src/components/workflow-row.tsx @@ -1,18 +1,4 @@ -import { useState } from 'react'; -import { FaCode } from 'react-icons/fa6'; -import { - RiDeleteBin2Line, - RiFileCopyLine, - RiFlashlightLine, - RiGitPullRequestFill, - RiMore2Fill, - RiPauseCircleLine, - RiPlayCircleLine, - RiPulseFill, -} from 'react-icons/ri'; -import { Link } from 'react-router-dom'; -import { type ExternalToast } from 'sonner'; -import { IEnvironment, WorkflowListResponseDto } from '@novu/shared'; +import { PAUSE_MODAL_TITLE, PauseModalDescription } from '@/components/pause-workflow-dialog'; import { Badge } from '@/components/primitives/badge'; import { Button } from '@/components/primitives/button'; import { @@ -32,15 +18,30 @@ import { WorkflowSteps } from '@/components/workflow-steps'; import { WorkflowTags } from '@/components/workflow-tags'; import { useEnvironment } from '@/context/environment/hooks'; import { useDeleteWorkflow } from '@/hooks/use-delete-workflow'; +import { usePatchWorkflow } from '@/hooks/use-patch-workflow'; import { useSyncWorkflow } from '@/hooks/use-sync-workflow'; import { WorkflowOriginEnum, WorkflowStatusEnum } from '@/utils/enums'; import { buildRoute, LEGACY_ROUTES, ROUTES } from '@/utils/routes'; +import { cn } from '@/utils/ui'; +import { IEnvironment, WorkflowListResponseDto } from '@novu/shared'; +import { ComponentProps, useState } from 'react'; +import { FaCode } from 'react-icons/fa6'; +import { + RiDeleteBin2Line, + RiFileCopyLine, + RiFlashlightLine, + RiGitPullRequestFill, + RiMore2Fill, + RiPauseCircleLine, + RiPlayCircleLine, + RiPulseFill, +} from 'react-icons/ri'; +import { Link } from 'react-router-dom'; +import { type ExternalToast } from 'sonner'; import { ConfirmationModal } from './confirmation-modal'; -import { showToast } from './primitives/sonner-helpers'; -import { ToastIcon } from './primitives/sonner'; -import { usePatchWorkflow } from '@/hooks/use-patch-workflow'; -import { PauseModalDescription, PAUSE_MODAL_TITLE } from '@/components/pause-workflow-dialog'; import { DeleteWorkflowDialog } from './delete-workflow-dialog'; +import { ToastIcon } from './primitives/sonner'; +import { showToast } from './primitives/sonner-helpers'; import { TimeDisplayHoverCard } from './time-display-hover-card'; type WorkflowRowProps = { @@ -54,13 +55,15 @@ 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); +type WorkflowLinkTableCellProps = ComponentProps & { + workflow: WorkflowListResponseDto; +}; +const WorkflowLinkTableCell = (props: WorkflowLinkTableCellProps) => { + const { workflow, children, className, ...rest } = props; + const { currentEnvironment } = useEnvironment(); const isV1Workflow = workflow.origin === WorkflowOriginEnum.NOVU_CLOUD_V1; + const workflowLink = isV1Workflow ? buildRoute(LEGACY_ROUTES.EDIT_WORKFLOW, { workflowId: workflow._id, @@ -70,6 +73,23 @@ export const WorkflowRow = ({ workflow }: WorkflowRowProps) => { workflowSlug: workflow.slug, }); + return ( + + {children} + + Edit workflow + + + ); +}; + +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); + + const isV1Workflow = workflow.origin === WorkflowOriginEnum.NOVU_CLOUD_V1; const triggerWorkflowLink = isV1Workflow ? buildRoute(LEGACY_ROUTES.TEST_WORKFLOW, { workflowId: workflow._id }) : buildRoute(ROUTES.TEST_WORKFLOW, { @@ -160,37 +180,33 @@ export const WorkflowRow = ({ workflow }: WorkflowRowProps) => { }; return ( - + - +
{workflow.origin === WorkflowOriginEnum.EXTERNAL && ( )} - - - {workflow.name} - - + {workflow.name}
- + {workflow.workflowId} - - + + - - + + - - + + - + - + {new Date(workflow.updatedAt).toLocaleDateString('en-US', { year: 'numeric', @@ -198,9 +214,9 @@ export const WorkflowRow = ({ workflow }: WorkflowRowProps) => { day: 'numeric', })} - + - + { */} - @@ -286,7 +302,7 @@ export const WorkflowRow = ({ workflow }: WorkflowRowProps) => { - + ); };