feat: develop example content for openmfp update

.github/workflows/pipeline.yaml

@@ -4,8 +4,9 @@ on:
     branches:
       - main
   pull_request:
-    branches:
-      - main
+    types:
+      - opened
+      - synchronize
 
 concurrency:
   group: ${{ github.ref }}

CONTRIBUTING.md

@@ -48,12 +48,22 @@ kubectl patch deployment openmfp-example-content -n openmfp-system --type='json'
 kubectl patch deployment openmfp-example-content -n openmfp-system --type='json' -p='[{"op": "replace", "path": "/spec/template/spec/containers/0/image", "value": "example-content:latest"}]' && \
 kubectl rollout restart deployment openmfp-example-content -n openmfp-system && \
 kubectl rollout status deployment openmfp-example-content -n openmfp-system && \
-kubectl patch contentconfiguration openmfp-example-content-ui -n openmfp-system --type='json' -p='[{"op": "replace", "path": "/spec/remoteConfiguration/internalUrl", "value": "http://openmfp-example-content.openmfp-system.svc.cluster.local:8080/ui/assets/config.json?r='$(date +%s%3N)'"}]' && \
-kubectl patch contentconfiguration openmfp-example-content-wc -n openmfp-system --type='json' -p='[{"op": "replace", "path": "/spec/remoteConfiguration/internalUrl", "value": "http://openmfp-example-content.openmfp-system.svc.cluster.local:8080/wc/assets/config.json?r='$(date +%s%3N)'"}]'
+kubectl patch contentconfiguration openmfp-example-content-ui -n openmfp-system --type='json' -p='[{"op": "replace", "path": "/spec/remoteConfiguration/internalUrl", "value": "http://openmfp-example-content.openmfp-system.svc.cluster.local:8080/ui/example-content/ui/assets/config.json?r='$(date +%s%3N)'"}]' && \
+kubectl patch contentconfiguration openmfp-example-content-wc -n openmfp-system --type='json' -p='[{"op": "replace", "path": "/spec/remoteConfiguration/internalUrl", "value": "http://openmfp-example-content.openmfp-system.svc.cluster.local:8080/ui/example-content/wc/assets/config.json?r='$(date +%s%3N)'"}]'
 ```
 
 **Troubleshooting**
-- If you encounter issues when starting the pod with the loaded image you [this issue](https://github.com/kubernetes-sigs/kind/issues?q=is%3Aissue%20state%3Aopen%20load%20image). A way to circumnvent this is to disable `Use containerd for pulling and storing images` in the docker settings.
+- If you encounter error like this: 
+```
+    ERROR: command "docker save -o /tmp/images-tar1234567890/images.tar example-content:latest" failed with error: exit status 1
+```
+   Use this two commands and try again
+```sh
+    mkdir $HOME/tmp/
+    export TMPDIR=$HOME/tmp/ 
+```
+
+- When initiating a pod with a pre-loaded Docker image, you might encounter [this issue](https://github.com/kubernetes-sigs/kind/issues?q=is%3Aissue%20state%3Aopen%20load%20image). To bypass this, disable the `Use containerd for pulling and storing images` option in the Docker settings.
 
 ## Issues
 We use GitHub issues to track bugs. Please ensure your description is

Dockerfile

@@ -10,7 +10,7 @@ RUN npm run build-prod
 RUN npm run build:wc
 
 FROM nginx:alpine
-COPY --from=build /app/frontend/dist/ /usr/share/nginx/html/ui/
-COPY --from=build /app/frontend/dist-wc/ /usr/share/nginx/html/wc/
+COPY --from=build /app/frontend/dist/ /usr/share/nginx/html/ui/example-content/ui/
+COPY --from=build /app/frontend/dist-wc/ /usr/share/nginx/html/ui/example-content/wc/
 COPY nginx.conf /etc/nginx/nginx.conf
 EXPOSE 8080

frontend/angular.json

@@ -20,6 +20,7 @@
             "outputPath": "dist",
             "index": "projects/ui/src/index.html",
             "main": "projects/ui/src/main.ts",
+            "baseHref": "/ui/example-content/ui/",
             "polyfills": [
               "zone.js"
             ],
@@ -139,6 +140,7 @@
           "options": {
             "outputPath": "dist-wc",
             "index": "",
+            "baseHref": "/ui/example-content/wc/",
             "main": "projects/wc/src/main.ts",
             "polyfills": "projects/wc/src/polyfills.ts",
             "tsConfig": "projects/wc/tsconfig.app.json",

frontend/projects/ui/src/assets/config.json

@@ -1,5 +1,5 @@
 {
-  "name": "examples-overview",
+  "name": "examples-overview-ui",
   "creationTimestamp": "",
   "luigiConfigFragment": {
     "data": {
@@ -10,25 +10,77 @@
           "order": 1,
           "defineEntity": {
             "id": "main"
+          }
+        },
+        {
+          "entityType": "main",
+          "pathSegment": "overview",
+          "label": "Overview of Examples",
+          "icon": "home",
+          "order": 1,
+          "defineEntity": {
+            "id": "overview"
           },
-          "children": [
-            {
-              "pathSegment": "overview",
-              "label": "Examples overview",
-              "icon": "home",
-              "defineEntity": {
-                "id": "overview"
-              },
-              "compound": {
-                "renderer": {
-                  "use": "grid",
-                  "config": {
-                    "columns": "1fr 1fr 1fr 1fr"
-                  }
-                }
+          "compound": {
+            "renderer": {
+              "use": "grid",
+              "config": {
+                "columns": "1fr 1fr 1fr 1fr"
               }
             }
-          ]
+          }
+        },
+        {
+          "entityType": "main",
+          "pathSegment": "entity-definition",
+          "label": "Entity Definition",
+          "hideFromNav": true,
+          "order": 2,
+          "defineEntity": {
+            "id": "entity-definition"
+          },
+          "category": {
+            "label": "Showcase of Examples",
+            "icon": "attachment-html",
+            "collapsible": true
+          },
+          "compound": {
+          }
+        },
+        {
+          "entityType": "main",
+          "pathSegment": "micro-frontend-iframe",
+          "label": "Micro Frontend Iframe",
+          "hideFromNav": true,
+          "order": 3,
+          "virtualTree": true,
+          "navigationContext": "showcase",
+          "urlSuffix": "/ui/example-content/ui/#/showcase",
+          "loadingIndicator": {
+            "enabled": false
+          },
+          "category": {
+            "label": "Showcase of Examples",
+            "icon": "attachment-html",
+            "collapsible": true
+          }
+        },
+        {
+          "entityType": "main",
+          "pathSegment": "web-component-integration",
+          "label": "Web Component Integration",
+          "hideFromNav": true,
+          "order": 4,
+          "defineEntity": {
+            "id": "web-component-integration"
+          },
+          "category": {
+            "label": "Showcase of Examples",
+            "icon": "attachment-html",
+            "collapsible": true
+          },
+          "compound": {
+          }
         }
       ]
     }

frontend/projects/ui/src/index.html

@@ -3,7 +3,7 @@
 <head>
   <meta charset="utf-8">
   <title>ExampleContent</title>
-  <base href="./">
+  <base href="/ui/example-content/ui/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
 </head>

frontend/projects/wc/src/app/showcase/showcase.component.html

@@ -1,15 +1,47 @@
+<div class="title">
+  <ui5-title level="H3">{{title}}</ui5-title>
+</div>
 <div class="showcase-cards">
+  <ui5-bar design="Header">
+    <ui5-button class="button" design="Positive" (ui5Click)="toggleShowAllCodes()" slot="endContent">
+      <div class="button-content">
+        @if(showAllCode){
+          <ui5-icon design="Positive" name="detail-less"></ui5-icon> <div class="text">Hide All Code Examples</div>
+        } @else {
+          <ui5-icon design="Positive" name="detail-more"></ui5-icon> <div class="text">Show All Code Examples</div>
+        }
+      </div>
+    </ui5-button>
+  </ui5-bar>
+
   @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>
-          }
+          <ui5-title class="headline" level="H4">{{item.header}}</ui5-title>
+          <div class="buttons">
+            @if(item.linkToExample){
+              <ui5-button class="button" design="Emphasized" (ui5Click)="showExample(item)">
+                <div class="button-content">
+                  <ui5-icon design="Contrast" name="example"></ui5-icon> <div class="text">Show Example</div>
+                </div>
+              </ui5-button>
+            }
+            <ui5-button class="button" design="Positive" (ui5Click)="toggleCode(item)">
+              <div class="button-content">
+                @if(!!item.isCodeVisible){
+                  <ui5-icon design="Positive" name="hide"></ui5-icon> <div class="text">Hide Code</div>
+                } @else {
+                  <ui5-icon design="Positive" name="show"></ui5-icon> <div class="text">Show Code</div>
+                }
+              </div>
+            </ui5-button>
+          </div>
         </div>
-        <ui5-label class="description">{{item.label}}</ui5-label>
-        <ui5-text class="content">{{item.example}}</ui5-text>
+        <div class="panel description" [innerHTML]="item.label | safeHtml"></div>
+        @if(!!item.isCodeVisible){
+          <ui5-text class="panel content">{{item.example}}</ui5-text>
+        }
       </ui5-panel>
     </ui5-card>
   }