feat: added clone workflow definition button (#2594)

* feat: added clone workflow definition button

* feat: added clone button to workflows table

apps/workflows-dashboard/package.json

@@ -15,6 +15,7 @@
   },
   "dependencies": {
     "@ballerine/common": "^0.9.16",
+    "@ballerine/ui": "^0.5.11",
     "@lukemorales/query-key-factory": "^1.0.3",
     "@radix-ui/react-avatar": "^1.0.3",
     "@radix-ui/react-dialog": "1.0.4",
@@ -26,6 +27,7 @@
     "@radix-ui/react-separator": "^1.0.2",
     "@radix-ui/react-slot": "^1.0.1",
     "@radix-ui/react-tabs": "^1.0.4",
+    "@rjsf/utils": "^5.9.0",
     "@tanstack/react-query": "^4.28.0",
     "@tanstack/react-table": "^8.9.2",
     "@xstate/inspect": "^0.7.1",

apps/workflows-dashboard/src/components/molecules/CloneWorkflowDefinitionButton/CloneWorkflowDefinitionButton.tsx

@@ -0,0 +1,51 @@
+import { Button } from '@/components/atoms/Button';
+import { Dialog, DialogContent, DialogTrigger } from '@/components/atoms/Dialog';
+import {
+  formSchema,
+  uiSchema,
+} from '@/components/molecules/CloneWorkflowDefinitionButton/form-schema';
+import { useCloneWorkflowDefinitionMutation } from '@/pages/WorkflowDefinitions/hooks/useCloneWorkflowDefinitionMutation';
+import { DynamicForm } from '@ballerine/ui';
+import { FunctionComponent, useCallback, useEffect, useState } from 'react';
+
+interface ICloneWorkflowDefinitionButtonProps {
+  workflowDefinitionId: string;
+}
+
+export const CloneWorkflowDefinitionButton: FunctionComponent<
+  ICloneWorkflowDefinitionButtonProps
+> = ({ workflowDefinitionId }) => {
+  const [isDialogOpen, setIsDialogOpen] = useState(false);
+  const { mutate, isLoading, isSuccess } = useCloneWorkflowDefinitionMutation();
+
+  const handleSubmit = useCallback(
+    async (formData: Record<string, any>) => {
+      const values: { name: string; displayName: string } = formData as any;
+
+      mutate({ workflowDefinitionId, ...values });
+    },
+    [workflowDefinitionId, mutate],
+  );
+
+  useEffect(() => {
+    if (isSuccess) {
+      setIsDialogOpen(false);
+    }
+  }, [isSuccess]);
+
+  return (
+    <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
+      <DialogTrigger asChild>
+        <Button>Clone</Button>
+      </DialogTrigger>
+      <DialogContent>
+        <DynamicForm
+          schema={formSchema}
+          uiSchema={uiSchema}
+          disabled={isLoading}
+          onSubmit={handleSubmit}
+        />
+      </DialogContent>
+    </Dialog>
+  );
+};

apps/workflows-dashboard/src/components/molecules/CloneWorkflowDefinitionButton/form-schema.ts

@@ -0,0 +1,25 @@
+import { RJSFSchema, UiSchema } from '@rjsf/utils';
+
+export const formSchema: RJSFSchema = {
+  type: 'object',
+  required: ['name', 'displayName'],
+  properties: {
+    name: {
+      type: 'string',
+    },
+    displayName: {
+      type: 'string',
+    },
+  },
+};
+
+export const uiSchema: UiSchema = {
+  name: {
+    'ui:placeholder': 'ballerine',
+    'ui:label': 'Name',
+  },
+  displayName: {
+    'ui:placeholder': 'Ballerine',
+    'ui:label': 'Display Name',
+  },
+};

apps/workflows-dashboard/src/components/molecules/CloneWorkflowDefinitionButton/index.ts

@@ -0,0 +1 @@
+export * from './CloneWorkflowDefinitionButton';

apps/workflows-dashboard/src/components/molecules/WorkflowsTable/columns.tsx

@@ -1,4 +1,5 @@
 import { HealthIndicator } from '@/components/atoms/HealthIndicator';
+import { CloneWorkflowDefinitionButton } from '@/components/molecules/CloneWorkflowDefinitionButton';
 import { JSONViewButton } from '@/components/molecules/JSONViewButton';
 import { DataTableColumnHeader } from '@/components/molecules/WorkflowsTable/components/DataTableColumnHeader';
 import { StateUpdaterColumn } from '@/components/molecules/WorkflowsTable/components/StateUpdaterColumn';
@@ -20,6 +21,11 @@ export const defaultColumns: WorkflowTableColumnDef<IWorkflow>[] = [
       <DataTableColumnHeader column={column} title="Workflow Definition Name" />
     ),
   },
