Added Model transfer job name and Edit resource fields

clients/ui/frontend/src/__tests__/cypress/cypress/pages/modelRegistryView/registerModelPage.ts

@@ -14,6 +14,8 @@ export enum FormFieldSelector {
   LOCATION_PATH = '#location-path',
   LOCATION_TYPE_URI = '#location-type-uri',
   LOCATION_URI = '#location-uri',
+  JOB_NAME = '#model-transfer-job-name',
+  RESOURCE_NAME = '#model-transfer-job-resourceName',
 }
 
 class RegisterModelPage {
@@ -56,6 +58,26 @@ class RegisterModelPage {
   findSubmitButton() {
     return cy.findByTestId('create-button');
   }
+
+  findRegisterToggle() {
+    return cy.findByRole('button', { name: 'Register' });
+  }
+
+  findRegisterAndStoreToggle() {
+    return cy.findByRole('button', { name: 'Register and store' });
+  }
+
+  selectRegisterAndStore() {
+    this.findRegisterAndStoreToggle().click();
+  }
+
+  findEditResourceNameLink() {
+    return cy.findByTestId('model-transfer-job-editResourceLink');
+  }
+
+  clickEditResourceName() {
+    this.findEditResourceNameLink().click();
+  }
 }
 
 export const registerModelPage = new RegisterModelPage();

clients/ui/frontend/src/__tests__/cypress/cypress/pages/modelRegistryView/registerVersionPage.ts

@@ -11,6 +11,8 @@ export enum FormFieldSelector {
   LOCATION_PATH = '#location-path',
   LOCATION_TYPE_URI = '#location-type-uri',
   LOCATION_URI = '#location-uri',
+  JOB_NAME = '#model-transfer-job-name',
+  RESOURCE_NAME = '#model-transfer-job-resourceName',
 }
 
 class RegisterVersionPage {
@@ -46,6 +48,26 @@ class RegisterVersionPage {
   findSubmitButton() {
     return cy.findByTestId('create-button');
   }
+
+  findRegisterToggle() {
+    return cy.findByRole('button', { name: 'Register' });
+  }
+
+  findRegisterAndStoreToggle() {
+    return cy.findByRole('button', { name: 'Register and store' });
+  }
+
+  selectRegisterAndStore() {
+    this.findRegisterAndStoreToggle().click();
+  }
+
+  findEditResourceNameLink() {
+    return cy.findByTestId('model-transfer-job-editResourceLink');
+  }
+
+  clickEditResourceName() {
+    this.findEditResourceNameLink().click();
+  }
 }
 
 export const registerVersionPage = new RegisterVersionPage();

clients/ui/frontend/src/app/pages/modelCatalog/screens/RegisterCatalogModelForm.tsx

@@ -75,6 +75,7 @@ const RegisterCatalogModelForm: React.FC<RegisterCatalogModelFormProps> = ({
     modelLocationRegion: '',
     modelLocationPath: '',
     modelLocationURI: uri || '',
+    jobName: '',
     modelRegistry: preferredModelRegistry.name,
     modelCustomProperties: { ...getLabelsFromCustomProperties(model?.customProperties), ...tasks },
     versionCustomProperties: {

clients/ui/frontend/src/app/pages/modelRegistry/screens/RegisterModel/RegisterAndStoreFields.tsx

@@ -1,6 +1,8 @@
 import React from 'react';
+import { HelperText, HelperTextItem } from '@patternfly/react-core';
 import { UpdateObjectAtPropAndValue } from 'mod-arch-shared';
 import FormSection from '~/app/pages/modelRegistry/components/pf-overrides/FormSection';
+import K8sNameDescriptionField from '~/concepts/k8s/K8sNameDescriptionField/K8sNameDescriptionField';
 import { RegistrationCommonFormData } from './useRegisterModelData';
 import RegistrationModelLocationFields from './RegistrationModelLocationFields';
 
@@ -16,10 +18,33 @@ const RegisterAndStoreFields = <D extends RegistrationCommonFormData>({
   isCatalogModel,
 }: RegisterAndStoreFieldsProps<D>): React.ReactNode => (
   <>
-    TODO job name and namespace fields here
+    <K8sNameDescriptionField
+      dataTestId="model-transfer-job"
+      nameLabel="Model transfer job name"
+      data={{
+        name: formData.jobName,
+        description: '',
+      }}
+      onDataChange={(data) => {
+        setData('jobName', data.name);
+      }}
+      resourceNameHelperText={
+        <>
+          <HelperText>
+            <HelperTextItem>Cannot exceed 30 characters.</HelperTextItem>
+            <HelperTextItem>
+              Must start and end with a letter or number. Valid characters include lowercase
+              letters, numbers, and hyphens (-).
+            </HelperTextItem>
+            <HelperTextItem>
+              Auto generated value will be used as resource name if field is blank.
+            </HelperTextItem>
+          </HelperText>
+        </>
+      }
+      hideDescription
+    />
     {/*
-      TODO use the K8sNameResourceField component here for the job name.
-
       TODO add a namespace selector - don't replicate the ODH notion of "projects", we will start with a simple k8s namespace selector.
       Needs to list all namespaces the user can see, which is something we already have in the app header here, look how that was done.
 

clients/ui/frontend/src/app/pages/modelRegistry/screens/RegisterModel/useRegisterModelData.ts

@@ -18,6 +18,7 @@ export type RegistrationCommonFormData = {
   modelLocationRegion: string;
   modelLocationPath: string;
   modelLocationURI: string;
+  jobName: string;
   versionCustomProperties?: ModelRegistryCustomProperties;
   modelCustomProperties?: ModelRegistryCustomProperties;
   additionalArtifactProperties?: Partial<ModelArtifact>;
@@ -47,6 +48,7 @@ const registrationCommonFormDataDefaults: RegistrationCommonFormData = {
   modelLocationRegion: '',
   modelLocationPath: '',
   modelLocationURI: '',
+  jobName: '',
   modelCustomProperties: {},
   versionCustomProperties: {},
 };

clients/ui/frontend/src/concepts/k8s/K8sNameDescriptionField/K8sNameDescriptionField.tsx

@@ -41,6 +41,7 @@ type K8sNameDescriptionFieldProps = {
   descriptionLabel?: string;
   nameLabel?: string;
   nameHelperText?: React.ReactNode;
+  resourceNameHelperText?: React.ReactNode;
   hideDescription?: boolean;
 };
 
@@ -55,6 +56,7 @@ const K8sNameDescriptionField: React.FC<K8sNameDescriptionFieldProps> = ({
   descriptionLabel = 'Description',
   nameLabel = 'Name',
   nameHelperText,
+  resourceNameHelperText,
   hideDescription,
 }) => {
   const [showK8sField, setShowK8sField] = React.useState(false);
@@ -151,15 +153,20 @@ const K8sNameDescriptionField: React.FC<K8sNameDescriptionFieldProps> = ({
         </>
       )}
 
-      <ResourceNameField allowEdit={showK8sField} dataTestId={dataTestId} />
-
-      {!hideDescription && isMUITheme ? (
-        descriptionFormGroup
-      ) : (
-        <FormGroup label={descriptionLabel} fieldId={`${dataTestId}-description`}>
-          {descriptionTextArea}
-        </FormGroup>
-      )}
+      <ResourceNameField
+        allowEdit={showK8sField}
+        dataTestId={dataTestId}
+        helperText={resourceNameHelperText}
+      />
+
+      {!hideDescription &&
+        (isMUITheme ? (
+          descriptionFormGroup
+        ) : (
+          <FormGroup label={descriptionLabel} fieldId={`${dataTestId}-description`}>
+            {descriptionTextArea}
+          </FormGroup>
+        ))}
     </>
   );
 };

clients/ui/frontend/src/concepts/k8s/K8sNameDescriptionField/ResourceNameField.tsx

@@ -6,6 +6,7 @@ import FormFieldset from '~/app/pages/modelRegistry/screens/components/FormField
 type ResourceNameFieldProps = {
   allowEdit: boolean;
   dataTestId: string;
+  helperText?: React.ReactNode;
   //   k8sName: K8sNameDescriptionFieldData['k8sName'];
   //   onDataChange?: K8sNameDescriptionFieldUpdateFunction;
 };
@@ -14,6 +15,7 @@ type ResourceNameFieldProps = {
 const ResourceNameField: React.FC<ResourceNameFieldProps> = ({
   allowEdit,
   dataTestId,
+  helperText,
   //   k8sName,
   //   onDataChange,
 }) => {
@@ -70,14 +72,16 @@ const ResourceNameField: React.FC<ResourceNameFieldProps> = ({
       >
         <FormFieldset component={textInput} field="Host" />
       </FormGroup>
-      <HelperText>
-        <HelperTextItem>
-          The resource name is used to identify your resource, and is generated based on the name
-          you enter. The resource name cannot be edited after creation.
-        </HelperTextItem>
-        {/* <HelperTextItemMaxLength k8sName={k8sName} />
+      {helperText || (
+        <HelperText>
+          <HelperTextItem>
+            The resource name is used to identify your resource, and is generated based on the name
+            you enter. The resource name cannot be edited after creation.
+          </HelperTextItem>
+          {/* <HelperTextItemMaxLength k8sName={k8sName} />
          <HelperTextItemValidCharacters k8sName={k8sName} /> */}
-      </HelperText>
+        </HelperText>
+      )}
     </>
   );