Add NuGet metadata to the package details ui

Adds project and licence url to package details information
Updates information to support ordering and links
Updated tests

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

 <script>
 import { s__ } from '~/locale';
 import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
+import { GlLink } from '@gitlab/ui';
 
 export default {
   name: 'PackageInformation',
   components: {
     ClipboardButton,
+    GlLink,
   },
   props: {
     heading: {
@@ -37,7 +39,12 @@ export default {
       <li v-for="(item, index) in information" :key="index">
         <span class="text-secondary">{{ item.label }}</span>
         <div class="pull-right">
-          <span>{{ item.value }}</span>
+          <gl-link v-if="item.type === 'link'" :href="item.value" target="_blank">
+            {{ item.value }}
+          </gl-link>
+
+          <span v-else>{{ item.value }}</span>
+
           <clipboard-button
             v-if="showCopy"
             :text="item.value"

ee/app/assets/javascripts/packages/details/utils.js

@@ -2,6 +2,7 @@ import { __ } from '~/locale';
 import { formatDate } from '~/lib/utils/datetime_utility';
 import { TrackingActions } from './constants';
 import { PackageType } from '../shared/constants';
+import { orderBy } from 'lodash';
 
 export const trackInstallationTabChange = {
   methods: {
@@ -30,29 +31,61 @@ export function generatePackageInfo(packageEntity = {}) {
 
   if (packageEntity.package_type === PackageType.CONAN) {
     information.push({
+      order: 1,
       label: __('Recipe'),
       value: generateConanRecipe(packageEntity),
     });
   } else {
     information.push({
+      order: 1,
       label: __('Name'),
       value: packageEntity.name || '',
     });
   }
 
-  return [
-    ...information,
-    {
-      label: __('Version'),
-      value: packageEntity.version || '',
-    },
-    {
-      label: __('Created on'),
-      value: formatDate(packageEntity.created_at),
-    },
-    {
-      label: __('Updated at'),
-      value: formatDate(packageEntity.updated_at),
-    },
-  ];
+  if (packageEntity.package_type === PackageType.NUGET) {
+    const {
+      nuget_metadatum: { project_url: projectUrl, license_url: licenseUrl } = {},
+    } = packageEntity;
+
+    if (projectUrl) {
+      information.push({
+        order: 3,
+        label: __('Project URL'),
+        value: projectUrl,
+        type: 'link',
+      });
+    }
+
+    if (licenseUrl) {
+      information.push({
+        order: 4,
+        label: __('License URL'),
+        value: licenseUrl,
+        type: 'link',
+      });
+    }
+  }
+
+  return orderBy(
+    [
+      ...information,
+      {
+        order: 2,
+        label: __('Version'),
+        value: packageEntity.version || '',
+      },
+      {
+        order: 5,
+        label: __('Created on'),
+        value: formatDate(packageEntity.created_at),
+      },
+      {
+        order: 6,
+        label: __('Updated at'),
+        value: formatDate(packageEntity.updated_at),
+      },
+    ],
+    ['order'],
+  );
 }

ee/changelogs/unreleased/36422-add-nuget-metadata-to-package-details.yml

+---
+title: Adds NuGet project and license URL to the package details page
+merge_request: 33268
+author:
+type: added

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

 import { shallowMount } from '@vue/test-utils';
 import PackageInformation from 'ee/packages/details/components/information.vue';
 import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
+import { GlLink } from '@gitlab/ui';
 
 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',
-      },
-    ],
-  };
+  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 = {
-      ...defaultProps,
+      information: testInformation,
       ...props,
     };
 
@@ -40,6 +40,7 @@ describe('PackageInformation', () => {
     informationSelector()
       .at(index)
       .text();
+  const informationLink = () => wrapper.find(GlLink);
 
   afterEach(() => {
     if (wrapper) wrapper.destroy();
@@ -66,10 +67,28 @@ describe('PackageInformation', () => {
   it('renders the supplied information', () => {
     createComponent();
 
-    expect(informationSelector()).toHaveLength(3);
-    expect(informationRowText(0)).toContain('one');
-    expect(informationRowText(1)).toContain('two');
-    expect(informationRowText(2)).toContain('three');
+    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', () => {
@@ -82,10 +101,10 @@ describe('PackageInformation', () => {
     it('does render when the prop is set and has correct text set', () => {
       createComponent({ showCopy: true });
 
-      expect(copyButton()).toHaveLength(3);
-      expect(copyButton().at(0).vm.text).toBe(defaultProps.information[0].value);
-      expect(copyButton().at(1).vm.text).toBe(defaultProps.information[1].value);
-      expect(copyButton().at(2).vm.text).toBe(defaultProps.information[2].value);
+      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);
     });
   });
 });

ee/spec/frontend/packages/details/mock_data.js

 import { formatDate } from '~/lib/utils/datetime_utility';
+import { orderBy } from 'lodash';
 
 export const registryUrl = 'foo/registry';
 
@@ -43,18 +44,21 @@ export const generateMavenSetupXml = () => `<repositories>
   </snapshotRepository>
 </distributionManagement>`;
 
-export const generateCommonPackageInformation = packageEntity => [
+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,
   },
 ];
 
@@ -62,6 +66,7 @@ export const generateStandardPackageInformation = packageEntity => [
   {
     label: 'Name',
     value: packageEntity.name,
+    order: 1,
   },
   ...generateCommonPackageInformation(packageEntity),
 ];
@@ -70,10 +75,36 @@ 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__

ee/spec/frontend/packages/details/utils_spec.js

 import { generateConanRecipe, generatePackageInfo } from 'ee/packages/details/utils';
-import { conanPackage, mavenPackage, npmPackage } from '../mock_data';
-import { generateConanInformation, generateStandardPackageInformation } from './mock_data';
+import { conanPackage, mavenPackage, npmPackage, nugetPackage } from '../mock_data';
+import {
+  generateConanInformation,
+  generateStandardPackageInformation,
+  generateNugetInformation,
+} from './mock_data';
 
 describe('Package detail utils', () => {
   describe('generating information', () => {
@@ -53,5 +57,15 @@ describe('Package detail utils', () => {
         expect(info).toEqual(mavenInformation);
       });
     });
+
+    describe('nuget packages', () => {
+      const nugetInformation = generateNugetInformation(nugetPackage);
+
+      it('correctly generates the nuget information', () => {
+        const info = generatePackageInfo(nugetPackage);
+
+        expect(info).toEqual(nugetInformation);
+      });
+    });
   });
 });

ee/spec/frontend/packages/mock_data.js

@@ -120,6 +120,8 @@ export const nugetPackage = {
   dependency_links: Object.values(dependencyLinks),
   nuget_metadatum: {
     icon_url: 'fake-icon',
+    project_url: 'project-foo-url',
+    license_url: 'license-foo-url',
   },
 };
 

locale/gitlab.pot

@@ -12970,6 +12970,9 @@ msgstr ""
 msgid "License History"
 msgstr ""
 
+msgid "License URL"
+msgstr ""
+
 msgid "License-Check"
 msgstr ""