Move group-level release stats into tab

app/assets/stylesheets/utilities.scss

@@ -182,3 +182,10 @@
 .gl-mb-n3 {
   margin-bottom: -$gl-spacing-scale-3;
 }
+
+// Will be moved to @gitlab/ui in https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1408
+$gl-line-height-42: px-to-rem(42px);
+
+.gl-line-height-42 {
+  line-height: $gl-line-height-42;
+}

ee/app/assets/javascripts/analytics/group_ci_cd_analytics/components/app.vue

 <script>
+import { GlTabs, GlTab } from '@gitlab/ui';
+import { mergeUrlParams, updateHistory, getParameterValues } from '~/lib/utils/url_utility';
+import { TABS } from '../constants';
 import ReleaseStatsCard from './release_stats_card.vue';
 
 export default {
   name: 'CiCdAnalyticsApp',
   components: {
     ReleaseStatsCard,
+    GlTabs,
+    GlTab,
+  },
+  data() {
+    return {
+      selectedTabIndex: 0,
+    };
+  },
+  created() {
+    this.selectTab();
+    window.addEventListener('popstate', this.selectTab);
+  },
+  methods: {
+    selectTab() {
+      const [tabQueryParam] = getParameterValues('tab');
+      const tabIndex = TABS.indexOf(tabQueryParam);
+      this.selectedTabIndex = tabIndex >= 0 ? tabIndex : 0;
+    },
+    onTabChange(newIndex) {
+      if (newIndex !== this.selectedTabIndex) {
+        this.selectedTabIndex = newIndex;
+        const path = mergeUrlParams({ tab: TABS[newIndex] }, window.location.pathname);
+        updateHistory({ url: path, title: window.title });
+      }
+    },
   },
 };
 </script>
 <template>
   <div>
-    <release-stats-card class="gl-mt-5" />
+    <gl-tabs :value="selectedTabIndex" @input="onTabChange">
+      <gl-tab :title="s__('CICDAnalytics|Release statistics')">
+        <release-stats-card class="gl-mt-5" />
+      </gl-tab>
+    </gl-tabs>
   </div>
 </template>

ee/app/assets/javascripts/analytics/group_ci_cd_analytics/components/release_stats_card.vue

@@ -115,7 +115,7 @@ export default {
           <rect x="50" y="94" rx="3" ry="3" width="300" height="31" />
         </gl-skeleton-loader>
         <template v-else>
-          <span class="gl-font-size-h-display">{{ stat.stat }}</span>
+          <span class="gl-font-size-h-display gl-line-height-42">{{ stat.stat }}</span>
           {{ stat.title }}
         </template>
       </div>

ee/app/assets/javascripts/analytics/group_ci_cd_analytics/constants.js

 export const STAT_ERROR_PLACEHOLDER = '-';
+
+export const TABS = ['release-statistics'];

ee/changelogs/unreleased/nfriend-put-release-stats-in-tab.yml

+---
+title: Move group-level release statistics into tab
+merge_request: 60749
+author:
+type: changed

ee/spec/frontend/analytics/group_ci_cd_analytics/components/app_spec.js

+import { GlTabs, GlTab } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import CiCdAnalyticsApp from 'ee/analytics/group_ci_cd_analytics/components/app.vue';
 import ReleaseStatsCard from 'ee/analytics/group_ci_cd_analytics/components/release_stats_card.vue';
+import setWindowLocation from 'helpers/set_window_location_helper';
+import { TEST_HOST } from 'helpers/test_constants';
+import { getParameterValues } from '~/lib/utils/url_utility';
+
+jest.mock('~/lib/utils/url_utility');
 
 describe('ee/analytics/group_ci_cd_analytics/components/app.vue', () => {
   let wrapper;
 
+  beforeEach(() => {
+    getParameterValues.mockReturnValue([]);
+  });
+
   const createComponent = () => {
     wrapper = shallowMount(CiCdAnalyticsApp);
   };
 
-  it('renders the release stats card', () => {
-    createComponent();
-    expect(wrapper.find(ReleaseStatsCard).exists()).toBe(true);
+  const findGlTabs = () => wrapper.findComponent(GlTabs);
+  const findAllGlTabs = () => wrapper.findAllComponents(GlTab);
+  const findGlTabAtIndex = (index) => findAllGlTabs().at(index);
+
+  describe('tabs', () => {
+    beforeEach(() => {
+      createComponent();
+    });
+
+    it('renders tabs in the correct order', () => {
+      expect(findGlTabs().exists()).toBe(true);
+
+      expect(findGlTabAtIndex(0).attributes('title')).toBe('Release statistics');
+    });
+  });
+
+  describe('release statistics', () => {
+    beforeEach(() => {
+      createComponent();
+    });
+
+    it('renders the release statistics component inside the first tab', () => {
+      expect(findGlTabAtIndex(0).find(ReleaseStatsCard).exists()).toBe(true);
+    });
+  });
+
+  describe('when provided with a query param', () => {
+    it.each`
+      tab                     | index
+      ${'release-statistics'} | ${'0'}
+      ${'fake'}               | ${'0'}
+      ${''}                   | ${'0'}
+    `('shows the correct tab for URL parameter "$tab"', ({ tab, index }) => {
+      setWindowLocation(`${TEST_HOST}/groups/gitlab-org/gitlab/-/analytics/ci_cd?tab=${tab}`);
+      getParameterValues.mockImplementation((name) => {
+        expect(name).toBe('tab');
+        return tab ? [tab] : [];
+      });
+      createComponent();
+      expect(findGlTabs().attributes('value')).toBe(index);
+    });
   });
 });

locale/gitlab.pot

@@ -5597,6 +5597,9 @@ msgid_plural "CICDAnalytics|Releases"
 msgstr[0] ""
 msgstr[1] ""
 
+msgid "CICDAnalytics|Release statistics"
+msgstr ""
+
 msgid "CICDAnalytics|Releases"
 msgstr ""