chore(ui): typescript updates and fix rag e2e tests (#883)

src/leapfrogai_ui/src/lib/components/AssistantFileDropdown.svelte

@@ -81,10 +81,11 @@
         >
       </form>
     </div>
-    <div class="max-h-64 overflow-y-auto">
+    <div data-testid="file-select-container" class="max-h-64 overflow-y-auto">
       {#each $filesStore.files?.map( (file) => ({ id: file.id, text: file.filename }) ) as file (file.id)}
         <li>
           <Checkbox
+            data-testid={`${file.id}-checkbox`}
             on:click={() => handleClick(file.id)}
             checked={$filesStore.selectedAssistantFileIds.includes(file.id)}
             class="overflow-hidden text-ellipsis whitespace-nowrap">{file.text}</Checkbox

src/leapfrogai_ui/src/lib/mocks/api-key-mocks.ts

@@ -46,7 +46,7 @@ export const mockCreateApiKey = (api_key = `lfai_${faker.string.uuid()}`) => {
         const reqJson = (await request.json()) as NewApiKeyInput;
         const key: APIKeyRow = {
           id: faker.string.uuid(),
-          name: reqJson.name,
+          name: reqJson.name!,
           api_key,
           created_at: new Date().getTime(),
           expires_at: reqJson.expires_at,

src/leapfrogai_ui/src/routes/chat/(dashboard)/[[thread_id]]/chatpage.test.ts

@@ -60,6 +60,7 @@ describe('when there is an active thread selected', () => {
     mockOpenAI.setMessages(allMessages);
     mockOpenAI.setFiles(files);
 
+    // @ts-expect-error: full mocking of load function params not necessary and is overcomplicated
     data = await load({
       fetch: global.fetch,
       depends: vi.fn(),

src/leapfrogai_ui/src/routes/chat/(dashboard)/[[thread_id]]/chatpage_no_thread.test.ts

@@ -35,6 +35,7 @@ describe('when there is NO active thread selected', () => {
     mockOpenAI.setMessages(allMessages);
     mockOpenAI.setFiles(files);
 
+    // @ts-expect-error: full mocking of load function params not necessary and is overcomplicated
     data = await load({
       params: {},
       fetch: global.fetch,

src/leapfrogai_ui/src/routes/chat/(settings)/api-keys/+page.server.ts

@@ -38,7 +38,7 @@ export const load: PageServerLoad = async ({ depends, locals: { session } }) =>
     key.expires_at = key.expires_at * 1000;
   });
 
-  return { title: 'LeapfrogAI - API Keys', form, keys: keys ?? [] };
+  return { title: 'LeapfrogAI - API Keys', form, apiKeys: keys ?? [] };
 };
 
 export const actions: Actions = {

src/leapfrogai_ui/src/routes/chat/(settings)/api-keys/+page.svelte

@@ -17,19 +17,17 @@
   import { formatDate } from '$helpers/dates.js';
   import { formatKeyShort } from '$helpers/apiKeyHelpers';
   import type { APIKeyRow } from '$lib/types/apiKeys';
-  import type { PageServerData } from './$types';
   import { filterTable } from '$lib/utils/tables';
   import { tableStyles } from '$lib/styles/tables';
   import DeleteApiKeyModal from '$components/modals/DeleteApiKeyModal.svelte';
   import CreateApiKeyModal from '$components/modals/CreateApiKeyModal.svelte';
 
-  export let data: PageServerData;
+  export let data;
 
-  // TODO - data.keys not getting type inference - https://github.com/defenseunicorns/leapfrogai/issues/856
   $: filteredItems =
     searchTerm !== ''
-      ? filterTable(data.keys, FILTER_KEYS, searchTerm.toLowerCase())
-      : [...data.keys];
+      ? filterTable(data.apiKeys, FILTER_KEYS, searchTerm.toLowerCase())
+      : [...data.apiKeys];
   $: totalItems = filteredItems.length;
   $: startRange = currentPosition + 1;
   $: endRange = Math.min(currentPosition + itemsPerPage, totalItems);

src/leapfrogai_ui/src/routes/chat/(settings)/file-management/file-management.test.ts

@@ -26,6 +26,7 @@ describe('file management', () => {
   let searchbox: HTMLElement;
 
   beforeEach(async () => {
+    // @ts-expect-error: full mocking of load function params not necessary and is overcomplicated
     const data = await load();
 
     form = await superValidate(yup(filesSchema));
@@ -182,6 +183,7 @@ describe('table pagination', () => {
   let searchbox: HTMLElement;
 
   beforeEach(async () => {
+    // @ts-expect-error: full mocking of load function params not necessary and is overcomplicated
     const data = await load();
 
     form = await superValidate(yup(filesSchema));

src/leapfrogai_ui/testUtils/fakeData/index.ts

@@ -263,6 +263,7 @@ export const getFakeOpenAIMessage = ({
   };
 };
 
+// @ts-expect-error: status is a deprecated field, not including it here
 export const getFakeFileObject = (): FileObject => ({
   id: `file_${faker.string.uuid()}`,
   bytes: 64,

src/leapfrogai_ui/tests/rag.test.ts

@@ -14,8 +14,9 @@ import {
 import { faker } from '@faker-js/faker';
 import {
   createAssistantWithApi,
-  deleteAssistant,
-  deleteAssistantWithApi
+  deleteAssistantCard,
+  deleteAssistantWithApi,
+  editAssistantCard
 } from './helpers/assistantHelpers';
 import { getSimpleMathQuestion, loadChatPage } from './helpers/helpers';
 import { sendMessage, waitForResponseToComplete } from './helpers/threadHelpers';
@@ -36,9 +37,10 @@ test('can edit an assistant and attach files to it', async ({ page, openAIClient
 
   await page.goto(`/chat/assistants-management/edit/${assistant.id}`);
 
-  await page.getByRole('button', { name: 'Open menu' }).click();
-  await page.getByLabel('Choose an item').locator('label').nth(1).click();
-  await page.getByLabel('Choose an item').locator('label').nth(2).click();
+  await page.getByTestId('file-select-dropdown-btn').click();
+  const fileSelectContainer = page.getByTestId('file-select-container');
+  await fileSelectContainer.getByTestId(`${uploadedFile1.id}-checkbox`).check();
+  await fileSelectContainer.getByTestId(`${uploadedFile2.id}-checkbox`).check();
   await page.getByRole('button', { name: 'Save' }).click();
   await expect(page.getByText('Assistant Updated')).toBeVisible();
 
@@ -61,18 +63,19 @@ test('can create a new assistant and attach files to it', async ({ page, openAIC
   await page.goto(`/chat/assistants-management/new`);
 
   await page.getByLabel('name').fill(assistantInput.name);
-  await page.getByLabel('description').fill(assistantInput.description);
+  await page.getByLabel('tagline').fill(assistantInput.description);
   await page.getByPlaceholder("You'll act as...").fill(assistantInput.instructions);
 
-  await page.getByRole('button', { name: 'Open menu' }).click();
-  await page.getByLabel('Choose an item').locator('label').nth(1).click();
-  await page.getByLabel('Choose an item').locator('label').nth(2).click();
+  await page.getByTestId('file-select-dropdown-btn').click();
+  const fileSelectContainer = page.getByTestId('file-select-container');
+  await fileSelectContainer.getByTestId(`${uploadedFile1.id}-checkbox`).check();
+  await fileSelectContainer.getByTestId(`${uploadedFile2.id}-checkbox`).check();
   await page.getByRole('button', { name: 'Save' }).click();
   await expect(page.getByText('Assistant Created')).toBeVisible();
 
   // Cleanup
   expect(page.waitForURL('/chat/assistants-management'));
-  await deleteAssistant(assistantInput.name, page);
+  await deleteAssistantCard(assistantInput.name, page);
   await deleteFileWithApi(uploadedFile1.id, openAIClient);
   await deleteFileWithApi(uploadedFile2.id, openAIClient);
   deleteFixtureFile(filename1);
@@ -90,21 +93,20 @@ test('it can edit an assistant and remove a file', async ({ page, openAIClient }
   await page.goto(`/chat/assistants-management/edit/${assistant.id}`);
 
   // Create assistant with files
-  await page.getByRole('button', { name: 'Open menu' }).click();
-  await page.getByLabel('Choose an item').locator('label').nth(1).click();
-  await page.getByLabel('Choose an item').locator('label').nth(2).click();
+  await page.getByTestId('file-select-dropdown-btn').click();
+  const fileSelectContainer = page.getByTestId('file-select-container');
+  await fileSelectContainer.getByTestId(`${uploadedFile1.id}-checkbox`).check();
+  await fileSelectContainer.getByTestId(`${uploadedFile2.id}-checkbox`).check();
   await page.getByRole('button', { name: 'Save' }).click();
   await expect(page.getByText('Assistant Updated')).toBeVisible();
 
-  await page
-    .getByTestId(`assistant-card-${assistant.name}`)
-    .getByTestId('assistant-card-dropdown')
-    .click();
-  await page.getByRole('menuitem', { name: 'Edit' }).click();
+  await editAssistantCard(assistant.name!, page);
+
   await page.waitForURL('/chat/assistants-management/edit/**/*');
 
   // Deselect
-  await page.locator('.bx--file-close').first().click();
+  await page.getByTestId('file-select-dropdown-btn').click();
+  await fileSelectContainer.getByTestId(`${uploadedFile1.id}-checkbox`).uncheck();
   await page.getByRole('button', { name: 'Save' }).click();
   await expect(page.getByText('Assistant Updated')).toBeVisible();
 
@@ -127,10 +129,10 @@ test('while creating an assistant, it can upload new files and save the assistan
   await page.goto('/chat/assistants-management/new');
 
   await page.getByLabel('name').fill(assistantInput.name);
-  await page.getByLabel('description').fill(assistantInput.description);
+  await page.getByLabel('tagline').fill(assistantInput.description);
   await page.getByPlaceholder("You'll act as...").fill(assistantInput.instructions);
 
-  await page.getByRole('button', { name: 'Open menu' }).click();
+  await page.getByTestId('file-select-dropdown-btn').click();
   await uploadFile(page, filename, 'Upload new data source');
 
   const saveBtn = await page.getByRole('button', { name: 'Save' });
@@ -143,7 +145,7 @@ test('while creating an assistant, it can upload new files and save the assistan
 
   // Cleanup
   expect(page.waitForURL('/chat/assistants-management'));
-  await deleteAssistant(assistantInput.name, page);
+  await deleteAssistantCard(assistantInput.name, page);
   await deleteTestFilesWithApi(openAIClient);
   deleteFixtureFile(filename);
   await deleteFileByName(filename, openAIClient);
@@ -159,7 +161,7 @@ test('while editing an assistant, it can upload new files and save the assistant
   const assistant = await createAssistantWithApi({ openAIClient });
   await page.goto(`/chat/assistants-management/edit/${assistant.id}`);
 
-  await page.getByRole('button', { name: 'Open menu' }).click();
+  await page.getByTestId('file-select-dropdown-btn').click();
   await uploadFile(page, filename, 'Upload new data source');
 
   const saveBtn = await page.getByRole('button', { name: 'Save' });
@@ -191,7 +193,7 @@ test('it displays a failed toast and temporarily failed uploader item when a the
 
   await page.goto('/chat/assistants-management/new');
 
-  await page.getByRole('button', { name: 'Open menu' }).click();
+  await page.getByTestId('file-select-dropdown-btn').click();
   await uploadFile(page, filename, 'Upload new data source');
 
   await expect(page.getByText(`Upload Failed`)).toBeVisible();
@@ -213,7 +215,7 @@ test('it displays an uploading indicator temporarily when uploading a file', asy
 
   await page.goto('/chat/assistants-management/new');
 
-  await page.getByRole('button', { name: 'Open menu' }).click();
+  await page.getByTestId('file-select-dropdown-btn').click();
   await uploadFile(page, filename, 'Upload new data source');
 
   await expect(page.getByTestId(`${filename}-uploading-uploader-item`)).toBeVisible();

src/leapfrogai_ui/vitest-setup.ts

@@ -6,7 +6,7 @@ import * as environment from '$app/environment';
 import * as navigation from '$app/navigation';
 import * as stores from '$app/stores';
 import OpenAIMock from '$lib/mocks/openai';
-import dotenv from 'dotenv';
+import * as dotenv from 'dotenv';
 
 dotenv.config();