Merge branch '381322-product-analytics-dashboards-list' into 'master'

Update analytics dashboard list to match MVC design

See merge request !106055



Merged-by: Jiaan Louw <3468028-jiaan@users.noreply.gitlab.com>
Approved-by: Axel García <agarcia@gitlab.com>
Reviewed-by: Robert Hunt <rhunt@gitlab.com>
Reviewed-by: Axel García <agarcia@gitlab.com>
Co-authored-by: Jiaan Louw <jlouw@gitlab.com>
Co-authored-by: Axel García <agarcia@gitlab.com>

ee/app/assets/javascripts/product_analytics/dashboards/components/analytics_dashboard_list.vue

 <script>
-import { GlIcon, GlLabel } from '@gitlab/ui';
+import { GlAvatar, GlIcon, GlLabel, GlLink } from '@gitlab/ui';
+import { helpPagePath } from '~/helpers/help_page_helper';
 import jsonList from '../gl_dashboards/analytics_dashboards.json';
+import { I18N_DASHBOARD_LIST } from '../constants';
 
 export default {
   name: 'AnalyticsDashboard',
   components: {
+    GlAvatar,
     GlIcon,
     GlLabel,
+    GlLink,
   },
   data() {
     return {
       dashboards: jsonList.internalDashboards,
     };
   },
+  methods: {
+    routeToDashboard(dashboardId) {
+      return this.$router.push(dashboardId);
+    },
+  },
+  i18n: I18N_DASHBOARD_LIST,
+  helpPageUrl: helpPagePath('user/product_analytics/index', {
+    anchor: 'product-analytics-dashboards',
+  }),
 };
 </script>
 
 <template>
   <div>
-    <ul class="content-list">
-      <li v-for="dashboard in dashboards" :key="dashboard.id">
-        <div class="gl-float-left gl-mr-4">
+    <h2 data-testid="title">{{ $options.i18n.title }}</h2>
+    <p data-testid="description">
+      {{ $options.i18n.description }}
+      <gl-link data-testid="help-link" :href="$options.helpPageUrl">{{
+        $options.i18n.learnMore
+      }}</gl-link>
+    </p>
+    <ul class="content-list gl-border-t gl-border-gray-50">
+      <li
+        v-for="dashboard in dashboards"
+        :key="dashboard.id"
+        data-testid="dashboard-list-item"
+        class="gl-display-flex! gl-px-5! gl-align-items-center gl-hover-cursor-pointer gl-hover-bg-blue-50"
+        @click="routeToDashboard(dashboard.id)"
+      >
+        <div class="gl-float-left gl-mr-4 gl-display-flex gl-align-items-center">
           <gl-icon
             data-testid="dashboard-icon"
-            :name="dashboard.icon || 'dashboard'"
-            class="gl-text-gray-200"
-            :size="32"
+            name="project"
+            class="gl-text-gray-200 gl-mr-3"
+            :size="16"
           />
+          <gl-avatar :entity-name="dashboard.title" shape="rect" :size="32" />
         </div>
-        <router-link data-testid="dashboard-link" class="title" :to="dashboard.id">{{
-          dashboard.title
-        }}</router-link>
-        <div>
-          <div data-testid="dashboard-description" class="gl-display-inline">
-            {{ dashboard.description }}
+        <div
+          class="gl-display-flex gl-align-items-center gl-justify-content-space-between gl-flex-grow-1"
+        >
+          <div class="gl-display-flex gl-flex-direction-column">
+            <router-link
+              data-testid="dashboard-link"
+              class="gl-font-weight-bold gl-line-height-normal"
+              :to="dashboard.id"
+              >{{ dashboard.title }}</router-link
+            >
+            <p
+              data-testid="dashboard-description"
+              class="gl-line-height-normal gl-m-0 gl-text-gray-500"
+            >
+              {{ dashboard.description }}
+            </p>
           </div>
           <div class="gl-float-right">
             <gl-label

ee/app/assets/javascripts/product_analytics/dashboards/constants.js