+  {
+    accessorKey: 'workflowDefinitionId',
+    cell: info => <CloneWorkflowDefinitionButton workflowDefinitionId={info.getValue<string>()} />,
+    header: '',
+  },
   {
     accessorKey: 'status',
     cell: info => (

apps/workflows-dashboard/src/components/molecules/WorkflowsTable/types.ts

@@ -16,7 +16,8 @@ export type WorkflowTableColumnKeys =
   | 'view-workflow'
   | 'resolvedAt'
   | 'createdBy'
-  | 'createdAt';
+  | 'createdAt'
+  | 'workflowDefinitionId';
 
 export type WorkflowTableColumnDef<TData> = Omit<ColumnDef<TData>, 'accessorKey'> & {
   accessorFn?: AccessorFnColumnDef<TData>['accessorFn'];

apps/workflows-dashboard/src/domains/workflow-definitions/workflow-definitions/workflow-definitions.api.ts

@@ -1,4 +1,5 @@
 import {
+  CloneWorkflowDefinitionByIdDto,
   GetUIDefinitionQuery,
   GetWorkflowDefinitionDto,
   GetWorkflowDefinitionsListDto,
@@ -68,3 +69,12 @@ export const upgradeWorkflowDefinitionVersionById = async (
 
   return result.data;
 };
+
+export const cloneWorkflowDefinitionById = async (dto: CloneWorkflowDefinitionByIdDto) => {
+  const result = await request.post(`/workflow-definition/${dto.workflowDefinitionId}/copy`, {
+    name: dto.name,
+    displayName: dto.displayName,
+  });
+
+  return result.data;
+};

apps/workflows-dashboard/src/domains/workflow-definitions/workflow-definitions/workflow-definitions.types.ts

@@ -43,3 +43,9 @@ export interface UpdateWorkflowDefinitionExtensionsByIdDto {
 export interface UpgradeWorkflowDefinitionVersionByIdDto {
   workflowDefinitionId: string;
 }
+
+export interface CloneWorkflowDefinitionByIdDto {
+  workflowDefinitionId: string;
+  name: string;
+  displayName: string;
+}

apps/workflows-dashboard/src/pages/WorkflowDefinitions/components/molecules/WorkflowDefinitionsTable/columns.tsx

@@ -1,3 +1,4 @@
+import { CloneWorkflowDefinitionButton } from '@/components/molecules/CloneWorkflowDefinitionButton';
 import { JSONViewButton } from '@/components/molecules/JSONViewButton';
 import { IWorkflowDefinition } from '@/domains/workflow-definitions';
 import { valueOrNA } from '@/utils/value-or-na';
@@ -74,6 +75,10 @@ export const workflowDefinitionsTableColumns = [
     cell: info => info.getValue<number>(),
     header: () => 'Version',
   }),
+  columnHelper.accessor('id', {
+    cell: info => <CloneWorkflowDefinitionButton workflowDefinitionId={info.getValue()} />,
+    header: () => '',
+  }),
   columnHelper.accessor('id', {
     cell: info => (
       <Link to={`/workflow-definitions/${info.row.original.id}`}>

apps/workflows-dashboard/src/pages/WorkflowDefinitions/hooks/useCloneWorkflowDefinitionMutation/index.ts

@@ -0,0 +1 @@
+export * from './useCloneWorkflowDefinitionMutation';

apps/workflows-dashboard/src/pages/WorkflowDefinitions/hooks/useCloneWorkflowDefinitionMutation/useCloneWorkflowDefinitionMutation.ts

@@ -0,0 +1,21 @@
+import {
+  cloneWorkflowDefinitionById,
+  CloneWorkflowDefinitionByIdDto,
+} from '@/domains/workflow-definitions';
+import { queryClient } from '@/lib/react-query/query-client';
+import { useMutation } from '@tanstack/react-query';
+import { toast } from 'sonner';
+
+export const useCloneWorkflowDefinitionMutation = () => {
+  return useMutation({
+    mutationFn: async (dto: CloneWorkflowDefinitionByIdDto) => cloneWorkflowDefinitionById(dto),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['workflowDefinitions'] });
+
+      toast.success('Workflow Definition cloned succesfully.');
+    },
+    onError: () => {
+      toast.error('Failed to clone Workflow Definition.');
+    },
+  });
+};