From 5245072d88331f2bd2aa7e7085eba7c532105eb2 Mon Sep 17 00:00:00 2001
From: samdbeckham <sbeckham@gitlab.com>
Date: Mon, 18 May 2020 17:52:15 +0100
Subject: [PATCH 1/2] Improves the operations empty state

- Uses the GlEmptyState component
- Adds tests for the new component
---
 .../components/dashboard/dashboard.vue        | 74 ++++++++++---------
 .../components/dashboard/dashboard_spec.js    | 55 +++++++-------
 2 files changed, 66 insertions(+), 63 deletions(-)

diff --git a/ee/app/assets/javascripts/operations/components/dashboard/dashboard.vue b/ee/app/assets/javascripts/operations/components/dashboard/dashboard.vue
index e0d36b308575fd..5da12866a747d0 100644
--- a/ee/app/assets/javascripts/operations/components/dashboard/dashboard.vue
+++ b/ee/app/assets/javascripts/operations/components/dashboard/dashboard.vue
@@ -1,6 +1,13 @@
 <script>
 import { mapState, mapActions } from 'vuex';
-import { GlModal, GlModalDirective, GlDeprecatedButton, GlDashboardSkeleton } from '@gitlab/ui';
+import {
+  GlDashboardSkeleton,
+  GlButton,
+  GlEmptyState,
+  GlLink,
+  GlModal,
+  GlModalDirective,
+} from '@gitlab/ui';
 import VueDraggable from 'vuedraggable';
 import ProjectSelector from '~/vue_shared/components/project_selector/project_selector.vue';
 import DashboardProject from './project.vue';
