diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2020-11-19 11:27:35 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2020-11-19 11:27:35 +0300 |
commit | 7e9c479f7de77702622631cff2628a9c8dcbc627 (patch) | |
tree | c8f718a08e110ad7e1894510980d2155a6549197 /app/assets/javascripts/profile | |
parent | e852b0ae16db4052c1c567d9efa4facc81146e88 (diff) |
Add latest changes from gitlab-org/gitlab@13-6-stable-eev13.6.0-rc42
Diffstat (limited to 'app/assets/javascripts/profile')
4 files changed, 190 insertions, 14 deletions
diff --git a/app/assets/javascripts/profile/account/components/update_username.vue b/app/assets/javascripts/profile/account/components/update_username.vue index 200e5ba255f..5feac7485ad 100644 --- a/app/assets/javascripts/profile/account/components/update_username.vue +++ b/app/assets/javascripts/profile/account/components/update_username.vue @@ -1,17 +1,19 @@ <script> -/* eslint-disable vue/no-v-html */ import { escape } from 'lodash'; -import { GlButton } from '@gitlab/ui'; +import { GlSafeHtmlDirective as SafeHtml, GlButton, GlModal, GlModalDirective } from '@gitlab/ui'; import axios from '~/lib/utils/axios_utils'; -import DeprecatedModal2 from '~/vue_shared/components/deprecated_modal_2.vue'; import { s__, sprintf } from '~/locale'; import { deprecatedCreateFlash as Flash } from '~/flash'; export default { components: { - GlModal: DeprecatedModal2, + GlModal, GlButton, }, + directives: { + GlModalDirective, + SafeHtml, + }, props: { actionUrl: { type: String, @@ -54,6 +56,21 @@ Please update your Git repository remotes as soon as possible.`), false, ); }, + primaryProps() { + return { + text: s__('Update username'), + attributes: [ + { variant: 'warning' }, + { category: 'primary' }, + { disabled: this.isRequestPending }, + ], + }; + }, + cancelProps() { + return { + text: s__('Cancel'), + }; + }, }, methods: { onConfirm() { @@ -103,22 +120,21 @@ Please update your Git repository remotes as soon as possible.`), <p class="form-text text-muted">{{ path }}</p> </div> <gl-button - :data-target="`#${$options.modalId}`" + v-gl-modal-directive="$options.modalId" :disabled="isRequestPending || newUsername === username" category="primary" variant="warning" - data-toggle="modal" + data-testid="username-change-confirmation-modal" + >{{ $options.buttonText }}</gl-button > - {{ $options.buttonText }} - </gl-button> <gl-modal - :id="$options.modalId" - :header-title-text="s__('Profiles|Change username') + '?'" - :footer-primary-button-text="$options.buttonText" - footer-primary-button-variant="warning" - @submit="onConfirm" + :modal-id="$options.modalId" + :title="s__('Profiles|Change username') + '?'" + :action-primary="primaryProps" + :action-cancel="cancelProps" + @primary="onConfirm" > - <span v-html="modalText"></span> + <span v-safe-html="modalText"></span> </gl-modal> </div> </template> diff --git a/app/assets/javascripts/profile/preferences/components/integration_view.vue b/app/assets/javascripts/profile/preferences/components/integration_view.vue new file mode 100644 index 00000000000..c2952629a5d --- /dev/null +++ b/app/assets/javascripts/profile/preferences/components/integration_view.vue @@ -0,0 +1,81 @@ +<script> +import { GlFormText, GlIcon, GlLink } from '@gitlab/ui'; +import IntegrationHelpText from '~/vue_shared/components/integrations_help_text.vue'; + +export default { + name: 'IntegrationView', + components: { + GlFormText, + GlIcon, + GlLink, + IntegrationHelpText, + }, + inject: ['userFields'], + props: { + helpLink: { + type: String, + required: true, + }, + message: { + type: String, + required: true, + }, + messageUrl: { + type: String, + required: true, + }, + config: { + type: Object, + required: true, + }, + }, + data() { + return { + isEnabled: this.userFields[this.config.formName], + }; + }, + computed: { + formName() { + return `user[${this.config.formName}]`; + }, + formId() { + return `user_${this.config.formName}`; + }, + }, +}; +</script> + +<template> + <div> + <label class="label-bold"> + {{ config.title }} + </label> + <gl-link class="has-tooltip" title="More information" :href="helpLink"> + <gl-icon name="question-o" class="vertical-align-middle" /> + </gl-link> + <div class="form-group form-check" data-testid="profile-preferences-integration-form-group"> + <!-- Necessary for Rails to receive the value when not checked --> + <input + :name="formName" + type="hidden" + value="0" + data-testid="profile-preferences-integration-hidden-field" + /> + <input + :id="formId" + v-model="isEnabled" + type="checkbox" + class="form-check-input" + :name="formName" + value="1" + data-testid="profile-preferences-integration-checkbox" + /> + <label class="form-check-label" :for="formId"> + {{ config.label }} + </label> + <gl-form-text tag="div"> + <integration-help-text :message="message" :message-url="messageUrl" /> + </gl-form-text> + </div> + </div> +</template> diff --git a/app/assets/javascripts/profile/preferences/components/profile_preferences.vue b/app/assets/javascripts/profile/preferences/components/profile_preferences.vue new file mode 100644 index 00000000000..8b2006b7c5b --- /dev/null +++ b/app/assets/javascripts/profile/preferences/components/profile_preferences.vue @@ -0,0 +1,56 @@ +<script> +import { s__ } from '~/locale'; +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', + }, +}; + +export default { + name: 'ProfilePreferences', + components: { + IntegrationView, + }, + inject: { + integrationViews: { + default: [], + }, + }, + integrationViewConfigs: INTEGRATION_VIEW_CONFIGS, +}; +</script> + +<template> + <div class="row gl-mt-3 js-preferences-form"> + <div v-if="integrationViews.length" class="col-sm-12"> + <hr data-testid="profile-preferences-integrations-rule" /> + </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') }} + </h4> + <p> + {{ s__('ProfilePreferences|Customize integrations with third party services.') }} + </p> + </div> + <div v-if="integrationViews.length" class="col-lg-8"> + <integration-view + v-for="view in integrationViews" + :key="view.name" + :help-link="view.help_link" + :message="view.message" + :message-url="view.message_url" + :config="$options.integrationViewConfigs[view.name]" + /> + </div> + </div> +</template> diff --git a/app/assets/javascripts/profile/preferences/profile_preferences_bundle.js b/app/assets/javascripts/profile/preferences/profile_preferences_bundle.js new file mode 100644 index 00000000000..bcca3140717 --- /dev/null +++ b/app/assets/javascripts/profile/preferences/profile_preferences_bundle.js @@ -0,0 +1,23 @@ +import Vue from 'vue'; +import ProfilePreferences from './components/profile_preferences.vue'; + +export default () => { + const el = document.querySelector('#js-profile-preferences-app'); + const shouldParse = ['integrationViews', 'userFields']; + + 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 new Vue({ + el, + name: 'ProfilePreferencesApp', + provide, + render: createElement => createElement(ProfilePreferences), + }); +}; |