second pass

Author: katieperry4

packages/model-registry/upstream/frontend/src/odh/components/ModelCatalogDeployButton.tsx

@@ -12,13 +12,13 @@ export const ModelCatalogDeployButton = ({
 }) => (
   <ModelCatalogDeployModalExtension
     model={model}
-    render={(buttonState, onDeployClick, isModalAvailable) => {
+    render={(buttonState, onOpenModal, isModalAvailable) => {
       const deployButton = (
         <Button
           id="deploy-button"
           aria-label="Deploy model"
           variant={ButtonVariant.primary}
-          onClick={buttonState?.enabled ? onDeployClick : undefined}
+          onClick={buttonState?.enabled ? onOpenModal : undefined}
           isAriaDisabled={!buttonState?.enabled}
           data-testid="deploy-button"
         >

packages/model-registry/upstream/frontend/src/odh/components/ModelCatalogDeployModalExtension.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { useNavigate, useParams } from 'react-router-dom';
+import { useParams } from 'react-router-dom';
 import { HookNotify, useResolvedExtensions } from '@odh-dashboard/plugin-core';
 import { isModelCatalogDeployModalExtension } from '~/odh/extension-points';
 import { CatalogModel, CatalogModelDetailsParams } from '~/app/modelCatalogTypes';
@@ -9,15 +9,10 @@ import {
   decodeParams,
   getModelArtifactUri,
 } from '~/app/pages/modelCatalog/utils/modelCatalogUtils';
-import {
-  InitialWizardFormData,
-  ModelLocationType,
-} from '@odh-dashboard/model-serving/types/form-data';
-import { extractExternalFormData } from '~/odh/extractExternalFormData';
-import {
-  isExternalFormDataExtension,
-  isNavigateToWizardExtension,
-} from '../extension-points/model-catalog-form-data';
+import { InitialWizardFormData } from '@odh-dashboard/model-serving/types/form-data';
+import { Deployment } from '@odh-dashboard/model-serving/extension-points';
+import { isNavigateToWizardExtension } from '../extension-points/model-catalog-deploy';
+import { extractExternalFormData } from '../extractExternalFormData';
 
 type ModelCatalogDeployModalExtensionProps = {
   model: CatalogModel;
@@ -35,83 +30,35 @@ const ModelCatalogDeployModalExtension: React.FC<ModelCatalogDeployModalExtensio
   const [navigateExtensions, navigateExtensionsLoaded] = useResolvedExtensions(
     isNavigateToWizardExtension,
   );
-  const [formDataExtensions, formDataExtensionsLoaded] = useResolvedExtensions(
-    isExternalFormDataExtension,
-  );
   const [navigateToWizard, setNavigateToWizard] = React.useState<
-    ((initialData?: InitialWizardFormData, projectName?: string) => void) | null
+    | ((
+        deployment?: Deployment | null,
+        initialData?: InitialWizardFormData | null,
+        returnRouteValue?: string,
+      ) => (projectName?: string) => void)
+    | null
   >(null);
-  const [platformExtensions, platformExtensionsLoaded] = useResolvedExtensions(
-    isModelCatalogDeployModalExtension,
-  );
+  const [platformExtensions] = useResolvedExtensions(isModelCatalogDeployModalExtension);
   const [availablePlatformIds, setAvailablePlatformIds] = React.useState<string[]>([]);
   const buttonState = getDeployButtonState(availablePlatformIds, true);
-  // const isModalAvailable = React.useMemo(
-  //   () => extensionsLoaded && extensions.length > 0 && !!navigateToWizard,
-  //   [extensionsLoaded, extensions.length, navigateToWizard],
-  // );
-  const isModalAvailable = React.useMemo(
-    () =>
-      navigateExtensionsLoaded &&
-      navigateExtensions.length > 0 &&
-      !!navigateToWizard &&
-      formDataExtensionsLoaded &&
-      formDataExtensions.length > 0 &&
-      artifactLoaded &&
-      !artifactsLoadError,
-    [
-      navigateExtensionsLoaded,
-      navigateExtensions.length,
-      navigateToWizard,
-      formDataExtensionsLoaded,
-      formDataExtensions.length,
-    ],
-  );
 
   const params = useParams<CatalogModelDetailsParams>();
   const decodedParams = decodeParams(params);
-  const [artifacts, artifactLoaded, artifactsLoadError] = useCatalogModelArtifacts(
+  const [artifacts] = useCatalogModelArtifacts(
     decodedParams.sourceId || '',
     encodeURIComponent(`${decodedParams.modelName}`),
   );
   const uri = artifacts.items.length > 0 ? getModelArtifactUri(artifacts.items) : '';
 
-  // Extract form data using extension
-  const wizardInitialData = React.useMemo((): InitialWizardFormData | undefined => {
-    if (
-      !formDataExtensionsLoaded ||
-      formDataExtensions.length === 0 ||
-      !uri ||
-      !artifactLoaded ||
-      artifactsLoadError
-    ) {
-      return undefined;
-    }
-
-    try {
-      const extractFn = formDataExtensions[0].properties.extractFormData;
-      const formData = extractFn(uri, model.name);
-      if (!formData) return undefined;
-
-      return formData;
-    } catch (e) {
-      console.error('Failed to extract form data:', e);
-      return undefined;
-    }
-  }, [
-    uri,
-    formDataExtensions,
-    formDataExtensionsLoaded,
-    artifactLoaded,
-    artifactsLoadError,
-    model.name,
-  ]);
-
-  const onDeployClick = React.useCallback(() => {
-    if (navigateToWizard && wizardInitialData) {
-      navigateToWizard(wizardInitialData);
+  const wizardInitialData = React.useMemo(
+    () => extractExternalFormData(uri, model.name),
+    [uri, model.name],
+  );
+  const onOpenModal = React.useCallback(() => {
+    if (navigateToWizard) {
+      navigateToWizard();
     }
-  }, [navigateToWizard, wizardInitialData]);
+  }, [navigateToWizard]);
 
   return (
     <>
@@ -133,15 +80,16 @@ const ModelCatalogDeployModalExtension: React.FC<ModelCatalogDeployModalExtensio
         navigateExtensions.map((extension) => (
           <HookNotify
             key={extension.uid}
-            useHook={extension.properties.useNavigateToWizard}
+            useHook={extension.properties.useNavigateToDeploymentWizard}
+            args={[undefined, wizardInitialData, '/ai-hub/deployments/']}
             onNotify={(fn) => {
               if (fn && typeof fn === 'function') {
                 setNavigateToWizard(() => fn);
               }
             }}
           />
         ))}
-      {render(buttonState, onDeployClick, navigateExtensionsLoaded && !!navigateToWizard)}
+      {render(buttonState, onOpenModal, navigateExtensionsLoaded && !!navigateToWizard)}
     </>
   );
 };

packages/model-registry/upstream/frontend/src/odh/extension-points/model-catalog-deploy.ts

@@ -1,4 +1,6 @@
 import type { Extension, CodeRef } from '@openshift/dynamic-plugin-sdk';
+import type { InitialWizardFormData } from '@odh-dashboard/model-serving/types/form-data';
+import { Deployment } from '@odh-dashboard/model-serving/extension-points';
 import type { ModelDeployPrefillInfo } from '~/odh/hooks/useRegisteredModelDeployPrefillInfo';
 
 export type ModelCatalogDeployModalExtension = Extension<
@@ -23,3 +25,17 @@ export const isModelCatalogDeployModalExtension = (
   extension: Extension,
 ): extension is ModelCatalogDeployModalExtension =>
   extension.type === 'model-catalog.model-details/deploy-modal';
+
+  export type NavigateToWizardExtension = Extension<
+  'model-serving.deployment/navigate-wizard',
+  {
+    useNavigateToDeploymentWizard: CodeRef<
+      (deployment?: Deployment | null, initialData?: InitialWizardFormData | null, returnRouteValue?: string) => (projectName?: string) => void
+    >;
+  }
+>;
+
+export const isNavigateToWizardExtension = (
+  extension: Extension,
+): extension is NavigateToWizardExtension =>
+  extension.type === 'model-serving.deployment/navigate-wizard';

packages/model-registry/upstream/frontend/src/odh/extension-points/model-catalog-form-data.ts

@@ -4,12 +4,11 @@ import type {
   RouteExtension,
   AreaExtension,
 } from '@odh-dashboard/plugin-core/extension-points';
-import type { ExternalFormDataExtension } from './extension-points/model-catalog-form-data';
 
 const reliantAreas = ['model-registry'];
 const PLUGIN_MODEL_REGISTRY = 'model-registry-plugin';
 
-const extensions: (NavExtension | RouteExtension | AreaExtension | ExternalFormDataExtension)[] = [
+const extensions: (NavExtension | RouteExtension | AreaExtension)[] = [
   {
     type: 'app.area',
     properties: {
@@ -104,13 +103,6 @@ const extensions: (NavExtension | RouteExtension | AreaExtension | ExternalFormD
       component: () => import('./ModelRegistrySettingsRoutesWrapper'),
     },
   },
-  {
-    type: 'model-serving.external/extract-form-data',
-    properties: {
-      extractFormData: () =>
-        import('./extractExternalFormData').then((m) => m.extractExternalFormData),
-    },
-  },
 ];
 
 export default extensions;

packages/model-registry/upstream/frontend/src/odh/extensions.ts

@@ -9,6 +9,7 @@ export const extractExternalFormData = (
   if (!modelUri) return null;
 
   return {
+    wizardStartIndex: 2,
     modelLocationData: {
       type: ModelLocationType.NEW,
       fieldValues: {
@@ -24,6 +25,7 @@ export const extractExternalFormData = (
     modelTypeField: ServingRuntimeModelType.GENERATIVE, 
     k8sNameDesc: {
       name: modelName,
+      description: '',
       k8sName: {
         value: modelName,
         state: {
@@ -34,7 +36,6 @@ export const extractExternalFormData = (
           touched: false,
         },
       },
-      description: '',
     },
   };
 };

packages/model-registry/upstream/frontend/src/odh/extractExternalFormData.ts

@@ -301,8 +301,12 @@ export const isDeploymentWizardFieldExtension = <D extends Deployment = Deployme
 export type ModelServingNavigateToWizardExtension = Extension<
   'model-serving.deployment/navigate-wizard',
   {
-    useNavigateToWizard: CodeRef<
-      () => (initialData?: InitialWizardFormData, projectName?: string) => void
+    useNavigateToDeploymentWizard: CodeRef<
+      (
+        deployment?: Deployment | null,
+        initialData?: InitialWizardFormData | null,
+        returnRouteValue?: string,
+      ) => (projectName?: string) => void
     >;
   }
 >;
@@ -311,15 +315,3 @@ export const isModelServingNavigateToWizardExtension = (
   extension: Extension,
 ): extension is ModelServingNavigateToWizardExtension =>
   extension.type === 'model-serving.deployment/navigate-wizard';
-
-export type ExternalFormDataExtension = Extension<
-  'model-serving.external/extract-form-data',
-  {
-    extractFormData: CodeRef<(modelUri: string, modelName: string) => InitialWizardFormData | null>;
-  }
->;
-
-export const isExternalFormDataExtension = (
-  extension: Extension,
-): extension is ExternalFormDataExtension =>
-  extension.type === 'model-serving.external/extract-form-data';

packages/model-serving/extension-points/index.ts

@@ -108,9 +108,9 @@ const extensions: (
   {
     type: 'model-serving.deployment/navigate-wizard',
     properties: {
-      useNavigateToWizard: () =>
-        import('../src/components/deploymentWizard/useNavigateToWizardFromExtension').then(
-          (m) => m.useNavigateToWizardFromExtension,
+      useNavigateToDeploymentWizard: () =>
+        import('../src/components/deploymentWizard/useNavigateToDeploymentWizard').then(
+          (m) => m.useNavigateToDeploymentWizard,
         ),
     },
     flags: {

packages/model-serving/extensions/odh.ts

@@ -148,6 +148,7 @@ export const mockDeploymentWizardState = (
           connectionsLoaded: true,
           connectionTypes: [],
           connectionTypesLoaded: true,
+          disableInputFields: false,
         },
         createConnectionData: {
           data: {

packages/model-serving/src/__tests__/mockUtils.ts

@@ -179,6 +179,7 @@ const ModelDeploymentWizard: React.FC<ModelDeploymentWizardProps> = ({
         onClose={() => setIsExitModalOpen(true)}
         onSave={() => onSave()}
         footer={wizardFooter}
+        startIndex={wizardState.initialData?.wizardStartIndex ?? 1}
       >
         <WizardStep name="Model details" id="source-model-step">
           {wizardState.loaded.modelSourceLoaded ? (