From 75df3c3cc1e6f46004b84b3b70005c3d8b2d415c Mon Sep 17 00:00:00 2001 From: cristhianzl Date: Tue, 27 Aug 2024 15:42:09 -0300 Subject: [PATCH 1/4] =?UTF-8?q?=E2=9C=A8=20(App.tsx):=20Add=20useGetStarte?= =?UTF-8?q?rProjectsQuery=20hook=20to=20fetch=20starter=20projects=20data?= =?UTF-8?q?=20=F0=9F=93=9D=20(constants.ts):=20Add=20STARTER=5FPROJECTS=20?= =?UTF-8?q?constant=20to=20define=20the=20endpoint=20for=20starter=20proje?= =?UTF-8?q?cts=20API=20=F0=9F=93=9D=20(use-get-starter-projects.ts):=20Cre?= =?UTF-8?q?ate=20useGetStarterProjectsQuery=20hook=20to=20fetch=20starter?= =?UTF-8?q?=20projects=20data=20=F0=9F=93=9D=20(index.tsx):=20Add=20AppWra?= =?UTF-8?q?pperPage=20test=20for=20drag=20and=20drop=20functionality=20wit?= =?UTF-8?q?h=20starter=20projects=20data=20=F0=9F=93=9D=20(starter-project?= =?UTF-8?q?s.spec.ts):=20Add=20end-to-end=20test=20for=20drag=20and=20drop?= =?UTF-8?q?=20functionality=20with=20starter=20projects=20data?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/frontend/src/App.tsx | 3 + .../src/controllers/API/helpers/constants.ts | 1 + .../API/queries/starter-projects/index.ts | 1 + .../use-get-starter-projects.ts | 44 ++++++++++ .../src/pages/AppWrapperPage/index.tsx | 2 - .../tests/end-to-end/starter-projects.spec.ts | 88 +++++++++++++++++++ 6 files changed, 137 insertions(+), 2 deletions(-) create mode 100644 src/frontend/src/controllers/API/queries/starter-projects/index.ts create mode 100644 src/frontend/src/controllers/API/queries/starter-projects/use-get-starter-projects.ts create mode 100644 src/frontend/tests/end-to-end/starter-projects.spec.ts diff --git a/src/frontend/src/App.tsx b/src/frontend/src/App.tsx index badf53c4314d..87a9cc4e685f 100644 --- a/src/frontend/src/App.tsx +++ b/src/frontend/src/App.tsx @@ -12,6 +12,7 @@ import { useAutoLogin, useRefreshAccessToken, } from "./controllers/API/queries/auth"; +import { useGetStarterProjectsQuery } from "./controllers/API/queries/starter-projects"; import { useGetVersionQuery } from "./controllers/API/queries/version"; import useSaveConfig from "./hooks/use-save-config"; import router from "./routes"; @@ -36,6 +37,8 @@ export default function App() { useGetVersionQuery(); + useGetStarterProjectsQuery(); + const { mutate: mutateRefresh } = useRefreshAccessToken(); const isLoginPage = location.pathname.includes("login"); diff --git a/src/frontend/src/controllers/API/helpers/constants.ts b/src/frontend/src/controllers/API/helpers/constants.ts index 26a6b696d035..0bdba73f80e3 100644 --- a/src/frontend/src/controllers/API/helpers/constants.ts +++ b/src/frontend/src/controllers/API/helpers/constants.ts @@ -20,6 +20,7 @@ export const URLs = { VARIABLES: `variables`, VALIDATE: `validate`, CONFIG: `config`, + STARTER_PROJECTS: `starter-projects`, } as const; export function getURL(key: keyof typeof URLs, params: any = {}) { diff --git a/src/frontend/src/controllers/API/queries/starter-projects/index.ts b/src/frontend/src/controllers/API/queries/starter-projects/index.ts new file mode 100644 index 000000000000..ad878f5e41f2 --- /dev/null +++ b/src/frontend/src/controllers/API/queries/starter-projects/index.ts @@ -0,0 +1 @@ +export * from "./use-get-starter-projects"; diff --git a/src/frontend/src/controllers/API/queries/starter-projects/use-get-starter-projects.ts b/src/frontend/src/controllers/API/queries/starter-projects/use-get-starter-projects.ts new file mode 100644 index 000000000000..4e2b27911db0 --- /dev/null +++ b/src/frontend/src/controllers/API/queries/starter-projects/use-get-starter-projects.ts @@ -0,0 +1,44 @@ +import { useDarkStore } from "@/stores/darkStore"; +import { useQueryFunctionType } from "@/types/api"; +import { api } from "../../api"; +import { getURL } from "../../helpers/constants"; +import { UseRequestProcessor } from "../../services/request-processor"; + +export interface IStarterProjectsDataArray { + name: string; + last_used_at: string | null; + total_uses: number; + is_active: boolean; + id: string; + api_key: string; + user_id: string; + created_at: string; +} + +interface IApiQueryResponse { + total_count: number; + user_id: string; + api_keys: Array; +} + +export const useGetStarterProjectsQuery: useQueryFunctionType< + undefined, + IApiQueryResponse +> = (_, options) => { + const { query } = UseRequestProcessor(); + + const getStarterProjectsFn = async () => { + return await api.get(`${getURL("STARTER_PROJECTS")}/`); + }; + + const responseFn = async () => { + const { data } = await getStarterProjectsFn(); + return data; + }; + + const queryResult = query(["useGetStarterProjectsQuery"], responseFn, { + ...options, + }); + + return queryResult; +}; diff --git a/src/frontend/src/pages/AppWrapperPage/index.tsx b/src/frontend/src/pages/AppWrapperPage/index.tsx index 154a82733d5e..595ccbd198ae 100644 --- a/src/frontend/src/pages/AppWrapperPage/index.tsx +++ b/src/frontend/src/pages/AppWrapperPage/index.tsx @@ -49,8 +49,6 @@ export function AppWrapperPage() { const [retryCount, setRetryCount] = useState(0); - console.log(healthCheckMaxRetries); - useEffect(() => { const isServerBusy = (error as AxiosError)?.response?.status === 503 || diff --git a/src/frontend/tests/end-to-end/starter-projects.spec.ts b/src/frontend/tests/end-to-end/starter-projects.spec.ts new file mode 100644 index 000000000000..c6fc2faf12e1 --- /dev/null +++ b/src/frontend/tests/end-to-end/starter-projects.spec.ts @@ -0,0 +1,88 @@ +const { test, expect } = require("@playwright/test"); + +test("Drag and Drop Test", async ({ page, request }) => { + const response = await request.get("/api/v1/starter-projects"); + expect(response.status()).toBe(200); + const responseBody = await response.json(); + + const astraStarterProject = responseBody.find((project) => { + if (project.data.nodes) { + return project.data.nodes.some((node) => node.id.includes("Astra")); + } + }); + + await page.route("**/api/v1/flows/", async (route) => { + if (route.request().method() === "GET") { + try { + const response = await route.fetch(); + const flowsData = await response.json(); + + const modifiedFlows = flowsData.map((flow) => { + if (flow.name === "Vector Store RAG" && flow.user_id === null) { + return { + ...flow, + data: astraStarterProject?.data, + }; + } + return flow; + }); + + const modifiedResponse = JSON.stringify(modifiedFlows); + + route.fulfill({ + status: response.status(), + headers: response.headers(), + body: modifiedResponse, + }); + } catch (error) { + console.error("Error in route handler:", error); + } + } else { + // If not a GET request, continue without modifying + await route.continue(); + } + }); + + await page.goto("/"); + + await page.waitForSelector('[data-testid="mainpage_title"]', { + timeout: 30000, + }); + + await page.waitForSelector('[id="new-project-btn"]', { + timeout: 30000, + }); + + let modalCount = 0; + try { + const modalTitleElement = await page?.getByTestId("modal-title"); + if (modalTitleElement) { + modalCount = await modalTitleElement.count(); + } + } catch (error) { + modalCount = 0; + } + + while (modalCount === 0) { + await page.getByText("New Project", { exact: true }).click(); + await page.waitForTimeout(3000); + modalCount = await page.getByTestId("modal-title")?.count(); + } + + await page.getByRole("heading", { name: "Vector Store RAG" }).click(); + await page.waitForSelector('[title="fit view"]', { + timeout: 100000, + }); + + await page.getByTitle("fit view").click(); + await page.getByTitle("zoom out").click(); + + const edges = await page.locator(".react-flow__edge-interaction").count(); + const nodes = await page.getByTestId("div-generic-node").count(); + + const edgesFromServer = astraStarterProject?.data.edges.length; + const nodesFromServer = astraStarterProject?.data.nodes.length; + + expect(edges).toBe(edgesFromServer); + expect(nodes).toBe(nodesFromServer); +}); From 4a08ed79f0955a3dc4c6e129f3535615f38454f2 Mon Sep 17 00:00:00 2001 From: cristhianzl Date: Wed, 28 Aug 2024 09:53:23 -0300 Subject: [PATCH 2/4] =?UTF-8?q?=E2=9C=A8=20(starter-projects.spec.ts):=20u?= =?UTF-8?q?pdate=20test=20description=20to=20be=20more=20descriptive=20and?= =?UTF-8?q?=20specific=20about=20the=20test=20scenario?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/frontend/tests/end-to-end/starter-projects.spec.ts | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/frontend/tests/end-to-end/starter-projects.spec.ts b/src/frontend/tests/end-to-end/starter-projects.spec.ts index c6fc2faf12e1..12c116082989 100644 --- a/src/frontend/tests/end-to-end/starter-projects.spec.ts +++ b/src/frontend/tests/end-to-end/starter-projects.spec.ts @@ -1,6 +1,9 @@ const { test, expect } = require("@playwright/test"); -test("Drag and Drop Test", async ({ page, request }) => { +test("vector store from starter projects should have its connections and nodes on the flow", async ({ + page, + request, +}) => { const response = await request.get("/api/v1/starter-projects"); expect(response.status()).toBe(200); const responseBody = await response.json(); From b4c7336932bc2c63897e4b04bca34bd07357d987 Mon Sep 17 00:00:00 2001 From: cristhianzl Date: Wed, 28 Aug 2024 12:02:31 -0300 Subject: [PATCH 3/4] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20(App.tsx):=20remove=20?= =?UTF-8?q?unused=20useGetStarterProjectsQuery=20hook=20to=20clean=20up=20?= =?UTF-8?q?code=20and=20improve=20readability?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/frontend/src/App.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/frontend/src/App.tsx b/src/frontend/src/App.tsx index 87a9cc4e685f..601deb97d03a 100644 --- a/src/frontend/src/App.tsx +++ b/src/frontend/src/App.tsx @@ -37,8 +37,6 @@ export default function App() { useGetVersionQuery(); - useGetStarterProjectsQuery(); - const { mutate: mutateRefresh } = useRefreshAccessToken(); const isLoginPage = location.pathname.includes("login"); From 0e0c9619430c252b93b5322b3b23ddb071688fe7 Mon Sep 17 00:00:00 2001 From: cristhianzl Date: Wed, 28 Aug 2024 12:02:51 -0300 Subject: [PATCH 4/4] =?UTF-8?q?=F0=9F=94=A7=20(App.tsx):=20remove=20unused?= =?UTF-8?q?=20import=20useGetStarterProjectsQuery=20to=20clean=20up=20code?= =?UTF-8?q?=20and=20improve=20readability?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/frontend/src/App.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/frontend/src/App.tsx b/src/frontend/src/App.tsx index 601deb97d03a..badf53c4314d 100644 --- a/src/frontend/src/App.tsx +++ b/src/frontend/src/App.tsx @@ -12,7 +12,6 @@ import { useAutoLogin, useRefreshAccessToken, } from "./controllers/API/queries/auth"; -import { useGetStarterProjectsQuery } from "./controllers/API/queries/starter-projects"; import { useGetVersionQuery } from "./controllers/API/queries/version"; import useSaveConfig from "./hooks/use-save-config"; import router from "./routes";