Commit aa96f452 authored by Martin Wortschack's avatar Martin Wortschack

Merge branch '198626-environments-dashboard-empty-state' into 'master'

Updates the environments dashboard empty state

See merge request gitlab-org/gitlab!32656
parents 7bb01885 c5b9bd1b
...@@ -2,12 +2,13 @@ ...@@ -2,12 +2,13 @@
import { isEmpty } from 'lodash'; import { isEmpty } from 'lodash';
import { mapState, mapActions } from 'vuex'; import { mapState, mapActions } from 'vuex';
import { import {
GlButton,
GlDashboardSkeleton,
GlEmptyState,
GlLink,
GlModal, GlModal,
GlModalDirective, GlModalDirective,
GlDeprecatedButton,
GlDashboardSkeleton,
GlSprintf, GlSprintf,
GlLink,
} from '@gitlab/ui'; } from '@gitlab/ui';
import { s__ } from '~/locale'; import { s__ } from '~/locale';
import ProjectSelector from '~/vue_shared/components/project_selector/project_selector.vue'; import ProjectSelector from '~/vue_shared/components/project_selector/project_selector.vue';
...@@ -31,14 +32,15 @@ export default { ...@@ -31,14 +32,15 @@ export default {
viewDocumentationButton: s__('View documentation'), viewDocumentationButton: s__('View documentation'),
components: { components: {
GlModal, Environment,
GlButton,
GlDashboardSkeleton, GlDashboardSkeleton,
GlDeprecatedButton, GlEmptyState,
GlSprintf,
GlLink, GlLink,
ProjectSelector, GlModal,
Environment, GlSprintf,
ProjectHeader, ProjectHeader,
ProjectSelector,
}, },
directives: { directives: {
'gl-modal': GlModalDirective, 'gl-modal': GlModalDirective,
...@@ -153,12 +155,9 @@ export default { ...@@ -153,12 +155,9 @@ export default {
<h1 class="js-dashboard-title page-title text-nowrap flex-fill"> <h1 class="js-dashboard-title page-title text-nowrap flex-fill">
{{ $options.dashboardHeader }} {{ $options.dashboardHeader }}
</h1> </h1>
<gl-deprecated-button <gl-button v-gl-modal="$options.modalId" class="js-add-projects-button" variant="success">
v-gl-modal="$options.modalId"
class="js-add-projects-button btn btn-success"
>
{{ $options.addProjectsButton }} {{ $options.addProjectsButton }}
</gl-deprecated-button> </gl-button>
</div> </div>
<p class="mt-2 mb-4 js-page-limits-message"> <p class="mt-2 mb-4 js-page-limits-message">
<gl-sprintf <gl-sprintf
...@@ -189,28 +188,27 @@ export default { ...@@ -189,28 +188,27 @@ export default {
</div> </div>
</div> </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"> <gl-dashboard-skeleton v-else-if="isLoadingProjects" />
<img :src="emptyDashboardSvgPath" class="js-empty-state-svg col-12 prepend-top-20" />
</div> <gl-empty-state
<h4 class="js-title col-12 prepend-top-20"> v-else
{{ $options.emptyDashboardHeader }} :title="$options.emptyDashboardHeader"
</h4> :svg-path="emptyDashboardSvgPath"
<div class="col-12 d-flex justify-content-center"> >
<span class="js-sub-title mw-460 text-tertiary text-left"> <template #description>
{{ $options.emptyDashboardDocs }} {{ $options.emptyDashboardDocs }}
</span> <gl-link :href="emptyDashboardHelpPath" class="js-documentation-link">{{
</div> $options.viewDocumentationButton
<div class="col-12"> }}</gl-link
<a >.
:href="emptyDashboardHelpPath" </template>
class="js-documentation-link btn btn-primary prepend-top-default append-bottom-default" <template #actions>
> <gl-button v-gl-modal="$options.modalId" variant="success" class="js-add-projects-button">
{{ $options.viewDocumentationButton }} {{ s__('ModalButton|Add projects') }}
</a> </gl-button>
</div> </template>
</div> </gl-empty-state>
<gl-dashboard-skeleton v-else />
</div> </div>
</div> </div>
</template> </template>
...@@ -32,17 +32,19 @@ exports[`dashboard should match the snapshot 1`] = ` ...@@ -32,17 +32,19 @@ exports[`dashboard should match the snapshot 1`] = `
</h1> </h1>
<gl-deprecated-button-stub <gl-button-stub
class="js-add-projects-button btn btn-success" category="tertiary"
class="js-add-projects-button"
icon=""
role="button" role="button"
size="md" size="medium"
tabindex="0" tabindex="0"
variant="secondary" variant="success"
> >
Add projects Add projects
</gl-deprecated-button-stub> </gl-button-stub>
</div> </div>
<p <p
...@@ -63,51 +65,10 @@ exports[`dashboard should match the snapshot 1`] = ` ...@@ -63,51 +65,10 @@ exports[`dashboard should match the snapshot 1`] = `
<div <div
class="prepend-top-default" class="prepend-top-default"
> >
<div <gl-empty-state-stub
class="row prepend-top-20 text-center" svgpath="/assets/illustrations/operations-dashboard_empty.svg"
> title="Add a project to the dashboard"
<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>
</div> </div>
</div> </div>
`; `;
import { shallowMount, createLocalVue } from '@vue/test-utils'; import { shallowMount, createLocalVue } from '@vue/test-utils';
import Vuex from 'vuex'; 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 createStore from 'ee/vue_shared/dashboards/store/index';
import state from 'ee/vue_shared/dashboards/store/state'; import state from 'ee/vue_shared/dashboards/store/state';
import component from 'ee/environments_dashboard/components/dashboard/dashboard.vue'; import component from 'ee/environments_dashboard/components/dashboard/dashboard.vue';
...@@ -63,6 +63,10 @@ describe('dashboard', () => { ...@@ -63,6 +63,10 @@ describe('dashboard', () => {
expect(wrapper.find('.js-dashboard-title').text()).toBe('Environments 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', () => { describe('page limits information message', () => {
let message; let message;
...@@ -89,7 +93,7 @@ describe('dashboard', () => { ...@@ -89,7 +93,7 @@ describe('dashboard', () => {
let button; let button;
beforeEach(() => { beforeEach(() => {
button = wrapper.find(GlDeprecatedButton); button = wrapper.find(GlButton);
}); });
it('is labelled correctly', () => { it('is labelled correctly', () => {
...@@ -132,7 +136,7 @@ describe('dashboard', () => { ...@@ -132,7 +136,7 @@ describe('dashboard', () => {
describe('project selector modal', () => { describe('project selector modal', () => {
beforeEach(() => { beforeEach(() => {
wrapper.find(GlDeprecatedButton).trigger('click'); wrapper.find(GlButton).trigger('click');
return wrapper.vm.$nextTick(); return wrapper.vm.$nextTick();
}); });
......
...@@ -14179,6 +14179,9 @@ msgstr "" ...@@ -14179,6 +14179,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" 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 "" msgstr ""
msgid "ModalButton|Add projects"
msgstr ""
msgid "Modal|Cancel" msgid "Modal|Cancel"
msgstr "" 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