Feat support upload external model register

public/apis/model_version.ts

@@ -84,8 +84,9 @@ interface UploadModelBase {
   name: string;
   version?: string;
   description?: string;
-  modelFormat: string;
+  modelFormat?: string;
   modelId: string;
+  deployment: boolean;
 }
 
 export interface UploadModelByURL extends UploadModelBase {

public/components/common/forms/model_tag_array_field/tag_field.tsx

@@ -354,7 +354,7 @@ export const TagField = ({
             <EuiButtonIcon
               display="base"
               size="m"
-              iconType="cross"
+              iconType="trash"
               aria-label={`Remove tag at row ${index + 1}`}
               onClick={() => onRemove(index)}
             />

public/components/register_model/__tests__/register_model_deployment.test.tsx

@@ -0,0 +1,57 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { setup } from './setup';
+import * as formAPI from '../register_model_api';
+import { screen } from '../../../../test/test_utils';
+
+describe('<RegisterModel /> Deployment', () => {
+  const onSubmitMock = jest.fn().mockResolvedValue('model_id');
+
+  beforeEach(() => {
+    jest.spyOn(formAPI, 'submitExternalModel').mockImplementation(onSubmitMock);
+    jest.spyOn(formAPI, 'submitModelWithFile').mockImplementation(onSubmitMock);
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should render a model deployment panel', async () => {
+    await setup();
+    expect(screen.getByLabelText('Deployment')).toBeInTheDocument();
+  });
+
+  it('should render a model activation panel', async () => {
+    await setup({ mode: 'external', route: '/?type=external' });
+    expect(screen.getByLabelText('Activation')).toBeInTheDocument();
+  });
+
+  it('should submit the register model form without automatic deployment flag', async () => {
+    const result = await setup();
+    expect(onSubmitMock).not.toHaveBeenCalled();
+
+    await result.user.click(result.submitButton);
+
+    expect(onSubmitMock).toHaveBeenCalledWith(
+      expect.objectContaining({
+        deployment: false,
+      })
+    );
+  });
+  it('should submit the register model form with automatic deployment flag', async () => {
+    const result = await setup();
+    expect(onSubmitMock).not.toHaveBeenCalled();
+
+    await result.user.click(screen.getByLabelText('Start deployment automatically'));
+    await result.user.click(result.submitButton);
+
+    expect(onSubmitMock).toHaveBeenCalledWith(
+      expect.objectContaining({
+        deployment: true,
+      })
+    );
+  });
+});

public/components/register_model/__tests__/register_model_repository_import.test.tsx

@@ -0,0 +1,57 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import React from 'react';
+import userEvent from '@testing-library/user-event';
+import { Route } from 'react-router-dom';
+
+import { render, screen, history, waitFor } from '../../../../test/test_utils';
+import { RegisterModelForm } from '../register_model';
+import { ModelRepository } from '../../../apis/model_repository';
+
+describe('<RegisterModel /> Repository Import', () => {
+  beforeEach(() => {
+    jest.spyOn(ModelRepository.prototype, 'getPreTrainedModels').mockResolvedValue({
+      foo: {
+        description: 'foo',
+        version: '1',
+        torch_script: { model_url: '', config_url: '' },
+        onnx: { model_url: '', config_url: '' },
+      },
+    });
+    jest.spyOn(ModelRepository.prototype, 'getPreTrainedModelConfig').mockResolvedValue({});
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should render find model selector and disable "Register model" button', async () => {
+    render(
+      <Route path="/:id?">
+        <RegisterModelForm />
+      </Route>,
+      { route: '/?type=import' }
+    );
+
+    await waitFor(() => {
+      expect(screen.getByText('Find model')).toBeInTheDocument();
+      expect(screen.queryByLabelText(/^name$/i)).not.toBeInTheDocument();
+      expect(screen.getByRole('button', { name: 'Register model' })).toBeDisabled();
+    });
+  });
+
+  it('should update path with name params after model selected', async () => {
+    render(
+      <Route path="/:id?">
+        <RegisterModelForm />
+      </Route>,
+      { route: '/?type=import' }
+    );
+
+    await userEvent.click(screen.getByText('Find model'));
+    await userEvent.click(screen.getByRole('option', { name: 'foo' }));
+    expect(history.current.location.search).toContain('name=foo');
+  });
+});

public/components/register_model/__tests__/register_model_source.test.tsx

@@ -0,0 +1,53 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { setup } from './setup';
+import * as formAPI from '../register_model_api';
+import { Connector } from '../../../apis/connector';
+import { screen } from '../../../../test/test_utils';
+
+describe('<RegisterModel /> Source', () => {
+  const onSubmitMock = jest.fn().mockResolvedValue('model_id');
+
+  beforeEach(() => {
+    jest.spyOn(formAPI, 'submitExternalModel').mockImplementation(onSubmitMock);
+    jest.spyOn(Connector.prototype, 'getAll').mockResolvedValue({
+      data: [
+        { id: 'connector-1', name: 'foo' },
+        { id: 'connector-2', name: 'bar' },
+      ],
+      total_connectors: 2,
+    });
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should render a model source panel', async () => {
+    const result = await setup({ mode: 'external', route: '/?type=external' });
+    expect(result.connectorInput).toBeInTheDocument();
+  });
+
+  it('should submit the register model form', async () => {
+    const result = await setup({ mode: 'external', route: '/?type=external' });
+    expect(onSubmitMock).not.toHaveBeenCalled();
+
+    await result.user.click(result.connectorInput);
+    await result.user.click(screen.getByRole('option', { name: 'foo' }));
+    await result.user.click(result.submitButton);
+
+    expect(onSubmitMock).toHaveBeenCalled();
+  });
+
+  it('should NOT submit the register model form if model source is empty', async () => {
+    const result = await setup({ mode: 'external', route: '/?type=external' });
+
+    await result.user.click(result.submitButton);
+
+    expect(result.connectorInput.closest('[class*="isInvalid"]')).toBeInTheDocument();
+    expect(onSubmitMock).not.toHaveBeenCalled();
+  });
+});

public/components/register_model/__tests__/setup.tsx

@@ -10,13 +10,13 @@ import { UserEvent } from '@testing-library/user-event/dist/types/setup/setup';
 
 import { RegisterModelForm } from '../register_model';
 import { render, RenderWithRouteProps, screen, waitFor } from '../../../../test/test_utils';
-import { ModelFileFormData, ModelUrlFormData } from '../register_model.types';
+import { ModelFormData } from '../register_model.types';
 
 jest.mock('../../../apis/task');
 
 interface SetupOptions extends Partial<RenderWithRouteProps> {
-  mode?: 'model' | 'version' | 'import';
-  defaultValues?: Partial<ModelFileFormData> | Partial<ModelUrlFormData>;
+  mode?: 'model' | 'version' | 'import' | 'external';
+  defaultValues?: Partial<ModelFormData>;
 }
 
 interface SetupReturn {
@@ -26,6 +26,7 @@ interface SetupReturn {
   form: HTMLElement;
   user: UserEvent;
   versionNotesInput: HTMLTextAreaElement;
+  connectorInput: HTMLSelectElement;
 }
 
 const CONFIGURATION = `{
@@ -45,12 +46,12 @@ const DEFAULT_VALUES = {
 export async function setup(options: {
   route?: string;
   mode: 'version';
-  defaultValues?: Partial<ModelFileFormData> | Partial<ModelUrlFormData>;
-}): Promise<Omit<SetupReturn, 'nameInput' | 'descriptionInput'>>;
+  defaultValues?: Partial<ModelFormData>;
+}): Promise<Pick<SetupReturn, 'form' | 'user' | 'versionNotesInput' | 'submitButton'>>;
 export async function setup(options?: {
   route?: string;
-  mode?: 'model' | 'import';
-  defaultValues?: Partial<ModelFileFormData> | Partial<ModelUrlFormData>;
+  mode?: 'model' | 'import' | 'external';
+  defaultValues?: Partial<ModelFormData>;
 }): Promise<SetupReturn>;
 export async function setup(
   { route, mode, defaultValues }: SetupOptions = {
@@ -75,6 +76,7 @@ export async function setup(
   const form = screen.getByTestId('mlCommonsPlugin-registerModelForm');
   const user = userEvent.setup();
   const versionNotesInput = screen.getByLabelText<HTMLTextAreaElement>(/notes/i);
+  const connectorInput = screen.queryByLabelText('Model connector');
 
   // fill model file
   if (modelFileInput) {
@@ -106,11 +108,11 @@ export async function setup(
   }
 
   // fill model name
-  if (mode === 'model') {
+  if (mode === 'model' || mode === 'external') {
     await user.type(nameInput, 'test model name');
   }
   // fill model description
-  if (mode === 'model') {
+  if (mode === 'model' || mode === 'external') {
     await user.type(descriptionInput, 'test model description');
   }
 
@@ -121,5 +123,6 @@ export async function setup(
     form,
     user,
     versionNotesInput,
+    connectorInput,
   };
 }

public/components/register_model/model_deployment.tsx

@@ -0,0 +1,43 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { EuiCheckbox, EuiText, EuiFormRow } from '@elastic/eui';
+import { useController, useFormContext } from 'react-hook-form';
+import { useSearchParams } from '../../hooks/use_search_params';
+
+export const ModelDeployment = () => {
+  const searchParams = useSearchParams();
+  const typeParams = searchParams.get('type');
+  const { control } = useFormContext<{ deployment: boolean }>();
+  const modelDeploymentController = useController({
+    name: 'deployment',
+    control,
+    defaultValue: false,
+  });
+  const isRegisterExternal = typeParams === 'external';
+
+  const { ref: deploymentInputRef, ...deploymentField } = modelDeploymentController.field;
+  return (
+    <EuiFormRow
+      label={isRegisterExternal ? 'Activation' : 'Deployment'}
+      labelAppend={
+        <EuiText size="xs" color="subdued" style={{ width: '100%' }}>
+          Need a description, mention of “in use” might make sense
+        </EuiText>
+      }
+    >
+      <EuiCheckbox
+        id="deployment"
+        label={isRegisterExternal ? 'Activate on registration' : 'Start deployment automatically'}
+        aria-label={
+          isRegisterExternal ? 'Activate on registration' : 'Start deployment automatically'
+        }
+        checked={deploymentField.value}
+        onChange={deploymentField.onChange}
+      />
+    </EuiFormRow>
+  );
+};

public/components/register_model/model_details.tsx

@@ -9,10 +9,10 @@ import { useFormContext } from 'react-hook-form';
 
 import { ModelNameField, ModelDescriptionField } from '../../components/common';
 
-import { ModelFileFormData, ModelUrlFormData } from './register_model.types';
+import { ModelFormData } from './register_model.types';
 
 export const ModelDetailsPanel = () => {
-  const { control, trigger, watch } = useFormContext<ModelFileFormData | ModelUrlFormData>();
+  const { control, trigger, watch } = useFormContext<ModelFormData>();
   const type = watch('type');
 
   return (