move implementation into model-serving package

Author: katieperry4

packages/model-registry/package.json

@@ -45,8 +45,10 @@
     }
   },
   "exports": {
-    "./extensions": "./extensions.ts"
-  },
+    "./extensions": "./extensions.ts",
+    "./model-catalog-deploy": {
+      "types": "./upstream/frontend/src/odh/extension-points/model-catalog-deploy.ts"
+    }  },
   "dependencies": {
     "@odh-dashboard/internal": "*"
   },

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

@@ -1,20 +1,18 @@
 import React from 'react';
 import { useParams } from 'react-router-dom';
 import { HookNotify, useResolvedExtensions } from '@odh-dashboard/plugin-core';
-import { isModelCatalogDeployModalExtension } from '~/odh/extension-points';
+import {
+  isModelCatalogDeployModalExtension,
+  isNavigateToDeploymentWizardWithDataExtension,
+  DeployPrefillData,
+} from '~/odh/extension-points';
 import { CatalogModel, CatalogModelDetailsParams } from '~/app/modelCatalogTypes';
 import { getDeployButtonState } from '~/odh/utils';
 import { useCatalogModelArtifacts } from '~/app/hooks/modelCatalog/useCatalogModelArtifacts';
 import {
   decodeParams,
   getModelArtifactUri,
 } from '~/app/pages/modelCatalog/utils/modelCatalogUtils';
-import {
-  isNavigateToWizardExtension,
-  Deployment,
-  InitialWizardFormData,
-} from '../extension-points/model-catalog-deploy';
-import { extractExternalFormData } from '../extractExternalFormData';
 
 type ModelCatalogDeployModalExtensionProps = {
   model: CatalogModel;
@@ -29,20 +27,8 @@ const ModelCatalogDeployModalExtension: React.FC<ModelCatalogDeployModalExtensio
   model,
   render,
 }) => {
-  const [navigateExtensions, navigateExtensionsLoaded] = useResolvedExtensions(
-    isNavigateToWizardExtension,
-  );
-  const [navigateToWizard, setNavigateToWizard] = React.useState<
-    | ((
-        deployment?: Deployment | null,
-        initialData?: InitialWizardFormData | null,
-        returnRouteValue?: string,
-      ) => (projectName?: string) => void)
-    | null
-  >(null);
   const [platformExtensions] = useResolvedExtensions(isModelCatalogDeployModalExtension);
   const [availablePlatformIds, setAvailablePlatformIds] = React.useState<string[]>([]);
-  const buttonState = getDeployButtonState(availablePlatformIds, true);
 
   const params = useParams<CatalogModelDetailsParams>();
   const decodedParams = decodeParams(params);
@@ -52,16 +38,33 @@ const ModelCatalogDeployModalExtension: React.FC<ModelCatalogDeployModalExtensio
   );
   const uri = artifacts.items.length > 0 ? getModelArtifactUri(artifacts.items) : '';
 
-  const wizardInitialData = React.useMemo(
-    () => extractExternalFormData(uri, model.name),
-    [uri, model.name],
+  const catalogDeployPrefillData: DeployPrefillData = React.useMemo(
+    () => ({
+      modelName: model.name,
+      modelUri: uri,
+      returnRouteValue: '/ai-hub/deployments/',
+      wizardStartIndex: 2,
+    }),
+    [model.name, uri],
+  );
+  const [navigateExtensions, navigateExtensionsLoaded] = useResolvedExtensions(
+    isNavigateToDeploymentWizardWithDataExtension,
   );
+  const [navigateToWizard, setNavigateToWizard] = React.useState<(() => void) | null>(null);
+
   const onOpenModal = React.useCallback(() => {
     if (navigateToWizard) {
       navigateToWizard();
     }
   }, [navigateToWizard]);
 
+  const buttonState =
+    platformExtensions.length > 0
+      ? getDeployButtonState(availablePlatformIds, true)
+      : navigateExtensionsLoaded && navigateExtensions.length > 0
+        ? { enabled: true }
+        : { enabled: false, tooltip: 'Deployment wizard is not available' };
+
   return (
     <>
       {/* Get platform IDs */}
@@ -79,19 +82,24 @@ const ModelCatalogDeployModalExtension: React.FC<ModelCatalogDeployModalExtensio
       {/* Get navigation function */}
       {navigateExtensionsLoaded &&
         navigateExtensions.length > 0 &&
-        navigateExtensions.map((extension) => (
-          <HookNotify
-            key={extension.uid}
-            useHook={extension.properties.useNavigateToDeploymentWizard}
-            args={[undefined, wizardInitialData, '/ai-hub/deployments/']}
-            onNotify={(fn) => {
-              if (fn && typeof fn === 'function') {
-                setNavigateToWizard(() => fn);
-              }
-            }}
-          />
-        ))}
-      {render(buttonState, onOpenModal, navigateExtensionsLoaded && !!navigateToWizard)}
+        navigateExtensions.map((extension) => {
+          if (!extension.properties.useNavigateToDeploymentWizardWithData) {
+            return null;
+          }
+          return (
+            <HookNotify
+              key={extension.uid}
+              useHook={extension.properties.useNavigateToDeploymentWizardWithData}
+              args={[catalogDeployPrefillData]}
+              onNotify={(fn) => {
+                if (fn && typeof fn === 'function') {
+                  setNavigateToWizard(() => fn);
+                }
+              }}
+            />
+          );
+        })}
+      {render(buttonState, onOpenModal, navigateExtensionsLoaded && navigateExtensions.length > 0)}
     </>
   );
 };

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

