Add latest changes from gitlab-org/gitlab@master

22 files changed, 82 insertions, 128 deletions

diff --git a/app/assets/javascripts/commons/polyfills.js b/app/assets/javascripts/commons/polyfills.js
index 7a6ad3dc771..dd300b8a307 100644
--- a/app/assets/javascripts/commons/polyfills.js
+++ b/app/assets/javascripts/commons/polyfills.js
@@ -4,6 +4,7 @@ import 'core-js/es/array/find';
 import 'core-js/es/array/find-index';
 import 'core-js/es/array/from';
 import 'core-js/es/array/includes';
+import 'core-js/es/number/is-integer';
 import 'core-js/es/object/assign';
 import 'core-js/es/object/values';
 import 'core-js/es/object/entries';
diff --git a/app/assets/javascripts/create_cluster/eks_cluster/components/cluster_form_dropdown.vue b/app/assets/javascripts/create_cluster/eks_cluster/components/cluster_form_dropdown.vue
index 67ca419bf81..2f7fcfcb755 100644
--- a/app/assets/javascripts/create_cluster/eks_cluster/components/cluster_form_dropdown.vue
+++ b/app/assets/javascripts/create_cluster/eks_cluster/components/cluster_form_dropdown.vue
@@ -1,4 +1,5 @@
 <script>
+import $ from 'jquery';
 import { GlIcon } from '@gitlab/ui';
 import DropdownSearchInput from '~/vue_shared/components/dropdown/dropdown_search_input.vue';
 import DropdownHiddenInput from '~/vue_shared/components/dropdown/dropdown_hidden_input.vue';
