1 files changed, 90 insertions, 15 deletions

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>