@@ -8,9 +15,11 @@ import DashboardProject from './project.vue';
 export default {
   components: {
     DashboardProject,
-    GlModal,
     GlDashboardSkeleton,
-    GlDeprecatedButton,
+    GlButton,
+    GlEmptyState,
+    GlLink,
+    GlModal,
     ProjectSelector,
     VueDraggable,
   },
@@ -131,13 +140,14 @@ export default {
       <h1 class="js-dashboard-title page-title text-nowrap flex-fill">
         {{ s__('OperationsDashboard|Operations Dashboard') }}
       </h1>
-      <gl-deprecated-button
+      <gl-button
         v-if="projects.length"
         v-gl-modal="$options.modalId"
-        class="js-add-projects-button btn btn-success"
+        variant="success"
+        class="js-add-projects-button"
       >
         {{ s__('OperationsDashboard|Add projects') }}
-      </gl-deprecated-button>
+      </gl-button>
     </div>
     <div class="prepend-top-default">
       <vue-draggable
@@ -150,34 +160,32 @@ export default {
           <dashboard-project :project="project" />
         </div>
       </vue-draggable>
-      <div v-else-if="!isLoadingProjects" class="row prepend-top-20 text-center">
-        <div class="col-12 d-flex justify-content-center svg-content">
-          <img :src="emptyDashboardSvgPath" class="js-empty-state-svg col-12 prepend-top-20" />
-        </div>
-        <h4 class="js-title col-12 prepend-top-20">
-          {{ s__('OperationsDashboard|Add a project to the dashboard') }}
-        </h4>
-        <div class="col-12 d-flex justify-content-center">
-          <span class="js-sub-title mw-460 text-tertiary text-left">
-            {{
-              s__(`OperationsDashboard|The operations dashboard provides a summary of each project's
-              operational health, including pipeline and alert statuses.`)
-            }}
-            <a :href="emptyDashboardHelpPath" class="js-documentation-link">
-              {{ s__('OperationsDashboard|More information') }}
-            </a>
-          </span>
-        </div>
-        <div class="col-12">
-          <gl-deprecated-button
-            v-gl-modal="$options.modalId"
-            class="js-add-projects-button btn btn-success prepend-top-default append-bottom-default"
-          >
+
+      <gl-dashboard-skeleton v-else-if="isLoadingProjects" />
+
+      <gl-empty-state
+        v-else
+        class="js-empty-state"
+        :title="s__(`OperationsDashboard|Add a project to the dashboard`)"
+        :svg-path="emptyDashboardSvgPath"
+      >
+        <template #description>
+          {{
+            s__(
+              `OperationsDashboard|The operations dashboard provides a summary of each project's operational health, including pipeline and alert statuses.`,
+            )
+          }}
+          <gl-link :href="emptyDashboardHelpPath" class="js-documentation-link">{{
+            s__('OperationsDashboard|More information')
+          }}</gl-link
+          >.
+        </template>
+        <template #actions>
+          <gl-button v-gl-modal="$options.modalId" variant="success" class="js-add-projects-button">
             {{ s__('OperationsDashboard|Add projects') }}
-          </gl-deprecated-button>
-        </div>
-      </div>
-      <gl-dashboard-skeleton v-else />
+          </gl-button>
+        </template>
+      </gl-empty-state>
     </div>
   </div>
 </template>
diff --git a/ee/spec/frontend/operations/components/dashboard/dashboard_spec.js b/ee/spec/frontend/operations/components/dashboard/dashboard_spec.js
index 81264bf7ee0113..9b9ea6cf667f7c 100644
--- a/ee/spec/frontend/operations/components/dashboard/dashboard_spec.js
+++ b/ee/spec/frontend/operations/components/dashboard/dashboard_spec.js
@@ -1,11 +1,11 @@
 import MockAdapter from 'axios-mock-adapter';
 import { mount, createLocalVue } from '@vue/test-utils';
 import Vuex from 'vuex';
+import { GlEmptyState } from '@gitlab/ui';
 import Project from 'ee/operations/components/dashboard/project.vue';
 import Dashboard from 'ee/operations/components/dashboard/dashboard.vue';
 import createStore from 'ee/vue_shared/dashboards/store';
 import waitForPromises from 'helpers/wait_for_promises';
-import { trimText } from 'helpers/text_helper';
 import axios from '~/lib/utils/axios_utils';
 import { mockProjectData, mockText } from '../../mock_data';
 
@@ -19,18 +19,27 @@ describe('dashboard component', () => {
   let wrapper;
   let mockAxios;
 
-  const mountComponent = () =>
+  const emptyDashboardHelpPath = '/help/user/operations_dashboard/index.html';
+  const emptyDashboardSvgPath = '/assets/illustrations/operations-dashboard_empty.svg';
+
+  const mountComponent = ({ stubs = {}, state = {} } = {}) =>
     mount(Dashboard, {
       store,
       localVue,
       propsData: {
         addPath: mockAddEndpoint,
         listPath: mockListEndpoint,
-        emptyDashboardSvgPath: '/assets/illustrations/operations-dashboard_empty.svg',
-        emptyDashboardHelpPath: '/help/user/operations_dashboard/index.html',
+        emptyDashboardSvgPath,
+        emptyDashboardHelpPath,
       },
+      state,
+      stubs,
     });
 
+  const findEmptyState = () => wrapper.find(GlEmptyState);
+  // TODO: Use this in other places
+  const findAddProjectButton = () => wrapper.find('.js-add-projects-button');
+
   beforeEach(() => {
     mockAxios = new MockAdapter(axios);
     mockAxios.onGet(mockListEndpoint).replyOnce(200, { projects: mockProjectData(1) });
@@ -204,42 +213,28 @@ describe('dashboard component', () => {
       });
     });
 
-    describe('empty state', () => {
+    describe('when no projects have been added', () => {
       beforeEach(() => {
         store.state.projects = [];
-        mockAxios.reset();
-        mockAxios.onGet(mockListEndpoint).replyOnce(200, { projects: [] });
-        wrapper = mountComponent();
-      });
-
-      it('renders empty state svg after requesting projects with no results', () => {
-        const svgSrc = wrapper.element.querySelector('.js-empty-state-svg').src;
-
-        expect(svgSrc).toMatch(mockText.EMPTY_SVG_SOURCE);
-      });
-
-      it('renders title', () => {
-        expect(wrapper.element.querySelector('.js-title').innerText.trim()).toBe(
-          mockText.EMPTY_TITLE,
-        );
+        store.state.isLoadingProjects = false;
       });
 
-      it('renders sub-title', () => {
-        expect(trimText(wrapper.element.querySelector('.js-sub-title').innerText)).toBe(
-          mockText.EMPTY_SUBTITLE,
-        );
+      it('should render the empty state', () => {
+        expect(findEmptyState().exists()).toBe(true);
       });
 
-      it('renders link to documentation', () => {
-        const link = wrapper.element.querySelector('.js-documentation-link');
+      it('should link to the documentation', () => {
+        const link = findEmptyState().find('.js-documentation-link');
 
-        expect(link.innerText.trim()).toBe('More information');
+        expect(link.exists()).toBe(true);
+        expect(link.attributes().href).toEqual(emptyDashboardHelpPath);
       });
 
-      it('links to documentation', () => {
-        const link = wrapper.element.querySelector('.js-documentation-link');
+      it('should render the add projects button', () => {
+        const button = findAddProjectButton();
 
-        expect(link.href).toMatch(wrapper.props().emptyDashboardHelpPath);
+        expect(button.exists()).toBe(true);
+        expect(button.text()).toEqual('Add projects');
       });
     });
   });
-- 
GitLab


From fe43f915c1839d3b33888d5dda878ba0f591e49e Mon Sep 17 00:00:00 2001
From: samdbeckham <sbeckham@gitlab.com>
Date: Wed, 10 Jun 2020 12:20:57 +0100
Subject: [PATCH 2/2] Adds changes from @himkp review

- Uses data-testid instead of js classes
---
 .../operations/components/dashboard/dashboard.vue | 12 ++++++++----
 .../components/dashboard/dashboard_spec.js        | 15 ++++-----------
 2 files changed, 12 insertions(+), 15 deletions(-)

diff --git a/ee/app/assets/javascripts/operations/components/dashboard/dashboard.vue b/ee/app/assets/javascripts/operations/components/dashboard/dashboard.vue
index 5da12866a747d0..4066c627c8206f 100644
--- a/ee/app/assets/javascripts/operations/components/dashboard/dashboard.vue
+++ b/ee/app/assets/javascripts/operations/components/dashboard/dashboard.vue
@@ -144,7 +144,8 @@ export default {
         v-if="projects.length"
         v-gl-modal="$options.modalId"
         variant="success"
-        class="js-add-projects-button"
+        category="primary"
+        data-testid="add-projects-button"
       >
         {{ s__('OperationsDashboard|Add projects') }}
       </gl-button>
@@ -165,7 +166,6 @@ export default {
 
       <gl-empty-state
         v-else
-        class="js-empty-state"
         :title="s__(`OperationsDashboard|Add a project to the dashboard`)"
         :svg-path="emptyDashboardSvgPath"
       >
@@ -175,13 +175,17 @@ export default {
               `OperationsDashboard|The operations dashboard provides a summary of each project's operational health, including pipeline and alert statuses.`,
             )
           }}
-          <gl-link :href="emptyDashboardHelpPath" class="js-documentation-link">{{
+          <gl-link :href="emptyDashboardHelpPath" data-testid="documentation-link">{{
             s__('OperationsDashboard|More information')
           }}</gl-link
           >.
         </template>
         <template #actions>
-          <gl-button v-gl-modal="$options.modalId" variant="success" class="js-add-projects-button">
+          <gl-button
+            v-gl-modal="$options.modalId"
+            variant="success"
+            data-testid="add-projects-button"
+          >
             {{ s__('OperationsDashboard|Add projects') }}
           </gl-button>
         </template>
diff --git a/ee/spec/frontend/operations/components/dashboard/dashboard_spec.js b/ee/spec/frontend/operations/components/dashboard/dashboard_spec.js
index 9b9ea6cf667f7c..8e2cec3d10a603 100644
--- a/ee/spec/frontend/operations/components/dashboard/dashboard_spec.js
+++ b/ee/spec/frontend/operations/components/dashboard/dashboard_spec.js
@@ -37,8 +37,7 @@ describe('dashboard component', () => {
     });
 
   const findEmptyState = () => wrapper.find(GlEmptyState);
-  // TODO: Use this in other places
-  const findAddProjectButton = () => wrapper.find('.js-add-projects-button');
+  const findAddProjectButton = () => wrapper.find('[data-testid=add-projects-button]');
 
   beforeEach(() => {
     mockAxios = new MockAdapter(axios);
@@ -61,17 +60,11 @@ describe('dashboard component', () => {
     let button;
 
     beforeEach(() => {
-      button = wrapper.element.querySelector('.js-add-projects-button');
+      button = findAddProjectButton();
     });
 
     it('renders add projects text', () => {
-      expect(button.innerText.trim()).toBe(mockText.ADD_PROJECTS);
-    });
-
-    it('renders the projects modal', () => {
-      button.click();
-
-      expect(wrapper.element.querySelector('.add-projects-modal')).toBeDefined();
+      expect(button.text()).toBe(mockText.ADD_PROJECTS);
     });
 
     describe('when a project is added', () => {
@@ -224,7 +217,7 @@ describe('dashboard component', () => {
       });
 
       it('should link to the documentation', () => {
-        const link = findEmptyState().find('.js-documentation-link');
+        const link = findEmptyState().find('[data-testid="documentation-link"]');
 
         expect(link.exists()).toBe(true);
         expect(link.attributes().href).toEqual(emptyDashboardHelpPath);
-- 
GitLab