Added Conan recipe to package details

Created utils for generating package information
Created function to generate Conan recipe
Added Conan metadata to package details
Changed component to use utils function
Added specs to cover utils
Updated pot file

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

@@ -15,7 +15,7 @@ import MavenInstallation from './maven_installation.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 { generatePackageInfo } from '../utils';
 import { __, s__, sprintf } from '~/locale';
 import { PackageType } from '../constants';
 
@@ -106,24 +106,7 @@ export default {
       );
     },
     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),
-        },
-        {
-          label: s__('Updated at'),
-          value: formatDate(this.packageEntity.updated_at),
-        },
-      ];
+      return generatePackageInfo(this.packageEntity);
     },
     packageMetadataTitle() {
       switch (this.packageEntity.package_type) {

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

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

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

-import { TrackingActions } from './constants';
+import { __ } from '~/locale';
+import { formatDate } from '~/lib/utils/datetime_utility';
+import { PackageType, TrackingActions } from './constants';
 
-const trackInstallationTabChange = {
+export const trackInstallationTabChange = {
   methods: {
     trackInstallationTabChange(tabIndex) {
       const action = tabIndex === 0 ? TrackingActions.INSTALLATION : TrackingActions.REGISTRY_SETUP;
@@ -9,4 +11,47 @@ const trackInstallationTabChange = {
   },
 };
 
-export default trackInstallationTabChange;
+export function generateConanRecipe(packageEntity = {}) {
+  const {
+    name = '',
+    version = '',
+    conan_metadatum: {
+      package_username: packageUsername = '',
+      package_channel: packageChannel = '',
+    } = {},
+  } = packageEntity;
+
+  return `${name}/${version}@${packageUsername}/${packageChannel}`;
+}
+
+export function generatePackageInfo(packageEntity = {}) {
+  const information = [];
+
+  if (packageEntity.package_type === PackageType.CONAN) {
+    information.push({
+      label: __('Recipe'),
+      value: generateConanRecipe(packageEntity),
+    });
+  } else {
+    information.push({
+      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),
+    },
+  ];
+}

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

@@ -5,7 +5,7 @@
 
 .row
   .col-12
-    #js-vue-packages-detail{ data: { package: @package.to_json(include: [:maven_metadatum, :package_files]),
+    #js-vue-packages-detail{ data: { package: @package.to_json(include: [:conan_metadatum, :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),

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

+import { formatDate } from '~/lib/utils/datetime_utility';
+
 export const registryUrl = 'foo/registry';
 
 export const mavenMetadata = {
@@ -40,3 +42,34 @@ export const generateMavenSetupXml = () => `<repositories>
     <url>${registryUrl}</url>
   </snapshotRepository>
 </distributionManagement>`;
+
+export const generateCommonPackageInformation = packageEntity => [
+  {
+    label: 'Version',
+    value: packageEntity.version,
+  },
+  {
+    label: 'Created on',
+    value: formatDate(packageEntity.created_at),
+  },
+  {
+    label: 'Updated at',
+    value: formatDate(packageEntity.updated_at),
+  },
+];
+
+export const generateStandardPackageInformation = packageEntity => [
+  {
+    label: 'Name',
+    value: packageEntity.name,
+  },
+  ...generateCommonPackageInformation(packageEntity),
+];
+
+export const generateConanInformation = conanPackage => [
+  {
+    label: 'Recipe',
+    value: conanPackage.recipe,
+  },
+  ...generateCommonPackageInformation(conanPackage),
+];

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';
+
+describe('Package detail utils', () => {
+  describe('generating information', () => {
+    describe('conan packages', () => {
+      const conanInformation = generateConanInformation(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@/');
+        });
+      });
+    });
+
+    describe('npm packages', () => {
+      const npmInformation = generateStandardPackageInformation(npmPackage);
+
+      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);
+      });
+    });
+  });
+});

ee/spec/frontend/packages/mock_data.js

@@ -51,3 +51,19 @@ export const npmFiles = [
 ];
 
 export const packageList = [mavenPackage, npmPackage];
+
+export const conanPackage = {
+  conan_metadatum: {
+    package_channel: 'stable',
+    package_username: 'conan+conan-package',
+  },
+  created_at: '',
+  id: 3,
+  name: 'conan-package',
+  package_files: [],
+  package_type: 'conan',
+  project_id: 1,
+  recipe: 'conan-package/1.0.0@conan+conan-package/stable',
+  updated_at: '',
+  version: '1.0.0',
+};

locale/gitlab.pot

@@ -14484,6 +14484,9 @@ msgstr ""
 msgid "Recent searches"
 msgstr ""
 
+msgid "Recipe"
+msgstr ""
+
 msgid "Recovery Codes"
 msgstr ""