From 484e3adb279ebb9bc1f73f7addf5e7767a4a6213 Mon Sep 17 00:00:00 2001 From: samdbeckham Date: Wed, 20 May 2020 13:39:02 +0100 Subject: [PATCH 1/2] Updates the environments dashboard empty state - Uses GlEmptyState - Aligns the styling with the security and operations dashboard empty states - Updates the relevant tests and snapshots --- .../components/dashboard/dashboard.vue | 69 +++++++++---------- .../__snapshots__/dashboard_spec.js.snap | 62 ++++------------- .../components/dashboard_spec.js | 10 ++- locale/gitlab.pot | 3 + 4 files changed, 56 insertions(+), 88 deletions(-) diff --git a/ee/app/assets/javascripts/environments_dashboard/components/dashboard/dashboard.vue b/ee/app/assets/javascripts/environments_dashboard/components/dashboard/dashboard.vue index 51c195ca8f39e4..6acc1ea5ee2fb8 100644 --- a/ee/app/assets/javascripts/environments_dashboard/components/dashboard/dashboard.vue +++ b/ee/app/assets/javascripts/environments_dashboard/components/dashboard/dashboard.vue @@ -2,12 +2,13 @@ import { isEmpty } from 'lodash'; import { mapState, mapActions } from 'vuex'; import { + GlButton, + GlDashboardSkeleton, + GlEmptyState, + GlLink, GlModal, GlModalDirective, - GlDeprecatedButton, - GlDashboardSkeleton, GlSprintf, - GlLink, } from '@gitlab/ui'; import { s__ } from '~/locale'; import ProjectSelector from '~/vue_shared/components/project_selector/project_selector.vue'; @@ -31,14 +32,15 @@ export default { viewDocumentationButton: s__('View documentation'), components: { - GlModal, + Environment, + GlButton, GlDashboardSkeleton, - GlDeprecatedButton, - GlSprintf, + GlEmptyState, GlLink, - ProjectSelector, - Environment, + GlModal, + GlSprintf, ProjectHeader, + ProjectSelector, }, directives: { 'gl-modal': GlModalDirective, @@ -153,12 +155,9 @@ export default {

{{ $options.dashboardHeader }}

- + {{ $options.addProjectsButton }} - +

-

-
- -
-

- {{ $options.emptyDashboardHeader }} -

-
- - {{ $options.emptyDashboardDocs }} - -
-
- - {{ $options.viewDocumentationButton }} - -
-
- + + + + + + + diff --git a/ee/spec/frontend/environments_dashboard/components/__snapshots__/dashboard_spec.js.snap b/ee/spec/frontend/environments_dashboard/components/__snapshots__/dashboard_spec.js.snap index 21db3bd40dd88d..4404a431ea7781 100644 --- a/ee/spec/frontend/environments_dashboard/components/__snapshots__/dashboard_spec.js.snap +++ b/ee/spec/frontend/environments_dashboard/components/__snapshots__/dashboard_spec.js.snap @@ -32,17 +32,19 @@ exports[`dashboard should match the snapshot 1`] = ` - Add projects - +

-

-
- -
- -

- - Add a project to the dashboard - -

- -
- - - The environments dashboard provides a summary of each project's environments' status, including pipeline and alert statuses. - - -
- -
- - - View documentation - - -
-
+ `; diff --git a/ee/spec/frontend/environments_dashboard/components/dashboard_spec.js b/ee/spec/frontend/environments_dashboard/components/dashboard_spec.js index 3656639495457b..5a11466b20685f 100644 --- a/ee/spec/frontend/environments_dashboard/components/dashboard_spec.js +++ b/ee/spec/frontend/environments_dashboard/components/dashboard_spec.js @@ -1,6 +1,6 @@ import { shallowMount, createLocalVue } from '@vue/test-utils'; import Vuex from 'vuex'; -import { GlDeprecatedButton, GlModal, GlSprintf, GlLink } from '@gitlab/ui'; +import { GlButton, GlEmptyState, GlModal, GlSprintf, GlLink } from '@gitlab/ui'; import createStore from 'ee/vue_shared/dashboards/store/index'; import state from 'ee/vue_shared/dashboards/store/state'; import component from 'ee/environments_dashboard/components/dashboard/dashboard.vue'; @@ -63,6 +63,10 @@ describe('dashboard', () => { expect(wrapper.find('.js-dashboard-title').text()).toBe('Environments Dashboard'); }); + it('should render the empty state component', () => { + expect(wrapper.find(GlEmptyState).exists()).toBe(true); + }); + describe('page limits information message', () => { let message; @@ -89,7 +93,7 @@ describe('dashboard', () => { let button; beforeEach(() => { - button = wrapper.find(GlDeprecatedButton); + button = wrapper.find(GlButton); }); it('is labelled correctly', () => { @@ -132,7 +136,7 @@ describe('dashboard', () => { describe('project selector modal', () => { beforeEach(() => { - wrapper.find(GlDeprecatedButton).trigger('click'); + wrapper.find(GlButton).trigger('click'); return wrapper.vm.$nextTick(); }); diff --git a/locale/gitlab.pot b/locale/gitlab.pot index 68f09e7257ecad..32d8657311ba74 100644 --- a/locale/gitlab.pot +++ b/locale/gitlab.pot @@ -14174,6 +14174,9 @@ msgstr "" msgid "MissingSSHKeyWarningLink|You won't be able to pull or push project code via SSH until you add an SSH key to your profile" msgstr "" +msgid "ModalButton|Add projects" +msgstr "" + msgid "Modal|Cancel" msgstr "" -- GitLab From c5b9bd1bec8f37f0afc183742abb371c4c64c06e Mon Sep 17 00:00:00 2001 From: samdbeckham Date: Wed, 3 Jun 2020 11:44:59 +0100 Subject: [PATCH 2/2] Adds changes from @wortschi review - removes a redundant empty state class --- .../environments_dashboard/components/dashboard/dashboard.vue | 1 - .../components/__snapshots__/dashboard_spec.js.snap | 1 - 2 files changed, 2 deletions(-) diff --git a/ee/app/assets/javascripts/environments_dashboard/components/dashboard/dashboard.vue b/ee/app/assets/javascripts/environments_dashboard/components/dashboard/dashboard.vue index 6acc1ea5ee2fb8..80dd5860f4aaef 100644 --- a/ee/app/assets/javascripts/environments_dashboard/components/dashboard/dashboard.vue +++ b/ee/app/assets/javascripts/environments_dashboard/components/dashboard/dashboard.vue @@ -193,7 +193,6 @@ export default { diff --git a/ee/spec/frontend/environments_dashboard/components/__snapshots__/dashboard_spec.js.snap b/ee/spec/frontend/environments_dashboard/components/__snapshots__/dashboard_spec.js.snap index 4404a431ea7781..b064e150ece98b 100644 --- a/ee/spec/frontend/environments_dashboard/components/__snapshots__/dashboard_spec.js.snap +++ b/ee/spec/frontend/environments_dashboard/components/__snapshots__/dashboard_spec.js.snap @@ -66,7 +66,6 @@ exports[`dashboard should match the snapshot 1`] = ` class="prepend-top-default" > -- GitLab