Add latest changes from gitlab-org/gitlab@15-9-stable-eev15.9.0-rc42

7 files changed, 289 insertions, 42 deletions

diff --git a/app/assets/javascripts/super_sidebar/components/bottom_bar.vue b/app/assets/javascripts/super_sidebar/components/bottom_bar.vue
deleted file mode 100644
index fea29458f45..00000000000
--- a/app/assets/javascripts/super_sidebar/components/bottom_bar.vue
+++ /dev/null
@@ -1,24 +0,0 @@
-<script>
-import { GlIcon } from '@gitlab/ui';
-import { __ } from '~/locale';
-
-export default {
-  components: {
-    GlIcon,
-  },
-  i18n: {
-    help: __('Help'),
-    new: __('New'),
-  },
-};
-</script>
-
-<template>
-  <div class="bottom-links gl-p-3">
-    <a href="#" class="gl-text-black-normal"
-      ><gl-icon name="question-o" class="gl-mr-3 gl-text-gray-300 gl-text-black-normal!" />{{
-        $options.i18n.help
-      }}</a
-    >
-  </div>
-</template>
diff --git a/app/assets/javascripts/super_sidebar/components/counter.vue b/app/assets/javascripts/super_sidebar/components/counter.vue
index d790e61ca31..62a1e5a6b20 100644
--- a/app/assets/javascripts/super_sidebar/components/counter.vue
+++ b/app/assets/javascripts/super_sidebar/components/counter.vue
@@ -40,9 +40,9 @@ export default {
     :is="component"
     :aria-label="ariaLabel"
     :href="href"
-    class="counter gl-relative gl-display-inline-block gl-flex-grow-1 gl-text-center gl-py-3 gl-bg-gray-10 gl-rounded-base gl-text-black-normal gl-border gl-border-gray-a-08 gl-font-sm gl-font-weight-bold"
+    class="counter gl-display-block gl-flex-grow-1 gl-text-center gl-py-3 gl-bg-gray-10 gl-rounded-base gl-text-gray-900 gl-border gl-border-gray-a-08 gl-font-sm gl-hover-text-gray-900 gl-hover-text-decoration-none"
   >
     <gl-icon aria-hidden="true" :name="icon" />
-    <span aria-hidden="true">{{ count }}</span>
+    <span v-if="count" aria-hidden="true" class="gl-ml-1">{{ count }}</span>
   </component>
 </template>
diff --git a/app/assets/javascripts/super_sidebar/components/create_menu.vue b/app/assets/javascripts/super_sidebar/components/create_menu.vue
new file mode 100644
index 00000000000..e92a6cbf5f5
--- /dev/null
+++ b/app/assets/javascripts/super_sidebar/components/create_menu.vue
@@ -0,0 +1,38 @@
+<script>
+import { GlDisclosureDropdown, GlTooltip } from '@gitlab/ui';
+import { __ } from '~/locale';
+
+export default {
+  components: {
+    GlDisclosureDropdown,
+    GlTooltip,
+  },
+  i18n: {
+    createNew: __('Create new...'),
+  },
+  props: {
+    groups: {
+      type: Array,
+      required: true,
+    },
+  },
+  toggleId: 'create-menu-toggle',
+};
+</script>
+
+<template>
+  <div>
+    <gl-disclosure-dropdown
+      category="tertiary"
+      icon="plus"
+      :items="groups"
+      no-caret
+      text-sr-only
+      :toggle-text="$options.i18n.createNew"
+      :toggle-id="$options.toggleId"
+    />
+    <gl-tooltip :target="`#${$options.toggleId}`" placement="bottom" container="#super-sidebar">
+      {{ $options.i18n.createNew }}
+    </gl-tooltip>
+  </div>
+</template>
diff --git a/app/assets/javascripts/super_sidebar/components/help_center.vue b/app/assets/javascripts/super_sidebar/components/help_center.vue
new file mode 100644
index 00000000000..8e7c7efa631
--- /dev/null
+++ b/app/assets/javascripts/super_sidebar/components/help_center.vue
@@ -0,0 +1,178 @@
+<script>
+import { GlBadge, GlButton, GlDisclosureDropdown, GlDisclosureDropdownGroup } from '@gitlab/ui';
+import GitlabVersionCheckBadge from '~/gitlab_version_check/components/gitlab_version_check_badge.vue';
+import { helpPagePath } from '~/helpers/help_page_helper';
+import { PROMO_URL } from 'jh_else_ce/lib/utils/url_utility';
+import { __ } from '~/locale';
+import { STORAGE_KEY } from '~/whats_new/utils/notification';
+
+export default {
+  components: {
+    GlBadge,
+    GlButton,
+    GlDisclosureDropdown,
+    GlDisclosureDropdownGroup,
+    GitlabVersionCheckBadge,
+  },
+  i18n: {
+    help: __('Help'),
+    support: __('Support'),
+    docs: __('GitLab documentation'),
+    plans: __('Compare GitLab plans'),
+    forum: __('Community forum'),
+    contribute: __('Contribute to GitLab'),
+    feedback: __('Provide feedback'),
+    shortcuts: __('Keyboard shortcuts'),
+    version: __('Your GitLab version'),
+    whatsnew: __("What's new"),
+  },
+  props: {
+    sidebarData: {
+      type: Object,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      showWhatsNewNotification: this.shouldShowWhatsNewNotification(),
+    };
+  },
+  computed: {
+    itemGroups() {
+      return {
+        versionCheck: {
+          items: [
+            {
+              text: this.$options.i18n.version,
+              href: helpPagePath('update/index'),
+              version: `${this.sidebarData.gitlab_version.major}.${this.sidebarData.gitlab_version.minor}`,
+            },
+          ],
+        },
+        helpLinks: {
+          items: [
+            { text: this.$options.i18n.help, href: helpPagePath() },
+            { text: this.$options.i18n.support, href: this.sidebarData.support_path },
+            { text: this.$options.i18n.docs, href: 'https://docs.gitlab.com' },
+            { text: this.$options.i18n.plans, href: `${PROMO_URL}/pricing` },
+            { text: this.$options.i18n.forum, href: 'https://forum.gitlab.com/' },
+            {
+              text: this.$options.i18n.contribute,
+              href: helpPagePath('', { anchor: 'contributing-to-gitlab' }),
+            },
+            { text: this.$options.i18n.feedback, href: 'https://about.gitlab.com/submit-feedback' },
+          ],
+        },
+        helpActions: {
+          items: [
+            {
+              text: this.$options.i18n.shortcuts,
+              action: this.showKeyboardShortcuts,
+              shortcut: '?',
+            },
+            this.sidebarData.display_whats_new && {
+              text: this.$options.i18n.whatsnew,
+              action: this.showWhatsNew,
+              count:
+                this.showWhatsNewNotification &&
+                this.sidebarData.whats_new_most_recent_release_items_count,
+            },
+          ].filter(Boolean),
+        },
+      };
+    },
+    updateSeverity() {
+      return this.sidebarData.gitlab_version_check?.severity;
+    },
+  },
+  methods: {
+    shouldShowWhatsNewNotification() {
+      if (
+        !this.sidebarData.display_whats_new ||
+        localStorage.getItem(STORAGE_KEY) === this.sidebarData.whats_new_version_digest
+      ) {
+        return false;
+      }
+      return true;
+    },
+
+    handleAction({ action }) {
+      if (action) {
+        action();
+      }
+    },
+
+    showKeyboardShortcuts() {
+      this.$refs.dropdown.close();
+      window?.toggleShortcutsHelp();
+    },
+
+    async showWhatsNew() {
+      this.$refs.dropdown.close();
+      this.showWhatsNewNotification = false;
+
+      if (!this.toggleWhatsNewDrawer) {
+        const appEl = document.getElementById('whats-new-app');
+        const { default: toggleWhatsNewDrawer } = await import(
+          /* webpackChunkName: 'whatsNewApp' */ '~/whats_new'
+        );
+        this.toggleWhatsNewDrawer = toggleWhatsNewDrawer;
+        this.toggleWhatsNewDrawer(appEl);
+      } else {
+        this.toggleWhatsNewDrawer();
+      }
+    },
+  },
+};
+</script>
+
+<template>
+  <gl-disclosure-dropdown ref="dropdown">
+    <template #toggle>
+      <gl-button category="tertiary" icon="question-o" class="btn-with-notification">
+        <span v-if="showWhatsNewNotification" class="notification"></span>
+        {{ $options.i18n.help }}
+      </gl-button>
+    </template>
+
+    <gl-disclosure-dropdown-group
+      v-if="sidebarData.show_version_check"
+      :group="itemGroups.versionCheck"
+    >
+      <template #list-item="{ item }">
+        <a
+          :href="item.href"
+          tabindex="-1"
+          class="gl-display-flex gl-flex-direction-column gl-line-height-24 gl-text-gray-900 gl-hover-text-gray-900 gl-hover-text-decoration-none"
+        >
+          <span class="gl-font-sm gl-font-weight-bold">
+            {{ item.text }}
+            <gl-emoji data-name="rocket" />
+          </span>
+          <span>
+            <span class="gl-mr-2">{{ item.version }}</span>
+            <gitlab-version-check-badge v-if="updateSeverity" :status="updateSeverity" size="sm" />
+          </span>
+        </a>
+      </template>
+    </gl-disclosure-dropdown-group>
+
+    <gl-disclosure-dropdown-group
+      :group="itemGroups.helpLinks"
+      :bordered="sidebarData.show_version_check"
+    />
+
+    <gl-disclosure-dropdown-group :group="itemGroups.helpActions" bordered @action="handleAction">
+      <template #list-item="{ item }">
+        <button
+          tabindex="-1"
+          class="gl-bg-transparent gl-w-full gl-border-none gl-display-flex gl-justify-content-space-between gl-p-0 gl-text-gray-900"
+        >
+          {{ item.text }}
+          <gl-badge v-if="item.count" pill size="sm" variant="info">{{ item.count }}</gl-badge>
+          <kbd v-else-if="item.shortcut" class="flat">?</kbd>
+        </button>
+      </template>
+    </gl-disclosure-dropdown-group>
+  </gl-disclosure-dropdown>
+</template>
diff --git a/app/assets/javascripts/super_sidebar/components/merge_request_menu.vue b/app/assets/javascripts/super_sidebar/components/merge_request_menu.vue
new file mode 100644
index 00000000000..edc13e305cf
--- /dev/null
+++ b/app/assets/javascripts/super_sidebar/components/merge_request_menu.vue
@@ -0,0 +1,40 @@
+<script>
+import { GlBadge, GlDisclosureDropdown } from '@gitlab/ui';
+
+export default {
+  components: {
+    GlBadge,
+    GlDisclosureDropdown,
+  },
+  props: {
+    items: {
+      type: Array,
+      required: true,
+    },
+  },
+  methods: {
+    navigate() {
+      this.$refs.link.click();
+    },
+  },
+};
+</script>
+
+<template>
+  <gl-disclosure-dropdown :items="items" placement="center" @action="navigate">
+    <template #toggle>
+      <slot></slot>
+    </template>
+    <template #list-item="{ item }">
+      <a
+        ref="link"
+        class="gl-display-flex gl-align-items-center gl-justify-content-space-between gl-hover-text-gray-900 gl-hover-text-decoration-none gl-text-gray-900"
+        :href="item.href"
+        tabindex="-1"
+      >
+        {{ item.text }}
+        <gl-badge pill size="sm" variant="neutral">{{ item.count || 0 }}</gl-badge>
+      </a>
+    </template>
+  </gl-disclosure-dropdown>
+</template>
diff --git a/app/assets/javascripts/super_sidebar/components/super_sidebar.vue b/app/assets/javascripts/super_sidebar/components/super_sidebar.vue
index e2eac64f5ad..c4b769dcf24 100644
--- a/app/assets/javascripts/super_sidebar/components/super_sidebar.vue
+++ b/app/assets/javascripts/super_sidebar/components/super_sidebar.vue
@@ -4,7 +4,7 @@ import { context } from '../mock_data';
 import UserBar from './user_bar.vue';
 import ContextSwitcherToggle from './context_switcher_toggle.vue';
 import ContextSwitcher from './context_switcher.vue';
-import BottomBar from './bottom_bar.vue';
+import HelpCenter from './help_center.vue';
 
 export default {
   context,
@@ -13,7 +13,7 @@ export default {
     UserBar,
     ContextSwitcherToggle,
     ContextSwitcher,
-    BottomBar,
+    HelpCenter,
   },
   props: {
     sidebarData: {
@@ -31,7 +31,8 @@ export default {
 
 <template>
   <aside
-    class="super-sidebar gl-fixed gl-bottom-0 gl-left-0 gl-display-flex gl-flex-direction-column gl-bg-gray-10 gl-border-r gl-border-gray-a-08 gl-z-index-9999"
+    id="super-sidebar"
+    class="super-sidebar gl-fixed gl-bottom-0 gl-left-0 gl-display-flex gl-flex-direction-column gl-bg-gray-10 gl-border-r gl-border-gray-a-08"
     data-testid="super-sidebar"
   >
     <user-bar :sidebar-data="sidebarData" />
@@ -42,8 +43,8 @@ export default {
           <context-switcher />
         </gl-collapse>
       </div>
-      <div class="gl-px-3">
-        <bottom-bar />
+      <div class="gl-p-3">
+        <help-center :sidebar-data="sidebarData" />
       </div>
     </div>
   </aside>
diff --git a/app/assets/javascripts/super_sidebar/components/user_bar.vue b/app/assets/javascripts/super_sidebar/components/user_bar.vue
index 7ee1776bf07..ee72e8eafb4 100644
--- a/app/assets/javascripts/super_sidebar/components/user_bar.vue
+++ b/app/assets/javascripts/super_sidebar/components/user_bar.vue
@@ -1,10 +1,12 @@
 <script>
-import { GlAvatar, GlDropdown, GlIcon } from '@gitlab/ui';
+import { GlAvatar, GlDropdown, GlIcon, GlTooltipDirective } from '@gitlab/ui';
 import { __ } from '~/locale';
 import SafeHtml from '~/vue_shared/directives/safe_html';
 import NewNavToggle from '~/nav/components/new_nav_toggle.vue';
 import logo from '../../../../views/shared/_logo.svg';
+import CreateMenu from './create_menu.vue';
 import Counter from './counter.vue';
+import MergeRequestMenu from './merge_request_menu.vue';
 
 export default {
   logo,
@@ -12,15 +14,19 @@ export default {
     GlAvatar,
     GlDropdown,
     GlIcon,
+    CreateMenu,
     NewNavToggle,
     Counter,
+    MergeRequestMenu,
   },
   i18n: {
+    createNew: __('Create new...'),
     issues: __('Issues'),
     mergeRequests: __('Merge requests'),
     todoList: __('To-Do list'),
   },
   directives: {
+    GlTooltip: GlTooltipDirective,
     SafeHtml,
   },
   inject: ['rootPath', 'toggleNewNavEndpoint'],
@@ -39,11 +45,7 @@ export default {
       <div class="gl-flex-grow-1">
         <a v-safe-html="$options.logo" :href="rootPath"></a>
       </div>
-      <gl-dropdown variant="link" no-caret>
-        <template #button-content>
-          <gl-icon name="plus" class="gl-vertical-align-middle gl-text-black-normal" />
-        </template>
-      </gl-dropdown>
+      <create-menu :groups="sidebarData.create_new_menu_groups" />
       <button class="gl-border-none">
         <gl-icon name="search" class="gl-vertical-align-middle" />
       </button>
@@ -56,17 +58,29 @@ export default {
     </div>
     <div class="gl-display-flex gl-justify-content-space-between gl-px-3 gl-py-2 gl-gap-2">
       <counter
+        v-gl-tooltip:super-sidebar.hover.bottom="$options.i18n.issues"
+        class="gl-flex-basis-third"
         icon="issues"
         :count="sidebarData.assigned_open_issues_count"
         :href="sidebarData.issues_dashboard_path"
         :label="$options.i18n.issues"
       />
+      <merge-request-menu
+        class="gl-flex-basis-third gl-display-block!"
+        :items="sidebarData.merge_request_menu"
+      >
+        <counter
+          v-gl-tooltip:super-sidebar.hover.bottom="$options.i18n.mergeRequests"
+          class="gl-w-full"
+          tabindex="-1"
+          icon="merge-request-open"
+          :count="sidebarData.total_merge_requests_count"
+          :label="$options.i18n.mergeRequests"
+        />
+      </merge-request-menu>
       <counter
-        icon="merge-request-open"
-        :count="sidebarData.assigned_open_merge_requests_count"
-        :label="$options.i18n.mergeRequests"
-      />
-      <counter
+        v-gl-tooltip:super-sidebar.hover.bottom="$options.i18n.todoList"
+        class="gl-flex-basis-third"
         icon="todo-done"
         :count="sidebarData.todos_pending_count"
         href="/dashboard/todos"