Add latest changes from gitlab-org/gitlab@master

3 files changed, 115 insertions, 39 deletions

diff --git a/app/assets/javascripts/super_sidebar/components/global_search/components/global_search_default_issuables.vue b/app/assets/javascripts/super_sidebar/components/global_search/components/global_search_default_issuables.vue
new file mode 100644
index 00000000000..dbab0000594
--- /dev/null
+++ b/app/assets/javascripts/super_sidebar/components/global_search/components/global_search_default_issuables.vue
@@ -0,0 +1,44 @@
+<script>
+import { GlDisclosureDropdownGroup } from '@gitlab/ui';
+import { mapState, mapGetters } from 'vuex';
+import { ALL_GITLAB } from '~/vue_shared/global_search/constants';
+
+export default {
+  name: 'DefaultIssuables',
+  i18n: {
+    ALL_GITLAB,
+  },
+  components: {
+    GlDisclosureDropdownGroup,
+  },
+  computed: {
+    ...mapState(['searchContext']),
+    ...mapGetters(['defaultSearchOptions']),
+    currentContextName() {
+      return (
+        this.searchContext?.project?.name ||
+        this.searchContext?.group?.name ||
+        this.$options.i18n.ALL_GITLAB
+      );
+    },
+    shouldRender() {
+      return this.group.items.length > 0;
+    },
+    group() {
+      return {
+        name: this.currentContextName,
+        items: this.defaultSearchOptions,
+      };
+    },
+  },
+  created() {
+    if (!this.shouldRender) {
+      this.$emit('nothing-to-render');
+    }
+  },
+};
+</script>
+
+<template>
+  <gl-disclosure-dropdown-group v-if="shouldRender" v-bind="$attrs" :group="group" />
+</template>
diff --git a/app/assets/javascripts/super_sidebar/components/global_search/components/global_search_default_items.vue b/app/assets/javascripts/super_sidebar/components/global_search/components/global_search_default_items.vue
index eb76277d12b..0c325f6d13f 100644
--- a/app/assets/javascripts/super_sidebar/components/global_search/components/global_search_default_items.vue
+++ b/app/assets/javascripts/super_sidebar/components/global_search/components/global_search_default_items.vue
@@ -1,54 +1,51 @@
 <script>
-import { GlDisclosureDropdownGroup } from '@gitlab/ui';
-import { mapState, mapGetters } from 'vuex';
-import { ALL_GITLAB, PLACES } from '~/vue_shared/global_search/constants';
+import DefaultPlaces from './global_search_default_places.vue';
+import DefaultIssuables from './global_search_default_issuables.vue';
+
+const components = [DefaultPlaces, DefaultIssuables];
 
 export default {
   name: 'GlobalSearchDefaultItems',
-  i18n: {
-    ALL_GITLAB,
-    PLACES,
-  },
-  components: {
-    GlDisclosureDropdownGroup,
+  data() {
+    return {
+      // The components here are expected to:
+      // - be responsible for getting their own data,
+      // - render a GlDisclosureDropdownGroup as the root vnode,
+      // - transparently pass all attrs to it (e.g., `bordered`),
+      // - not render anything if they have no data,
+      // - emit a `nothing-to-render` event if they have nothing to render.
+      // - have a unique `name`
+      componentNames: components.map(({ name }) => name),
+    };
   },
-  inject: ['contextSwitcherLinks'],
-  computed: {
-    ...mapState(['searchContext']),
-    ...mapGetters(['defaultSearchOptions']),
-    currentContextName() {
-      return (
-        this.searchContext?.project?.name ||
-        this.searchContext?.group?.name ||
-        this.$options.i18n.ALL_GITLAB
-      );
+  methods: {
+    componentFromName(name) {
+      return components.find((component) => component.name === name);
     },
-    groups() {
-      const groups = [
-        {
-          name: this.$options.i18n.PLACES,
-          items: this.contextSwitcherLinks.map(({ title, link }) => ({ text: title, href: link })),
-        },
-        {
-          name: this.currentContextName,
-          items: this.defaultSearchOptions,
-        },
-      ];
-
-      return groups.filter(({ items }) => items.length > 0);
+    remove(nameToRemove) {
+      const indexToRemove = this.componentNames.findIndex((name) => name === nameToRemove);
+      if (indexToRemove !== -1) this.componentNames.splice(indexToRemove, 1);
+    },
+    attrs(index) {
+      return index === 0
+        ? null
+        : {
+            bordered: true,
+            class: 'gl-mt-3',
+          };
     },
   },
 };
 </script>
 
 <template>
-  <ul class="gl-p-0 gl-m-0 gl-list-style-none">
-    <gl-disclosure-dropdown-group
-      v-for="(group, index) of groups"
-      :key="group.name"
-      :group="group"
-      bordered
-      :class="{ 'gl-mt-0!': index === 0 }"
+  <ul class="gl-p-0 gl-m-0 gl-pt-2 gl-list-style-none">
+    <component
+      :is="componentFromName(name)"
+      v-for="(name, index) in componentNames"
+      :key="name"
+      v-bind="attrs(index)"
+      @nothing-to-render="remove(name)"
     />
   </ul>
 </template>
diff --git a/app/assets/javascripts/super_sidebar/components/global_search/components/global_search_default_places.vue b/app/assets/javascripts/super_sidebar/components/global_search/components/global_search_default_places.vue
new file mode 100644
index 00000000000..9a375837102
--- /dev/null
+++ b/app/assets/javascripts/super_sidebar/components/global_search/components/global_search_default_places.vue
@@ -0,0 +1,35 @@
+<script>
+import { GlDisclosureDropdownGroup } from '@gitlab/ui';
+import { PLACES } from '~/vue_shared/global_search/constants';
+
+export default {
+  name: 'DefaultPlaces',
+  i18n: {
+    PLACES,
+  },
+  components: {
+    GlDisclosureDropdownGroup,
+  },
+  inject: ['contextSwitcherLinks'],
+  computed: {
+    shouldRender() {
+      return this.contextSwitcherLinks.length > 0;
+    },
+    group() {
+      return {
+        name: this.$options.i18n.PLACES,
+        items: this.contextSwitcherLinks.map(({ title, link }) => ({ text: title, href: link })),
+      };
+    },
+  },
+  created() {
+    if (!this.shouldRender) {
+      this.$emit('nothing-to-render');
+    }
+  },
+};
+</script>
+
+<template>
+  <gl-disclosure-dropdown-group v-if="shouldRender" v-bind="$attrs" :group="group" />
+</template>