External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-01-13 11:00:03 -03:30
Code Issues Packages Projects Releases Wiki Activity

Validate JT add and edit forms client-side

Browse Source 
- Use form generator to add new `helperText` field to show the
character limit next to the label in the UI
- Style helper text like the checkbox text
- Update both `add` and `edit` controllers to handle client-side
validation for the `labels` field.
This commit is contained in:
kialam 2018-08-03 11:12:35 -04:00
parent 21c364d14c
commit 7207d7caf4
5 changed files with 137 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
awx/ui/client/lib/components/input/_index.less
View File

@ -171,6 +171,19 @@
padding: 0;
}
.at-InputLabel--helpertext {
float: right;
font-size: 10px;
color: @default-stdout-txt;
text-transform: uppercase;
margin-top: 2px;
font-weight: 400;
}
.at-InputLabel--error {
color: @at-color-error;
}
.at-InputLabel-required {
color: @at-color-error;
font-weight: @at-font-weight-heading;

27
awx/ui/client/src/shared/form-generator.js
View File

@ -684,6 +684,10 @@ angular.module('FormGenerator', [GeneratorHelpers.name, 'Utilities', listGenerat
html += createCheckbox(options.checkbox);
}
if (options && options.helpertext) {
html += createHelpertext(options.helpertext);
}
if (field.labelAction) {
let action = field.labelAction;
let href = action.href || "";
@ -1041,6 +1045,17 @@ angular.module('FormGenerator', [GeneratorHelpers.name, 'Utilities', listGenerat
};
}
if (field.helperText) {
labelOptions.helpertext = {
id: `${this.form.name}_${fld}_sub_text`,
ngShow: field.helperText.ngShow,
ngModel: field.helperText.variable,
ngClass: field.helperText.ngClass,
classCondition: field.helperText.classCondition,
text: field.helperText.text
};
}
html += label(labelOptions);
html += "<div ";
@ -2021,5 +2036,17 @@ angular.module('FormGenerator', [GeneratorHelpers.name, 'Utilities', listGenerat
${options.text}
</label> `;
}
function createHelpertext (options) {
let ngModel = options.ngModel ? `ng-model="${options.ngModel}"` : '';
let ngShow = options.ngShow ? `ng-show="${options.ngShow}"` : '';
let ngClass = options.ngClass ? options.ngClass : '';
let classCondition = options.classCondition ? options.classCondition : '';
return `
<label class="at-InputLabel--helpertext" ng-class="!${classCondition} ? '${ngClass}' : ''" ${ngShow} id="${options.id}" ${ngModel}>
${options.text}
</label> `;
}
}
]);

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

@ -495,5 +495,51 @@
$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 `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';
// Detect when a new label is added
$(`#${jt_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.job_template_form.labels.$setValidity(`${jt_label_id}`, false);
$scope.job_template_labels_isValid = false;
}
});
// 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
as invalid, we set it back to valid */
if (text.length > maxCount && $scope.job_template_form.labels.$error) {
$scope.job_template_form.labels.$setValidity(`${jt_label_id}`, true);
$scope.job_template_labels_isValid = true;
}
});
};
handleLabelCount();
}
];

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

@ -588,19 +588,6 @@ export default
.then(function() {
Wait('stop');
saveCompleted();
})
.catch(err => {
// Handle any potential errors
let { data, status, config } = err;
const { url } = config;
// Handle edge case for LABELS endpoint
const labelName = "labels";
if (url.match(labelName)) {
data = { [labelName]: [data['name'][0]] };
}
ProcessErrors($scope, data, status, form, { hdr: 'Error!',
msg: 'Failed to update job template. PUT returned status: ' + status });
});
});
});
@ -717,5 +704,51 @@ export default
$scope.formCancel = function () {
$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
* 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';
// Detect when a new label is added
$(`#${jt_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.job_template_form.labels.$setValidity(`${jt_label_id}`, false);
$scope.job_template_labels_isValid = false;
}
});
// 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
as invalid, we set it back to valid */
if (text.length > maxCount && $scope.job_template_form.labels.$error) {
$scope.job_template_form.labels.$setValidity(`${jt_label_id}`, true);
$scope.job_template_labels_isValid = true;
}
});
};
handleLabelCount();
}
];

5
awx/ui/client/src/templates/job_templates/job-template.form.js
View File

@ -229,6 +229,11 @@ 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',
helperText: {
classCondition: 'job_template_labels_isValid === true',
ngClass: 'at-InputLabel--error',
text: i18n._('Max 512 Char'),
},
ngDisabled: '!(job_template_obj.summary_fields.user_capabilities.edit || canAddJobTemplate)'
},
custom_virtualenv: {