407 Add test workflow for leapfrogai_ui

.github/workflows/e2e-shim.yaml

@@ -18,7 +18,7 @@ on:
       - "CODEOWNERS"
       - ".gitignore"
       - "LICENSE"
-      - "pre-commit-config.yaml"
+      - ".pre-commit-config.yaml"
 
       # Catch pytests
       - "tests/pytest/**"

.github/workflows/e2e.yaml

@@ -26,7 +26,7 @@ on:
       - "!LICENSE"
 
       # Ignore local development files
-      - "!pre-commit-config.yaml"
+      - "!.pre-commit-config.yaml"
 
       # Ignore non e2e tests
       - "!tests/pytest/**"

.github/workflows/lint.yaml

@@ -21,3 +21,14 @@ jobs:
         with:
           version: 0.3.4
           args: format --check
+
+      # Javascript & Typescript Linting
+      - uses: actions/setup-node@60edb5dd545a775178f52524783378180af0d1f8 # v4.0.2
+        with:
+          node-version-file: 'src/leapfrogai_ui/package.json'
+
+      - name: Install UI Dependencies
+        run: npm --prefix src/leapfrogai_ui ci
+
+      - name: Run UI Linter
+        run: npm --prefix src/leapfrogai_ui run lint

.github/workflows/secret-scan.yaml

@@ -0,0 +1,20 @@
+name: secret-scan
+on:
+  pull_request:
+    paths:
+      # Catch-all
+      - "**"
+
+
+jobs:
+  secret-scan: # scan for any live secrets in the repository using trufflehog
+    runs-on: ubuntu-latest
+    steps:
+    - name: Checkout code
+      uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 # v4.1.1
+      with:
+        fetch-depth: 0
+    - name: Secret Scanning
+      uses: trufflesecurity/trufflehog@main
+      with:
+        extra_args: --only-verified

.github/workflows/ui-test.yaml

@@ -0,0 +1,35 @@
+name: ui-test
+on:
+  pull_request:
+    paths:
+      # Ignore all workflows except this one
+      - ".github/workflows/ui-test.yaml"
+
+      # LFAI-UI things (no Python)
+      - "src/leapfrogai_ui/**"
+      - "packages/ui/**"
+
+# Declare default permissions as read only.
+permissions: read-all
+
+concurrency:
+  group: uitest-${{ github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  ui-test:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout Repo
+        uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 # v4.1.1
+
+      - uses: actions/setup-node@60edb5dd545a775178f52524783378180af0d1f8 # v4.0.2
+        with:
+          node-version-file: 'src/leapfrogai_ui/package.json'
+
+      - name: Install Dependencies
+        run: npm --prefix src/leapfrogai_ui ci
+
+      - name: Run Unit Tests
+        run: npm --prefix src/leapfrogai_ui run test:unit

.pre-commit-config.yaml

@@ -21,3 +21,12 @@ repos:
     hooks:
       - id: ruff # Run the linter.
       - id: ruff-format # Run the formatter.
+
+  # Local Eslint w/ Prettier
+  - repo: local
+    hooks:
+    - id: eslint
+      name: eslint
+      language: system
+      entry: sh -c 'npm --prefix src/leapfrogai_ui/ run lint'
+      files: \.(js|jsx|ts|tsx|svelte|cjs|mjs)$ # *.js, *.jsx, *.ts, *.tsx, *.svelte, *.cjs, *.mjs

src/leapfrogai_ui/.eslintrc.cjs

@@ -27,5 +27,8 @@ module.exports = {
 				parser: '@typescript-eslint/parser'
 			}
 		}
-	]
+	],
+	rules: {
+		'no-undef': 'off'
+	}
 };

src/leapfrogai_ui/.prettierignore

@@ -3,4 +3,6 @@ pnpm-lock.yaml
 package-lock.json
 yarn.lock
 
-../../packages/ui/chart/
+../../packages/ui/chart/
+
+supabase

src/leapfrogai_ui/Dockerfile

@@ -20,4 +20,4 @@ ENV NODE_ENV=production
 ENV BODY_SIZE_LIMIT=Infinity
 ENV PROTOCOL_HEADER=x-forwarded-proto
 ENV HOST_HEADER=x-forwarded-host
-CMD ["build"]
+CMD ["build"]

src/leapfrogai_ui/Makefile

@@ -4,4 +4,4 @@ docker-build:
 	docker build -t ghcr.io/defenseunicorns/leapfrogai/leapfrogai-ui:${VERSION} .
 
 zarf-build:
-	zarf package create . --confirm --set IMAGE_VERSION=${VERSION}
+	zarf package create . --confirm --set IMAGE_VERSION=${VERSION}

src/leapfrogai_ui/README.md

@@ -100,9 +100,9 @@ Under a realm in Keycloak that is not the master realm (if using UDS, its "uds")
 1. Create a new client (the client ID you use will be used in the env variables below)
 2. Turn on "Client Authentication"
 3. For "Valid redirect URLs", you need to put:
-   1. `http://localhost:5173/auth/callback` (or the URL for the frontend app callback)
-   2. `http://127.0.0.1:54321/auth/v1/callback` (or the URL for the Supabase callback, for locally running Supabase, DO NOT USE LOCALHOST, use 127.0.0.1)
-   3. Put the same two URLs in for "Web Origins"
+    1. `http://localhost:5173/auth/callback` (or the URL for the frontend app callback)
+    2. `http://127.0.0.1:54321/auth/v1/callback` (or the URL for the Supabase callback, for locally running Supabase, DO NOT USE LOCALHOST, use 127.0.0.1)
+    3. Put the same two URLs in for "Web Origins"
 4. Copy the Client Secret under the Clients -> Credentials tab and use in the env variables below
 5. You can create users under the "Users" tab and either have them verify their email (if you setup SMTP), or manually mark them as verified.
 

src/leapfrogai_ui/package.json

@@ -1,6 +1,9 @@
 {
 	"name": "leapfrogai-ui",
 	"version": "0.0.1",
+	"engines": {
+		"node": ">=18.1.0"
+	},
 	"private": true,
 	"scripts": {
 		"dev": "npm run supabase:start && vite dev",
@@ -9,8 +12,8 @@
 		"test": "npm run test:integration && npm run test:unit",
 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-		"lint": "prettier --check . && eslint .",
-		"format": "prettier --write .",
+		"lint": "concurrently 'prettier --check .' 'eslint .'",
+		"format": "prettier --write . && eslint . --fix",
 		"test:integration": "playwright test",
 		"test:integration:ui": "playwright test --ui",
 		"test:unit": "vitest run",
@@ -67,6 +70,7 @@
 		"@sveltejs/vite-plugin-svelte": "^3.1.0",
 		"@testing-library/user-event": "^14.5.2",
 		"ai": "^3.0.13",
+		"concurrently": "^8.2.2",
 		"fuse.js": "^7.0.0",
 		"msw": "^2.2.14",
 		"openai": "^4.38.5",

src/leapfrogai_ui/playwright.config.ts

@@ -44,7 +44,7 @@ const config: PlaywrightTestConfig = {
 	webServer: {
 		command: 'npm run build && npm run preview',
 		port: 4173,
-		stderr: 'pipe',
+		stderr: 'pipe'
 	},
 	testDir: 'tests',
 	testMatch: /(.+\.)?(test|spec)\.[jt]s/