feat(dashboard): make unsupported steps read-only for all wfs (#7066)

apps/dashboard/src/components/workflow-editor/steps/common-fields.tsx

@@ -6,14 +6,17 @@ import { FormControl, FormField, FormItem, FormLabel, FormMessage } from '../../
 import { Input, InputField } from '../../primitives/input';
 import { useStep } from './use-step';
 import { buildRoute, ROUTES } from '@/utils/routes';
+import { EXCLUDED_EDITOR_TYPES } from '@/utils/constants';
 
 export function CommonFields() {
   const { stepIndex, control, step } = useStep();
   const navigate = useNavigate();
   const { stepSlug } = useParams<{ stepSlug: string }>();
-  const { isReadOnly } = useWorkflowEditorContext();
+  const { isReadOnly: isWorkflowReadOnly } = useWorkflowEditorContext();
   const [isBlurred, setIsBlurred] = useState(false);
 
+  const isReadOnly = isWorkflowReadOnly || EXCLUDED_EDITOR_TYPES.includes(step?.type ?? '');
+
   const isStepSlugChanged = step && step?.slug && stepSlug !== step.slug;
   const shouldUpdateStepSlug = isBlurred && isStepSlugChanged;
 

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

@@ -13,6 +13,7 @@ import { ConfirmationModal } from '@/components/confirmation-modal';
 import { ConfigureStepContent } from './configure-step-content';
 import { PageMeta } from '@/components/page-meta';
 import { StepEditorProvider } from '@/components/workflow-editor/steps/step-editor-provider';
+import { EXCLUDED_EDITOR_TYPES } from '@/utils/constants';
 
 const ConfigureStepInternal = () => {
   const { step } = useStep();
@@ -22,7 +23,9 @@ const ConfigureStepInternal = () => {
     workflowSlug: string;
     stepSlug: string;
   }>();
-  const { isReadOnly, deleteStep } = useWorkflowEditorContext();
+  const { isReadOnly: isWorkflowReadOnly, deleteStep } = useWorkflowEditorContext();
+
+  const isReadOnly = isWorkflowReadOnly || EXCLUDED_EDITOR_TYPES.includes(step?.type ?? '');
 
   const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
 

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

@@ -1,17 +1,18 @@
-import { useEffect, useMemo, type ReactNode } from 'react';
-import { useLocation, useNavigate, useParams } from 'react-router-dom';
+import { useMemo, type ReactNode } from 'react';
+import { useLocation, useParams } from 'react-router-dom';
 import { StepTypeEnum } from '@novu/shared';
 
 import { StepEditorContext } from './step-editor-context';
 import { useFetchStep } from '@/hooks/use-fetch-step';
 import { useWorkflowEditorContext } from '../hooks';
 import { getStepBase62Id } from '@/utils/step';
-import { EXCLUDED_EDITOR_TYPES } from '@/utils/constants';
 
 export const StepEditorProvider = ({ children }: { children: ReactNode }) => {
-  const { workflowSlug = '', stepSlug = '' } = useParams<{ workflowSlug: string; stepSlug: string }>();
+  const { workflowSlug = '', stepSlug = '' } = useParams<{
+    workflowSlug: string;
+    stepSlug: string;
+  }>();
   const { state } = useLocation();
-  const navigate = useNavigate();
   const { workflow } = useWorkflowEditorContext();
   const {
     step,
@@ -35,17 +36,5 @@ export const StepEditorProvider = ({ children }: { children: ReactNode }) => {
     [isPendingStep, isRefetchingStep, step, stepType, refetch]
   );
 
-  const isNotSupportedEditorType = EXCLUDED_EDITOR_TYPES.includes(stepType ?? '');
-
-  useEffect(() => {
-    if (isNotSupportedEditorType) {
-      navigate('..', { relative: 'path' });
-    }
-  }, [isNotSupportedEditorType, navigate]);
-
-  if (isNotSupportedEditorType) {
-    return null;
-  }
-
   return <StepEditorContext.Provider value={value}>{children}</StepEditorContext.Provider>;
 };