Resolve "Display available metadata for Composer"

app/assets/javascripts/packages_and_registries/package_registry/components/details/additional_metadata.vue

@@ -5,7 +5,9 @@ import {
   PACKAGE_TYPE_NUGET,
   PACKAGE_TYPE_CONAN,
   PACKAGE_TYPE_MAVEN,
+  PACKAGE_TYPE_COMPOSER,
 } from '~/packages_and_registries/package_registry/constants';
+import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
 import DetailsRow from '~/vue_shared/components/registry/details_row.vue';
 
 export default {
@@ -15,11 +17,17 @@ export default {
     recipeText: s__('PackageRegistry|Recipe: %{recipe}'),
     appGroup: s__('PackageRegistry|App group: %{group}'),
     appName: s__('PackageRegistry|App name: %{name}'),
+    targetShaCopyButton: s__('PackageRegistry|Copy target SHA'),
+    targetSha: s__('PackageRegistry|Target SHA: %{sha}'),
+    composerJson: s__(
+      'PackageRegistry|Composer.json with license: %{license} and version: %{version}',
+    ),
   },
   components: {
     DetailsRow,
     GlLink,
     GlSprintf,
+    ClipboardButton,
   },
   props: {
     packageEntity: {
@@ -30,9 +38,12 @@ export default {
   computed: {
     showMetadata() {
       return (
-        [PACKAGE_TYPE_NUGET, PACKAGE_TYPE_CONAN, PACKAGE_TYPE_MAVEN].includes(
-          this.packageEntity.packageType,
-        ) && this.packageEntity.metadata
+        [
+          PACKAGE_TYPE_NUGET,
+          PACKAGE_TYPE_CONAN,
+          PACKAGE_TYPE_MAVEN,
+          PACKAGE_TYPE_COMPOSER,
+        ].includes(this.packageEntity.packageType) && this.packageEntity.metadata
       );
     },
     showNugetMetadata() {
@@ -44,6 +55,9 @@ export default {
     showMavenMetadata() {
       return this.packageEntity.packageType === PACKAGE_TYPE_MAVEN;
     },
+    showComposerMetadata() {
+      return this.packageEntity.packageType === PACKAGE_TYPE_COMPOSER;
+    },
   },
 };
 </script>
@@ -101,6 +115,32 @@ export default {
           </gl-sprintf>
         </details-row>
       </template>
+
+      <template v-else-if="showComposerMetadata">
+        <details-row icon="information-o" padding="gl-p-4" dashed data-testid="composer-target-sha">
+          <gl-sprintf :message="$options.i18n.targetSha">
+            <template #sha>
+              <strong>{{ packageEntity.metadata.targetSha }}</strong>
+              <clipboard-button
+                :title="$options.i18n.targetShaCopyButton"
+                :text="packageEntity.metadata.targetSha"
+                category="tertiary"
+                css-class="gl-p-0!"
+              />
+            </template>
+          </gl-sprintf>
+        </details-row>
+        <details-row icon="information-o" padding="gl-p-4" data-testid="composer-json">
+          <gl-sprintf :message="$options.i18n.composerJson">
+            <template #license>
+              <strong>{{ packageEntity.metadata.composerJson.license }}</strong>
+            </template>
+            <template #version>
+              <strong>{{ packageEntity.metadata.composerJson.version }}</strong>
+            </template>
+          </gl-sprintf>
+        </details-row>
+      </template>
     </div>
   </div>
 </template>

locale/gitlab.pot

@@ -23798,6 +23798,9 @@ msgstr ""
 msgid "PackageRegistry|Composer"
 msgstr ""
 
+msgid "PackageRegistry|Composer.json with license: %{license} and version: %{version}"
+msgstr ""
+
 msgid "PackageRegistry|Conan"
 msgstr ""
 
@@ -23861,6 +23864,9 @@ msgstr ""
 msgid "PackageRegistry|Copy require package include"
 msgstr ""
 
+msgid "PackageRegistry|Copy target SHA"
+msgstr ""
+
 msgid "PackageRegistry|Copy yarn command"
 msgstr ""
 
@@ -24035,6 +24041,9 @@ msgstr ""
 msgid "PackageRegistry|Source project located at %{link}"
 msgstr ""
 
+msgid "PackageRegistry|Target SHA: %{sha}"
+msgstr ""
+
 msgid "PackageRegistry|There are no other versions of this package."
 msgstr ""
 

spec/frontend/packages_and_registries/package_registry/components/details/additional_metadata_spec.js

@@ -5,6 +5,7 @@ import {
   mavenMetadata,
   nugetMetadata,
   packageData,
+  composerMetadata,
 } from 'jest/packages_and_registries/package_registry/mock_data';
 import component from '~/packages_and_registries/package_registry/components/details/additional_metadata.vue';
 import {
@@ -12,12 +13,15 @@ import {
   PACKAGE_TYPE_CONAN,
   PACKAGE_TYPE_MAVEN,
   PACKAGE_TYPE_NPM,
+  PACKAGE_TYPE_COMPOSER,
 } from '~/packages_and_registries/package_registry/constants';
+import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
 import DetailsRow from '~/vue_shared/components/registry/details_row.vue';
 
 const mavenPackage = { packageType: PACKAGE_TYPE_MAVEN, metadata: mavenMetadata() };
 const conanPackage = { packageType: PACKAGE_TYPE_CONAN, metadata: conanMetadata() };
 const nugetPackage = { packageType: PACKAGE_TYPE_NUGET, metadata: nugetMetadata() };
+const composerPackage = { packageType: PACKAGE_TYPE_COMPOSER, metadata: composerMetadata() };
 const npmPackage = { packageType: PACKAGE_TYPE_NPM, metadata: {} };
 
 describe('Package Additional Metadata', () => {
@@ -51,6 +55,9 @@ describe('Package Additional Metadata', () => {
   const findMavenApp = () => wrapper.findByTestId('maven-app');
   const findMavenGroup = () => wrapper.findByTestId('maven-group');
   const findElementLink = (container) => container.findComponent(GlLink);
+  const findComposerTargetSha = () => wrapper.findByTestId('composer-target-sha');
+  const findComposerTargetShaCopyButton = () => wrapper.findComponent(ClipboardButton);
+  const findComposerJson = () => wrapper.findByTestId('composer-json');
 
   it('has the correct title', () => {
     mountComponent();
@@ -62,11 +69,12 @@ describe('Package Additional Metadata', () => {
   });
 
   it.each`
-    packageEntity   | visible  | packageType
-    ${mavenPackage} | ${true}  | ${PACKAGE_TYPE_MAVEN}
-    ${conanPackage} | ${true}  | ${PACKAGE_TYPE_CONAN}
-    ${nugetPackage} | ${true}  | ${PACKAGE_TYPE_NUGET}
-    ${npmPackage}   | ${false} | ${PACKAGE_TYPE_NPM}
+    packageEntity      | visible  | packageType
+    ${mavenPackage}    | ${true}  | ${PACKAGE_TYPE_MAVEN}
+    ${conanPackage}    | ${true}  | ${PACKAGE_TYPE_CONAN}
+    ${nugetPackage}    | ${true}  | ${PACKAGE_TYPE_NUGET}
+    ${composerPackage} | ${true}  | ${PACKAGE_TYPE_COMPOSER}
+    ${npmPackage}      | ${false} | ${PACKAGE_TYPE_NPM}
   `(
     `It is $visible that the component is visible when the package is $packageType`,
     ({ packageEntity, visible }) => {
@@ -127,4 +135,29 @@ describe('Package Additional Metadata', () => {
       expect(element.props('icon')).toBe(icon);
     });
   });
+
+  describe('composer metadata', () => {
+    beforeEach(() => {
+      mountComponent({ packageEntity: composerPackage });
+    });
+
+    it.each`
+      name               | finderFunction           | text                                                      | icon
+      ${'target-sha'}    | ${findComposerTargetSha} | ${'Target SHA: b83d6e391c22777fca1ed3012fce84f633d7fed0'} | ${'information-o'}
+      ${'composer-json'} | ${findComposerJson}      | ${'Composer.json with license: MIT and version: 1.0.0'}   | ${'information-o'}
+    `('$name element', ({ finderFunction, text, icon }) => {
+      const element = finderFunction();
+      expect(element.exists()).toBe(true);
+      expect(element.text()).toBe(text);
+      expect(element.props('icon')).toBe(icon);
+    });
+
+    it('target-sha has a copy button', () => {
+      expect(findComposerTargetShaCopyButton().exists()).toBe(true);
+      expect(findComposerTargetShaCopyButton().props()).toMatchObject({
+        text: 'b83d6e391c22777fca1ed3012fce84f633d7fed0',
+        title: 'Copy target SHA',
+      });
+    });
+  });
 });