diff --git a/awx/ui/client/src/templates/job_templates/add-job-template/job-template-add.controller.js b/awx/ui/client/src/templates/job_templates/add-job-template/job-template-add.controller.js index a51213251d..1ee7f244ea 100644 --- a/awx/ui/client/src/templates/job_templates/add-job-template/job-template-add.controller.js +++ b/awx/ui/client/src/templates/job_templates/add-job-template/job-template-add.controller.js @@ -499,11 +499,11 @@ let handleLabelCount = () => { /** * This block of code specifically handles the client-side validation of the `labels` field. - * Due to it's detached nature in relation to the other job template fields, we must - * validate this field client-side in order to avoid the edge case where a user can make a - * successful POST to the `job_templates` endpoint but however encounter a 200 error from + * Due to it's detached nature in relation to the other job template fields, we must + * validate this field client-side in order to avoid the edge case where a user can make a + * successful POST to the `job_templates` endpoint but however encounter a 200 error from * the `labels` endpoint due to a character limit. - * + * * We leverage two of select2's available events, `select` and `unselect`, to detect when the user * has either added or removed a label. From there, we set a flag and do simple string length * checks to make sure a label's chacacter count remains under 512. Otherwise, we disable the "Save" button @@ -528,7 +528,6 @@ // Detect when a label is removed $(`#${jt_label_id}`).on('select2:unselect', (e) => { - const maxCount = 512; const { text } = e.params.data; /* If the character count of a removed label is greater than 512 AND the field is currently marked diff --git a/awx/ui/client/src/templates/job_templates/edit-job-template/job-template-edit.controller.js b/awx/ui/client/src/templates/job_templates/edit-job-template/job-template-edit.controller.js index cf5977baa3..1b6b4a1c99 100644 --- a/awx/ui/client/src/templates/job_templates/edit-job-template/job-template-edit.controller.js +++ b/awx/ui/client/src/templates/job_templates/edit-job-template/job-template-edit.controller.js @@ -708,18 +708,17 @@ export default let handleLabelCount = () => { /** * This block of code specifically handles the client-side validation of the `labels` field. - * Due to it's detached nature in relation to the other job template fields, we must - * validate this field client-side in order to avoid the edge case where a user can make a - * successful POST to the `job_templates` endpoint but however encounter a 200 error from + * Due to it's detached nature in relation to the other job template fields, we must + * validate this field client-side in order to avoid the edge case where a user can make a + * successful POST to the `job_templates` endpoint but however encounter a 200 error from * the `labels` endpoint due to a character limit. - * + * * We leverage two of select2's available events, `select` and `unselect`, to detect when the user * has either added or removed a label. From there, we set a flag and do simple string length * checks to make sure a label's chacacter count remains under 512. Otherwise, we disable the "Save" button * by invalidating the field and inform the user of the error. */ - $scope.job_template_labels_isValid = true; const maxCount = 512; const jt_label_id = 'job_template_labels'; @@ -737,7 +736,6 @@ export default // Detect when a label is removed $(`#${jt_label_id}`).on('select2:unselect', (e) => { - const maxCount = 512; const { text } = e.params.data; /* If the character count of a removed label is greater than 512 AND the field is currently marked diff --git a/awx/ui/client/src/templates/workflows.form.js b/awx/ui/client/src/templates/workflows.form.js index 104447bae4..50a3ee867c 100644 --- a/awx/ui/client/src/templates/workflows.form.js +++ b/awx/ui/client/src/templates/workflows.form.js @@ -77,6 +77,10 @@ export default ['NotificationsList', 'i18n', function(NotificationsList, i18n) { dataPlacement: 'right', awPopOver: "
" + i18n._("Optional labels that describe this job template, such as 'dev' or 'test'. Labels can be used to group and filter job templates and completed jobs.") + "
", dataContainer: 'body', + onError: { + ngShow: 'workflow_job_template_labels_isValid !== true', + text: i18n._('Max 512 characters per label.'), + }, ngDisabled: '!(workflow_job_template_obj.summary_fields.user_capabilities.edit || canAddWorkflowJobTemplate)' }, variables: { diff --git a/awx/ui/client/src/templates/workflows/add-workflow/workflow-add.controller.js b/awx/ui/client/src/templates/workflows/add-workflow/workflow-add.controller.js index 8321e839f9..84bfa0186d 100644 --- a/awx/ui/client/src/templates/workflows/add-workflow/workflow-add.controller.js +++ b/awx/ui/client/src/templates/workflows/add-workflow/workflow-add.controller.js @@ -178,5 +178,45 @@ export default [ $scope.formCancel = function () { $state.transitionTo('templates'); }; + + let handleLabelCount = () => { + /** + * This block of code specifically handles the client-side validation of the `labels` field. + * Due to it's detached nature in relation to the other job template fields, we must + * validate this field client-side in order to avoid the edge case where a user can make a + * successful POST to the `workflow_job_templates` endpoint but however encounter a 200 error from + * the `labels` endpoint due to a character limit. + * + * We leverage two of select2's available events, `select` and `unselect`, to detect when the user + * has either added or removed a label. From there, we set a flag and do simple string length + * checks to make sure a label's chacacter count remains under 512. Otherwise, we disable the "Save" button + * by invalidating the field and inform the user of the error. + */ + + $scope.workflow_job_template_labels_isValid = true; + const maxCount = 512; + const wfjt_label_id = 'workflow_job_template_labels'; + // Detect when a new label is added + $(`#${wfjt_label_id}`).on('select2:select', (e) => { + const { text } = e.params.data; + // If the character count of an added label is greater than 512, we set `labels` field as invalid + if (text.length > maxCount) { + $scope.workflow_job_template_form.labels.$setValidity(`${wfjt_label_id}`, false); + $scope.workflow_job_template_labels_isValid = false; + } + }); + // Detect when a label is removed + $(`#${wfjt_label_id}`).on('select2:unselect', (e) => { + const { text } = e.params.data; + /* If the character count of a removed label is greater than 512 AND the field is currently marked + as invalid, we set it back to valid */ + if (text.length > maxCount && $scope.workflow_job_template_form.labels.$error) { + $scope.workflow_job_template_form.labels.$setValidity(`${wfjt_label_id}`, true); + $scope.workflow_job_template_labels_isValid = true; + } + }); + }; + + handleLabelCount(); } ]; diff --git a/awx/ui/client/src/templates/workflows/edit-workflow/workflow-edit.controller.js b/awx/ui/client/src/templates/workflows/edit-workflow/workflow-edit.controller.js index 506ca9ba62..dc6a35d402 100644 --- a/awx/ui/client/src/templates/workflows/edit-workflow/workflow-edit.controller.js +++ b/awx/ui/client/src/templates/workflows/edit-workflow/workflow-edit.controller.js @@ -322,5 +322,45 @@ export default [ $scope.survey_exists = true; $scope.invalid_survey = false; }); + + let handleLabelCount = () => { + /** + * This block of code specifically handles the client-side validation of the `labels` field. + * Due to it's detached nature in relation to the other job template fields, we must + * validate this field client-side in order to avoid the edge case where a user can make a + * successful POST to the `workflow_job_templates` endpoint but however encounter a 200 error from + * the `labels` endpoint due to a character limit. + * + * We leverage two of select2's available events, `select` and `unselect`, to detect when the user + * has either added or removed a label. From there, we set a flag and do simple string length + * checks to make sure a label's chacacter count remains under 512. Otherwise, we disable the "Save" button + * by invalidating the field and inform the user of the error. + */ + + $scope.workflow_job_template_labels_isValid = true; + const maxCount = 512; + const wfjt_label_id = 'workflow_job_template_labels'; + // Detect when a new label is added + $(`#${wfjt_label_id}`).on('select2:select', (e) => { + const { text } = e.params.data; + // If the character count of an added label is greater than 512, we set `labels` field as invalid + if (text.length > maxCount) { + $scope.workflow_job_template_form.labels.$setValidity(`${wfjt_label_id}`, false); + $scope.workflow_job_template_labels_isValid = false; + } + }); + // Detect when a label is removed + $(`#${wfjt_label_id}`).on('select2:unselect', (e) => { + const { text } = e.params.data; + /* If the character count of a removed label is greater than 512 AND the field is currently marked + as invalid, we set it back to valid */ + if (text.length > maxCount && $scope.workflow_job_template_form.labels.$error) { + $scope.workflow_job_template_form.labels.$setValidity(`${wfjt_label_id}`, true); + $scope.workflow_job_template_labels_isValid = true; + } + }); + }; + + handleLabelCount(); } ];