Skip to content

G
gitlab-ce
Commit 39762ba9 authored by Denys Mishunov's avatar Denys Mishunov
Browse files
Options

Merge branch '220328-restructure-compliance-dashboard-to-use-tabs' into 'master' 

Update Compliance Dashboard to use tabs

Closes #220328

See merge request gitlab-org/gitlab!37959
parents a22b50dc 6777ad8b
Hide whitespace changes
Inline Side-by-side
Showing with 178 additions and 128 deletions
ee/app/assets/javascripts/compliance_dashboard/components/dashboard.vue
View file @ 39762ba9
<script> <script>
import { GlTooltipDirective } from '@gitlab/ui'; import { GlTabs, GlTab, GlTooltipDirective } from '@gitlab/ui';
import { isEmpty } from 'lodash'; import { isEmpty } from 'lodash';
import { sprintf, __, s__ } from '~/locale'; import { sprintf, __, s__ } from '~/locale';
...@@ -26,6 +26,8 @@ export default { ...@@ -26,6 +26,8 @@ export default {
MergeRequest, MergeRequest,
Pagination, Pagination,
PipelineStatus, PipelineStatus,
GlTab,
GlTabs,
}, },
mixins: [timeagoMixin], mixins: [timeagoMixin],
props: { props: {
...@@ -71,6 +73,7 @@ export default { ...@@ -71,6 +73,7 @@ export default {
approvalStatusLabel: __('Approval Status'), approvalStatusLabel: __('Approval Status'),
pipelineStatusLabel: __('Pipeline'), pipelineStatusLabel: __('Pipeline'),
updatesLabel: __('Updates'), updatesLabel: __('Updates'),
mergeRequestsTabLabel: __('Merge Requests'),
}, },
}; };
</script> </script>
...@@ -81,48 +84,61 @@ export default { ...@@ -81,48 +84,61 @@ export default {
<h4>{{ $options.strings.heading }}</h4> <h4>{{ $options.strings.heading }}</h4>
<p>{{ $options.strings.subheading }}</p> <p>{{ $options.strings.subheading }}</p>
</header> </header>
<div class="dashboard-grid"> <gl-tabs>
<grid-column-heading :heading="$options.strings.mergeRequestLabel" /> <gl-tab>
<grid-column-heading :heading="$options.strings.approvalStatusLabel" class="gl-text-center" /> <template #title>
<grid-column-heading :heading="$options.strings.pipelineStatusLabel" class="gl-text-center" /> <span>{{ $options.strings.mergeRequestsTabLabel }}</span>
<grid-column-heading :heading="$options.strings.updatesLabel" class="gl-text-right" /> </template>
<div class="dashboard-grid">
<template v-for="mergeRequest in mergeRequests"> <grid-column-heading :heading="$options.strings.mergeRequestLabel" />
<merge-request :key="key(mergeRequest.id, 'MR')" :merge-request="mergeRequest" /> <grid-column-heading
:heading="$options.strings.approvalStatusLabel"
<div class="gl-text-center"
:key="key(mergeRequest.id, 'approvalStatus')"
class="gl-display-flex gl-align-items-center gl-justify-content-center gl-border-b-solid gl-border-b-1 gl-border-b-gray-100 gl-p-5"
>
<approval-status
v-if="hasStatus(mergeRequest.approval_status)"
:status="mergeRequest.approval_status"
/> />
</div> <grid-column-heading
<div :heading="$options.strings.pipelineStatusLabel"
:key="key(mergeRequest.id, 'pipeline')" class="gl-text-center"
class="dashboard-pipeline gl-display-flex gl-align-items-center gl-justify-content-center gl-border-b-solid gl-border-b-1 gl-border-b-gray-100 gl-p-5"
>
<pipeline-status
v-if="hasStatus(mergeRequest.pipeline_status)"
:status="mergeRequest.pipeline_status"
/> />
</div> <grid-column-heading :heading="$options.strings.updatesLabel" class="gl-text-right" />
<template v-for="mergeRequest in mergeRequests">
<merge-request :key="key(mergeRequest.id, 'MR')" :merge-request="mergeRequest" />
<div
:key="key(mergeRequest.id, 'approvalStatus')"
class="gl-display-flex gl-align-items-center gl-justify-content-center gl-border-b-solid gl-border-b-1 gl-border-b-gray-100 gl-p-5"
>
<approval-status
v-if="hasStatus(mergeRequest.approval_status)"
:status="mergeRequest.approval_status"
/>
</div>
<div
:key="key(mergeRequest.id, 'pipeline')"
class="dashboard-pipeline gl-display-flex gl-align-items-center gl-justify-content-center gl-border-b-solid gl-border-b-1 gl-border-b-gray-100 gl-p-5"
>
<pipeline-status
v-if="hasStatus(mergeRequest.pipeline_status)"
:status="mergeRequest.pipeline_status"
/>
</div>
<div <div
:key="key(mergeRequest.id, 'updates')" :key="key(mergeRequest.id, 'updates')"
class="gl-text-right gl-border-b-solid gl-border-b-1 gl-border-b-gray-100 gl-p-5 gl-relative" class="gl-text-right gl-border-b-solid gl-border-b-1 gl-border-b-gray-100 gl-p-5 gl-relative"
> >
<approvers :approvers="mergeRequest.approved_by_users" /> <approvers :approvers="mergeRequest.approved_by_users" />
<span class="gl-text-gray-700"> <span class="gl-text-gray-700">
<time v-gl-tooltip.bottom="timeTooltip(mergeRequest.merged_at)">{{ <time v-gl-tooltip.bottom="timeTooltip(mergeRequest.merged_at)">{{
timeAgoString(mergeRequest.merged_at) timeAgoString(mergeRequest.merged_at)
}}</time> }}</time>
</span> </span>
</div>
</template>
</div> </div>
</template> <pagination :is-last-page="isLastPage" />
</div> </gl-tab>
<pagination :is-last-page="isLastPage" /> </gl-tabs>
</div> </div>
<empty-state v-else :image-path="emptyStateSvgPath" /> <empty-state v-else :image-path="emptyStateSvgPath" />
</template> </template>
ee/changelogs/unreleased/220328-restructure-compliance-dashboard-to-use-tabs.yml 0 → 100644
View file @ 39762ba9
---
title: Update Compliance Dashboard to use tabs
merge_request: 37959
author:
type: changed
ee/spec/frontend/compliance_dashboard/components/__snapshots__/dashboard_spec.js.snap
View file @ 39762ba9
...@@ -16,97 +16,115 @@ exports[`ComplianceDashboard component when there are merge requests matches the ...@@ -16,97 +16,115 @@ exports[`ComplianceDashboard component when there are merge requests matches the
</p> </p>
</header> </header>
<div <gl-tabs-stub
class="dashboard-grid" theme="indigo"
> >
<grid-column-heading-stub <b-tab-stub
heading="Merge Request" tag="div"
/> title=""
titlelinkclass="gl-tab-nav-item"
<grid-column-heading-stub
class="gl-text-center"
heading="Approval Status"
/>
<grid-column-heading-stub
class="gl-text-center"
heading="Pipeline"
/>
<grid-column-heading-stub
class="gl-text-right"
heading="Updates"
/>
<div
data-testid="merge-request"
>
Merge request 0
</div>
<div
class="gl-display-flex gl-align-items-center gl-justify-content-center gl-border-b-solid gl-border-b-1 gl-border-b-gray-100 gl-p-5"
>
<!---->
</div>
<div
class="dashboard-pipeline gl-display-flex gl-align-items-center gl-justify-content-center gl-border-b-solid gl-border-b-1 gl-border-b-gray-100 gl-p-5"
>
<!---->
</div>
<div
class="gl-text-right gl-border-b-solid gl-border-b-1 gl-border-b-gray-100 gl-p-5 gl-relative"
>
<approvers-stub
approvers=""
/>
<span
class="gl-text-gray-700"
>
<time>
merged 2 days ago
</time>
</span>
</div>
<div
data-testid="merge-request"
> >
Merge request 1 <template>
</div>
<div
<div class="dashboard-grid"
class="gl-display-flex gl-align-items-center gl-justify-content-center gl-border-b-solid gl-border-b-1 gl-border-b-gray-100 gl-p-5" >
> <grid-column-heading-stub
<!----> heading="Merge Request"
</div> />
<div <grid-column-heading-stub
class="dashboard-pipeline gl-display-flex gl-align-items-center gl-justify-content-center gl-border-b-solid gl-border-b-1 gl-border-b-gray-100 gl-p-5" class="gl-text-center"
> heading="Approval Status"
<!----> />
</div>
<grid-column-heading-stub
<div class="gl-text-center"
class="gl-text-right gl-border-b-solid gl-border-b-1 gl-border-b-gray-100 gl-p-5 gl-relative" heading="Pipeline"
> />
<approvers-stub
approvers="" <grid-column-heading-stub
/> class="gl-text-right"
heading="Updates"
<span />
class="gl-text-gray-700"
> <div
<time> data-testid="merge-request"
merged 2 days ago >
</time> Merge request 0
</span> </div>
</div>
</div> <div
class="gl-display-flex gl-align-items-center gl-justify-content-center gl-border-b-solid gl-border-b-1 gl-border-b-gray-100 gl-p-5"
<pagination-stub /> >
<!---->
</div>
<div
class="dashboard-pipeline gl-display-flex gl-align-items-center gl-justify-content-center gl-border-b-solid gl-border-b-1 gl-border-b-gray-100 gl-p-5"
>
<!---->
</div>
<div
class="gl-text-right gl-border-b-solid gl-border-b-1 gl-border-b-gray-100 gl-p-5 gl-relative"
>
<approvers-stub
approvers=""
/>
<span
class="gl-text-gray-700"
>
<time>
merged 2 days ago
</time>
</span>
</div>
<div
data-testid="merge-request"
>
Merge request 1
</div>
<div
class="gl-display-flex gl-align-items-center gl-justify-content-center gl-border-b-solid gl-border-b-1 gl-border-b-gray-100 gl-p-5"
>
<!---->
</div>
<div
class="dashboard-pipeline gl-display-flex gl-align-items-center gl-justify-content-center gl-border-b-solid gl-border-b-1 gl-border-b-gray-100 gl-p-5"
>
<!---->
</div>
<div
class="gl-text-right gl-border-b-solid gl-border-b-1 gl-border-b-gray-100 gl-p-5 gl-relative"
>
<approvers-stub
approvers=""
/>
<span
class="gl-text-gray-700"
>
<time>
merged 2 days ago
</time>
</span>
</div>
</div>
<pagination-stub />
</template>
<template>
<span>
Merge Requests
</span>
</template>
</b-tab-stub>
</gl-tabs-stub>
</div> </div>
`; `;
......
ee/spec/frontend/compliance_dashboard/components/dashboard_spec.js
View file @ 39762ba9
import { shallowMount } from '@vue/test-utils'; import { shallowMount } from '@vue/test-utils';
import { GlTabs, GlTab } from '@gitlab/ui';
import ComplianceDashboard from 'ee/compliance_dashboard/components/dashboard.vue'; import ComplianceDashboard from 'ee/compliance_dashboard/components/dashboard.vue';
import ApprovalStatus from 'ee/compliance_dashboard/components/approval_status.vue'; import ApprovalStatus from 'ee/compliance_dashboard/components/approval_status.vue';
...@@ -14,6 +15,7 @@ describe('ComplianceDashboard component', () => { ...@@ -14,6 +15,7 @@ describe('ComplianceDashboard component', () => {
const findApprovalStatus = () => wrapper.find(ApprovalStatus); const findApprovalStatus = () => wrapper.find(ApprovalStatus);
const findPipelineStatus = () => wrapper.find(PipelineStatus); const findPipelineStatus = () => wrapper.find(PipelineStatus);
const findApprovers = () => wrapper.find(Approvers); const findApprovers = () => wrapper.find(Approvers);
const findDashboardTabs = () => wrapper.find(GlTabs);
const createComponent = (props = {}, options = {}) => { const createComponent = (props = {}, options = {}) => {
return shallowMount(ComplianceDashboard, { return shallowMount(ComplianceDashboard, {
...@@ -24,6 +26,7 @@ describe('ComplianceDashboard component', () => { ...@@ -24,6 +26,7 @@ describe('ComplianceDashboard component', () => {
...props, ...props,
}, },
stubs: { stubs: {
GlTab,
MergeRequest: { MergeRequest: {
props: { mergeRequest: Object }, props: { mergeRequest: Object },
template: `<div data-testid="merge-request">{{ mergeRequest.title }}</div>`, template: `<div data-testid="merge-request">{{ mergeRequest.title }}</div>`,
...@@ -49,6 +52,10 @@ describe('ComplianceDashboard component', () => { ...@@ -49,6 +52,10 @@ describe('ComplianceDashboard component', () => {
expect(findMergeRequests().length).toEqual(2); expect(findMergeRequests().length).toEqual(2);
}); });
it('renders the dashboard tabs', () => {
expect(findDashboardTabs().exists()).toEqual(true);
});
describe('approval status', () => { describe('approval status', () => {
it('does not render if there is no approval status', () => { it('does not render if there is no approval status', () => {
expect(findApprovalStatus().exists()).toBe(false); expect(findApprovalStatus().exists()).toBe(false);
...@@ -92,5 +99,9 @@ describe('ComplianceDashboard component', () => { ...@@ -92,5 +99,9 @@ describe('ComplianceDashboard component', () => {
it('does not render merge requests', () => { it('does not render merge requests', () => {
expect(findMergeRequests().exists()).toEqual(false); expect(findMergeRequests().exists()).toEqual(false);
}); });
it('does not render the dashboard tabs', () => {
expect(findDashboardTabs().exists()).toEqual(false);
});
}); });
}); });
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
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7