Update MaaS use case for wizard deployment

ashley-o0o · ashley-o0o · commit db11a7e119e4 · 2026-03-13T12:22:24.000-04:00
diff --git a/packages/cypress/cypress/tests/mocked/modelsAsAService/maasTiers.cy.ts b/packages/cypress/cypress/tests/mocked/modelsAsAService/maasTiers.cy.ts
@@ -22,7 +22,11 @@ import {
   tierDetailsPage,
   tiersPage,
 } from '../../../pages/modelsAsAService';
-import { modelServingGlobal, modelServingWizard } from '../../../pages/modelServing';
+import {
+  modelServingGlobal,
+  modelServingSection,
+  modelServingWizard,
+} from '../../../pages/modelServing';
 import { mockTier, mockTiers } from '../../../utils/maasUtils';
 import {
   HardwareProfileModel,
@@ -413,16 +417,25 @@ describe.skip('MaaS Deployment Wizard', () => {
     modelServingWizard.findNextButton().click();
 
     // Focus on MaaS feature testing
-    // uncheck token auth to simplify test
-    modelServingWizard.findTokenAuthenticationCheckbox().click();
-
     // Verify MaaS checkbox is unchecked by default
     maasWizardField.findSaveAsMaaSCheckbox().should('exist').should('not.be.checked');
 
-    // Check the MaaS checkbox
+    // // Check the MaaS checkbox
+    modelServingWizard.findSaveAiAssetCheckbox().click();
     maasWizardField.findSaveAsMaaSCheckbox().click();
     maasWizardField.findSaveAsMaaSCheckbox().should('be.checked');
 
+    modelServingWizard
+      .findTokenAuthenticationCheckbox()
+      .should('not.be.checked')
+      .should('be.disabled');
+    modelServingWizard.findSaveAiAssetCheckbox().click();
+    maasWizardField.findSaveAsMaaSCheckbox().should('not.be.checked').should('be.disabled');
+    modelServingWizard.findTokenAuthenticationCheckbox().should('be.checked').should('be.enabled');
+
+    modelServingWizard.findSaveAiAssetCheckbox().click();
+    maasWizardField.findSaveAsMaaSCheckbox().click();
+
     // Verify default selection is "All resource tiers"
     maasWizardField.findMaaSTierDropdown().should('contain.text', 'All tiers');
 
@@ -467,5 +480,44 @@ describe.skip('MaaS Deployment Wizard', () => {
 
     cy.wait('@createLLMInferenceService'); // Actual request
     cy.get('@createLLMInferenceService.all').should('have.length', 2);
+
+    // Re-intercept the list with the newly created MaaS deployment
+    const maasDeployment = mockLLMInferenceServiceK8sResource({
+      name: 'test-maas-llmd-model',
+      namespace: 'test-project',
+      displayName: 'test-maas-llmd-model',
+    });
+    maasDeployment.metadata.annotations = {
+      ...maasDeployment.metadata.annotations,
+      'alpha.maas.opendatahub.io/tiers': JSON.stringify(['free', 'premium']),
+    };
+    maasDeployment.metadata.labels = {
+      ...maasDeployment.metadata.labels,
+      'opendatahub.io/genai-asset': 'true',
+    };
+
+    cy.interceptK8sList(LLMInferenceServiceModel, mockK8sResourceList([maasDeployment]));
+    cy.interceptK8sList(InferenceServiceModel, mockK8sResourceList([]));
+    cy.interceptK8sList(ServingRuntimeModel, mockK8sResourceList([]));
+    cy.interceptK8s(
+      { model: HardwareProfileModel, ns: 'opendatahub', name: 'small-profile' },
+      mockGlobalScopedHardwareProfiles[0],
+    );
+
+    // Navigate to deployments and verify the expanded row
+    modelServingSection.visit('test-project');
+
+    const row = modelServingSection.getKServeRow('test-maas-llmd-model');
+    row.findToggleButton('llmd-serving').click();
+
+    // Token auth should be hidden when MaaS is enabled
+    row.findDescriptionListItem('Token authentication').should('not.exist');
+
+    // Model availability should show MaaS
+    row.findDescriptionListItem('Model availability').should('exist');
+    row
+      .findDescriptionListItem('Model availability')
+      .next('dd')
+      .should('contain.text', 'Model-as-a-Service (MaaS)');
   });
 });
diff --git a/packages/maas/frontend/src/odh/modelServingExtensions/modelDeploymentWizard/MaaSEndpointCheckbox.tsx b/packages/maas/frontend/src/odh/modelServingExtensions/modelDeploymentWizard/MaaSEndpointCheckbox.tsx
@@ -21,6 +21,7 @@ type MaaSFieldProps = {
   id: string;
   value: MaaSFieldValue;
   onChange: (value: MaaSFieldValue) => void;
+  isDisabled?: boolean;
 };
 
 const MaaSField: React.FC<MaaSFieldProps> = ({ id, value, onChange }) => {
@@ -50,6 +51,7 @@ const MaaSField: React.FC<MaaSFieldProps> = ({ id, value, onChange }) => {
             </>
           }
           isChecked={value.isChecked}
+          isDisabled={isDisabled}
           onChange={handleCheckboxChange}
         />
       </Stack>
diff --git a/packages/model-serving/src/components/deploymentWizard/fields/GenericFieldRenderer.tsx b/packages/model-serving/src/components/deploymentWizard/fields/GenericFieldRenderer.tsx
@@ -7,12 +7,14 @@ type GenericFieldRendererProps = {
   wizardState: UseModelDeploymentWizardState;
   parentId: string;
   externalData?: ExternalDataMap;
+  isDisabled?: boolean;
 };
 
 export const GenericFieldRenderer: React.FC<GenericFieldRendererProps> = ({
   parentId,
   wizardState,
   externalData,
+  isDisabled,
 }) => {
   const fields: WizardField<unknown>[] = React.useMemo(() => {
     return wizardState.fields.filter((f) => f.parentId === parentId);
@@ -32,6 +34,7 @@ export const GenericFieldRenderer: React.FC<GenericFieldRendererProps> = ({
               });
             },
             externalData: externalData?.[field.id] ?? undefined,
+            isDisabled,
           })}
         </React.Fragment>
       ))}
