Skip to content

E
edx-platform
Commit e89c3dd3 by Mushtaq Ali
Options

Add cancel button, handle errors, change label texts - EDUCATOR-1584

parent 2310614b
Showing with 109 additions and 43 deletions
cms/static/js/spec/views/course_video_settings_spec.js
......@@ -24,6 +24,7 @@ define(
submitOrganizationCredentials,
transcriptPreferencesUrl = '/transcript_preferences/course-v1:edX+DemoX+Demo_Course',
transcriptCredentialsHandlerUrl = '/transcript_credentials/course-v1:edX+DemoX+Demo_Course',
INTERNAL_SERVER_ERROR = 'An error has occurred. Wait a few minutes, and then try again.',
activeTranscriptPreferences = {
provider: 'Cielo24',
cielo24_fidelity: 'PROFESSIONAL',
......@@ -93,7 +94,7 @@ define(
none: {
key: 'none',
value: '',
displayName: 'N/A'
displayName: 'None'
},
Cielo24: {
key: 'Cielo24',
......@@ -158,7 +159,7 @@ define(
verifyProviderList = function(selectedProvider) {
var $transcriptProvidersListEl = $courseVideoSettingsEl.find('.transcript-provider-wrapper .transcript-provider-group'); // eslint-disable-line max-len
// Check N/A provider is selected.
// Check None provider is selected.
expect($transcriptProvidersListEl.find('input[type=radio]:checked').val()).toEqual(selectedProvider.value); // eslint-disable-line max-len
_.each(providers, function(provider, key) {
$transcriptProvidersListEl.find('label[for=transcript-provider-' + key + ']').val(provider.displayName); // eslint-disable-line max-len
......@@ -270,7 +271,7 @@ define(
AjaxHelpers.respondWithJson(requests, {});
};
submitOrganizationCredentials = function(fieldValues, errorMessage) {
submitOrganizationCredentials = function(fieldValues, statusCode, errorMessage) {
var requests = AjaxHelpers.requests(this);
// Click change button to render organization credentials view.
$courseVideoSettingsEl.find('.action-change-provider').click();
......@@ -295,11 +296,12 @@ define(
)
);
if (errorMessage) {
// Send error response.
AjaxHelpers.respondWithError(requests, 400, {
error: errorMessage
});
if (statusCode === 400) {
// Send bad request error response.
AjaxHelpers.respondWithError(requests, statusCode, {error: errorMessage});
} else if (statusCode === 500) {
// Send internal server error response.
AjaxHelpers.respondWithError(requests, statusCode);
} else {
// Send empty response.
AjaxHelpers.respondWithJson(requests, {});
......@@ -359,6 +361,40 @@ define(
verifyTranscriptPreferences();
});
it('resets to active preferences when clicked on cancel', function() {
var selectedProvider = '3PlayMedia';
renderCourseVideoSettingsView(
activeTranscriptPreferences,
transcriptionPlans,
transcriptOrganizationCredentials
);
// First check preferance are selected correctly in HTML.
verifyTranscriptPreferences();
expect(courseVideoSettingsView.selectedProvider, providers.Cielo24);
// Now change preferences.
// Select provider.
changeProvider(selectedProvider);
expect(courseVideoSettingsView.selectedProvider, selectedProvider);
// Select turnaround.
selectPreference(
'.transcript-turnaround',
transcriptionPlans[selectedProvider].turnaround.default
);
expect(
courseVideoSettingsView.selectedTurnaroundPlan,
transcriptionPlans[selectedProvider].turnaround.default
);
// Now click cancel button and verify active preferences are shown.
$courseVideoSettingsEl.find('.action-cancel-course-video-settings').click();
verifyTranscriptPreferences();
expect(courseVideoSettingsView.selectedProvider, providers.Cielo24);
});
it('shows video source language directly in case of 3Play provider', function() {
var sourceLanguages,
selectedProvider = '3PlayMedia';
......@@ -505,12 +541,12 @@ define(
});
it('removes transcript settings on update settings button click when no provider is selected', function() {
// Reset to N/A provider
// Reset to None provider
resetProvider();
verifyProviderList(providers.none);
// Verify that success message is shown.
verifyMessage('success', 'Settings updated');
verifyMessage('success', 'Automatic transcripts are disabled.');
});
it('shows error message if server sends error', function() {
......@@ -574,10 +610,10 @@ define(
expect($courseVideoSettingsEl.find('.transcript-provider-wrapper .transcript-provider-group')).not.toExist(); // eslint-disable-line max-len
});
it('does not show transcript preferences or organization credentials if N/A provider is saved', function() {
it('does not show transcript preferences or organization credentials if None provider is saved', function() { // eslint-disable-line max-len
renderCourseVideoSettingsView(null, transcriptionPlans);
// Check N/A provider
// Check None provider
resetProvider();
verifyProviderList(providers.none);
......@@ -585,10 +621,10 @@ define(
expect($courseVideoSettingsEl.find('.transcript-provider-wrapper .selected-transcript-provider')).not.toExist(); // eslint-disable-line max-len
});
it('does not show transcript preferences or organization credentials if N/A provider is checked', function() { // eslint-disable-line max-len
it('does not show transcript preferences or organization credentials if None provider is checked', function() { // eslint-disable-line max-len
renderCourseVideoSettingsView(null, transcriptionPlans);
// Check N/A provider
// Check None provider
resetProvider();
verifyProviderList(providers.none);
......@@ -677,8 +713,8 @@ define(
expect($courseVideoSettingsEl.find('.transcription-account-details.warning')).toExist();
// Verify message
expect($courseVideoSettingsEl.find('.transcription-account-details').html()).toEqual(
'<span>By entering the set of credntials below, ' +
'you will be overwriting your organization\'s credentials.</span>'
'<span>This action updates the ' + courseVideoSettingsView.selectedProvider +
' information for your entire organization.</span>'
);
});
......@@ -691,8 +727,7 @@ define(
expect($courseVideoSettingsEl.find('.transcription-account-details.warning')).not.toExist();
// Initial detail message is shown instead.
expect($courseVideoSettingsEl.find('.transcription-account-details').html()).toEqual(
'<span>Please enter your organization\'s account information. ' +
'Remember that all courses in your organization will use this account.</span>'
'<span>Enter the account information for your organization.</span>'
);
});
......@@ -738,16 +773,28 @@ define(
verifyCredentialsSaved();
});
it('shows error message on saving organization credentials if server sends bad request error', function() {
verifyProviderSelectedView();
submitOrganizationCredentials({
api_key: 'api-key',
username: 'username'
}, 400, 'Error saving credentials.');
// Verify that bad request error message is shown.
verifyMessage('error', 'Error saving credentials.');
});
it('shows error message on saving organization credentials if server sends error', function() {
verifyProviderSelectedView();
submitOrganizationCredentials({
api_key: 'api-key',
username: 'username'
}, 'Error saving credentials');
}, 500);
// Verify that error message is shown.
verifyMessage('error', 'Error saving credentials');
// Verify that server error message is shown.
verifyMessage('error', INTERNAL_SERVER_ERROR);
});
// TODO: Add more tests like clicking on add language, remove and their scenarios and some other tests
......
cms/static/js/views/course_video_settings.js
......@@ -21,7 +21,8 @@ function($, Backbone, _, gettext, moment, ViewUtils, HtmlUtils, StringUtils, Tra
var CourseVideoSettingsView,
CIELO24 = 'Cielo24',
THREE_PLAY_MEDIA = '3PlayMedia';
THREE_PLAY_MEDIA = '3PlayMedia',
INTERNAL_SERVER_ERROR_MESSAGE = gettext('An error has occurred. Wait a few minutes, and then try again.');
CourseVideoSettingsView = Backbone.View.extend({
el: 'div.video-transcript-settings-wrapper',
......@@ -36,6 +37,7 @@ function($, Backbone, _, gettext, moment, ViewUtils, HtmlUtils, StringUtils, Tra
'click .action-change-provider': 'renderOrganizationCredentials',
'click .action-update-org-credentials': 'updateOrganizationCredentials',
'click .action-update-course-video-settings': 'updateCourseVideoSettings',
'click .action-cancel-course-video-settings': 'discardChanges',
'click .action-close-course-video-settings': 'closeCourseVideoSettings'
},
......@@ -177,13 +179,17 @@ function($, Backbone, _, gettext, moment, ViewUtils, HtmlUtils, StringUtils, Tra
},
providerSelected: function(event) {
this.resetPlanData();
this.selectedProvider = event.target.value;
// Re-render view
this.reRenderView();
},
reRenderView: function() {
var $courseVideoSettingsContentEl = this.$el.find('.course-video-settings-content'),
dateModified = this.activeTranscriptionPlan ?
moment.utc(this.activeTranscriptionPlan.modified).format('ll') : '';
this.resetPlanData();
this.selectedProvider = event.target.value;
if (!this.selectedProvider) {
// Hide organization credentials and transcript preferences views
$courseVideoSettingsContentEl.hide();
......@@ -254,7 +260,7 @@ function($, Backbone, _, gettext, moment, ViewUtils, HtmlUtils, StringUtils, Tra
{
key: 'none',
value: '',
name: gettext('N/A'),
name: gettext('None'),
checked: this.selectedProvider === '' ? 'checked' : ''
},
{
......@@ -505,8 +511,7 @@ function($, Backbone, _, gettext, moment, ViewUtils, HtmlUtils, StringUtils, Tra
try {
errorMessage = $.parseJSON(data).error;
} catch (e) {} // eslint-disable-line no-empty
errorMessage = errorMessage || gettext('Error saving data');
this.renderResponseStatus(errorMessage, 'error');
this.renderResponseStatus(errorMessage || INTERNAL_SERVER_ERROR_MESSAGE, 'error');
},
renderResponseStatus: function(responseText, type) {
......@@ -663,20 +668,20 @@ function($, Backbone, _, gettext, moment, ViewUtils, HtmlUtils, StringUtils, Tra
responseTranscriptPreferences = data ? data.transcript_preferences : null;
self.updateSuccessResponseStatus(responseTranscriptPreferences);
}).fail(function(jqXHR) {
if (jqXHR.responseText) {
self.updateFailResponseStatus(jqXHR.responseText);
}
});
} else {
$.ajax({
type: 'DELETE',
url: self.transcriptHandlerUrl
}).done(function() {
self.updateSuccessResponseStatus(null);
responseTranscriptPreferences = null;
self.updateSuccessResponseStatus(
responseTranscriptPreferences,
gettext('Automatic transcripts are disabled.')
);
}).fail(function(jqXHR) {
if (jqXHR.responseText) {
self.updateFailResponseStatus(jqXHR.responseText);
}
});
}
},
......@@ -716,9 +721,7 @@ function($, Backbone, _, gettext, moment, ViewUtils, HtmlUtils, StringUtils, Tra
)
);
}).fail(function(jqXHR) {
if (jqXHR.responseText) {
self.updateFailResponseStatus(jqXHR.responseText);
}
});
},
......@@ -737,6 +740,13 @@ function($, Backbone, _, gettext, moment, ViewUtils, HtmlUtils, StringUtils, Tra
}
},
discardChanges: function() {
this.setActiveTranscriptPlanData();
// Re-render views
this.renderProviders();
this.reRenderView();
},
renderOrganizationCredentials: function() {
var $courseVideoSettingsContentEl = this.$el.find('.course-video-settings-content');
......
cms/static/sass/views/_video-upload.scss
......@@ -189,15 +189,16 @@
padding: ($baseline/2);
}
.action-update-org-credentials {
margin-top: ($baseline*1.6);
.action-cancel-course-video-settings {
@include margin-right($baseline/2);
}
.course-video-settings-footer {
margin-top: ($baseline*1.6);
.last-updated-text {
@include font-size(12);
@include margin-left($baseline/4);
display: block;
margin-top: ($baseline/2);
}
}
......
cms/templates/js/course-video-settings-update-org-credentials-footer.underscore
<button class='button-link action-cancel-course-video-settings' aria-describedby='cancel-button-text'>
<%- gettext('Reset') %>
<span id='cancel-button-text' class='sr'><%-gettext('Press reset to discard your changes.') %></span>
</button>
<button class='button action-update-org-credentials' aria-describedby='update-org-credentials-button-text'>
<%- gettext('Update Organization Credentials') %>
<span id='update-org-credentials-button-text' class='sr'><%-gettext('Press update organization credentials to update organization credentials') %></span>
<%- gettext('Update Settings') %>
<span id='update-org-credentials-button-text' class='sr'><%-gettext('Press update settings to update the information for your organization.') %></span>
</button>
cms/templates/js/course-video-settings-update-settings-footer.underscore
<button class='button-link action-cancel-course-video-settings' aria-describedby='cancel-button-text'>
<%- gettext('Reset') %>
<span id='cancel-button-text' class='sr'><%-gettext('Press reset to discard changes.') %></span>
</button>
<button class="button action-update-course-video-settings" aria-describedby='update-button-text'>
<%- gettext('Update Settings') %>
<span id='update-button-text' class='sr'><%-gettext('Press update settings to update course video settings') %></span>
......
cms/templates/js/course-video-transcript-provider-empty.underscore
<label class='transcript-preferance-label' for='transcript-provider'><%- gettext('Transcript Provider') %></label>
<label class='transcript-preferance-label' for='transcript-provider'><%- gettext('Automated Transcripts') %></label>
<div class="transcript-provider-group" id="transcript-provider">
<% for (var i = 0; i < providers.length; i++) { %>
<input type='radio' id='transcript-provider-<%- providers[i].key %>' name='transcript-provider' value='<%- providers[i].value %>' <%- providers[i].checked %>>
......
cms/templates/js/transcript-organization-credentials.underscore
......@@ -2,9 +2,9 @@
<div class='organization-credentials-content'>
<label class='transcript-preferance-label selected-provider-account'><%- selectedProvider.name %> <%- gettext('Account') %></label>
<% if (organizationCredentialsExists) { %>
<div class='transcription-account-details warning'><span><%- gettext("By entering the set of credntials below, you will be overwriting your organization's credentials.") %></span></div>
<div class='transcription-account-details warning'><span><%- gettext("This action updates the {provider} information for your entire organization.").replace('{provider}', selectedProvider.name) %></span></div>
<% } else { %>
<div class='transcription-account-details'><span><%- gettext("Please enter your organization's account information. Remember that all courses in your organization will use this account.") %></span></div>
<div class='transcription-account-details'><span><%- gettext("Enter the account information for your organization.") %></span></div>
<% } %>
<div class='transcript-preferance-wrapper org-credentials-wrapper <%- selectedProvider.key %>-api-key-wrapper'>
<label class='transcript-preferance-label' for='<%- selectedProvider.key %>-api-key'>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment