feat: add playwright skeleton

.env

@@ -1,3 +1,3 @@
-CONSOLE_IMAGE=quay.io/securesign/rhtas-console@sha256:75966d60ed709af33efd48c53b96ea7b2fcd4608f90ccc56885bf224e34b55f5
-CONSOLE_UI_IMAGE=quay.io/securesign/rhtas-console-ui@sha256:c0b0b2d76548c05efadb2425baf93609cf6c40180f170cb531fbb7689a91db31
-CONSOLE_DB_IMAGE=registry.redhat.io/rhel9/mariadb-105@sha256:050dd5a7a32395b73b8680570e967e55050b152727412fdd73a25d8816e62d53
+CONSOLE_IMAGE=ghcr.io/securesign/rhtas-console:latest
+CONSOLE_UI_IMAGE=ghcr.io/securesign/rhtas-console-ui:latest
+CONSOLE_DB_IMAGE=docker.io/library/mariadb:10.5

.github/actions/start-console/action.yml

@@ -0,0 +1,81 @@
+name: Start console
+description: Start console using docker compose.
+inputs:
+  ui_image:
+    description: image uri for the ui (ie. ghcr.io/<namespace>/<image-name>:<tag>)
+    type: string
+    required: false
+    default: ""
+  server_image:
+    description: image uri for the server (ie. ghcr.io/<namespace>/<image-name>:<tag>)
+    type: string
+    required: false
+    default: ""
+  server_db_image:
+    description: image uri for server-postgres (ie. ghcr.io/<namespace>/<image-name>:<tag>)
+    type: string
+    required: false
+    default: ""
+  playwright_version:
+    description: version of the playwright image to run
+    type: string
+    required: false
+    default: ""
+outputs:
+  server_port:
+    description: Port where the server is running
+    value: ${{ steps.set-output.outputs.server_port }}
+  ui_port:
+    description: Port where the UI is running
+    value: ${{ steps.set-output.outputs.ui_port }}
+  playwright_port:
+    description: Port where the UI is running
+    value: ${{ steps.set-output.outputs.playwright_port }}
+runs:
+  using: "composite"
+  steps:
+    - name: Start console
+      working-directory: ${{ github.action_path }}/../../..
+      shell: bash
+      run: |
+        opts=""
+
+        if [ -n "${{ inputs.server_image }}" ]; then
+          opts="${opts} CONSOLE_IMAGE=${{ inputs.server_image }}"
+        fi
+        if [ -n "${{ inputs.ui_image }}" ]; then
+          opts="${opts} CONSOLE_UI_IMAGE=${{ inputs.ui_image }}"
+        fi
+        if [ -n "${{ inputs.server_db_image }}" ]; then
+          opts="${opts} POSTGRESQL_IMAGE=${{ inputs.server_db_image }}"
+        fi
+
+        if [ -n "${{ inputs.playwright_version }}" ]; then
+          opts="${opts} PLAYWRIGHT_VERSION=${{ inputs.playwright_version }}"
+        fi
+
+        echo "opts: $opts"
+
+        eval "${opts} docker compose up -d"
+
+    - name: Wait for services to be ready
+      shell: bash
+      run: |
+        # Wait for backend
+        until curl -s http://localhost:8087/healthz | jq -e '.status == "ok"' >/dev/null 2>&1; do
+          echo "Waiting for healthy service response on port 8087..."
+          sleep 2
+        done
+
+        # Wait for ui
+        until curl -s http://localhost:8088 | grep -qi "<html"; do
+          echo "Waiting for HTML page on port 8088..."
+          sleep 2
+        done
+
+    - id: set-output
+      shell: bash
+      run: |
+        echo "server_port=8087" >> $GITHUB_OUTPUT
+        echo "ui_port=8088" >> $GITHUB_OUTPUT
+        echo "playwright_port=5000" >> $GITHUB_OUTPUT

.github/workflows/ci-e2e-template.yaml

