Add sidebar to MR Reports App

ee/app/assets/javascripts/merge_requests/reports/components/app.vue

 <script>
+import { GlIcon, GlBadge } from '@gitlab/ui';
+import {
+  BLOCKERS_ROUTE,
+  CODE_QUALITY_ROUTE,
+  LICENSE_COMPLIANCE_ROUTE,
+  SECURITY_ROUTE,
+} from '../constants';
+
 export default {
   name: 'MergeRequestReportsApp',
+  components: {
+    GlIcon,
+    GlBadge,
+  },
+  routeNames: {
+    BLOCKERS_ROUTE,
+    CODE_QUALITY_ROUTE,
+    SECURITY_ROUTE,
+    LICENSE_COMPLIANCE_ROUTE,
+  },
+  data() {
+    return {
+      blockersCounter: 2,
+    };
+  },
 };
 </script>
 
 <template>
-  <router-view />
+  <div class="gl-flex gl-flex-col md:gl-min-h-31 md:gl-flex-row">
+    <h2 class="gl-sr-only">{{ s__('MrReports|Reports') }}</h2>
+    <aside
+      class="gl-border-b gl-border-gray-100 gl-pb-3 gl-pt-5 md:gl-border-r md:gl-w-[200px] md:gl-flex-none md:gl-border-0 md:gl-pr-5"
+    >
+      <nav>
+        <router-link
+          :to="{ name: $options.routeNames.BLOCKERS_ROUTE }"
+          active-class="gl-font-bold gl-bg-gray-50"
+          exact
+          class="gl-flex gl-items-center gl-rounded-base gl-p-2 gl-text-gray-900 hover:gl-bg-gray-50 hover:gl-text-gray-900 hover:gl-no-underline"
+        >
+          <span class="gl-mr-3 gl-flex gl-rounded-full gl-bg-red-100 gl-p-2">
+            <gl-icon class="gl-rounded-full gl-bg-white gl-text-red-500" name="status-failed" />
+          </span>
+          {{ s__('MrReports|Blockers') }}
+          <gl-badge class="gl-ml-auto gl-mr-2" variant="neutral"
+            ><span data-testid="blockers-counter" class="gl-font-bold">{{
+              blockersCounter
+            }}</span></gl-badge
+          >
+        </router-link>
+        <div class="gl-border-t gl-mt-2 gl-border-gray-100 gl-pt-1">
+          <h3
+            class="gl-heading-6 gl-mb-0 gl-py-3 gl-pl-3 gl-text-sm gl-font-[700] gl-leading-normal"
+          >
+            {{ s__('MrReports|All reports') }}
+          </h3>
+          <ul class="gl-m-0 gl-list-none gl-p-0">
+            <li class="gl-my-1">
+              <router-link
+                :to="{ name: $options.routeNames.CODE_QUALITY_ROUTE }"
+                active-class="gl-font-bold gl-bg-gray-50"
+                class="gl-flex gl-items-center gl-rounded-base gl-p-2 gl-text-gray-900 hover:gl-bg-gray-50 hover:gl-text-gray-900 hover:gl-no-underline"
+              >
+                <span class="gl-mr-3 gl-flex gl-p-2">
+                  <gl-icon
+                    class="gl-rounded-full gl-bg-white gl-text-orange-500"
+                    name="status-alert"
+                  />
+                </span>
+                {{ s__('MrReports|Code quality') }}
+              </router-link>
+            </li>
+            <li class="gl-my-1">
+              <router-link
+                :to="{ name: $options.routeNames.SECURITY_ROUTE }"
+                active-class="gl-font-bold gl-bg-gray-50"
+                class="gl-flex gl-items-center gl-rounded-base gl-p-2 gl-text-gray-900 hover:gl-bg-gray-50 hover:gl-text-gray-900 hover:gl-no-underline"
+              >
+                <span class="gl-mr-3 gl-flex gl-p-2">
+                  <gl-icon
+                    class="gl-rounded-full gl-bg-white gl-text-red-500"
+                    name="status-failed"
+                  />
+                </span>
+                {{ s__('MrReports|Security') }}
+              </router-link>
+            </li>
+            <li class="gl-my-1">
+              <router-link
+                :to="{ name: $options.routeNames.LICENSE_COMPLIANCE_ROUTE }"
+                active-class="gl-font-bold gl-bg-gray-50"
+                class="gl-flex gl-items-center gl-rounded-base gl-p-2 gl-text-gray-900 hover:gl-bg-gray-50 hover:gl-text-gray-900 hover:gl-no-underline"
+              >
+                <span class="gl-mr-3 gl-flex gl-p-2">
+                  <gl-icon
+                    class="gl-rounded-full gl-bg-white gl-text-red-500"
+                    name="status-failed"
+                  />
+                </span>
+                {{ s__('MrReports|License Compliance') }}
+              </router-link>
+            </li>
+          </ul>
+        </div>
+      </nav>
+    </aside>
+    <router-view />
+  </div>
 </template>

