Add latest changes from gitlab-org/gitlab@master

8 files changed, 93 insertions, 514 deletions

diff --git a/spec/frontend/packages/details/components/__snapshots__/activity_spec.js.snap b/spec/frontend/packages/details/components/__snapshots__/activity_spec.js.snap
deleted file mode 100644
index 2e88ac39d18..00000000000
--- a/spec/frontend/packages/details/components/__snapshots__/activity_spec.js.snap
+++ /dev/null
@@ -1,114 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`PackageActivity render to match the default snapshot when no pipeline 1`] = `
-<div
-  class="mb-3"
->
-  <h3
-    class="gl-font-lg"
-  >
-    Activity
-  </h3>
-   
-  <div
-    class="info-well"
-  >
-    <!---->
-     
-    <!---->
-     
-    <div
-      class="well-segment d-flex align-items-center"
-    >
-      <gl-icon-stub
-        class="mr-2 d-none d-sm-block"
-        name="clock"
-        size="16"
-      />
-       
-      <gl-sprintf-stub
-        message="Published to the repository at %{timestamp}"
-      />
-    </div>
-  </div>
-</div>
-`;
-
-exports[`PackageActivity render to match the default snapshot when there is a pipeline 1`] = `
-<div
-  class="mb-3"
->
-  <h3
-    class="gl-font-lg"
-  >
-    Activity
-  </h3>
-   
-  <div
-    class="info-well"
-  >
-    <div
-      class="well-segment"
-    >
-      <div
-        class="d-flex align-items-center"
-      >
-        <gl-icon-stub
-          class="d-none d-sm-block"
-          name="commit"
-          size="16"
-        />
-         
-        <!---->
-         
-        <gl-link-stub
-          href="../../commit/sha-baz"
-        >
-          sha-baz
-        </gl-link-stub>
-         
-        <clipboard-button-stub
-          cssclass="border-0 text-secondary py-0"
-          text="sha-baz"
-          title="Copy commit SHA"
-          tooltipplacement="top"
-        />
-      </div>
-       
-      <!---->
-    </div>
-     
-    <div
-      class="well-segment"
-    >
-      <div
-        class="d-flex align-items-center"
-      >
-        <gl-icon-stub
-          class="mr-2 d-none d-sm-block"
-          name="pipeline"
-          size="16"
-        />
-         
-        <gl-sprintf-stub
-          message="Pipeline %{linkStart}%{linkEnd} triggered %{timestamp} by %{author}"
-        />
-      </div>
-    </div>
-     
-    <div
-      class="well-segment d-flex align-items-center"
-    >
-      <gl-icon-stub
-        class="mr-2 d-none d-sm-block"
-        name="clock"
-        size="16"
-      />
-       
-      <gl-sprintf-stub
-        message="Published to the repository at %{timestamp}"
-      />
-    </div>
-  </div>
-</div>
-`;
diff --git a/spec/frontend/packages/details/components/activity_spec.js b/spec/frontend/packages/details/components/activity_spec.js
deleted file mode 100644
index 6e15b2ef030..00000000000
--- a/spec/frontend/packages/details/components/activity_spec.js
+++ /dev/null
@@ -1,92 +0,0 @@
-import Vuex from 'vuex';
-import { shallowMount, createLocalVue } from '@vue/test-utils';
-import PackageActivity from '~/packages/details/components/activity.vue';
-import {
-  npmPackage,
-  mavenPackage as packageWithoutBuildInfo,
-  mockPipelineInfo,
-} from '../../mock_data';
-
-const localVue = createLocalVue();
-localVue.use(Vuex);
-
-describe('PackageActivity', () => {
-  let wrapper;
-  let store;
-
-  function createComponent(packageEntity = packageWithoutBuildInfo, pipelineInfo = null) {
-    store = new Vuex.Store({
-      state: {
-        packageEntity,
-      },
-      getters: {
-        packagePipeline: () => pipelineInfo,
-      },
-    });
-
-    wrapper = shallowMount(PackageActivity, {
-      localVue,
-      store,
-    });
-  }
-
-  const commitMessageToggle = () => wrapper.find({ ref: 'commit-message-toggle' });
-  const commitMessage = () => wrapper.find({ ref: 'commit-message' });
-  const commitInfo = () => wrapper.find({ ref: 'commit-info' });
-  const pipelineInfo = () => wrapper.find({ ref: 'pipeline-info' });
-
-  afterEach(() => {
-    if (wrapper) wrapper.destroy();
-    wrapper = null;
-  });
-
-  describe('render', () => {
-    it('to match the default snapshot when no pipeline', () => {
-      createComponent();
-
-      expect(wrapper.element).toMatchSnapshot();
-    });
-
-    it('to match the default snapshot when there is a pipeline', () => {
-      createComponent(npmPackage, mockPipelineInfo);
-
-      expect(wrapper.element).toMatchSnapshot();
-    });
-  });
-
-  describe('commit message toggle', () => {
-    it("does not display the commit message button when there isn't one", () => {
-      createComponent(npmPackage, mockPipelineInfo);
-
-      expect(commitMessageToggle().exists()).toBe(false);
-      expect(commitMessage().exists()).toBe(false);
-    });
-
-    it('displays the commit message on toggle', () => {
-      const commitMessageStr = 'a message';
-      createComponent(npmPackage, {
-        ...mockPipelineInfo,
-        git_commit_message: commitMessageStr,
-      });
-
-      commitMessageToggle().trigger('click');
-
-      return wrapper.vm.$nextTick(() => expect(commitMessage().text()).toBe(commitMessageStr));
-    });
-  });
-
-  describe('pipeline information', () => {
-    it('does not display pipeline information when no build info is available', () => {
-      createComponent();
-
-      expect(pipelineInfo().exists()).toBe(false);
-    });
-
-    it('displays the pipeline information if found', () => {
-      createComponent(npmPackage, mockPipelineInfo);
-
-      expect(commitInfo().exists()).toBe(true);
-      expect(pipelineInfo().exists()).toBe(true);
-    });
-  });
-});
diff --git a/spec/frontend/packages/details/components/app_spec.js b/spec/frontend/packages/details/components/app_spec.js
index 227d2200ff0..ac6065fe4bf 100644
--- a/spec/frontend/packages/details/components/app_spec.js
+++ b/spec/frontend/packages/details/components/app_spec.js
@@ -5,28 +5,25 @@ import Tracking from '~/tracking';
 import * as getters from '~/packages/details/store/getters';
 import PackagesApp from '~/packages/details/components/app.vue';
 import PackageTitle from '~/packages/details/components/package_title.vue';
