Commit 484e3adb authored by samdbeckham's avatar samdbeckham

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
parent a38eb0c4
......@@ -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 {
<h1 class="js-dashboard-title page-title text-nowrap flex-fill">
{{ $options.dashboardHeader }}
</h1>
<gl-deprecated-button
v-gl-modal="$options.modalId"
class="js-add-projects-button btn btn-success"
>
<gl-button v-gl-modal="$options.modalId" class="js-add-projects-button" variant="success">
{{ $options.addProjectsButton }}
</gl-deprecated-button>
</gl-button>
</div>
<p class="mt-2 mb-4 js-page-limits-message">
<gl-sprintf
......@@ -189,28 +188,28 @@ export default {
</div>
</div>
</div>
<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">
{{ $options.emptyDashboardHeader }}
</h4>
<div class="col-12 d-flex justify-content-center">
<span class="js-sub-title mw-460 text-tertiary text-left">
{{ $options.emptyDashboardDocs }}
</span>
</div>
<div class="col-12">
<a
:href="emptyDashboardHelpPath"
class="js-documentation-link btn btn-primary prepend-top-default append-bottom-default"
>
{{ $options.viewDocumentationButton }}
</a>
</div>
</div>
<gl-dashboard-skeleton v-else />
<gl-dashboard-skeleton v-else-if="isLoadingProjects" />
<gl-empty-state
v-else
class="js-empty-state"
:title="$options.emptyDashboardHeader"
:svg-path="emptyDashboardSvgPath"
>
<template #description>
{{ $options.emptyDashboardDocs }}
<gl-link :href="emptyDashboardHelpPath" class="js-documentation-link">{{
$options.viewDocumentationButton
}}</gl-link
>.
</template>
<template #actions>
<gl-button v-gl-modal="$options.modalId" variant="success" class="js-add-projects-button">
{{ s__('ModalButton|Add projects') }}
</gl-button>
</template>
</gl-empty-state>
</div>
</div>
</template>
......@@ -32,17 +32,19 @@ exports[`dashboard should match the snapshot 1`] = `
</h1>
<gl-deprecated-button-stub
class="js-add-projects-button btn btn-success"
<gl-button-stub
category="tertiary"
class="js-add-projects-button"
icon=""
role="button"
size="md"
size="medium"
tabindex="0"
variant="secondary"
variant="success"
>
Add projects
</gl-deprecated-button-stub>
</gl-button-stub>
</div>
<p
......@@ -63,51 +65,11 @@ exports[`dashboard should match the snapshot 1`] = `
<div
class="prepend-top-default"
>
<div
class="row prepend-top-20 text-center"
>
<div
class="col-12 d-flex justify-content-center svg-content"
>
<img
class="js-empty-state-svg col-12 prepend-top-20"
src="/assets/illustrations/operations-dashboard_empty.svg"
/>
</div>
<h4
class="js-title col-12 prepend-top-20"
>
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"
>
The environments dashboard provides a summary of each project's environments' status, including pipeline and alert statuses.
</span>
</div>
<div
class="col-12"
>
<a
class="js-documentation-link btn btn-primary prepend-top-default append-bottom-default"
href="/help/user/operations_dashboard/index.html"
>
View documentation
</a>
</div>
</div>
<gl-empty-state-stub
class="js-empty-state"
svgpath="/assets/illustrations/operations-dashboard_empty.svg"
title="Add a project to the dashboard"
/>
</div>
</div>
`;
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();
});
......
......@@ -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 ""
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment