Epic/workflow dashboard

apps/backoffice-v2/CHANGELOG.md

@@ -1,5 +1,31 @@
 # @ballerine/backoffice-v2
 
+## 0.7.21
+
+### Patch Changes
+
+- bump
+- Updated dependencies
+  - @ballerine/[email protected]
+  - @ballerine/[email protected]
+  - @ballerine/[email protected]
+  - @ballerine/[email protected]
+  - @ballerine/[email protected]
+  - @ballerine/[email protected]
+
+## 0.7.20
+
+### Patch Changes
+
+- Bump
+- Updated dependencies
+  - @ballerine/[email protected]
+  - @ballerine/[email protected]
+  - @ballerine/[email protected]
+  - @ballerine/[email protected]
+  - @ballerine/[email protected]
+  - @ballerine/[email protected]
+
 ## 0.7.19
 
 ### Patch Changes

apps/backoffice-v2/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ballerine/backoffice-v2",
-  "version": "0.7.19",
+  "version": "0.7.21",
   "description": "Ballerine - Backoffice",
   "homepage": "https://github.com/ballerine-io/ballerine",
   "repository": {
@@ -50,12 +50,12 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@ballerine/blocks": "0.2.6",
-    "@ballerine/common": "0.9.12",
-    "@ballerine/react-pdf-toolkit": "^1.2.6",
-    "@ballerine/ui": "^0.5.6",
-    "@ballerine/workflow-browser-sdk": "0.6.20",
-    "@ballerine/workflow-node-sdk": "0.6.20",
+    "@ballerine/blocks": "0.2.8",
+    "@ballerine/common": "0.9.14",
+    "@ballerine/react-pdf-toolkit": "^1.2.8",
+    "@ballerine/ui": "^0.5.8",
+    "@ballerine/workflow-browser-sdk": "0.6.22",
+    "@ballerine/workflow-node-sdk": "0.6.22",
     "@fontsource/inter": "^4.5.15",
     "@formkit/auto-animate": "1.0.0-beta.5",
     "@hookform/resolvers": "^3.1.0",
@@ -121,8 +121,8 @@
     "zod": "^3.22.3"
   },
   "devDependencies": {
-    "@ballerine/config": "^1.1.5",
-    "@ballerine/eslint-config-react": "^2.0.5",
+    "@ballerine/config": "^1.1.7",
+    "@ballerine/eslint-config-react": "^2.0.7",
     "@cspell/cspell-types": "^6.31.1",
     "@faker-js/faker": "^7.6.0",
     "@playwright/test": "^1.32.1",

apps/backoffice-v2/src/lib/blocks/hooks/useDocumentBlocks/useDocumentBlocks.tsx

@@ -312,7 +312,7 @@ export const useDocumentBlocks = ({
         const entityNameOrNA = valueOrNA(toTitleCase(workflow?.entity?.name ?? ''));
         const categoryOrNA = valueOrNA(toTitleCase(category ?? ''));
         const documentTypeOrNA = valueOrNA(toTitleCase(docType ?? ''));
-        const documentNameOrNA = `${categoryOrNA} ${
+        const documentNameOrNA = `${categoryOrNA} - ${
           withEntityNameInHeader ? '' : ` ${documentTypeOrNA}`
         }`;
         const headerCell = createBlocksTyped()

apps/kyb-app/CHANGELOG.md

@@ -1,5 +1,27 @@
 # kyb-app
 
+## 0.3.22
+
+### Patch Changes
+
+- bump
+- Updated dependencies
+  - @ballerine/[email protected]
+  - @ballerine/[email protected]
+  - @ballerine/[email protected]
+  - @ballerine/[email protected]
+
+## 0.3.21
+
+### Patch Changes
+
+- Bump
+- Updated dependencies
+  - @ballerine/[email protected]
+  - @ballerine/[email protected]
+  - @ballerine/[email protected]
+  - @ballerine/[email protected]
+
 ## 0.3.20
 
 ### Patch Changes

apps/kyb-app/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ballerine/kyb-app",
   "private": true,
-  "version": "0.3.20",
+  "version": "0.3.22",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -14,10 +14,10 @@
     "test:dev": "vitest"
   },
   "dependencies": {
-    "@ballerine/common": "^0.9.12",
-    "@ballerine/blocks": "0.2.6",
-    "@ballerine/ui": "0.5.6",
-    "@ballerine/workflow-browser-sdk": "0.6.20",
+    "@ballerine/common": "^0.9.14",
+    "@ballerine/blocks": "0.2.8",
+    "@ballerine/ui": "0.5.8",
+    "@ballerine/workflow-browser-sdk": "0.6.22",
     "@lukemorales/query-key-factory": "^1.0.3",
     "@radix-ui/react-icons": "^1.3.0",
     "@rjsf/core": "^5.9.0",
@@ -58,8 +58,8 @@
     "zod": "^3.21.4"
   },
   "devDependencies": {
-    "@ballerine/config": "^1.1.5",
-    "@ballerine/eslint-config-react": "^2.0.5",
+    "@ballerine/config": "^1.1.7",
+    "@ballerine/eslint-config-react": "^2.0.7",
     "@jest/globals": "^29.7.0",
     "@sentry/vite-plugin": "^2.9.0",
     "@testing-library/jest-dom": "^6.1.4",

apps/workflows-dashboard/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @ballerine/workflows-dashboard
 
+## 0.2.7
+
+### Patch Changes
+
+- bump
+- Updated dependencies
+  - @ballerine/[email protected]
+
+## 0.2.6
+
+### Patch Changes
+
+- Bump
+
 ## 0.2.5
 
 ### Patch Changes

apps/workflows-dashboard/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ballerine/workflows-dashboard",
   "private": false,
-  "version": "0.2.5",
+  "version": "0.2.7",
   "type": "module",
   "scripts": {
     "spellcheck": "cspell \"*\"",
@@ -14,6 +14,7 @@
     "test": "NODE_ENV=test jest"
   },
   "dependencies": {
+    "@ballerine/common": "^0.9.14",
     "@lukemorales/query-key-factory": "^1.0.3",
     "@radix-ui/react-avatar": "^1.0.3",
     "@radix-ui/react-dialog": "1.0.4",
@@ -36,6 +37,7 @@
     "cmdk": "^0.2.0",
     "dayjs": "^1.11.6",
     "install": "^0.13.0",
+    "jsoneditor": "^10.1.0",
     "lodash": "^4.17.21",
     "lucide-react": "^0.144.0",
     "react": "^18.2.0",
@@ -45,6 +47,7 @@
     "react-json-view": "^1.21.3",
     "react-router-dom": "^6.11.2",
     "recharts": "^2.7.2",
+    "string-ts": "^1.2.0",
     "tailwind-merge": "^1.13.2",
     "tailwindcss-animate": "^1.0.5",
     "use-query-params": "^2.2.1",
@@ -53,12 +56,13 @@
     "zod": "^3.22.3"
   },
   "devDependencies": {
-    "@ballerine/config": "^1.1.5",
-    "@ballerine/eslint-config-react": "^2.0.5",
+    "@ballerine/config": "^1.1.7",
+    "@ballerine/eslint-config-react": "^2.0.7",
     "@cspell/cspell-types": "^6.31.1",
     "@types/axios": "^0.14.0",
     "@types/classnames": "^2.3.1",
     "@types/jest": "^26.0.19",
+    "@types/jsoneditor": "^9.9.5",
     "@types/lodash": "^4.14.191",
     "@types/moment": "^2.13.0",
     "@types/node": "^20.3.1",

apps/workflows-dashboard/src/common/hooks/useWorkflowDefinitionQuery/useWorkflowDefinitionQuery.ts

@@ -0,0 +1,19 @@
+import { workflowDefinitionsQueryKeys } from '@/domains/workflow-definitions';
+import { useQuery } from '@tanstack/react-query';
+
+export const useWorkflowDefinitionQuery = (workflowId?: string) => {
+  console.log('keys', workflowDefinitionsQueryKeys.get({ workflowDefinitionId: workflowId! }));
+
+  const { data, isLoading, error } = useQuery({
+    ...workflowDefinitionsQueryKeys.get({ workflowDefinitionId: workflowId! }),
+    // @ts-ignore
+    enabled: Boolean(workflowId),
+    retry: false,
+  });
+
+  return {
+    data,
+    isLoading,
+    error,
+  };
+};

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

@@ -0,0 +1,33 @@
+import { Button } from '@/components/atoms/Button';
+import { Dialog, DialogContent, DialogTrigger } from '@/components/atoms/Dialog';
+import { JSONEditorComponent } from '@/components/organisms/JsonEditor';
+import { CodeIcon } from 'lucide-react';
+import Scrollbars from 'react-custom-scrollbars';
+
+interface Props {
+  json: string;
+  trigger?: JSX.Element;
+}
+
+export const JSONViewButton = ({
+  json,
+  trigger = (
+    <Button className="flex items-center gap-2">
+      <CodeIcon size="16" />
+      View context
+    </Button>
+  ),
+}: Props) => {
+  return (
+    <Dialog>
+      <DialogTrigger asChild>{trigger}</DialogTrigger>
+      <DialogContent className="h-[80vh] min-w-[80%]">
+        <div className="pr-4">
+          <Scrollbars>
+            <JSONEditorComponent readOnly value={json ? JSON.parse(json) : {}} />
+          </Scrollbars>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+};

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

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

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

@@ -1,17 +1,16 @@
-import { CreditCard, LogOut, PlusCircle, Settings, User } from 'lucide-react';
+import { LogOut } from 'lucide-react';
 
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/atoms/Avatar';
+import { Button } from '@/components/atoms/Button';
 import {
   DropdownMenu,
   DropdownMenuContent,
-  DropdownMenuGroup,
   DropdownMenuItem,
   DropdownMenuLabel,
   DropdownMenuSeparator,
   DropdownMenuShortcut,
   DropdownMenuTrigger,
 } from '@/components/atoms/Dropdown';
-import { Button } from '@/components/atoms/Button';
-import { Avatar, AvatarFallback, AvatarImage } from '@/components/atoms/Avatar';
 
 interface Props {
   onLogout: () => void;
@@ -36,28 +35,6 @@ export function UserNavigation({ onLogout }: Props) {
           </div>
         </DropdownMenuLabel>
         <DropdownMenuSeparator />
-        <DropdownMenuGroup>
-          <DropdownMenuItem>
-            <User className="mr-2 h-4 w-4" />
-            <span>Profile</span>
-            <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
-          </DropdownMenuItem>
-          <DropdownMenuItem>
-            <CreditCard className="mr-2 h-4 w-4" />
-            <span>Billing</span>
-            <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>
-          </DropdownMenuItem>
-          <DropdownMenuItem>
-            <Settings className="mr-2 h-4 w-4" />
-            <span>Settings</span>
-            <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
-          </DropdownMenuItem>
-          <DropdownMenuItem>
-            <PlusCircle className="mr-2 h-4 w-4" />
-            <span>New Team</span>
-          </DropdownMenuItem>
-        </DropdownMenuGroup>
-        <DropdownMenuSeparator />
         <DropdownMenuItem onSelect={onLogout}>
           <LogOut className="mr-2 h-4 w-4" />
           <span>Log out</span>

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

@@ -1,9 +1,9 @@
 import { HealthIndicator } from '@/components/atoms/HealthIndicator';
-import { ContextViewColumn } from '@/components/molecules/WorkflowsTable/components/ContextViewColumn';
+import { JSONViewButton } from '@/components/molecules/JSONViewButton';
 import { DataTableColumnHeader } from '@/components/molecules/WorkflowsTable/components/DataTableColumnHeader';
 import { WorkflowTableColumnDef } from '@/components/molecules/WorkflowsTable/types';
-import { formatDate } from '@/components/molecules/WorkflowsTable/utils/format-date';
 import { IWorkflow } from '@/domains/workflows/api/workflow';
+import { formatDate } from '@/utils/format-date';
 import { getWorkflowHealthStatus } from '@/utils/get-workflow-health-status';
 
 export const defaultColumns: WorkflowTableColumnDef<IWorkflow>[] = [
@@ -43,7 +43,7 @@ export const defaultColumns: WorkflowTableColumnDef<IWorkflow>[] = [
   {
     accessorKey: 'context',
     accessorFn: row => JSON.stringify(row.context),
-    cell: info => <ContextViewColumn context={info.getValue<string>()} />,
+    cell: info => <JSONViewButton json={info.getValue<string>()} />,
     header: () => 'Context',
   },
   {

apps/workflows-dashboard/src/components/organisms/Header/Header.tsx

@@ -8,7 +8,7 @@ export const Header = () => {
   const { logout } = useLogoutMutation();
 
   return (
-    <div className="border-b">
+    <div className="sticky top-0 border-b bg-white">
       <div className="flex h-16 flex-nowrap items-center justify-between px-4">
         <div className="flex flex-1 gap-4">
           <UserNavigation onLogout={logout} />

apps/workflows-dashboard/src/components/organisms/Header/header-navigation-links.ts

@@ -9,4 +9,20 @@ export const headerNavigationLinks: NavigationLink[] = [
     path: '/workflows',
     label: 'Workflows',
   },
+  {
+    path: '/workflow-definitions',
+    label: 'Workflow Definitions',
+  },
+  {
+    path: '/filters',
+    label: 'Filters',
+  },
+  {
+    path: '/ui-definitions',
+    label: 'UI Definitions',
+  },
+  {
+    path: '/alert-definitions',
+    label: 'Alerts Definitions',
+  },
 ];