Add latest changes from gitlab-org/gitlab@13-7-stable-eev13.7.0-rc42

5 files changed, 259 insertions, 79 deletions

diff --git a/spec/frontend/packages/details/components/app_spec.js b/spec/frontend/packages/details/components/app_spec.js
index e82c74e56e5..97df117df0b 100644
--- a/spec/frontend/packages/details/components/app_spec.js
+++ b/spec/frontend/packages/details/components/app_spec.js
@@ -16,6 +16,7 @@ import DependencyRow from '~/packages/details/components/dependency_row.vue';
 import PackageHistory from '~/packages/details/components/package_history.vue';
 import AdditionalMetadata from '~/packages/details/components/additional_metadata.vue';
 import InstallationCommands from '~/packages/details/components/installation_commands.vue';
+import PackageFiles from '~/packages/details/components/package_files.vue';
 
 import {
   composerPackage,
@@ -23,7 +24,6 @@ import {
   mavenPackage,
   mavenFiles,
   npmPackage,
-  npmFiles,
   nugetPackage,
 } from '../../mock_data';
 
@@ -82,8 +82,6 @@ describe('PackagesApp', () => {
 
   const packageTitle = () => wrapper.find(PackageTitle);
   const emptyState = () => wrapper.find(GlEmptyState);
-  const allFileRows = () => wrapper.findAll('.js-file-row');
-  const firstFileDownloadLink = () => wrapper.find('.js-file-download');
   const deleteButton = () => wrapper.find('.js-delete-button');
   const deleteModal = () => wrapper.find(GlModal);
   const modalDeleteButton = () => wrapper.find({ ref: 'modal-delete-button' });
@@ -98,6 +96,7 @@ describe('PackagesApp', () => {
   const findPackageHistory = () => wrapper.find(PackageHistory);
   const findAdditionalMetadata = () => wrapper.find(AdditionalMetadata);
   const findInstallationCommands = () => wrapper.find(InstallationCommands);
+  const findPackageFiles = () => wrapper.find(PackageFiles);
 
   beforeEach(() => {
     delete window.location;
@@ -144,28 +143,7 @@ describe('PackagesApp', () => {
 
   it('hides the files table if package type is COMPOSER', () => {
     createComponent({ packageEntity: composerPackage });
-    expect(allFileRows().exists()).toBe(false);
-  });
-
-  it('renders a single file for an npm package as they only contain one file', () => {
-    createComponent({ packageEntity: npmPackage, packageFiles: npmFiles });
-
-    expect(allFileRows()).toExist();
-    expect(allFileRows()).toHaveLength(1);
-  });
-
-  it('renders multiple files for a package that contains more than one file', () => {
-    createComponent();
-
-    expect(allFileRows()).toExist();
-    expect(allFileRows()).toHaveLength(2);
-  });
-
-  it('allows the user to download a package file by rendering a download link', () => {
-    createComponent();
-
-    expect(allFileRows()).toExist();
-    expect(firstFileDownloadLink().vm.$attrs.href).toContain('download');
+    expect(findPackageFiles().exists()).toBe(false);
   });
 
   describe('deleting packages', () => {
@@ -331,7 +309,7 @@ describe('PackagesApp', () => {
       it(`file download link call event with ${TrackingActions.PULL_PACKAGE}`, () => {
         createComponent({ packageEntity: conanPackage });
 
-        firstFileDownloadLink().vm.$emit('click');
+        findPackageFiles().vm.$emit('download-file');
         expect(eventSpy).toHaveBeenCalledWith(
           category,
           TrackingActions.PULL_PACKAGE,
diff --git a/spec/frontend/packages/details/components/package_files_spec.js b/spec/frontend/packages/details/components/package_files_spec.js
new file mode 100644
index 00000000000..813a2170154
--- /dev/null
+++ b/spec/frontend/packages/details/components/package_files_spec.js
@@ -0,0 +1,131 @@
+import { mount } from '@vue/test-utils';
+import stubChildren from 'helpers/stub_children';
+import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
+import FileIcon from '~/vue_shared/components/file_icon.vue';
+import component from '~/packages/details/components/package_files.vue';
+
+import { npmFiles, mavenFiles } from '../../mock_data';
+
+describe('Package Files', () => {
+  let wrapper;
+
+  const findAllRows = () => wrapper.findAll('[data-testid="file-row"');
+  const findFirstRow = () => findAllRows().at(0);
+  const findFirstRowDownloadLink = () => findFirstRow().find('[data-testid="download-link"');
+  const findFirstRowCommitLink = () => findFirstRow().find('[data-testid="commit-link"');
+  const findFirstRowFileIcon = () => findFirstRow().find(FileIcon);
+  const findFirstRowCreatedAt = () => findFirstRow().find(TimeAgoTooltip);
+
+  const createComponent = (packageFiles = npmFiles) => {
+    wrapper = mount(component, {
+      propsData: {
+        packageFiles,
+      },
+      stubs: {
+        ...stubChildren(component),
+        GlTable: false,
+        GlLink: '<div><slot></slot></div>',
+      },
+    });
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+    wrapper = null;
+  });
+
+  describe('rows', () => {
+    it('renders a single file for an npm package', () => {
+      createComponent();
+
+      expect(findAllRows()).toHaveLength(1);
+    });
+
+    it('renders multiple files for a package that contains more than one file', () => {
+      createComponent(mavenFiles);
+
+      expect(findAllRows()).toHaveLength(2);
+    });
+  });
+
+  describe('link', () => {
+    it('exists', () => {
+      createComponent();
+
+      expect(findFirstRowDownloadLink().exists()).toBe(true);
+    });
+
+    it('has the correct attrs bound', () => {
+      createComponent();
+
+      expect(findFirstRowDownloadLink().attributes('href')).toBe(npmFiles[0].download_path);
+    });
+
+    it('emits "download-file" event on click', () => {
+      createComponent();
+
+      findFirstRowDownloadLink().vm.$emit('click');
+
+      expect(wrapper.emitted('download-file')).toEqual([[]]);
+    });
+  });
+
+  describe('file-icon', () => {
+    it('exists', () => {
+      createComponent();
+
+      expect(findFirstRowFileIcon().exists()).toBe(true);
+    });
+
+    it('has the correct props bound', () => {
+      createComponent();
+
+      expect(findFirstRowFileIcon().props('fileName')).toBe(npmFiles[0].file_name);
+    });
+  });
+
+  describe('time-ago tooltip', () => {
+    it('exists', () => {
+      createComponent();
+
+      expect(findFirstRowCreatedAt().exists()).toBe(true);
+    });
+
+    it('has the correct props bound', () => {
+      createComponent();
+
+      expect(findFirstRowCreatedAt().props('time')).toBe(npmFiles[0].created_at);
+    });
+  });
+
+  describe('commit', () => {
+    describe('when package file has a pipeline associated', () => {
+      it('exists', () => {
+        createComponent();
+
+        expect(findFirstRowCommitLink().exists()).toBe(true);
+      });
+
+      it('the link points to the commit url', () => {
+        createComponent();
+
+        expect(findFirstRowCommitLink().attributes('href')).toBe(
+          npmFiles[0].pipelines[0].project.commit_url,
+        );
+      });
+
+      it('the text is git_commit_message', () => {
+        createComponent();
+
+        expect(findFirstRowCommitLink().text()).toBe(npmFiles[0].pipelines[0].git_commit_message);
+      });
+    });
+    describe('when package file has no pipeline associated', () => {
+      it('does not exist', () => {
+        createComponent(mavenFiles);
+
+        expect(findFirstRowCommitLink().exists()).toBe(false);
+      });
+    });
+  });
+});
diff --git a/spec/frontend/packages/details/components/package_history_spec.js b/spec/frontend/packages/details/components/package_history_spec.js
index f745a457b0a..c43ac9b9c40 100644
--- a/spec/frontend/packages/details/components/package_history_spec.js
+++ b/spec/frontend/packages/details/components/package_history_spec.js
@@ -1,7 +1,9 @@
 import { shallowMount } from '@vue/test-utils';
 import { GlLink, GlSprintf } from '@gitlab/ui';
+import { stubComponent } from 'helpers/stub_component';
 import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
 import HistoryItem from '~/vue_shared/components/registry/history_item.vue';
+import { HISTORY_PIPELINES_LIMIT } from '~/packages/details/constants';
 import component from '~/packages/details/components/package_history.vue';
 
 import { mavenPackage, mockPipelineInfo } from '../../mock_data';
@@ -13,14 +15,16 @@ describe('Package History', () => {
     packageEntity: { ...mavenPackage },
   };
 
+  const createPipelines = amount =>
+    [...Array(amount)].map((x, index) => ({ ...mockPipelineInfo, id: index + 1 }));
+
   const mountComponent = props => {
     wrapper = shallowMount(component, {
       propsData: { ...defaultProps, ...props },
       stubs: {
-        HistoryItem: {
-          props: HistoryItem.props,
+        HistoryItem: stubComponent(HistoryItem, {
           template: '<div data-testid="history-element"><slot></slot></div>',
-        },
+        }),
         GlSprintf,
       },
     });
@@ -56,55 +60,58 @@ describe('Package History', () => {
       expect.arrayContaining(['timeline', 'main-notes-list', 'notes']),
     );
   });
-
   describe.each`
-    name            | icon          | text                                               | timeAgoTooltip                 | link
-    ${'created-on'} | ${'clock'}    | ${'Test package version 1.0.0 was created'}        | ${mavenPackage.created_at}     | ${null}
-    ${'updated-at'} | ${'pencil'}   | ${'Test package version 1.0.0 was updated'}        | ${mavenPackage.updated_at}     | ${null}
-    ${'commit'}     | ${'commit'}   | ${'Commit sha-baz on branch branch-name'}          | ${null}                        | ${mockPipelineInfo.project.commit_url}
-    ${'pipeline'}   | ${'pipeline'} | ${'Pipeline #1 triggered  by foo'}                 | ${mockPipelineInfo.created_at} | ${mockPipelineInfo.project.pipeline_url}
-    ${'published'}  | ${'package'}  | ${'Published to the baz project Package Registry'} | ${mavenPackage.created_at}     | ${null}
-  `('history element $name', ({ name, icon, text, timeAgoTooltip, link }) => {
-    let element;
-
-    beforeEach(() => {
-      mountComponent({ packageEntity: { ...mavenPackage, pipeline: mockPipelineInfo } });
-      element = findHistoryElement(name);
-    });
-
-    it('has the correct icon', () => {
-      expect(element.props('icon')).toBe(icon);
-    });
-
-    it('has the correct text', () => {
-      expect(element.text()).toBe(text);
-    });
-
-    it('time-ago tooltip', () => {
-      const timeAgo = findElementTimeAgo(element);
-      const exist = Boolean(timeAgoTooltip);
-
-      expect(timeAgo.exists()).toBe(exist);
-      if (exist) {
-        expect(timeAgo.props('time')).toBe(timeAgoTooltip);
-      }
-    });
-
-    it('link', () => {
-      const linkElement = findElementLink(element);
-      const exist = Boolean(link);
-
-      expect(linkElement.exists()).toBe(exist);
-      if (exist) {
-        expect(linkElement.attributes('href')).toBe(link);
-      }
-    });
-  });
-
-  describe('when pipelineInfo is missing', () => {
-    it.each(['commit', 'pipeline'])('%s history element is hidden', name => {
-      mountComponent();
-      expect(findHistoryElement(name).exists()).toBe(false);
-    });
-  });
+    name                         | amount                         | icon          | text                                                                                                               | timeAgoTooltip                 | link
+    ${'created-on'}              | ${HISTORY_PIPELINES_LIMIT + 2} | ${'clock'}    | ${'Test package version 1.0.0 was first created'}                                                                  | ${mavenPackage.created_at}     | ${null}
+    ${'first-pipeline-commit'}   | ${HISTORY_PIPELINES_LIMIT + 2} | ${'commit'}   | ${'Created by commit #sha-baz on branch branch-name'}                                                              | ${null}                        | ${mockPipelineInfo.project.commit_url}
+    ${'first-pipeline-pipeline'} | ${HISTORY_PIPELINES_LIMIT + 2} | ${'pipeline'} | ${'Built by pipeline #1 triggered  by foo'}                                                                        | ${mockPipelineInfo.created_at} | ${mockPipelineInfo.project.pipeline_url}
+    ${'published'}               | ${HISTORY_PIPELINES_LIMIT + 2} | ${'package'}  | ${'Published to the baz project Package Registry'}                                                                 | ${mavenPackage.created_at}     | ${null}
+    ${'archived'}                | ${HISTORY_PIPELINES_LIMIT + 2} | ${'history'}  | ${'Package has 1 archived update'}                                                                                 | ${null}                        | ${null}
+    ${'archived'}                | ${HISTORY_PIPELINES_LIMIT + 3} | ${'history'}  | ${'Package has 2 archived updates'}                                                                                | ${null}                        | ${null}
+    ${'pipeline-entry'}          | ${HISTORY_PIPELINES_LIMIT + 2} | ${'pencil'}   | ${'Package updated by commit #sha-baz on branch branch-name, built by pipeline #3, and published to the registry'} | ${mavenPackage.created_at}     | ${mockPipelineInfo.project.commit_url}
+  `(
+    'with $amount pipelines history element $name',
+    ({ name, icon, text, timeAgoTooltip, link, amount }) => {
+      let element;
+
+      beforeEach(() => {
+        mountComponent({
+          packageEntity: { ...mavenPackage, pipelines: createPipelines(amount) },
+        });
+        element = findHistoryElement(name);
+      });
+
+      it('exists', () => {
+        expect(element.exists()).toBe(true);
+      });
+
+      it('has the correct icon', () => {
+        expect(element.props('icon')).toBe(icon);
+      });
+
+      it('has the correct text', () => {
+        expect(element.text()).toBe(text);
+      });
+
+      it('time-ago tooltip', () => {
+        const timeAgo = findElementTimeAgo(element);
+        const exist = Boolean(timeAgoTooltip);
+
+        expect(timeAgo.exists()).toBe(exist);
+        if (exist) {
+          expect(timeAgo.props('time')).toBe(timeAgoTooltip);
+        }
+      });
+
+      it('link', () => {
+        const linkElement = findElementLink(element);
+        const exist = Boolean(link);
+
+        expect(linkElement.exists()).toBe(exist);
+        if (exist) {
+          expect(linkElement.attributes('href')).toBe(link);
+        }
+      });
+    },
+  );
 });
diff --git a/spec/frontend/packages/list/components/__snapshots__/packages_list_app_spec.js.snap b/spec/frontend/packages/list/components/__snapshots__/packages_list_app_spec.js.snap
index d27038e765f..c51130dae00 100644
--- a/spec/frontend/packages/list/components/__snapshots__/packages_list_app_spec.js.snap
+++ b/spec/frontend/packages/list/components/__snapshots__/packages_list_app_spec.js.snap
@@ -202,6 +202,67 @@ exports[`packages_list_app renders 1`] = `
       </b-tab-stub>
       <b-tab-stub
         tag="div"
+        title="Generic"
+        titlelinkclass="gl-tab-nav-item"
+      >
+        <template>
+          <div>
+            <section
+              class="row empty-state text-center"
+            >
+              <div
+                class="col-12"
+              >
+                <div
+                  class="svg-250 svg-content"
+                >
+                  <img
+                    alt="There are no Generic packages yet"
+                    class="gl-max-w-full"
+                    src="helpSvg"
+                  />
+                </div>
+              </div>
+               
+              <div
+                class="col-12"
+              >
+                <div
+                  class="text-content gl-mx-auto gl-my-0 gl-p-5"
+                >
+                  <h1
+                    class="h4"
+                  >
+                    There are no Generic packages yet
+                  </h1>
+                   
+                  <p>
+                    Learn how to 
+                    <b-link-stub
+                      class="gl-link"
+                      event="click"
+                      href="helpUrl"
+                      routertag="a"
+                      target="_blank"
+                    >
+                      publish and share your packages
+                    </b-link-stub>
+                     with GitLab.
+                  </p>
+                   
+                  <div>
+                    <!---->
+                     
+                    <!---->
+                  </div>
+                </div>
+              </div>
+            </section>
+          </div>
+        </template>
+      </b-tab-stub>
+      <b-tab-stub
+        tag="div"
         title="Maven"
         titlelinkclass="gl-tab-nav-item"
       >
diff --git a/spec/frontend/packages/mock_data.js b/spec/frontend/packages/mock_data.js
index d7494bf85d0..fbc167729d9 100644
--- a/spec/frontend/packages/mock_data.js
+++ b/spec/frontend/packages/mock_data.js
@@ -76,6 +76,9 @@ export const npmFiles = [
     id: 2,
     size: 200,
     download_path: '/-/package_files/2/download',
+    pipelines: [
+      { id: 1, project: { commit_url: 'http://foo.bar' }, git_commit_message: 'foo bar baz?' },
+    ],
   },
 ];