Remove useEffect

Author: ashley-o0o

packages/maas/frontend/src/odh/modelServingExtensions/modelDeploymentWizard/MaaSEndpointCheckbox.tsx

@@ -24,7 +24,7 @@ type MaaSFieldProps = {
   isDisabled?: boolean;
 };
 
-const MaaSField: React.FC<MaaSFieldProps> = ({ id, value, onChange }) => {
+const MaaSField: React.FC<MaaSFieldProps> = ({ id, value, onChange, isDisabled }) => {
   const handleCheckboxChange = (_: React.FormEvent<HTMLInputElement>, checked: boolean): void => {
     onChange({ isChecked: checked });
   };
@@ -71,6 +71,12 @@ export const MaaSEndpointFieldWizardField: MaaSFieldType = {
     wizardFormData.modelServer?.data?.name === LLMD_SERVING_ID,
   reducerFunctions: {
     setFieldData: setMaaSFieldData,
+    getFieldData: (storedValue, wizardState) => {
+      if (!wizardState.modelAvailability?.data?.saveAsAiAsset) {
+        return { isChecked: false };
+      }
+      return storedValue;
+    },
     getInitialFieldData: getInitialMaaSFieldData,
     validationSchema: maasFieldSchema,
   },

packages/model-serving/src/components/deploymentWizard/fields/GenericFieldRenderer.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { WizardField } from '../types';
+import { resolveFieldValue, type WizardField } from '../types';
 import type { UseModelDeploymentWizardState } from '../useDeploymentWizard';
 import type { ExternalDataMap } from '../ExternalDataLoader';
 
@@ -26,7 +26,7 @@ export const GenericFieldRenderer: React.FC<GenericFieldRendererProps> = ({
         <React.Fragment key={field.id}>
           {field.component({
             id: field.id,
-            value: wizardState.state[field.id],
+            value: resolveFieldValue(field, wizardState.state),
             onChange: (value) => {
               wizardState.dispatch({
                 type: 'setFieldData',

packages/model-serving/src/components/deploymentWizard/steps/AdvancedOptionsStep.tsx

@@ -24,6 +24,7 @@ import { type UseModelDeploymentWizardState } from '../useDeploymentWizard';
 import { AvailableAiAssetsFieldsComponent } from '../fields/ModelAvailabilityFields';
 import { showAuthWarning } from '../hooks/useAuthWarning';
 import type { ExternalDataMap } from '../ExternalDataLoader';
+import { resolveFieldValue } from '../types';
 
 export const accessReviewResource: AccessReviewResourceAttributes = {
   group: 'rbac.authorization.k8s.io',
@@ -47,9 +48,13 @@ export const AdvancedSettingsStepContent: React.FC<AdvancedSettingsStepContentPr
   const { isExternalRouteVisible, shouldAutoCheckTokens } = wizardState.advancedOptions;
 
   const isMaaSChecked = (() => {
-    const field = wizardState.state['maas/save-as-maas-checkbox'];
-    if (typeof field === 'object' && field !== null && 'isChecked' in field) {
-      return !!field.isChecked;
+    const fieldDef = wizardState.fields.find((f) => f.id === 'maas/save-as-maas-checkbox');
+    if (!fieldDef) {
+      return false;
+    }
+    const resolved = resolveFieldValue(fieldDef, wizardState.state);
+    if (typeof resolved === 'object' && resolved !== null && 'isChecked' in resolved) {
+      return !!resolved.isChecked;
     }
     return false;
   })();

packages/model-serving/src/components/deploymentWizard/steps/ReviewStep.tsx

@@ -17,7 +17,13 @@ import {
   isConnectionTypeDataField,
 } from '@odh-dashboard/internal/concepts/connectionTypes/utils';
 import { UseModelDeploymentWizardState } from '../useDeploymentWizard';
-import { ModelLocationType, ModelTypeLabel, WizardReviewSection, WizardStepTitle } from '../types';
+import {
+  ModelLocationType,
+  ModelTypeLabel,
+  WizardReviewSection,
+  WizardStepTitle,
+  resolveFieldValue,
+} from '../types';
 import { deploymentStrategyRecreate } from '../fields/DeploymentStrategyField';
 import { ExternalDataMap } from '../ExternalDataLoader';
 import { isWizardStepTitle } from '../utils';
@@ -368,7 +374,7 @@ export const ReviewStepContent: React.FC<ReviewStepContentProps> = ({
       if (!field.getReviewSections) {
         return [];
       }
-      const value = wizardState.state[field.id];
+      const value = resolveFieldValue(field, wizardState.state);
       const fieldExternalData = externalData?.[field.id];
       return field.getReviewSections(value, wizardState.state, fieldExternalData?.data);
     });

packages/model-serving/src/components/deploymentWizard/types.ts

@@ -206,6 +206,7 @@ export type WizardField<
   reducerFunctions: {
     // TODO: make dispatch function that clears if this field's dependencies are changing
     setFieldData: (fieldData: FieldData) => FieldData;
+    getFieldData?: (storedValue: FieldData, wizardState: WizardFormData['state']) => FieldData;
     getInitialFieldData: (fieldData?: FieldData, externalData?: ExternalData) => FieldData;
     validationSchema?: z.ZodSchema<FieldData>;
   };
@@ -228,6 +229,13 @@ export type WizardField<
   ) => WizardReviewSection[];
 };
 
+export const resolveFieldValue = (field: WizardField, state: WizardFormData['state']): unknown => {
+  const storedValue: unknown = state[field.id];
+  return field.reducerFunctions.getFieldData
+    ? field.reducerFunctions.getFieldData(storedValue, state)
+    : storedValue;
+};
+
 // actual fields
 
 export type ModelServerTemplateField = DeploymentWizardFieldBase<'modelServerTemplate'> & {

packages/model-serving/src/components/deploymentWizard/useDeploymentWizardValidation.tsx

@@ -4,7 +4,7 @@ import { useZodFormValidation } from '@odh-dashboard/internal/hooks/useZodFormVa
 import { isK8sNameDescriptionDataValid } from '@odh-dashboard/internal/concepts/k8s/K8sNameDescriptionField/utils';
 import { useValidation } from '@odh-dashboard/internal/utilities/useValidation';
 import { hardwareProfileValidationSchema } from '@odh-dashboard/internal/concepts/hardwareProfiles/validationUtils';
-import type { WizardField, WizardFormData } from './types';
+import { resolveFieldValue, type WizardField, type WizardFormData } from './types';
 import { modelSourceStepSchema, type ModelSourceStepData } from './steps/ModelSourceStep';
 import { externalRouteFieldSchema } from './fields/ExternalRouteField';
 import { tokenAuthenticationFieldSchema } from './fields/TokenAuthenticationField';
@@ -79,7 +79,7 @@ export const useModelDeploymentWizardValidation = (
       runtimeArgs: state.runtimeArgs.data,
       environmentVariables: state.environmentVariables.data,
       ...step3Fields.reduce<Record<string, unknown>>((acc, field) => {
-        acc[field.id] = state[field.id];
+        acc[field.id] = resolveFieldValue(field, state);
         return acc;
       }, {}),
     },

packages/model-serving/src/components/deploymentWizard/useWizardFieldApply.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import type { ResolvedExtension } from '@openshift/dynamic-plugin-sdk';
 import type { K8sResourceCommon } from '@openshift/dynamic-plugin-sdk-utils';
 import { useResolvedExtensions } from '@odh-dashboard/plugin-core';
-import type { WizardFormData } from './types';
+import type { WizardField, WizardFormData } from './types';
 import {
   isWizardFieldApplyExtension,
   isWizardField2Extension,
@@ -47,13 +47,25 @@ export const useWizardFieldApply = (
     return applyExtensions.filter((ext) => activeFieldIds.has(ext.properties.fieldId));
   }, [applyExtensions, activeFieldIds]);
 
+  const fieldMap = React.useMemo((): Map<string, WizardField> => {
+    const map = new Map<string, WizardField>();
+    for (const ext of fieldExtensions) {
+      map.set(ext.properties.field.id, ext.properties.field);
+    }
+    return map;
+  }, [fieldExtensions]);
+
   const applyFieldData = React.useCallback(
     (deployment: Deployment): Deployment => {
       let result = deployment;
 
       for (const applyExt of activeApplyExtensions) {
         const { fieldId } = applyExt.properties;
-        const fieldData: unknown = wizardState[fieldId];
+        const rawFieldData: unknown = wizardState[fieldId];
+        const field = fieldMap.get(fieldId);
+        const fieldData: unknown = field?.reducerFunctions.getFieldData
+          ? field.reducerFunctions.getFieldData(rawFieldData, wizardState)
+          : rawFieldData;
 
         if (fieldData !== undefined) {
           result = applyExt.properties.apply(result, fieldData, wizardState);
@@ -76,7 +88,7 @@ export const useWizardFieldApply = (
 
       return result;
     },
-    [activeApplyExtensions, wizardState, navSourceMetadata],
+    [activeApplyExtensions, fieldMap, wizardState, navSourceMetadata],
   );
 
   return React.useMemo(