add character limit for pipeline run name

opendatahub-io · Jun 11, 2024 · 51b8526 · 51b8526
1 parent 2b19ddb
commit 51b8526
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 1 deletion.
diff --git a/frontend/src/concepts/k8s/NameDescriptionField.tsx b/frontend/src/concepts/k8s/NameDescriptionField.tsx
@@ -22,6 +22,7 @@ type NameDescriptionFieldProps = {
   autoFocusName?: boolean;
   showK8sName?: boolean;
   disableK8sName?: boolean;
+  maxLength?: number;
 };
 
 const NameDescriptionField: React.FC<NameDescriptionFieldProps> = ({
@@ -32,6 +33,7 @@ const NameDescriptionField: React.FC<NameDescriptionFieldProps> = ({
   autoFocusName,
   showK8sName,
   disableK8sName,
+  maxLength,
 }) => {
   const autoSelectNameRef = React.useRef<HTMLInputElement | null>(null);
 
@@ -61,7 +63,13 @@ const NameDescriptionField: React.FC<NameDescriptionFieldProps> = ({
             name={nameFieldId}
             value={data.name}
             onChange={(e, name) => setData({ ...data, name })}
+            maxLength={maxLength}
           />
+          {maxLength && (
+            <HelperText>
+              <HelperTextItem>{`Cannot exceed ${maxLength} characters`}</HelperTextItem>
+            </HelperText>
+          )}
         </FormGroup>
       </StackItem>
       {showK8sName && (

diff --git a/frontend/src/concepts/pipelines/content/createRun/RunForm.tsx b/frontend/src/concepts/pipelines/content/createRun/RunForm.tsx
@@ -12,7 +12,7 @@ import { PipelineRunType } from '~/pages/pipelines/global/runs';
 import ProjectAndExperimentSection from '~/concepts/pipelines/content/createRun/contentSections/ProjectAndExperimentSection';
 import PipelineSection from './contentSections/PipelineSection';
 import { RunTypeSection } from './contentSections/RunTypeSection';
-import { CreateRunPageSections, runPageSectionTitles } from './const';
+import { CreateRunPageSections, MAX_CHARACTER_LIMIT, runPageSectionTitles } from './const';
 import { getInputDefinitionParams } from './utils';
 
 type RunFormProps = {
@@ -72,6 +72,7 @@ const RunForm: React.FC<RunFormProps> = ({ data, runType, onValueChange }) => {
           descriptionFieldId="run-description"
           data={data.nameDesc}
           setData={(nameDesc) => onValueChange('nameDesc', nameDesc)}
+          maxLength={MAX_CHARACTER_LIMIT}
         />
 
         {isSchedule && data.runType.type === RunTypeOption.SCHEDULED && (

diff --git a/frontend/src/concepts/pipelines/content/createRun/const.ts b/frontend/src/concepts/pipelines/content/createRun/const.ts
@@ -34,3 +34,5 @@ export const runPageSectionTitles: Record<CreateRunPageSections, string> = {
   [CreateRunPageSections.PIPELINE]: 'Pipeline',
   [CreateRunPageSections.PARAMS]: 'Parameters',
 };
+
+export const MAX_CHARACTER_LIMIT = 255;