@@ -0,0 +1,147 @@
+name: Run e2e RHTAS Console CI tests
+
+on:
+  workflow_call:
+    inputs:
+      artifact:
+        description: |
+          The name of the component being tested, ie server etc.
+          Must correspond to an artifact storing the custom built image, named <artifact>,
+          and should contain the file <artifact>.tar inside.
+        required: false
+        type: string
+      ui_image:
+        description: image uri for the ui (ie. ghcr.io/<namespace>/<image-name>:<tag>)
+        type: string
+        required: false
+        default: ""
+      server_image:
+        description: image uri for the server (ie. ghcr.io/<namespace>/<image-name>:<tag>)
+        type: string
+        required: false
+        default: ""
+      server_db_image:
+        description: image uri for server-postgres (ie. ghcr.io/<namespace>/<image-name>:<tag>)
+        type: string
+        required: false
+        default: ""
+  workflow_dispatch:
+    inputs:
+      artifact:
+        description: |
+          The name of the component being tested, ie server etc.
+          Must correspond to an artifact storing the custom built image, named <artifact>,
+          and should contain the file <artifact>.tar inside.
+        required: false
+        type: string
+      ui_image:
+        description: image uri for the ui (ie. ghcr.io/<namespace>/<image-name>:<tag>)
+        type: string
+        required: false
+        default: ""
+      server_image:
+        description: image uri for the server (ie. ghcr.io/<namespace>/<image-name>:<tag>)
+        type: string
+        required: false
+        default: ""
+      server_db_image:
+        description: image uri for server-postgres (ie. ghcr.io/<namespace>/<image-name>:<tag>)
+        type: string
+        required: false
+        default: ""
+
+jobs:
+  check-images:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Log in to registry
+        uses: docker/login-action@v3
+        with:
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+          registry: ghcr.io
+
+      - name: Download artifact
+        if: "${{ inputs.artifact != '' }}"
+        uses: actions/download-artifact@v5
+        with:
+          name: ${{ inputs.artifact }}
+          path: /tmp
+      - name: Load images
+        if: ${{ inputs.artifact != '' }}
+        run: |
+          docker load --input /tmp/${{ inputs.artifact }}.tar
+      - name: Check ui image exists
+        if: ${{ inputs.ui_image != '' }}
+        run: |
+          if docker image inspect ${{ inputs.ui_image }} >/dev/null 2>&1; then
+              echo "Image exists locally"
+              docker image inspect ${{ inputs.ui_image }}
+          else
+              echo "Image does not exist locally"
+              docker manifest inspect ${{ inputs.ui_image }}
+          fi
+      - name: Check server image exists
+        if: ${{ inputs.server_image != '' }}
+        run: |
+          if docker image inspect ${{ inputs.server_image }} >/dev/null 2>&1; then
+              echo "Image exists locally"
+              docker image inspect ${{ inputs.server_image }}
+          else
+              echo "Image does not exist locally"
+              docker manifest inspect ${{ inputs.server_image }}
+          fi
+      - name: Check server_db_image image exists
+        if: ${{ inputs.server_db_image != '' }}
+        run: |
+          if docker image inspect ${{ inputs.server_db_image }} >/dev/null 2>&1; then
+              echo "Image exists locally"
+              docker image inspect ${{ inputs.server_db_image }}
+          else
+              echo "Image does not exist locally"
+              docker manifest inspect ${{ inputs.server_db_image }}
+          fi
+
+  e2e-integration-tests:
+    needs: check-images
+    runs-on: ubuntu-latest
+    steps:
+      - name: Download artifact
+        if: "${{ inputs.artifact != '' }}"
+        uses: actions/download-artifact@v5
+        with:
+          name: ${{ inputs.artifact }}
+          path: /tmp
+      - name: Load images
+        if: ${{ inputs.artifact != '' }}
+        run: |
+          docker load --input /tmp/${{ inputs.artifact }}.tar
+
+      - name: Checkout ui repo
+        uses: actions/checkout@v5
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 22
+          cache: "npm"
+      - name: Install dependencies
+        run: npm ci --verbose --ignore-scripts --no-audit
+
+      - name: Start rhtas-console
+        uses: ./.github/actions/start-console
+        with:
+          ui_image: ${{ inputs.ui_image }}
+          server_image: ${{ inputs.server_image }}
+          server_db_image: ${{ inputs.server_db_image }}
+
+      - name: Run Playwright tests
+        run: |
+          PW_TEST_CONNECT_WS_ENDPOINT=ws://localhost:5000/ CONSOLE_UI_URL=http://localhost:8088 AUTH_REQUIRED=false npm run -w e2e test
+
+      - name: Upload Playwright artifacts
+        if: failure() # only upload if tests failed
+        uses: actions/upload-artifact@v4
+        with:
+          name: playwright-artifacts
+          path: |
+            e2e/test-results
+            e2e/playwright-report

.github/workflows/ci-e2e.yaml

