From cc184b49a0f076a59e4191c4a4a2938d97311183 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pawe=C5=82=20Tymczuk?= Date: Wed, 16 Oct 2024 09:22:19 +0200 Subject: [PATCH] feat(dashboard): workflow editor route and basic layout (#6681) --- apps/dashboard/eslint.config.js | 35 +- apps/dashboard/package.json | 1 + apps/dashboard/src/api/workflows.ts | 8 + .../src/components/edit-workflow-layout.tsx | 26 + .../edit-bridge-url-button.tsx | 7 +- .../dashboard/src/components/inbox-button.tsx | 3 +- .../src/components/primitives/popover.tsx | 4 +- .../src/components/primitives/tabs.tsx | 50 ++ .../src/components/truncated-text.tsx | 5 +- .../src/components/workflow-editor.tsx | 63 ++ .../src/components/workflow-list.tsx | 17 +- .../src/hooks/use-bridge-health-check.ts | 2 +- .../dashboard/src/hooks/use-fetch-workflow.ts | 37 + apps/dashboard/src/main.tsx | 5 + apps/dashboard/src/pages/edit-workflow.tsx | 10 + apps/dashboard/src/utils/query-keys.ts | 1 + apps/dashboard/src/utils/routes.ts | 1 + apps/dashboard/tsconfig.app.json | 1 + pnpm-lock.yaml | 652 ++++++++++++------ 19 files changed, 705 insertions(+), 223 deletions(-) create mode 100644 apps/dashboard/src/api/workflows.ts create mode 100644 apps/dashboard/src/components/edit-workflow-layout.tsx create mode 100644 apps/dashboard/src/components/primitives/tabs.tsx create mode 100644 apps/dashboard/src/components/workflow-editor.tsx create mode 100644 apps/dashboard/src/hooks/use-fetch-workflow.ts create mode 100644 apps/dashboard/src/pages/edit-workflow.tsx diff --git a/apps/dashboard/eslint.config.js b/apps/dashboard/eslint.config.js index 34142f40cc5..95bb45ab773 100644 --- a/apps/dashboard/eslint.config.js +++ b/apps/dashboard/eslint.config.js @@ -1,29 +1,36 @@ -import js from "@eslint/js"; -import globals from "globals"; -import reactHooks from "eslint-plugin-react-hooks"; -import reactRefresh from "eslint-plugin-react-refresh"; -import tseslint from "typescript-eslint"; +import js from '@eslint/js'; +import globals from 'globals'; +import reactHooks from 'eslint-plugin-react-hooks'; +import reactRefresh from 'eslint-plugin-react-refresh'; +import tseslint from 'typescript-eslint'; export default tseslint.config( - { ignores: ["dist"] }, + { ignores: ['dist'] }, { extends: [js.configs.recommended, ...tseslint.configs.recommended], - files: ["**/*.{ts,tsx}"], + files: ['**/*.{ts,tsx}'], languageOptions: { ecmaVersion: 2020, globals: globals.browser, }, plugins: { - "react-hooks": reactHooks, - "react-refresh": reactRefresh, + 'react-hooks': reactHooks, + 'react-refresh': reactRefresh, }, rules: { ...reactHooks.configs.recommended.rules, - "@typescript-eslint/no-explicit-any": "warn", - "react-refresh/only-export-components": [ - "warn", - { allowConstantExport: true }, + '@typescript-eslint/no-explicit-any': 'warn', + 'react-refresh/only-export-components': ['warn', { allowConstantExport: true }], + '@typescript-eslint/no-unused-vars': ['off'], + '@typescript-eslint/naming-convention': [ + 'error', + { + filter: '_', + selector: 'variableLike', + leadingUnderscore: 'allow', + format: ['PascalCase', 'camelCase', 'UPPER_CASE'], + }, ], }, - }, + } ); diff --git a/apps/dashboard/package.json b/apps/dashboard/package.json index 1d56e7fe4a2..3cbd7b9b5ad 100644 --- a/apps/dashboard/package.json +++ b/apps/dashboard/package.json @@ -33,6 +33,7 @@ "@radix-ui/react-scroll-area": "^1.2.0", "@radix-ui/react-select": "^2.1.2", "@radix-ui/react-slot": "^1.1.0", + "@radix-ui/react-tabs": "^1.1.1", "@radix-ui/react-tooltip": "^1.1.3", "@segment/analytics-next": "^1.73.0", "@tanstack/react-query": "^5.59.6", diff --git a/apps/dashboard/src/api/workflows.ts b/apps/dashboard/src/api/workflows.ts new file mode 100644 index 00000000000..3b711ae5a4d --- /dev/null +++ b/apps/dashboard/src/api/workflows.ts @@ -0,0 +1,8 @@ +import type { WorkflowResponseDto } from '@novu/shared'; +import { getV2 } from './api.client'; + +export const fetchWorkflow = async ({ workflowId }: { workflowId?: string }): Promise => { + const { data } = await getV2<{ data: WorkflowResponseDto }>(`/workflows/${workflowId}`); + + return data; +}; diff --git a/apps/dashboard/src/components/edit-workflow-layout.tsx b/apps/dashboard/src/components/edit-workflow-layout.tsx new file mode 100644 index 00000000000..d7027f9891d --- /dev/null +++ b/apps/dashboard/src/components/edit-workflow-layout.tsx @@ -0,0 +1,26 @@ +import { ReactNode } from 'react'; +// eslint-disable-next-line @typescript-eslint/ban-ts-comment +// @ts-ignore +import { IntercomProvider } from 'react-use-intercom'; +import { HeaderNavigation } from './header-navigation'; +import { INTERCOM_APP_ID } from '@/config'; + +export const EditWorkflowLayout = ({ + children, + headerStartItems, +}: { + children: ReactNode; + headerStartItems?: ReactNode; +}) => { + return ( + +
+
+ + +
{children}
+
+
+
+ ); +}; diff --git a/apps/dashboard/src/components/header-navigation/edit-bridge-url-button.tsx b/apps/dashboard/src/components/header-navigation/edit-bridge-url-button.tsx index 7a006c8129d..7e20bc967f3 100644 --- a/apps/dashboard/src/components/header-navigation/edit-bridge-url-button.tsx +++ b/apps/dashboard/src/components/header-navigation/edit-bridge-url-button.tsx @@ -1,6 +1,5 @@ import { useLayoutEffect, useState } from 'react'; import { RiLinkM, RiPencilFill } from 'react-icons/ri'; -import { PopoverPortal } from '@radix-ui/react-popover'; import { useForm } from 'react-hook-form'; // eslint-disable-next-line // @ts-ignore @@ -8,7 +7,7 @@ import { zodResolver } from '@hookform/resolvers/zod'; import * as z from 'zod'; import { cn } from '@/utils/ui'; -import { Popover, PopoverContent, PopoverTrigger } from '../primitives/popover'; +import { Popover, PopoverContent, PopoverTrigger, PopoverPortal } from '../primitives/popover'; import { Button } from '../primitives/button'; import { Input, InputField } from '../primitives/input'; import { useBridgeHealthCheck, useUpdateBridgeUrl, useValidateBridgeUrl } from '@/hooks'; @@ -92,7 +91,7 @@ export const EditBridgeUrlButton = () => { - Full path URL (e.g., https://your.api.com/api/novu) + URL (e.g., https://your.api.com/api/novu) )} /> @@ -104,7 +103,7 @@ export const EditBridgeUrlButton = () => { rel="noopener noreferrer" className="text-xs" > - How it works? + Learn more