chore(doop): migrate to vite/vitest

.github/workflows/deploy-pr-preview.yaml

@@ -96,7 +96,21 @@ jobs:
       - name: Build DOOP if changes detected
         if: github.event.action != 'closed' && contains(needs.run-detect-changes.outputs.changes, 'doop')
         run: |
-          ./.github/scripts/build-app.sh
+          # collect the necessary information
+          entry_file=$(jq -r '.module // .main' $PACKAGE_PATH/package.json)
+          build_folder=$(dirname $entry_file)
+          package_name=$(jq -r '.name' $PACKAGE_PATH/package.json)
+
+          # Run build using turbo
+          npx turbo run build --filter $package_name
+          npx turbo run build:static --filter $package_name
+
+          # Copy build folder to deploy path
+          mkdir -p "$DEPLOY_PATH/$TARGET_FOLDER"
+          cp -r "$PACKAGE_PATH/$build_folder/." "$DEPLOY_PATH/$TARGET_FOLDER"
+
+          # Generate appProps.json
+          echo "$APP_PROPS_BASE64" | base64 -d > "$DEPLOY_PATH/$TARGET_FOLDER/appProps.json"
         env:
           PACKAGE_PATH: apps/doop
           TARGET_FOLDER: doop

.github/workflows/shared-slack-notification.yaml

@@ -0,0 +1,53 @@
+name: "Slack Notification"
+description: "Send a Slack notification"
+inputs:
+  title:
+    description: "Title for the Slack notification"
+    required: true
+  body:
+    description: "Body of the Slack notification"
+    required: true
+
+runs:
+  using: "composite"
+  steps:
+    - name: Send a Slack notification if a publish happens
+      uses: slackapi/[email protected]
+      with:
+        payload: |
+          {
+            "blocks": [
+              {
+                "type": "context",
+                "elements": [
+                  {
+                    "type": "image",
+                    "image_url": "https://raw.githubusercontent.com/cloudoperators/juno/main/assets/logos/JUNO_logo_slack.png",
+                    "alt_text": "cloudoperators/juno"
+                  },
+                  {
+                    "type": "mrkdwn",
+                    "text": "${{ inputs.title }}"
+                  }
+                ]
+              },
+              {
+                "type": "rich_text",
+                "elements": [
+                  {
+                    "type": "rich_text_preformatted",
+                    "elements": [
+                      {
+                        "type": "text",
+                        "text": "${{ inputs.body }}"
+                      }
+                    ],
+                    "border": 0
+                  }
+                ]
+              }
+            ]
+          }
+      env:
+        SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_URL }}
+        SLACK_WEBHOOK_TYPE: INCOMING_WEBHOOK

apps/doop/README.md

@@ -4,3 +4,65 @@
 [![Built with Juno](https://cloudoperators.github.io/juno/built-with-juno.svg)](https://github.com/cloudoperators/juno)
 
 This UI offers a dashboard to aggregate all policy violations reported by the Gatekeeper instances in each cluster.
+
+# Usage
+
+## Standalone Mode
+
+To create a static, runnable build, execute the following commands:
+
+```bash
+cd apps/doop
+npx turbo build:static
+```
+
+This will generate an `index.html` file along with the necessary assets in the dist folder. You’ll need to copy a `appProps.json` file containing the required props into the dist folder.
+
+## As a Micro Frontend (MFE)
+
+To build a library version for dynamic import, use the following commands:
+
+```bash
+cd apps/doop
+npx turbo build
+```
+
+This will create a build folder with all assets. You can host this folder and load it as an MFE using dynamic import:
+
+```html
+<div id="root"></div>
+
+<script type="module">
+  import("PATH_TO_HOST/doop/build/index.js").then((app) => {
+    app.mount(document.getElementById("root"), { props: /* PROPS JSON */ })
+  })
+</script>
+```
+
+## Development Mode
+
+First, create an `appProps.json` file in the root directory of the application (apps/doop), using appProps.template.json as a reference. Customize the file with the necessary properties. Once completed, run the following commands:
+
+```bash
+cd apps/doop
+npx turbo dev
+```
+
+### Testing
+
+```bash
+cd apps/doop
+npx turbo test
+```
+
+## App Props
+
+These are the customizable application properties (appProps) that you can define in your appProps.json file:
+
+- **id** (optional): Use unique IDs if you need to instantiate multiple instances of the app on the same page.
+- **theme** (optional): Overrides the default theme. Acceptable values are `"theme-light"` or `"theme-dark"` (default).
+- **displayName** (optional): The name to be displayed in the app's header.
+- **apiEndpoint** (required): The URL of the API endpoint the app will interact with.
+- **embedded** (optional): Set to `true` if the app will be embedded within another app or page. When `true`, the app will not display the header or footer, rendering only the content. Default is `false`.
+- **isMock** (optional): Use mocked data for development purposes. Default is `false`.
+- **showDebugSeverities** (optional): Display debug severity levels in the log. Default is `false`.

apps/doop/appProps.template.json

@@ -0,0 +1,9 @@
+{
+  "id": "app-instance-1",
+  "theme": "theme-dark",
+  "displayName": "MyApp",
+  "apiEndpoint": "https://api.example.com/v1",
+  "embedded": false,
+  "isMock": true,
+  "showDebugSeverities": false
+}