@@ -106,6 +107,7 @@ export default {
   data() {
     return {
       searchQuery: '',
+      focusOnSearch: false,
     };
   },
   computed: {
@@ -141,6 +143,18 @@ export default {
       return itemsProp(this.selectedItems, this.valueProperty).join(', ');
     },
   },
+  mounted() {
+    $(this.$refs.dropdown)
+      .on('shown.bs.dropdown', () => {
+        this.focusOnSearch = true;
+      })
+      .on('hidden.bs.dropdown', () => {
+        this.focusOnSearch = false;
+      });
+  },
+  beforeDestroy() {
+    $(this.$refs.dropdown).off();
+  },
   methods: {
     getItemsOrEmptyList() {
       return this.items || [];
@@ -170,7 +184,7 @@ export default {
 
 <template>
   <div>
-    <div class="js-gcp-machine-type-dropdown dropdown">
+    <div ref="dropdown" class="dropdown">
       <dropdown-hidden-input :name="fieldName" :value="selectedItemsValues" />
       <dropdown-button
         :class="{ 'border-danger': hasErrors }"
@@ -179,7 +193,11 @@ export default {
         :toggle-text="toggleText"
       />
       <div class="dropdown-menu dropdown-select">
-        <dropdown-search-input v-model="searchQuery" :placeholder-text="searchFieldPlaceholder" />
+        <dropdown-search-input
+          v-model="searchQuery"
+          :focused="focusOnSearch"
+          :placeholder-text="searchFieldPlaceholder"
+        />
         <div class="dropdown-content">
           <ul>
             <li v-if="!results.length">
diff --git a/app/assets/javascripts/jobs/components/sidebar.vue b/app/assets/javascripts/jobs/components/sidebar.vue
index 06477477aad..1df57f1aa14 100644
--- a/app/assets/javascripts/jobs/components/sidebar.vue
+++ b/app/assets/javascripts/jobs/components/sidebar.vue
@@ -1,8 +1,8 @@
 <script>
-import { __, sprintf } from '~/locale';
 import _ from 'underscore';
 import { mapActions, mapState } from 'vuex';
 import { GlLink, GlButton } from '@gitlab/ui';
+import { __, sprintf } from '~/locale';
 import timeagoMixin from '~/vue_shared/mixins/timeago';
 import { timeIntervalInWords } from '~/lib/utils/datetime_utility';
 import Icon from '~/vue_shared/components/icon.vue';
diff --git a/app/assets/javascripts/jobs/components/trigger_block.vue b/app/assets/javascripts/jobs/components/trigger_block.vue
index 922f64d93fe..5edb8ff555b 100644
--- a/app/assets/javascripts/jobs/components/trigger_block.vue
+++ b/app/assets/javascripts/jobs/components/trigger_block.vue
@@ -1,6 +1,6 @@
 <script>
-import { __ } from '~/locale';
 import { GlButton } from '@gitlab/ui';
+import { __ } from '~/locale';
 
 const HIDDEN_VALUE = '••••••';
 
diff --git a/app/assets/javascripts/monitoring/components/charts/time_series.vue b/app/assets/javascripts/monitoring/components/charts/time_series.vue
index ed01d0ee553..0d442f14aea 100644
--- a/app/assets/javascripts/monitoring/components/charts/time_series.vue
+++ b/app/assets/javascripts/monitoring/components/charts/time_series.vue
@@ -1,9 +1,9 @@
 <script>
-import { s__, __ } from '~/locale';
 import _ from 'underscore';
 import { GlLink, GlButton, GlTooltip, GlResizeObserverDirective } from '@gitlab/ui';
 import { GlAreaChart, GlLineChart, GlChartSeriesLabel } from '@gitlab/ui/dist/charts';
 import dateFormat from 'dateformat';
+import { s__, __ } from '~/locale';
 import { roundOffFloat } from '~/lib/utils/common_utils';
 import { getSvgIconPathContent } from '~/lib/utils/icon_utils';
 import Icon from '~/vue_shared/components/icon.vue';
diff --git a/app/assets/javascripts/monitoring/components/date_time_picker/date_time_picker_input.vue b/app/assets/javascripts/monitoring/components/date_time_picker/date_time_picker_input.vue
index 0388a6190d9..c3beae18726 100644
--- a/app/assets/javascripts/monitoring/components/date_time_picker/date_time_picker_input.vue
+++ b/app/assets/javascripts/monitoring/components/date_time_picker/date_time_picker_input.vue
@@ -1,7 +1,7 @@
 <script>
 import _ from 'underscore';
-import { s__, sprintf } from '~/locale';
 import { GlFormGroup, GlFormInput } from '@gitlab/ui';
+import { s__, sprintf } from '~/locale';
 import { dateFormats } from '~/monitoring/constants';
 
 const inputGroupText = {
diff --git a/app/assets/javascripts/monitoring/components/embed.vue b/app/assets/javascripts/monitoring/components/embed.vue
index dae1fbad547..86f5559af8f 100644
--- a/app/assets/javascripts/monitoring/components/embed.vue
+++ b/app/assets/javascripts/monitoring/components/embed.vue
@@ -1,7 +1,7 @@
 <script>
 import { mapActions, mapState, mapGetters } from 'vuex';
-import { getParameterValues, removeParams } from '~/lib/utils/url_utility';
 import PanelType from 'ee_else_ce/monitoring/components/panel_type.vue';
+import { getParameterValues, removeParams } from '~/lib/utils/url_utility';
 import GraphGroup from './graph_group.vue';
 import { sidebarAnimationDuration } from '../constants';
 import { getTimeDiff } from '../utils';
diff --git a/app/assets/javascripts/monitoring/components/empty_state.vue b/app/assets/javascripts/monitoring/components/empty_state.vue
index ab8c9712ce4..728910dd633 100644
--- a/app/assets/javascripts/monitoring/components/empty_state.vue
+++ b/app/assets/javascripts/monitoring/components/empty_state.vue
@@ -1,6 +1,6 @@
 <script>
-import { __ } from '~/locale';
 import { GlEmptyState } from '@gitlab/ui';
+import { __ } from '~/locale';
 
 export default {
   components: {
diff --git a/app/assets/javascripts/monitoring/components/panel_type.vue b/app/assets/javascripts/monitoring/components/panel_type.vue
index 080fe6f2b4b..d0dce4f5116 100644
--- a/app/assets/javascripts/monitoring/components/panel_type.vue
+++ b/app/assets/javascripts/monitoring/components/panel_type.vue
@@ -1,7 +1,6 @@
 <script>
 import { mapState } from 'vuex';
 import _ from 'underscore';
-import { __ } from '~/locale';
 import {
   GlDropdown,
   GlDropdownItem,
@@ -9,6 +8,7 @@ import {
   GlModalDirective,
   GlTooltipDirective,
 } from '@gitlab/ui';
+import { __ } from '~/locale';
 import Icon from '~/vue_shared/components/icon.vue';
 import MonitorTimeSeriesChart from './charts/time_series.vue';
 import MonitorAnomalyChart from './charts/anomaly.vue';
diff --git a/app/assets/javascripts/monitoring/monitoring_bundle.js b/app/assets/javascripts/monitoring/monitoring_bundle.js
index a14145d480b..d296f5b7a66 100644
--- a/app/assets/javascripts/monitoring/monitoring_bundle.js
+++ b/app/assets/javascripts/monitoring/monitoring_bundle.js
@@ -1,8 +1,8 @@
 import Vue from 'vue';
 import { GlToast } from '@gitlab/ui';
+import Dashboard from 'ee_else_ce/monitoring/components/dashboard.vue';
 import { parseBoolean } from '~/lib/utils/common_utils';
 import { getParameterValues } from '~/lib/utils/url_utility';
-import Dashboard from 'ee_else_ce/monitoring/components/dashboard.vue';
 import store from './stores';
 
 Vue.use(GlToast);
diff --git a/app/assets/javascripts/notes.js b/app/assets/javascripts/notes.js
index defa278c089..fcd5b391b38 100644
--- a/app/assets/javascripts/notes.js
+++ b/app/assets/javascripts/notes.js
@@ -16,10 +16,10 @@ import Cookies from 'js-cookie';
 import Autosize from 'autosize';
 import 'jquery.caret'; // required by at.js
 import 'at.js';
-import AjaxCache from '~/lib/utils/ajax_cache';
 import Vue from 'vue';
-import syntaxHighlight from '~/syntax_highlight';
 import { GlSkeletonLoading } from '@gitlab/ui';
+import AjaxCache from '~/lib/utils/ajax_cache';
+import syntaxHighlight from '~/syntax_highlight';
 import axios from './lib/utils/axios_utils';
 import { getLocationHash } from './lib/utils/url_utility';
 import Flash from './flash';
diff --git a/app/assets/javascripts/notes/components/diff_with_note.vue b/app/assets/javascripts/notes/components/diff_with_note.vue
index df537ba1ed2..fe22737c7fc 100644
--- a/app/assets/javascripts/notes/components/diff_with_note.vue
+++ b/app/assets/javascripts/notes/components/diff_with_note.vue
@@ -1,10 +1,10 @@
 <script>
 /* eslint-disable @gitlab/vue-i18n/no-bare-strings */
 import { mapState, mapActions } from 'vuex';
+import { GlSkeletonLoading } from '@gitlab/ui';
 import DiffFileHeader from '~/diffs/components/diff_file_header.vue';
 import DiffViewer from '~/vue_shared/components/diff_viewer/diff_viewer.vue';
 import ImageDiffOverlay from '~/diffs/components/image_diff_overlay.vue';
-import { GlSkeletonLoading } from '@gitlab/ui';
 import { getDiffMode } from '~/diffs/store/utils';
 import { diffViewerModes } from '~/ide/constants';
 
diff --git a/app/assets/javascripts/notes/components/discussion_jump_to_next_button.vue b/app/assets/javascripts/notes/components/discussion_jump_to_next_button.vue
index 07a5bda6bcb..f87ca097b40 100644
--- a/app/assets/javascripts/notes/components/discussion_jump_to_next_button.vue
+++ b/app/assets/javascripts/notes/components/discussion_jump_to_next_button.vue
@@ -1,6 +1,6 @@
 <script>
-import icon from '~/vue_shared/components/icon.vue';
 import { GlTooltipDirective } from '@gitlab/ui';
+import icon from '~/vue_shared/components/icon.vue';
 
 export default {
   name: 'JumpToNextDiscussionButton',
diff --git a/app/assets/javascripts/notes/components/discussion_resolve_with_issue_button.vue b/app/assets/javascripts/notes/components/discussion_resolve_with_issue_button.vue
index f03e6fd73d7..1d1529bfa5b 100644
--- a/app/assets/javascripts/notes/components/discussion_resolve_with_issue_button.vue
+++ b/app/assets/javascripts/notes/components/discussion_resolve_with_issue_button.vue
@@ -1,6 +1,6 @@
 <script>
-import Icon from '~/vue_shared/components/icon.vue';
 import { GlTooltipDirective, GlButton } from '@gitlab/ui';
+import Icon from '~/vue_shared/components/icon.vue';
 
 export default {
   name: 'ResolveWithIssueButton',
diff --git a/app/assets/javascripts/notes/components/note_actions.vue b/app/assets/javascripts/notes/components/note_actions.vue
index 89d434a60ba..dc514f00801 100644
--- a/app/assets/javascripts/notes/components/note_actions.vue
+++ b/app/assets/javascripts/notes/components/note_actions.vue
@@ -1,8 +1,8 @@
 <script>
 import { mapGetters } from 'vuex';
-import Icon from '~/vue_shared/components/icon.vue';
 import { GlLoadingIcon, GlTooltipDirective } from '@gitlab/ui';
 import resolvedStatusMixin from 'ee_else_ce/batch_comments/mixins/resolved_status';
+import Icon from '~/vue_shared/components/icon.vue';
 import ReplyButton from './note_actions/reply_button.vue';
 
 export default {
diff --git a/app/assets/javascripts/notes/components/note_form.vue b/app/assets/javascripts/notes/components/note_form.vue
index 222badf70d1..b024884bea0 100644
--- a/app/assets/javascripts/notes/components/note_form.vue
+++ b/app/assets/javascripts/notes/components/note_form.vue
@@ -1,7 +1,7 @@
 <script>
-import { mergeUrlParams } from '~/lib/utils/url_utility';
 import { mapGetters, mapActions } from 'vuex';
 import noteFormMixin from 'ee_else_ce/notes/mixins/note_form';
+import { mergeUrlParams } from '~/lib/utils/url_utility';
 import eventHub from '../event_hub';
 import issueWarning from '../../vue_shared/components/issue/issue_warning.vue';
 import markdownField from '../../vue_shared/components/markdown/field.vue';
diff --git a/app/assets/javascripts/notes/components/noteable_discussion.vue b/app/assets/javascripts/notes/components/noteable_discussion.vue
index 62d401d4911..0151a3f10a5 100644
--- a/app/assets/javascripts/notes/components/noteable_discussion.vue
+++ b/app/assets/javascripts/notes/components/noteable_discussion.vue
@@ -1,10 +1,10 @@
 <script>
 import { mapActions, mapGetters } from 'vuex';
 import { GlTooltipDirective } from '@gitlab/ui';
+import diffLineNoteFormMixin from 'ee_else_ce/notes/mixins/diff_line_note_form';
 import { s__, __ } from '~/locale';
 import { clearDraft, getDiscussionReplyKey } from '~/lib/utils/autosave';
 import icon from '~/vue_shared/components/icon.vue';
-import diffLineNoteFormMixin from 'ee_else_ce/notes/mixins/diff_line_note_form';
 import TimelineEntryItem from '~/vue_shared/components/notes/timeline_entry_item.vue';
 import Flash from '../../flash';
 import userAvatarLink from '../../vue_shared/components/user_avatar/user_avatar_link.vue';
diff --git a/app/assets/javascripts/notes/components/noteable_note.vue b/app/assets/javascripts/notes/components/noteable_note.vue
index fa8fc7d02e4..b3dae69d0bc 100644
--- a/app/assets/javascripts/notes/components/noteable_note.vue
+++ b/app/assets/javascripts/notes/components/noteable_note.vue
@@ -2,9 +2,9 @@
 import $ from 'jquery';
 import { mapGetters, mapActions } from 'vuex';
 import { escape } from 'underscore';
+import draftMixin from 'ee_else_ce/notes/mixins/draft';
 import { truncateSha } from '~/lib/utils/text_utility';
 import TimelineEntryItem from '~/vue_shared/components/notes/timeline_entry_item.vue';
-import draftMixin from 'ee_else_ce/notes/mixins/draft';
 import { __, s__, sprintf } from '../../locale';
 import Flash from '../../flash';
 import userAvatarLink from '../../vue_shared/components/user_avatar/user_avatar_link.vue';
diff --git a/app/assets/javascripts/notes/components/notes_app.vue b/app/assets/javascripts/notes/components/notes_app.vue
index 7df99610132..be2adb07526 100644
--- a/app/assets/javascripts/notes/components/notes_app.vue
+++ b/app/assets/javascripts/notes/components/notes_app.vue
@@ -1,6 +1,5 @@
 <script>
 import { mapGetters, mapActions } from 'vuex';
-import { __ } from '~/locale';
 import { getLocationHash, doesHashExistInUrl } from '../../lib/utils/url_utility';
 import Flash from '../../flash';
 import * as constants from '../constants';
@@ -14,6 +13,7 @@ import placeholderNote from '../../vue_shared/components/notes/placeholder_note.
 import placeholderSystemNote from '../../vue_shared/components/notes/placeholder_system_note.vue';
 import skeletonLoadingContainer from '../../vue_shared/components/notes/skeleton_note.vue';
 import highlightCurrentUser from '~/behaviors/markdown/highlight_current_user';
+import { __ } from '~/locale';
 import initUserPopovers from '../../user_popovers';
 
 export default {
diff --git a/app/assets/javascripts/notes/stores/actions.js b/app/assets/javascripts/notes/stores/actions.js
index 82c291379ec..97b0269509a 100644
--- a/app/assets/javascripts/notes/stores/actions.js
+++ b/app/assets/javascripts/notes/stores/actions.js
@@ -1,7 +1,7 @@
 import Vue from 'vue';
 import $ from 'jquery';
-import axios from '~/lib/utils/axios_utils';
 import Visibility from 'visibilityjs';
+import axios from '~/lib/utils/axios_utils';
 import TaskList from '../../task_list';
 import Flash from '../../flash';
 import Poll from '../../lib/utils/poll';
diff --git a/app/assets/javascripts/vue_shared/components/dropdown/dropdown_search_input.vue b/app/assets/javascripts/vue_shared/components/dropdown/dropdown_search_input.vue
index c01c7cc4ccc..610bce9a705 100644
--- a/app/assets/javascripts/vue_shared/components/dropdown/dropdown_search_input.vue
+++ b/app/assets/javascripts/vue_shared/components/dropdown/dropdown_search_input.vue
@@ -8,6 +8,11 @@ export default {
       required: true,
       default: __('Search'),
     },
+    focused: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   data() {
     return { searchQuery: this.value };
@@ -16,6 +21,11 @@ export default {
     searchQuery(query) {
       this.$emit('input', query);
     },
+    focused(val) {
+      if (val) {
+        this.$refs.searchInput.focus();
+      }
+    },
   },
 };
 </script>
@@ -23,6 +33,7 @@ export default {
 <template>
   <div class="dropdown-input">
     <input
+      ref="searchInput"
       v-model="searchQuery"
       :placeholder="placeholderText"
       class="dropdown-input-field"
diff --git a/app/assets/javascripts/vue_shared/components/pagination/table_pagination.vue b/app/assets/javascripts/vue_shared/components/pagination/table_pagination.vue
index e89638130f5..29a4a90a59f 100644
--- a/app/assets/javascripts/vue_shared/components/pagination/table_pagination.vue
+++ b/app/assets/javascripts/vue_shared/components/pagination/table_pagination.vue
@@ -1,15 +1,18 @@
 <script>
+import { GlPagination } from '@gitlab/ui';
 import {
-  PAGINATION_UI_BUTTON_LIMIT,
-  UI_LIMIT,
-  SPREAD,
   PREV,
   NEXT,
-  FIRST,
-  LAST,
+  LABEL_FIRST_PAGE,
+  LABEL_PREV_PAGE,
+  LABEL_NEXT_PAGE,
+  LABEL_LAST_PAGE,
 } from '~/vue_shared/components/pagination/constants';
 
 export default {
+  components: {
+    GlPagination,
+  },
   props: {
     /**
         This function will take the information given by the pagination component
@@ -46,113 +49,34 @@ export default {
     },
   },
   computed: {
-    prev() {
-      return this.pageInfo.previousPage;
-    },
-    next() {
-      return this.pageInfo.nextPage;
-    },
-    getItems() {
-      const { totalPages, nextPage, previousPage, page } = this.pageInfo;
-      const items = [];
-
-      if (page > 1) {
-        items.push({ title: FIRST, first: true });
-      }
-
-      if (previousPage) {
-        items.push({ title: PREV, prev: true });
-      } else {
-        items.push({ title: PREV, disabled: true, prev: true });
-      }
-
-      if (page > UI_LIMIT) items.push({ title: SPREAD, separator: true });
-
-      if (totalPages) {
-        const start = Math.max(page - PAGINATION_UI_BUTTON_LIMIT, 1);
-        const end = Math.min(page + PAGINATION_UI_BUTTON_LIMIT, totalPages);
-
-        for (let i = start; i <= end; i += 1) {
-          const isActive = i === page;
-          items.push({ title: i, active: isActive, page: true });
-        }
-
-        if (totalPages - page > PAGINATION_UI_BUTTON_LIMIT) {
-          items.push({ title: SPREAD, separator: true, page: true });
-        }
-      }
-
-      if (nextPage) {
-        items.push({ title: NEXT, next: true });
-      } else {
-        items.push({ title: NEXT, disabled: true, next: true });
-      }
-
-      if (totalPages && totalPages - page >= 1) {
-        items.push({ title: LAST, last: true });
-      }
-
-      return items;
-    },
     showPagination() {
       return this.pageInfo.nextPage || this.pageInfo.previousPage;
     },
   },
-  methods: {
-    changePage(text, isDisabled) {
-      if (isDisabled) return;
-
-      const { totalPages, nextPage, previousPage } = this.pageInfo;
-
-      switch (text) {
-        case SPREAD:
-          break;
-        case LAST:
-          this.change(totalPages);
-          break;
-        case NEXT:
-          this.change(nextPage);
-          break;
-        case PREV:
-          this.change(previousPage);
-          break;
-        case FIRST:
-          this.change(1);
-          break;
-        default:
-          this.change(Number(text));
-          break;
-      }
-    },
-    hideOnSmallScreen(item) {
-      return !item.first && !item.last && !item.next && !item.prev && !item.active;
-    },
-  },
+  prevText: PREV,
+  nextText: NEXT,
+  labelFirstPage: LABEL_FIRST_PAGE,
+  labelPrevPage: LABEL_PREV_PAGE,
+  labelNextPage: LABEL_NEXT_PAGE,
+  labelLastPage: LABEL_LAST_PAGE,
 };
 </script>
 <template>
-  <div v-if="showPagination" class="gl-pagination prepend-top-default">
-    <ul class="pagination justify-content-center">
-      <li
-        v-for="(item, index) in getItems"
-        :key="index"
-        :class="{
-          page: item.page,
-          'js-previous-button': item.prev,
-          'js-next-button': item.next,
-          'js-last-button': item.last,
-          'js-first-button': item.first,
-          'd-none d-md-block': hideOnSmallScreen(item),
-          separator: item.separator,
-          active: item.active,
-          disabled: item.disabled || item.separator,
-        }"
-        class="page-item"
-      >
-        <button type="button" class="page-link" @click="changePage(item.title, item.disabled)">
-          {{ item.title }}
-        </button>
-      </li>
-    </ul>
-  </div>
+  <gl-pagination
+    v-if="showPagination"
+    class="justify-content-center prepend-top-default"
+    v-bind="$attrs"
+    :value="pageInfo.page"
+    :per-page="pageInfo.perPage"
+    :total-items="pageInfo.total"
+    :prev-page="pageInfo.previousPage"
+    :prev-text="$options.prevText"
+    :next-page="pageInfo.nextPage"
+    :next-text="$options.nextText"
+    :label-first-page="$options.labelFirstPage"
+    :label-prev-page="$options.labelPrevPage"
+    :label-next-page="$options.labelNextPage"
+    :label-last-page="$options.labelLastPage"
+    @input="change"
+  />
 </template>