Manage UI endpoints in App Detail tab

src/app/product-store/app-detail/add-row.directive.ts

@@ -0,0 +1,22 @@
+import { Directive, Input, HostListener } from '@angular/core'
+import { Table } from 'primeng/table'
+
+@Directive({
+  // eslint-disable-next-line @angular-eslint/directive-selector
+  selector: '[pAddRow]'
+})
+export class AddRowDirective {
+  @Input() table!: Table
+  @Input() newRow: any
+
+  @HostListener('click', ['$event'])
+  onClick(event: Event) {
+    // Insert a new row
+    this.table.value.push(this.newRow)
+
+    // Set the new row in edit mode
+    this.table.initRowEdit(this.newRow)
+
+    event.preventDefault()
+  }
+}

src/app/product-store/app-detail/app-detail.component.html

@@ -429,6 +429,60 @@
       <app-app-intern *ngIf="appAbstract?.appType === 'MFE'" [app]="mfe"></app-app-intern>
       <app-app-intern *ngIf="appAbstract?.appType === 'MS'" [app]="ms"></app-app-intern>
     </p-tabPanel>
+
+    <p-tabPanel
+      *ngIf="appAbstract?.appType === 'MFE'"
+      [header]="'DIALOG.TABS.ENDPOINTS' | translate"
+      [tooltip]="'DIALOG.TABS.TOOLTIPS.ENDPOINTS' | translate"
+    >
+      <p-table #endpointTable [value]="endpoints" [tableStyle]="{ 'min-width': '50rem' }">
+        <ng-template pTemplate="header">
+          <tr>
+            <th [pTooltip]="'APP.TOOLTIPS.ENDPOINTS.NAME' | translate" tooltipPosition="top" tooltipEvent="hover">
+              {{ 'APP.ENDPOINTS.PATH' | translate }}
+            </th>
+            <th [pTooltip]="'APP.TOOLTIPS.ENDPOINTS.PATH' | translate" tooltipPosition="top" tooltipEvent="hover">
+              {{ 'APP.ENDPOINTS.NAME' | translate }}
+            </th>
+          </tr>
+        </ng-template>
+        <ng-template pTemplate="body" let-endpoint let-i="index">
+          <tr>
+            <td [pEditableColumn]="endpoint.name" pEditableColumnField="name">
+              <p-cellEditor>
+                <ng-template pTemplate="input">
+                  <input pInputText type="text" [(ngModel)]="endpoint.name" />
+                </ng-template>
+                <ng-template pTemplate="output"> {{ endpoint.name }} </ng-template>
+              </p-cellEditor>
+            </td>
+            <td [pEditableColumn]="endpoint.path" pEditableColumnField="path">
+              <p-cellEditor>
+                <ng-template pTemplate="input">
+                  <input pInputText type="text" [(ngModel)]="endpoint.path" />
+                </ng-template>
+                <ng-template pTemplate="output"> {{ endpoint.path }} </ng-template>
+              </p-cellEditor>
+            </td>
+            <td>
+              <button (click)="onDeleteRow(i)"><i class="pi pi-trash"></i></button>
+            </td>
+          </tr>
+        </ng-template>
+      </p-table>
+      <button
+        pButton
+        type="button"
+        icon="pi pi-plus"
+        pAddRow
+        [table]="endpointTable"
+        [newRow]="onAddEndpointsRow()"
+        [label]="'ACTIONS.TABLE.ADD_ROW' | translate"
+        [pTooltip]="'ACTIONS.TABLE.ADD.TOOLTIP' | translate"
+        tooltipPosition="top"
+        tooltipEvent="hover"
+      ></button>
+    </p-tabPanel>
   </p-tabView>
 
   <ng-template pTemplate="footer">

src/app/product-store/app-detail/app-detail.component.spec.ts

@@ -278,6 +278,10 @@ describe('AppDetailComponent', () => {
       component.appAbstract = appMfe
       component.formGroupMfe = form
       component.changeMode = 'CREATE'
+      component.endpoints = [
+        { name: 'name', path: 'path' },
+        { name: '', path: 'path' }
+      ]
 
       component.onSave()
 
@@ -610,4 +614,21 @@ describe('AppDetailComponent', () => {
     fixture.detectChanges()
     expect(component.dateFormat).toEqual('dd.MM.yyyy HH:mm:ss')
   })
+
+  it('should add a row in the UI endpoints row', () => {
+    const returnValue = component.onAddEndpointsRow()
+
+    expect(returnValue).toEqual({ name: '', path: '' })
+  })
+
+  it('should delete an endpoint item', () => {
+    component.endpoints = [
+      { name: 'name', path: 'path' },
+      { name: '', path: 'path' }
+    ]
+
+    component.onDeleteRow(1)
+
+    expect(component.endpoints.length).toBe(1)
+  })
 })

