Merge branch '11059-dependency-list-table-components-ee' into 'master'

Add Dependency List table and row components

See merge request gitlab-org/gitlab-ee!13670

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

+<script>
+import { s__ } from '~/locale';
+import DependenciesTableRow from './dependencies_table_row.vue';
+
+export default {
+  name: 'DependenciesTable',
+  components: {
+    DependenciesTableRow,
+  },
+  props: {
+    dependencies: {
+      type: Array,
+      required: true,
+    },
+    isLoading: {
+      type: Boolean,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      tableSections: [
+        { className: 'section-20', label: s__('Dependencies|Component') },
+        { className: 'section-15', label: s__('Dependencies|Version') },
+        { className: 'section-20', label: s__('Dependencies|Packager') },
+        { className: 'flex-grow-1', label: s__('Dependencies|Location') },
+      ],
+    };
+  },
+};
+</script>
+
+<template>
+  <div>
+    <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/app/assets/javascripts/dependencies/components/dependencies_table_row.vue

+<script>
+import { GlSkeletonLoading } from '@gitlab/ui';
+
+export default {
+  name: 'DependenciesTableRow',
+  components: {
+    GlSkeletonLoading,
+  },
+  props: {
+    dependency: {
+      type: Object,
+      required: false,
+      default: null,
+    },
+    isLoading: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="gl-responsive-table-row p-2">
+    <gl-skeleton-loading
+      v-if="isLoading"
+      :lines="1"
+      class="d-flex flex-column justify-content-center"
+    />
+    <template v-else>
+      <div class="table-section section-20 section-wrap">
+        <div class="table-mobile-header" role="rowheader">{{ s__('Dependencies|Component') }}</div>
+        <div class="table-mobile-content">{{ dependency.name }}</div>
+      </div>
+
+      <div class="table-section section-15">
+        <div class="table-mobile-header" role="rowheader">{{ s__('Dependencies|Version') }}</div>
+        <div class="table-mobile-content">{{ dependency.version }}</div>
+      </div>
+
+      <div class="table-section section-20 section-wrap">
+        <div class="table-mobile-header" role="rowheader">{{ s__('Dependencies|Packager') }}</div>
+        <div class="table-mobile-content">{{ dependency.packager }}</div>
+      </div>
+
+      <div class="table-section flex-grow-1 section-wrap">
+        <div class="table-mobile-header" role="rowheader">{{ s__('Dependencies|Location') }}</div>
+        <div class="table-mobile-content">
+          <a :href="dependency.location.blob_path">{{ dependency.location.path }}</a>
+        </div>
+      </div>
+    </template>
+  </div>
+</template>

ee/spec/frontend/dependencies/components/__snapshots__/dependencies_table_row_spec.js.snap

+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DependenciesTableRow component when a dependency is loaded matches the snapshot 1`] = `
+<div
+  class="gl-responsive-table-row p-2"
+>
+  <div
+    class="table-section section-20 section-wrap"
+  >
+    <div
+      class="table-mobile-header"
+      role="rowheader"
+    >
+      Component
+    </div>
+     
+    <div
+      class="table-mobile-content"
+    >
+      left-pad
+    </div>
+  </div>
+   
+  <div
+    class="table-section section-15"
+  >
+    <div
+      class="table-mobile-header"
+      role="rowheader"
+    >
+      Version
+    </div>
+     
+    <div
+      class="table-mobile-content"
+    >
+      0.0.3
+    </div>
+  </div>
+   
+  <div
+    class="table-section section-20 section-wrap"
+  >
+    <div
+      class="table-mobile-header"
+      role="rowheader"
+    >
+      Packager
+    </div>
+     
+    <div
+      class="table-mobile-content"
+    >
+      JavaScript (yarn)
+    </div>
+  </div>
+   
+  <div
+    class="table-section flex-grow-1 section-wrap"
+  >
+    <div
+      class="table-mobile-header"
+      role="rowheader"
+    >
+      Location
+    </div>
+     
+    <div
+      class="table-mobile-content"
+    >
+      <a
+        href="/a-group/a-project/blob/da39a3ee5e6b4b0d3255bfef95601890afd80709/yarn.lock"
+      >
+        yarn.lock
+      </a>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`DependenciesTableRow component when loading matches the snapshot 1`] = `
+<div
+  class="gl-responsive-table-row p-2"
+>
+  <glskeletonloading-stub
+    class="d-flex flex-column justify-content-center"
+    lines="1"
+  />
+</div>
+`;
+
+exports[`DependenciesTableRow component when passed no props matches the snapshot 1`] = `
+<div
+  class="gl-responsive-table-row p-2"
+>
+  <glskeletonloading-stub
+    class="d-flex flex-column justify-content-center"
+    lines="1"
+  />
+</div>
+`;

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"
+    >
+      
+      Component
+    
+    </div>
+    <div
+      class="table-section section-15"
+      role="rowheader"
+    >
+      
+      Version
+    
+    </div>
+    <div
+      class="table-section section-20"
+      role="rowheader"
+    >
+      
+      Packager
+    
+    </div>
+    <div
+      class="table-section flex-grow-1"
+      role="rowheader"
+    >
+      
+      Location
+    
+    </div>
+  </div>
+   
+  <dependenciestablerow-stub
+    dependency="[object Object]"
+  />
+  <dependenciestablerow-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"
+    >
+      
+      Component
+    
+    </div>
+    <div
+      class="table-section section-15"
+      role="rowheader"
+    >
+      
+      Version
+    
+    </div>
+    <div
+      class="table-section section-20"
+      role="rowheader"
+    >
+      
+      Packager
+    
+    </div>
+    <div
+      class="table-section flex-grow-1"
+      role="rowheader"
+    >
+      
+      Location
+    
+    </div>
+  </div>
+   
+  <dependenciestablerow-stub
+    dependency="[object Object]"
+    isloading="true"
+  />
+  <dependenciestablerow-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"
+    >
+      
+      Component
+    
+    </div>
+    <div
+      class="table-section section-15"
+      role="rowheader"
+    >
+      
+      Version
+    
+    </div>
+    <div
+      class="table-section section-20"
+      role="rowheader"
+    >
+      
+      Packager
+    
+    </div>
+    <div
+      class="table-section flex-grow-1"
+      role="rowheader"
+    >
+      
+      Location
+    
+    </div>
+  </div>
+   
+</div>
+`;

ee/spec/frontend/dependencies/components/dependencies_table_row_spec.js

+import { createLocalVue, shallowMount } from '@vue/test-utils';
+import DependenciesTableRow from 'ee/dependencies/components/dependencies_table_row.vue';
+import { makeDependency } from './utils';
+
+describe('DependenciesTableRow component', () => {
+  let wrapper;
+
+  const factory = (props = {}) => {
+    const localVue = createLocalVue();
+
+    wrapper = shallowMount(localVue.extend(DependenciesTableRow), {
+      localVue,
+      sync: false,
+      propsData: { ...props },
+    });
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  describe('when passed no props', () => {
+    beforeEach(() => {
+      factory();
+    });
+
+    it('matches the snapshot', () => {
+      expect(wrapper.element).toMatchSnapshot();
+    });
+  });
+
+  describe('when loading', () => {
+    beforeEach(() => {
+      factory({
+        isLoading: true,
+      });
+    });
+
+    it('matches the snapshot', () => {
+      expect(wrapper.element).toMatchSnapshot();
+    });
+  });
+
+  describe('when a dependency is loaded', () => {
+    beforeEach(() => {
+      factory({
+        isLoading: false,
+        dependency: makeDependency(),
+      });
+    });
+
+    it('matches the snapshot', () => {
+      expect(wrapper.element).toMatchSnapshot();
+    });
+  });
+});

ee/spec/frontend/dependencies/components/dependencies_table_spec.js

+import { createLocalVue, shallowMount } from '@vue/test-utils';
+import DependenciesTable from 'ee/dependencies/components/dependencies_table.vue';
+import DependenciesTableRow from 'ee/dependencies/components/dependencies_table_row.vue';
+import { makeDependency } from './utils';
+
+describe('DependenciesTable component', () => {
+  let wrapper;
+
+  const factory = (props = {}) => {
+    const localVue = createLocalVue();
+
+    wrapper = shallowMount(localVue.extend(DependenciesTable), {
+      localVue,
+      sync: false,
+      propsData: { ...props },
+    });
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  describe('given an empty list of dependencies', () => {
+    beforeEach(() => {
+      factory({
+        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({
+          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,
+            }),
+          );
+        });
+      });
+    });
+  });
+});

ee/spec/frontend/dependencies/components/utils.js

+// eslint-disable-next-line import/prefer-default-export
+export const makeDependency = (changes = {}) => ({
+  name: 'left-pad',
+  version: '0.0.3',
+  packager: 'JavaScript (yarn)',
+  location: {
+    blob_path: '/a-group/a-project/blob/da39a3ee5e6b4b0d3255bfef95601890afd80709/yarn.lock',
+    path: 'yarn.lock',
+  },
+  ...changes,
+});

locale/gitlab.pot

@@ -4085,6 +4085,18 @@ msgstr ""
 msgid "Deny"
 msgstr ""
 
+msgid "Dependencies|Component"
+msgstr ""
+
+msgid "Dependencies|Location"
+msgstr ""
+
+msgid "Dependencies|Packager"
+msgstr ""
+
+msgid "Dependencies|Version"
+msgstr ""
+
 msgid "Dependency Proxy"
 msgstr ""