feat: reworked worklow definition page & added ui definition page (#2596

)
ballerine-io · Jul 31, 2024 · ba6f631 · ba6f631
1 parent 1ca8635
commit ba6f631
Show file tree

Hide file tree

Showing 13 changed files with 125 additions and 54 deletions.
diff --git a/apps/workflows-dashboard/src/domains/ui-definitions/query-keys.ts b/apps/workflows-dashboard/src/domains/ui-definitions/query-keys.ts
@@ -1,7 +1,12 @@
-import { fetchUIDefinitions } from '@/domains/ui-definitions/ui-definitions.api';
+import { fetchUIDefinition, fetchUIDefinitions } from '@/domains/ui-definitions/ui-definitions.api';
+import { GetUIDefinitionByIdDto } from '@/domains/ui-definitions/ui-definitions.types';
 import { createQueryKeys } from '@lukemorales/query-key-factory';
 
 export const uiDefinitionsQueryKeys = createQueryKeys('uiDefinitions', {
+  get: (query: GetUIDefinitionByIdDto) => ({
+    queryKey: [{ query }],
+    queryFn: () => fetchUIDefinition(query),
+  }),
   list: () => ({
     queryKey: [{}],
     queryFn: () => fetchUIDefinitions(),

diff --git a/apps/workflows-dashboard/src/domains/ui-definitions/ui-definitions.api.ts b/apps/workflows-dashboard/src/domains/ui-definitions/ui-definitions.api.ts
@@ -1,4 +1,5 @@
 import {
+  GetUIDefinitionByIdDto,
   IUIDefinition,
   UpdateUIDefinitionDto,
 } from '@/domains/ui-definitions/ui-definitions.types';
@@ -17,3 +18,9 @@ export const updateUIDefinition = async (dto: UpdateUIDefinitionDto) => {
 
   return result.data;
 };
+
+export const fetchUIDefinition = async (dto: GetUIDefinitionByIdDto) => {
+  const result = await request.get<IUIDefinition>(`/internal/ui-definition/${dto.uiDefinitionId}`);
+
+  return result.data;
+};
diff --git a/apps/workflows-dashboard/src/domains/ui-definitions/ui-definitions.types.ts b/apps/workflows-dashboard/src/domains/ui-definitions/ui-definitions.types.ts
@@ -20,3 +20,7 @@ export interface UpdateUIDefinitionDto {
   uiDefinitionId: string;
   uiDefinition: IUIDefinition;
 }
+
+export interface GetUIDefinitionByIdDto {
+  uiDefinitionId: string;
+}
diff --git a/apps/workflows-dashboard/src/pages/UIDefinition/UIDefinition.tsx b/apps/workflows-dashboard/src/pages/UIDefinition/UIDefinition.tsx
@@ -0,0 +1,49 @@
+import { LoadingSpinner } from '@/components/atoms/LoadingSpinner';
+import { DashboardLayout } from '@/components/layouts/DashboardLayout';
+import { useUIDefinitionQuery } from '@/pages/UIDefinition/hooks/useUIDefinitionQuery';
+import { UIDefinitionEditor } from '@/pages/WorkflowDefinition/components/UIDefinitionEditor';
+import { isAxiosError } from 'axios';
+import { Link, useParams } from 'react-router-dom';
+
+export const UIDefinition = () => {
+  const id = useParams<{ id: string }>().id;
+  const { data, isLoading, error } = useUIDefinitionQuery({ uiDefinitionId: id! });
+
+  if (isLoading) {
+    return (
+      <DashboardLayout pageName="Loading">
+        <div className="flex h-full w-full justify-center">
+          <LoadingSpinner />
+        </div>
+      </DashboardLayout>
+    );
+  }
+
+  if (isAxiosError(error)) {
+    if (error.response?.status === 404) {
+      return (
+        <DashboardLayout pageName="UI Definition">
+          <h1 className="flex flex-col gap-4">UI Definition not found.</h1>
+          <h2>
+            Back to{' '}
+            <Link to="/ui-definitions">
+              <span className="underline">list.</span>
+            </Link>
+          </h2>
+        </DashboardLayout>
+      );
+    }
+
+    return (
+      <DashboardLayout pageName="UI Definition">Failed to fetch ui definition.</DashboardLayout>
+    );
+  }
+
+  if (!data) return null;
+
+  return (
+    <DashboardLayout pageName={`UI Definition - ${data?.id}`}>
+      <UIDefinitionEditor uiDefinition={data} />
+    </DashboardLayout>
+  );
+};
diff --git a/apps/workflows-dashboard/src/pages/UIDefinition/hooks/useUIDefinitionQuery/index.ts b/apps/workflows-dashboard/src/pages/UIDefinition/hooks/useUIDefinitionQuery/index.ts
@@ -0,0 +1 @@
+export * from './useUIDefinitionQuery';
diff --git a/...flows-dashboard/src/pages/UIDefinition/hooks/useUIDefinitionQuery/useUIDefinitionQuery.ts b/...flows-dashboard/src/pages/UIDefinition/hooks/useUIDefinitionQuery/useUIDefinitionQuery.ts
@@ -0,0 +1,17 @@
+import { GetUIDefinitionByIdDto, uiDefinitionsQueryKeys } from '@/domains/ui-definitions';
+import { useQuery } from '@tanstack/react-query';
+
+export const useUIDefinitionQuery = (query: GetUIDefinitionByIdDto) => {
+  const { isLoading, data, error } = useQuery({
+    ...uiDefinitionsQueryKeys.get(query),
+    // @ts-ignore
+    retry: false,
+    keepPreviousData: true,
+  });
+
+  return {
+    isLoading,
+    data,
+    error,
+  };
+};
diff --git a/apps/workflows-dashboard/src/pages/UIDefinition/index.ts b/apps/workflows-dashboard/src/pages/UIDefinition/index.ts
@@ -0,0 +1 @@
+export * from './UIDefinition';
diff --git a/apps/workflows-dashboard/src/pages/UIDefinitions/components/UIDefinitionsTable/columns.tsx b/apps/workflows-dashboard/src/pages/UIDefinitions/components/UIDefinitionsTable/columns.tsx
@@ -2,7 +2,8 @@ import { JSONViewButton } from '@/components/molecules/JSONViewButton';
 import { IUIDefinition } from '@/domains/ui-definitions';
 import { formatDate } from '@/utils/format-date';
 import { createColumnHelper } from '@tanstack/react-table';
-import { Eye } from 'lucide-react';
+import { ArrowRightCircleIcon, Eye } from 'lucide-react';
+import { Link } from 'react-router-dom';
 
 const columnHelper = createColumnHelper<IUIDefinition>();
 
@@ -61,4 +62,12 @@ export const uiDefinitionTableColumnns = [
     cell: info => formatDate(info.getValue<Date>()),
     header: () => 'Created At',
   }),
+  columnHelper.accessor('id', {
+    cell: info => (
+      <Link to={`/ui-definitions/${info.row.original.id}`}>
+        <ArrowRightCircleIcon />
+      </Link>
+    ),
+    header: () => '',
+  }),
 ];
diff --git a/apps/workflows-dashboard/src/pages/WorkflowDefinition/WorkflowDefinition.tsx b/apps/workflows-dashboard/src/pages/WorkflowDefinition/WorkflowDefinition.tsx
@@ -5,7 +5,6 @@ import { DashboardLayout } from '@/components/layouts/DashboardLayout';
 import { XstateVisualizer } from '@/components/organisms/XstateVisualizer';
 import { IWorkflow } from '@/domains/workflows/api/workflow';
 import { EditorCard } from '@/pages/WorkflowDefinition/components/EditorCard';
-import { UIDefinitionEditor } from '@/pages/WorkflowDefinition/components/UIDefinitionEditor';
 import { WorkflowDefinitionSummaryCard } from '@/pages/WorkflowDefinition/components/WorkflowDefinitionSummaryCard';
 import { useUpgradeWorkflowDefinitionVersionMutation } from '@/pages/WorkflowDefinition/hooks/useUpgradeWorkflowDefinitionVersionMutation';
 import { useWorkflowDefinitionEdit } from '@/pages/WorkflowDefinition/hooks/useWorkflowDefinitionEdit';
@@ -83,25 +82,14 @@ export const WorkflowDefinition = () => {
           </div>
         </div>
         <div className="flex flex-row gap-2">
-          {workflowDefinitionValue && (
-            <div className="w-1/2">
-              <EditorCard
-                title="Workflow Definition"
-                value={workflowDefinitionValue}
-                onSave={handleWorkflowDefinitionSave}
-                onUpgrade={() =>
-                  upgradeWorkflowDefinitionVersion({ workflowDefinitionId: data.id! })
-                }
-              />
-            </div>
-          )}
-          {data.uiDefinitions.length ? (
-            <div className="w-1/2">
-              <UIDefinitionEditor uiDefinition={data.uiDefinitions[0]!} />
-            </div>
-          ) : null}
-        </div>
-        <div className="flex flex-row gap-2">
+          <div className="w-1/2">
+            <EditorCard
+              title="Workflow Definition"
+              value={workflowDefinitionValue || {}}
+              onSave={workflowDefinitionValue ? handleWorkflowDefinitionSave : undefined}
+              onUpgrade={() => upgradeWorkflowDefinitionVersion({ workflowDefinitionId: data.id! })}
+            />
+          </div>
           <div className="w-1/2">
             <EditorCard
               title="Config"
@@ -112,20 +100,16 @@ export const WorkflowDefinition = () => {
               onUpgrade={() => upgradeWorkflowDefinitionVersion({ workflowDefinitionId: data.id! })}
             />
           </div>
-          {workflowDefinitionExtensions && (
-            <div className="w-1/2">
-              <EditorCard
-                title="Plugins"
-                value={workflowDefinitionExtensions || {}}
-                onSave={handleWorkflowExtensionsSave}
-                onUpgrade={() =>
-                  upgradeWorkflowDefinitionVersion({ workflowDefinitionId: data.id! })
-                }
-              />
-            </div>
-          )}
         </div>
         <div className="flex flex-row gap-2">
+          <div className="w-1/2">
+            <EditorCard
+              title="Plugins"
+              value={workflowDefinitionExtensions || {}}
+              onSave={handleWorkflowExtensionsSave}
+              onUpgrade={() => upgradeWorkflowDefinitionVersion({ workflowDefinitionId: data.id! })}
+            />
+          </div>
           <div className="w-1/2">
             <EditorCard
               title="Context Schema"

diff --git a/...shboard/src/pages/WorkflowDefinition/components/UIDefinitionEditor/UIDefinitionEditor.tsx b/...shboard/src/pages/WorkflowDefinition/components/UIDefinitionEditor/UIDefinitionEditor.tsx
@@ -7,7 +7,7 @@ import { EditorCard } from '@/pages/WorkflowDefinition/components/EditorCard';
 import { useUIDefinitionEditorTabs } from '@/pages/WorkflowDefinition/components/UIDefinitionEditor/hooks/useUIDefinitionEditorTabs';
 import { useUIDefinitionElementUpdate } from '@/pages/WorkflowDefinition/components/UIDefinitionEditor/hooks/useUIDefinitionElementUpdate';
 import { useUpgradeWorkflowDefinitionVersionMutation } from '@/pages/WorkflowDefinition/hooks/useUpgradeWorkflowDefinitionVersionMutation';
-import { FunctionComponent, useMemo } from 'react';
+import { FunctionComponent } from 'react';
 
 interface UIDefinitionEditorProps {
   uiDefinition: IUIDefinition;
@@ -22,11 +22,6 @@ export const UIDefinitionEditor: FunctionComponent<UIDefinitionEditorProps> = ({
     useUIDefinitionElementUpdate(uiDefinition.workflowDefinitionId, uiDefinition);
   const { mutate: upgradeVersion } = useUpgradeWorkflowDefinitionVersionMutation();
 
-  const hasChanges = useMemo(
-    () => JSON.stringify(uiDefinition) !== JSON.stringify(uiDefinitionValue),
-    [uiDefinitionValue, uiDefinition],
-  );
-
   return (
     <EditorCard
       title="UI Definition"

diff --git a/...s/WorkflowDefinition/hooks/useUpdateUIDefinitionMutation/useUpdateUIDefinitionMutation.ts b/...s/WorkflowDefinition/hooks/useUpdateUIDefinitionMutation/useUpdateUIDefinitionMutation.ts
@@ -1,5 +1,8 @@
-import { updateUIDefinition, UpdateUIDefinitionDto } from '@/domains/ui-definitions';
-import { IWorkflowDefinition } from '@/domains/workflow-definitions';
+import {
+  uiDefinitionsQueryKeys,
+  updateUIDefinition,
+  UpdateUIDefinitionDto,
+} from '@/domains/ui-definitions';
 import { queryClient } from '@/lib/react-query/query-client';
 import { useMutation } from '@tanstack/react-query';
 import { toast } from 'sonner';
@@ -8,18 +11,9 @@ export const useUpdateUIDefinitionMutation = () => {
   return useMutation({
     mutationFn: async (dto: UpdateUIDefinitionDto) => updateUIDefinition(dto),
     onMutate(dto) {
-      const queryKeys = [
-        'workflowDefinitions',
-        'get',
-        { query: { workflowDefinitionId: dto.workflowDefinitionId } },
-      ];
+      const { queryKey } = uiDefinitionsQueryKeys.get({ uiDefinitionId: dto.uiDefinitionId });
 
-      const previousDefinition = queryClient.getQueryData<IWorkflowDefinition>(queryKeys);
-
-      queryClient.setQueryData(queryKeys, {
-        ...previousDefinition,
-        uiDefinitions: [dto.uiDefinition],
-      });
+      queryClient.setQueryData(queryKey, dto.uiDefinition);
     },
     onSuccess: () => {
       toast.success('UI definition updated successfully.');

diff --git a/apps/workflows-dashboard/src/router.tsx b/apps/workflows-dashboard/src/router.tsx
@@ -4,6 +4,7 @@ import { AlertDefinitions } from '@/pages/AlertDefinitions';
 import { Filters } from '@/pages/Filters';
 import { Overview } from '@/pages/Overview';
 import { SignIn } from '@/pages/SignIn';
+import { UIDefinition } from '@/pages/UIDefinition';
 import { UIDefinitions } from '@/pages/UIDefinitions';
 import { WorkflowDefinition } from '@/pages/WorkflowDefinition';
 import { WorkflowDefinitions } from '@/pages/WorkflowDefinitions';
@@ -48,6 +49,10 @@ export const router = createBrowserRouter([
         path: 'ui-definitions',
         Component: withSessionProtected(UIDefinitions),
       },
+      {
+        path: 'ui-definitions/:id',
+        Component: withSessionProtected(UIDefinition),
+      },
       {
         path: 'alert-definitions',
         Component: withSessionProtected(AlertDefinitions),

diff --git a/services/workflows-service/prisma/data-migrations b/services/workflows-service/prisma/data-migrations