src/app/product-store/app-detail/app-detail.component.ts

@@ -18,7 +18,8 @@ import {
   Microfrontend,
   Microservice,
   UpdateMicrofrontendRequest,
-  UpdateMicroserviceRequest
+  UpdateMicroserviceRequest,
+  UIEndpoint
 } from 'src/app/shared/generated'
 
 import { AppAbstract, ChangeMode } from '../app-search/app-search.component'
@@ -80,6 +81,7 @@ export class AppDetailComponent implements OnInit, OnChanges {
     { label: 'Component', value: 'COMPONENT' }
   ]
   public iconItems: SelectItem[] = []
+  public endpoints: UIEndpoint[] = []
   public convertToUniqueStringArray = convertToUniqueStringArray
 
   constructor(
@@ -173,6 +175,7 @@ export class AppDetailComponent implements OnInit, OnChanges {
             this.operator = this.mfe?.operator ?? false
             this.undeployed = this.mfe?.undeployed ?? false
             this.deprecated = this.mfe?.deprecated ?? false
+            this.endpoints = this.mfe?.endpoints ?? []
             if (this.changeMode === 'COPY') {
               if (this.mfe?.id) {
                 this.mfe.id = undefined
@@ -255,8 +258,10 @@ export class AppDetailComponent implements OnInit, OnChanges {
         return
       }
       this.mfe = { ...this.formGroupMfe.value, id: this.mfe?.id }
-      if (this.mfe)
+      if (this.mfe) {
         this.mfe.classifications = this.convertToUniqueStringArray(this.formGroupMfe.controls['classifications'].value)
+        this.mfe.endpoints = this.endpoints.filter((endpoint) => !(endpoint.name === '' && endpoint.path === ''))
+      }
       this.changeMode === 'CREATE' ? this.createMfe() : this.updateMfe()
     }
     if (this.appAbstract?.appType === 'MS') {
@@ -354,4 +359,12 @@ export class AppDetailComponent implements OnInit, OnChanges {
       ]
     })
   }
+
+  public onAddEndpointsRow() {
+    return { name: '', path: '' }
+  }
+
+  public onDeleteRow(row: number) {
+    this.endpoints.splice(row, 1)
+  }
 }

src/app/product-store/product-store.module.ts

@@ -23,6 +23,7 @@ import { ProductInternComponent } from './product-detail/product-intern/product-
 import { ProductAppsComponent } from './product-detail/product-apps/product-apps.component'
 import { SlotSearchComponent } from './slot-search/slot-search.component'
 import { SlotDeleteComponent } from './slot-delete/slot-delete.component'
