refactor: extract shared useDeployFlowReducer hook and unify initial state

ai-services/assets/catalog/openshift/values.yaml

@@ -1,5 +1,5 @@
 ui:
-  image: icr.io/ai-services-cicd/catalog-ui:v0.0.53
+  image: icr.io/ai-services-cicd/catalog-ui:v0.0.54
   resources:
     requests:
       memory: "512Mi"

ai-services/assets/catalog/podman/values.yaml

@@ -1,6 +1,6 @@
 ui:
   port: ""
-  image: icr.io/ai-services-cicd/catalog-ui:v0.0.53
+  image: icr.io/ai-services-cicd/catalog-ui:v0.0.54
 
 backend:
   port: ""

ui/catalog/Makefile

@@ -1,6 +1,6 @@
 REGISTRY ?= icr.io/ai-services-private
 IMAGE ?= catalog-ui
-TAG ?= v0.0.53
+TAG ?= v0.0.54
 CREDS_ARG := $(if $(and $(REGISTRY_USER),$(REGISTRY_PASSWORD)),--creds="$(REGISTRY_USER):$(REGISTRY_PASSWORD)")
 
 CONTAINER_BUILDER ?= podman

ui/catalog/src/components/DeployFlow/DigitalAssistant/DigitalAssistantDeployFlow.tsx