-import PackageInformation from '~/packages/details/components/information.vue';
-import NpmInstallation from '~/packages/details/components/npm_installation.vue';
-import MavenInstallation from '~/packages/details/components/maven_installation.vue';
+
 import * as SharedUtils from '~/packages/shared/utils';
 import { TrackingActions } from '~/packages/shared/constants';
 import PackagesListLoader from '~/packages/shared/components/packages_list_loader.vue';
 import PackageListRow from '~/packages/shared/components/package_list_row.vue';
-import ConanInstallation from '~/packages/details/components/conan_installation.vue';
-import NugetInstallation from '~/packages/details/components/nuget_installation.vue';
-import PypiInstallation from '~/packages/details/components/pypi_installation.vue';
+
 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 PackageActivity from '~/packages/details/components/activity.vue';
+import InstallationCommands from '~/packages/details/components/installation_commands.vue';
+
 import {
+  composerPackage,
   conanPackage,
   mavenPackage,
   mavenFiles,
   npmPackage,
   npmFiles,
   nugetPackage,
-  pypiPackage,
 } from '../../mock_data';
 import stubChildren from 'helpers/stub_children';
 
@@ -79,13 +76,6 @@ describe('PackagesApp', () => {
 
   const packageTitle = () => wrapper.find(PackageTitle);
   const emptyState = () => wrapper.find(GlEmptyState);
-  const allPackageInformation = () => wrapper.findAll(PackageInformation);
-  const packageInformation = index => allPackageInformation().at(index);
-  const npmInstallation = () => wrapper.find(NpmInstallation);
-  const mavenInstallation = () => wrapper.find(MavenInstallation);
-  const conanInstallation = () => wrapper.find(ConanInstallation);
-  const nugetInstallation = () => wrapper.find(NugetInstallation);
-  const pypiInstallation = () => wrapper.find(PypiInstallation);
   const allFileRows = () => wrapper.findAll('.js-file-row');
   const firstFileDownloadLink = () => wrapper.find('.js-file-download');
   const deleteButton = () => wrapper.find('.js-delete-button');
@@ -101,8 +91,7 @@ describe('PackagesApp', () => {
   const dependencyRows = () => wrapper.findAll(DependencyRow);
   const findPackageHistory = () => wrapper.find(PackageHistory);
   const findAdditionalMetadata = () => wrapper.find(AdditionalMetadata);
-  const findPackageActivity = () => wrapper.find(PackageActivity);
-  const findOldPackageInfo = () => wrapper.find('[data-testid="old-package-info"]');
+  const findInstallationCommands = () => wrapper.find(InstallationCommands);
 
   afterEach(() => {
     wrapper.destroy();
@@ -122,35 +111,28 @@ describe('PackagesApp', () => {
     expect(emptyState()).toExist();
   });
 
-  it('renders package information and metadata for packages containing both information and metadata', () => {
+  it('package history has the right props', () => {
     createComponent();
-
-    expect(packageInformation(0)).toExist();
-    expect(packageInformation(1)).toExist();
+    expect(findPackageHistory().exists()).toBe(true);
+    expect(findPackageHistory().props('packageEntity')).toEqual(wrapper.vm.packageEntity);
+    expect(findPackageHistory().props('projectName')).toEqual(wrapper.vm.projectName);
   });
 
-  it('does not render package metadata for npm as npm packages do not contain metadata', () => {
-    createComponent({ packageEntity: npmPackage, packageFiles: npmFiles });
+  it('additional metadata has the right props', () => {
+    createComponent();
+    expect(findAdditionalMetadata().exists()).toBe(true);
+    expect(findAdditionalMetadata().props('packageEntity')).toEqual(wrapper.vm.packageEntity);
+  });
 
-    expect(packageInformation(0)).toExist();
-    expect(allPackageInformation()).toHaveLength(1);
+  it('installation commands has the right props', () => {
+    createComponent();
+    expect(findInstallationCommands().exists()).toBe(true);
+    expect(findInstallationCommands().props('packageEntity')).toEqual(wrapper.vm.packageEntity);
   });
 
-  describe('installation instructions', () => {
-    describe.each`
-      packageEntity   | selector
-      ${conanPackage} | ${conanInstallation}
-      ${mavenPackage} | ${mavenInstallation}
-      ${npmPackage}   | ${npmInstallation}
-      ${nugetPackage} | ${nugetInstallation}
-      ${pypiPackage}  | ${pypiInstallation}
-    `('renders', ({ packageEntity, selector }) => {
-      it(`${packageEntity.package_type} instructions`, () => {
-        createComponent({ packageEntity });
-
-        expect(selector()).toExist();
-      });
-    });
+  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', () => {
@@ -296,39 +278,4 @@ describe('PackagesApp', () => {
       );
     });
   });
-
-  it('package history has the right props', () => {
-    createComponent({ oneColumnView: true });
-    expect(findPackageHistory().props('packageEntity')).toEqual(wrapper.vm.packageEntity);
-    expect(findPackageHistory().props('projectName')).toEqual(wrapper.vm.projectName);
-  });
-
-  it('additional metadata has the right props', () => {
-    createComponent({ oneColumnView: true });
-    expect(findAdditionalMetadata().props('packageEntity')).toEqual(wrapper.vm.packageEntity);
-  });
-
-  describe('one column layout feature flag', () => {
-    describe.each([true, false])('with oneColumnView set to %s', oneColumnView => {
-      beforeEach(() => {
-        createComponent({ oneColumnView });
-      });
-
-      it(`is ${oneColumnView} that package history is visible`, () => {
-        expect(findPackageHistory().exists()).toBe(oneColumnView);
-      });
-
-      it(`is ${oneColumnView} that additional metadata is visible`, () => {
-        expect(findAdditionalMetadata().exists()).toBe(oneColumnView);
-      });
-
-      it(`is ${!oneColumnView} that old info block is visible`, () => {
-        expect(findOldPackageInfo().exists()).toBe(!oneColumnView);
-      });
-
-      it(`is ${!oneColumnView} that package activity is visible`, () => {
-        expect(findPackageActivity().exists()).toBe(!oneColumnView);
-      });
-    });
-  });
 });
diff --git a/spec/frontend/packages/details/components/information_spec.js b/spec/frontend/packages/details/components/information_spec.js
deleted file mode 100644
index ba134fcc5a1..00000000000
--- a/spec/frontend/packages/details/components/information_spec.js
+++ /dev/null
@@ -1,110 +0,0 @@
-import { shallowMount } from '@vue/test-utils';
-import PackageInformation from '~/packages/details/components/information.vue';
-import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
-import { GlLink } from '@gitlab/ui';
-
-describe('PackageInformation', () => {
-  let wrapper;
-
-  const gitlabLink = 'https://gitlab.com';
-  const testInformation = [
-    {
-      label: 'Information one',
-      value: 'Information value one',
-    },
-    {
-      label: 'Information two',
-      value: 'Information value two',
-    },
-    {
-      label: 'Information three',
-      value: 'Information value three',
-    },
-  ];
-
-  function createComponent(props = {}) {
-    const propsData = {
-      information: testInformation,
-      ...props,
-    };
-
-    wrapper = shallowMount(PackageInformation, {
-      propsData,
-    });
-  }
-
-  const headingSelector = () => wrapper.find('.card-header > strong');
-  const copyButton = () => wrapper.findAll(ClipboardButton);
-  const informationSelector = () => wrapper.findAll('ul.content-list li');
-  const informationRowText = index =>
-    informationSelector()
-      .at(index)
-      .text();
-  const informationLink = () => wrapper.find(GlLink);
-
-  afterEach(() => {
-    if (wrapper) wrapper.destroy();
-  });
-
-  it('renders the information block with default heading', () => {
-    createComponent();
-
-    expect(headingSelector()).toExist();
-    expect(headingSelector().text()).toBe('Package information');
-  });
-
-  it('renders a custom supplied heading', () => {
-    const heading = 'A custom heading';
-
-    createComponent({
-      heading,
-    });
-
-    expect(headingSelector()).toExist();
-    expect(headingSelector().text()).toBe(heading);
-  });
-
-  it('renders the supplied information', () => {
-    createComponent();
-
-    expect(informationSelector()).toHaveLength(testInformation.length);
-    expect(informationRowText(0)).toContain(testInformation[0].value);
-    expect(informationRowText(1)).toContain(testInformation[1].value);
-    expect(informationRowText(2)).toContain(testInformation[2].value);
-  });
-
-  it('renders a link when the information is of type link', () => {
-    createComponent({
-      information: [
-        {
-          label: 'Information link',
-          value: gitlabLink,
-          type: 'link',
-        },
-      ],
-    });
-
-    const link = informationLink();
-
-    expect(link.exists()).toBe(true);
-    expect(link.text()).toBe(gitlabLink);
-    expect(link.attributes('href')).toBe(gitlabLink);
-  });
-
-  describe('copy button', () => {
-    it('does not render by default', () => {
-      createComponent();
-
-      expect(copyButton().exists()).toBe(false);
-    });
-
-    it('does render when the prop is set and has correct text set', () => {
-      createComponent({ showCopy: true });
-
-      expect(copyButton()).toHaveLength(testInformation.length);
-      expect(copyButton().at(0).vm.text).toBe(testInformation[0].value);
-      expect(copyButton().at(1).vm.text).toBe(testInformation[1].value);
-      expect(copyButton().at(2).vm.text).toBe(testInformation[2].value);
-    });
-  });
-});
diff --git a/spec/frontend/packages/details/components/installations_commands_spec.js b/spec/frontend/packages/details/components/installations_commands_spec.js
new file mode 100644
index 00000000000..65904749e2c
--- /dev/null
+++ b/spec/frontend/packages/details/components/installations_commands_spec.js
@@ -0,0 +1,47 @@
+import { shallowMount } from '@vue/test-utils';
+import InstallationCommands from '~/packages/details/components/installation_commands.vue';
+
+import NpmInstallation from '~/packages/details/components/npm_installation.vue';
+import MavenInstallation from '~/packages/details/components/maven_installation.vue';
+import ConanInstallation from '~/packages/details/components/conan_installation.vue';
+import NugetInstallation from '~/packages/details/components/nuget_installation.vue';
+import PypiInstallation from '~/packages/details/components/pypi_installation.vue';
+
+import { conanPackage, mavenPackage, npmPackage, nugetPackage, pypiPackage } from '../../mock_data';
+
+describe('InstallationCommands', () => {
+  let wrapper;
+
+  function createComponent(propsData) {
+    wrapper = shallowMount(InstallationCommands, {
+      propsData,
+    });
+  }
+
+  const npmInstallation = () => wrapper.find(NpmInstallation);
+  const mavenInstallation = () => wrapper.find(MavenInstallation);
+  const conanInstallation = () => wrapper.find(ConanInstallation);
+  const nugetInstallation = () => wrapper.find(NugetInstallation);
+  const pypiInstallation = () => wrapper.find(PypiInstallation);
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  describe('installation instructions', () => {
+    describe.each`
+      packageEntity   | selector
+      ${conanPackage} | ${conanInstallation}
+      ${mavenPackage} | ${mavenInstallation}
+      ${npmPackage}   | ${npmInstallation}
+      ${nugetPackage} | ${nugetInstallation}
+      ${pypiPackage}  | ${pypiInstallation}
+    `('renders', ({ packageEntity, selector }) => {
+      it(`${packageEntity.package_type} instructions exist`, () => {
+        createComponent({ packageEntity });
+
+        expect(selector()).toExist();
+      });
+    });
+  });
+});
diff --git a/spec/frontend/packages/details/mock_data.js b/spec/frontend/packages/details/mock_data.js
index 0d56dbab3f8..d43abcedb2e 100644
--- a/spec/frontend/packages/details/mock_data.js
+++ b/spec/frontend/packages/details/mock_data.js
@@ -1,6 +1,3 @@
-import { formatDate } from '~/lib/utils/datetime_utility';
-import { orderBy } from 'lodash';
-
 export const registryUrl = 'foo/registry';
 
 export const mavenMetadata = {
@@ -44,67 +41,6 @@ export const generateMavenSetupXml = () => `<repositories>
   </snapshotRepository>
 </distributionManagement>`;
 
-const generateCommonPackageInformation = packageEntity => [
-  {
-    label: 'Version',
-    value: packageEntity.version,
-    order: 2,
-  },
-  {
-    label: 'Created on',
-    value: formatDate(packageEntity.created_at),
-    order: 5,
-  },
-  {
-    label: 'Updated at',
-    value: formatDate(packageEntity.updated_at),
-    order: 6,
-  },
-];
-
-export const generateStandardPackageInformation = packageEntity => [
-  {
-    label: 'Name',
-    value: packageEntity.name,
-    order: 1,
-  },
-  ...generateCommonPackageInformation(packageEntity),
-];
-
-export const generateConanInformation = conanPackage => [
-  {
-    label: 'Recipe',
-    value: conanPackage.recipe,
-    order: 1,
-  },
-  ...generateCommonPackageInformation(conanPackage),
-];
-
-export const generateNugetInformation = nugetPackage =>
-  orderBy(
-    [
-      ...generateCommonPackageInformation(nugetPackage),
-      {
-        label: 'Name',
-        value: nugetPackage.name,
-        order: 1,
-      },
-      {
-        label: 'Project URL',
-        value: nugetPackage.nuget_metadatum.project_url,
-        order: 3,
-        type: 'link',
-      },
-      {
-        label: 'License URL',
-        value: nugetPackage.nuget_metadatum.license_url,
-        order: 4,
-        type: 'link',
-      },
-    ],
-    ['order'],
-  );
-
 export const pypiSetupCommandStr = `[gitlab]
 repository = foo
 username = __token__
diff --git a/spec/frontend/packages/details/utils_spec.js b/spec/frontend/packages/details/utils_spec.js
index 88777796613..087888016ee 100644
--- a/spec/frontend/packages/details/utils_spec.js
+++ b/spec/frontend/packages/details/utils_spec.js
@@ -1,71 +1,24 @@
-import { generateConanRecipe, generatePackageInfo } from '~/packages/details/utils';
-import { conanPackage, mavenPackage, npmPackage, nugetPackage } from '../mock_data';
-import {
-  generateConanInformation,
-  generateStandardPackageInformation,
-  generateNugetInformation,
-} from './mock_data';
+import { generateConanRecipe } from '~/packages/details/utils';
+import { conanPackage } from '../mock_data';
 
 describe('Package detail utils', () => {
-  describe('generating information', () => {
-    describe('conan packages', () => {
-      const conanInformation = generateConanInformation(conanPackage);
+  describe('generateConanRecipe', () => {
+    it('correctly generates the conan recipe', () => {
+      const recipe = generateConanRecipe(conanPackage);
 
-      it('correctly generates the conan information', () => {
-        const info = generatePackageInfo(conanPackage);
-
-        expect(info).toEqual(conanInformation);
-      });
-
-      describe('generating recipe', () => {
-        it('correctly generates the conan recipe', () => {
-          const recipe = generateConanRecipe(conanPackage);
-
-          expect(recipe).toEqual(conanPackage.recipe);
-        });
-
-        it('returns an empty recipe when no information is supplied', () => {
-          const recipe = generateConanRecipe({});
-
-          expect(recipe).toEqual('/@/');
-        });
-
-        it('recipe returns empty strings for missing metadata', () => {
-          const recipe = generateConanRecipe({ name: 'foo', version: '0.0.1' });
-
-          expect(recipe).toEqual('foo/0.0.1@/');
-        });
-      });
+      expect(recipe).toEqual(conanPackage.recipe);
     });
 
-    describe('npm packages', () => {
-      const npmInformation = generateStandardPackageInformation(npmPackage);
+    it('returns an empty recipe when no information is supplied', () => {
+      const recipe = generateConanRecipe({});
 
-      it('correctly generates the npm information', () => {
-        const info = generatePackageInfo(npmPackage);
-
-        expect(info).toEqual(npmInformation);
-      });
-    });
-
-    describe('maven packages', () => {
-      const mavenInformation = generateStandardPackageInformation(mavenPackage);
-
-      it('correctly generates the maven information', () => {
-        const info = generatePackageInfo(mavenPackage);
-
-        expect(info).toEqual(mavenInformation);
-      });
+      expect(recipe).toEqual('/@/');
     });
 
-    describe('nuget packages', () => {
-      const nugetInformation = generateNugetInformation(nugetPackage);
-
-      it('correctly generates the nuget information', () => {
-        const info = generatePackageInfo(nugetPackage);
+    it('recipe returns empty strings for missing metadata', () => {
+      const recipe = generateConanRecipe({ name: 'foo', version: '0.0.1' });
 
-        expect(info).toEqual(nugetInformation);
-      });
+      expect(recipe).toBe('foo/0.0.1@/');
     });
   });
 });
diff --git a/spec/frontend/packages/mock_data.js b/spec/frontend/packages/mock_data.js
index ad3d9730a67..86205b0744c 100644
--- a/spec/frontend/packages/mock_data.js
+++ b/spec/frontend/packages/mock_data.js
@@ -140,6 +140,18 @@ export const pypiPackage = {
   version: '1.0.0',
 };
 
+export const composerPackage = {
+  created_at: '2015-12-10',
+  id: 5,
+  name: 'ComposerPackage',
+  package_files: [],
+  package_type: 'composer',
+  project_id: 1,
+  tags: [],
+  updated_at: '2015-12-10',
+  version: '1.0.0',
+};
+
 export const mockTags = [
   {
     name: 'foo-1',