Refactor UI CI: replace matrix with dedicated jobs

.github/workflows/ui-ci.yml

@@ -18,32 +18,36 @@ permissions:
   contents: read
 
 jobs:
-  tests:
-    name: ${{ matrix.task.name }}
+  checks:
+    name: Lint, type check & unit tests
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
+      - uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0
+        with:
+          node-version: 24
+          cache: "yarn"
+          cache-dependency-path: quickwit/quickwit-ui/yarn.lock
+      - name: Install JS dependencies
+        run: yarn --cwd quickwit-ui install
+        working-directory: ./quickwit
+      - name: Lint
+        run: yarn --cwd quickwit-ui lint
+        working-directory: ./quickwit
+      - name: Type check
+        run: yarn --cwd quickwit-ui type
+        working-directory: ./quickwit
+      - name: Unit tests
+        run: yarn --cwd quickwit-ui test
+        working-directory: ./quickwit
+
+  e2e:
+    name: Playwright e2e
     runs-on: ubuntu-latest
     permissions:
       contents: read
       actions: write
-    strategy:
-      fail-fast: false
-      matrix:
-        task:
-          - name: Cypress run
-            command: |
-              sudo apt-get -y install protobuf-compiler
-              CI=false yarn --cwd quickwit-ui build
-              RUSTFLAGS="--cfg tokio_unstable" cargo build --features=postgres
-              mkdir qwdata
-              RUSTFLAGS="--cfg tokio_unstable" cargo run --features=postgres -- run --service searcher --service metastore --config ../config/quickwit.yaml &
-              yarn --cwd quickwit-ui cypress run
-          - name: Lint
-            command: yarn --cwd quickwit-ui lint
-          - name: Check type consistency
-            command: yarn --cwd quickwit-ui type
-          - name: Unit Test
-            command: yarn --cwd quickwit-ui test
     services:
-      # PostgreSQL service container
       postgres:
         image: postgres:latest
         ports:
@@ -52,7 +56,6 @@ jobs:
           POSTGRES_USER: quickwit-dev
           POSTGRES_PASSWORD: quickwit-dev
           POSTGRES_DB: quickwit-metastore-dev
-        # Set health checks to wait until postgres has started
         options: >-
           --health-cmd pg_isready
           --health-interval 10s
@@ -75,14 +78,27 @@ jobs:
         uses: dtolnay/rust-toolchain@f7ccc83f9ed1e5b9c81d8a67d7ad1a747e22a561 # master
         with:
           toolchain: stable
-      - name: Install JS dependencies
-        run: yarn --cwd quickwit-ui install
-        working-directory: ./quickwit
       - name: Setup Rust cache
-        if: matrix.task.name == 'Cypress run'
         uses: Swatinem/rust-cache@779680da715d629ac1d338a641029a2f4372abb5 # v2.8.2
         with:
           workspaces: "./quickwit -> target"
-      - name: ${{ matrix.task.name }}
-        run: ${{ matrix.task.command }}
+      - name: Install JS dependencies
+        run: yarn --cwd quickwit-ui install
+        working-directory: ./quickwit
+      - name: Install Playwright browsers
+        run: npx playwright install chromium --with-deps --only-shell
+        working-directory: ./quickwit/quickwit-ui
+      - name: Build UI
+        run: CI=false yarn --cwd quickwit-ui build
+        working-directory: ./quickwit
+      - name: Build Quickwit
+        run: |
+          sudo apt-get update && sudo apt-get -y install protobuf-compiler
+          RUSTFLAGS="--cfg tokio_unstable" cargo build --features=postgres
+        working-directory: ./quickwit
+      - name: Run e2e tests
+        run: |
+          mkdir -p qwdata
+          RUSTFLAGS="--cfg tokio_unstable" cargo run --features=postgres -- run --service searcher --service metastore --config ../config/quickwit.yaml &
+          yarn --cwd quickwit-ui e2e-test
         working-directory: ./quickwit

quickwit/quickwit-ui/e2e/homepage.spec.ts

@@ -0,0 +1,40 @@
+// Copyright 2021-Present Datadog, Inc.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import { expect, test } from "@playwright/test";
+
+test.describe("Home navigation", () => {
+  test("Should display sidebar links", async ({ page }) => {
+    await page.goto("/");
+    await expect(page.locator("a")).toContainText([
+      "Query editor",
+      "Indexes",
+      "Cluster",
+    ]);
+  });
+
+  test("Should navigate to cluster state", async ({ page }) => {
+    await page.goto("/");
+    await page.getByRole("link", { name: "Cluster" }).click();
+    await expect(page.getByLabel("breadcrumb")).toContainText("Cluster");
+    await expect(page.getByText("cluster_id")).toBeVisible();
+  });
+
+  test("Should display otel logs index page", async ({ page }) => {
+    await page.goto("/ui/indexes/otel-logs-v0_7");
+    await expect(
+      page.getByLabel("breadcrumb").getByRole("link", { name: "Indexes" }),
+    ).toBeVisible();
+  });
+});

quickwit/quickwit-ui/jest.config.js

@@ -32,5 +32,7 @@ module.exports = {
     "@mui/x-charts": "<rootDir>/mocks/x-charts.js",
   },
 
+  testPathIgnorePatterns: ["/node_modules/", "<rootDir>/e2e/"],
+
   resetMocks: true,
 };

quickwit/quickwit-ui/mocks/monacoMock.js

@@ -12,8 +12,6 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import * as React from "react";
-
 // Mock MonocoEditor as the current jest setup does not work when Monaco JS files
 // are loaded.
 export const Editor = (props) => {

quickwit/quickwit-ui/mocks/swaggerUIMock.js

@@ -12,8 +12,6 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import * as React from "react";
-
 // Mock SwaggerUI as the current jest setup does not work when Monaco JS files
 // are loaded.
 export default function SwaggerUI(props) {