diff --git a/packages/model-serving/src/components/deploymentWizard/fields/ModelAvailabilityFields.tsx b/packages/model-serving/src/components/deploymentWizard/fields/ModelAvailabilityFields.tsx
@@ -136,11 +136,14 @@ export const AvailableAiAssetsFieldsComponent: React.FC<AvailableAiAssetsFieldsC
             </div>
           </StackItem>
         )}
-        <GenericFieldRenderer
-          parentId="model-playground-availability"
-          wizardState={wizardState}
-          externalData={externalData}
-        />
+        <div style={{ marginLeft: 'var(--pf-t--global--spacer--lg)' }}>
+          <GenericFieldRenderer
+            parentId="model-playground-availability"
+            wizardState={wizardState}
+            externalData={externalData}
+            isDisabled={!data.saveAsAiAsset}
+          />
+        </div>
       </Stack>
     </StackItem>
   );
diff --git a/packages/model-serving/src/components/deploymentWizard/fields/TokenAuthenticationField.tsx b/packages/model-serving/src/components/deploymentWizard/fields/TokenAuthenticationField.tsx
@@ -189,13 +189,35 @@ type TokenAuthenticationFieldProps = {
   tokens?: TokenAuthenticationFieldData;
   onChange?: TokenAuthenticationFieldHook['setData'];
   allowCreate?: boolean;
+  forceDisabled?: boolean;
 };
 
 export const TokenAuthenticationField: React.FC<TokenAuthenticationFieldProps> = ({
   tokens = [],
   onChange,
   allowCreate = false,
+  forceDisabled = false,
 }) => {
+  const savedTokensRef = React.useRef<TokenAuthenticationFieldData | null>(null);
+  const wasForceDisabledRef = React.useRef(forceDisabled);
+
+  React.useEffect(() => {
+    if (forceDisabled && tokens.length > 0) {
+      savedTokensRef.current = tokens;
+      onChange?.([]);
+    }
+    if (!forceDisabled && wasForceDisabledRef.current) {
+      if (savedTokensRef.current) {
+        onChange?.(savedTokensRef.current);
+      } else {
+        onChange?.([{ uuid: getUniqueId('ml'), displayName: 'default-name', error: '' }]);
+      }
+      savedTokensRef.current = null;
+    }
+    wasForceDisabledRef.current = forceDisabled;
+  }, [forceDisabled, tokens, onChange]);
+
+  const isDisabled = forceDisabled || !allowCreate;
   const createNewToken = React.useCallback(() => {
     const displayName = 'default-name';
     const duplicated = tokens.filter((token) => token.displayName === displayName);
@@ -227,7 +249,7 @@ export const TokenAuthenticationField: React.FC<TokenAuthenticationFieldProps> =
           id="alt-form-checkbox-auth"
           data-testid="token-authentication-checkbox"
           name="alt-form-checkbox-auth"
-          isDisabled={!allowCreate}
+          isDisabled={isDisabled}
           isChecked={tokens.length > 0}
           onChange={(e, check) => {
             if (check && tokens.length === 0) {
@@ -242,7 +264,7 @@ export const TokenAuthenticationField: React.FC<TokenAuthenticationFieldProps> =
         <StackItem>
           <div style={{ marginLeft: 'var(--pf-t--global--spacer--lg)' }}>
             <Stack hasGutter>
-              {allowCreate && (
+              {!isDisabled && (
                 <StackItem>
                   <Alert
                     variant="info"
@@ -257,7 +279,7 @@ export const TokenAuthenticationField: React.FC<TokenAuthenticationFieldProps> =
                     newToken={token}
                     existingTokens={tokens}
                     setTokens={onChange}
-                    disabled={!allowCreate}
+                    disabled={isDisabled}
                   />
                 </StackItem>
               ))}
@@ -268,7 +290,7 @@ export const TokenAuthenticationField: React.FC<TokenAuthenticationFieldProps> =
                   iconPosition="left"
                   variant="link"
                   icon={<PlusCircleIcon />}
-                  isDisabled={!allowCreate}
+                  isDisabled={isDisabled}
                   data-testid="add-service-account-button"
                 >
                   Add a service account
diff --git a/packages/model-serving/src/components/deploymentWizard/steps/AdvancedOptionsStep.tsx b/packages/model-serving/src/components/deploymentWizard/steps/AdvancedOptionsStep.tsx
@@ -46,6 +46,14 @@ export const AdvancedSettingsStepContent: React.FC<AdvancedSettingsStepContentPr
   const tokenAuthData = wizardState.state.tokenAuthentication.data;
   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;
+    }
+    return false;
+  })();
+
   // TODO: Clean up the stuff below related to KServe. Maybe move to an extension?
   const selectedModelServer = React.useMemo(() => {
     const templates = wizardState.state.modelFormatState.templatesFilteredForModelType;
@@ -153,6 +161,7 @@ export const AdvancedSettingsStepContent: React.FC<AdvancedSettingsStepContentPr
                 <TokenAuthenticationField
                   tokens={tokenAuthData}
                   allowCreate={allowCreate}
+                  forceDisabled={isMaaSChecked}
                   onChange={wizardState.state.tokenAuthentication.setData}
                 />
               </FormGroup>
diff --git a/packages/model-serving/src/components/deploymentWizard/types.ts b/packages/model-serving/src/components/deploymentWizard/types.ts
@@ -219,6 +219,7 @@ export type WizardField<
     value: FieldData;
     onChange: (value: FieldData) => void;
     externalData?: { data: ExternalData; loaded: boolean; loadError?: Error };
+    isDisabled?: boolean;
   }>;
   getReviewSections?: (
     value: FieldData,
diff --git a/packages/model-serving/src/components/deployments/row/DeploymentsTableRowExpandedSection.tsx b/packages/model-serving/src/components/deployments/row/DeploymentsTableRowExpandedSection.tsx
@@ -199,7 +199,7 @@ export const DeploymentRowExpandedSection: React.FC<{
               hardwareProfile={hardwareProfileOptions}
             />
             {modelAvailability && <ModelAvailabilityItem modelAvailability={modelAvailability} />}
-            <TokenAuthenticationItem deployment={deployment} />
+            {!modelAvailability?.saveAsMaaS && <TokenAuthenticationItem deployment={deployment} />}
           </Stack>
         </ExpandableRowContent>
       </Td>
