feat(dashboard): Step conditions autosave

apps/dashboard/src/components/conditions-editor/add-condition-action.tsx

@@ -3,7 +3,7 @@ import { ActionWithRulesAndAddersProps } from 'react-querybuilder';
 
 import { Button } from '@/components/primitives/button';
 
-export const AddConditionAction = ({ label, title, rules, handleOnClick }: ActionWithRulesAndAddersProps) => {
+export const AddConditionAction = ({ label, title, rules, handleOnClick, context }: ActionWithRulesAndAddersProps) => {
   if (rules && rules.length >= 10) {
     return null;
   }
@@ -14,7 +14,10 @@ export const AddConditionAction = ({ label, title, rules, handleOnClick }: Actio
       variant="secondary"
       size="2xs"
       className="bg-transparent"
-      onClick={handleOnClick}
+      onClick={(e) => {
+        handleOnClick(e);
+        context?.saveForm();
+      }}
       leadingIcon={RiAddFill}
       title={title}
     >

apps/dashboard/src/components/conditions-editor/add-group-action.tsx

@@ -3,7 +3,14 @@ import { ActionWithRulesAndAddersProps } from 'react-querybuilder';
 import { StackedPlusLine } from '@/components/icons/stacked-plus-line';
 import { Button } from '@/components/primitives/button';
 
-export const AddGroupAction = ({ label, title, level, rules, handleOnClick }: ActionWithRulesAndAddersProps) => {
+export const AddGroupAction = ({
+  label,
+  title,
+  level,
+  rules,
+  handleOnClick,
+  context,
+}: ActionWithRulesAndAddersProps) => {
   if (level === 1 || (rules && rules.length >= 10)) {
     return null;
   }
@@ -14,7 +21,10 @@ export const AddGroupAction = ({ label, title, level, rules, handleOnClick }: Ac
       variant="secondary"
       size="2xs"
       className="bg-transparent"
-      onClick={handleOnClick}
+      onClick={(e) => {
+        handleOnClick(e);
+        context?.saveForm();
+      }}
       leadingIcon={StackedPlusLine}
       title={title}
     >

apps/dashboard/src/components/conditions-editor/combinator-selector.tsx

@@ -1,12 +1,19 @@
 import { type CombinatorSelectorProps } from 'react-querybuilder';
 
+import { toSelectOptions } from '@/components/conditions-editor/select-option-utils';
 import { Select, SelectContent, SelectTrigger, SelectValue } from '@/components/primitives/select';
 import { cn } from '@/utils/ui';
-import { toSelectOptions } from '@/components/conditions-editor/select-option-utils';
 
-export const CombinatorSelector = ({ disabled, value, options, handleOnChange }: CombinatorSelectorProps) => {
+export const CombinatorSelector = ({ disabled, value, options, handleOnChange, context }: CombinatorSelectorProps) => {
   return (
-    <Select onValueChange={handleOnChange} disabled={disabled} value={value}>
+    <Select
+      onValueChange={(e) => {
+        handleOnChange(e);
+        context?.saveForm();
+      }}
+      disabled={disabled}
+      value={value}
+    >
       <SelectTrigger size="2xs" className={cn('w-18 hover:bg-bg-weak hover:text-text-strong text-label-xs gap-1')}>
         <SelectValue />
       </SelectTrigger>

apps/dashboard/src/components/conditions-editor/conditions-editor.tsx

@@ -55,14 +55,16 @@ function InternalConditionsEditor({
   isAllowedVariable,
   query,
   onQueryChange,
+  saveForm,
 }: {
   fields: Field[];
   variables: LiquidVariable[];
   isAllowedVariable: IsAllowedVariable;
   query: RuleGroupType;
   onQueryChange: (query: RuleGroupType) => void;
+  saveForm: () => void;
 }) {
-  const context = useMemo(() => ({ variables, isAllowedVariable }), [variables, isAllowedVariable]);
+  const context = useMemo(() => ({ variables, isAllowedVariable, saveForm }), [variables, isAllowedVariable, saveForm]);
 
   return (
     <QueryBuilder
@@ -79,16 +81,24 @@ function InternalConditionsEditor({
   );
 }
 
+export type ConditionsEditorContext = {
+  variables: LiquidVariable[];
+  isAllowedVariable: IsAllowedVariable;
+  saveForm: () => void;
+};
+
 export function ConditionsEditor({
   query,
   onQueryChange,
   fields,
+  saveForm,
   variables,
   isAllowedVariable,
 }: {
   query: RuleGroupType;
   onQueryChange: (query: RuleGroupType) => void;
   fields: Field[];
+  saveForm: () => void;
   variables: LiquidVariable[];
   isAllowedVariable: IsAllowedVariable;
 }) {
@@ -100,6 +110,7 @@ export function ConditionsEditor({
         isAllowedVariable={isAllowedVariable}
         query={query}
         onQueryChange={onQueryChange}
+        saveForm={saveForm}
       />
     </ConditionsEditorProvider>
   );

apps/dashboard/src/components/conditions-editor/field-selector.tsx

@@ -1,12 +1,12 @@
 import React, { useMemo } from 'react';
-import { FieldSelectorProps } from 'react-querybuilder';
 import { useFormContext } from 'react-hook-form';
+import { FieldSelectorProps } from 'react-querybuilder';
 
-import { Code2 } from '@/components/icons/code-2';
 import { VariableSelect } from '@/components/conditions-editor/variable-select';
+import { Code2 } from '@/components/icons/code-2';
 
 export const FieldSelector = React.memo(
-  ({ handleOnChange, options, path, value, disabled }: FieldSelectorProps) => {
+  ({ handleOnChange, options, path, value, disabled, context }: FieldSelectorProps) => {
     const form = useFormContext();
     const queryPath = 'query.rules.' + path.join('.rules.') + '.field';
     const { error } = form.getFieldState(queryPath, form.formState);
@@ -23,7 +23,10 @@ export const FieldSelector = React.memo(
     return (
       <VariableSelect
         leftIcon={<Code2 className="text-feature size-3 min-w-3" />}
-        onChange={handleOnChange}
+        onChange={(e) => {
+          handleOnChange(e);
+          context?.saveForm();
+        }}
         options={optionsArray}
         title="Fields"
         value={value}

apps/dashboard/src/components/conditions-editor/operator-selector.tsx

@@ -1,14 +1,21 @@
 import React from 'react';
 import { OperatorSelectorProps } from 'react-querybuilder';
 
+import { toSelectOptions } from '@/components/conditions-editor/select-option-utils';
 import { Select, SelectContent, SelectTrigger, SelectValue } from '@/components/primitives/select';
 import { cn } from '@/utils/ui';
-import { toSelectOptions } from '@/components/conditions-editor/select-option-utils';
 
 export const OperatorSelector = React.memo(
-  ({ disabled, value, options, handleOnChange }: OperatorSelectorProps) => {
+  ({ disabled, value, options, handleOnChange, context }: OperatorSelectorProps) => {
     return (
-      <Select onValueChange={handleOnChange} disabled={disabled} value={value}>
+      <Select
+        onValueChange={(e) => {
+          handleOnChange(e);
+          context?.saveForm();
+        }}
+        disabled={disabled}
+        value={value}
+      >
         <SelectTrigger
           size="2xs"
           className={cn('w-18 bg-background hover:bg-bg-weak hover:text-text-strong text-label-xs gap-1')}

apps/dashboard/src/components/conditions-editor/rule-actions.tsx

@@ -1,22 +1,22 @@
 import React, { useMemo } from 'react';
-import { isRuleGroup, ActionWithRulesProps, getParentPath } from 'react-querybuilder';
 import { RiMore2Fill } from 'react-icons/ri';
+import { ActionWithRulesProps, getParentPath, isRuleGroup } from 'react-querybuilder';
 
+import { Delete } from '@/components/icons/delete';
+import { SquareTwoStack } from '@/components/icons/square-two-stack';
+import { CompactButton } from '@/components/primitives/button-compact';
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuGroup,
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from '@/components/primitives/dropdown-menu';
-import { useConditionsEditorContext } from './conditions-editor-context';
-import { CompactButton } from '@/components/primitives/button-compact';
-import { Delete } from '@/components/icons/delete';
-import { SquareTwoStack } from '@/components/icons/square-two-stack';
 import { Tooltip, TooltipContent, TooltipPortal, TooltipTrigger } from '@/components/primitives/tooltip';
+import { useConditionsEditorContext } from './conditions-editor-context';
 
 export const RuleActions = React.memo(
-  ({ path, ruleOrGroup }: ActionWithRulesProps) => {
+  ({ path, ruleOrGroup, context }: ActionWithRulesProps) => {
     const { removeRuleOrGroup, cloneRuleOrGroup, getParentGroup } = useConditionsEditorContext();
     const parentGroup = useMemo(() => getParentGroup(ruleOrGroup.id), [ruleOrGroup, getParentGroup]);
     const isGroup = isRuleGroup(ruleOrGroup);
@@ -40,6 +40,7 @@ export const RuleActions = React.memo(
                 <DropdownMenuItem
                   onClick={() => {
                     cloneRuleOrGroup(ruleOrGroup, getParentPath(path));
+                    context?.saveForm();
                   }}
                   className="text-foreground-600 text-label-xs h-7"
                   disabled={isDuplicateDisabled}
@@ -56,7 +57,13 @@ export const RuleActions = React.memo(
               </TooltipPortal>
             </Tooltip>
 
-            <DropdownMenuItem onClick={() => removeRuleOrGroup(path)} className="text-error-base text-label-xs h-7">
+            <DropdownMenuItem
+              onClick={() => {
+                removeRuleOrGroup(path);
+                context?.saveForm();
+              }}
+              className="text-error-base text-label-xs h-7"
+            >
               <Delete className="[&&]:size-3.5" />
               Delete {isGroup ? `group` : `condition`}
             </DropdownMenuItem>

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

@@ -1,12 +1,13 @@
-import { ComponentProps } from 'react';
-import { Link, useNavigate, useParams } from 'react-router-dom';
+import { WorkflowOriginEnum } from '@novu/shared';
 import { Node as FlowNode, Handle, NodeProps, Position } from '@xyflow/react';
+import { ComponentProps } from 'react';
 import { RiFilter3Fill, RiPlayCircleLine } from 'react-icons/ri';
 import { RQBJsonLogic } from 'react-querybuilder';
-import { WorkflowOriginEnum } from '@novu/shared';
+import { Link, useNavigate, useParams } from 'react-router-dom';
 
 import { createStep } from '@/components/workflow-editor/step-utils';
 import { useWorkflow } from '@/components/workflow-editor/workflow-provider';
+import { useConditionsCount } from '@/hooks/use-conditions-count';
 import { STEP_TYPE_TO_COLOR } from '@/utils/color';
 import { INLINE_CONFIGURABLE_STEP_TYPES, TEMPLATE_CONFIGURABLE_STEP_TYPES } from '@/utils/constants';
 import { StepTypeEnum } from '@/utils/enums';
@@ -16,7 +17,6 @@ import { cn } from '@/utils/ui';
 import { STEP_TYPE_TO_ICON } from '../icons/utils';
 import { AddStepMenu } from './add-step-menu';
 import { Node, NodeBody, NodeError, NodeHeader, NodeIcon, NodeName } from './base-node';
-import { useConditionsCount } from '@/hooks/use-conditions-count';
 
 export type NodeData = {
   addStepIndex?: number;
@@ -360,8 +360,6 @@ export const AddNode = (_props: NodeProps<NodeType>) => {
             },
             {
               onSuccess: (data) => {
-                console.log('data', data);
-
                 if (TEMPLATE_CONFIGURABLE_STEP_TYPES.includes(stepType)) {
                   navigate(
                     buildRoute(ROUTES.EDIT_STEP_TEMPLATE, {

apps/dashboard/src/components/workflow-editor/step-default-values.ts

@@ -1,14 +1,22 @@
-import { StepResponseDto } from '@novu/shared';
 import { buildDefaultValues, buildDefaultValuesOfDataSchema } from '@/utils/schema';
+import { StepResponseDto } from '@novu/shared';
 
 // Use the UI Schema to build the default values if it exists else use the data schema (code-first approach) values
 export const getStepDefaultValues = (step: StepResponseDto): Record<string, unknown> => {
   const controlValues = step.controls.values;
-  const hasControlValues = Object.keys(controlValues).length > 0;
+
+  const uiSchemaDefaultValues = buildDefaultValues(step.controls.uiSchema ?? {});
+  const dataSchemaDefaultValues = buildDefaultValuesOfDataSchema(step.controls.dataSchema ?? {});
 
   if (Object.keys(step.controls.uiSchema ?? {}).length !== 0) {
-    return hasControlValues ? controlValues : buildDefaultValues(step.controls.uiSchema ?? {});
+    return {
+      ...uiSchemaDefaultValues,
+      ...controlValues,
+    };
   }
 
-  return hasControlValues ? controlValues : buildDefaultValuesOfDataSchema(step.controls.dataSchema ?? {});
+  return {
+    ...dataSchemaDefaultValues,
+    ...controlValues,
+  };
 };