[RHOAIENG-11751] [RFE] Description field character limit validation f…

…or 'create experiment' form
opendatahub-io · Sep 23, 2024 · f39b7d2 · f39b7d2
1 parent a509cf4
commit f39b7d2
Show file tree

Hide file tree

Showing 6 changed files with 39 additions and 24 deletions.
diff --git a/frontend/src/components/CharLimitHelperText.tsx b/frontend/src/components/CharLimitHelperText.tsx
@@ -0,0 +1,12 @@
+import { HelperText, HelperTextItem } from '@patternfly/react-core';
+import React from 'react';
+
+interface CharLimitHelperTextProps {
+  limit: number;
+}
+
+export const CharLimitHelperText: React.FC<CharLimitHelperTextProps> = ({ limit }) => (
+  <HelperText>
+    <HelperTextItem>{`Cannot exceed ${limit} characters`}</HelperTextItem>
+  </HelperText>
+);
diff --git a/frontend/src/concepts/k8s/NameDescriptionField.tsx b/frontend/src/concepts/k8s/NameDescriptionField.tsx
@@ -13,6 +13,7 @@ import { ExclamationCircleIcon } from '@patternfly/react-icons';
 import { NameDescType } from '~/pages/projects/types';
 import { isValidK8sName, translateDisplayNameForK8s } from '~/concepts/k8s/utils';
 import ResourceNameDefinitionTooltip from '~/concepts/k8s/ResourceNameDefinitionTooltip';
