Commit a2698aab authored by Brandon Labuschagne's avatar Brandon Labuschagne Committed by Miguel Rincon

Resolve "[DevOps Adoption] Add "This group" badge in adoption table"

parent 3e09d35c
<script>
import { GlTable, GlButton, GlModalDirective, GlTooltipDirective, GlIcon } from '@gitlab/ui';
import {
GlTable,
GlButton,
GlModalDirective,
GlTooltipDirective,
GlIcon,
GlBadge,
} from '@gitlab/ui';
import LocalStorageSync from '~/vue_shared/components/local_storage_sync.vue';
import {
DEVOPS_ADOPTION_TABLE_TEST_IDS,
......@@ -58,6 +65,7 @@ export default {
LocalStorageSync,
DevopsAdoptionDeleteModal,
GlIcon,
GlBadge,
},
i18n,
devopsSegmentModalId: DEVOPS_ADOPTION_SEGMENT_MODAL_ID,
......@@ -66,6 +74,11 @@ export default {
GlTooltip: GlTooltipDirective,
GlModal: GlModalDirective,
},
inject: {
groupGid: {
default: null,
},
},
tableHeaderFields: [
...headers,
{
......@@ -102,6 +115,9 @@ export default {
slotName(key) {
return `head(${key})`;
},
isCurrentGroup(item) {
return item.namespace?.id === this.groupGid;
},
},
};
</script>
......@@ -140,20 +156,16 @@ export default {
</div>
</template>
<template
#cell(name)="{
item: {
namespace: { fullName },
latestSnapshot,
},
}"
>
<template #cell(name)="{ item }">
<div :data-testid="$options.testids.SEGMENT">
<strong v-if="latestSnapshot">{{ fullName }}</strong>
<strong v-if="item.latestSnapshot">{{ item.namespace.fullName }}</strong>
<template v-else>
<span class="gl-text-gray-400">{{ fullName }}</span>
<span class="gl-text-gray-400">{{ item.namespace.fullName }}</span>
<gl-icon name="hourglass" class="gl-text-gray-400" />
</template>
<gl-badge v-if="isCurrentGroup(item)" class="gl-ml-1" variant="info">{{
__('This group')
}}</gl-badge>
</div>
</template>
......
import { GlTable, GlButton, GlIcon } from '@gitlab/ui';
import { GlTable, GlButton, GlIcon, GlBadge } from '@gitlab/ui';
import { mount } from '@vue/test-utils';
import { nextTick } from 'vue';
import DevopsAdoptionDeleteModal from 'ee/analytics/devops_report/devops_adoption/components/devops_adoption_delete_modal.vue';
......@@ -12,12 +12,15 @@ import { devopsAdoptionSegmentsData, devopsAdoptionTableHeaders } from '../mock_
describe('DevopsAdoptionTable', () => {
let wrapper;
const createComponent = () => {
const createComponent = (options = {}) => {
const { provide = {} } = options;
wrapper = mount(DevopsAdoptionTable, {
propsData: {
segments: devopsAdoptionSegmentsData.nodes,
selectedSegment: devopsAdoptionSegmentsData.nodes[0],
},
provide,
directives: {
GlTooltip: createMockDirective(),
},
......@@ -26,7 +29,6 @@ describe('DevopsAdoptionTable', () => {
beforeEach(() => {
localStorage.clear();
createComponent();
});
afterEach(() => {
......@@ -53,6 +55,7 @@ describe('DevopsAdoptionTable', () => {
let headers;
beforeEach(() => {
createComponent();
headers = findTable().findAll(`[data-testid="${TEST_IDS.TABLE_HEADERS}"]`);
});
......@@ -97,10 +100,33 @@ describe('DevopsAdoptionTable', () => {
describe('table fields', () => {
describe('segment name', () => {
it('displays the correct segment name', () => {
createComponent();
expect(findCol(TEST_IDS.SEGMENT).text()).toBe('Group 1');
});
describe('"This group" badge', () => {
const thisGroupGid = devopsAdoptionSegmentsData.nodes[0].namespace.id;
it.each`
scenario | expected | provide
${'is not shown by default'} | ${false} | ${null}
${'is not shown for other groups'} | ${false} | ${{ groupGid: 'anotherGroupGid' }}
${'is shown for the current group'} | ${true} | ${{ groupGid: thisGroupGid }}
`('$scenario', ({ expected, provide }) => {
createComponent({ provide });
const badge = findColSubComponent(TEST_IDS.SEGMENT, GlBadge);
expect(badge.exists()).toBe(expected);
});
});
describe('pending state (no snapshot data available)', () => {
beforeEach(() => {
createComponent();
});
it('grays the text out', () => {
const name = findColRowChild(TEST_IDS.SEGMENT, 1, 'span');
......@@ -132,12 +158,16 @@ describe('DevopsAdoptionTable', () => {
${TEST_IDS.DEPLOYS} | ${'deploys'} | ${false}
${TEST_IDS.SCANNING} | ${'scanning'} | ${false}
`('displays the correct $field snapshot value', ({ id, flag }) => {
createComponent();
const booleanFlag = findColSubComponent(id, DevopsAdoptionTableCellFlag);
expect(booleanFlag.props('enabled')).toBe(flag);
});
it('displays the actions icon', () => {
createComponent();
const button = findColSubComponent(TEST_IDS.ACTIONS, GlButton);
expect(button.exists()).toBe(true);
......@@ -147,6 +177,10 @@ describe('DevopsAdoptionTable', () => {
});
describe('delete modal integration', () => {
beforeEach(() => {
createComponent();
});
it('re emits trackModalOpenState with the given value', async () => {
findDeleteModal().vm.$emit('trackModalOpenState', true);
......@@ -158,6 +192,7 @@ describe('DevopsAdoptionTable', () => {
let headers;
beforeEach(() => {
createComponent();
headers = findTable().findAll(`[data-testid="${TEST_IDS.TABLE_HEADERS}"]`);
});
......
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