[ML] Trained models: Replace download button by extending deploy action

src/platform/packages/shared/kbn-unsaved-changes-prompt/src/unsaved_changes_prompt/unsaved_changes_prompt.test.tsx

@@ -27,15 +27,18 @@ const navigateToUrl = jest.fn().mockImplementation(async (url) => {
 describe('useUnsavedChangesPrompt', () => {
   let addSpy: jest.SpiedFunction<Window['addEventListener']>;
   let removeSpy: jest.SpiedFunction<Window['removeEventListener']>;
+  let blockSpy: jest.SpiedFunction<CoreScopedHistory['block']>;
 
   beforeEach(() => {
     addSpy = jest.spyOn(window, 'addEventListener');
     removeSpy = jest.spyOn(window, 'removeEventListener');
+    blockSpy = jest.spyOn(history, 'block');
   });
 
   afterEach(() => {
     addSpy.mockRestore();
     removeSpy.mockRestore();
+    blockSpy.mockRestore();
     jest.resetAllMocks();
   });
 
@@ -97,4 +100,23 @@ describe('useUnsavedChangesPrompt', () => {
     expect(addSpy).toBeCalledWith('beforeunload', expect.anything());
     expect(removeSpy).toBeCalledWith('beforeunload', expect.anything());
   });
+
+  it('should not block SPA navigation if blockSpaNavigation is false', async () => {
+    renderHook(() =>
+      useUnsavedChangesPrompt({
+        hasUnsavedChanges: true,
+        blockSpaNavigation: false,
+      })
+    );
+
+    expect(addSpy).toBeCalledWith('beforeunload', expect.anything());
+
+    act(() => history.push('/test'));
+
+    expect(coreStart.overlays.openConfirm).not.toBeCalled();
+
+    expect(history.location.pathname).toBe('/test');
+
+    expect(blockSpy).not.toBeCalled();
+  });
 });

src/platform/packages/shared/kbn-unsaved-changes-prompt/src/unsaved_changes_prompt/unsaved_changes_prompt.tsx

@@ -28,8 +28,11 @@ const DEFAULT_CONFIRM_BUTTON = i18n.translate('unsavedChangesPrompt.defaultModal
   defaultMessage: 'Leave page',
 });
 
-interface Props {
+interface BaseProps {
   hasUnsavedChanges: boolean;
+}
+
+interface SpaBlockingProps extends BaseProps {
   http: HttpStart;
   openConfirm: OverlayStart['openConfirm'];
   history: ScopedHistory;
@@ -38,20 +41,21 @@ interface Props {
   messageText?: string;
   cancelButtonText?: string;
   confirmButtonText?: string;
+  blockSpaNavigation?: true;
+}
+
+interface BrowserBlockingProps extends BaseProps {
+  blockSpaNavigation: false;
 }
 
-export const useUnsavedChangesPrompt = ({
-  hasUnsavedChanges,
-  openConfirm,
-  history,
-  http,
-  navigateToUrl,
-  // Provide overrides for confirm dialog
-  messageText = DEFAULT_BODY_TEXT,
-  titleText = DEFAULT_TITLE_TEXT,
-  confirmButtonText = DEFAULT_CONFIRM_BUTTON,
-  cancelButtonText = DEFAULT_CANCEL_BUTTON,
-}: Props) => {
+type Props = SpaBlockingProps | BrowserBlockingProps;
+
+const isSpaBlocking = (props: Props): props is SpaBlockingProps =>
+  props.blockSpaNavigation !== false;
+
+export const useUnsavedChangesPrompt = (props: Props) => {
+  const { hasUnsavedChanges, blockSpaNavigation = true } = props;
+
   useEffect(() => {
     if (hasUnsavedChanges) {
       const handler = (event: BeforeUnloadEvent) => {
@@ -67,10 +71,22 @@ export const useUnsavedChangesPrompt = ({
   }, [hasUnsavedChanges]);
 
   useEffect(() => {
-    if (!hasUnsavedChanges) {
+    if (!hasUnsavedChanges || !isSpaBlocking(props)) {
       return;
     }
 
+    const {
+      openConfirm,
+      http,
+      history,
+      navigateToUrl,
+      // Provide overrides for confirm dialog
+      messageText = DEFAULT_BODY_TEXT,
+      titleText = DEFAULT_TITLE_TEXT,
+      confirmButtonText = DEFAULT_CONFIRM_BUTTON,
+      cancelButtonText = DEFAULT_CANCEL_BUTTON,
+    } = props;
+
     const unblock = history.block((state) => {
       async function confirmAsync() {
         const confirmResponse = await openConfirm(messageText, {
@@ -97,15 +113,5 @@ export const useUnsavedChangesPrompt = ({
     });
 
     return unblock;
-  }, [
-    history,
-    hasUnsavedChanges,
-    openConfirm,
-    navigateToUrl,
-    http.basePath,
-    titleText,
-    cancelButtonText,
-    confirmButtonText,
-    messageText,
-  ]);
+  }, [hasUnsavedChanges, blockSpaNavigation, props]);
 };

x-pack/platform/plugins/shared/ml/public/application/model_management/deployment_setup.tsx

@@ -41,15 +41,21 @@ import type { CoreStart, OverlayStart } from '@kbn/core/public';
 import { css } from '@emotion/react';
 import { toMountPoint } from '@kbn/react-kibana-mount';
 import { dictionaryValidator } from '@kbn/ml-validators';
+import { KibanaContextProvider } from '@kbn/kibana-react-plugin/public';
 import type { NLPSettings } from '../../../common/constants/app';
-import type {
-  NLPModelItem,
-  TrainedModelDeploymentStatsResponse,
+import type { ModelDownloadItem } from '../../../common/types/trained_models';
+import {
+  isModelDownloadItem,
+  type NLPModelItem,
+  type TrainedModelDeploymentStatsResponse,
 } from '../../../common/types/trained_models';
 import { type CloudInfo, getNewJobLimits } from '../services/ml_server_info';
 import type { MlStartTrainedModelDeploymentRequestNew } from './deployment_params_mapper';
 import { DeploymentParamsMapper } from './deployment_params_mapper';
 
+import type { HttpService } from '../services/http_service';
+import { ModelStatusIndicator } from './model_status_indicator';
+
 interface DeploymentSetupProps {
   config: DeploymentParamsUI;
   onConfigChange: (config: DeploymentParamsUI) => void;
@@ -647,7 +653,7 @@ export const DeploymentSetup: FC<DeploymentSetupProps> = ({
 };
 
 interface StartDeploymentModalProps {
-  model: NLPModelItem;
+  model: NLPModelItem | ModelDownloadItem;
   startModelDeploymentDocUrl: string;
   onConfigChange: (config: DeploymentParamsUI) => void;
   onClose: () => void;
@@ -676,27 +682,35 @@ export const StartUpdateDeploymentModal: FC<StartDeploymentModalProps> = ({
 }) => {
   const isUpdate = !!initialParams;
 
+  const isModelNotDownloaded = isModelDownloadItem(model);
+
   const getDefaultParams = useCallback((): DeploymentParamsUI => {
+    const defaultVCPUUsage: DeploymentParamsUI['vCPUUsage'] = showNodeInfo ? 'medium' : 'low';
+
+    const defaultParams = {
+      deploymentId: `${model.model_id}_ingest`,
+      optimized: 'optimizedForIngest',
+      vCPUUsage: defaultVCPUUsage,
+      adaptiveResources: true,
+    } as const;
+
+    if (isModelNotDownloaded) {
+      return defaultParams;
+    }
+
     const uiParams = model.stats?.deployment_stats.map((v) =>
       deploymentParamsMapper.mapApiToUiDeploymentParams(v)
     );
 
-    const defaultVCPUUsage: DeploymentParamsUI['vCPUUsage'] = showNodeInfo ? 'medium' : 'low';
-
     return uiParams?.some((v) => v.optimized === 'optimizedForIngest')
       ? {
           deploymentId: `${model.model_id}_search`,
           optimized: 'optimizedForSearch',
           vCPUUsage: defaultVCPUUsage,
           adaptiveResources: true,
         }
-      : {
-          deploymentId: `${model.model_id}_ingest`,
-          optimized: 'optimizedForIngest',
-          vCPUUsage: defaultVCPUUsage,
-          adaptiveResources: true,
-        };
-  }, [deploymentParamsMapper, model.model_id, model.stats?.deployment_stats, showNodeInfo]);
+      : defaultParams;
+  }, [deploymentParamsMapper, isModelNotDownloaded, model, showNodeInfo]);
 
   const [config, setConfig] = useState<DeploymentParamsUI>(initialParams ?? getDefaultParams());
 
@@ -709,12 +723,12 @@ export const StartUpdateDeploymentModal: FC<StartDeploymentModalProps> = ({
     otherModelAndDeploymentIds.splice(otherModelAndDeploymentIds?.indexOf(model.model_id), 1);
 
     return dictionaryValidator([
-      ...model.deployment_ids,
+      ...(isModelNotDownloaded ? [] : model.deployment_ids),
       ...otherModelAndDeploymentIds,
       // check for deployment with the default ID
-      ...(model.deployment_ids.includes(model.model_id) ? [''] : []),
+      ...(isModelNotDownloaded ? [] : model.deployment_ids.includes(model.model_id) ? [''] : []),
     ]);
-  }, [modelAndDeploymentIds, model.deployment_ids, model.model_id, isUpdate]);
+  }, [modelAndDeploymentIds, model, isUpdate, isModelNotDownloaded]);
 
   const deploymentIdErrors = deploymentIdValidator(config.deploymentId ?? '');
 
@@ -725,21 +739,28 @@ export const StartUpdateDeploymentModal: FC<StartDeploymentModalProps> = ({
   return (
     <EuiModal onClose={onClose} data-test-subj="mlModelsStartDeploymentModal" maxWidth={640}>
       <EuiModalHeader>
-        <EuiModalHeaderTitle size="s">
-          {isUpdate ? (
-            <FormattedMessage
-              id="xpack.ml.trainedModels.modelsList.updateDeployment.modalTitle"
-              defaultMessage="Update {modelId} deployment"
-              values={{ modelId: model.model_id }}
-            />
-          ) : (
-            <FormattedMessage
-              id="xpack.ml.trainedModels.modelsList.startDeployment.modalTitle"
-              defaultMessage="Start {modelId} deployment"
-              values={{ modelId: model.model_id }}
-            />
-          )}
-        </EuiModalHeaderTitle>
+        <EuiFlexGroup direction="column" gutterSize="s">
+          <EuiFlexItem>
+            <EuiModalHeaderTitle size="s">
+              {isUpdate ? (
+                <FormattedMessage
+                  id="xpack.ml.trainedModels.modelsList.updateDeployment.modalTitle"
+                  defaultMessage="Update {modelId} deployment"
+                  values={{ modelId: model.model_id }}
+                />
+              ) : (
+                <FormattedMessage
+                  id="xpack.ml.trainedModels.modelsList.startDeployment.modalTitle"
+                  defaultMessage="Start {modelId} deployment"
+                  values={{ modelId: model.model_id }}
+                />
+              )}
+            </EuiModalHeaderTitle>
+          </EuiFlexItem>
+          <EuiFlexItem>
+            <ModelStatusIndicator modelId={model.model_id} />
+          </EuiFlexItem>
+        </EuiFlexGroup>
       </EuiModalHeader>
 
       <EuiModalBody>
@@ -754,12 +775,18 @@ export const StartUpdateDeploymentModal: FC<StartDeploymentModalProps> = ({
           disableAdaptiveResourcesControl={
             showNodeInfo ? false : !nlpSettings.modelDeployment.allowStaticAllocations
           }
-          deploymentsParams={model.stats?.deployment_stats.reduce<
-            Record<string, DeploymentParamsUI>
-          >((acc, curr) => {
-            acc[curr.deployment_id] = deploymentParamsMapper.mapApiToUiDeploymentParams(curr);
-            return acc;
-          }, {})}
+          deploymentsParams={
+            isModelNotDownloaded
+              ? {}
+              : model.stats?.deployment_stats.reduce<Record<string, DeploymentParamsUI>>(
+                  (acc, curr) => {
+                    acc[curr.deployment_id] =
+                      deploymentParamsMapper.mapApiToUiDeploymentParams(curr);
+                    return acc;
+                  },
+                  {}
+                )
+          }
         />
 
         <EuiHorizontalRule margin="m" />
@@ -844,7 +871,8 @@ export const getUserInputModelDeploymentParamsProvider =
     startModelDeploymentDocUrl: string,
     cloudInfo: CloudInfo,
     showNodeInfo: boolean,
-    nlpSettings: NLPSettings
+    nlpSettings: NLPSettings,
+    httpService: HttpService
   ) =>
   (
     model: NLPModelItem,
@@ -867,24 +895,26 @@ export const getUserInputModelDeploymentParamsProvider =
       try {
         const modalSession = overlays.openModal(
           toMountPoint(
-            <StartUpdateDeploymentModal
-              nlpSettings={nlpSettings}
-              showNodeInfo={showNodeInfo}
-              deploymentParamsMapper={deploymentParamsMapper}
-              cloudInfo={cloudInfo}
-              startModelDeploymentDocUrl={startModelDeploymentDocUrl}
-              initialParams={params}
-              modelAndDeploymentIds={deploymentIds}
-              model={model}
-              onConfigChange={(config) => {
-                modalSession.close();
-                resolve(deploymentParamsMapper.mapUiToApiDeploymentParams(config));
-              }}
-              onClose={() => {
-                modalSession.close();
-                resolve();
-              }}
-            />,
+            <KibanaContextProvider services={{ mlServices: { httpService } }}>
+              <StartUpdateDeploymentModal
+                nlpSettings={nlpSettings}
+                showNodeInfo={showNodeInfo}
+                deploymentParamsMapper={deploymentParamsMapper}
+                cloudInfo={cloudInfo}
+                startModelDeploymentDocUrl={startModelDeploymentDocUrl}
+                initialParams={params}
+                modelAndDeploymentIds={deploymentIds}
+                model={model}
+                onConfigChange={(config) => {
+                  modalSession.close();
+                  resolve(deploymentParamsMapper.mapUiToApiDeploymentParams(config));
+                }}
+                onClose={() => {
+                  modalSession.close();
+                  resolve();
+                }}
+              />
+            </KibanaContextProvider>,
             startServices
           )
         );