+import { CharLimitHelperText } from '~/components/CharLimitHelperText';
 
 type NameDescriptionFieldProps = {
   nameFieldId: string;
@@ -82,12 +83,7 @@ const NameDescriptionField: React.FC<NameDescriptionFieldProps> = ({
             maxLength={maxLengthName}
           />
 
-          {maxLengthName && (
-            <HelperText>
-              <HelperTextItem>{`Cannot exceed ${maxLengthName} characters`}</HelperTextItem>
-            </HelperText>
-          )}
-
+          {maxLengthName && <CharLimitHelperText limit={maxLengthName} />}
           {nameHelperText}
         </FormGroup>
       </StackItem>
@@ -146,11 +142,8 @@ const NameDescriptionField: React.FC<NameDescriptionFieldProps> = ({
             onChange={setData ? (e, description) => setData({ ...data, description }) : undefined}
             maxLength={maxLengthDesc}
           />
-          {maxLengthDesc && (
-            <HelperText>
-              <HelperTextItem>{`Cannot exceed ${maxLengthDesc} characters`}</HelperTextItem>
-            </HelperText>
-          )}
+
+          {maxLengthDesc && <CharLimitHelperText limit={maxLengthDesc} />}
         </FormGroup>
       </StackItem>
     </Stack>

diff --git a/frontend/src/concepts/pipelines/content/const.ts b/frontend/src/concepts/pipelines/content/const.ts
@@ -8,3 +8,6 @@ export const PIPELINE_CREATE_SCHEDULE_TOOLTIP_ARGO_ERROR =
 
 export const PIPELINE_CREATE_RUN_TOOLTIP_ARGO_ERROR =
   'Cannot create run for Kubeflow v1 SDK pipelines';
+
+export const NAME_CHARACTER_LIMIT = 255;
+export const DESCRIPTION_CHARACTER_LIMIT = 255;
diff --git a/frontend/src/concepts/pipelines/content/createRun/RunForm.tsx b/frontend/src/concepts/pipelines/content/createRun/RunForm.tsx
@@ -19,14 +19,13 @@ import { DuplicateNameHelperText } from '~/concepts/pipelines/content/DuplicateN
 import { usePipelinesAPI } from '~/concepts/pipelines/context';
 import useDebounceCallback from '~/utilities/useDebounceCallback';
 import { isArgoWorkflow } from '~/concepts/pipelines/content/tables/utils';
+import {
+  NAME_CHARACTER_LIMIT,
+  DESCRIPTION_CHARACTER_LIMIT,
+} from '~/concepts/pipelines/content/const';
 import PipelineSection from './contentSections/PipelineSection';
 import { RunTypeSection } from './contentSections/RunTypeSection';
-import {
-  CreateRunPageSections,
-  RUN_DESCRIPTION_CHARACTER_LIMIT,
-  RUN_NAME_CHARACTER_LIMIT,
-  runPageSectionTitles,
-} from './const';
+import { CreateRunPageSections, runPageSectionTitles } from './const';
 import { getInputDefinitionParams } from './utils';
 
 type RunFormProps = {
@@ -126,8 +125,8 @@ const RunForm: React.FC<RunFormProps> = ({ data, onValueChange, isCloned }) => {
           descriptionFieldId="run-description"
           data={data.nameDesc}
           setData={(nameDesc) => onValueChange('nameDesc', nameDesc)}
-          maxLengthName={RUN_NAME_CHARACTER_LIMIT}
-          maxLengthDesc={RUN_DESCRIPTION_CHARACTER_LIMIT}
+          maxLengthName={NAME_CHARACTER_LIMIT}
+          maxLengthDesc={DESCRIPTION_CHARACTER_LIMIT}
           onNameChange={(value) => {
             setHasDuplicateName(false);
             checkForDuplicateName(value);

diff --git a/frontend/src/concepts/pipelines/content/createRun/const.ts b/frontend/src/concepts/pipelines/content/createRun/const.ts
@@ -34,6 +34,3 @@ export const runPageSectionTitles: Record<CreateRunPageSections, string> = {
   [CreateRunPageSections.PIPELINE]: 'Pipeline',
   [CreateRunPageSections.PARAMS]: 'Parameters',
 };
-
-export const RUN_NAME_CHARACTER_LIMIT = 255;
-export const RUN_DESCRIPTION_CHARACTER_LIMIT = 255;
diff --git a/frontend/src/concepts/pipelines/content/experiment/CreateExperimentModal.tsx b/frontend/src/concepts/pipelines/content/experiment/CreateExperimentModal.tsx
@@ -13,6 +13,11 @@ import { usePipelinesAPI } from '~/concepts/pipelines/context';
 import useCreateExperimentData from '~/concepts/pipelines/content/experiment/useCreateExperimentData';
 import { ExperimentKFv2 } from '~/concepts/pipelines/kfTypes';
 import { getDisplayNameFromK8sResource } from '~/concepts/k8s/utils';
+import {
+  NAME_CHARACTER_LIMIT,
+  DESCRIPTION_CHARACTER_LIMIT,
+} from '~/concepts/pipelines/content/const';
+import { CharLimitHelperText } from '~/components/CharLimitHelperText';
 
 type CreateExperimentModalProps = {
   isOpen: boolean;
@@ -80,8 +85,11 @@ const CreateExperimentModal: React.FC<CreateExperimentModalProps> = ({ isOpen, o
                 id="experiment-name"
                 name="experiment-name"
                 value={name}
-                onChange={(e, value) => setData('name', value)}
+                onChange={(_, value) => setData('name', value)}
+                maxLength={NAME_CHARACTER_LIMIT}
               />
+
+              <CharLimitHelperText limit={NAME_CHARACTER_LIMIT} />
             </FormGroup>
           </StackItem>
           <StackItem>
@@ -92,8 +100,11 @@ const CreateExperimentModal: React.FC<CreateExperimentModalProps> = ({ isOpen, o
                 id="experiment-description"
                 name="experiment-description"
                 value={description}
-                onChange={(e, value) => setData('description', value)}
+                onChange={(_, value) => setData('description', value)}
+                maxLength={DESCRIPTION_CHARACTER_LIMIT}
               />
+
+              <CharLimitHelperText limit={DESCRIPTION_CHARACTER_LIMIT} />
             </FormGroup>
           </StackItem>
           {error && (