+import { AddRowDirective } from './app-detail/add-row.directive'
 
 const routes: Routes = [
   {
@@ -67,7 +68,8 @@ const routes: Routes = [
     ProductInternComponent,
     ProductAppsComponent,
     SlotSearchComponent,
-    SlotDeleteComponent
+    SlotDeleteComponent,
+    AddRowDirective
   ],
   imports: [
     CommonModule,

src/assets/i18n/de.json

@@ -101,6 +101,10 @@
       "VIEW_MODE_LIST": "Listenansicht",
       "VIEW_MODE_TABLE": "Tabellenansicht"
     },
+    "TABLE": {
+      "ADD_ROW": "Zeile hinzufügen",
+      "ADD.TOOLTIP": "Eine neue Zeile zur Tabelle hinzufügen"
+    },
     "SEARCH": {
       "NOT_FOUND": "Keine Daten gefunden",
       "WILDCARD_SUPPORT": " (Wildcards: ?, *)",
@@ -198,10 +202,12 @@
       "APPS": "Komponenten",
       "INTERN": "Intern",
       "PROPERTIES": "Eigenschaften",
+      "ENDPOINTS": "UI-Endpunkte",
       "TOOLTIPS": {
         "APPS": "Komponenten verwalten",
         "INTERN": "Interne Eigenschaften",
-        "PROPERTIES": "Eigenschaften verwalten"
+        "PROPERTIES": "Eigenschaften verwalten",
+        "ENDPOINTS": "UI-Endpunkte verwalten"
       }
     },
     "COMPONENTS": {
@@ -236,7 +242,8 @@
     "ICON_NAME": "Icon-Name",
     "NOTE": "Notiz",
     "EXPOSED_MODULE": "Exposed Module",
-    "ENDPOINTS": "UI Endpunkte",
+    "ENDPOINTS.NAME": "Name",
+    "ENDPOINTS.PATH": "Pfad zum UI-Endpunkt",
     "GROUP.REMOTE_MODULE": "Remote Modul",
     "GROUP.LOCAL_MODULE": "Modul Management Details",
     "GROUP.INTERNALS": "Weitere Details",
@@ -260,7 +267,8 @@
       "ICON_NAME": "Name eines Icons aus der PrimeNG Icon Bibliothek. Wird z.b. als Default bei Menüeinträgen benutzt",
       "NOTE": "Notiz",
       "EXPOSED_MODULE": "Exposed Module",
-      "ENDPOINTS": "UI Endpunkte",
+      "ENDPOINTS.NAME": "Name des UI-Endpunkts",
+      "ENDPOINTS.PATH": "Pfad zum UI-Endpunkt",
       "GROUP.REMOTE_MODULE": "Details des zu verwendeten Remote Moduls",
       "GROUP.LOCAL_MODULE": "Details der lokalen Registrierung des Moduls",
       "GROUP.INTERNALS": "Weitere Details der Objektverwaltung und Verwendung",

src/assets/i18n/en.json

@@ -67,8 +67,8 @@
       "MS.HEADER": "Edit Microservice",
       "APP": {
         "TOOLTIP": "Edit App properties",
-        "OK": "Das App wurde erfolgreich geändert",
-        "NOK": "Ein Fehler ist aufgetreten. Das App wurde nicht geändert."
+        "OK": "The Application was changed successfully",
+        "NOK": "An error has occurred. The Application was not changed."
       },
       "PRODUCT": {
         "HEADER": "Edit Application",
@@ -101,6 +101,10 @@
       "VIEW_MODE_LIST": "List view",
       "VIEW_MODE_TABLE": "Table view"
     },
+    "TABLE": {
+      "ADD_ROW": "Add row",
+      "ADD.TOOLTIP": "Add a new row to the table"
+    },
     "SEARCH": {
       "NOT_FOUND": "No data found",
       "WILDCARD_SUPPORT": " Wildcards: ?, *",
@@ -198,10 +202,12 @@
       "APPS": "Components",
       "INTERN": "Internal",
       "PROPERTIES": "Properties",
+      "ENDPOINTS": "UI Endpoints",
       "TOOLTIPS": {
         "APPS": "Manage Components",
         "INTERN": "Internal properties",
-        "PROPERTIES": "Manage Properties"
+        "PROPERTIES": "Manage Properties",
+        "ENDPOINTS": "Manage UI Endpoints"
       }
     },
     "COMPONENTS": {
@@ -236,7 +242,8 @@
     "ICON_NAME": "Icon Name",
     "NOTE": "Note",
     "EXPOSED_MODULE": "Exposed Module",
-    "ENDPOINTS": "UI Endpoints",
+    "ENDPOINTS.NAME": "Name",
+    "ENDPOINTS.PATH": "Path",
     "GROUP.REMOTE_MODULE": "Remote Module",
     "GROUP.LOCAL_MODULE": "Module Management Details",
     "GROUP.INTERNALS": "More Details",
@@ -260,7 +267,8 @@
       "ICON_NAME": "Name of the icons from the PrimeNG icon library. Used, for example, as a default icon for menu entries",
       "NOTE": "Note",
       "EXPOSED_MODULE": "Exposed Module",
-      "ENDPOINTS": "UI Endpoints",
+      "ENDPOINTS.NAME": "Name of the UI Endpoint",
+      "ENDPOINTS.PATH": "Path to the UI Endpoint",
       "GROUP.REMOTE_MODULE": "Details of the remote module to be used",
       "GROUP.LOCAL_MODULE": "Details of the module's local registration",
       "GROUP.INTERNALS": "More details of object management and usage",