MARP-1014: Product detail tabs

marketplace-ui/src/app/modules/product/product-detail/product-detail-maven-content/product-detail-maven-content.component.html

@@ -1,20 +1,12 @@
 <p [lang]="languageService.selectedLanguage()" [innerHTML]="'common.product.detail.maven.description' | translate"></p>
-<code>
-  &lt;!-- {{ productModuleContent.name }} --&gt;
-  <br />
-  &lt;dependency&gt;
-  <br />
-  &nbsp;&nbsp;&lt;groupId&gt;{{ productModuleContent.groupId }}&lt;/groupId&gt;
-  <br />
-  &nbsp;&nbsp;&lt;artifactId&gt;{{
-    productModuleContent.artifactId
-  }}&lt;/artifactId&gt;
-  <br />
-  &nbsp;&nbsp;&lt;version&gt;{{
-    selectedVersion.replaceAll('Version ', '')
-  }}&lt;/version&gt;
-  <br />
-  &nbsp;&nbsp;&lt;type&gt;{{ productModuleContent.type }}&lt;/type&gt;
-  <br />
-  &lt;/dependency&gt;
-</code>
+<pre>
+  <code>
+    &lt;!-- {{ getProductName() }} --&gt;
+    &lt;dependency&gt;
+    &nbsp;&nbsp;&lt;groupId&gt;{{ productDetail.productModuleContent.groupId }}&lt;/groupId&gt;
+    &nbsp;&nbsp;&lt;artifactId&gt;{{productDetail.productModuleContent.artifactId}}&lt;/artifactId&gt;
+    &nbsp;&nbsp;&lt;version&gt;{{ selectedVersion.replaceAll('Version ', '') }}&lt;/version&gt;
+    &nbsp;&nbsp;&lt;type&gt;{{ productDetail.productModuleContent.type }}&lt;/type&gt;
+    &lt;/dependency&gt;
+  </code>
+</pre>

marketplace-ui/src/app/modules/product/product-detail/product-detail-maven-content/product-detail-maven-content.component.scss

@@ -0,0 +1,3 @@
+pre {
+    border: 1px solid #c7d426;
+}

marketplace-ui/src/app/modules/product/product-detail/product-detail-maven-content/product-detail-maven-content.component.spec.ts

@@ -15,7 +15,7 @@ describe('ProductDetailMavenContentComponent', () => {
 
     fixture = TestBed.createComponent(ProductDetailMavenContentComponent);
     component = fixture.componentInstance;
-    component.productModuleContent = MOCK_PRODUCT_DETAIL.productModuleContent;
+    component.productDetail = MOCK_PRODUCT_DETAIL;
     component.selectedVersion = '1.0.0';
     fixture.detectChanges();
   });

marketplace-ui/src/app/modules/product/product-detail/product-detail-maven-content/product-detail-maven-content.component.ts

@@ -1,7 +1,8 @@
 import { Component, inject, Input } from '@angular/core';
 import { TranslateModule } from '@ngx-translate/core';
-import { ProductModuleContent } from '../../../../shared/models/product-module-content.model';
 import { LanguageService } from '../../../../core/services/language/language.service';
+import { Language } from '../../../../shared/enums/language.enum';
+import { ProductDetail } from '../../../../shared/models/product-detail.model';
 
 @Component({
   selector: 'app-product-detail-maven-content',
@@ -12,9 +13,13 @@ import { LanguageService } from '../../../../core/services/language/language.ser
 })
 export class ProductDetailMavenContentComponent {
   @Input()
-  productModuleContent!: ProductModuleContent;
+  productDetail!: ProductDetail;
   @Input()
   selectedVersion!: string;
 
   languageService = inject(LanguageService);
+
+  getProductName() {
+    return this.productDetail.names[Language.EN];
+  }
 }

marketplace-ui/src/app/modules/product/product-detail/product-detail.component.html

@@ -163,7 +163,7 @@ <h4 class="analysis-title text-primary text-capitalize mb-0">
                 [attr.aria-labelledby]="displayedTab.value + '-tab'">
                 @if (displayedTab.value === 'dependency') {
                   <app-product-detail-maven-content
-                    [productModuleContent]="productModuleContent()"
+                    [productDetail]="productDetail()"
                     [selectedVersion]="selectedVersion">
                   </app-product-detail-maven-content>
                 } @else {