Add latest changes from gitlab-org/gitlab@master

15 files changed, 97 insertions, 263 deletions

diff --git a/app/assets/javascripts/boards/components/board_form.vue b/app/assets/javascripts/boards/components/board_form.vue
index 88bd1b0eaf0..e939f0c0ebe 100644
--- a/app/assets/javascripts/boards/components/board_form.vue
+++ b/app/assets/javascripts/boards/components/board_form.vue
@@ -1,7 +1,7 @@
 <script>
 import { GlModal, GlAlert } from '@gitlab/ui';
 import { mapGetters, mapActions, mapState } from 'vuex';
-import { TYPE_ITERATION, TYPE_MILESTONE } from '~/graphql_shared/constants';
+import { TYPE_USER, TYPE_ITERATION, TYPE_MILESTONE } from '~/graphql_shared/constants';
 import { convertToGraphQLId } from '~/graphql_shared/utils';
 import { getParameterByName, visitUrl } from '~/lib/utils/url_utility';
 import { __, s__ } from '~/locale';
@@ -188,7 +188,9 @@ export default {
     issueBoardScopeMutationVariables() {
       return {
         weight: this.board.weight,
-        assigneeId: this.board.assignee?.id || null,
+        assigneeId: this.board.assignee?.id
+          ? convertToGraphQLId(TYPE_USER, this.board.assignee.id)
+          : null,
         milestoneId: this.board.milestone?.id
           ? convertToGraphQLId(TYPE_MILESTONE, this.board.milestone.id)
           : null,
diff --git a/app/assets/javascripts/packages_and_registries/package_registry/components/details/package_title.vue b/app/assets/javascripts/packages_and_registries/package_registry/components/details/package_title.vue
index 65547af3913..44d7807639d 100644
--- a/app/assets/javascripts/packages_and_registries/package_registry/components/details/package_title.vue
+++ b/app/assets/javascripts/packages_and_registries/package_registry/components/details/package_title.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlIcon, GlSprintf, GlBadge } from '@gitlab/ui';
+import { GlIcon, GlSprintf, GlBadge, GlResizeObserverDirective } from '@gitlab/ui';
 import { GlBreakpointInstance } from '@gitlab/ui/dist/utils';
 import { numberToHumanSize } from '~/lib/utils/number_utils';
 import { __ } from '~/locale';
@@ -21,6 +21,9 @@ export default {
     GlBadge,
     TimeAgoTooltip,
   },
+  directives: {
+    GlResizeObserver: GlResizeObserverDirective,
+  },
   i18n: {
     packageInfo: __('v%{version} published %{timeAgo}'),
   },
@@ -60,18 +63,26 @@ export default {
     },
   },
   mounted() {
-    this.isDesktop = GlBreakpointInstance.isDesktop();
+    this.checkBreakpoints();
   },
   methods: {
     dynamicSlotName(index) {
       return `metadata-tag${index}`;
     },
+    checkBreakpoints() {
+      this.isDesktop = GlBreakpointInstance.isDesktop();
+    },
   },
 };
 </script>
 
 <template>
-  <title-area :title="packageEntity.name" :avatar="packageIcon" data-qa-selector="package_title">
+  <title-area
+    v-gl-resize-observer="checkBreakpoints"
+    :title="packageEntity.name"
+    :avatar="packageIcon"
+    data-qa-selector="package_title"
+  >
     <template #sub-header>
       <gl-icon name="eye" class="gl-mr-3" />
       <span data-testid="sub-header">
