Add Character Limit Validation in Name field in Catalog Settings (#2137)

* add source name char limit

Signed-off-by: Taj010 <rsheen003@gmail.com>

* address comments

Signed-off-by: Taj010 <rsheen003@gmail.com>

---------

Signed-off-by: Taj010 <rsheen003@gmail.com>

Author: Taj010

clients/ui/frontend/src/app/pages/modelCatalogSettings/components/SourceDetailsSection.tsx

@@ -13,11 +13,15 @@ import { UpdateObjectAtPropAndValue } from 'mod-arch-shared';
 import FormFieldset from '~/app/pages/modelRegistry/screens/components/FormFieldset';
 import FormSection from '~/app/pages/modelRegistry/components/pf-overrides/FormSection';
 import { ManageSourceFormData } from '~/app/pages/modelCatalogSettings/useManageSourceData';
-import { validateSourceName } from '~/app/pages/modelCatalogSettings/utils/validation';
+import {
+  validateSourceName,
+  isSourceNameEmpty,
+} from '~/app/pages/modelCatalogSettings/utils/validation';
 import {
   FORM_LABELS,
   SOURCE_TYPE_LABELS,
   VALIDATION_MESSAGES,
+  SOURCE_NAME_CHARACTER_LIMIT,
 } from '~/app/pages/modelCatalogSettings/constants';
 import { CatalogSourceType } from '~/app/modelCatalogTypes';
 
@@ -34,6 +38,7 @@ const SourceDetailsSection: React.FC<SourceDetailsSectionProps> = ({
 }) => {
   const [isNameTouched, setIsNameTouched] = React.useState(false);
   const isNameValid = validateSourceName(formData.name);
+  const hasNameError = isNameTouched && !isNameValid;
 
   const nameInput = (
     <TextInput
@@ -46,19 +51,23 @@ const SourceDetailsSection: React.FC<SourceDetailsSectionProps> = ({
       value={formData.name}
       onChange={(_event, value) => setData('name', value)}
       onBlur={() => setIsNameTouched(true)}
-      validated={isNameTouched && !isNameValid ? 'error' : 'default'}
+      validated={hasNameError ? 'error' : 'default'}
     />
   );
 
   return (
     <FormSection>
       <FormGroup label={FORM_LABELS.NAME} isRequired fieldId="source-name">
         <FormFieldset component={nameInput} field="Name" data-testid="source-name-readonly" />
-        {isNameTouched && !isNameValid && (
+        {hasNameError && (
           <FormHelperText>
             <HelperText>
               <HelperTextItem variant="error" data-testid="source-name-error">
-                {VALIDATION_MESSAGES.NAME_REQUIRED}
+                {isSourceNameEmpty(formData.name)
+                  ? VALIDATION_MESSAGES.NAME_REQUIRED
+                  : formData.name.length > SOURCE_NAME_CHARACTER_LIMIT
+                    ? `Cannot exceed ${SOURCE_NAME_CHARACTER_LIMIT} characters`
+                    : null}
               </HelperTextItem>
             </HelperText>
           </FormHelperText>

clients/ui/frontend/src/app/pages/modelCatalogSettings/constants.ts

@@ -23,6 +23,8 @@ export const SOURCE_TYPE_LABELS = {
   YAML: 'YAML file',
 } as const;
 
+export const SOURCE_NAME_CHARACTER_LIMIT = 238;
+
 export const VALIDATION_MESSAGES = {
   NAME_REQUIRED: 'Name is required',
   ORGANIZATION_REQUIRED: 'Organization is required',

clients/ui/frontend/src/app/pages/modelCatalogSettings/utils/validation.ts

@@ -1,9 +1,13 @@
 import { CatalogSourceType } from '~/app/modelCatalogTypes';
 import { ManageSourceFormData } from '~/app/pages/modelCatalogSettings/useManageSourceData';
+import { SOURCE_NAME_CHARACTER_LIMIT } from '~/app/pages/modelCatalogSettings/constants';
 
 const isNonEmptyString = (value: string): boolean => value.trim().length > 0;
 
-export const validateSourceName = (name: string): boolean => isNonEmptyString(name);
+export const validateSourceName = (name: string): boolean =>
+  isNonEmptyString(name) && name.length <= SOURCE_NAME_CHARACTER_LIMIT;
+
+export const isSourceNameEmpty = (name: string): boolean => !isNonEmptyString(name);
 
 export const validateOrganization = (organization: string): boolean =>
   isNonEmptyString(organization);