Add latest changes from gitlab-org/gitlab@master

16 files changed, 182 insertions, 74 deletions

diff --git a/app/assets/javascripts/alert_management/components/alert_management_list.vue b/app/assets/javascripts/alert_management/components/alert_management_list.vue
index 1e0cbfbf125..2c3674b9b96 100644
--- a/app/assets/javascripts/alert_management/components/alert_management_list.vue
+++ b/app/assets/javascripts/alert_management/components/alert_management_list.vue
@@ -5,6 +5,7 @@ import {
   GlLoadingIcon,
   GlTable,
   GlAlert,
+  GlIcon,
   GlNewDropdown,
   GlNewDropdownItem,
 } from '@gitlab/ui';
@@ -64,6 +65,7 @@ export default {
     TimeAgo,
     GlNewDropdown,
     GlNewDropdownItem,
+    GlIcon,
   },
   props: {
     projectPath: {
@@ -144,6 +146,18 @@ export default {
         fixed
         stacked="md"
       >
+        <template #cell(severity)="{ item }">
+          <div class="d-inline-flex align-items-center justify-content-between">
+            <gl-icon
+              class="mr-2"
+              :size="12"
+              :name="`severity-${item.severity.toLowerCase()}`"
+              :class="`icon-${item.severity.toLowerCase()}`"
+            />
+            {{ item.severity }}
+          </div>
+        </template>
+
         <template #cell(startedAt)="{ item }">
           <time-ago :time="item.startedAt" />
         </template>
diff --git a/app/assets/javascripts/ide/lib/themes/index.js b/app/assets/javascripts/ide/lib/themes/index.js
index 5e75538b664..bb5be50576c 100644
--- a/app/assets/javascripts/ide/lib/themes/index.js
+++ b/app/assets/javascripts/ide/lib/themes/index.js
@@ -3,6 +3,7 @@ import dark from './dark';
 import monokai from './monokai';
 import solarizedLight from './solarized_light';
 import solarizedDark from './solarized_dark';
+import none from './none';
 
 export const themes = [
   {
@@ -25,6 +26,10 @@ export const themes = [
     name: 'monokai',
     data: monokai,
   },
+  {
+    name: 'none',
+    data: none,
+  },
 ];
 
 export const DEFAULT_THEME = 'white';
diff --git a/app/assets/javascripts/ide/lib/themes/none.js b/app/assets/javascripts/ide/lib/themes/none.js
new file mode 100644
index 00000000000..8e722c4ff88
--- /dev/null
+++ b/app/assets/javascripts/ide/lib/themes/none.js
@@ -0,0 +1,17 @@
+export default {
+  base: 'vs',
+  inherit: false,
+  rules: [],
+  colors: {
+    'editor.foreground': '#2e2e2e',
+    'editor.selectionBackground': '#aad6f8',
+    'editor.lineHighlightBackground': '#fffeeb',
+    'editorCursor.foreground': '#666666',
+    'editorWhitespace.foreground': '#bbbbbb',
+
+    'editorLineNumber.foreground': '#cccccc',
+    'diffEditor.insertedTextBackground': '#a0f5b420',
+    'diffEditor.removedTextBackground': '#f9d7dc20',
+    'editorIndentGuide.activeBackground': '#cccccc',
+  },
+};
diff --git a/app/assets/javascripts/monitoring/components/charts/anomaly.vue b/app/assets/javascripts/monitoring/components/charts/anomaly.vue
index b3b6f9e7b55..34da5885c97 100644
--- a/app/assets/javascripts/monitoring/components/charts/anomaly.vue
+++ b/app/assets/javascripts/monitoring/components/charts/anomaly.vue
@@ -209,7 +209,7 @@ export default {
     :series-config="metricSeriesConfig"
   >
     <slot></slot>
-    <template v-slot:tooltipContent="slotProps">
+    <template #tooltip-content="slotProps">
       <div
         v-for="(content, seriesIndex) in slotProps.tooltip.content"
         :key="seriesIndex"
diff --git a/app/assets/javascripts/projects/pipelines/charts/components/app.vue b/app/assets/javascripts/projects/pipelines/charts/components/app.vue
index 4dc1c512689..cdf03a5013f 100644
--- a/app/assets/javascripts/projects/pipelines/charts/components/app.vue
+++ b/app/assets/javascripts/projects/pipelines/charts/components/app.vue
@@ -113,6 +113,9 @@ export default {
 </script>
 <template>
   <div>
+    <div class="mb-3">
+      <h3>{{ s__('PipelineCharts|CI / CD Analytics') }}</h3>
+    </div>
     <h4 class="my-4">{{ s__('PipelineCharts|Overall statistics') }}</h4>
     <div class="row">
       <div class="col-md-6">
diff --git a/app/assets/javascripts/releases/components/asset_links_form.vue b/app/assets/javascripts/releases/components/asset_links_form.vue
index 4bdc88f01dd..0698ca5e31f 100644
--- a/app/assets/javascripts/releases/components/asset_links_form.vue
+++ b/app/assets/javascripts/releases/components/asset_links_form.vue
@@ -162,7 +162,7 @@ export default {
           :state="isNameValid(link)"
           @change="onLinkTitleInput(link.id, $event)"
         />
-        <template v-slot:invalid-feedback>
+        <template #invalid-feedback>
           <span v-if="hasEmptyName(link)" class="invalid-feedback d-inline">
             {{ __('Link title is required') }}
           </span>
diff --git a/app/assets/javascripts/sidebar/components/assignees/uncollapsed_assignee_list.vue b/app/assets/javascripts/sidebar/components/assignees/uncollapsed_assignee_list.vue
index 3d112bba668..fed9e5886c0 100644
--- a/app/assets/javascripts/sidebar/components/assignees/uncollapsed_assignee_list.vue
+++ b/app/assets/javascripts/sidebar/components/assignees/uncollapsed_assignee_list.vue
@@ -66,7 +66,7 @@ export default {
 <template>
   <assignee-avatar-link
     v-if="hasOneUser"
-    v-slot="{ user }"
+    #default="{ user }"
     tooltip-placement="left"
     :tooltip-has-name="false"
     :user="firstUser"
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline_container.vue b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline_container.vue
index d81e99d3c09..46210d810bc 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline_container.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline_container.vue
@@ -83,7 +83,7 @@ export default {
       :source-branch-link="branchLink"
       :troubleshooting-docs-path="mr.troubleshootingDocsPath"
     />
-    <template v-slot:footer>
+    <template #footer>
       <div v-if="mr.exposedArtifactsPath" class="js-exposed-artifacts">
         <artifacts-app :endpoint="mr.exposedArtifactsPath" />
       </div>
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/constants.js b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/constants.js
new file mode 100644
index 00000000000..ab652c9356a
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/constants.js
@@ -0,0 +1,5 @@
+// eslint-disable-next-line import/prefer-default-export
+export const DropdownVariant = {
+  Sidebar: 'sidebar',
+  Standalone: 'standalone',
+};
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/dropdown_button.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/dropdown_button.vue
index 55fa1e4ef9c..2730e8ee1da 100644
--- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/dropdown_button.vue
+++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/dropdown_button.vue
@@ -1,21 +1,35 @@
 <script>
-import { mapGetters } from 'vuex';
-import { GlDeprecatedButton, GlIcon } from '@gitlab/ui';
+import { mapActions, mapGetters } from 'vuex';
+import { GlButton, GlIcon } from '@gitlab/ui';
 
 export default {
   components: {
-    GlDeprecatedButton,
+    GlButton,
     GlIcon,
   },
   computed: {
-    ...mapGetters(['dropdownButtonText']),
+    ...mapGetters(['dropdownButtonText', 'isDropdownVariantStandalone']),
+  },
+  methods: {
+    ...mapActions(['toggleDropdownContents']),
+    handleButtonClick(e) {
+      if (this.isDropdownVariantStandalone) {
+        this.toggleDropdownContents();
+        e.stopPropagation();
+      }
+    },
   },
 };
 </script>
 
 <template>
-  <gl-deprecated-button class="labels-select-dropdown-button w-100 text-left">
-    <span class="dropdown-toggle-text">{{ dropdownButtonText }}</span>
+  <gl-button
+    class="labels-select-dropdown-button js-dropdown-button w-100 text-left"
+    @click="handleButtonClick"
+  >
+    <span class="dropdown-toggle-text" :class="{ 'flex-fill': isDropdownVariantStandalone }">{{
+      dropdownButtonText
+    }}</span>
     <gl-icon name="chevron-down" class="pull-right" />
-  </gl-deprecated-button>
+  </gl-button>
 </template>
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/dropdown_contents_create_view.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/dropdown_contents_create_view.vue
index 6bb77f6b6f3..ba8d8391952 100644
--- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/dropdown_contents_create_view.vue
+++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/dropdown_contents_create_view.vue
@@ -1,18 +1,10 @@
 <script>
 import { mapState, mapActions } from 'vuex';
-import {
-  GlTooltipDirective,
-  GlDeprecatedButton,
-  GlIcon,
-  GlFormInput,
-  GlLink,
-  GlLoadingIcon,
-} from '@gitlab/ui';
+import { GlTooltipDirective, GlButton, GlFormInput, GlLink, GlLoadingIcon } from '@gitlab/ui';
 
 export default {
   components: {
-    GlDeprecatedButton,
-    GlIcon,
+    GlButton,
     GlFormInput,
     GlLink,
     GlLoadingIcon,
@@ -60,25 +52,23 @@ export default {
 <template>
   <div class="labels-select-contents-create js-labels-create">
     <div class="dropdown-title d-flex align-items-center pt-0 pb-2">
-      <gl-deprecated-button
+      <gl-button
         :aria-label="__('Go back')"
         variant="link"
-        size="sm"
+        size="small"
         class="js-btn-back dropdown-header-button p-0"
+        icon="arrow-left"
         @click="toggleDropdownContentsCreateView"
-      >
-        <gl-icon name="arrow-left" />
-      </gl-deprecated-button>
+      />
       <span class="flex-grow-1">{{ labelsCreateTitle }}</span>
-      <gl-deprecated-button
+      <gl-button
         :aria-label="__('Close')"
         variant="link"
-        size="sm"
+        size="small"
         class="dropdown-header-button p-0"
+        icon="close"
         @click="toggleDropdownContents"
-      >
-        <gl-icon name="close" />
-      </gl-deprecated-button>
+      />
     </div>
     <div class="dropdown-input">
       <gl-form-input
@@ -107,21 +97,19 @@ export default {
       </div>
     </div>
     <div class="dropdown-actions clearfix pt-2 px-2">
-      <gl-deprecated-button
+      <gl-button
         :disabled="disableCreate"
-        variant="primary"
+        category="primary"
+        variant="success"
         class="pull-left d-flex align-items-center"
         @click="handleCreateClick"
       >
         <gl-loading-icon v-show="labelCreateInProgress" :inline="true" class="mr-1" />
         {{ __('Create') }}
-      </gl-deprecated-button>
-      <gl-deprecated-button
-        class="pull-right js-btn-cancel-create"
-        @click="toggleDropdownContentsCreateView"
-      >
+      </gl-button>
+      <gl-button class="pull-right js-btn-cancel-create" @click="toggleDropdownContentsCreateView">
         {{ __('Cancel') }}
-      </gl-deprecated-button>
+      </gl-button>
     </div>
   </div>
 </template>
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/dropdown_contents_labels_view.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/dropdown_contents_labels_view.vue
index a8e48bfe1a1..a548ef4ac86 100644
--- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/dropdown_contents_labels_view.vue
+++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/dropdown_contents_labels_view.vue
@@ -1,13 +1,13 @@
 <script>
 import { mapState, mapGetters, mapActions } from 'vuex';
-import { GlLoadingIcon, GlDeprecatedButton, GlIcon, GlSearchBoxByType, GlLink } from '@gitlab/ui';
+import { GlLoadingIcon, GlButton, GlIcon, GlSearchBoxByType, GlLink } from '@gitlab/ui';
 
 import { UP_KEY_CODE, DOWN_KEY_CODE, ENTER_KEY_CODE, ESC_KEY_CODE } from '~/lib/utils/keycodes';
 
 export default {
   components: {
     GlLoadingIcon,
-    GlDeprecatedButton,
+    GlButton,
     GlIcon,
     GlSearchBoxByType,
     GlLink,
@@ -20,6 +20,8 @@ export default {
   },
   computed: {
     ...mapState([
+      'allowLabelCreate',
+      'allowMultiselect',
       'labelsManagePath',
       'labels',
       'labelsFetchInProgress',
@@ -27,7 +29,7 @@ export default {
       'footerCreateLabelTitle',
       'footerManageLabelTitle',
     ]),
-    ...mapGetters(['selectedLabelsList']),
+    ...mapGetters(['selectedLabelsList', 'isDropdownVariantSidebar']),
     visibleLabels() {
       if (this.searchKey) {
         return this.labels.filter(label =>
@@ -56,6 +58,7 @@ export default {
       'toggleDropdownContentsCreateView',
       'fetchLabels',
       'updateSelectedLabels',
+      'toggleDropdownContents',
     ]),
     getDropdownLabelBoxStyle(label) {
       return {
@@ -111,6 +114,7 @@ export default {
     },
     handleLabelClick(label) {
       this.updateSelectedLabels([label]);
+      if (!this.allowMultiselect) this.toggleDropdownContents();
     },
   },
 };
@@ -123,17 +127,16 @@ export default {
       class="labels-fetch-loading position-absolute d-flex align-items-center w-100 h-100"
       size="md"
     />
-    <div class="dropdown-title d-flex align-items-center pt-0 pb-2">
+    <div v-if="isDropdownVariantSidebar" class="dropdown-title d-flex align-items-center pt-0 pb-2">
       <span class="flex-grow-1">{{ labelsListTitle }}</span>
-      <gl-deprecated-button
+      <gl-button
         :aria-label="__('Close')"
         variant="link"
-        size="sm"
+        size="small"
         class="dropdown-header-button p-0"
+        icon="close"
         @click="toggleDropdownContents"
-      >
-        <gl-icon name="close" />
-      </gl-deprecated-button>
+      />
     </div>
     <div class="dropdown-input">
       <gl-search-box-by-type v-model="searchKey" :autofocus="true" />
@@ -157,14 +160,13 @@ export default {
         </li>
       </ul>
     </div>
-    <div class="dropdown-footer">
+    <div v-if="isDropdownVariantSidebar" class="dropdown-footer">
       <ul class="list-unstyled">
-        <li>
-          <gl-deprecated-button
-            variant="link"
+        <li v-if="allowLabelCreate">
+          <gl-link
             class="d-flex w-100 flex-row text-break-word label-item"
             @click="toggleDropdownContentsCreateView"
-            >{{ footerCreateLabelTitle }}</gl-deprecated-button
+            >{{ footerCreateLabelTitle }}</gl-link
           >
         </li>
         <li>
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/labels_select_root.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/labels_select_root.vue
index 0ab45e3308c..a95a5a50a8b 100644
--- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/labels_select_root.vue
+++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/labels_select_root.vue
@@ -1,7 +1,7 @@
 <script>
 import $ from 'jquery';
 import Vue from 'vue';
-import Vuex, { mapState, mapActions } from 'vuex';
+import Vuex, { mapState, mapActions, mapGetters } from 'vuex';
 import { __ } from '~/locale';
 
 import DropdownValueCollapsed from '~/vue_shared/components/sidebar/labels_select/dropdown_value_collapsed.vue';
@@ -13,6 +13,8 @@ import DropdownValue from './dropdown_value.vue';
 import DropdownButton from './dropdown_button.vue';
 import DropdownContents from './dropdown_contents.vue';
 
+import { DropdownVariant } from './constants';
+
 Vue.use(Vuex);
 
 export default {
@@ -33,14 +35,19 @@ export default {
       type: Boolean,
       required: true,
     },
+    allowMultiselect: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
     allowScopedLabels: {
       type: Boolean,
       required: true,
     },
-    dropdownOnly: {
-      type: Boolean,
+    variant: {
+      type: String,
       required: false,
-      default: false,
+      default: DropdownVariant.Sidebar,
     },
     selectedLabels: {
       type: Array,
@@ -90,6 +97,10 @@ export default {
   },
   computed: {
     ...mapState(['showDropdownButton', 'showDropdownContents']),
+    ...mapGetters(['isDropdownVariantSidebar', 'isDropdownVariantStandalone']),
+    dropdownButtonVisible() {
+      return this.isDropdownVariantSidebar ? this.showDropdownButton : true;
+    },
   },
   watch: {
     selectedLabels(selectedLabels) {
@@ -100,9 +111,10 @@ export default {
   },
   mounted() {
     this.setInitialState({
-      dropdownOnly: this.dropdownOnly,
+      variant: this.variant,
       allowLabelEdit: this.allowLabelEdit,
       allowLabelCreate: this.allowLabelCreate,
+      allowMultiselect: this.allowMultiselect,
       allowScopedLabels: this.allowScopedLabels,
       selectedLabels: this.selectedLabels,
       labelsFetchPath: this.labelsFetchPath,
@@ -148,13 +160,20 @@ export default {
       // as the dropdown wrapper is not using `GlDropdown` as
       // it will also require us to use `BDropdownForm`
       // which is yet to be implemented in GitLab UI.
+      const hasExceptionClass = [
+        'js-dropdown-button',
+        'js-btn-cancel-create',
+        'js-sidebar-dropdown-toggle',
+      ].some(className => target?.classList.contains(className));
+
+      const hadExceptionParent = ['.js-btn-back', '.js-labels-list'].some(
+        className => $(target).parents(className).length,
+      );
+
       if (
-        this.showDropdownButton &&
         this.showDropdownContents &&
-        !$(target).parents('.js-btn-back').length &&
-        !$(target).parents('.js-labels-list').length &&
-        !target?.classList.contains('js-btn-cancel-create') &&
-        !target?.classList.contains('js-sidebar-dropdown-toggle') &&
+        !hadExceptionParent &&
+        !hasExceptionClass &&
         !this.$refs.dropdownButtonCollapsed?.$el.contains(target) &&
         !this.$refs.dropdownContents?.$el.contains(target)
       ) {
@@ -175,10 +194,12 @@ export default {
 </script>
 
 <template>
-  <div class="labels-select-wrapper position-relative">
-    <div v-if="!dropdownOnly">
+  <div
+    class="labels-select-wrapper position-relative"
+    :class="{ 'is-standalone': isDropdownVariantStandalone }"
+  >
+    <template v-if="isDropdownVariantSidebar">
       <dropdown-value-collapsed
-        v-if="allowLabelCreate"
         ref="dropdownButtonCollapsed"
         :labels="selectedLabels"
         @onValueClick="handleCollapsedValueClick"
@@ -190,8 +211,18 @@ export default {
       <dropdown-value v-show="!showDropdownButton">
         <slot></slot>
       </dropdown-value>
-      <dropdown-button v-show="showDropdownButton" />
-      <dropdown-contents v-if="showDropdownButton && showDropdownContents" ref="dropdownContents" />
-    </div>
+      <dropdown-button v-show="dropdownButtonVisible" />
+      <dropdown-contents
+        v-if="dropdownButtonVisible && showDropdownContents"
+        ref="dropdownContents"
+      />
+    </template>
+    <template v-if="isDropdownVariantStandalone">
+      <dropdown-button v-show="dropdownButtonVisible" />
+      <dropdown-contents
+        v-if="dropdownButtonVisible && showDropdownContents"
+        ref="dropdownContents"
+      />
+    </template>
   </div>
 </template>
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/store/getters.js b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/store/getters.js
index c08a8a8ea58..c39222959a9 100644
--- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/store/getters.js
+++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/store/getters.js
@@ -1,4 +1,5 @@
 import { __, s__, sprintf } from '~/locale';
+import { DropdownVariant } from '../constants';
 
 /**
  * Returns string representing current labels
@@ -6,8 +7,11 @@ import { __, s__, sprintf } from '~/locale';
  *
  * @param {object} state
  */
-export const dropdownButtonText = state => {
-  const selectedLabels = state.labels.filter(label => label.set);
+export const dropdownButtonText = (state, getters) => {
+  const selectedLabels = getters.isDropdownVariantSidebar
+    ? state.labels.filter(label => label.set)
+    : state.selectedLabels;
+
   if (!selectedLabels.length) {
     return __('Label');
   } else if (selectedLabels.length > 1) {
@@ -26,5 +30,19 @@ export const dropdownButtonText = state => {
  */
 export const selectedLabelsList = state => state.selectedLabels.map(label => label.id);
 
+/**
+ * Returns boolean representing whether dropdown variant
+ * is `sidebar`
+ * @param {object} state
+ */
+export const isDropdownVariantSidebar = state => state.variant === DropdownVariant.Sidebar;
+
+/**
+ * Returns boolean representing whether dropdown variant
+ * is `standalone`
+ * @param {object} state
+ */
+export const isDropdownVariantStandalone = state => state.variant === DropdownVariant.Standalone;
+
 // prevent babel-plugin-rewire from generating an invalid default during karma tests
 export default () => {};
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/store/mutations.js b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/store/mutations.js
index 32a78507e88..b55a58850a1 100644
--- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/store/mutations.js
+++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/store/mutations.js
@@ -1,4 +1,5 @@
 import * as types from './mutation_types';
+import { DropdownVariant } from '../constants';
 
 export default {
   [types.SET_INITIAL_STATE](state, props) {
@@ -10,7 +11,7 @@ export default {
   },
 
   [types.TOGGLE_DROPDOWN_CONTENTS](state) {
-    if (!state.dropdownOnly) {
+    if (state.variant === DropdownVariant.Sidebar) {
       state.showDropdownButton = !state.showDropdownButton;
     }
     state.showDropdownContents = !state.showDropdownContents;
@@ -68,7 +69,16 @@ export default {
           set: !label.set,
         });
       } else {
-        allLabels.push(label);
+        // In case multiselect is not allowed
+        // we unselect any existing selected label
+        const unchangedLabel = state.allowMultiselect
+          ? label
+          : {
+              ...label,
+              touched: true,
+              set: false,
+            };
+        allLabels.push(unchangedLabel);
       }
       return allLabels;
     }, []);
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/store/state.js b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/store/state.js
index c83bf9e47ec..6a6c0b4c0ee 100644
--- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/store/state.js
+++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/store/state.js
@@ -13,10 +13,11 @@ export default () => ({
   labelsFilterBasePath: '',
 
   // UI Flags
+  variant: '',
   allowLabelCreate: false,
   allowLabelEdit: false,
   allowScopedLabels: false,
-  dropdownOnly: false,
+  allowMultiselect: false,
   showDropdownButton: false,
   showDropdownContents: false,
   showDropdownContentsCreateView: false,