Merge branch '8248-conan-package-ui-existing-to-vue' into 'master'

Update package details UI to be Vue

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

ee/app/assets/javascripts/packages/components/app.vue

+<script>
+import {
+  GlButton,
+  GlModal,
+  GlModalDirective,
+  GlTooltipDirective,
+  GlLink,
+  GlEmptyState,
+} from '@gitlab/ui';
+import _ from 'underscore';
+import PackageInformation from './information.vue';
+import Icon from '~/vue_shared/components/icon.vue';
+import { numberToHumanSize } from '~/lib/utils/number_utils';
+import timeagoMixin from '~/vue_shared/mixins/timeago';
+import { formatDate } from '~/lib/utils/datetime_utility';
+import { s__, sprintf } from '~/locale';
+import PackageType from '../constants';
+
+export default {
+  name: 'PackagesApp',
+  components: {
+    GlButton,
+    GlEmptyState,
+    GlLink,
+    GlModal,
+    Icon,
+    PackageInformation,
+  },
+  directives: {
+    GlTooltip: GlTooltipDirective,
+    GlModal: GlModalDirective,
+  },
+  mixins: [timeagoMixin],
+  props: {
+    packageEntity: {
+      type: Object,
+      required: true,
+    },
+    files: {
+      type: Array,
+      default: () => [],
+      required: true,
+    },
+    canDelete: {
+      type: Boolean,
+      default: false,
+      required: true,
+    },
+    destroyPath: {
+      type: String,
+      default: '',
+      required: true,
+    },
+    emptySvgPath: {
+      type: String,
+      required: true,
+    },
+  },
+  computed: {
+    isValidPackage() {
+      if (this.packageEntity.name) {
+        return true;
+      }
+
+      return false;
+    },
+    canDeletePackage() {
+      return this.canDelete && this.destroyPath;
+    },
+    deleteModalDescription() {
+      return sprintf(
+        s__(
+          `PackageRegistry|You are about to delete version %{boldStart}%{version}%{boldEnd} of %{boldStart}%{name}%{boldEnd}. Are you sure?`,
+        ),
+        {
+          version: _.escape(this.packageEntity.version),
+          name: _.escape(this.packageEntity.name),
+          boldStart: '<b>',
+          boldEnd: '</b>',
+        },
+        false,
+      );
+    },
+    packageInformation() {
+      return [
+        {
+          label: s__('Name'),
+          value: this.packageEntity.name,
+        },
+        {
+          label: s__('Version'),
+          value: this.packageEntity.version,
+        },
+        {
+          label: s__('Created on'),
+          value: formatDate(this.packageEntity.created_at),
+        },
+      ];
+    },
+    packageMetadataTitle() {
+      switch (this.packageEntity.package_type) {
+        case PackageType.MAVEN:
+          return s__('Maven Metadata');
+        default:
+          return s__('Package information');
+      }
+    },
+    packageMetadata() {
+      switch (this.packageEntity.package_type) {
+        case PackageType.MAVEN:
+          return [
+            {
+              label: s__('Group ID'),
+              value: this.packageEntity.maven_metadatum.app_group,
+            },
+            {
+              label: s__('Artifact ID'),
+              value: this.packageEntity.maven_metadatum.app_name,
+            },
+            {
+              label: s__('Version'),
+              value: this.packageEntity.maven_metadatum.app_version,
+            },
+          ];
+        default:
+          return null;
+      }
+    },
+  },
+  methods: {
+    formatSize(size) {
+      return numberToHumanSize(size);
+    },
+    cancelDelete() {
+      this.$refs.deleteModal.hide();
+    },
+  },
+  i18n: {
+    deleteModalTitle: s__(`PackageRegistry|Delete Package Version`),
+  },
+};
+</script>
+
+<template>
+  <gl-empty-state
+    v-if="!isValidPackage"
+    :title="s__('PackageRegistry|Unable to load package')"
+    :description="s__('PackageRegistry|There was a problem fetching the details for this package.')"
+    :svg-path="emptySvgPath"
+    class="js-package-empty-state"
+  />
+
+  <div v-else class="packages-app">
+    <div class="detail-page-header d-flex justify-content-between">
+      <strong class="js-version-title">{{ packageEntity.version }}</strong>
+      <gl-button
+        v-if="canDeletePackage"
+        v-gl-modal="'delete-modal'"
+        class="js-delete-button"
+        variant="danger"
+        >{{ __('Delete') }}</gl-button
+      >
+    </div>
+
+    <div class="row prepend-top-default">
+      <package-information :type="packageEntity.package_type" :information="packageInformation" />
+      <package-information
+        v-if="packageMetadata"
+        :heading="packageMetadataTitle"
+        :information="packageMetadata"
+      />
+    </div>
+
+    <table class="table">
+      <thead>
+        <tr>
+          <th>{{ __('Name') }}</th>
+          <th>{{ __('Size') }}</th>
+          <th>
+            <span class="pull-right">{{ __('Created') }}</span>
+          </th>
+        </tr>
+      </thead>
+
+      <tbody>
+        <tr v-for="file in files" :key="file.id" class="js-file-row">
+          <td class="d-flex align-items-center">
+            <icon name="doc-code" class="space-right" /><gl-link
+              :href="file.download_path"
+              class="js-file-download"
+              >{{ file.file_name }}</gl-link
+            >
+          </td>
+          <td>{{ formatSize(file.size) }}</td>
+          <td>
+            <span v-gl-tooltip class="pull-right" :title="tooltipTitle(file.created_at)">{{
+              timeFormated(file.created_at)
+            }}</span>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+
+    <gl-modal ref="deleteModal" class="js-delete-modal" modal-id="delete-modal">
+      <template v-slot:modal-title>{{ $options.i18n.deleteModalTitle }}</template>
+      <p v-html="deleteModalDescription"></p>
+
+      <div slot="modal-footer" class="w-100">
+        <div class="float-right">
+          <gl-button @click="cancelDelete()">{{ __('Cancel') }}</gl-button>
+          <gl-button data-method="delete" :to="destroyPath" variant="danger">{{
+            __('Delete')
+          }}</gl-button>
+        </div>
+      </div>
+    </gl-modal>
+  </div>
+</template>

