Show version check in new Help menu

app/assets/javascripts/super_sidebar/components/help_center.vue

 <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';
@@ -11,6 +12,7 @@ export default {
     GlButton,
     GlDisclosureDropdown,
     GlDisclosureDropdownGroup,
+    GitlabVersionCheckBadge,
   },
   i18n: {
     help: __('Help'),
@@ -21,6 +23,7 @@ export default {
     contribute: __('Contribute to GitLab'),
     feedback: __('Provide feedback'),
     shortcuts: __('Keyboard shortcuts'),
+    version: __('Your GitLab version'),
     whatsnew: __("What's new"),
   },
   props: {
@@ -35,9 +38,18 @@ export default {
     };
   },
   computed: {
-    items() {
-      return [
-        {
+    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 },
@@ -51,7 +63,7 @@ export default {
             { text: this.$options.i18n.feedback, href: 'https://about.gitlab.com/submit-feedback' },
           ],
         },
-        {
+        helpActions: {
           items: [
             {
               text: this.$options.i18n.shortcuts,
@@ -67,7 +79,10 @@ export default {
             },
           ].filter(Boolean),
         },
-      ];
+      };
+    },
+    updateSeverity() {
+      return this.sidebarData.gitlab_version_check?.severity;
     },
   },
   methods: {
@@ -120,8 +135,34 @@ export default {
       </gl-button>
     </template>
-    <gl-disclosure-dropdown-group :group="items[0]" />
-    <gl-disclosure-dropdown-group :group="items[1]" bordered @action="handleAction">
+    <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"

app/helpers/sidebars_helper.rb

@@ -48,7 +48,10 @@ def super_sidebar_context(user, group:, project:)
       support_path: support_url,
       display_whats_new: display_whats_new?,
       whats_new_most_recent_release_items_count: whats_new_most_recent_release_items_count,
-      whats_new_version_digest: whats_new_version_digest
+      whats_new_version_digest: whats_new_version_digest,
+      show_version_check: show_version_check?,
+      gitlab_version: Gitlab.version_info,
+      gitlab_version_check: gitlab_version_check
     }
   end

locale/gitlab.pot

@@ -49339,6 +49339,9 @@ msgstr ""
 msgid "Your GitLab instance allows anyone to register for an account, which is a security risk on public-facing GitLab instances. You should deactivate new sign ups if public users aren't expected to register for an account."
 msgstr ""
+msgid "Your GitLab version"
+msgstr ""
+
 msgid "Your Groups"
 msgstr ""

spec/frontend/super_sidebar/components/help_center_spec.js

@@ -14,6 +14,8 @@ jest.mock('~/whats_new');
 describe('HelpCenter component', () => {
   let wrapper;
+  const GlEmoji = { template: '<img/>' };
+
   const findDropdownGroup = (i = 0) => {
     return wrapper.findAllComponents(GlDisclosureDropdownGroup).at(i);
   };
@@ -24,6 +26,7 @@ describe('HelpCenter component', () => {
   const createWrapper = (sidebarData) => {
     wrapper = mountExtended(HelpCenter, {
       propsData: { sidebarData },
+      stubs: { GlEmoji },
     });
   };
@@ -52,6 +55,18 @@ describe('HelpCenter component', () => {
       ]);
     });
+    describe('with Gitlab version check feature enabled', () => {
+      beforeEach(() => {
+        createWrapper({ ...sidebarData, show_version_check: true });
+      });
+
+      it('shows version information as first item', () => {
+        expect(findDropdownGroup(0).props('group').items).toEqual([
+          { text: HelpCenter.i18n.version, href: helpPagePath('update/index'), version: '16.0' },
+        ]);
+      });
+    });
+
     describe('showKeyboardShortcuts', () => {
       beforeEach(() => {
         jest.spyOn(wrapper.vm.$refs.dropdown, 'close');

spec/frontend/super_sidebar/mock_data.js

@@ -71,4 +71,7 @@ export const sidebarData = {
   display_whats_new: true,
   whats_new_most_recent_release_items_count: 5,
   whats_new_version_digest: 1,
+  show_version_check: false,
+  gitlab_version: { major: 16, minor: 0 },
+  gitlab_version_check: { severity: 'success' },
 };

spec/helpers/sidebars_helper_spec.rb

@@ -72,7 +72,10 @@
         support_path: helper.support_url,
         display_whats_new: helper.display_whats_new?,
         whats_new_most_recent_release_items_count: helper.whats_new_most_recent_release_items_count,
-        whats_new_version_digest: helper.whats_new_version_digest
+        whats_new_version_digest: helper.whats_new_version_digest,
+        show_version_check: helper.show_version_check?,
+        gitlab_version: Gitlab.version_info,
+        gitlab_version_check: helper.gitlab_version_check
       })
     end