Add form/yaml toggle with basic yaml viewer

ashley-o0o · ashley-o0o · commit 807be245adbf · 2026-02-17T12:16:23.000-05:00
diff --git a/packages/cypress/cypress/pages/modelServing.ts b/packages/cypress/cypress/pages/modelServing.ts
@@ -1326,6 +1326,14 @@ class ModelServingWizard extends Wizard {
   findReviewStepModelDetailsSection() {
     return cy.findByTestId('review-step-model-details');
   }
+
+  findYAMLViewerToggle(name: string) {
+    return cy.findByRole('button', { name });
+  }
+
+  findYAMLCodeEditor() {
+    return cy.findByTestId('yaml-editor');
+  }
 }
 
 export const modelServingGlobal = new ModelServingGlobal();
diff --git a/packages/cypress/cypress/tests/mocked/modelServing/modelServingDeploy.cy.ts b/packages/cypress/cypress/tests/mocked/modelServing/modelServingDeploy.cy.ts
@@ -69,6 +69,7 @@ const initIntercepts = ({
     mockDashboardConfig({
       disableNIMModelServing: true,
       disableKServe: false,
+      deploymentWizardYAMLViewer: true,
     }),
   );
   // used by addSupportServingPlatformProject
@@ -1691,6 +1692,48 @@ describe('Model Serving Deploy Wizard', () => {
     modelServingWizardEdit.findModelSourceStep().should('be.enabled');
   });
 
+  it('Should show YAML preview mode when LLMd is selected', () => {
+    initIntercepts({ modelType: ServingRuntimeModelType.GENERATIVE });
+    cy.interceptK8sList(
+      { model: InferenceServiceModel, ns: 'test-project' },
+      mockK8sResourceList([mockInferenceServiceK8sResource({})]),
+    );
+    cy.interceptK8sList(
+      { model: ServingRuntimeModel, ns: 'test-project' },
+      mockK8sResourceList([mockServingRuntimeK8sResource({})]),
+    );
+
+    modelServingGlobal.visit('test-project');
+    modelServingGlobal.findDeployModelButton().click();
+    modelServingWizard.findModelTypeSelectOption(ModelTypeLabel.GENERATIVE).should('exist').click();
+    modelServingWizard.findModelLocationSelect().should('exist');
+    modelServingWizard
+      .findModelLocationSelectOption(ModelLocationSelectOption.EXISTING)
+      .should('exist')
+      .click();
+    modelServingWizard.findExistingConnectionSelect().should('exist').click();
+    modelServingWizard
+      .findExistingConnectionSelectOption('Test URI Secret')
+      .should('exist')
+      .click();
+    modelServingWizard.findNextButton().should('be.enabled').click();
+    modelServingWizard.findModelDeploymentNameInput().type('test-model');
+    modelServingWizard.findServingRuntimeTemplateSearchSelector().click();
+    modelServingWizard
+      .findGlobalScopedTemplateOption('Distributed inference with llm-d')
+      .should('exist')
+      .click();
+
+    // YAML Viewer
+    modelServingWizard.findYAMLViewerToggle('YAML').should('exist').click();
+    modelServingWizard.findYAMLCodeEditor().should('exist');
+
+    modelServingWizard.findYAMLViewerToggle('Form').should('exist').click();
+    modelServingWizard.findServingRuntimeTemplateSearchSelector().click();
+    modelServingWizard.findGlobalScopedTemplateOption('vLLM NVIDIA').should('exist').click();
+    modelServingWizard.findYAMLViewerToggle('YAML').should('not.exist');
+  });
+
   describe('redirect from v2 to v3 route', () => {
     beforeEach(() => {
       initIntercepts({});
diff --git a/packages/model-serving/src/components/deploymentWizard/ModelDeploymentWizard.tsx b/packages/model-serving/src/components/deploymentWizard/ModelDeploymentWizard.tsx
@@ -22,6 +22,7 @@ import { InitialWizardFormData, WizardStepTitle } from './types';
 import { ExitDeploymentModal } from './exitModal/ExitDeploymentModal';
 import { useRefreshWizardPage } from './useRefreshWizardPage';
 import { useExitDeploymentWizard } from './exitModal/useExitDeploymentWizard';
+import { DeploymentWizardYAMLView } from './useDeploymentWizardYAMLView';
 import { WizardFooterWithDisablingNext } from '../generic/WizardFooterWithDisablingNext';
 
 type ModelDeploymentWizardProps = {
@@ -33,6 +34,9 @@ type ModelDeploymentWizardProps = {
   existingDeployment?: Deployment;
   returnRoute?: string;
   cancelReturnRoute?: string;
+  headerAction?: React.ReactNode;
+  viewMode?: 'form' | 'yaml-preview' | 'yaml-edit';
+  onModelServerChange?: (modelServerName: string | undefined) => void;
 };
 
 const ModelDeploymentWizard: React.FC<ModelDeploymentWizardProps> = ({
@@ -44,6 +48,9 @@ const ModelDeploymentWizard: React.FC<ModelDeploymentWizardProps> = ({
   existingDeployment,
   returnRoute,
   cancelReturnRoute,
+  headerAction,
+  viewMode = 'form',
+  onModelServerChange,
 }) => {
   const onRefresh = useRefreshWizardPage(existingDeployment);
   const { isExitModalOpen, openExitModal, closeExitModal, handleExitConfirm, exitWizardOnSubmit } =
@@ -56,6 +63,12 @@ const ModelDeploymentWizard: React.FC<ModelDeploymentWizardProps> = ({
   const validation = useModelDeploymentWizardValidation(wizardState.state, wizardState.fields);
   const currentProjectName = wizardState.state.project.projectName ?? undefined;
 
+  React.useEffect(() => {
+    if (onModelServerChange) {
+      onModelServerChange(wizardState.state.modelServer.data?.name);
+    }
+  }, [wizardState.state.modelServer.data?.name, onModelServerChange]);
+
   const { deployMethod, deployMethodLoaded } = useDeployMethod(wizardState.state);
   // TODO in same jira, replace deployMethod with applyFieldData for all other fields
   const { applyFieldData, applyExtensionsLoaded } = useWizardFieldApply(wizardState.state);
@@ -194,7 +207,13 @@ const ModelDeploymentWizard: React.FC<ModelDeploymentWizardProps> = ({
           }
         `}
       </style>
-      <ApplicationsPage title={title} description={description} loaded empty={false}>
+      <ApplicationsPage
+        title={title}
+        description={description}
+        loaded
+        empty={false}
+        headerAction={headerAction}
+      >
         <ExternalDataLoader
           fields={wizardState.fields}
           initialData={existingData}
@@ -210,7 +229,9 @@ const ModelDeploymentWizard: React.FC<ModelDeploymentWizardProps> = ({
           startIndex={wizardState.initialData?.wizardStartIndex ?? 1}
         >
           <WizardStep name={WizardStepTitle.MODEL_DETAILS} id="source-model-step">
-            {wizardState.loaded.modelSourceLoaded ? (
+            {viewMode === 'yaml-preview' ? (
+              <DeploymentWizardYAMLView />
+            ) : wizardState.loaded.modelSourceLoaded ? (
               <ModelSourceStepContent
                 wizardState={wizardState}
                 validation={validation.modelSource}
@@ -222,9 +243,11 @@ const ModelDeploymentWizard: React.FC<ModelDeploymentWizardProps> = ({
           <WizardStep
             name={WizardStepTitle.MODEL_DEPLOYMENT}
             id="model-deployment-step"
-            isDisabled={!validation.isModelSourceStepValid}
+            isDisabled={viewMode === 'form' && !validation.isModelSourceStepValid}
           >
-            {wizardState.loaded.modelDeploymentLoaded ? (
+            {viewMode === 'yaml-preview' ? (
+              <DeploymentWizardYAMLView />
+            ) : wizardState.loaded.modelDeploymentLoaded ? (
               <ModelDeploymentStepContent
                 projectName={currentProjectName}
                 wizardState={wizardState}
@@ -237,10 +260,13 @@ const ModelDeploymentWizard: React.FC<ModelDeploymentWizardProps> = ({
             name={WizardStepTitle.ADVANCED_SETTINGS}
             id="advanced-options-step"
             isDisabled={
-              !validation.isModelSourceStepValid || !validation.isModelDeploymentStepValid
+              viewMode === 'form' &&
+              (!validation.isModelSourceStepValid || !validation.isModelDeploymentStepValid)
             }
           >
-            {wizardState.loaded.advancedOptionsLoaded ? (
+            {viewMode === 'yaml-preview' ? (
+              <DeploymentWizardYAMLView />
+            ) : wizardState.loaded.advancedOptionsLoaded ? (
               <AdvancedSettingsStepContent
                 wizardState={wizardState}
                 projectName={currentProjectName}
@@ -254,12 +280,15 @@ const ModelDeploymentWizard: React.FC<ModelDeploymentWizardProps> = ({
             name={WizardStepTitle.REVIEW}
             id="summary-step"
             isDisabled={
-              !validation.isModelSourceStepValid ||
-              !validation.isModelDeploymentStepValid ||
-              !validation.isAdvancedSettingsStepValid
+              viewMode === 'form' &&
+              (!validation.isModelSourceStepValid ||
+                !validation.isModelDeploymentStepValid ||
+                !validation.isAdvancedSettingsStepValid)
             }
           >
-            {wizardState.loaded.summaryLoaded ? (
+            {viewMode === 'yaml-preview' ? (
+              <DeploymentWizardYAMLView />
+            ) : wizardState.loaded.summaryLoaded ? (
               <ReviewStepContent
                 wizardState={wizardState}
                 projectName={currentProjectName}
diff --git a/packages/model-serving/src/components/deploymentWizard/ModelDeploymentWizardPage.tsx b/packages/model-serving/src/components/deploymentWizard/ModelDeploymentWizardPage.tsx
@@ -9,8 +9,11 @@ import {
   EmptyStateBody,
   EmptyState,
   Spinner,
+  ToggleGroup,
+  ToggleGroupItem,
 } from '@patternfly/react-core';
 import { ExclamationCircleIcon } from '@patternfly/react-icons';
+import { SupportedArea, useIsAreaAvailable } from '@odh-dashboard/internal/concepts/areas';
 import ModelDeploymentWizard from './ModelDeploymentWizard';
 import { ModelDeploymentsProvider } from '../../concepts/ModelDeploymentsContext';
 import { useAvailableClusterPlatforms } from '../../concepts/useAvailableClusterPlatforms';
@@ -38,8 +41,14 @@ const ErrorContent: React.FC<{ error: Error }> = ({ error }) => {
   );
 };
 
+const LLMD_SERVING_ID = 'llmd-serving';
+
 export const ModelDeploymentWizardPage: React.FC = () => {
   const location = useLocation();
+  const [viewMode, setViewMode] = React.useState<'form' | 'yaml-preview' | 'yaml-edit'>('form');
+  const [selectedModelServer, setSelectedModelServer] = React.useState<string | undefined>();
+  const isYAMLViewerEnabled = useIsAreaAvailable(SupportedArea.YAML_VIEWER).status;
+  const isLLMdSelected = selectedModelServer === LLMD_SERVING_ID;
 
   // Extract state from navigation
   const existingData = location.state?.initialData;
@@ -99,6 +108,28 @@ export const ModelDeploymentWizardPage: React.FC = () => {
         existingDeployment={existingDeployment}
         returnRoute={returnRoute}
         cancelReturnRoute={cancelReturnRoute}
+        viewMode={viewMode}
+        onModelServerChange={setSelectedModelServer}
+        headerAction={
+          isYAMLViewerEnabled && isLLMdSelected ? (
+            <ToggleGroup aria-label="Deployment view mode">
+              <ToggleGroupItem
+                data-testid="form-view"
+                text="Form"
+                buttonId="form-view"
+                isSelected={viewMode === 'form'}
+                onChange={() => setViewMode('form')}
+              />
+              <ToggleGroupItem
+                data-testid="yaml-view"
+                text="YAML"
+                buttonId="yaml-view"
+                isSelected={viewMode === 'yaml-preview'}
+                onChange={() => setViewMode('yaml-preview')}
+              />
+            </ToggleGroup>
+          ) : undefined
+        }
       />
     </ModelDeploymentsProvider>
   );
diff --git a/packages/model-serving/src/components/deploymentWizard/useDeploymentWizardYAMLView.tsx b/packages/model-serving/src/components/deploymentWizard/useDeploymentWizardYAMLView.tsx
@@ -0,0 +1,34 @@
+import React from 'react';
+import { Language } from '@patternfly/react-code-editor';
+import { Stack, StackItem, Flex, FlexItem, Button } from '@patternfly/react-core';
+import DashboardCodeEditor from '@odh-dashboard/internal/concepts/dashboard/codeEditor/DashboardCodeEditor';
+
+export const DeploymentWizardYAMLView: React.FC = () => {
+  const code =
+    '# Continue filling out the form to preview YAML, or enter Manual Edit Mode to write YAML directly\n';
+
+  return (
+    <Stack hasGutter>
+      <StackItem>
+        <Flex justifyContent={{ default: 'justifyContentFlexEnd' }}>
+          <FlexItem>
+            <Button variant="primary" data-testid="manual-edit-mode-button">
+              Enter Manual Edit Mode
+            </Button>
+          </FlexItem>
+        </Flex>
+      </StackItem>
+      <StackItem>
+        <DashboardCodeEditor
+          testId="yaml-editor"
+          code={code}
+          language={Language.yaml}
+          isReadOnly
+          isLineNumbersVisible
+          isLanguageLabelVisible
+          codeEditorHeight="500px"
+        />
+      </StackItem>
+    </Stack>
+  );
+};

Original file line number	Diff line number	Diff line change
`@@ -1326,6 +1326,14 @@ class ModelServingWizard extends Wizard {`
`1326`	`1326`	`findReviewStepModelDetailsSection() {`
`1327`	`1327`	`return cy.findByTestId('review-step-model-details');`
`1328`	`1328`	`}`
	`1329`	`+`
	`1330`	`+ findYAMLViewerToggle(name: string) {`
	`1331`	`+ return cy.findByRole('button', { name });`
	`1332`	`+ }`
	`1333`	`+`
	`1334`	`+ findYAMLCodeEditor() {`
	`1335`	`+ return cy.findByTestId('yaml-editor');`
	`1336`	`+ }`
`1329`	`1337`	`}`
`1330`	`1338`
`1331`	`1339`	`export const modelServingGlobal = new ModelServingGlobal();`