Skip to content
Snippets Groups Projects
Commit 68e5f76e authored by Jiaan Louw's avatar Jiaan Louw :two:
Browse files

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

Update analytics dashboard list to match MVC design

See merge request !106055



Merged-by: default avatarJiaan Louw <3468028-jiaan@users.noreply.gitlab.com>
Approved-by: default avatarAxel García <agarcia@gitlab.com>
Reviewed-by: default avatarRobert Hunt <rhunt@gitlab.com>
Reviewed-by: default avatarAxel García <agarcia@gitlab.com>
Co-authored-by: default avatarJiaan Louw <jlouw@gitlab.com>
Co-authored-by: default avatarAxel García <agarcia@gitlab.com>
parents 618595f2 c1d3b1a8
No related branches found
No related tags found
No related merge requests found
Pipeline #722266831 passed
Pipeline: GitLab

#722287889

    Pipeline: GitLab

    #722269521

      <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
      ......
      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.'),
      };
      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');
      });
      });
      });
      ......@@ -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 ""
       
      0% Loading or .
      You are about to add 0 people to the discussion. Proceed with caution.
      Finish editing this message first!
      Please register or to comment