Merge branch '33892-add-conan-recipe-to-package-details' into 'master'

Added Conan recipe to package details

See merge request gitlab-org/gitlab!21247

changelogs/unreleased/33892-add-conan-recipe-to-package-details.yml

+---
+title: Added Conan recipe in place of the package name on the package details page.
+merge_request: 21247
+author:
+type: changed

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/components/maven_installation.vue

@@ -4,7 +4,7 @@ import { s__, sprintf } from '~/locale';
 import CodeInstruction from './code_instruction.vue';
 import Tracking from '~/tracking';
 import { TrackingActions, TrackingLabels } from '../constants';
-import trackInstallationTabChange from '../utils';
+import { trackInstallationTabChange } from '../utils';
 
 export default {
   name: 'MavenInstallation',

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

@@ -4,7 +4,7 @@ import { s__, sprintf } from '~/locale';
 import CodeInstruction from './code_instruction.vue';
 import Tracking from '~/tracking';
 import { TrackingActions, TrackingLabels } from '../constants';
-import trackInstallationTabChange from '../utils';
+import { trackInstallationTabChange } from '../utils';
 
 export default {
   name: 'NpmInstallation',

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

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