Commit f0d50b68 authored by Jiaan Louw's avatar Jiaan Louw Committed by Nicolò Maria Mezzopera

Apply reviewer feedback

- Replace template with GlEmptyState component
- Update strings
- Update specs
parent d9aa0aae
<script>
import { GlLink, GlEmptyState } from '@gitlab/ui';
import { __ } from '~/locale';
export default {
components: {
GlLink,
GlEmptyState,
},
props: {
imagePath: {
type: String,
......@@ -9,27 +14,24 @@ export default {
},
},
strings: {
heading: __(
"Merge requests are a place to propose changes you've made to a project and discuss those changes with others",
heading: __("A merge request hasn't yet been merged"),
subheading: __(
"The Compliance Dashboard gives you the ability to see a group's merge request activity by providing a high-level view for all projects in the group.",
),
subheading: __('Interested parties can even contribute by pushing commits if they want to.'),
alt: __('Merge Requests'),
documentation: __('View documentation'),
},
documentationPath: 'https://docs.gitlab.com/ee/user/compliance/compliance_dashboard/index.html',
};
</script>
<template>
<div class="row empty-state merge-requests">
<div class="col-12">
<div class="svg-content">
<img :src="imagePath" :alt="$options.strings.alt" />
</div>
</div>
<div class="col-12">
<div class="text-content">
<h4>{{ $options.strings.heading }}</h4>
<p>{{ $options.strings.subheading }}</p>
</div>
</div>
</div>
<gl-empty-state
:title="$options.strings.heading"
:description="$options.strings.subheading"
:svg-path="imagePath"
>
<template #actions>
<gl-link :href="$options.documentationPath">{{ $options.strings.documentation }}</gl-link>
</template>
</gl-empty-state>
</template>
---
title: Improve compliance dashboard empty state message
merge_request: 45273
author:
type: changed
import { shallowMount } from '@vue/test-utils';
import { GlEmptyState } from '@gitlab/ui';
import EmptyState from 'ee/compliance_dashboard/components/empty_state.vue';
......@@ -7,8 +8,7 @@ const IMAGE_PATH = 'empty.svg';
describe('EmptyState component', () => {
let wrapper;
const findImage = () => wrapper.find('img');
const findText = () => wrapper.find('.text-content');
const emptyStateProp = prop => wrapper.find(GlEmptyState).props(prop);
const createComponent = (props = {}) => {
return shallowMount(EmptyState, {
......@@ -29,12 +29,12 @@ describe('EmptyState component', () => {
describe('behaviour', () => {
it('sets the empty SVG path', () => {
expect(findImage().element.getAttribute('src')).toEqual(IMAGE_PATH);
expect(emptyStateProp('svgPath')).toBe(IMAGE_PATH);
});
it('renders a message', () => {
expect(findText().text()).toEqual(
"Merge requests are a place to propose changes you've made to a project and discuss those changes with others Interested parties can even contribute by pushing commits if they want to.",
it('sets the description', () => {
expect(emptyStateProp('description')).toBe(
"The Compliance Dashboard gives you the ability to see a group's merge request activity by providing a high-level view for all projects in the group.",
);
});
});
......
......@@ -1253,6 +1253,9 @@ msgstr ""
msgid "A merge request approval is required when the license compliance report contains a denied license."
msgstr ""
msgid "A merge request hasn't yet been merged"
msgstr ""
msgid "A new Auto DevOps pipeline has been created, go to %{pipelines_link_start}Pipelines page%{pipelines_link_end} for details"
msgstr ""
......@@ -27115,6 +27118,9 @@ msgstr ""
msgid "The CSV export will be created in the background. Once finished, it will be sent to %{strong_open}%{email}%{strong_close} in an attachment."
msgstr ""
msgid "The Compliance Dashboard gives you the ability to see a group's merge request activity by providing a high-level view for all projects in the group."
msgstr ""
msgid "The GitLab user to which the Jira user %{jiraDisplayName} will be mapped"
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