Create universal component for exercise metadata items

The goal of this component is abstracting away
the difference between metadata fields which are
strings and the ones which are arrays of strings.

src/main/webapp/app/exercise/exercise-details/exercise-metadata/exercise-metadata-item/exercise-metadata-item.component.html

+<div *ngIf="value && value.length > 0" class="row">
+    <ng-container *ngIf="isArray(value)">
+        <div *ngIf="value.length === 1"
+             class="col-4">
+            {{description + '.singular' | translate }}
+        </div>
+        <div *ngIf="value.length > 1"
+             class="col-4">
+            {{description + '.plural' | translate }}
+        </div>
+        <div *ngIf="treatAsHTML" class="col-8" [innerHTML]="arrayToString(value)"></div>
+        <div *ngIf="!treatAsHTML" class="col-8">{{arrayToString(value)}}</div>
+    </ng-container>
+    <ng-container *ngIf="!isArray(value)">
+        <div *ngIf="value && value.length > 0" class="row">
+            <div jhiTranslate="{{description}}"
+                 class="col-4"></div>
+            <div class="col-8">{{value}}</div>
+        </div>
+    </ng-container>
+</div>

src/main/webapp/app/exercise/exercise-details/exercise-metadata/exercise-metadata-item/exercise-metadata-item.component.ts

+import { Component, OnInit, Input } from '@angular/core';
+
+@Component({
+  selector: 'jhi-exercise-metadata-item',
+  templateUrl: './exercise-metadata-item.component.html',
+  styleUrls: ['./exercise-metadata-item.component.scss'],
+})
+export class ExerciseMetadataItemComponent implements OnInit {
+  @Input() description: string | undefined;
+  @Input() value: string | string[] | undefined;
+  @Input() treatAsHTML = false;
+
+  constructor() {}
+
+  ngOnInit(): void {}
+
+  isArray(value: string | string[]): boolean {
+    return Array.isArray(value);
+  }
+
+  arrayToString(array: string | string[]): string {
+    if (!this.isArray(array)) {
+      // should not happen
+      // Replace with a better way of handling value,
+      // a variable which can be either a string or an array of strings.
+      return '';
+    }
+    let result = '';
+    for (let i = 0; i < array.length - 1; ++i) {
+      result += array[i] + ', ';
+    }
+    result += array[array.length - 1];
+    return result;
+  }
+}

src/main/webapp/app/exercise/exercise.module.ts

@@ -6,6 +6,7 @@ import { ExerciseDetailsComponent } from './exercise-details/exercise-details.co
 import { ExerciseMetadataComponent } from './exercise-details/exercise-metadata/exercise-metadata.component';
 import { ExerciseMetadataAtomicItemComponent } from './exercise-details/exercise-metadata/exercise-metadata-atomic-item/exercise-metadata-atomic-item.component';
 import { ExerciseMetadataListItemComponent } from './exercise-details/exercise-metadata/exercise-metadata-list-item/exercise-metadata-list-item.component';
+import { ExerciseMetadataItemComponent } from './exercise-details/exercise-metadata/exercise-metadata-item/exercise-metadata-item.component';
 
 @NgModule({
   imports: [GitSearchV2SharedModule],
@@ -15,6 +16,7 @@ import { ExerciseMetadataListItemComponent } from './exercise-details/exercise-m
     ExerciseMetadataComponent,
     ExerciseMetadataAtomicItemComponent,
     ExerciseMetadataListItemComponent,
+    ExerciseMetadataItemComponent,
   ],
   exports: [ExerciseCardComponent, ExerciseDetailsComponent],
 })