Merge pull request #16911 from edx/waheed/LEARNER-3239-add-save-button-with-profile-visibility

Add save button with profile visibility dropdown.

common/test/acceptance/pages/lms/learner_profile.py

@@ -144,8 +144,9 @@ class LearnerProfilePage(FieldsMixin, PageObject):
 
         if privacy != self.privacy:
             query = self.q(css=PROFILE_VISIBILITY_INPUT)
-            select_option_by_value(query, privacy, focus_out=True)
+            select_option_by_value(query, privacy)
             EmptyPromise(lambda: privacy == self.privacy, 'Privacy is set to {}'.format(privacy)).fulfill()
+            self.q(css='.btn-change-privacy').first.click()
             self.wait_for_ajax()
 
             if privacy == 'all_users':

lms/static/sass/features/_learner-profile.scss

@@ -282,6 +282,15 @@
           max-width: calc(100% - 40px);
           min-width: auto;
         }
+
+        .btn-change-privacy {
+          @extend %btn-primary-blue;
+
+          padding-top: 4px;
+          padding-bottom: 5px;
+          background-image: none;
+          box-shadow: none;
+        }
       }
 
       .u-field-title {

lms/templates/fields/field_dropdown.underscore

@@ -40,6 +40,12 @@
     <% } %>
 </span>
 
+<% if (editable != 'never' && id === 'account_privacy') { %>
+    <button class="btn btn-change-privacy hidden">
+        <span><%- gettext('Save') %></span>
+    </button>
+<% } %>
+
 <span class="u-field-message" id="u-field-message-<%- id %>">
     <span class="u-field-message-notification" aria-live="polite"></span>
     <span class="u-field-message-help" id="u-field-help-message-<%- id %>"><%- message %></span>

openedx/features/learner_profile/static/learner_profile/js/views/learner_profile_fields.js

@@ -18,6 +18,11 @@
 
         LearnerProfileFieldViews.AccountPrivacyFieldView = FieldViews.DropdownFieldView.extend({
 
+            events: {
+                'click button.btn-change-privacy': 'finishEditing',
+                'change select': 'showSaveButton'
+            },
+
             render: function() {
                 this._super();
                 this.showNotificationMessage();
@@ -57,6 +62,10 @@
                     this.$('.u-field-value select').val('private');
                     this.disableField(true);
                 }
+            },
+
+            showSaveButton: function() {
+                $('.btn-change-privacy').removeClass('hidden');
             }
         });