Skip to content

Commit 3665e71

Browse files
rrogodarrogoda
authored
feat: develop example content for openmfp update (#98)
1 parent 7ebeec5 commit 3665e71

File tree

16 files changed

+319
-187
lines changed

16 files changed

+319
-187
lines changed

‎.github/workflows/pipeline.yaml‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,9 @@ on:
44
branches:
55
- main
66
pull_request:
7-
branches:
8-
- main
7+
types:
8+
- opened
9+
- synchronize
910

1011
concurrency:
1112
group: ${{ github.ref }}

‎CONTRIBUTING.md‎

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -48,12 +48,22 @@ kubectl patch deployment openmfp-example-content -n openmfp-system --type='json'
4848
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"}]' && \
4949
kubectl rollout restart deployment openmfp-example-content -n openmfp-system && \
5050
kubectl rollout status deployment openmfp-example-content -n openmfp-system && \
51-
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)'"}]' && \
52-
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)'"}]'
51+
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)'"}]' && \
52+
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)'"}]'
5353
```
5454

5555
**Troubleshooting**
56-
- 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.
56+
- If you encounter error like this:
57+
```
58+
ERROR: command "docker save -o /tmp/images-tar1234567890/images.tar example-content:latest" failed with error: exit status 1
59+
```
60+
Use this two commands and try again
61+
```sh
62+
mkdir $HOME/tmp/
63+
export TMPDIR=$HOME/tmp/
64+
```
65+
66+
- 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.
5767

5868
## Issues
5969
We use GitHub issues to track bugs. Please ensure your description is

‎Dockerfile‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ RUN npm run build-prod
1010
RUN npm run build:wc
1111

1212
FROM nginx:alpine
13-
COPY --from=build /app/frontend/dist/ /usr/share/nginx/html/ui/
14-
COPY --from=build /app/frontend/dist-wc/ /usr/share/nginx/html/wc/
13+
COPY --from=build /app/frontend/dist/ /usr/share/nginx/html/ui/example-content/ui/
14+
COPY --from=build /app/frontend/dist-wc/ /usr/share/nginx/html/ui/example-content/wc/
1515
COPY nginx.conf /etc/nginx/nginx.conf
1616
EXPOSE 8080

‎frontend/angular.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@
2020
"outputPath": "dist",
2121
"index": "projects/ui/src/index.html",
2222
"main": "projects/ui/src/main.ts",
23+
"baseHref": "/ui/example-content/ui/",
2324
"polyfills": [
2425
"zone.js"
2526
],
@@ -139,6 +140,7 @@
139140
"options": {
140141
"outputPath": "dist-wc",
141142
"index": "",
143+
"baseHref": "/ui/example-content/wc/",
142144
"main": "projects/wc/src/main.ts",
143145
"polyfills": "projects/wc/src/polyfills.ts",
144146
"tsConfig": "projects/wc/tsconfig.app.json",

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

Lines changed: 69 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
2-
"name": "examples-overview",
2+
"name": "examples-overview-ui",
33
"creationTimestamp": "",
44
"luigiConfigFragment": {
55
"data": {
@@ -10,25 +10,77 @@
1010
"order": 1,
1111
"defineEntity": {
1212
"id": "main"
13+
}
14+
},
15+
{
16+
"entityType": "main",
17+
"pathSegment": "overview",
18+
"label": "Overview of Examples",
19+
"icon": "home",
20+
"order": 1,
21+
"defineEntity": {
22+
"id": "overview"
1323
},
14-
"children": [
15-
{
16-
"pathSegment": "overview",
17-
"label": "Examples overview",
18-
"icon": "home",
19-
"defineEntity": {
20-
"id": "overview"
21-
},
22-
"compound": {
23-
"renderer": {
24-
"use": "grid",
25-
"config": {
26-
"columns": "1fr 1fr 1fr 1fr"
27-
}
28-
}
24+
"compound": {
25+
"renderer": {
26+
"use": "grid",
27+
"config": {
28+
"columns": "1fr 1fr 1fr 1fr"
2929
}
3030
}
31-
]
31+
}
32+
},
33+
{
34+
"entityType": "main",
35+
"pathSegment": "entity-definition",
36+
"label": "Entity Definition",
37+
"hideFromNav": true,
38+
"order": 2,
39+
"defineEntity": {
40+
"id": "entity-definition"
41+
},
42+
"category": {
43+
"label": "Showcase of Examples",
44+
"icon": "attachment-html",
45+
"collapsible": true
46+
},
47+
"compound": {
48+
}
49+
},
50+
{
51+
"entityType": "main",
52+
"pathSegment": "micro-frontend-iframe",
53+
"label": "Micro Frontend Iframe",
54+
"hideFromNav": true,
55+
"order": 3,
56+
"virtualTree": true,
57+
"navigationContext": "showcase",
58+
"urlSuffix": "/ui/example-content/ui/#/showcase",
59+
"loadingIndicator": {
60+
"enabled": false
61+
},
62+
"category": {
63+
"label": "Showcase of Examples",
64+
"icon": "attachment-html",
65+
"collapsible": true
66+
}
67+
},
68+
{
69+
"entityType": "main",
70+
"pathSegment": "web-component-integration",
71+
"label": "Web Component Integration",
72+
"hideFromNav": true,
73+
"order": 4,
74+
"defineEntity": {
75+
"id": "web-component-integration"
76+
},
77+
"category": {
78+
"label": "Showcase of Examples",
79+
"icon": "attachment-html",
80+
"collapsible": true
81+
},
82+
"compound": {
83+
}
3284
}
3385
]
3486
}

‎frontend/projects/ui/src/assets/showcase-examples/firstExample.json‎

Lines changed: 0 additions & 51 deletions
This file was deleted.

‎frontend/projects/ui/src/assets/showcase-examples/fourthExample.json‎

Lines changed: 0 additions & 34 deletions
This file was deleted.

‎frontend/projects/ui/src/assets/showcase-examples/secondExample.json‎

Lines changed: 0 additions & 35 deletions
This file was deleted.

‎frontend/projects/ui/src/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<head>
44
<meta charset="utf-8">
55
<title>ExampleContent</title>
6-
<base href="./">
6+
<base href="/ui/example-content/ui/">
77
<meta name="viewport" content="width=device-width, initial-scale=1">
88
<link rel="icon" type="image/x-icon" href="favicon.ico">
99
</head>

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

Lines changed: 38 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,47 @@
1+
<div class="title">
2+
<ui5-title level="H3">{{title}}</ui5-title>
3+
</div>
14
<div class="showcase-cards">
5+
<ui5-bar design="Header">
6+
<ui5-button class="button" design="Positive" (ui5Click)="toggleShowAllCodes()" slot="endContent">
7+
<div class="button-content">
8+
@if(showAllCode){
9+
<ui5-icon design="Positive" name="detail-less"></ui5-icon> <div class="text">Hide All Code Examples</div>
10+
} @else {
11+
<ui5-icon design="Positive" name="detail-more"></ui5-icon> <div class="text">Show All Code Examples</div>
12+
}
13+
</div>
14+
</ui5-button>
15+
</ui5-bar>
16+
217
@for (item of showcaseItems; track $index) {
318
<ui5-card class="showcase-card">
419
<ui5-panel fixed>
520
<div class="header">
6-
<ui5-title class="title" level="H4">{{item.header}}</ui5-title>
7-
@if(item.linkToExample) {
8-
<ui5-button class="button" design="Emphasized" (ui5Click)="show(item.linkToExample)">Show Example</ui5-button>
9-
}
21+
<ui5-title class="headline" level="H4">{{item.header}}</ui5-title>
22+
<div class="buttons">
23+
@if(item.linkToExample){
24+
<ui5-button class="button" design="Emphasized" (ui5Click)="showExample(item)">
25+
<div class="button-content">
26+
<ui5-icon design="Contrast" name="example"></ui5-icon> <div class="text">Show Example</div>
27+
</div>
28+
</ui5-button>
29+
}
30+
<ui5-button class="button" design="Positive" (ui5Click)="toggleCode(item)">
31+
<div class="button-content">
32+
@if(!!item.isCodeVisible){
33+
<ui5-icon design="Positive" name="hide"></ui5-icon> <div class="text">Hide Code</div>
34+
} @else {
35+
<ui5-icon design="Positive" name="show"></ui5-icon> <div class="text">Show Code</div>
36+
}
37+
</div>
38+
</ui5-button>
39+
</div>
1040
</div>
11-
<ui5-label class="description">{{item.label}}</ui5-label>
12-
<ui5-text class="content">{{item.example}}</ui5-text>
41+
<div class="panel description" [innerHTML]="item.label | safeHtml"></div>
42+
@if(!!item.isCodeVisible){
43+
<ui5-text class="panel content">{{item.example}}</ui5-text>
44+
}
1345
</ui5-panel>
1446
</ui5-card>
1547
}

0 commit comments

Comments
 (0)