@@ -1,67 +1,16 @@
 import type { Extension, CodeRef } from '@openshift/dynamic-plugin-sdk';
-import type { ModelDeployPrefillInfo } from '~/odh/hooks/useRegisteredModelDeployPrefillInfo';
 
-// Minimal data we're prefilling the wizard with
-export type InitialWizardFormData = {
+export type DeployPrefillData = {
+  modelName: string;
+  modelUri?: string;
+  returnRouteValue?: string;
   wizardStartIndex?: number;
-  modelLocationData?: {
-    type: 'new' | 'existing' | 'pvc';
-    fieldValues?: Record<string, unknown>;
-    additionalFields?: Record<string, unknown>;
-    disableInputFields?: boolean;
-  };
-  createConnectionData?: {
-    saveConnection?: boolean;
-    hideFields?: boolean;
-  };
-  modelTypeField?: string;
-  k8sNameDesc?: {
-    name?: string;
-    description?: string;
-    k8sName?: {
-      value?: string;
-      state?: {
-        immutable?: boolean;
-        invalidCharacters?: boolean;
-        invalidLength?: boolean;
-        maxLength?: number;
-        touched?: boolean;
-      };
-    };
-  };
-};
-
-export type Deployment = {
-  modelServingPlatformId: string;
-  model: {
-    metadata: {
-      name: string;
-      namespace: string;
-    };
-  };
-  server?: {
-    metadata: {
-      name: string;
-      namespace: string;
-    };
-  };
-};
+}
 
 export type ModelCatalogDeployModalExtension = Extension<
   'model-catalog.model-details/deploy-modal',
   {
     useAvailablePlatformIds: CodeRef<() => string[]>;
-    modalComponent: CodeRef<
-      React.ComponentType<{
-        modelDeployPrefill: {
-          data: ModelDeployPrefillInfo;
-          loaded: boolean;
-          error: Error | undefined;
-        };
-        onSubmit: () => void;
-        onClose: () => void;
-      }>
-    >;
   }
 >;
 
@@ -70,16 +19,16 @@ export const isModelCatalogDeployModalExtension = (
 ): extension is ModelCatalogDeployModalExtension =>
   extension.type === 'model-catalog.model-details/deploy-modal';
 
-  export type NavigateToWizardExtension = Extension<
-  'model-serving.deployment/navigate-wizard',
+export type NavigateToDeploymentWizardWithDataExtension = Extension<
+  'model-catalog.deployment/navigate-wizard',
   {
-    useNavigateToDeploymentWizard: CodeRef<
-      (deployment?: Deployment | null, initialData?: InitialWizardFormData | null, returnRouteValue?: string) => (projectName?: string) => void
+    useNavigateToDeploymentWizardWithData: CodeRef<
+      (deployPrefillData: DeployPrefillData) => (projectName?: string) => void
     >;
   }
 >;
 
