Remove feature flag from dependencies table

Part of [Clean up dependency_list_ui feature flag and old code
paths][1].

[1]: https://gitlab.com/gitlab-org/gitlab/-/issues/212867

ee/app/assets/javascripts/dependencies/components/dependencies_table.vue

@@ -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

-// 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

 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', () => {
       });
     });
   });
-  });
 });