diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2021-02-18 10:34:06 +0000 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2021-02-18 10:34:06 +0000 |
commit | 859a6fb938bb9ee2a317c46dfa4fcc1af49608f0 (patch) | |
tree | d7f2700abe6b4ffcb2dcfc80631b2d87d0609239 /app/assets/javascripts/profile | |
parent | 446d496a6d000c73a304be52587cd9bbc7493136 (diff) | |
download | gitlab-ce-d39b3c02b13d72f95c637f625368b472075cc038.tar.gz |
Add latest changes from gitlab-org/gitlab@13-9-stable-eev13.9.0-rc42
Diffstat (limited to 'app/assets/javascripts/profile')
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); } |