@@ -0,0 +1,79 @@
+name: CI (e2e)
+
+on:
+  push:
+    branches:
+      - "main"
+      - "release/*"
+  pull_request:
+    branches:
+      - "main"
+      - "release/*"
+  workflow_call:
+  merge_group:
+
+concurrency:
+  group: ci-e2e-${{ github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  build-and-upload-for-e2e-ci:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v5
+
+      - name: save rhtas-console-ui image
+        run: |
+          docker build . -t ghcr.io/securesign/rhtas-console-ui:pr-test -f Dockerfile
+          docker save -o /tmp/rhtas-console-ui.tar ghcr.io/securesign/rhtas-console-ui:pr-test
+
+      - name: Upload console-ui image as artifact
+        uses: actions/upload-artifact@v4
+        with:
+          name: rhtas-console-ui
+          path: /tmp/rhtas-console-ui.tar
+          retention-days: 1
+
+  discover-envs-for-e2e-ci:
+    runs-on: ubuntu-latest
+    outputs:
+      image_tag: ${{ steps.set-outputs.outputs.image_tag }}
+    steps:
+      - name: Extract vars for Pull Request
+        shell: bash
+        if: ${{ github.event_name == 'pull_request' || github.event_name == 'merge_group' }}
+        env:
+          base_ref: ${{ github.event.pull_request.base.ref || github.event.merge_group.base_ref }}
+        run: |
+          branch=$base_ref
+          branch=$(echo ${branch#refs/heads/})
+          image_tag="latest"
+          if [[ "$branch" != "main" ]]; then
+            image_tag="${branch#release/}"
+          fi
+          echo "image_tag=$image_tag" >> $GITHUB_ENV
+      - name: Extract vars for Push
+        shell: bash
+        if: ${{ github.event_name != 'pull_request' && github.event_name != 'merge_group' }}
+        run: |
+          branch=$(echo ${GITHUB_REF#refs/heads/})
+          image_tag="latest"
+          if [[ "$branch" != "main" ]]; then
+            image_tag="${branch#release/}"
+          fi
+          echo "image_tag=$image_tag" >> $GITHUB_ENV
+      - name: Set outputs
+        id: set-outputs
+        run: |
+          echo ${{ env.image_tag }}
+          echo "image_tag=${{ env.image_tag }}" >> "$GITHUB_OUTPUT"
+
+  run-e2e-ci:
+    needs:
+      - build-and-upload-for-e2e-ci
+      - discover-envs-for-e2e-ci
+    uses: ./.github/workflows/ci-e2e-template.yaml
+    with:
+      artifact: rhtas-console-ui
+      ui_image: ghcr.io/securesign/rhtas-console-ui:pr-test
+      server_image: ghcr.io/securesign/rhtas-console:${{ needs.discover-envs-for-e2e-ci.outputs.image_tag }}

README.md

@@ -58,6 +58,7 @@ npm run start
 | --------------- | ----------------------------- | -------------------------------------- |
 | MOCK            | Enables or disables mock data | `off`                                  |
 | AUTH_REQUIRED   | Enable/Disable authentication | false                                  |
+| CONSOLE_API_URL | Set Console API URL           | http://localhost:8080                  |
 | OIDC_CLIENT_ID  | Set Oidc Client               | frontend                               |
 | OIDC_SERVER_URL | Set Oidc Server URL           | `http://localhost:8090/realms/console` |
 | OIDC_SCOPE      | Set Oidc Scope                | openid                                 |
@@ -90,7 +91,7 @@ podman run -it $BASE_IMAGE cat /etc/yum.repos.d/ubi.repo > ubi.repo
 
 Make sure the `ubi.repo` file has all repositories enabled `enabled = 1` and then:
 
-Also make sure the `ubi.repo` contains only repositories from https://github.com/release-engineering/rhtap-ec-policy/blob/main/data/known_rpm_repositories.yml . Change the repository names manually if needed. E.g. 
+Also make sure the `ubi.repo` contains only repositories from https://github.com/release-engineering/rhtap-ec-policy/blob/main/data/known_rpm_repositories.yml . Change the repository names manually if needed. E.g.
 
 - `ubi-9-for-baseos-rpms` change it to `ubi-9-for-x86_64-baseos-rpms` as only the latter is an accepted repository in Konflux.
 
@@ -128,13 +129,14 @@ The `overlays/dev/` directory contains a `kustomization.yaml` for environment-sp
 1. **Set TUF_REPO_URL using a ConfigMap**:
 
    Before deploying, you need to retrieve the TUF repository URL from your running RHTAS instance. This value should be stored in a ConfigMap that the console backend can consume.
-
-   * Retrieve the TUF route URL from your running RHTAS instance:
+   - Retrieve the TUF route URL from your running RHTAS instance:
+
    ```bash
    oc get tuf -o jsonpath='{.items[0].status.url}'
    ```
-
-   * Create a ConfigMap with the retrieved URL:
+
+   - Create a ConfigMap with the retrieved URL:
+
    ```bash
    oc create configmap tuf-repo-config \
    --from-literal=TUF_REPO_URL=<output-from-above-command> \
@@ -151,7 +153,7 @@ The `overlays/dev/` directory contains a `kustomization.yaml` for environment-sp
    oc apply -k https://github.com/securesign/rhtas-console-ui/deployment/overlays/dev?ref=v0.1.0
    ```
 
-4. **Verify the Deployment**:
+3. **Verify the Deployment**:
 
    Check the status of the deployed resources:
 
@@ -160,11 +162,12 @@ The `overlays/dev/` directory contains a `kustomization.yaml` for environment-sp
    ```
 
    You can access the console via a browser using the UI route:
+
    ```bash
    oc get route console-ui -o jsonpath='https://{.spec.host}{"\n"}'
    ```
 
-5. **Deletion**:
+4. **Deletion**:
 
    To delete the deployed resources:
 

docker-compose.yaml

@@ -43,3 +43,15 @@ services:
     depends_on:
       console:
         condition: service_started
+
+  playwright:
+    image: mcr.microsoft.com/playwright:v1.56.1-jammy
+    ports:
+      - "5000:5000"
+    network_mode: host
+    working_dir: /home/pwuser
+    command:
+      - /bin/sh
+      - -c
+      - npx -y playwright run-server --port 5000
+