ee/app/assets/javascripts/merge_requests/reports/constants.js

+export const BLOCKERS_ROUTE = 'index';
+export const CODE_QUALITY_ROUTE = 'code-quality';
+export const SECURITY_ROUTE = 'security';
+export const LICENSE_COMPLIANCE_ROUTE = 'license-compliance';

ee/app/assets/javascripts/merge_requests/reports/routes.js

 import IndexComponent from './pages/index.vue';
+import {
+  BLOCKERS_ROUTE,
+  CODE_QUALITY_ROUTE,
+  LICENSE_COMPLIANCE_ROUTE,
+  SECURITY_ROUTE,
+} from './constants';
 
 export default [
   {
     path: '/',
+    name: BLOCKERS_ROUTE,
+    component: IndexComponent,
+  },
+  {
+    path: '/?type=code-quality',
+    name: CODE_QUALITY_ROUTE,
+    component: IndexComponent,
+  },
+  {
+    path: '/?type=security',
+    name: SECURITY_ROUTE,
+    component: IndexComponent,
+  },
+  {
+    path: '/?type=license-compliance',
+    name: LICENSE_COMPLIANCE_ROUTE,
     component: IndexComponent,
   },
 ];

ee/spec/frontend/merge_requests/reports/components/app_spec.js

+import Vue from 'vue';
+import VueRouter from 'vue-router';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import App from 'ee/merge_requests/reports/components/app.vue';
+import routes from 'ee/merge_requests/reports/routes';
+
+Vue.use(VueRouter);
+
+describe('Merge request reports App component', () => {
+  let wrapper;
+
+  const createComponent = () => {
+    const router = new VueRouter({ mode: 'history', routes });
+    wrapper = shallowMountExtended(App, { router });
+  };
+
+  it('should render sidebar navigation', () => {
+    createComponent();
+    expect(wrapper.findByText('Blockers').exists()).toBe(true);
+    expect(wrapper.findByText('Code quality').exists()).toBe(true);
+    expect(wrapper.findByText('Security').exists()).toBe(true);
+    expect(wrapper.findByText('License Compliance').exists()).toBe(true);
+  });
+
+  it('should render blockers counter', () => {
+    createComponent();
+    expect(wrapper.findByTestId('blockers-counter').text()).toBe('2');
+  });
+});

locale/gitlab.pot

@@ -35353,6 +35353,24 @@ msgstr ""
 msgid "MrList|Review requested from %{name}"
 msgstr ""
+msgid "MrReports|All reports"
+msgstr ""
+
+msgid "MrReports|Blockers"
+msgstr ""
+
+msgid "MrReports|Code quality"
+msgstr ""
+
+msgid "MrReports|License Compliance"
+msgstr ""
+
+msgid "MrReports|Reports"
+msgstr ""
+
+msgid "MrReports|Security"
+msgstr ""
+
 msgid "MrSurvey|By continuing, you acknowledge that responses will be used to improve GitLab and in accordance with the %{linkStart}GitLab Privacy Policy%{linkEnd}."
 msgstr ""