Skip to content

G
gitlab-ce
Commit e41151b7 authored by Illya Klymov's avatar Illya Klymov
Browse files
Options

Merge branch '212867-clean-up-dependency_list_ui-for-table' into 'master' 

Remove feature flag from dependencies table

See merge request gitlab-org/gitlab!31079
parents 7dcbe647 5b76787c
Show whitespace changes
Inline Side-by-side
Showing with 144 additions and 434 deletions
ee/app/assets/javascripts/dependencies/components/dependencies_table.vue
View file @ e41151b7
......@@ -2,8 +2,6 @@
import { cloneDeep } from 'lodash';
import { GlBadge, GlIcon, GlLink, GlButton, GlSkeletonLoading, GlTable } from '@gitlab/ui';
import { s__ } from '~/locale';
import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
import DependenciesTableRow from './dependencies_table_row.vue';
import DependencyLicenseLinks from './dependency_license_links.vue';
import DependencyVulnerabilities from './dependency_vulnerabilities.vue';
......@@ -26,7 +24,6 @@ const tdClass = (value, key, item) => {
export default {
name: 'DependenciesTable',
components: {
DependenciesTableRow,
DependencyLicenseLinks,
DependencyVulnerabilities,
GlBadge,
......@@ -36,7 +33,6 @@ export default {
GlSkeletonLoading,
GlTable,
},
mixins: [glFeatureFlagsMixin()],
props: {
dependencies: {
type: Array,
......@@ -48,18 +44,8 @@ export default {
},
},
data() {
const tableSections = [
{ className: 'section-20', label: s__('Dependencies|Status') },
{ className: 'section-20', label: s__('Dependencies|Component') },
{ className: 'section-10', label: s__('Dependencies|Version') },
{ className: 'section-20', label: s__('Dependencies|Packager') },
{ className: 'section-15', label: s__('Dependencies|Location') },
{ className: 'section-15', label: s__('Dependencies|License') },
];
return {
localDependencies: this.transformDependenciesForUI(this.dependencies),
tableSections,
};
},
computed: {
......@@ -96,7 +82,6 @@ export default {
<!-- tbody- and thead-class props can be removed when
https://gitlab.com/gitlab-org/gitlab/-/issues/213324 is fixed -->
<gl-table
v-if="glFeatures.dependencyListUi"
:fields="$options.fields"
:items="localDependencies"
:busy="isLoading"
......@@ -168,25 +153,4 @@ export default {
</div>
</template>
</gl-table>
<div v-else>
<div class="gl-responsive-table-row table-row-header text-2 bg-secondary-50 px-2" role="row">
<div
v-for="(section, index) in tableSections"
:key="index"
class="table-section"
:class="section.className"
role="rowheader"
>
{{ section.label }}
</div>
</div>
<dependencies-table-row
v-for="(dependency, index) in dependencies"
:key="index"
:dependency="dependency"
:is-loading="isLoading"
/>
</div>
</template>
ee/spec/frontend/dependencies/components/__snapshots__/dependencies_table_spec.js.snap deleted 100644 → 0
View file @ 7dcbe647
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`DependenciesTable component given a list of dependencies (loaded) matches the snapshot 1`] = `
<div>
<div
class="gl-responsive-table-row table-row-header text-2 bg-secondary-50 px-2"
role="row"
>
<div
class="table-section section-20"
role="rowheader"
>
Status
</div>
<div
class="table-section section-20"
role="rowheader"
>
Component
</div>
<div
class="table-section section-10"
role="rowheader"
>
Version
</div>
<div
class="table-section section-20"
role="rowheader"
>
Packager
</div>
<div
class="table-section section-15"
role="rowheader"
>
Location
</div>
<div
class="table-section section-15"
role="rowheader"
>
License
</div>
</div>
<dependencies-table-row-stub
dependency="[object Object]"
/>
<dependencies-table-row-stub
dependency="[object Object]"
/>
</div>
`;
exports[`DependenciesTable component given a list of dependencies (loading) matches the snapshot 1`] = `
<div>
<div
class="gl-responsive-table-row table-row-header text-2 bg-secondary-50 px-2"
role="row"
>
<div
class="table-section section-20"
role="rowheader"
>
Status
</div>
<div
class="table-section section-20"
role="rowheader"
>
Component
</div>
<div
class="table-section section-10"
role="rowheader"
>
Version
</div>
<div
class="table-section section-20"
role="rowheader"
>
Packager
</div>
<div
class="table-section section-15"
role="rowheader"
>
Location
</div>
<div
class="table-section section-15"
role="rowheader"
>
License
</div>
</div>
<dependencies-table-row-stub
dependency="[object Object]"
isloading="true"
/>
<dependencies-table-row-stub
dependency="[object Object]"
isloading="true"
/>
</div>
`;
exports[`DependenciesTable component given an empty list of dependencies matches the snapshot 1`] = `
<div>
<div
class="gl-responsive-table-row table-row-header text-2 bg-secondary-50 px-2"
role="row"
>
<div
class="table-section section-20"
role="rowheader"
>
Status
</div>
<div
class="table-section section-20"
role="rowheader"
>
Component
</div>
<div
class="table-section section-10"
role="rowheader"
>
Version
</div>
<div
class="table-section section-20"
role="rowheader"
>
Packager
</div>
<div
class="table-section section-15"
role="rowheader"
>
Location
</div>
<div
class="table-section section-15"
role="rowheader"
>
License
</div>
</div>
</div>
`;
ee/spec/frontend/dependencies/components/dependencies_table_spec.js
View file @ e41151b7
import { nextTick } from 'vue';
import { mount, shallowMount } from '@vue/test-utils';
import { mount } from '@vue/test-utils';
import { GlBadge, GlButton, GlLink, GlSkeletonLoading } from '@gitlab/ui';
import stubChildren from 'helpers/stub_children';
import DependenciesTable from 'ee/dependencies/components/dependencies_table.vue';
import DependenciesTableRow from 'ee/dependencies/components/dependencies_table_row.vue';
import DependencyLicenseLinks from 'ee/dependencies/components/dependency_license_links.vue';
import DependencyVulnerabilities from 'ee/dependencies/components/dependency_vulnerabilities.vue';
import { makeDependency } from './utils';
......@@ -10,10 +10,11 @@ import { makeDependency } from './utils';
describe('DependenciesTable component', () => {
let wrapper;
const factory = ({ propsData, ...options } = {}) => {
wrapper = shallowMount(DependenciesTable, {
const createComponent = ({ propsData, ...options } = {}) => {
wrapper = mount(DependenciesTable, {
...options,
propsData: { ...propsData },
stubs: { ...stubChildren(DependenciesTable), GlTable: false },
});
};
......@@ -21,66 +22,6 @@ describe('DependenciesTable component', () => {
wrapper.destroy();
});
describe('given an empty list of dependencies', () => {
beforeEach(() => {
factory({
propsData: {
dependencies: [],
isLoading: false,
},
});
});
it('matches the snapshot', () => {
expect(wrapper.element).toMatchSnapshot();
});
});
[true, false].forEach(isLoading => {
describe(`given a list of dependencies (${isLoading ? 'loading' : 'loaded'})`, () => {
let dependencies;
beforeEach(() => {
dependencies = [makeDependency(), makeDependency({ name: 'foo' })];
factory({
propsData: {
dependencies,
isLoading,
},
});
});
it('matches the snapshot', () => {
expect(wrapper.element).toMatchSnapshot();
});
it('passes the correct props to the table rows', () => {
const rows = wrapper.findAll(DependenciesTableRow).wrappers;
rows.forEach((row, index) => {
expect(row.props()).toEqual(
expect.objectContaining({
dependency: dependencies[index],
isLoading,
}),
);
});
});
});
});
describe('given the dependencyListUi feature flag is enabled', () => {
const createComponent = ({ propsData, ...options } = {}) => {
const stubs = Object.keys(DependenciesTable.components).filter(
component => component !== 'GlTable',
);
wrapper = mount(DependenciesTable, {
...options,
propsData: { ...propsData },
provide: { glFeatures: { dependencyListUi: true } },
stubs,
});
};
const findTableRows = () => wrapper.findAll('tbody > tr');
const findRowToggleButtons = () => wrapper.findAll(GlButton);
const findDependencyVulnerabilities = () => wrapper.find(DependencyVulnerabilities);
......@@ -244,9 +185,7 @@ describe('DependenciesTable component', () => {
let rowIndexWithVulnerabilities;
beforeEach(() => {
rowIndexWithVulnerabilities = dependencies.findIndex(
dep => dep.vulnerabilities.length > 0,
);
rowIndexWithVulnerabilities = dependencies.findIndex(dep => dep.vulnerabilities.length > 0);
});
it('can be displayed by clicking on the toggle button', () => {
......@@ -274,5 +213,4 @@ describe('DependenciesTable component', () => {
});
});
});
});
});
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