-export const isNavigateToWizardExtension = (
+export const isNavigateToDeploymentWizardWithDataExtension = (
   extension: Extension,
-): extension is NavigateToWizardExtension =>
-  extension.type === 'model-serving.deployment/navigate-wizard';
+): extension is NavigateToDeploymentWizardWithDataExtension =>
+  extension.type === 'model-catalog.deployment/navigate-wizard';

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

@@ -300,21 +300,3 @@ export const isDeploymentWizardFieldExtension = <D extends Deployment = Deployme
   extension: Extension,
 ): extension is DeploymentWizardFieldExtension<D> =>
   extension.type === 'model-serving.deployment/wizard-field';
-
-export type ModelServingNavigateToWizardExtension = Extension<
-  'model-serving.deployment/navigate-wizard',
-  {
-    useNavigateToDeploymentWizard: CodeRef<
-      (
-        deployment?: Deployment | null,
-        initialData?: InitialWizardFormData | null,
-        returnRouteValue?: string,
-      ) => (projectName?: string) => void
-    >;
-  }
->;
-
-export const isModelServingNavigateToWizardExtension = (
-  extension: Extension,
-): extension is ModelServingNavigateToWizardExtension =>
-  extension.type === 'model-serving.deployment/navigate-wizard';

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

@@ -1,39 +1,18 @@
 // eslint-disable-next-line no-restricted-syntax
 import { SupportedArea } from '@odh-dashboard/internal/concepts/areas/types';
-import type { Extension, CodeRef } from '@openshift/dynamic-plugin-sdk';
-import type { ModelDeployPrefillInfo } from '@odh-dashboard/internal/pages/modelServing/screens/projects/usePrefillModelDeployModal';
+import type { Extension } from '@openshift/dynamic-plugin-sdk';
 
-type ModelCatalogDeployModalExtension = Extension<
-  'model-catalog.model-details/deploy-modal',
+const extensions: Extension[] = [
   {
-    useAvailablePlatformIds: CodeRef<() => string[]>;
-    modalComponent: CodeRef<
-      React.ComponentType<{
-        modelDeployPrefill: {
-          data: ModelDeployPrefillInfo;
-          loaded: boolean;
-          error: Error | undefined;
-        };
-        onSubmit: () => void;
-        onClose: () => void;
-      }>
-    >;
-  }
->;
-
-const extensions: ModelCatalogDeployModalExtension[] = [
-  {
-    type: 'model-catalog.model-details/deploy-modal',
+    type: 'model-catalog.deployment/navigate-wizard',
     properties: {
-      useAvailablePlatformIds: () =>
-        import('../modelRegistry/useAvailablePlatformIds').then((m) => m.default),
-      modalComponent: () =>
-        import('../modelRegistry/DeployRegisteredVersionModal').then(
-          (m) => m.DeployRegisteredVersionModal,
+      useNavigateToDeploymentWizardWithData: () =>
+        import('../modelRegistry/useNavigateToDeploymentWizardWithData').then(
+          (m) => m.useNavigateToDeploymentWizardWithData,
         ),
     },
     flags: {
-      required: [SupportedArea.MODEL_SERVING],
+      required: [SupportedArea.MODEL_CATALOG],
     },
   },
 ];

packages/model-serving/extensions/model-catalog.ts

@@ -11,7 +11,6 @@ import {
   DataScienceStackComponent,
   SupportedArea,
 } from '@odh-dashboard/internal/concepts/areas/types';
-import type { ModelServingNavigateToWizardExtension } from 'extension-points';
 
 const PLUGIN_MODEL_SERVING = SupportedArea.K_SERVE;
 
@@ -26,7 +25,6 @@ const extensions: (
   | HrefNavItemExtension
   | RouteExtension
   | OverviewSectionExtension
-  | ModelServingNavigateToWizardExtension
 )[] = [
   {
     type: 'app.area',
@@ -105,18 +103,6 @@ const extensions: (
       required: [PLUGIN_MODEL_SERVING],
     },
   },
-  {
-    type: 'model-serving.deployment/navigate-wizard',
-    properties: {
-      useNavigateToDeploymentWizard: () =>
-        import('../src/components/deploymentWizard/useNavigateToDeploymentWizard').then(
-          (m) => m.useNavigateToDeploymentWizard,
-        ),
-    },
-    flags: {
-      required: [PLUGIN_MODEL_SERVING],
-    },
-  },
 ];
 
 export default extensions;