Add latest changes from gitlab-org/gitlab@master

17 files changed, 168 insertions, 65 deletions

diff --git a/app/assets/javascripts/behaviors/markdown/editor_extensions.js b/app/assets/javascripts/behaviors/markdown/editor_extensions.js
index ee50075862a..b512e4dbc8b 100644
--- a/app/assets/javascripts/behaviors/markdown/editor_extensions.js
+++ b/app/assets/javascripts/behaviors/markdown/editor_extensions.js
@@ -22,27 +22,24 @@ import Heading from './nodes/heading';
 import HorizontalRule from './nodes/horizontal_rule';
 import Image from './nodes/image';
 
+import ListItem from './nodes/list_item';
+import OrderedList from './nodes/ordered_list';
+import OrderedTaskList from './nodes/ordered_task_list';
+import Paragraph from './nodes/paragraph';
 import Reference from './nodes/reference';
+import Summary from './nodes/summary';
 import Table from './nodes/table';
-import TableHead from './nodes/table_head';
 import TableBody from './nodes/table_body';
+import TableCell from './nodes/table_cell';
+import TableHead from './nodes/table_head';
 import TableHeaderRow from './nodes/table_header_row';
+import TableOfContents from './nodes/table_of_contents';
 import TableRow from './nodes/table_row';
-import TableCell from './nodes/table_cell';
 
-import TableOfContents from './nodes/table_of_contents';
 import TaskList from './nodes/task_list';
 import TaskListItem from './nodes/task_list_item';
-import Video from './nodes/video';
-
-import OrderedList from './nodes/ordered_list';
-import ListItem from './nodes/list_item';
-
-import OrderedTaskList from './nodes/ordered_task_list';
-import Paragraph from './nodes/paragraph';
-
-import Summary from './nodes/summary';
 import Text from './nodes/text';
+import Video from './nodes/video';
 
 // The filters referenced in lib/banzai/pipeline/gfm_pipeline.rb transform
 // GitLab Flavored Markdown (GFM) to HTML.
diff --git a/app/assets/javascripts/boards/index.js b/app/assets/javascripts/boards/index.js
index ac7d8e542c4..15f7e2191a2 100644
--- a/app/assets/javascripts/boards/index.js
+++ b/app/assets/javascripts/boards/index.js
@@ -1,9 +1,9 @@
 import Vue from 'vue';
+import VueApollo from 'vue-apollo';
 import { mapActions, mapGetters } from 'vuex';
 
 import 'ee_else_ce/boards/models/issue';
 import 'ee_else_ce/boards/models/list';
-import VueApollo from 'vue-apollo';
 import BoardSidebar from 'ee_else_ce/boards/components/board_sidebar';
 import initNewListDropdown from 'ee_else_ce/boards/components/new_list_dropdown';
 import boardConfigToggle from 'ee_else_ce/boards/config_toggle';
@@ -15,33 +15,31 @@ import {
 } from 'ee_else_ce/boards/ee_functions';
 import toggleEpicsSwimlanes from 'ee_else_ce/boards/toggle_epics_swimlanes';
 import toggleLabels from 'ee_else_ce/boards/toggle_labels';
-
 import BoardAddNewColumnTrigger from '~/boards/components/board_add_new_column_trigger.vue';
 import BoardContent from '~/boards/components/board_content.vue';
 import BoardExtraActions from '~/boards/components/board_extra_actions.vue';
-import { deprecatedCreateFlash as Flash } from '~/flash';
-import createDefaultClient from '~/lib/graphql';
-import { __ } from '~/locale';
 import './models/label';
 import './models/assignee';
-
-import toggleFocusMode from '~/boards/toggle_focus';
-import FilteredSearchBoards from '~/boards/filtered_search_boards';
-import eventHub from '~/boards/eventhub';
-import sidebarEventHub from '~/sidebar/event_hub';
 import '~/boards/models/milestone';
 import '~/boards/models/project';
