Add latest changes from gitlab-org/gitlab@master

5 files changed, 83 insertions, 14 deletions

diff --git a/app/assets/javascripts/super_sidebar/components/global_search/components/frequent_groups.vue b/app/assets/javascripts/super_sidebar/components/global_search/components/frequent_groups.vue
index 6f0a0a1fe79..e7e7e54ce77 100644
--- a/app/assets/javascripts/super_sidebar/components/global_search/components/frequent_groups.vue
+++ b/app/assets/javascripts/super_sidebar/components/global_search/components/frequent_groups.vue
@@ -1,13 +1,24 @@
 <script>
 import { s__ } from '~/locale';
 import { MAX_FREQUENT_GROUPS_COUNT } from '~/super_sidebar/constants';
+import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
+import currentUserFrecentGroupsQuery from '~/super_sidebar/graphql/queries/current_user_frecent_groups.query.graphql';
 import FrequentItems from './frequent_items.vue';
 
 export default {
   name: 'FrequentlyVisitedGroups',
+  apollo: {
+    frecentGroups: {
+      query: currentUserFrecentGroupsQuery,
+      skip() {
+        return !this.glFeatures.frecentNamespacesSuggestions;
+      },
+    },
+  },
   components: {
     FrequentItems,
   },
+  mixins: [glFeatureFlagsMixin()],
   inject: ['groupsPath'],
   data() {
     const username = gon.current_username;
@@ -27,10 +38,12 @@ export default {
 
 <template>
   <frequent-items
+    :loading="$apollo.queries.frecentGroups.loading"
     :empty-state-text="$options.i18n.emptyStateText"
     :group-name="$options.i18n.groupName"
     :max-items="$options.MAX_FREQUENT_GROUPS_COUNT"
     :storage-key="storageKey"
+    :items="frecentGroups"
     view-all-items-icon="group"
     :view-all-items-text="$options.i18n.viewAllText"
     :view-all-items-path="groupsPath"
diff --git a/app/assets/javascripts/super_sidebar/components/global_search/components/frequent_item.vue b/app/assets/javascripts/super_sidebar/components/global_search/components/frequent_item.vue
index 5371887ee0f..b0007c21cdc 100644
--- a/app/assets/javascripts/super_sidebar/components/global_search/components/frequent_item.vue
+++ b/app/assets/javascripts/super_sidebar/components/global_search/components/frequent_item.vue
@@ -2,6 +2,7 @@
 import { GlButton, GlTooltipDirective } from '@gitlab/ui';
 import ProjectAvatar from '~/vue_shared/components/project_avatar.vue';
 import { __ } from '~/locale';
+import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 
 export default {
   name: 'FrequentlyVisitedItem',
@@ -12,6 +13,7 @@ export default {
   directives: {
     GlTooltip: GlTooltipDirective,
   },
+  mixins: [glFeatureFlagsMixin()],
   props: {
     item: {
       type: Object,
@@ -51,6 +53,7 @@ export default {
     </div>
 
     <gl-button
+      v-if="!glFeatures.frecentNamespacesSuggestions"
       v-gl-tooltip.left
       icon="dash"
       category="tertiary"
diff --git a/app/assets/javascripts/super_sidebar/components/global_search/components/frequent_item_skeleton.vue b/app/assets/javascripts/super_sidebar/components/global_search/components/frequent_item_skeleton.vue
new file mode 100644
index 00000000000..dce18b2c46e
--- /dev/null
+++ b/app/assets/javascripts/super_sidebar/components/global_search/components/frequent_item_skeleton.vue
@@ -0,0 +1,17 @@
+<script>
+import { GlSkeletonLoader } from '@gitlab/ui';
+
+export default {
+  components: {
+    GlSkeletonLoader,
+  },
+};
+</script>
+
+<template>
+  <gl-skeleton-loader :width="737" :height="48">
+    <rect width="24" height="24" y="12" x="8" />
+    <rect width="120" height="12" y="10" x="36" />
+    <rect width="100" height="12" y="26" x="36" />
+  </gl-skeleton-loader>
+</template>
diff --git a/app/assets/javascripts/super_sidebar/components/global_search/components/frequent_items.vue b/app/assets/javascripts/super_sidebar/components/global_search/components/frequent_items.vue
index ddadd6856ca..2e431c4f8da 100644
--- a/app/assets/javascripts/super_sidebar/components/global_search/components/frequent_items.vue
+++ b/app/assets/javascripts/super_sidebar/components/global_search/components/frequent_items.vue
@@ -3,8 +3,10 @@ import { GlDisclosureDropdownGroup, GlDisclosureDropdownItem, GlIcon } from '@gi
 import { truncateNamespace } from '~/lib/utils/text_utility';
 import { getItemsFromLocalStorage, removeItemFromLocalStorage } from '~/super_sidebar/utils';
 import { TRACKING_UNKNOWN_PANEL } from '~/super_sidebar/constants';
+import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import { TRACKING_CLICK_COMMAND_PALETTE_ITEM } from '../command_palette/constants';
 import FrequentItem from './frequent_item.vue';
+import FrequentItemSkeleton from './frequent_item_skeleton.vue';
 
 export default {
   name: 'FrequentlyVisitedItems',
@@ -13,8 +15,15 @@ export default {
     GlDisclosureDropdownItem,
     GlIcon,
     FrequentItem,
+    FrequentItemSkeleton,
   },
+  mixins: [glFeatureFlagsMixin()],
   props: {
+    loading: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
     emptyStateText: {
       type: String,
       required: true,
@@ -45,10 +54,15 @@ export default {
       required: false,
       default: null,
     },
+    items: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
   },
   data() {
     return {
-      items: getItemsFromLocalStorage({
+      localItems: getItemsFromLocalStorage({
         storageKey: this.storageKey,
         maxItems: this.maxItems,
       }),
@@ -56,10 +70,11 @@ export default {
   },
   computed: {
     formattedItems() {
+      const items = this.glFeatures.frecentNamespacesSuggestions ? this.items : this.localItems;
       // Each item needs two different representations. One is for the
       // GlDisclosureDropdownItem, and the other is for the FrequentItem
       // renderer component inside it.
-      return this.items.map((item) => ({
+      return items.map((item) => ({
         forDropdown: {
           id: item.id,
 
@@ -83,7 +98,7 @@ export default {
       }));
     },
     showEmptyState() {
-      return this.items.length === 0;
+      return !this.loading && this.formattedItems.length === 0;
     },
     viewAllItem() {
       return {
@@ -93,18 +108,21 @@ export default {
     },
   },
   created() {
-    if (!this.storageKey) {
+    if (!this.glFeatures.frecentNamespacesSuggestions && !this.storageKey) {
       this.$emit('nothing-to-render');
     }
   },
   methods: {
     removeItem(item) {
+      if (this.glFeatures.frecentNamespacesSuggestions) {
+        return;
+      }
       removeItemFromLocalStorage({
         storageKey: this.storageKey,
         item,
       });
 
-      this.items = this.items.filter((i) => i.id !== item.id);
+      this.localItems = this.localItems.filter((i) => i.id !== item.id);
     },
   },
 };
@@ -114,16 +132,21 @@ export default {
   <gl-disclosure-dropdown-group v-if="storageKey" v-bind="$attrs">
     <template #group-label>{{ groupName }}</template>
 
-    <gl-disclosure-dropdown-item
-      v-for="item of formattedItems"
-      :key="item.forDropdown.id"
-      :item="item.forDropdown"
-      class="show-on-focus-or-hover--context"
-    >
-      <template #list-item
-        ><frequent-item :item="item.forRenderer" @remove="removeItem"
-      /></template>
+    <gl-disclosure-dropdown-item v-if="loading">
+      <frequent-item-skeleton />
     </gl-disclosure-dropdown-item>
+    <template v-else>
+      <gl-disclosure-dropdown-item
+        v-for="item of formattedItems"
+        :key="item.forDropdown.id"
+        :item="item.forDropdown"
+        class="show-on-focus-or-hover--context"
+      >
+        <template #list-item
+          ><frequent-item :item="item.forRenderer" @remove="removeItem"
+        /></template>
+      </gl-disclosure-dropdown-item>
+    </template>
 
     <gl-disclosure-dropdown-item v-if="showEmptyState" class="gl-cursor-text">
       <span class="gl-text-gray-500 gl-font-sm gl-my-3 gl-mx-3">{{ emptyStateText }}</span>
diff --git a/app/assets/javascripts/super_sidebar/components/global_search/components/frequent_projects.vue b/app/assets/javascripts/super_sidebar/components/global_search/components/frequent_projects.vue
index 35b254099c2..4a269d1b876 100644
--- a/app/assets/javascripts/super_sidebar/components/global_search/components/frequent_projects.vue
+++ b/app/assets/javascripts/super_sidebar/components/global_search/components/frequent_projects.vue
@@ -1,13 +1,24 @@
 <script>
 import { s__ } from '~/locale';
 import { MAX_FREQUENT_PROJECTS_COUNT } from '~/super_sidebar/constants';
+import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
+import currentUserFrecentProjectsQuery from '~/super_sidebar/graphql/queries/current_user_frecent_projects.query.graphql';
 import FrequentItems from './frequent_items.vue';
 
 export default {
   name: 'FrequentlyVisitedProjects',
+  apollo: {
+    frecentProjects: {
+      query: currentUserFrecentProjectsQuery,
+      skip() {
+        return !this.glFeatures.frecentNamespacesSuggestions;
+      },
+    },
+  },
   components: {
     FrequentItems,
   },
+  mixins: [glFeatureFlagsMixin()],
   inject: ['projectsPath'],
   data() {
     const username = gon.current_username;
@@ -27,10 +38,12 @@ export default {
 
 <template>
   <frequent-items
+    :loading="$apollo.queries.frecentProjects.loading"
     :empty-state-text="$options.i18n.emptyStateText"
     :group-name="$options.i18n.groupName"
     :max-items="$options.MAX_FREQUENT_PROJECTS_COUNT"
     :storage-key="storageKey"
+    :items="frecentProjects"
     view-all-items-icon="project"
     :view-all-items-text="$options.i18n.viewAllText"
     :view-all-items-path="projectsPath"