feat: First iteration of example content for openmfp (#87)

rrogoda · web-flow · commit ab81023994df · 2025-02-07T16:29:08.000Z
diff --git a/frontend/package.json b/frontend/package.json
@@ -4,7 +4,7 @@
   "scripts": {
     "ng": "ng",
     "start": "ng serve ui",
-    "start:wc": "ng serve wc --single-bundle --no-live-reload",
+    "start:wc": "ng serve wc --single-bundle --no-live-reload  --port=4201",
     "build": "ng build ui",
     "build:wc": "ng build wc --single-bundle --output-hashing none",
     "build-prod": "ng build ui -c production",
diff --git a/frontend/projects/ui/src/app/app.routes.ts b/frontend/projects/ui/src/app/app.routes.ts
@@ -3,8 +3,12 @@ import { CatalogComponent } from './catalog/catalog.component';
 import { CatalogItemDetailsComponent } from './catalog-item-details/catalog-item-details.component';
 import { OpenmcpComponent } from './openmcp/openmcp.component';
 import { IronCoreComponent } from './iron-core/iron-core.component';
+import { ShowcaseComponent } from './showcase/showcase.component';
+import { ShowcaseDetailsComponent } from './showcase/showcase-details/showcase-details.component';
 
 export const routes: Routes = [
+  { path: 'showcase', component: ShowcaseComponent },
+  { path: 'showcase/showcase-details', component: ShowcaseDetailsComponent },
   { path: 'global-catalog', component: CatalogComponent },
   {
     path: 'catalog-item/:catalogItemId',
diff --git a/frontend/projects/ui/src/app/showcase/showcase-details/showcase-details.component.html b/frontend/projects/ui/src/app/showcase/showcase-details/showcase-details.component.html
@@ -0,0 +1,9 @@
+<ui5-card class="card">
+  <ui5-card-header slot="header" title-text="Congratulations !"
+    subtitle-text="Click below to navigate back">
+  </ui5-card-header>
+  <div class="content">
+    <ui5-button (click)="navigate()">Click here !</ui5-button>
+  </div>
+</ui5-card>
+
diff --git a/frontend/projects/ui/src/app/showcase/showcase-details/showcase-details.component.scss b/frontend/projects/ui/src/app/showcase/showcase-details/showcase-details.component.scss
@@ -0,0 +1,8 @@
+.card {
+  width: 300px;
+}
+
+.content {
+  margin-left: 10px;
+  padding: 5px;
+}
diff --git a/frontend/projects/ui/src/app/showcase/showcase-details/showcase-details.component.ts b/frontend/projects/ui/src/app/showcase/showcase-details/showcase-details.component.ts
@@ -0,0 +1,17 @@
+import { Component } from '@angular/core';
+import { linkManager } from '@luigi-project/client';
+import { Ui5WebcomponentsModule } from '@ui5/webcomponents-ngx';
+
+@Component({
+  selector: 'app-showcase-details',
+  standalone: true,
+  imports: [Ui5WebcomponentsModule],
+  templateUrl: './showcase-details.component.html',
+  styleUrl: './showcase-details.component.scss'
+})
+export class ShowcaseDetailsComponent {
+
+  navigate() {
+    linkManager().fromContext('showcase').navigate(`/`);
+  }
+}
diff --git a/frontend/projects/ui/src/app/showcase/showcase.component.html b/frontend/projects/ui/src/app/showcase/showcase.component.html
@@ -0,0 +1,10 @@
+<ui5-card class="card">
+  <ui5-card-header slot="header" title-text="Virtualtree navigation example"
+    subtitle-text="Click below to test the navigation">
+  </ui5-card-header>
+  <div class="content">
+    <ui5-button (click)="navigate()">Click here !</ui5-button>
+  </div>
+</ui5-card>
+
+
diff --git a/frontend/projects/ui/src/app/showcase/showcase.component.scss b/frontend/projects/ui/src/app/showcase/showcase.component.scss
@@ -0,0 +1,8 @@
+.card {
+  width: 300px;
+}
+
+.content {
+  margin-left: 10px;
+  padding: 5px;
+}
diff --git a/frontend/projects/ui/src/app/showcase/showcase.component.ts b/frontend/projects/ui/src/app/showcase/showcase.component.ts
@@ -0,0 +1,17 @@
+import { Component } from '@angular/core';
+import { Ui5WebcomponentsModule } from '@ui5/webcomponents-ngx';
+import { linkManager } from '@luigi-project/client';
+
+@Component({
+  selector: 'app-showcase',
+  standalone: true,
+  imports: [Ui5WebcomponentsModule],
+  templateUrl: './showcase.component.html',
+  styleUrl: './showcase.component.scss'
+})
+export class ShowcaseComponent {
+
+  navigate() {
+    linkManager().fromContext('showcase').navigate(`/showcase-details`);
+  }
+}
diff --git a/frontend/projects/ui/src/assets/accounts.json b/frontend/projects/ui/src/assets/accounts.json
diff --git a/frontend/projects/ui/src/assets/config.json b/frontend/projects/ui/src/assets/config.json
@@ -0,0 +1,49 @@
+{
+  "name": "configuration-examples-overview",
+  "creationTimestamp": "",
+  "luigiConfigFragment": {
+    "data": {
+      "nodes": [
+        {
+          "entityType": "global",
+          "pathSegment": "home",
+          "hideFromNav": true,
+          "defineEntity": {
+            "id": "main"
+          },
+          "children": [
+            {
+              "pathSegment": "overview",
+              "label": "Configuration examples overview",
+              "icon": "home",
+              "defineEntity": {
+                "id": "overview"
+              },
+              "compound": {
+                "renderer": {
+                  "use": "grid",
+                  "config": {
+                    "columns": "1fr 1fr 1fr 1fr"
+                  }
+                }
+              }
+            }
+          ]
+        },
+        {
+          "entityType": "main.overview::compound",
+          "url": "https://luigiwebcomponents.gitlab.io/layouts/panelHeader.js",
+          "context": {
+            "border": "shadow",
+            "title": "Welcome to OpenMFP Portal",
+            "description": "Click on Show Example button to preview particular feature."
+          },
+          "layoutConfig": {
+            "row": "1",
+            "column": "1 / -1"
+          }
+        }
+      ]
+    }
+  }
+}
diff --git a/frontend/projects/ui/src/assets/showcase-examples/firstExample.json b/frontend/projects/ui/src/assets/showcase-examples/firstExample.json
@@ -0,0 +1,51 @@
+{
+  "name": "entity-definition-example",
+  "creationTimestamp": "",
+  "luigiConfigFragment": {
+    "data": {
+      "nodes": [
+        {
+          "entityType": "main",
+          "pathSegment": "firstExample",
+          "hideFromNav": true,
+          "defineEntity": {
+            "id": "first-example"
+          },
+          "compound": {
+            "renderer": {
+              "use": "grid",
+              "config": {
+                "columns": "1fr 1fr 1fr 1fr"
+              }
+            }
+          }
+        },
+        {
+          "entityType": "main.first-example::compound",
+          "url": "https://luigiwebcomponents.gitlab.io/layouts/panelHeader.js",
+          "context": {
+            "border": "shadow",
+            "title": "{{firstExampleTitle}}",
+            "description": "{{firstExampleDescription}}"
+          }
+        }
+      ],
+      "texts": [
+        {
+          "locale": "",
+          "textDictionary": {
+            "firstExampleTitle": "Definition of an Entity",
+            "firstExampleDescription": "Entity is basic building block of configuration."
+          }
+        },
+        {
+          "locale": "en",
+          "textDictionary": {
+            "firstExampleTitle": "Definition of an Entity",
+            "firstExampleDescription": "Entity is basic building block of configuration."
+          }
+        }
+      ]
+    }
+  }
+}
diff --git a/frontend/projects/ui/src/assets/showcase-examples/fourthExample.json b/frontend/projects/ui/src/assets/showcase-examples/fourthExample.json
@@ -0,0 +1,34 @@
+{
+  "name": "web-component-integration-example",
+  "creationTimestamp": "",
+  "luigiConfigFragment": {
+    "data": {
+      "nodes": [
+        {
+          "entityType": "main",
+          "pathSegment": "fourthExample",
+          "hideFromNav": true,
+          "defineEntity": {
+            "id": "fourth-example"
+          },
+          "compound": {
+          }
+        },
+        {
+          "entityType": "main.fourth-example::compound",
+          "urlSuffix": "/ui/example-content/main.js#account-overview",
+          "context": {
+            "title": "Showcase"
+          },
+          "layoutConfig": {
+            "row": "1",
+            "column": "1 / -1"
+          },
+          "webcomponent": {
+            "selfRegistered": true
+          }
+        }
+      ]
+    }
+  }
+}
diff --git a/frontend/projects/ui/src/assets/showcase-examples/secondExample.json b/frontend/projects/ui/src/assets/showcase-examples/secondExample.json
@@ -0,0 +1,35 @@
+{
+  "name": "micro-frontend-iframe-example",
+  "creationTimestamp": "",
+  "luigiConfigFragment": {
+    "data": {
+      "nodes": [
+        {
+          "entityType": "main",
+          "pathSegment": "secondExample",
+          "virtualTree": true,
+          "navigationContext": "showcase",
+          "urlSuffix": "/ui/example-content/index.html#/showcase",
+          "loadingIndicator": {
+            "enabled": false
+          },
+          "requiredIFramePermissions": {
+            "sandbox": [
+              "allow-forms",
+              "allow-modals",
+              "allow-popups",
+              "allow-popups-to-escape-sandbox",
+              "allow-same-origin",
+              "allow-scripts",
+              "allow-download"
+            ],
+            "allow": [
+              "clipboard-read",
+              "clipboard-write"
+            ]
+          }
+        }
+      ]
+    }
+  }
+}
diff --git a/frontend/projects/wc/src/app/app.module.ts b/frontend/projects/wc/src/app/app.module.ts
@@ -7,6 +7,7 @@ import { DataChartComponent } from './charts/data-chart/data-chart.component';
 import { DoughnutChartComponent } from './charts/doughnut-chart/doughnut-chart.component';
 import { EnabledCapabilitiesComponent } from './enabled-capabilities/enabled-capabilities.component';
 import { RootOverviewComponent } from './root-overview/root-overview.component';
+import { ShowcaseComponent } from './showcase/showcase.component';
 
 @NgModule({
   imports: [
@@ -17,6 +18,7 @@ import { RootOverviewComponent } from './root-overview/root-overview.component';
     DoughnutChartComponent,
     EnabledCapabilitiesComponent,
     RootOverviewComponent,
+    ShowcaseComponent,
   ],
 })
 export class AppModule implements DoBootstrap {
@@ -37,6 +39,7 @@ export class AppModule implements DoBootstrap {
     const accountOverviewComponent = createCustomElement(AccountOverviewComponent, {injector: this.injector});
     const rootOverviewComponent = createCustomElement(RootOverviewComponent, {injector: this.injector});
     const enabledCapabilitiesComponent = createCustomElement(EnabledCapabilitiesComponent, {injector: this.injector});
+    const showcaseComponent = createCustomElement(ShowcaseComponent, {injector: this.injector});
 
     try {
       this.registerWebcomponent(dataChartComponent, 'chart');
@@ -45,6 +48,7 @@ export class AppModule implements DoBootstrap {
       this.registerWebcomponent(accountOverviewComponent, 'account-overview');
       this.registerWebcomponent(rootOverviewComponent, 'root-overview');
       this.registerWebcomponent(enabledCapabilitiesComponent, 'enabled-capabilities');
+      this.registerWebcomponent(showcaseComponent, 'showcase');
     } catch (e) {
       if (!customElements.get('data-chart')) {
         customElements.define('data-chart', dataChartComponent);
diff --git a/frontend/projects/wc/src/app/showcase/showcase.component.html b/frontend/projects/wc/src/app/showcase/showcase.component.html
@@ -0,0 +1,16 @@
+<div class="showcase-cards">
+  @for (item of showcaseItems; track $index) {
+    <ui5-card class="showcase-card">
+      <ui5-panel fixed>
+        <div class="header">
+          <ui5-title class="title" level="H4">{{item.header}}</ui5-title>
+          @if(item.linkToExample) {
+            <ui5-button class="button" design="Emphasized" (ui5Click)="show(item.linkToExample)">Show Example</ui5-button>
+          }
+        </div>
+        <ui5-label class="description">{{item.label}}</ui5-label>
+        <ui5-text class="content">{{item.example}}</ui5-text>
+      </ui5-panel>
+    </ui5-card>
+  }
+</div>
diff --git a/frontend/projects/wc/src/app/showcase/showcase.component.scss b/frontend/projects/wc/src/app/showcase/showcase.component.scss
@@ -0,0 +1,35 @@
+.showcase-cards {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+  margin-top: 1rem;
+}
+
+.showcase-card {
+  display: block;
+
+  .description {
+    margin: 10px;
+  }
+
+  .content {
+    white-space: pre-wrap;
+    word-spacing: 4px;
+  }
+}
+
+.header {
+  padding: 10px;
+  display: flex;
+
+  .title {
+    padding-top: 5px;
+  }
+
+  .button {
+    margin-left: 30px;
+    padding: 5px;
+    border-radius: 5px;
+  }
+}
+
diff --git a/frontend/projects/wc/src/app/showcase/showcase.component.ts b/frontend/projects/wc/src/app/showcase/showcase.component.ts
diff --git a/frontend/projects/wc/src/assets/config.json b/frontend/projects/wc/src/assets/config.json
diff --git a/package.json b/package.json