+import '~/boards/filters/due_date_filters';
+import BoardAddIssuesModal from '~/boards/components/modal/index.vue';
+import eventHub from '~/boards/eventhub';
+import FilteredSearchBoards from '~/boards/filtered_search_boards';
+import modalMixin from '~/boards/mixins/modal_mixins';
 import store from '~/boards/stores';
 import boardsStore from '~/boards/stores/boards_store';
 import ModalStore from '~/boards/stores/modal_store';
-import modalMixin from '~/boards/mixins/modal_mixins';
-import '~/boards/filters/due_date_filters';
-import BoardAddIssuesModal from '~/boards/components/modal/index.vue';
+import toggleFocusMode from '~/boards/toggle_focus';
+import { deprecatedCreateFlash as Flash } from '~/flash';
+import createDefaultClient from '~/lib/graphql';
 import {
   NavigationType,
   convertObjectPropsToCamelCase,
   parseBoolean,
 } from '~/lib/utils/common_utils';
+import { __ } from '~/locale';
+import sidebarEventHub from '~/sidebar/event_hub';
 import mountMultipleBoardsSwitcher from './mount_multiple_boards_switcher';
 
 Vue.use(VueApollo);
diff --git a/app/assets/javascripts/commit/pipelines/pipelines_table.vue b/app/assets/javascripts/commit/pipelines/pipelines_table.vue
index 4362263b0dd..787152d00ef 100644
--- a/app/assets/javascripts/commit/pipelines/pipelines_table.vue
+++ b/app/assets/javascripts/commit/pipelines/pipelines_table.vue
@@ -1,13 +1,13 @@
 <script>
 import { GlButton, GlLoadingIcon, GlModal, GlLink } from '@gitlab/ui';
 import { getParameterByName } from '~/lib/utils/common_utils';
+import SvgBlankState from '~/pipelines/components/pipelines_list/blank_state.vue';
+import PipelinesTableComponent from '~/pipelines/components/pipelines_list/pipelines_table.vue';
 import eventHub from '~/pipelines/event_hub';
 import PipelinesMixin from '~/pipelines/mixins/pipelines_mixin';
 import PipelinesService from '~/pipelines/services/pipelines_service';
 import PipelineStore from '~/pipelines/stores/pipelines_store';
-import PipelinesTableComponent from '~/pipelines/components/pipelines_list/pipelines_table.vue';
 import TablePagination from '~/vue_shared/components/pagination/table_pagination.vue';
