Add latest changes from gitlab-org/gitlab@13-9-stable-eev13.9.0-rc42

7 files changed, 133 insertions, 30 deletions

diff --git a/app/assets/javascripts/profile/account/components/delete_account_modal.vue b/app/assets/javascripts/profile/account/components/delete_account_modal.vue
index f06dc72d365..2336cb18cb5 100644
--- a/app/assets/javascripts/profile/account/components/delete_account_modal.vue
+++ b/app/assets/javascripts/profile/account/components/delete_account_modal.vue
@@ -1,8 +1,8 @@
 <script>
 /* eslint-disable vue/no-v-html */
 import { GlModal } from '@gitlab/ui';
-import { __, s__, sprintf } from '~/locale';
 import csrf from '~/lib/utils/csrf';
+import { __, s__, sprintf } from '~/locale';
 
 export default {
   components: {
diff --git a/app/assets/javascripts/profile/account/components/update_username.vue b/app/assets/javascripts/profile/account/components/update_username.vue
index 869fdccc800..c5478aa0226 100644
--- a/app/assets/javascripts/profile/account/components/update_username.vue
+++ b/app/assets/javascripts/profile/account/components/update_username.vue
@@ -1,9 +1,9 @@
 <script>
-import { escape } from 'lodash';
 import { GlSafeHtmlDirective as SafeHtml, GlButton, GlModal, GlModalDirective } from '@gitlab/ui';
+import { escape } from 'lodash';
+import { deprecatedCreateFlash as Flash } from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import { s__, sprintf } from '~/locale';
-import { deprecatedCreateFlash as Flash } from '~/flash';
 
 export default {
   components: {
diff --git a/app/assets/javascripts/profile/account/index.js b/app/assets/javascripts/profile/account/index.js
index 5e89002b3bc..00fe0bcf89b 100644
--- a/app/assets/javascripts/profile/account/index.js
+++ b/app/assets/javascripts/profile/account/index.js
@@ -1,7 +1,8 @@
 import Vue from 'vue';
+import { BV_SHOW_MODAL } from '~/lib/utils/constants';
 import Translate from '~/vue_shared/translate';
-import UpdateUsername from './components/update_username.vue';
 import deleteAccountModal from './components/delete_account_modal.vue';
+import UpdateUsername from './components/update_username.vue';
 
 export default () => {
   Vue.use(Translate);
@@ -31,7 +32,7 @@ export default () => {
     mounted() {
       deleteAccountButton.classList.remove('disabled');
       deleteAccountButton.addEventListener('click', () => {
-        this.$root.$emit('bv::show::modal', 'delete-account-modal', '#delete-account-button');
+        this.$root.$emit(BV_SHOW_MODAL, 'delete-account-modal', '#delete-account-button');
       });
     },
     render(createElement) {
diff --git a/app/assets/javascripts/profile/preferences/components/profile_preferences.vue b/app/assets/javascripts/profile/preferences/components/profile_preferences.vue
index 8b2006b7c5b..184ee3810ac 100644
--- a/app/assets/javascripts/profile/preferences/components/profile_preferences.vue
+++ b/app/assets/javascripts/profile/preferences/components/profile_preferences.vue
@@ -1,31 +1,92 @@
 <script>
-import { s__ } from '~/locale';
+import { GlButton } from '@gitlab/ui';
+import createFlash, { FLASH_TYPES } from '~/flash';
+import { INTEGRATION_VIEW_CONFIGS, i18n } from '../constants';
 import IntegrationView from './integration_view.vue';
 
-const INTEGRATION_VIEW_CONFIGS = {
-  sourcegraph: {
-    title: s__('ProfilePreferences|Sourcegraph'),
-    label: s__('ProfilePreferences|Enable integrated code intelligence on code views'),
-    formName: 'sourcegraph_enabled',
-  },
-  gitpod: {
-    title: s__('ProfilePreferences|Gitpod'),
-    label: s__('ProfilePreferences|Enable Gitpod integration'),
-    formName: 'gitpod_enabled',
-  },
-};
+function updateClasses(bodyClasses = '', applicationTheme, layout) {
+  // Remove body class for any previous theme, re-add current one
+  document.body.classList.remove(...bodyClasses.split(' '));
+  document.body.classList.add(applicationTheme);
+
+  // Toggle container-fluid class
+  if (layout === 'fluid') {
+    document
+      .querySelector('.content-wrapper .container-fluid')
+      .classList.remove('container-limited');
+  } else {
+    document.querySelector('.content-wrapper .container-fluid').classList.add('container-limited');
+  }
+}
 
 export default {
   name: 'ProfilePreferences',
   components: {
     IntegrationView,
+    GlButton,
   },
   inject: {
     integrationViews: {
       default: [],
     },
+    themes: {
+      default: [],
+    },
+    userFields: {
+      default: {},
+    },
+    formEl: 'formEl',
+    profilePreferencesPath: 'profilePreferencesPath',
+    bodyClasses: 'bodyClasses',
   },
   integrationViewConfigs: INTEGRATION_VIEW_CONFIGS,
+  i18n,
+  data() {
+    return {
+      isSubmitEnabled: true,
+    };
+  },
+  computed: {
+    applicationThemes() {
+      return this.themes.reduce((themes, theme) => {
+        const { id, ...rest } = theme;
+        return { ...themes, [id]: rest };
+      }, {});
+    },
+  },
+  created() {
+    this.formEl.addEventListener('ajax:beforeSend', this.handleLoading);
+    this.formEl.addEventListener('ajax:success', this.handleSuccess);
+    this.formEl.addEventListener('ajax:error', this.handleError);
+  },
+  beforeDestroy() {
+    this.formEl.removeEventListener('ajax:beforeSend', this.handleLoading);
+    this.formEl.removeEventListener('ajax:success', this.handleSuccess);
+    this.formEl.removeEventListener('ajax:error', this.handleError);
+  },
+  methods: {
+    handleLoading() {
+      this.isSubmitEnabled = false;
+    },
+    handleSuccess(customEvent) {
+      const formData = new FormData(this.formEl);
+      updateClasses(
+        this.bodyClasses,
+        this.applicationThemes[formData.get('user[theme_id]')].css_class,
+        this.selectedLayout,
+      );
+      const { message = this.$options.i18n.defaultSuccess, type = FLASH_TYPES.NOTICE } =
+        customEvent?.detail?.[0] || {};
+      createFlash({ message, type });
+      this.isSubmitEnabled = true;
+    },
+    handleError(customEvent) {
+      const { message = this.$options.i18n.defaultError, type = FLASH_TYPES.ALERT } =
+        customEvent?.detail?.[0] || {};
+      createFlash({ message, type });
+      this.isSubmitEnabled = true;
+    },
+  },
 };
 </script>
 
@@ -36,10 +97,10 @@ export default {
     </div>
     <div v-if="integrationViews.length" class="col-lg-4 profile-settings-sidebar">
       <h4 class="gl-mt-0" data-testid="profile-preferences-integrations-heading">
-        {{ s__('ProfilePreferences|Integrations') }}
+        {{ $options.i18n.integrations }}
       </h4>
       <p>
-        {{ s__('ProfilePreferences|Customize integrations with third party services.') }}
+        {{ $options.i18n.integrationsDescription }}
       </p>
     </div>
     <div v-if="integrationViews.length" class="col-lg-8">
@@ -52,5 +113,19 @@ export default {
         :config="$options.integrationViewConfigs[view.name]"
       />
     </div>
+    <div class="col-lg-4 profile-settings-sidebar"></div>
+    <div class="col-lg-8">
+      <div class="form-group">
+        <gl-button
+          variant="success"
+          name="commit"
+          type="submit"
+          :disabled="!isSubmitEnabled"
+          :value="$options.i18n.saveChanges"
+        >
+          {{ $options.i18n.saveChanges }}
+        </gl-button>
+      </div>
+    </div>
   </div>
 </template>
diff --git a/app/assets/javascripts/profile/preferences/constants.js b/app/assets/javascripts/profile/preferences/constants.js
new file mode 100644
index 00000000000..ea8464ba065
--- /dev/null
+++ b/app/assets/javascripts/profile/preferences/constants.js
@@ -0,0 +1,22 @@
+import { s__, __ } from '~/locale';
+
+export const INTEGRATION_VIEW_CONFIGS = {
+  sourcegraph: {
+    title: s__('Preferences|Sourcegraph'),
+    label: s__('Preferences|Enable integrated code intelligence on code views'),
+    formName: 'sourcegraph_enabled',
+  },
+  gitpod: {
+    title: s__('Preferences|Gitpod'),
+    label: s__('Preferences|Enable Gitpod integration'),
+    formName: 'gitpod_enabled',
+  },
+};
+
+export const i18n = {
+  saveChanges: __('Save changes'),
+  defaultSuccess: __('Preferences saved.'),
+  defaultError: s__('Preferences|Failed to save preferences.'),
+  integrations: s__('Preferences|Integrations'),
+  integrationsDescription: s__('Preferences|Customize integrations with third party services.'),
+};
diff --git a/app/assets/javascripts/profile/preferences/profile_preferences_bundle.js b/app/assets/javascripts/profile/preferences/profile_preferences_bundle.js
index 744e0174a4e..6520e68d41c 100644
--- a/app/assets/javascripts/profile/preferences/profile_preferences_bundle.js
+++ b/app/assets/javascripts/profile/preferences/profile_preferences_bundle.js
@@ -3,16 +3,20 @@ import ProfilePreferences from './components/profile_preferences.vue';
 
 export default () => {
   const el = document.querySelector('#js-profile-preferences-app');
-  const shouldParse = ['integrationViews', 'userFields'];
+  const formEl = document.querySelector('#profile-preferences-form');
+  const shouldParse = ['integrationViews', 'themes', 'userFields'];
 
-  const provide = Object.keys(el.dataset).reduce((memo, key) => {
-    let value = el.dataset[key];
-    if (shouldParse.includes(key)) {
-      value = JSON.parse(value);
-    }
+  const provide = Object.keys(el.dataset).reduce(
+    (memo, key) => {
+      let value = el.dataset[key];
+      if (shouldParse.includes(key)) {
+        value = JSON.parse(value);
+      }
 
-    return { ...memo, [key]: value };
-  }, {});
+      return { ...memo, [key]: value };
+    },
+    { formEl },
+  );
 
   return new Vue({
     el,
diff --git a/app/assets/javascripts/profile/profile.js b/app/assets/javascripts/profile/profile.js
index bfeeff47163..a7332b81b9f 100644
--- a/app/assets/javascripts/profile/profile.js
+++ b/app/assets/javascripts/profile/profile.js
@@ -1,11 +1,11 @@
 import $ from 'jquery';
 import axios from '~/lib/utils/axios_utils';
-import { Rails } from '~/lib/utils/rails_ujs';
-import { deprecatedCreateFlash as flash } from '../flash';
 import { parseBoolean } from '~/lib/utils/common_utils';
+import { Rails } from '~/lib/utils/rails_ujs';
 import TimezoneDropdown, {
   formatTimezone,
 } from '~/pages/projects/pipeline_schedules/shared/components/timezone_dropdown';
+import { deprecatedCreateFlash as flash } from '../flash';
 
 export default class Profile {
   constructor({ form } = {}) {
@@ -42,6 +42,7 @@ export default class Profile {
     $('#user_notification_email').on('select2-selecting', (event) => {
       setTimeout(this.submitForm.bind(event.currentTarget));
     });
+    $('#user_email_opted_in').on('change', this.submitForm);
     $('#user_notified_of_own_activity').on('change', this.submitForm);
     this.form.on('submit', this.onSubmitForm);
   }