-
Notifications
You must be signed in to change notification settings - Fork 3.9k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(dashboard): workflow editor route and basic layout (#6681)
- Loading branch information
Showing
19 changed files
with
705 additions
and
223 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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'], | ||
| }, | ||
| ], | ||
| }, | ||
| }, | ||
| } | ||
| ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,8 @@ | ||
| import type { WorkflowResponseDto } from '@novu/shared'; | ||
| import { getV2 } from './api.client'; | ||
|
|
||
| export const fetchWorkflow = async ({ workflowId }: { workflowId?: string }): Promise<WorkflowResponseDto> => { | ||
| const { data } = await getV2<{ data: WorkflowResponseDto }>(`/workflows/${workflowId}`); | ||
|
|
||
| return data; | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 ( | ||
| <IntercomProvider appId={INTERCOM_APP_ID}> | ||
| <div className="relative flex w-full"> | ||
| <div className="flex flex-1 flex-col overflow-y-auto overflow-x-hidden"> | ||
| <HeaderNavigation startItems={headerStartItems} /> | ||
|
|
||
| <div className="flex min-h-dvh flex-col overflow-y-auto overflow-x-hidden">{children}</div> | ||
| </div> | ||
| </div> | ||
| </IntercomProvider> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,50 @@ | ||
| import * as React from 'react'; | ||
| import * as TabsPrimitive from '@radix-ui/react-tabs'; | ||
|
|
||
| import { cn } from '@/utils/ui'; | ||
|
|
||
| const TabsList = React.forwardRef< | ||
| React.ElementRef<typeof TabsPrimitive.List>, | ||
| React.ComponentPropsWithoutRef<typeof TabsPrimitive.List> | ||
| >(({ className, ...props }, ref) => ( | ||
| <TabsPrimitive.List | ||
| ref={ref} | ||
| className={cn( | ||
| 'border-neutral-alpha-200 inline-flex w-full items-center justify-start gap-6 border-b border-t px-3.5', | ||
| className | ||
| )} | ||
| {...props} | ||
| /> | ||
| )); | ||
| TabsList.displayName = TabsPrimitive.List.displayName; | ||
|
|
||
| const TabsTrigger = React.forwardRef< | ||
| React.ElementRef<typeof TabsPrimitive.Trigger>, | ||
| React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger> | ||
| >(({ className, ...props }, ref) => ( | ||
| <TabsPrimitive.Trigger | ||
| ref={ref} | ||
| className={cn( | ||
| "text-foreground-600 ring-offset-background focus-visible:ring-ring data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:after:border-primary data-[state=active]:text-foreground-950 relative inline-flex items-center justify-center whitespace-nowrap rounded-md py-3.5 text-sm font-medium transition-all duration-300 ease-out after:absolute after:bottom-0 after:left-0 after:h-[2px] after:w-full after:border-b-2 after:border-b-transparent after:content-[''] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50", | ||
| className | ||
| )} | ||
| {...props} | ||
| /> | ||
| )); | ||
| TabsTrigger.displayName = TabsPrimitive.Trigger.displayName; | ||
|
|
||
| const TabsContent = React.forwardRef< | ||
| React.ElementRef<typeof TabsPrimitive.Content>, | ||
| React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content> | ||
| >(({ className, ...props }, ref) => ( | ||
| <TabsPrimitive.Content ref={ref} className={cn('mt-2 focus-visible:outline-none', className)} {...props} /> | ||
| )); | ||
| TabsContent.displayName = TabsPrimitive.Content.displayName; | ||
|
|
||
| const Tabs = React.forwardRef< | ||
| React.ElementRef<typeof TabsPrimitive.Root>, | ||
| React.ComponentPropsWithoutRef<typeof TabsPrimitive.Root> | ||
| >(({ className, ...props }, ref) => <TabsPrimitive.Root ref={ref} className={cn('', className)} {...props} />); | ||
| Tabs.displayName = TabsPrimitive.Root.displayName; | ||
|
|
||
| export { Tabs, TabsList, TabsTrigger, TabsContent }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,63 @@ | ||
| import { useForm } from 'react-hook-form'; | ||
| // eslint-disable-next-line | ||
| // @ts-ignore | ||
| import { zodResolver } from '@hookform/resolvers/zod'; | ||
| import * as z from 'zod'; | ||
| import { useNavigate, useParams } from 'react-router-dom'; | ||
| import { StepTypeEnum } from '@novu/shared'; | ||
|
|
||
| import { useFetchWorkflow } from '@/hooks/use-fetch-workflow'; | ||
| import { Form } from './primitives/form'; | ||
| import { buildRoute, ROUTES } from '@/utils/routes'; | ||
| import { useEnvironment } from '@/context/environment/hooks'; | ||
| import { Tabs, TabsContent, TabsList, TabsTrigger } from './primitives/tabs'; | ||
|
|
||
| const formSchema = z.object({ | ||
| name: z.string(), | ||
| identifier: z.string(), | ||
| description: z.string().optional(), | ||
| tags: z.array(z.string()).optional(), | ||
| active: z.boolean().optional(), | ||
| critical: z.boolean().optional(), | ||
| steps: z.array( | ||
| z.object({ | ||
| name: z.string().optional(), | ||
| type: z.nativeEnum(StepTypeEnum), | ||
| }) | ||
| ), | ||
| }); | ||
|
|
||
| export const WorkflowEditor = () => { | ||
| const { currentEnvironment } = useEnvironment(); | ||
| const { workflowId } = useParams<{ workflowId?: string }>(); | ||
| const navigate = useNavigate(); | ||
| const form = useForm<z.infer<typeof formSchema>>({ mode: 'onSubmit', resolver: zodResolver(formSchema) }); | ||
| const { handleSubmit, reset } = form; | ||
|
|
||
| const { workflow } = useFetchWorkflow({ | ||
| workflowId, | ||
| onSuccess: (data) => { | ||
| reset(data); | ||
| }, | ||
| onError: () => { | ||
| navigate(buildRoute(ROUTES.WORKFLOWS, { environmentId: currentEnvironment?._id ?? '' })); | ||
| }, | ||
| }); | ||
|
|
||
| const onSubmit = async (_data: z.infer<typeof formSchema>) => { | ||
| // TODO: Implement submit logic | ||
| }; | ||
|
|
||
| return ( | ||
| <Form {...form}> | ||
| <form onSubmit={handleSubmit(onSubmit)}> | ||
| <Tabs defaultValue="workflow" className="-mt-[1px]"> | ||
| <TabsList> | ||
| <TabsTrigger value="workflow">Workflow</TabsTrigger> | ||
| </TabsList> | ||
| <TabsContent value="workflow">{`Workflow Editor Canvas - ${workflow?.name ?? ''}`}</TabsContent> | ||
| </Tabs> | ||
| </form> | ||
| </Form> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,37 @@ | ||
| import { useQuery } from '@tanstack/react-query'; | ||
| import type { WorkflowResponseDto } from '@novu/shared'; | ||
| import { QueryKeys } from '@/utils/query-keys'; | ||
| import { fetchWorkflow } from '@/api/workflows'; | ||
| import { useEnvironment } from '@/context/environment/hooks'; | ||
|
|
||
| export const useFetchWorkflow = ({ | ||
| workflowId, | ||
| onSuccess, | ||
| onError, | ||
| }: { | ||
| workflowId?: string; | ||
| onSuccess?: (data: WorkflowResponseDto) => void; | ||
| onError?: (error: unknown) => void; | ||
| }) => { | ||
| const { currentEnvironment } = useEnvironment(); | ||
| const { data, isPending, error } = useQuery<WorkflowResponseDto>({ | ||
| queryKey: [QueryKeys.fetchWorkflow, currentEnvironment?._id, workflowId], | ||
| queryFn: async () => { | ||
| try { | ||
| const result = await fetchWorkflow({ workflowId }); | ||
| onSuccess?.(result); | ||
| return result; | ||
| } catch (error) { | ||
| onError?.(error); | ||
| throw error; | ||
| } | ||
| }, | ||
| enabled: !!currentEnvironment?._id && !!workflowId, | ||
| }); | ||
|
|
||
| return { | ||
| workflow: data, | ||
| isPending, | ||
| error, | ||
| }; | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.