ee/app/assets/javascripts/packages/components/information.vue

+<script>
+import { s__ } from '~/locale';
+
+export default {
+  name: 'PackageInformation',
+  props: {
+    heading: {
+      type: String,
+      default: s__('Package information'),
+      required: false,
+    },
+    information: {
+      type: Array,
+      default: () => [],
+      required: true,
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="col-sm-6">
+    <div class="card">
+      <div class="card-header">
+        <strong>{{ heading }}</strong>
+      </div>
+
+      <ul class="content-list">
+        <li v-for="(item, index) in information" :key="index">
+          <span class="text-secondary">{{ item.label }}</span>
+          <span class="pull-right">{{ item.value }}</span>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>

ee/app/assets/javascripts/packages/constants.js

+const PackageType = {
+  MAVEN: 'maven',
+  NPM: 'npm',
+};
+
+export default PackageType;

ee/app/assets/javascripts/packages/index.js

+import Vue from 'vue';
+import PackagesApp from './components/app.vue';
+import Translate from '~/vue_shared/translate';
+
+Vue.use(Translate);
+
+export default () =>
+  new Vue({
+    el: '#js-vue-packages-detail',
+    components: {
+      PackagesApp,
+    },
+    data() {
+      const { dataset } = document.querySelector(this.$options.el);
+      const packageData = JSON.parse(dataset.package);
+      const packageFiles = JSON.parse(dataset.packageFiles);
+      const canDelete = dataset.canDelete === 'true';
+
+      return {
+        packageData,
+        packageFiles,
+        canDelete,
+        destroyPath: dataset.destroyPath,
+        emptySvgPath: dataset.svgPath,
+      };
+    },
+    render(createElement) {
+      return createElement('packages-app', {
+        props: {
+          packageEntity: this.packageData,
+          files: this.packageFiles,
+          canDelete: this.canDelete,
+          destroyPath: this.destroyPath,
+          emptySvgPath: this.emptySvgPath,
+        },
+      });
+    },
+  });

ee/app/assets/javascripts/pages/projects/packages/packages/show/index.js

+import initPackageDetail from 'ee/packages';
+
+document.addEventListener('DOMContentLoaded', initPackageDetail);

ee/app/models/packages/package_file.rb

@@ -29,4 +29,8 @@ class Packages::PackageFile < ApplicationRecord
     # Keep empty for now. Should be addressed in future
     # by https://gitlab.com/gitlab-org/gitlab-ee/issues/7891
   end
+
+  def download_path
+    Gitlab::Routing.url_helpers.download_project_package_file_path(project, self)
+  end
 end

ee/app/views/projects/packages/packages/show.html.haml

@@ -3,73 +3,11 @@
 - breadcrumb_title @package.version
 - page_title _("Packages")
 
-.detail-page-header.d-flex.justify-content-between
-  %strong
-    = @package.version
-
-  - if can?(current_user, :destroy_package, @project)
-    = link_to project_package_path(@project, @package), method: :delete, data: { confirm: _("Are you sure?") }, class: "btn btn-grouped btn-remove", title: _('Delete Package') do
-      = _('Delete')
-.row.prepend-top-default
-  .col-sm-6
-    .card
-      .card-header
-        %strong= _('Package information')
-      %ul.content-list
-        %li
-          %span.text-secondary
-            = _('Name')
-          %span.pull-right
-            = @package.name
-        %li
-          %span.text-secondary
-            = _('Version')
-          %span.pull-right
-            = @package.version
-        %li
-          %span.text-secondary
-            = _('Created on')
-          %span.pull-right
-            = @package.created_at.to_s(:medium)
-  .col-sm-6
-    - if @maven_metadatum
-      .card
-        .card-header
-          %strong= _('Maven Metadata')
-        %ul.content-list
-          %li
-            %span.text-secondary
-              = _('Group ID')
-            %span.pull-right
-              = @maven_metadatum.app_group
-          %li
-            %span.text-secondary
-              = _('Artifact ID')
-            %span.pull-right
-              = @maven_metadatum.app_name
-          %li
-            %span.text-secondary
-              = _('Version')
-            %span.pull-right
-              = @maven_metadatum.app_version
-%table.table
-  %thead
-    %tr
-      %th
-        = _('Name')
-      %th
-        = _('Size')
-      %th
-        .pull-right
-          = _('Created')
-  %tbody
-    - @package_files.each do |package_file|
-      %tr
-        %td
-          = icon('file-o fw')
-          = link_to package_file.file.identifier, download_project_package_file_path(@project, package_file)
-        %td
-          = number_to_human_size(package_file.size, precision: 2)
-        %td
-          .pull-right
-            = time_ago_with_tooltip(package_file.created_at)
+.row
+  .col-12
+    #js-vue-packages-detail{ data: { package: @package.to_json(include: [:maven_metadatum, :package_files]),
+      package_files: @package_files.to_json(methods: :download_path),
+      can_delete: can?(current_user, :destroy_package, @project).to_s,
+      destroy_path: project_package_path(@project, @package),
+      svg_path: image_path('illustrations/no-packages.svg'),
+      package_file_download_path: download_project_package_file_path(@project, @package_files.first) } }

ee/spec/features/projects/package_files_spec.rb

@@ -18,20 +18,18 @@ describe 'PackageFiles' do
       project.add_master(user)
     end
 
-    it 'allows file download from package page' do
-      visit project_package_path(project, package)
-
-      click_link package_file.file_name
+    it 'allows direct download by url' do
+      visit download_project_package_file_path(project, package_file)
 
       expect(status_code).to eq(200)
-      expect(page.response_headers['Content-Type']).to eq 'application/xml'
-      expect(page.response_headers['Content-Transfer-Encoding']).to eq 'binary'
     end
 
-    it 'allows direct download by url' do
-      visit download_project_package_file_path(project, package_file)
+    it 'renders the download link with the correct url', :js do
+      visit project_package_path(project, package)
 
-      expect(status_code).to eq(200)
+      download_url = download_project_package_file_path(project, package_file)
+
+      expect(page).to have_link(package_file.file_name, href: download_url)
     end
 
     it 'does not allow download of package belonging to different project' do

ee/spec/features/projects/packages_spec.rb

@@ -64,7 +64,7 @@ describe 'Packages' do
       expect(page).not_to have_content(package.name)
     end
 
-    it 'shows a single package' do
+    it 'shows a single package', :js do
       click_on package.name
 
       expect(page).to have_content(package.name)

ee/spec/frontend/packages/components/app_spec.js

+import { mount } from '@vue/test-utils';
+import { GlModal } from '@gitlab/ui';
+import PackagesApp from 'ee/packages/components/app.vue';
+import PackageInformation from 'ee/packages/components/information.vue';
+import { mavenPackage, mavenFiles, npmPackage, npmFiles } from '../mock_data';
+
+describe('PackagesApp', () => {
+  let wrapper;
+
+  const defaultProps = {
+    packageEntity: mavenPackage,
+    files: mavenFiles,
+    canDelete: true,
+    destroyPath: 'destroy-package-path',
+    emptySvgPath: 'empty-illustration',
+  };
+
+  function createComponent(props = {}) {
+    const propsData = {
+      ...defaultProps,
+      ...props,
+    };
+
+    wrapper = mount(PackagesApp, {
+      propsData,
+    });
+  }
+
+  const versionTitle = () => wrapper.find('.js-version-title');
+  const emptyState = () => wrapper.find('.js-package-empty-state');
+  const allPackageInformation = () => wrapper.findAll(PackageInformation);
+  const packageInformation = index => allPackageInformation().at(index);
+  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);
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('renders the app and displays the package version as the title', () => {
+    createComponent();
+
+    expect(versionTitle()).toExist();
+    expect(versionTitle().text()).toBe(mavenPackage.version);
+  });
+
+  it('renders an empty state component when no an invalid package is passed as a prop', () => {
+    createComponent({
+      packageEntity: {},
+    });
+
+    expect(emptyState()).toExist();
+  });
+
+  it('renders package information and metadata for packages containing both information and metadata', () => {
+    createComponent();
+
+    expect(packageInformation(0)).toExist();
+    expect(packageInformation(1)).toExist();
+  });
+
+  it('does not render package metadata for npm as npm packages do not contain metadata', () => {
+    createComponent({
+      packageEntity: npmPackage,
+      files: npmFiles,
+    });
+
+    expect(packageInformation(0)).toExist();
+    expect(allPackageInformation().length).toBe(1);
+  });
+
+  it('renders a single file for an npm package as they only contain one file', () => {
+    createComponent({
+      packageEntity: npmPackage,
+      files: npmFiles,
+    });
+
+    expect(allFileRows()).toExist();
+    expect(allFileRows().length).toBe(1);
+  });
+
+  it('renders multiple files for a package that contains more than one file', () => {
+    createComponent();
+
+    expect(allFileRows()).toExist();
+    expect(allFileRows().length).toBe(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');
+  });
+
+  describe('deleting packages', () => {
+    beforeEach(() => {
+      createComponent();
+      deleteButton().trigger('click');
+    });
+
+    it('shows the delete confirmation modal when delete is clicked', () => {
+      expect(deleteModal()).toExist();
+    });
+  });
+});

ee/spec/frontend/packages/components/information_spec.js

+import { shallowMount } from '@vue/test-utils';
+import PackageInformation from 'ee/packages/components/information.vue';
+
+describe('PackageInformation', () => {
+  let wrapper;
+
+  const defaultProps = {
+    information: [
+      {
+        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 = {
+      ...defaultProps,
+      ...props,
+    };
+
+    wrapper = shallowMount(PackageInformation, {
+      propsData,
+    });
+  }
+
+  const headingSelector = () => wrapper.find('.card-header > strong');
+  const informationSelector = () => wrapper.findAll('ul.content-list li');
+  const informationRowText = index =>
+    informationSelector()
+      .at(index)
+      .text();
+
+  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().length).toBe(3);
+    expect(informationRowText(0)).toContain('one');
+    expect(informationRowText(1)).toContain('two');
+    expect(informationRowText(2)).toContain('three');
+  });
+});