-import SvgBlankState from '~/pipelines/components/pipelines_list/blank_state.vue';
 
 export default {
   components: {
diff --git a/app/assets/javascripts/main.js b/app/assets/javascripts/main.js
index 376d93a9783..32ecc0036bd 100644
--- a/app/assets/javascripts/main.js
+++ b/app/assets/javascripts/main.js
@@ -1,4 +1,5 @@
 /* global $ */
+/* eslint-disable import/order */
 
 import jQuery from 'jquery';
 import Cookies from 'js-cookie';
diff --git a/app/assets/javascripts/notes.js b/app/assets/javascripts/notes.js
index 072983b4285..8ed40f36103 100644
--- a/app/assets/javascripts/notes.js
+++ b/app/assets/javascripts/notes.js
@@ -10,13 +10,13 @@ class-methods-use-this */
 old_notes_spec.js is the spec for the legacy, jQuery notes application. It has nothing to do with the new, fancy Vue notes app.
  */
 
+import { GlDeprecatedSkeletonLoading as GlSkeletonLoading } from '@gitlab/ui';
+import Autosize from 'autosize';
 import $ from 'jquery';
-import '~/lib/utils/jquery_at_who';
 import Cookies from 'js-cookie';
 import { escape, uniqueId } from 'lodash';
-import Autosize from 'autosize';
 import Vue from 'vue';
-import { GlDeprecatedSkeletonLoading as GlSkeletonLoading } from '@gitlab/ui';
+import '~/lib/utils/jquery_at_who';
 import AjaxCache from '~/lib/utils/ajax_cache';
 import syntaxHighlight from '~/syntax_highlight';
 import Autosave from './autosave';
diff --git a/app/assets/javascripts/pages/projects/blob/show/index.js b/app/assets/javascripts/pages/projects/blob/show/index.js
index 610c643c805..61ff1c95a38 100644
--- a/app/assets/javascripts/pages/projects/blob/show/index.js
+++ b/app/assets/javascripts/pages/projects/blob/show/index.js
@@ -1,11 +1,11 @@
 import Vue from 'vue';
+import PipelineTourSuccessModal from '~/blob/pipeline_tour_success_modal.vue';
 import BlobViewer from '~/blob/viewer/index';
 import GpgBadges from '~/gpg_badges';
 import initBlob from '~/pages/projects/init_blob';
 import initWebIdeLink from '~/pages/projects/shared/web_ide_link';
 import commitPipelineStatus from '~/projects/tree/components/commit_pipeline_status_component.vue';
 import '~/sourcegraph/load';
-import PipelineTourSuccessModal from '~/blob/pipeline_tour_success_modal.vue';
 
 document.addEventListener('DOMContentLoaded', () => {
   new BlobViewer(); // eslint-disable-line no-new
diff --git a/app/assets/javascripts/pages/projects/commit/show/index.js b/app/assets/javascripts/pages/projects/commit/show/index.js
index 6baf8c6595e..90a663802d2 100644
--- a/app/assets/javascripts/pages/projects/commit/show/index.js
+++ b/app/assets/javascripts/pages/projects/commit/show/index.js
@@ -1,6 +1,6 @@
 /* eslint-disable no-new */
-
 import $ from 'jquery';
+import loadAwardsHandler from '~/awards_handler';
 import ShortcutsNavigation from '~/behaviors/shortcuts/shortcuts_navigation';
 import Diff from '~/diff';
 import flash from '~/flash';
@@ -14,7 +14,6 @@ import { initCommitBoxInfo } from '~/projects/commit_box/info';
 import syntaxHighlight from '~/syntax_highlight';
 import ZenMode from '~/zen_mode';
 import '~/sourcegraph/load';
-import loadAwardsHandler from '~/awards_handler';
 
 const hasPerfBar = document.querySelector('.with-performance-bar');
 const performanceHeight = hasPerfBar ? 35 : 0;
diff --git a/app/assets/javascripts/pages/users/user_tabs.js b/app/assets/javascripts/pages/users/user_tabs.js
index e3aac07097b..80e14842f51 100644
--- a/app/assets/javascripts/pages/users/user_tabs.js
+++ b/app/assets/javascripts/pages/users/user_tabs.js
@@ -141,7 +141,15 @@ export default class UserTabs {
       this.loadOverviewTab();
     }
 
-    const loadableActions = ['groups', 'contributed', 'projects', 'starred', 'snippets'];
+    const loadableActions = [
+      'groups',
+      'contributed',
+      'projects',
+      'starred',
+      'snippets',
+      'followers',
+      'following',
+    ];
     if (loadableActions.indexOf(action) > -1) {
       this.loadTab(action, endpoint);
     }
diff --git a/app/assets/javascripts/pipelines/components/pipelines_list/pipelines.vue b/app/assets/javascripts/pipelines/components/pipelines_list/pipelines.vue
index a45adc766e3..48009a9fcb8 100644
--- a/app/assets/javascripts/pipelines/components/pipelines_list/pipelines.vue
+++ b/app/assets/javascripts/pipelines/components/pipelines_list/pipelines.vue
@@ -10,11 +10,11 @@ import { ANY_TRIGGER_AUTHOR, RAW_TEXT_WARNING, FILTER_TAG_IDENTIFIER } from '../
 import PipelinesMixin from '../../mixins/pipelines_mixin';
 import PipelinesService from '../../services/pipelines_service';
 import { validateParams } from '../../utils';
+import SvgBlankState from './blank_state.vue';
 import EmptyState from './empty_state.vue';
 import NavigationControls from './nav_controls.vue';
 import PipelinesFilteredSearch from './pipelines_filtered_search.vue';
 import PipelinesTableComponent from './pipelines_table.vue';
-import SvgBlankState from './blank_state.vue';
 
 export default {
   components: {
diff --git a/app/assets/javascripts/pipelines/mixins/pipelines_mixin.js b/app/assets/javascripts/pipelines/mixins/pipelines_mixin.js
index 8444d43513b..2321728e30c 100644
--- a/app/assets/javascripts/pipelines/mixins/pipelines_mixin.js
+++ b/app/assets/javascripts/pipelines/mixins/pipelines_mixin.js
@@ -1,9 +1,9 @@
 import Visibility from 'visibilityjs';
 import { deprecatedCreateFlash as createFlash } from '~/flash';
-import Poll from '~/lib/utils/poll';
 import { historyPushState, buildUrlWithCurrentLocation } from '~/lib/utils/common_utils';
-import { validateParams } from '~/pipelines/utils';
+import Poll from '~/lib/utils/poll';
 import { __ } from '~/locale';
+import { validateParams } from '~/pipelines/utils';
 import { CANCEL_REQUEST } from '../constants';
 import eventHub from '../event_hub';
 
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/repository/components/preview/index.vue b/app/assets/javascripts/repository/components/preview/index.vue
index e2c3f3b81ee..b74c2333148 100644
--- a/app/assets/javascripts/repository/components/preview/index.vue
+++ b/app/assets/javascripts/repository/components/preview/index.vue
@@ -1,8 +1,8 @@
 <script>
 /* eslint-disable vue/no-v-html */
+import { GlIcon, GlLink, GlLoadingIcon } from '@gitlab/ui';
 import $ from 'jquery';
 import '~/behaviors/markdown/render_gfm';
-import { GlIcon, GlLink, GlLoadingIcon } from '@gitlab/ui';
 import { handleLocationHash } from '~/lib/utils/common_utils';
 import readmeQuery from '../../queries/readme.query.graphql';
 
diff --git a/app/assets/javascripts/terraform/index.js b/app/assets/javascripts/terraform/index.js
index 2288bab2fa8..3f986423836 100644
--- a/app/assets/javascripts/terraform/index.js
+++ b/app/assets/javascripts/terraform/index.js
@@ -1,5 +1,5 @@
-import { defaultDataIdFromObject } from 'apollo-cache-inmemory';
 import { GlToast } from '@gitlab/ui';
+import { defaultDataIdFromObject } from 'apollo-cache-inmemory';
 import Vue from 'vue';
 import VueApollo from 'vue-apollo';
 import createDefaultClient from '~/lib/graphql';
diff --git a/app/assets/javascripts/vue_shared/components/content_viewer/viewers/markdown_viewer.vue b/app/assets/javascripts/vue_shared/components/content_viewer/viewers/markdown_viewer.vue
index 24386c90954..3790a509f26 100644
--- a/app/assets/javascripts/vue_shared/components/content_viewer/viewers/markdown_viewer.vue
+++ b/app/assets/javascripts/vue_shared/components/content_viewer/viewers/markdown_viewer.vue
@@ -1,9 +1,8 @@
 <script>
 /* eslint-disable vue/no-v-html */
+import { GlDeprecatedSkeletonLoading as GlSkeletonLoading } from '@gitlab/ui';
 import $ from 'jquery';
 import '~/behaviors/markdown/render_gfm';
-
-import { GlDeprecatedSkeletonLoading as GlSkeletonLoading } from '@gitlab/ui';
 import { forEach, escape } from 'lodash';
 import axios from '~/lib/utils/axios_utils';
 import { __ } from '~/locale';
diff --git a/app/assets/javascripts/vue_shared/components/markdown/field.vue b/app/assets/javascripts/vue_shared/components/markdown/field.vue
index 1699329bf4d..25d01dc550f 100644
--- a/app/assets/javascripts/vue_shared/components/markdown/field.vue
+++ b/app/assets/javascripts/vue_shared/components/markdown/field.vue
@@ -1,9 +1,9 @@
 <script>
 /* eslint-disable vue/no-v-html */
+import { GlIcon } from '@gitlab/ui';
 import $ from 'jquery';
 import '~/behaviors/markdown/render_gfm';
 import { unescape } from 'lodash';
-import { GlIcon } from '@gitlab/ui';
 import { deprecatedCreateFlash as Flash } from '~/flash';
 import GLForm from '~/gl_form';
 import axios from '~/lib/utils/axios_utils';