1
0
mirror of https://github.com/ansible/awx.git synced 2024-10-31 15:21:13 +03:00

Propagate label length validation to workflow form

This commit is contained in:
mabashian 2018-08-07 13:53:12 -04:00
parent d7a9d76d25
commit f548e36ad7
5 changed files with 150 additions and 82 deletions

View File

@ -496,7 +496,6 @@
$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
@ -510,7 +509,6 @@
* 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';
@ -538,8 +536,5 @@
$scope.job_template_labels_isValid = true;
}
});
};
handleLabelCount();
}
];

View File

@ -705,7 +705,6 @@ export default
$state.go('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
@ -719,7 +718,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';
@ -747,8 +745,5 @@ export default
$scope.job_template_labels_isValid = true;
}
});
};
handleLabelCount();
}
];

View File

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

View File

@ -178,5 +178,42 @@ export default [
$scope.formCancel = function () {
$state.transitionTo('templates');
};
/**
* 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
* 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 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
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;
}
});
}
];

View File

@ -322,5 +322,42 @@ export default [
$scope.survey_exists = true;
$scope.invalid_survey = false;
});
/**
* 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
* 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 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
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;
}
});
}
];