feat(ci): add a GitHub Actions pipeline for Canvas UI PRs

Author: a-asaad

.github/workflows/canvas-ui-pr.yaml

@@ -0,0 +1,48 @@
+name: Canvas UI PR Pipeline
+
+on:
+  pull_request:
+    branches:
+      - main
+    paths:
+      - "ui/**"
+
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+env:
+  # Disable sending data to IBM telemetry
+  IBM_TELEMETRY_DISABLED: true
+  CARBON_TELEMETRY_DISABLED: 1
+
+jobs:
+  ui_code_check:
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: ./ui
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Set up Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: "npm"
+          cache-dependency-path: "./ui/package-lock.json"
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Run unit tests
+        run: npm test
+
+      - name: Check Linting
+        run: npm run lint
+
+      - name: Check Formatting
+        run: npm run check-format
+
+      - name: Test Build
+        run: npm run build -- --base /keip-canvas/

ui/git-hooks/pre-commit

@@ -1,27 +1,27 @@
 #!/bin/sh
 #
 # An example hook script to verify what is about to be committed.
-# Called by "git commit" with no arguments.  The hook should
+# Called by "git commit" with no arguments. The hook should
 # exit with non-zero status after issuing an appropriate message if
 # it wants to stop the commit.
 #
-# To enable this hook, rename this file to "pre-commit".
+# To enable this hook, create this file at ".git/hooks/pre-commit" with execute permissions.
 
 UI_DIR_PATTERN='^ui/src/'
 
 git diff --cached --name-only | grep ${UI_DIR_PATTERN} --quiet
 IS_UI_CHANGED=$?
 
 if [ ${IS_UI_CHANGED} -ne 0 ]; then
-	echo "[pre-commit hook] No UI code changes detected. Skip linting."
+	echo "[pre-commit hook] No UI code changes detected. Skip precommit check."
 	exit 0
 fi
 
-LINT_CMD='npm --prefix ./ui run lint -- --color'
+PRECOMMIT_CMD='npm --prefix ./ui run precommit'
 
-echo "[pre-commit hook] Linting...\n"
+echo "[pre-commit hook] Lint and check formatting...\n"
 
-if output=$(${LINT_CMD}); then
+if output=$(${PRECOMMIT_CMD}); then
 	exit 0
 else
 	echo "$output" >&2

ui/package.json

@@ -11,6 +11,7 @@
     "format": "prettier --write ./src",
     "lint": "eslint .",
     "preview": "vite preview",
+    "precommit": "npm run lint -- --color && npm run check-format",
     "test": "vitest run --silent"
   },
   "engines": {