Merge pull request #2783 from mabashian/2774-workflow-labels

Propagate label length validation to workflow form

awx/ui/client/src/templates/job_templates/add-job-template/job-template-add.controller.js

@@ -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

awx/ui/client/src/templates/job_templates/edit-job-template/job-template-edit.controller.js

@@ -719,7 +719,6 @@ export default
                  * 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

awx/ui/client/src/templates/workflows.form.js

@@ -77,6 +77,10 @@ export default ['NotificationsList', 'i18n', function(NotificationsList, i18n) {
                     dataPlacement: 'right',
                     awPopOver: "<p>" + 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.") + "</p>",
                     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: {

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();
      }
     ];

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();
     }
 ];