@@ -1,4 +1,4 @@
-import { useReducer, useEffect, useCallback, useRef, useMemo } from "react";
+import { useReducer, useEffect, useRef, useMemo } from "react";
 import { Tearsheet } from "@carbon/ibm-products";
 import {
   ProgressIndicator,
@@ -10,7 +10,10 @@ import type { DeployFlowState, DeployFlowAction } from "./types.ts";
 import type { BaseDeployFlowProps, DeployFormData } from "../Shared/types";
 import type { ProviderSchema } from "@/types/api.types";
 import { ACTION_TYPES } from "./types.ts";
-import { handleUpdateFormData } from "../Shared/utils/formData";
+import {
+  sharedDeployFlowReducer,
+  useDeployFlowReducer,
+} from "../Shared/hooks/useDeployFlowReducer";
 import { deployApplication, fetchServices } from "@/api/applications.api";
 import { transformToDeploymentPayload } from "./utils/digitalAssistantDeploymentTransform";
 import { extractDeployError } from "../Shared/utils/deployError";
@@ -19,51 +22,26 @@ import { StepTwo } from "./steps/StepTwo";
 import { useDeployOptions } from "./hooks/useDeployOptions";
 import { useDeployStore } from "@/store/deploy.store";
 import { initializeFormData } from "./utils/formDataInitializer";
+import { BASE_INITIAL_STATE } from "../Shared/utils/formData";
 import { dedupe } from "@/utils/requestManager";
 import styles from "./DigitalAssistantDeployFlow.module.scss";
 
 const getInitialState = (formData: DeployFormData): DeployFlowState => ({
-  currentStep: 0,
+  ...BASE_INITIAL_STATE,
   isLoading: false,
-  isDeploying: false,
-  isEditing: false,
-  hasInsufficientResources: false,
   error: null,
-  deployError: null,
-  deployToastOpen: false,
   formData,
-  showStepOneNameError: false,
 });
 
-const deployFlowReducer = (
+const daDeployFlowReducer = (
   state: DeployFlowState,
   action: DeployFlowAction,
 ): DeployFlowState => {
   switch (action.type) {
-    case ACTION_TYPES.SET_CURRENT_STEP:
-      return { ...state, currentStep: action.payload };
     case ACTION_TYPES.SET_IS_LOADING:
       return { ...state, isLoading: action.payload };
-    case ACTION_TYPES.SET_IS_DEPLOYING:
-      return { ...state, isDeploying: action.payload };
-    case ACTION_TYPES.SET_IS_EDITING:
-      return { ...state, isEditing: action.payload };
-    case ACTION_TYPES.SET_HAS_INSUFFICIENT_RESOURCES:
-      return { ...state, hasInsufficientResources: action.payload };
     case ACTION_TYPES.SET_ERROR:
       return { ...state, error: action.payload };
-    case ACTION_TYPES.SET_DEPLOY_ERROR:
-      return { ...state, deployError: action.payload };
-    case ACTION_TYPES.SHOW_DEPLOY_TOAST:
-      return { ...state, deployToastOpen: true };
-    case ACTION_TYPES.HIDE_DEPLOY_TOAST:
-      return { ...state, deployToastOpen: false };
-    case ACTION_TYPES.SET_FORM_DATA:
-      return { ...state, formData: action.payload };
-    case ACTION_TYPES.UPDATE_FORM_DATA:
-      return handleUpdateFormData(state, action.payload);
-    case ACTION_TYPES.SET_SHOW_STEP_ONE_NAME_ERROR:
-      return { ...state, showStepOneNameError: action.payload };
     case ACTION_TYPES.RESET_STATE:
       return getInitialState({
         name: "Digital assistant (copy)",
@@ -72,7 +50,7 @@ const deployFlowReducer = (
         services: {},
       });
     default:
-      return state;
+      return sharedDeployFlowReducer(state, action);
   }
 };
 
@@ -142,7 +120,7 @@ export const DeployFlow = ({
     });
   }, [deployOptions]);
 
-  const [state, dispatch] = useReducer(deployFlowReducer, initialState);
+  const [state, dispatch] = useReducer(daDeployFlowReducer, initialState);
   const hasInitialized = useRef(false);
 
   useEffect(() => {
@@ -172,26 +150,12 @@ export const DeployFlow = ({
     }
   }, [error]);
 
-  const handleFormDataChange = useCallback(
-    (updates: Partial<DeployFormData>) => {
-      dispatch({ type: ACTION_TYPES.UPDATE_FORM_DATA, payload: updates });
-    },
-    [],
-  );
-
-  const handleEditingChange = useCallback((isEditing: boolean) => {
-    dispatch({ type: ACTION_TYPES.SET_IS_EDITING, payload: isEditing });
-  }, []);
-
-  const handleResourceStatusChange = useCallback(
-    (hasInsufficientResources: boolean) => {
-      dispatch({
-        type: ACTION_TYPES.SET_HAS_INSUFFICIENT_RESOURCES,
-        payload: hasInsufficientResources,
-      });
-    },
-    [],
-  );
+  const {
+    handleFormDataChange,
+    handleEditingChange,
+    handleResourceStatusChange,
+    handleBack,
+  } = useDeployFlowReducer(dispatch, state.currentStep);
 
   const handleNext = () => {
     if (!state.formData.name.trim()) {
@@ -214,15 +178,6 @@ export const DeployFlow = ({
     }
   };
 
-  const handleBack = () => {
-    if (state.currentStep > 0) {
-      dispatch({
-        type: ACTION_TYPES.SET_CURRENT_STEP,
-        payload: state.currentStep - 1,
-      });
-    }
-  };
-
   const handleSubmit = async () => {
     if (!deployOptions) {
       dispatch({

ui/catalog/src/components/DeployFlow/DigitalAssistant/types.ts

@@ -16,23 +16,20 @@ export interface ServiceConfig extends BaseServiceConfig {
 export interface DeployFlowState extends BaseDeployFlowState {
   isLoading: boolean;
   error: string | null;
-  deployToastOpen: boolean;
 }
 
 export const ACTION_TYPES = {
   ...SHARED_ACTION_TYPES,
+  RESET_STATE: "RESET_STATE",
   SET_IS_LOADING: "SET_IS_LOADING",
   SET_ERROR: "SET_ERROR",
-  SHOW_DEPLOY_TOAST: "SHOW_DEPLOY_TOAST",
-  HIDE_DEPLOY_TOAST: "HIDE_DEPLOY_TOAST",
 } as const;
 
 export type DeployFlowAction =
   | SharedDeployFlowAction
+  | { type: typeof ACTION_TYPES.RESET_STATE }
   | { type: typeof ACTION_TYPES.SET_IS_LOADING; payload: boolean }
-  | { type: typeof ACTION_TYPES.SET_ERROR; payload: string | null }
-  | { type: typeof ACTION_TYPES.SHOW_DEPLOY_TOAST }
-  | { type: typeof ACTION_TYPES.HIDE_DEPLOY_TOAST };
+  | { type: typeof ACTION_TYPES.SET_ERROR; payload: string | null };
 
 export interface StepProps extends BaseStepProps {
   deployOptions: DeployOptionsResponse;

ui/catalog/src/components/DeployFlow/Services/ServicesDeployFlow.tsx

@@ -1,4 +1,4 @@
-import { useReducer, useEffect, useCallback, useRef, useMemo } from "react";
+import { useReducer, useEffect, useRef, useMemo } from "react";
 import { Tearsheet } from "@carbon/ibm-products";
 import {
   ProgressIndicator,
@@ -11,9 +11,12 @@ import type {
   DeployFlowState,
   DeployFlowAction,
 } from "./types.ts";
-import type { DeployFormData, ComponentConfig } from "../Shared/types";
+import type { ComponentConfig } from "../Shared/types";
 import { ACTION_TYPES } from "./types.ts";
-import { handleUpdateFormData } from "../Shared/utils/formData";
+import {
+  sharedDeployFlowReducer,
+  useDeployFlowReducer,
+} from "../Shared/hooks/useDeployFlowReducer";
 import { deployApplication } from "@/api/applications.api";
 import { transformToDeploymentPayload } from "./utils/serviceDeploymentTransform";
 import { extractDeployError } from "../Shared/utils/deployError";
@@ -23,52 +26,32 @@ import { StepZero } from "./steps/StepZero";
 import { useServiceDeployOptions } from "./hooks/useServiceDeployOptions";
 import { useServiceDeployStore } from "@/store/serviceDeploy.store";
 import { initializeFormData } from "./utils/formDataInitializer";
+import { BASE_INITIAL_STATE } from "../Shared/utils/formData";
 import styles from "./ServicesDeployFlow.module.scss";
 
 // Initial state for the deployment flow
 const getInitialState = (): DeployFlowState => ({
-  currentStep: 0,
-  isDeploying: false,
-  isEditing: false,
-  hasInsufficientResources: false,
-  deployError: null,
+  ...BASE_INITIAL_STATE,
   formData: {
     name: "Service deployment (copy)",
     version: "",
     globalComponents: {},
     services: {},
   },
   selectedServiceId: null,
-  showStepOneNameError: false,
 });
 
-const deployFlowReducer = (
+const servicesDeployFlowReducer = (
   state: DeployFlowState,
   action: DeployFlowAction,
 ): DeployFlowState => {
   switch (action.type) {
-    case ACTION_TYPES.SET_CURRENT_STEP:
-      return { ...state, currentStep: action.payload };
-    case ACTION_TYPES.SET_IS_DEPLOYING:
-      return { ...state, isDeploying: action.payload };
-    case ACTION_TYPES.SET_IS_EDITING:
-      return { ...state, isEditing: action.payload };
-    case ACTION_TYPES.SET_HAS_INSUFFICIENT_RESOURCES:
-      return { ...state, hasInsufficientResources: action.payload };
-    case ACTION_TYPES.SET_DEPLOY_ERROR:
-      return { ...state, deployError: action.payload };
-    case ACTION_TYPES.SET_FORM_DATA:
-      return { ...state, formData: action.payload };
-    case ACTION_TYPES.UPDATE_FORM_DATA:
-      return handleUpdateFormData(state, action.payload);
     case ACTION_TYPES.SET_SELECTED_SERVICE:
       return { ...state, selectedServiceId: action.payload };
-    case ACTION_TYPES.SET_SHOW_STEP_ONE_NAME_ERROR:
-      return { ...state, showStepOneNameError: action.payload };
     case ACTION_TYPES.RESET_STATE:
       return getInitialState();
     default:
-      return state;
+      return sharedDeployFlowReducer(state, action);
   }
 };
 
@@ -78,7 +61,7 @@ export const ServicesDeployFlow = ({
   onSubmit,
   preSelectedServiceId,
 }: ServicesDeployFlowProps) => {
-  const [state, dispatch] = useReducer(deployFlowReducer, {
+  const [state, dispatch] = useReducer(servicesDeployFlowReducer, {
     ...getInitialState(),
     selectedServiceId: preSelectedServiceId || null,
     currentStep: preSelectedServiceId ? 1 : 0, // Start at step 1 if service is pre-selected
@@ -285,31 +268,17 @@ export const ServicesDeployFlow = ({
     componentModels,
   ]);
 
-  const handleFormDataChange = useCallback(
-    (updates: Partial<DeployFormData>) => {
-      dispatch({ type: ACTION_TYPES.UPDATE_FORM_DATA, payload: updates });
-    },
-    [],
-  );
-
-  const handleEditingChange = useCallback((isEditing: boolean) => {
-    dispatch({ type: ACTION_TYPES.SET_IS_EDITING, payload: isEditing });
-  }, []);
-
-  const handleResourceStatusChange = useCallback(
-    (hasInsufficientResources: boolean) => {
-      dispatch({
-        type: ACTION_TYPES.SET_HAS_INSUFFICIENT_RESOURCES,
-        payload: hasInsufficientResources,
-      });
-    },
-    [],
-  );
+  const {
+    handleFormDataChange,
+    handleEditingChange,
+    handleResourceStatusChange,
+    handleBack,
+  } = useDeployFlowReducer(dispatch, state.currentStep);
 
-  const handleServiceSelect = useCallback((serviceId: string) => {
+  const handleServiceSelect = (serviceId: string) => {
     // Service selection will trigger useServiceDeployOptions to fetch data
     dispatch({ type: ACTION_TYPES.SET_SELECTED_SERVICE, payload: serviceId });
-  }, []);
+  };
 
   const handleNext = () => {
     // Show validation error if trying to proceed from step 1 with invalid name
@@ -329,15 +298,6 @@ export const ServicesDeployFlow = ({
     }
   };
 
-  const handleBack = () => {
-    if (state.currentStep > 0) {
-      dispatch({
-        type: ACTION_TYPES.SET_CURRENT_STEP,
-        payload: state.currentStep - 1,
-      });
-    }
-  };
-
   const handleSubmit = async () => {
     if (!deployOptions) {
       dispatch({

ui/catalog/src/components/DeployFlow/Services/types.ts

@@ -18,11 +18,13 @@ export interface DeployFlowState extends BaseDeployFlowState {
 
 export const ACTION_TYPES = {
   ...SHARED_ACTION_TYPES,
+  RESET_STATE: "RESET_STATE",
   SET_SELECTED_SERVICE: "SET_SELECTED_SERVICE",
 } as const;
 
 export type DeployFlowAction =
   | SharedDeployFlowAction
+  | { type: typeof ACTION_TYPES.RESET_STATE }
   | { type: typeof ACTION_TYPES.SET_SELECTED_SERVICE; payload: string | null };
 
 export interface StepProps extends BaseStepProps {