407 Add test workflow for leapfrogai_ui

.github/workflows/lint.yaml

@@ -21,3 +21,14 @@ jobs:
         with:
           version: 0.3.4
           args: format --check
+
+      # Javascript & Typescript Linting
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 18
+
+      - name: Install UI Dependencies
+        run: npm --prefix src/leapfrogai_ui install
+
+      - 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@v4
+        with:
+          node-version: 18
+
+      - name: Install Dependencies
+        run: npm --prefix src/leapfrogai_ui install
+
+      - name: Run Unit Tests
+        run: npm --prefix src/leapfrogai_ui run test:unit

.pre-commit-config.yaml

@@ -21,3 +21,18 @@ repos:
     hooks:
       - id: ruff # Run the linter.
       - id: ruff-format # Run the formatter.
+
+  # ESlint
+  - repo: https://github.com/pre-commit/mirrors-eslint
+    rev: v8.56.0
+    hooks:
+      - id: eslint
+        files: \.(js|jsx|ts|tsx|svelte)$ # apply eslint to the provided filetypes
+        types: [file]
+
+  # Prettier Code formatter
+  - repo: https://github.com/pre-commit/mirrors-prettier
+    rev: "v3.1.0"
+    hooks:
+      - id: prettier
+        files: \.(js|jsx|ts|tsx|svelte)$ # apply prettier to the provided filetypes

src/leapfrogai_ui/.eslintrc.cjs

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

src/leapfrogai_ui/.prettierrc

@@ -1,5 +1,6 @@
 {
 	"useTabs": true,
+	"tabWidth": 4,
 	"singleQuote": true,
 	"trailingComma": "none",
 	"printWidth": 100,

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/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/

src/leapfrogai_ui/src/lib/components/ChatSidebar.svelte

@@ -154,13 +154,19 @@
 						>
 							{#each organizedConversations as category}
 								{#if category.conversations.length > 0}
-									<SideNavMenu text={category.label} expanded data-testid="side-nav-menu">
+									<SideNavMenu
+										text={category.label}
+										expanded
+										data-testid="side-nav-menu"
+									>
 										{#each category.conversations as conversation (conversation.id)}
 											<SideNavMenuItem
 												data-testid="side-nav-menu-item-{conversation.label}"
 												id="side-nav-menu-item-{conversation.id}"
-												isSelected={activeConversation?.id === conversation.id}
-												on:click={() => handleActiveConversationChange(conversation.id)}
+												isSelected={activeConversation?.id ===
+													conversation.id}
+												on:click={() =>
+													handleActiveConversationChange(conversation.id)}
 											>
 												<div class="menu-content">
 													{#if editMode && activeConversation?.id === conversation.id}
@@ -194,20 +200,25 @@
 																on:click={(e) => {
 																	e.stopPropagation();
 																	overflowMenuOpen = true;
-																	handleActiveConversationChange(conversation.id);
+																	handleActiveConversationChange(
+																		conversation.id
+																	);
 																	disableScroll = true;
 																}}
 																data-testid="overflow-menu-{conversation.label}"
 																style={overflowMenuOpen &&
-																activeConversation?.id === conversation.id
+																activeConversation?.id ===
+																	conversation.id
 																	? `position: fixed; top: 0; left: 0; transform: translate(224px, ${menuOffset - scrollOffset + 48}px)`
 																	: ''}
 															>
 																<OverflowMenuItem
 																	text="Edit"
 																	on:click={() => {
-																		editConversationId = conversation.id;
-																		editLabelText = conversation.label;
+																		editConversationId =
+																			conversation.id;
+																		editLabelText =
+																			conversation.label;
 																	}}
 																/>