Display dependency version in license list page

* chore: Replace duplicate entity serializer with existing one
* docs: Add changelog entry

ee/app/assets/javascripts/license_compliance/components/license_component_links.vue

@@ -52,6 +52,11 @@ export default {
       return s__('Modal|Close');
     },
   },
+  methods: {
+    getComponentLabel({ name, version }) {
+      return version ? `${name} (${version})` : name;
+    },
+  },
 };
 </script>
 
@@ -64,9 +69,9 @@ export default {
         class="js-component-links-component-list-item"
       >
         <gl-link v-if="component.blob_path" :href="component.blob_path" target="_blank">{{
-          component.name
+          getComponentLabel(component)
         }}</gl-link>
-        <template v-else>{{ component.name }}</template>
+        <template v-else>{{ getComponentLabel(component) }}</template>
       </span>
       <gl-button
         v-if="hasComponentsInModal"

ee/app/controllers/projects/licenses_controller.rb

@@ -19,7 +19,8 @@ module Projects
           license_compliance = project.license_compliance
           render json: serializer.represent(
             pageable(matching_policies_from(license_compliance)),
-            build: license_compliance.latest_build_for_default_branch
+            build: license_compliance.latest_build_for_default_branch,
+            project: project
           )
         end
       end

ee/changelogs/unreleased/37719-display-in-ui.yml

+---
+title: Display dependency version on License Compliance page
+merge_request: 45315
+author:
+type: changed

ee/spec/controllers/projects/licenses_controller_spec.rb

@@ -61,7 +61,7 @@ RSpec.describe Projects::LicensesController do
           end
 
           context 'with existing report' do
-            let!(:pipeline) { create(:ee_ci_pipeline, :with_license_scanning_report, project: project) }
+            let!(:pipeline) { create(:ci_pipeline, project: project, builds: [create(:ee_ci_build, :success, :license_scan_v2_1)]) }
 
             before do
               get_licenses
@@ -72,20 +72,27 @@ RSpec.describe Projects::LicensesController do
             end
 
             it 'returns a hash with licenses' do
-              expect(json_response).to be_a(Hash)
-              expect(json_response['licenses'].length).to eq(4)
+              expect(json_response['licenses'].length).to eq(3)
               expect(json_response['licenses'][0]).to include({
                 'id' => nil,
-                'spdx_identifier' => 'Apache-2.0',
                 'classification' => 'unclassified',
-                'name' => 'Apache 2.0',
-                'url' => 'http://www.apache.org/licenses/LICENSE-2.0.txt',
-                'components' => [{
-                  "blob_path" => nil,
-                  "name" => "thread_safe",
-                  "package_manager" => nil,
-                  "version" => nil
-                }]
+                'name' => "BSD 3-Clause \"New\" or \"Revised\" License",
+                'spdx_identifier' => "BSD-3-Clause",
+                'url' => "https://opensource.org/licenses/BSD-3-Clause",
+                'components' => [
+                  {
+                    "name" => "b",
+                    "package_manager" => "yarn",
+                    "version" => "0.1.0",
+                    "blob_path" => project_blob_path(project, "#{project.default_branch}/yarn.lock")
+                  },
+                  {
+                    "name" => "c",
+                    "package_manager" => "bundler",
+                    "version" => "1.1.0",
+                    "blob_path" => project_blob_path(project, "#{project.default_branch}/Gemfile.lock")
+                  }
+                ]
               })
             end
 
@@ -98,7 +105,7 @@ RSpec.describe Projects::LicensesController do
             end
 
             context 'with pagination params' do
-              let(:params) { { namespace_id: project.namespace, project_id: project, per_page: 3, page: 2 } }
+              let(:params) { { namespace_id: project.namespace, project_id: project, per_page: 2, page: 2 } }
 
               it 'return only 1 license' do
                 expect(json_response['licenses'].length).to eq(1)

ee/spec/features/projects/licenses/maintainer_views_policies_spec.rb

@@ -60,10 +60,15 @@ RSpec.describe 'EE > Projects > Licenses > Maintainer views policies', :js do
       end
     end
 
+    def label_for(dependency)
+      name, version = dependency['name'], dependency['version']
+      version ? "#{name} (#{version})" : name
+    end
+
     def dependencies_for(spdx_id)
       report['dependencies']
         .find_all { |dependency| dependency['licenses'].include?(spdx_id) }
-        .map { |dependency| dependency['name'] }
+        .map { |dependency| label_for(dependency) }
     end
 
     def policy_for(license)

ee/spec/frontend/license_compliance/components/license_component_links_spec.js

@@ -7,7 +7,12 @@ import LicenseComponentLinks, {
 
 describe('LicenseComponentLinks component', () => {
   // data helpers
-  const createComponents = n => [...Array(n).keys()].map(i => ({ name: `component ${i + 1}` }));
+  const createComponents = n =>
+    [...Array(n).keys()].map(i => ({
+      name: `component ${i + 1}`,
+      version: (i + 1) % 2 === 0 ? null : `${i + 1}.0.0`,
+    }));
+
   const addUrls = (components, numComponentsWithUrls = Infinity) =>
     components.map((comp, i) => ({
       ...comp,
@@ -38,6 +43,15 @@ describe('LicenseComponentLinks component', () => {
     wrapper.destroy();
   });
 
+  it("renders components' name and version", () => {
+    factory({ numComponents: 2, numComponentsWithUrl: 1 });
+    const text = wrapper.text();
+
+    expect(text).toContain(`component 1 (1.0.0)`);
+    expect(text).toContain(`component 2`);
+    expect(text).not.toContain('component 2 (');
+  });
+
   it('intersperses the list of licenses correctly', () => {
     factory();