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

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' : ''
                             },
                             {
@@ -504,9 +510,8 @@ function($, Backbone, _, gettext, moment, ViewUtils, HtmlUtils, StringUtils, Tra
             // show some error to user
             try {
                 errorMessage = $.parseJSON(data).error;
-            } catch (e) {}  // eslint-disable-line no-empty
-            errorMessage = errorMessage || gettext('Error saving data');
-            this.renderResponseStatus(errorMessage, 'error');
+            } catch (e) {}   // eslint-disable-line no-empty
+            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);
-                    }
+                    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);
-                    }
+                    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);
-                }
+                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'>