Add character length limit to the description field on create run form

DaoDaoNoCode · Aug 21, 2024 · 5405d6a · 5405d6a
1 parent a6621c9
commit 5405d6a
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 9 deletions.
diff --git a/frontend/src/__tests__/cypress/cypress/tests/mocked/pipelines/pipelineCreateRuns.cy.ts b/frontend/src/__tests__/cypress/cypress/tests/mocked/pipelines/pipelineCreateRuns.cy.ts
@@ -164,11 +164,12 @@ describe('Pipeline create runs', () => {
       );
       createRunPage.find();
 
+      const veryLongDesc = 'Test description'.repeat(30); // A string over 255 characters
       // Fill out the form without a schedule and submit
       createRunPage.fillName(initialMockRuns[0].display_name);
       cy.findByTestId('duplicate-name-help-text').should('be.visible');
       createRunPage.fillName('New run');
-      createRunPage.fillDescription('New run description');
+      createRunPage.fillDescription(veryLongDesc);
       createRunPage.findExperimentSelect().should('contain.text', 'Select an experiment');
       createRunPage.findExperimentSelect().should('not.be.disabled').click();
       createRunPage.selectExperimentByName('Test experiment 1');
@@ -189,7 +190,7 @@ describe('Pipeline create runs', () => {
       cy.wait('@createRun').then((interception) => {
         expect(interception.request.body).to.eql({
           display_name: 'New run',
-          description: 'New run description',
+          description: veryLongDesc.substring(0, 255), // Verify the description in truncated
           pipeline_version_reference: {
             pipeline_id: 'test-pipeline',
             pipeline_version_id: 'test-pipeline-version',

diff --git a/frontend/src/concepts/k8s/NameDescriptionField.tsx b/frontend/src/concepts/k8s/NameDescriptionField.tsx
@@ -25,7 +25,8 @@ type NameDescriptionFieldProps = {
   K8sLabelName?: string;
   showK8sName?: boolean;
   disableK8sName?: boolean;
-  maxLength?: number;
+  maxLengthName?: number;
+  maxLengthDesc?: number;
   nameHelperText?: React.ReactNode;
   onNameChange?: (value: string) => void;
 };
@@ -41,7 +42,8 @@ const NameDescriptionField: React.FC<NameDescriptionFieldProps> = ({
   K8sLabelName = 'Resource name',
   showK8sName,
   disableK8sName,
-  maxLength,
+  maxLengthName,
+  maxLengthDesc,
   nameHelperText,
   onNameChange,
 }) => {
@@ -81,12 +83,12 @@ const NameDescriptionField: React.FC<NameDescriptionFieldProps> = ({
                   }
                 : undefined
             }
-            maxLength={maxLength}
+            maxLength={maxLengthName}
           />
 
-          {maxLength && (
+          {maxLengthName && (
             <HelperText>
-              <HelperTextItem>{`Cannot exceed ${maxLength} characters`}</HelperTextItem>
+              <HelperTextItem>{`Cannot exceed ${maxLengthName} characters`}</HelperTextItem>
             </HelperText>
           )}
 
@@ -160,7 +162,13 @@ const NameDescriptionField: React.FC<NameDescriptionFieldProps> = ({
             name={descriptionFieldId}
             value={data.description}
             onChange={setData ? (e, description) => setData({ ...data, description }) : undefined}
+            maxLength={maxLengthDesc}
           />
+          {maxLengthDesc && (
+            <HelperText>
+              <HelperTextItem>{`Cannot exceed ${maxLengthDesc} characters`}</HelperTextItem>
+            </HelperText>
+          )}
         </FormGroup>
       </StackItem>
     </Stack>

diff --git a/frontend/src/concepts/pipelines/content/createRun/RunForm.tsx b/frontend/src/concepts/pipelines/content/createRun/RunForm.tsx
@@ -21,7 +21,12 @@ import useDebounceCallback from '~/utilities/useDebounceCallback';
 import { isArgoWorkflow } from '~/concepts/pipelines/content/tables/utils';
 import PipelineSection from './contentSections/PipelineSection';
 import { RunTypeSection } from './contentSections/RunTypeSection';
-import { CreateRunPageSections, RUN_NAME_CHARACTER_LIMIT, runPageSectionTitles } from './const';
+import {
+  CreateRunPageSections,
+  RUN_DESCRIPTION_CHARACTER_LIMIT,
+  RUN_NAME_CHARACTER_LIMIT,
+  runPageSectionTitles,
+} from './const';
 import { getInputDefinitionParams } from './utils';
 
 type RunFormProps = {
@@ -122,7 +127,8 @@ const RunForm: React.FC<RunFormProps> = ({ data, onValueChange, isCloned }) => {
           descriptionFieldId="run-description"
           data={data.nameDesc}
           setData={(nameDesc) => onValueChange('nameDesc', nameDesc)}
-          maxLength={RUN_NAME_CHARACTER_LIMIT}
+          maxLengthName={RUN_NAME_CHARACTER_LIMIT}
+          maxLengthDesc={RUN_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
@@ -36,3 +36,4 @@ export const runPageSectionTitles: Record<CreateRunPageSections, string> = {
 };
 
 export const RUN_NAME_CHARACTER_LIMIT = 255;
+export const RUN_DESCRIPTION_CHARACTER_LIMIT = 255;