Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(dashboard): Nv 4866 Enable override custom controls and implement custom controls for Delay & Digest #7288

Open
wants to merge 15 commits into
base: next
Choose a base branch
from
Open

feat(dashboard): Nv 4866 Enable override custom controls and implement custom controls for Delay & Digest #7288

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
889a7c6
feat(workflow-editor): add override toggle to custom step controls
BiswaViraj Dec 9, 2024
ca3c7c4
feat(workflow-editor): add lodash.isequal for data comparison and enh…
BiswaViraj Dec 11, 2024
d2514a6
feat(workflow-editor): enhance custom step controls with override fun…
BiswaViraj Dec 12, 2024
ad79347
fix(dashboard): enhance readonly input styles for codemirror
BiswaViraj Dec 12, 2024
21ba2c4
fix(workflow-editor): correct variable name for default values compar…
BiswaViraj Dec 12, 2024
0b9161a
fix: grey ui on step change
BiswaViraj Dec 12, 2024
a99c3ed
feat(workflow-editor): integrate SidebarContent into custom step cont…
BiswaViraj Dec 12, 2024
043f622
fix(workflow-editor): wrap saveForm in an arrow function for consiste…
BiswaViraj Dec 12, 2024
8d5a0bc
fix: step controls
BiswaViraj Dec 13, 2024
799ec8e
merge
BiswaViraj Dec 13, 2024
d038160
feat(workflow-editor): add custom control values for Delay and Digest…
BiswaViraj Dec 13, 2024
b78b6d5
feat(workflow-editor): enhance custom step controls with restore defa…
BiswaViraj Dec 13, 2024
c027536
fix(workflow-editor): improve step control validation and error handling
BiswaViraj Dec 13, 2024
53c5513
refactor(workflow-editor): simplify component structure by removing u…
BiswaViraj Dec 13, 2024
1024272
Merge branch 'next' into nv-4866-display-read-only-default-control-va…
BiswaViraj Dec 13, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions apps/dashboard/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,6 +74,7 @@
"js-cookie": "^3.0.5",
"launchdarkly-react-client-sdk": "^3.3.2",
"lodash.debounce": "^4.0.8",
"lodash.isequal": "^4.5.0",
"lodash.merge": "^4.6.2",
"lucide-react": "^0.439.0",
"mixpanel-browser": "^2.52.0",
Expand Down Expand Up @@ -102,6 +103,7 @@
"@sentry/vite-plugin": "^2.22.6",
"@tiptap/core": "^2.10.3",
"@types/lodash.debounce": "^4.0.9",
"@types/lodash.isequal": "^4.5.8",
"@types/lodash.merge": "^4.6.6",
"@types/mixpanel-browser": "^2.49.0",
"@types/node": "^22.7.0",
Expand Down
7 changes: 6 additions & 1 deletion apps/dashboard/src/components/primitives/input.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,12 @@ const inputFieldVariants = cva(
'has-[input:read-only]:text-foreground-700',
'has-[input:read-only]:bg-neutral-alpha-100',
'has-[input:read-only]:opacity-70',
'has-[input:read-only]:border-neutral-alpha-200'
'has-[input:read-only]:border-neutral-alpha-200',
'has-[.cm-content[aria-readonly=true]]:cursor-not-allowed',
'has-[.cm-content[aria-readonly=true]]:text-foreground-700',
'has-[.cm-content[aria-readonly=true]]:bg-neutral-alpha-100',
'has-[.cm-content[aria-readonly=true]]:opacity-70',
'has-[.cm-content[aria-readonly=true]]:border-neutral-alpha-200'
),
{
variants: {
Expand Down
298 changes: 151 additions & 147 deletions apps/dashboard/src/components/workflow-editor/steps/configure-step-form.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import {
WorkflowOriginEnum,
WorkflowResponseDto,
} from '@novu/shared';
import { motion } from 'motion/react';
import { AnimatePresence, motion } from 'motion/react';
import { useEffect, useCallback, useMemo, useState, HTMLAttributes, ReactNode } from 'react';
import { useForm } from 'react-hook-form';
import { RiArrowLeftSLine, RiArrowRightSLine, RiCloseFill, RiDeleteBin2Line, RiPencilRuler2Fill } from 'react-icons/ri';
Expand Down Expand Up @@ -114,6 +114,8 @@ export const ConfigureStepForm = (props: ConfigureStepFormProps) => {

const isTemplateConfigurableStep = isSupportedStep && TEMPLATE_CONFIGURABLE_STEP_TYPES.includes(step.type);
const isInlineConfigurableStep = isSupportedStep && INLINE_CONFIGURABLE_STEP_TYPES.includes(step.type);
const hasCustomControls = Object.keys(step.controls.dataSchema ?? {}).length > 0 && !step.controls.uiSchema;
const isInlineConfigurableStepWithCustomControls = isInlineConfigurableStep && hasCustomControls;

const onDeleteStep = () => {
update({ ...workflow, steps: workflow.steps.filter((s) => s._id !== step._id) });
Expand Down Expand Up @@ -191,163 +193,165 @@ export const ConfigureStepForm = (props: ConfigureStepFormProps) => {
return (
<>
<PageMeta title={`Configure ${step.name}`} />
<motion.div
className="flex h-full w-full flex-col"
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0.1 }}
transition={{ duration: 0.1 }}
>
<SidebarHeader className="flex items-center gap-2.5 text-sm font-medium">
<Link
to={buildRoute(ROUTES.EDIT_WORKFLOW, {
environmentSlug: environment.slug!,
workflowSlug: workflow.slug,
})}
className="flex items-center"
>
<Button variant="link" size="icon" className="size-4" type="button">
<RiArrowLeftSLine />
</Button>
</Link>
<span>Configure Step</span>
<Link
to={buildRoute(ROUTES.EDIT_WORKFLOW, {
environmentSlug: environment.slug!,
workflowSlug: workflow.slug,
})}
className="ml-auto flex items-center"
>
<Button variant="link" size="icon" className="size-4" type="button">
<RiCloseFill />
</Button>
</Link>
</SidebarHeader>
<AnimatePresence>
<motion.div
className="flex h-full w-full flex-col"
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0.1 }}
transition={{ duration: 0.1 }}
>
<SidebarHeader className="flex items-center gap-2.5 text-sm font-medium">
<Link
to={buildRoute(ROUTES.EDIT_WORKFLOW, {
environmentSlug: environment.slug!,
workflowSlug: workflow.slug,
})}
className="flex items-center"
>
<Button variant="link" size="icon" className="size-4" type="button">
<RiArrowLeftSLine />
</Button>
</Link>
<span>Configure Step</span>
<Link
to={buildRoute(ROUTES.EDIT_WORKFLOW, {
environmentSlug: environment.slug!,
workflowSlug: workflow.slug,
})}
className="ml-auto flex items-center"
>
<Button variant="link" size="icon" className="size-4" type="button">
<RiCloseFill />
</Button>
</Link>
</SidebarHeader>

<Separator />
<Separator />

<Form {...form}>
<form onBlur={onBlur}>
<SaveFormContext.Provider value={value}>
<SidebarContent>
<FormField
control={form.control}
name={'name'}
render={({ field }) => (
<FormItem>
<FormLabel>Name</FormLabel>
<InputField>
<FormControl>
<Input
placeholder="Untitled"
{...field}
disabled={isReadOnly}
{...AUTOCOMPLETE_PASSWORD_MANAGERS_OFF}
/>
</FormControl>
</InputField>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name={'stepId'}
render={({ field }) => (
<FormItem>
<FormLabel>Identifier</FormLabel>
<InputField className="flex overflow-hidden pr-0">
<FormControl>
<Input placeholder="Untitled" className="cursor-default" {...field} readOnly />
</FormControl>
<CopyButton valueToCopy={field.value} size="input-right" />
</InputField>
<FormMessage />
</FormItem>
)}
/>
</SidebarContent>
<Separator />

<Form {...form}>
<form onBlur={onBlur}>
<SaveFormContext.Provider value={value}>
{isInlineConfigurableStep && !hasCustomControls && <InlineControlValues />}
</SaveFormContext.Provider>
</form>
</Form>

{(isTemplateConfigurableStep || isInlineConfigurableStepWithCustomControls) && (
<>
<SidebarContent>
<FormField
control={form.control}
name={'name'}
render={({ field }) => (
<FormItem>
<FormLabel>Name</FormLabel>
<InputField>
<FormControl>
<Input
placeholder="Untitled"
{...field}
disabled={isReadOnly}
{...AUTOCOMPLETE_PASSWORD_MANAGERS_OFF}
/>
</FormControl>
</InputField>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name={'stepId'}
render={({ field }) => (
<FormItem>
<FormLabel>Identifier</FormLabel>
<InputField className="flex overflow-hidden pr-0">
<FormControl>
<Input placeholder="Untitled" className="cursor-default" {...field} readOnly />
</FormControl>
<CopyButton valueToCopy={field.value} size="input-right" />
</InputField>
<FormMessage />
</FormItem>
)}
/>
<Link to={'./edit'} relative="path" state={{ stepType: step.type }}>
<Button
variant="outline"
className="flex w-full justify-start gap-1.5 text-xs font-medium"
type="button"
>
<RiPencilRuler2Fill className="h-4 w-4 text-neutral-600" />
Configure {STEP_TYPE_LABELS[step.type]} Step template{' '}
<RiArrowRightSLine className="ml-auto h-4 w-4 text-neutral-600" />
</Button>
</Link>
</SidebarContent>
<Separator />

{isInlineConfigurableStep && <InlineControlValues />}
</SaveFormContext.Provider>
</form>
</Form>

{isTemplateConfigurableStep && (
<>
<SidebarContent>
<Link to={'./edit'} relative="path" state={{ stepType: step.type }}>
<Button
variant="outline"
className="flex w-full justify-start gap-1.5 text-xs font-medium"
type="button"
>
<RiPencilRuler2Fill className="h-4 w-4 text-neutral-600" />
Configure {STEP_TYPE_LABELS[step.type]} Step template{' '}
<RiArrowRightSLine className="ml-auto h-4 w-4 text-neutral-600" />
</Button>
</Link>
</SidebarContent>
<Separator />

{firstError ? (
<>
<ConfigureStepTemplateIssueCta step={step} issue={firstError} />
<Separator />
</>
) : (
Preview && (
{firstError ? (
<>
<SidebarContent>
<Preview />
</SidebarContent>
<ConfigureStepTemplateIssueCta step={step} issue={firstError} />
<Separator />
</>
)
)}
</>
)}

{!isSupportedStep && (
<>
<SidebarContent>
<SdkBanner />
</SidebarContent>
</>
)}

{!isReadOnly && (
<>
<SidebarFooter>
<Separator />
<ConfirmationModal
open={isDeleteModalOpen}
onOpenChange={setIsDeleteModalOpen}
onConfirm={onDeleteStep}
title="Proceeding will delete the step"
description={
) : (
Preview && (
<>
You're about to delete the{' '}
<TruncatedText className="max-w-[32ch] font-bold">{step.name}</TruncatedText> step, this action is
permanent.
<SidebarContent>
<Preview />
</SidebarContent>
<Separator />
</>
}
confirmButtonText="Delete"
/>
<Button
variant="ghostDestructive"
className="gap-1.5 text-xs"
type="button"
onClick={() => setIsDeleteModalOpen(true)}
>
<RiDeleteBin2Line className="size-4" />
Delete step
</Button>
</SidebarFooter>
</>
)}
</motion.div>
)
)}
</>
)}

{!isSupportedStep && (
<>
<SidebarContent>
<SdkBanner />
</SidebarContent>
</>
)}

{!isReadOnly && (
<>
<SidebarFooter>
<Separator />
<ConfirmationModal
open={isDeleteModalOpen}
onOpenChange={setIsDeleteModalOpen}
onConfirm={onDeleteStep}
title="Proceeding will delete the step"
description={
<>
You're about to delete the{' '}
<TruncatedText className="max-w-[32ch] font-bold">{step.name}</TruncatedText> step, this action is
permanent.
</>
}
confirmButtonText="Delete"
/>
<Button
variant="ghostDestructive"
className="gap-1.5 text-xs"
type="button"
onClick={() => setIsDeleteModalOpen(true)}
>
<RiDeleteBin2Line className="size-4" />
Delete step
</Button>
</SidebarFooter>
</>
)}
</motion.div>
</AnimatePresence>
</>
);
};
Loading
Loading