Add latest changes from gitlab-org/gitlab@master

3 files changed, 160 insertions, 0 deletions

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),
+  });
+};