feat(MR): 8454 add namedesc fields

Signed-off-by: gitdallas <[email protected]>
opendatahub-io · Jul 15, 2024 · d77d143 · d77d143
1 parent 48b04aa
commit d77d143
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 38 deletions.
diff --git a/frontend/src/__tests__/cypress/cypress/pages/modelRegistrySettings.ts b/frontend/src/__tests__/cypress/cypress/pages/modelRegistrySettings.ts
@@ -2,6 +2,7 @@ import { appChrome } from './appChrome';
 
 export enum FormFieldSelector {
   NAME = '#mr-name',
+  RESOURCENAME = '#resource-mr-name',
   HOST = '#mr-host',
   PORT = '#mr-port',
   USERNAME = '#mr-username',
@@ -10,7 +11,6 @@ export enum FormFieldSelector {
 }
 
 export enum FormErrorTestId {
-  NAME = 'mr-name-error',
   HOST = 'mr-host-error',
   PORT = 'mr-port-error',
   USERNAME = 'mr-username-error',

diff --git a/.../__tests__/cypress/cypress/tests/mocked/modelRegistrySettings/modelRegistrySettings.cy.ts b/.../__tests__/cypress/cypress/tests/mocked/modelRegistrySettings/modelRegistrySettings.cy.ts
@@ -3,7 +3,6 @@ import { mockDsciStatus } from '~/__mocks__/mockDsciStatus';
 import { StackCapability, StackComponent } from '~/concepts/areas/types';
 import {
   FormFieldSelector,
-  FormErrorTestId,
   modelRegistrySettings,
   DatabaseDetailsTestId,
 } from '~/__tests__/cypress/cypress/pages/modelRegistrySettings';
@@ -106,14 +105,6 @@ describe('CreateModal', () => {
     modelRegistrySettings.shouldHaveAllErrors();
   });
 
-  it('should display error when name is not empty but is invalid', () => {
-    modelRegistrySettings.visit(true);
-    modelRegistrySettings.findCreateButton().click();
-    modelRegistrySettings.findFormField(FormFieldSelector.NAME).type('Invalid Name');
-    modelRegistrySettings.findFormField(FormFieldSelector.NAME).blur();
-    modelRegistrySettings.findFormError(FormErrorTestId.NAME).should('exist');
-  });
-
   it('should enable submit button if fields are valid', () => {
     modelRegistrySettings.visit(true);
     cy.findByText('Create model registry').click();

diff --git a/frontend/src/k8sTypes.ts b/frontend/src/k8sTypes.ts
@@ -1302,6 +1302,7 @@ export type ModelRegistryKind = K8sResourceCommon & {
   metadata: {
     name: string;
     namespace: string;
+    annotations?: DisplayNameAnnotations;
   };
   spec: {
     grpc: {

diff --git a/frontend/src/pages/modelRegistrySettings/CreateModal.tsx b/frontend/src/pages/modelRegistrySettings/CreateModal.tsx
@@ -17,8 +17,10 @@ import { ModelRegistryKind } from '~/k8sTypes';
 import { MODEL_REGISTRY_DEFAULT_NAMESPACE } from '~/concepts/modelRegistry/const';
 import { ModelRegistryModel } from '~/api';
 import { createModelRegistryBackend } from '~/services/modelRegistrySettingsService';
-import { isValidK8sName } from '~/concepts/k8s/utils';
+import { isValidK8sName, translateDisplayNameForK8s } from '~/concepts/k8s/utils';
 import './CreateModal.scss';
+import NameDescriptionField from '~/concepts/k8s/NameDescriptionField';
+import { NameDescType } from '~/pages/projects/types';
 
 type CreateModalProps = {
   isOpen: boolean;
@@ -29,13 +31,16 @@ type CreateModalProps = {
 const CreateModal: React.FC<CreateModalProps> = ({ isOpen, onClose, refresh }) => {
   const [isSubmitting, setIsSubmitting] = React.useState(false);
   const [error, setError] = React.useState<Error>();
-  const [name, setName] = React.useState('');
+  const [nameDesc, setNameDesc] = React.useState<NameDescType>({
+    name: '',
+    k8sName: undefined,
+    description: '',
+  });
   const [host, setHost] = React.useState('');
   const [port, setPort] = React.useState('');
   const [username, setUsername] = React.useState('');
   const [password, setPassword] = React.useState('');
   const [database, setDatabase] = React.useState('');
-  const [isNameTouched, setIsNameTouched] = React.useState(false);
   const [isHostTouched, setIsHostTouched] = React.useState(false);
   const [isPortTouched, setIsPortTouched] = React.useState(false);
   const [isUsernameTouched, setIsUsernameTouched] = React.useState(false);
@@ -46,13 +51,16 @@ const CreateModal: React.FC<CreateModalProps> = ({ isOpen, onClose, refresh }) =
   const onBeforeClose = () => {
     setIsSubmitting(false);
     setError(undefined);
-    setName('');
+    setNameDesc({
+      name: '',
+      k8sName: undefined,
+      description: '',
+    });
     setHost('');
     setPort('');
     setUsername('');
     setPassword('');
     setDatabase('');
-    setIsNameTouched(false);
     setIsHostTouched(false);
     setIsPortTouched(false);
     setIsUsernameTouched(false);
@@ -69,8 +77,12 @@ const CreateModal: React.FC<CreateModalProps> = ({ isOpen, onClose, refresh }) =
       apiVersion: `${ModelRegistryModel.apiGroup}/${ModelRegistryModel.apiVersion}`,
       kind: 'ModelRegistry',
       metadata: {
-        name,
+        name: nameDesc.k8sName || translateDisplayNameForK8s(nameDesc.name),
         namespace: MODEL_REGISTRY_DEFAULT_NAMESPACE,
+        annotations: {
+          'openshift.io/description': nameDesc.description,
+          'openshift.io/display-name': nameDesc.name.trim(),
+        },
       },
       spec: {
         grpc: {
@@ -104,7 +116,7 @@ const CreateModal: React.FC<CreateModalProps> = ({ isOpen, onClose, refresh }) =
 
   const canSubmit = () =>
     !isSubmitting &&
-    isValidK8sName(name) &&
+    isValidK8sName(nameDesc.k8sName || translateDisplayNameForK8s(nameDesc.name)) &&
     hasContent(host) &&
     hasContent(password) &&
     hasContent(port) &&
@@ -138,26 +150,15 @@ const CreateModal: React.FC<CreateModalProps> = ({ isOpen, onClose, refresh }) =
       }
     >
       <Form>
-        <FormGroup label="Name" isRequired fieldId="mr-name">
-          <TextInput
-            isRequired
-            type="text"
-            id="mr-name"
-            name="mr-name"
-            value={name}
-            onBlur={() => setIsNameTouched(true)}
-            onChange={(_e, value) => setName(value)}
-            validated={isNameTouched && !isValidK8sName(name) ? 'error' : 'default'}
-          />
-          {isNameTouched && !isValidK8sName(name) && (
-            <HelperText>
-              <HelperTextItem variant="error" data-testid="mr-name-error">
-                {`Must consist of lower case alphanumeric characters or '-', and must start and end
-                with an alphanumeric character`}
-              </HelperTextItem>
-            </HelperText>
-          )}
-        </FormGroup>
+        <NameDescriptionField
+          nameFieldId="mr-name"
+          descriptionFieldId="mr-description"
+          data={nameDesc}
+          showK8sName
+          setData={(value) => {
+            setNameDesc(value);
+          }}
+        />
         <FormSection
           title={
             <>

diff --git a/frontend/src/pages/modelRegistrySettings/ModelRegistriesTableRow.tsx b/frontend/src/pages/modelRegistrySettings/ModelRegistriesTableRow.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import { ActionsColumn, Td, Tr } from '@patternfly/react-table';
 import { Link } from 'react-router-dom';
 import { ModelRegistryKind } from '~/k8sTypes';
+import ResourceNameTooltip from '~/components/ResourceNameTooltip';
 import ViewDatabaseConfigModal from './ViewDatabaseConfigModal';
 import DeleteModelRegistryModal from './DeleteModelRegistryModal';
 
@@ -19,7 +20,16 @@ const ModelRegistriesTableRow: React.FC<ModelRegistriesTableRowProps> = ({
   return (
     <>
       <Tr>
-        <Td dataLabel="Model registry name">{mr.metadata.name}</Td>
+        <Td dataLabel="Model registry name">
+          <ResourceNameTooltip resource={mr}>
+            <strong>
+              {mr.metadata.annotations?.['openshift.io/display-name'] || mr.metadata.name}
+            </strong>
+          </ResourceNameTooltip>
+          {mr.metadata.annotations?.['openshift.io/description'] && (
+            <p>{mr.metadata.annotations['openshift.io/description']}</p>
+          )}
+        </Td>
         <Td modifier="fitContent">
           <Link
             aria-label={`Manage permissions for model registry ${mr.metadata.name}`}