ee/spec/frontend/packages/mock_data.js

+export const mavenPackage = {
+  created_at: '',
+  id: 1,
+  maven_metadatum: {
+    app_group: 'com.test.app',
+    app_name: 'test-app',
+    app_version: '1.0-SNAPSHOT',
+  },
+  name: 'Test package',
+  package_type: 'maven',
+  project_id: 1,
+  updated_at: '',
+  version: '1.0.0',
+};
+
+export const mavenFiles = [
+  {
+    created_at: '',
+    file_name: 'File one',
+    id: 1,
+    size: 100,
+    download_path: '/-/package_files/1/download',
+  },
+  {
+    created_at: '',
+    file_name: 'File two',
+    id: 2,
+    size: 200,
+    download_path: '/-/package_files/2/download',
+  },
+];
+
+export const npmPackage = {
+  created_at: '',
+  id: 2,
+  name: '@Test/package',
+  package_type: 'npm',
+  project_id: 1,
+  updated_at: '',
+  version: '',
+};
+
+export const npmFiles = [
+  {
+    created_at: '',
+    file_name: '@test/test-package-1.0.0.tgz',
+    id: 2,
+    size: 200,
+    download_path: '/-/package_files/2/download',
+  },
+];

locale/gitlab.pot

@@ -10615,6 +10615,18 @@ msgstr ""
 msgid "Package was removed"
 msgstr ""
 
+msgid "PackageRegistry|Delete Package Version"
+msgstr ""
+
+msgid "PackageRegistry|There was a problem fetching the details for this package."
+msgstr ""
+
+msgid "PackageRegistry|Unable to load package"
+msgstr ""
+
+msgid "PackageRegistry|You are about to delete version %{boldStart}%{version}%{boldEnd} of %{boldStart}%{name}%{boldEnd}. Are you sure?"
+msgstr ""
+
 msgid "Packages"
 msgstr ""