+import { s__, __ } from '~/locale';
+
+export const I18N_DASHBOARD_LIST = {
+  title: s__('ProductAnalytics|Product analytics dashboards'),
+  description: s__(
+    'ProductAnalytics|Dashboards are created by editing the projects dashboard files.',
+  ),
+  learnMore: __('Learn more.'),
+};

ee/spec/frontend/product_analytics/dashboards/components/analytics_dashboard_list_spec.js

 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import AnalyticsDashboardList from 'ee/product_analytics/dashboards/components/analytics_dashboard_list.vue';
+import { I18N_DASHBOARD_LIST } from 'ee/product_analytics/dashboards/constants';
 import jsonList from 'ee/product_analytics/dashboards/gl_dashboards/analytics_dashboards.json';
+import { helpPagePath } from '~/helpers/help_page_helper';
 
 describe('AnalyticsDashboardList', () => {
   let wrapper;
@@ -9,14 +11,25 @@ describe('AnalyticsDashboardList', () => {
   const findRouterLinks = () => wrapper.findAllByTestId('dashboard-link');
   const findRouterIcons = () => wrapper.findAllByTestId('dashboard-icon');
   const findRouterLabels = () => wrapper.findAllByTestId('dashboard-label');
+  const findListItems = () => wrapper.findAllByTestId('dashboard-list-item');
+  const findPageTitle = () => wrapper.findByTestId('title');
+  const findPageDescription = () => wrapper.findByTestId('description');
+  const findHelpLink = () => wrapper.findByTestId('help-link');
 
   const NUMBER_OF_DASHBOARDS = jsonList.internalDashboards.length;
 
+  const $router = {
+    push: jest.fn(),
+  };
+
   const createWrapper = () => {
     wrapper = shallowMountExtended(AnalyticsDashboardList, {
       stubs: {
         RouterLink: true,
       },
+      mocks: {
+        $router,
+      },
     });
   };
 
@@ -25,6 +38,23 @@ describe('AnalyticsDashboardList', () => {
       createWrapper();
     });
 
+    it('should render the page title', () => {
+      expect(findPageTitle().text()).toBe(I18N_DASHBOARD_LIST.title);
+    });
+
+    it('should render the page description', () => {
+      expect(findPageDescription().text()).toContain(I18N_DASHBOARD_LIST.description);
+    });
+
+    it('should render the help link', () => {
+      expect(findHelpLink().text()).toBe(I18N_DASHBOARD_LIST.learnMore);
+      expect(findHelpLink().attributes('href')).toBe(
+        helpPagePath('user/product_analytics/index', {
+          anchor: 'product-analytics-dashboards',
+        }),
+      );
+    });
+
     it('should render titles', () => {
       expect(findRouterLinks()).toHaveLength(NUMBER_OF_DASHBOARDS);
       expect(findRouterLinks().at(0).element.innerText).toContain('Overview');
@@ -40,13 +70,18 @@ describe('AnalyticsDashboardList', () => {
     });
 
     it('should render icons', () => {
-      expect(findRouterIcons()).toHaveLength(NUMBER_OF_DASHBOARDS);
-      expect(findRouterIcons().at(0).props('name')).toBe('dashboard');
+      expect(findRouterIcons().at(0).props('name')).toBe('project');
     });
 
     it('should render label', () => {
       expect(findRouterLabels()).toHaveLength(1);
       expect(findRouterLabels().at(0).props('title')).toBe('Audience');
     });
+
+    it('should route to the dashboard when a list item is clicked', async () => {
+      await findListItems().at(0).trigger('click');
+
+      expect($router.push).toHaveBeenCalledWith('dashboard_overview');
+    });
   });
 });

locale/gitlab.pot

@@ -31561,9 +31561,15 @@ msgstr ""
 msgid "ProductAnalytics|Audience"
 msgstr ""
+msgid "ProductAnalytics|Dashboards are created by editing the projects dashboard files."
+msgstr ""
+
 msgid "ProductAnalytics|New Analytics Widget Title"
 msgstr ""
+msgid "ProductAnalytics|Product analytics dashboards"
+msgstr ""
+
 msgid "ProductAnalytics|There is no data for this type of chart currently. Please see the Setup tab if you have not configured the product analytics tool already."
 msgstr ""