Skip to content

Commit

Permalink
feat(dashboard): Delay step custom controls (#7242)
Browse files Browse the repository at this point in the history
  • Loading branch information
desiprisg authored Dec 10, 2024
1 parent 2345133 commit d2ee60b
Show file tree
Hide file tree
Showing 5 changed files with 55 additions and 38 deletions.
Original file line number Diff line number Diff line change
@@ -1,51 +1,52 @@
import { useState } from 'react';
import { ComponentProps, useState } from 'react';
import { RJSFSchema } from '@rjsf/utils';
import { RiArrowDownSLine, RiArrowUpSLine, RiInputField } from 'react-icons/ri';
import { type ControlsMetadata } from '@novu/shared';
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/primitives/collapsible';
import { JsonForm } from './json-form';
import { WorkflowOriginEnum } from '@/utils/enums';
import { InAppTabsSection } from '@/components/workflow-editor/steps/in-app/in-app-tabs-section';
import { cn } from '@/utils/ui';

export function CustomStepControls({
dataSchema,
origin,
}: {
type CustomStepControlsProps = ComponentProps<typeof Collapsible> & {
dataSchema: ControlsMetadata['dataSchema'];
origin: WorkflowOriginEnum;
}) {
};
export const CustomStepControls = (props: CustomStepControlsProps) => {
const { className, dataSchema, origin, ...rest } = props;
const [isEditorOpen, setIsEditorOpen] = useState(true);

if (!dataSchema?.properties || origin !== WorkflowOriginEnum.EXTERNAL) {
return null;
}

return (
<InAppTabsSection>
<Collapsible
open={isEditorOpen}
onOpenChange={setIsEditorOpen}
className="bg-neutral-alpha-50 border-neutral-alpha-200 flex w-full flex-col gap-2 rounded-lg border p-2"
>
<CollapsibleTrigger className="flex w-full items-center justify-between text-sm">
<div className="flex items-center gap-1">
<RiInputField className="text-feature size-5" />
<span className="text-sm font-medium">Custom step controls</span>
</div>
<Collapsible
open={isEditorOpen}
onOpenChange={setIsEditorOpen}
className={cn(
'bg-neutral-alpha-50 border-neutral-alpha-200 flex w-full flex-col gap-2 rounded-lg border p-2 text-sm',
className
)}
{...rest}
>
<CollapsibleTrigger className="flex w-full items-center justify-between">
<div className="flex items-center gap-1">
<RiInputField className="text-feature size-5" />
<span className="font-medium">Custom step controls</span>
</div>

{isEditorOpen ? (
<RiArrowUpSLine className="text-neutral-alpha-400 size-5" />
) : (
<RiArrowDownSLine className="text-neutral-alpha-400 size-5" />
)}
</CollapsibleTrigger>
{isEditorOpen ? (
<RiArrowUpSLine className="text-neutral-alpha-400 size-5" />
) : (
<RiArrowDownSLine className="text-neutral-alpha-400 size-5" />
)}
</CollapsibleTrigger>

<CollapsibleContent>
<div className="bg-background rounded-md border border-dashed p-3">
<JsonForm schema={(dataSchema as RJSFSchema) || {}} />
</div>
</CollapsibleContent>
</Collapsible>
</InAppTabsSection>
<CollapsibleContent>
<div className="bg-background rounded-md border border-dashed p-3">
<JsonForm schema={(dataSchema as RJSFSchema) || {}} />
</div>
</CollapsibleContent>
</Collapsible>
);
}
};
Original file line number Diff line number Diff line change
@@ -1,20 +1,28 @@
import { UiSchemaGroupEnum } from '@novu/shared';
import { getComponentByType } from '@/components/workflow-editor/steps/component-utils';
import { useStep } from '@/components/workflow-editor/steps/step-provider';
import { CustomStepControls } from '@/components/workflow-editor/steps/controls/custom-step-controls';
import { useWorkflow } from '@/components/workflow-editor/workflow-provider';

const amountKey = 'amount';
const unitKey = 'unit';
const typeKey = 'type';

export const DelayControlValues = () => {
const { step } = useStep();
const { uiSchema } = step?.controls ?? {};
const { workflow } = useWorkflow();
const { uiSchema, dataSchema } = step?.controls ?? {};

if (!uiSchema || uiSchema?.group !== UiSchemaGroupEnum.DELAY) {
if (!uiSchema || !workflow || uiSchema?.group !== UiSchemaGroupEnum.DELAY) {
return null;
}

const { [amountKey]: amount, [typeKey]: type, [unitKey]: unit } = uiSchema.properties ?? {};

return amount && type && unit && getComponentByType({ component: amount.component });
return (
<>
{amount && type && unit && getComponentByType({ component: amount.component })}
<CustomStepControls className="text-xs" dataSchema={dataSchema} origin={workflow.origin} />
</>
);
};
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import { StepEditorProps } from '@/components/workflow-editor/steps/configure-st
import { EmailEditor } from '@/components/workflow-editor/steps/email/email-editor';
import { EmailEditorPreview } from '@/components/workflow-editor/steps/email/email-editor-preview';
import { CustomStepControls } from '../controls/custom-step-controls';
import { EmailTabsEditSection } from '@/components/workflow-editor/steps/email/email-tabs-section';

const tabsContentClassName = 'h-full w-full overflow-y-auto';

Expand Down Expand Up @@ -55,7 +56,9 @@ export const EmailTabs = (props: StepEditorProps) => {
<Separator />
<TabsContent value="editor" className={tabsContentClassName}>
<EmailEditor uiSchema={uiSchema} />
<CustomStepControls dataSchema={dataSchema} origin={workflow.origin} />
<EmailTabsEditSection>
<CustomStepControls dataSchema={dataSchema} origin={workflow.origin} />
</EmailTabsEditSection>
</TabsContent>
<TabsContent value="preview" className={tabsContentClassName}>
<EmailEditorPreview workflow={workflow} step={step} formValues={form.getValues()} />
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import { InAppEditor } from '@/components/workflow-editor/steps/in-app/in-app-ed
import { InAppEditorPreview } from '@/components/workflow-editor/steps/in-app/in-app-editor-preview';
import { CustomStepControls } from '../controls/custom-step-controls';
import { StepEditorProps } from '@/components/workflow-editor/steps/configure-step-template-form';
import { InAppTabsSection } from '@/components/workflow-editor/steps/in-app/in-app-tabs-section';

const tabsContentClassName = 'h-full w-full overflow-y-auto';

Expand Down Expand Up @@ -55,7 +56,9 @@ export const InAppTabs = (props: StepEditorProps) => {
<Separator />
<TabsContent value="editor" className={tabsContentClassName}>
<InAppEditor uiSchema={uiSchema} />
<CustomStepControls dataSchema={dataSchema} origin={workflow.origin} />
<InAppTabsSection>
<CustomStepControls dataSchema={dataSchema} origin={workflow.origin} />
</InAppTabsSection>
</TabsContent>
<TabsContent value="preview" className={tabsContentClassName}>
<InAppEditorPreview workflow={workflow} step={step} formValues={form.getValues()} />
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,9 @@ export const OtherStepTabs = ({ workflow, step }: StepEditorProps) => {
</header>
<Separator />
<TabsContent value="editor" className={tabsContentClassName}>
<CustomStepControls dataSchema={dataSchema} origin={workflow.origin} />
<div className="px-3 py-5">
<CustomStepControls dataSchema={dataSchema} origin={workflow.origin} />
</div>
</TabsContent>
<Separator />
</Tabs>
Expand Down

0 comments on commit d2ee60b

Please sign in to comment.