fix the code for the actual problem

Signed-off-by: Philip Colares Carneiro <philip.colares@gmail.com>

Author: Philip-Carneiro

frontend/src/pages/modelRegistrySettings/CreateModal.tsx

@@ -11,13 +11,9 @@ import {
   Stack,
   Spinner,
   TextInput,
-  Modal,
-  ModalBody,
-  ModalHeader,
-  ModalFooter,
 } from '@patternfly/react-core';
 import SimpleSelect, { SimpleSelectOption } from '#~/components/SimpleSelect';
-import DashboardModalFooter from '#~/concepts/dashboard/DashboardModalFooter';
+import ContentModal from '#~/components/modals/ContentModal';
 import { ModelRegistryKind } from '#~/k8sTypes';
 import { ModelRegistryModel } from '#~/api';
 import {
@@ -54,6 +50,7 @@ import {
   DEFAULT_DATABASE_NAME,
   DEFAULT_MYSQL_PORT,
   DEFAULT_POSTGRES_PORT,
+  MAX_MODEL_REGISTRY_NAME_LENGTH,
   ResourceType,
   SecureDBRType,
 } from './const';
@@ -390,9 +387,8 @@ const CreateModal: React.FC<CreateModalProps> = ({ onClose, refresh, modelRegist
   const hasContent = (value: string): boolean => !!value.trim().length;
 
   const canSubmit = () => {
-    const isValidName = isValidK8sName(
-      nameDesc.k8sName.value || translateDisplayNameForK8s(nameDesc.name),
-    );
+    const k8sName = nameDesc.k8sName.value || translateDisplayNameForK8s(nameDesc.name);
+    const isValidName = isValidK8sName(k8sName) && k8sName.length <= MAX_MODEL_REGISTRY_NAME_LENGTH;
 
     if (databaseSource === DatabaseSource.DEFAULT) {
       // For default database, only name is required
@@ -419,11 +415,36 @@ const CreateModal: React.FC<CreateModalProps> = ({ onClose, refresh, modelRegist
   ];
 
   return (
-    <Modal isOpen onClose={onCancelClose} variant="medium">
-      <ModalHeader title={`${mr ? 'Edit' : 'Create'} model registry`} />
-      <ModalBody>
+    <ContentModal
+      onClose={onCancelClose}
+      variant="medium"
+      title={`${mr ? 'Edit' : 'Create'} model registry`}
+      error={error}
+      alertTitle={`Error ${mr ? 'updating' : 'creating'} model registry`}
+      buttonActions={[
+        {
+          label: mr ? 'Update' : 'Create',
+          onClick: onSubmit,
+          variant: 'primary',
+          isLoading: isSubmitting,
+          isDisabled: !canSubmit(),
+          dataTestId: 'modal-submit-button',
+        },
+        {
+          label: 'Cancel',
+          onClick: onCancelClose,
+          variant: 'link',
+          dataTestId: 'modal-cancel-button',
+        },
+      ]}
+      contents={
         <Form>
-          <K8sNameDescriptionField dataTestId="mr" data={nameDesc} onDataChange={setNameDesc} />
+          <K8sNameDescriptionField
+            dataTestId="mr"
+            data={nameDesc}
+            onDataChange={setNameDesc}
+            maxLength={MAX_MODEL_REGISTRY_NAME_LENGTH}
+          />
           <FormSection title="Database" description="Choose where to store model data.">
             <FormGroup role="radiogroup" fieldId="mr-database-source">
               <Stack hasGutter>
@@ -632,19 +653,8 @@ const CreateModal: React.FC<CreateModalProps> = ({ onClose, refresh, modelRegist
             )}
           </FormSection>
         </Form>
-      </ModalBody>
-      <ModalFooter>
-        <DashboardModalFooter
-          onCancel={onCancelClose}
-          onSubmit={onSubmit}
-          submitLabel={mr ? 'Update' : 'Create'}
-          isSubmitLoading={isSubmitting}
-          isSubmitDisabled={!canSubmit()}
-          error={error}
-          alertTitle={`Error ${mr ? 'updating' : 'creating'} model registry`}
-        />
-      </ModalFooter>
-    </Modal>
+      }
+    />
   );
 };
 

frontend/src/pages/modelRegistrySettings/const.ts

@@ -1,3 +1,5 @@
+export const MAX_MODEL_REGISTRY_NAME_LENGTH = 40;
+
 export const ODH_TRUSTED_BUNDLE = 'odh-trusted-ca-bundle';
 export const CA_BUNDLE_CRT = 'ca-bundle.crt';
 export const ODH_CA_BUNDLE_CRT = 'odh-ca-bundle.crt';

packages/cypress/cypress/tests/mocked/modelRegistrySettings/modelRegistrySettings.cy.ts

@@ -336,6 +336,52 @@ describe('CreateModal', () => {
     modelRegistrySettings.shouldHaveAllErrors();
   });
 
+  it('should enforce maxLength of 40 on the name input field', () => {
+    modelRegistrySettings.visit(true);
+    modelRegistrySettings.findCreateButton().click();
+    modelRegistrySettings
+      .findFormField(FormFieldSelector.NAME)
+      .should('have.attr', 'maxLength', '40');
+  });
+
+  it('should disable submit when resource name exceeds 40 characters', () => {
+    modelRegistrySettings.visit(true);
+    modelRegistrySettings.findCreateButton().click();
+    modelRegistrySettings.findDatabaseSourceDefaultRadio().should('be.checked');
+
+    modelRegistrySettings.findFormField(FormFieldSelector.NAME).type('a'.repeat(40));
+    modelRegistrySettings.findSubmitButton().should('be.enabled');
+
+    modelRegistrySettings.k8sNameDescription.findResourceEditLink().click();
+    modelRegistrySettings.k8sNameDescription.findResourceNameInput().clear().type('a'.repeat(41));
+    modelRegistrySettings.findSubmitButton().should('be.disabled');
+  });
+
+  it('should show character count warning when name approaches 40 limit', () => {
+    modelRegistrySettings.visit(true);
+    modelRegistrySettings.findCreateButton().click();
+
+    const nearLimitName = 'a'.repeat(31);
+    modelRegistrySettings.findFormField(FormFieldSelector.NAME).type(nearLimitName);
+    cy.contains('Cannot exceed 40 characters').should('be.visible');
+    cy.contains('remaining').should('be.visible');
+  });
+
+  it('should allow creation with name at exactly 40 characters using default database', () => {
+    modelRegistrySettings.visit(true);
+    modelRegistrySettings.findCreateButton().click();
+    modelRegistrySettings.findDatabaseSourceDefaultRadio().should('be.checked');
+
+    const exactName = 'a'.repeat(40);
+    modelRegistrySettings.findFormField(FormFieldSelector.NAME).type(exactName);
+    modelRegistrySettings.findSubmitButton().should('be.enabled');
+    modelRegistrySettings.findSubmitButton().click();
+
+    cy.wait('@createModelRegistry').then((interception) => {
+      expect(interception.request.body.modelRegistry.metadata.name).to.have.length.at.most(40);
+    });
+  });
+
   it('should enable submit button if fields are valid', () => {
     modelRegistrySettings.visit(true);
     modelRegistrySettings.findCreateButton().click();