fix(dashboard): Sibling form structure and autosave #7149

desiprisg · 2024-11-27T17:36:31Z

What changed? Why was the change needed?

Changes:

Opted for a more safe approach when rendering forms
- Form components are now injected with the objects they rely on.
- Form components no longer depend on hooks like useParams or useWorkflowProviderContext to receive ids, slugs or data.
- It is the form component's parent concern to provide those objects when the component is rendered
Workflows & Steps
- Workflow is fetched on the and can be accessed via useWorkflow()
- Step is fetched on the and can be accessed via useStep()
  - All step related endpoints use useStep() as source of truth.
We no longer have nested forms, but rather sibling forms.
- One form for the configure workflow page
- One form for the configure step sidebar
- One form for the configure step template sheet
- No forms for canvas
Autosave across the board
- useFormAutosave is used for all 3 forms, and we're passing in the same debounced function for all, ensuring consistency. This function can be accessed via useWorkflow . The variants are:
  - update for instant PUT
    - This calls debouncedUpdate and then flushes.
  - debouncedUpdate for debounced PUT
  - patch for instant PATCH (only used for the active field)

Screenshots

Expand for optional sections

Related enterprise PR

Special notes for your reviewer

linear · 2024-11-27T17:36:35Z

NV-4912 Autosave for the Step Editor

netlify · 2024-11-27T17:36:48Z

✅ Deploy Preview for novu-stg-vite-dashboard-poc ready!

Name	Link
🔨 Latest commit	`9904200`
🔍 Latest deploy log	https://app.netlify.com/sites/novu-stg-vite-dashboard-poc/deploys/674860b3fb51520008170cd4
😎 Deploy Preview	https://deploy-preview-7149.dashboard-v2.novu-staging.co
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

apps/dashboard/src/components/primitives/editor.tsx

SokratisVidros · 2024-11-27T18:03:28Z

apps/dashboard/src/components/workflow-editor/configure-workflow-form.tsx

+    debouncedUpdate({ ...workflow, ...data });
+  });
+
+  useFormAutosave(statusForm, (data) => {


🛑 This function is defined twice!

Yeap, it's for two different "forms". One is for the patch endpoint (status form) and one for the update of the rest.

SokratisVidros · 2024-11-27T18:03:39Z

apps/dashboard/src/components/workflow-editor/configure-workflow-form.tsx

+    patch(data);
+  });
+
+  // const setIssuesFromWorkflow = (workflow: WorkflowResponseDto) => {


Please remove this if not needed.

apps/dashboard/src/components/workflow-editor/configure-workflow-form.tsx

SokratisVidros · 2024-11-27T18:25:54Z

apps/dashboard/src/components/workflow-editor/steps/edit-step-template.tsx

@@ -0,0 +1,10 @@
+import { ConfigureStepTemplate } from '@/components/workflow-editor/steps/configure-step-template';


Are these edit components necessary? I feel that we can move the wrapping into the Configure* components and remove two extra imports.

The component is necessary because it wraps with the provider. The file isn't that much but I liked it separated as it's the entry point in main.tsx

SokratisVidros · 2024-11-27T18:28:13Z

apps/dashboard/src/components/workflow-editor/steps/step-provider.tsx

+  custom: 'Custom Step',
+};
+
+export const createStep = (type: StepTypeEnum): Step => ({


You can also add this function in the provider value and get it from via const { buildStep } = useStep() hook.

It doesn't really depend on the context. At some point, I'd like for our canvas nodes to not use the context at all if possible so this would be imported.

SokratisVidros · 2024-11-27T18:28:54Z

apps/dashboard/src/components/workflow-editor/workflow-provider.tsx

+
+export type WorkflowContextType = {
+  isPending: boolean;
+  workflow?: WorkflowResponseDto;


Consider making the workflow DTO or null (when not loaded) instead of optional.

apps/dashboard/src/components/workflow-editor/workflow-provider.tsx

apps/dashboard/src/components/workflow-editor/workflow-tabs.tsx

desiprisg temporarily deployed to Linting November 27, 2024 17:36 — with GitHub Actions Inactive

desiprisg force-pushed the nv-4912-autosave-for-the-step-editor branch from e8ac59b to f7daa4c Compare November 27, 2024 17:47

desiprisg temporarily deployed to Linting November 27, 2024 17:47 — with GitHub Actions Inactive

desiprisg had a problem deploying to Linting November 27, 2024 17:47 — with GitHub Actions Error

desiprisg temporarily deployed to Linting November 27, 2024 17:47 — with GitHub Actions Inactive

desiprisg force-pushed the nv-4912-autosave-for-the-step-editor branch from f7daa4c to 282191e Compare November 27, 2024 17:48

desiprisg temporarily deployed to Linting November 27, 2024 17:48 — with GitHub Actions Inactive

ChmaraX mentioned this pull request Nov 27, 2024

feat(dashboard): saving modal on navigating outside editor #7148

Merged

SokratisVidros suggested changes Nov 27, 2024

View reviewed changes

desiprisg force-pushed the nv-4912-autosave-for-the-step-editor branch from 282191e to a68070e Compare November 27, 2024 21:49

desiprisg temporarily deployed to Linting November 27, 2024 21:49 — with GitHub Actions Inactive

desiprisg marked this pull request as ready for review November 27, 2024 21:51

desiprisg requested review from BiswaViraj and LetItRock November 28, 2024 09:05

desiprisg self-assigned this Nov 28, 2024

fix(dashboard): Sibling form structure and autosave

55ca490

desiprisg force-pushed the nv-4912-autosave-for-the-step-editor branch from a68070e to 55ca490 Compare November 28, 2024 09:20

desiprisg temporarily deployed to Linting November 28, 2024 09:21 — with GitHub Actions Inactive

SokratisVidros approved these changes Nov 28, 2024

View reviewed changes

fix(dashboard): configure step sdk banner and edit button

9acc47b

LetItRock temporarily deployed to Linting November 28, 2024 11:22 — with GitHub Actions Inactive

fix(dashboard): autosave for the code created steps - custom controls

9904200

LetItRock temporarily deployed to Linting November 28, 2024 12:23 — with GitHub Actions Inactive

LetItRock approved these changes Nov 28, 2024

View reviewed changes

desiprisg merged commit 6f1a5a7 into next Nov 28, 2024
32 checks passed

desiprisg deleted the nv-4912-autosave-for-the-step-editor branch November 28, 2024 12:42

		@@ -0,0 +1,10 @@
		import { ConfigureStepTemplate } from '@/components/workflow-editor/steps/configure-step-template';

fix(dashboard): Sibling form structure and autosave #7149

fix(dashboard): Sibling form structure and autosave #7149

Uh oh!

Conversation

desiprisg commented Nov 27, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What changed? Why was the change needed?

Screenshots

Related enterprise PR

Special notes for your reviewer

Uh oh!

linear bot commented Nov 27, 2024

Uh oh!

netlify bot commented Nov 27, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for novu-stg-vite-dashboard-poc ready!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

desiprisg commented Nov 27, 2024 •

edited

Loading

netlify bot commented Nov 27, 2024 •

edited

Loading