diff --git a/app/assets/javascripts/sidebar/components/labels/sidebar_labels.vue b/app/assets/javascripts/sidebar/components/labels/sidebar_labels.vue
index 55179947756..9fdf941579d 100644
--- a/app/assets/javascripts/sidebar/components/labels/sidebar_labels.vue
+++ b/app/assets/javascripts/sidebar/components/labels/sidebar_labels.vue
@@ -144,16 +144,11 @@ export default {
     v-if="glFeatures.labelsWidget"
     class="block labels js-labels-block"
     :allow-label-remove="allowLabelEdit"
-    :allow-label-create="allowLabelCreate"
-    :allow-label-edit="allowLabelEdit"
     :allow-multiselect="true"
-    :allow-scoped-labels="allowScopedLabels"
     :footer-create-label-title="__('Create project label')"
     :footer-manage-label-title="__('Manage project labels')"
     :labels-create-title="__('Create project label')"
-    :labels-fetch-path="labelsFetchPath"
     :labels-filter-base-path="projectIssuesPath"
-    :labels-manage-path="labelsManagePath"
     :labels-select-in-progress="isLabelsSelectInProgress"
     :selected-labels="selectedLabels"
     :variant="$options.variant"
diff --git a/app/assets/javascripts/vue_shared/components/registry/title_area.vue b/app/assets/javascripts/vue_shared/components/registry/title_area.vue
index c63d91b78d3..4b21ec0330a 100644
--- a/app/assets/javascripts/vue_shared/components/registry/title_area.vue
+++ b/app/assets/javascripts/vue_shared/components/registry/title_area.vue
@@ -1,5 +1,6 @@
 <script>
 import { GlAvatar, GlSprintf, GlLink, GlSkeletonLoader } from '@gitlab/ui';
+import { isEqual } from 'lodash';
 
 export default {
   name: 'TitleArea',
@@ -36,13 +37,21 @@ export default {
       metadataSlots: [],
     };
   },
-  async mounted() {
-    const METADATA_PREFIX = 'metadata-';
-    this.metadataSlots = Object.keys(this.$slots).filter((k) => k.startsWith(METADATA_PREFIX));
+  mounted() {
+    this.recalculateMetadataSlots();
+  },
+  updated() {
+    this.recalculateMetadataSlots();
+  },
+  methods: {
+    recalculateMetadataSlots() {
+      const METADATA_PREFIX = 'metadata-';
+      const metadataSlots = Object.keys(this.$slots).filter((k) => k.startsWith(METADATA_PREFIX));
 
-    // we need to wait for next tick to ensure that dynamic names slots are picked up
-    await this.$nextTick();
-    this.metadataSlots = Object.keys(this.$slots).filter((k) => k.startsWith(METADATA_PREFIX));
+      if (!isEqual(metadataSlots, this.metadataSlots)) {
+        this.metadataSlots = metadataSlots;
+      }
+    },
   },
 };
 </script>
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/dropdown_contents.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/dropdown_contents.vue
index 3145f0aaf7a..0fcc67c0ffa 100644
--- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/dropdown_contents.vue
+++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/dropdown_contents.vue
@@ -1,9 +1,9 @@
 <script>
 import { GlButton, GlDropdown, GlDropdownItem, GlLink } from '@gitlab/ui';
-import { mapActions, mapGetters, mapState } from 'vuex';
 
 import DropdownContentsCreateView from './dropdown_contents_create_view.vue';
 import DropdownContentsLabelsView from './dropdown_contents_labels_view.vue';
+import { isDropdownVariantSidebar, isDropdownVariantEmbedded } from './utils';
 
 export default {
   components: {
@@ -32,6 +32,10 @@ export default {
       type: String,
       required: true,
     },
+    dropdownButtonText: {
+      type: String,
+      required: true,
+    },
     footerCreateLabelTitle: {
       type: String,
       required: true,
@@ -40,10 +44,17 @@ export default {
       type: String,
       required: true,
     },
+    variant: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      showDropdownContentsCreateView: false,
+    };
   },
   computed: {
-    ...mapState(['showDropdownContentsCreateView']),
-    ...mapGetters(['dropdownButtonText', 'isDropdownVariantSidebar', 'isDropdownVariantEmbedded']),
     dropdownContentsView() {
       if (this.showDropdownContentsCreateView) {
         return 'dropdown-contents-create-view';
@@ -56,20 +67,25 @@ export default {
     showDropdownFooter() {
       return (
         !this.showDropdownContentsCreateView &&
-        (this.isDropdownVariantSidebar || this.isDropdownVariantEmbedded)
+        (this.isDropdownVariantSidebar(this.variant) ||
+          this.isDropdownVariantEmbedded(this.variant))
       );
     },
   },
   methods: {
-    ...mapActions(['toggleDropdownContentsCreateView']),
     showDropdown() {
       this.$refs.dropdown.show();
     },
+    toggleDropdownContentsCreateView() {
+      this.showDropdownContentsCreateView = !this.showDropdownContentsCreateView;
+    },
     toggleDropdownContent() {
       this.toggleDropdownContentsCreateView();
       // Required to recalculate dropdown position as its size changes
       this.$refs.dropdown.$refs.dropdown.$_popper.scheduleUpdate();
     },
+    isDropdownVariantSidebar,
+    isDropdownVariantEmbedded,
   },
 };
 </script>
@@ -83,7 +99,7 @@ export default {
   >
     <template #header>
       <div
-        v-if="isDropdownVariantSidebar || isDropdownVariantEmbedded"
+        v-if="isDropdownVariantSidebar(variant) || isDropdownVariantEmbedded(variant)"
         class="dropdown-title gl-display-flex gl-align-items-center gl-pt-0 gl-pb-3!"
       >
         <gl-button
@@ -123,7 +139,7 @@ export default {
         >
           {{ footerCreateLabelTitle }}
         </gl-dropdown-item>
-        <gl-dropdown-item :href="labelsManagePath">
+        <gl-dropdown-item :href="labelsManagePath" @click.native.capture.stop>
           {{ footerManageLabelTitle }}
         </gl-dropdown-item>
       </div>
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/dropdown_value.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/dropdown_value.vue
index 58a940bca3b..3575f3865ff 100644
--- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/dropdown_value.vue
+++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/dropdown_value.vue
@@ -7,6 +7,7 @@ export default {
   components: {
     GlLabel,
   },
+  inject: ['allowScopedLabels'],
   props: {
     disableLabels: {
       type: Boolean,
@@ -21,10 +22,6 @@ export default {
       type: Boolean,
       required: true,
     },
-    allowScopedLabels: {
-      type: Boolean,
-      required: true,
-    },
     labelsFilterBasePath: {
       type: String,
       required: true,
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/labels_select_root.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/labels_select_root.vue
index c222ad657f8..3c834770563 100644
--- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/labels_select_root.vue
+++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/labels_select_root.vue
@@ -1,6 +1,6 @@
 <script>
 import Vue from 'vue';
-import Vuex, { mapActions, mapGetters } from 'vuex';
+import Vuex from 'vuex';
 import { __ } from '~/locale';
 import SidebarEditableItem from '~/sidebar/components/sidebar_editable_item.vue';
 import { DropdownVariant } from './constants';
@@ -8,45 +8,33 @@ import DropdownContents from './dropdown_contents.vue';
 import DropdownValue from './dropdown_value.vue';
 import DropdownValueCollapsed from './dropdown_value_collapsed.vue';
 import issueLabelsQuery from './graphql/issue_labels.query.graphql';
-import labelsSelectModule from './store';
+import {
+  isDropdownVariantSidebar,
+  isDropdownVariantStandalone,
+  isDropdownVariantEmbedded,
+} from './utils';
 
 Vue.use(Vuex);
 
 export default {
-  store: new Vuex.Store(labelsSelectModule()),
   components: {
     DropdownValue,
     DropdownContents,
     DropdownValueCollapsed,
     SidebarEditableItem,
   },
-  inject: ['iid', 'projectPath'],
+  inject: ['iid', 'projectPath', 'allowLabelEdit'],
   props: {
     allowLabelRemove: {
       type: Boolean,
       required: false,
       default: false,
     },
-    allowLabelEdit: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    allowLabelCreate: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
     allowMultiselect: {
       type: Boolean,
       required: false,
       default: false,
     },
-    allowScopedLabels: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
     variant: {
       type: String,
       required: false,
@@ -62,16 +50,6 @@ export default {
       required: false,
       default: false,
     },
-    labelsFetchPath: {
-      type: String,
-      required: false,
-      default: '',
-    },
-    labelsManagePath: {
-      type: String,
-      required: false,
-      default: '',
-    },
     labelsFilterBasePath: {
       type: String,
       required: false,
@@ -133,46 +111,7 @@ export default {
       },
     },
   },
-  computed: {
-    ...mapGetters([
-      'isDropdownVariantSidebar',
-      'isDropdownVariantStandalone',
-      'isDropdownVariantEmbedded',
-    ]),
-  },
-  watch: {
-    selectedLabels(selectedLabels) {
-      this.setInitialState({
-        selectedLabels,
-      });
-    },
-    isEditing(newVal) {
-      if (newVal) {
-        this.toggleDropdownContents();
-      }
-    },
-  },
-  mounted() {
-    this.setInitialState({
-      variant: this.variant,
-      allowLabelRemove: this.allowLabelRemove,
-      allowLabelEdit: this.allowLabelEdit,
-      allowLabelCreate: this.allowLabelCreate,
-      allowMultiselect: this.allowMultiselect,
-      allowScopedLabels: this.allowScopedLabels,
-      dropdownButtonText: this.dropdownButtonText,
-      selectedLabels: this.selectedLabels,
-      labelsFetchPath: this.labelsFetchPath,
-      labelsManagePath: this.labelsManagePath,
-      labelsFilterBasePath: this.labelsFilterBasePath,
-      labelsFilterParam: this.labelsFilterParam,
-      labelsListTitle: this.labelsListTitle,
-      footerCreateLabelTitle: this.footerCreateLabelTitle,
-      footerManageLabelTitle: this.footerManageLabelTitle,
-    });
-  },
   methods: {
-    ...mapActions(['setInitialState']),
     handleDropdownClose(labels) {
       if (labels.length) this.$emit('updateSelectedLabels', labels);
       this.$emit('onDropdownClose');
@@ -188,6 +127,9 @@ export default {
         this.$refs.dropdownContents.showDropdown();
       });
     },
+    isDropdownVariantSidebar,
+    isDropdownVariantStandalone,
+    isDropdownVariantEmbedded,
   },
 };
 </script>
@@ -196,11 +138,11 @@ export default {
   <div
     class="labels-select-wrapper position-relative"
     :class="{
-      'is-standalone': isDropdownVariantStandalone,
-      'is-embedded': isDropdownVariantEmbedded,
+      'is-standalone': isDropdownVariantStandalone(variant),
+      'is-embedded': isDropdownVariantEmbedded(variant),
     }"
   >
-    <template v-if="isDropdownVariantSidebar">
+    <template v-if="isDropdownVariantSidebar(variant)">
       <dropdown-value-collapsed
         ref="dropdownButtonCollapsed"
         :labels="issueLabels"
@@ -210,6 +152,7 @@ export default {
         ref="editable"
         :title="__('Labels')"
         :loading="labelsSelectInProgress"
+        :can-edit="allowLabelEdit"
         @open="showDropdown"
       >
         <template #collapsed>
@@ -217,7 +160,6 @@ export default {
             :disable-labels="labelsSelectInProgress"
             :selected-labels="issueLabels"
             :allow-label-remove="allowLabelRemove"
-            :allow-scoped-labels="allowScopedLabels"
             :labels-filter-base-path="labelsFilterBasePath"
             :labels-filter-param="labelsFilterParam"
             @onLabelRemove="$emit('onLabelRemove', $event)"
@@ -230,7 +172,6 @@ export default {
             :disable-labels="labelsSelectInProgress"
             :selected-labels="issueLabels"
             :allow-label-remove="allowLabelRemove"
-            :allow-scoped-labels="allowScopedLabels"
             :labels-filter-base-path="labelsFilterBasePath"
             :labels-filter-param="labelsFilterParam"
             class="gl-mb-2"
@@ -241,12 +182,14 @@ export default {
           <dropdown-contents
             v-if="edit"
             ref="dropdownContents"
+            :dropdown-button-text="dropdownButtonText"
             :allow-multiselect="allowMultiselect"
             :labels-list-title="labelsListTitle"
             :footer-create-label-title="footerCreateLabelTitle"
             :footer-manage-label-title="footerManageLabelTitle"
             :labels-create-title="labelsCreateTitle"
             :selected-labels="selectedLabels"
+            :variant="variant"
             @closeDropdown="collapseDropdown"
             @setLabels="handleDropdownClose"
           />
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/store/actions.js b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/store/actions.js
deleted file mode 100644
index b3d4a204a81..00000000000
--- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/store/actions.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import * as types from './mutation_types';
-
-export const setInitialState = ({ commit }, props) => commit(types.SET_INITIAL_STATE, props);
-
-export const toggleDropdownButton = ({ commit }) => commit(types.TOGGLE_DROPDOWN_BUTTON);
-export const toggleDropdownContents = ({ commit }) => commit(types.TOGGLE_DROPDOWN_CONTENTS);
-
-export const toggleDropdownContentsCreateView = ({ commit }) =>
-  commit(types.TOGGLE_DROPDOWN_CONTENTS_CREATE_VIEW);
-
-export const updateSelectedLabels = ({ commit }, labels) =>
-  commit(types.UPDATE_SELECTED_LABELS, { labels });
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/store/getters.js b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/store/getters.js
deleted file mode 100644
index d14f96720b7..00000000000
--- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/store/getters.js
+++ /dev/null
@@ -1,52 +0,0 @@
-import { __, s__, sprintf } from '~/locale';
-import { DropdownVariant } from '../constants';
-
-/**
- * Returns string representing current labels
- * selection on dropdown button.
- *
- * @param {object} state
- */
-export const dropdownButtonText = (state, getters) => {
-  const selectedLabels = getters.isDropdownVariantSidebar
-    ? state.labels.filter((label) => label.set)
-    : state.selectedLabels;
-
-  if (!selectedLabels.length) {
-    return state.dropdownButtonText || __('Label');
-  } else if (selectedLabels.length > 1) {
-    return sprintf(s__('LabelSelect|%{firstLabelName} +%{remainingLabelCount} more'), {
-      firstLabelName: selectedLabels[0].title,
-      remainingLabelCount: selectedLabels.length - 1,
-    });
-  }
-  return selectedLabels[0].title;
-};
-
-/**
- * Returns array containing only label IDs from
- * selectedLabels array.
- * @param {object} 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;
-
-/**
- * Returns boolean representing whether dropdown variant
- * is `embedded`
- * @param {object} state
- */
-export const isDropdownVariantEmbedded = (state) => state.variant === DropdownVariant.Embedded;
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/store/index.js b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/store/index.js
deleted file mode 100644
index 5f61cb732c8..00000000000
--- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/store/index.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import * as actions from './actions';
-import * as getters from './getters';
-import mutations from './mutations';
-import state from './state';
-
-export default () => ({
-  namespaced: true,
-  state: state(),
-  actions,
-  getters,
-  mutations,
-});
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/store/mutation_types.js b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/store/mutation_types.js
deleted file mode 100644
index bd71c3b85f1..00000000000
--- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/store/mutation_types.js
+++ /dev/null
@@ -1,8 +0,0 @@
-export const SET_INITIAL_STATE = 'SET_INITIAL_STATE';
-
-export const TOGGLE_DROPDOWN_BUTTON = 'TOGGLE_DROPDOWN_VISIBILITY';
-export const TOGGLE_DROPDOWN_CONTENTS = 'TOGGLE_DROPDOWN_CONTENTS';
-
-export const UPDATE_SELECTED_LABELS = 'UPDATE_SELECTED_LABELS';
-
-export const TOGGLE_DROPDOWN_CONTENTS_CREATE_VIEW = 'TOGGLE_DROPDOWN_CONTENTS_CREATE_VIEW';
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/store/mutations.js b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/store/mutations.js
deleted file mode 100644
index 45ec4d7ae04..00000000000
--- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/store/mutations.js
+++ /dev/null
@@ -1,50 +0,0 @@
-import { isScopedLabel, scopedLabelKey } from '~/lib/utils/common_utils';
-import { DropdownVariant } from '../constants';
-import * as types from './mutation_types';
-
-export default {
-  [types.SET_INITIAL_STATE](state, props) {
-    Object.assign(state, { ...props });
-  },
-
-  [types.TOGGLE_DROPDOWN_BUTTON](state) {
-    state.showDropdownButton = !state.showDropdownButton;
-  },
-
-  [types.TOGGLE_DROPDOWN_CONTENTS](state) {
-    if (state.variant === DropdownVariant.Sidebar) {
-      state.showDropdownButton = !state.showDropdownButton;
-    }
-    state.showDropdownContents = !state.showDropdownContents;
-    // Ensure that Create View is hidden by default
-    // when dropdown contents are revealed.
-    if (state.showDropdownContents) {
-      state.showDropdownContentsCreateView = false;
-    }
-  },
-
-  [types.TOGGLE_DROPDOWN_CONTENTS_CREATE_VIEW](state) {
-    state.showDropdownContentsCreateView = !state.showDropdownContentsCreateView;
-  },
-  [types.UPDATE_SELECTED_LABELS](state, { labels }) {
-    // Find the label to update from all the labels
-    // and change `set` prop value to represent their current state.
-    const labelId = labels.pop()?.id;
-    const candidateLabel = state.labels.find((label) => labelId === label.id);
-    if (candidateLabel) {
-      candidateLabel.touched = true;
-      candidateLabel.set = !candidateLabel.set;
-    }
-
-    if (isScopedLabel(candidateLabel)) {
-      const scopedBase = scopedLabelKey(candidateLabel);
-      const currentActiveScopedLabel = state.labels.find(
-        ({ title }) => title.indexOf(scopedBase) === 0 && title !== candidateLabel.title,
-      );
-
-      if (currentActiveScopedLabel) {
-        currentActiveScopedLabel.set = false;
-      }
-    }
-  },
-};
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/store/state.js b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/store/state.js
deleted file mode 100644
index 220bab05ed2..00000000000
--- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/store/state.js
+++ /dev/null
@@ -1,28 +0,0 @@
-export default () => ({
-  // Initial Data
-  labels: [],
-  selectedLabels: [],
-  labelsListTitle: '',
-  footerCreateLabelTitle: '',
-  footerManageLabelTitle: '',
-  dropdownButtonText: '',
-
-  // Paths
-  namespace: '',
-  labelsFetchPath: '',
-  labelsFilterBasePath: '',
-
-  // UI Flags
-  variant: '',
-  allowLabelRemove: false,
-  allowLabelCreate: false,
-  allowLabelEdit: false,
-  allowScopedLabels: false,
-  allowMultiselect: false,
-  showDropdownButton: false,
-  showDropdownContents: false,
-  showDropdownContentsCreateView: false,
-  labelsFetchInProgress: false,
-  labelCreateInProgress: false,
-  selectedLabelsUpdated: false,
-});
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/utils.js b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/utils.js
new file mode 100644
index 00000000000..b5cd946a189
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/utils.js
@@ -0,0 +1,22 @@
+import { DropdownVariant } from './constants';
+
+/**
+ * Returns boolean representing whether dropdown variant
+ * is `sidebar`
+ * @param {string} variant
+ */
+export const isDropdownVariantSidebar = (variant) => variant === DropdownVariant.Sidebar;
+
+/**
+ * Returns boolean representing whether dropdown variant
+ * is `standalone`
+ * @param {string} variant
+ */
+export const isDropdownVariantStandalone = (variant) => variant === DropdownVariant.Standalone;
+
+/**
+ * Returns boolean representing whether dropdown variant
+ * is `embedded`
+ * @param {string} variant
+ */
+export const isDropdownVariantEmbedded = (variant) => variant === DropdownVariant.Embedded;
diff --git a/app/graphql/types/user_interface.rb b/app/graphql/types/user_interface.rb
index 95038c0f863..8c67275eb73 100644
--- a/app/graphql/types/user_interface.rb
+++ b/app/graphql/types/user_interface.rb
@@ -61,7 +61,8 @@ module Types
           description: 'Group memberships of the user.'
     field :groups,
           resolver: Resolvers::Users::GroupsResolver,
-          description: 'Groups where the user has access.'
+          description: 'Groups where the user has access. Will always return `null` if ' \
+                       '`paginatable_namespace_drop_down_for_project_creation` feature flag is disabled.'
     field :group_count,
           resolver: Resolvers::Users::GroupCountResolver,
           description: 'Group count for the user.'