From 17fc2482a0756762772409afdfa99c1922795fd2 Mon Sep 17 00:00:00 2001 From: Cristhian Zanforlin Lousa Date: Wed, 25 Sep 2024 16:31:45 -0300 Subject: [PATCH] fix: "Start Here" button not working as expected + fe tests (#3910) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * ✅ (general-bugs-shard-3909.spec.ts): add test case to ensure user can create a new flow by clicking on "Start Here" button * ✨ (componentsComponent/index.tsx): Add NewFlowModal component to allow users to create a new flow 📝 (componentsComponent/index.tsx): Update ComponentsComponent to handle opening and closing of NewFlowModal * ✨ (emptyComponent/index.tsx): refactor EmptyComponent to use useIsFetching hook from @tanstack/react-query for loading state and pass handleOpenModal as a prop to improve code readability and maintainability * ✨ (componentsComponent/index.tsx): refactor handleOpenModal function to improve code readability and maintainability --- .../components/componentsComponent/index.tsx | 10 ++- .../components/emptyComponent/index.tsx | 52 +++++++------- .../general-bugs-shard-3909.spec.ts | 72 +++++++++++++++++++ 3 files changed, 107 insertions(+), 27 deletions(-) create mode 100644 src/frontend/tests/extended/regression/general-bugs-shard-3909.spec.ts diff --git a/src/frontend/src/pages/MainPage/components/componentsComponent/index.tsx b/src/frontend/src/pages/MainPage/components/componentsComponent/index.tsx index 187683735..c377c1030 100644 --- a/src/frontend/src/pages/MainPage/components/componentsComponent/index.tsx +++ b/src/frontend/src/pages/MainPage/components/componentsComponent/index.tsx @@ -1,4 +1,5 @@ import { usePostDownloadMultipleFlows } from "@/controllers/API/queries/flows"; +import NewFlowModal from "@/modals/newFlowModal"; import { useEffect, useMemo, useState } from "react"; import { FormProvider, useForm, useWatch } from "react-hook-form"; import { useLocation, useParams } from "react-router-dom"; @@ -37,6 +38,8 @@ export default function ComponentsComponent({ }) { const { folderId } = useParams(); + const [openModal, setOpenModal] = useState(false); + const setSuccessData = useAlertStore((state) => state.setSuccessData); const setErrorData = useAlertStore((state) => state.setErrorData); const [openDelete, setOpenDelete] = useState(false); @@ -205,6 +208,10 @@ export default function ComponentsComponent({ const totalRowsCount = filteredFlows?.length; + const handleOpenModal = () => { + setOpenModal(true); + }; + return ( <>
@@ -230,7 +237,7 @@ export default function ComponentsComponent({ >
{!isLoading && data?.length === 0 ? ( - + ) : (
{data?.length > 0 ? ( @@ -284,6 +291,7 @@ export default function ComponentsComponent({ <> )} + ); } diff --git a/src/frontend/src/pages/MainPage/components/emptyComponent/index.tsx b/src/frontend/src/pages/MainPage/components/emptyComponent/index.tsx index 5008aaedb..6bd912202 100644 --- a/src/frontend/src/pages/MainPage/components/emptyComponent/index.tsx +++ b/src/frontend/src/pages/MainPage/components/emptyComponent/index.tsx @@ -1,35 +1,35 @@ -import { useState } from "react"; -import NewFlowModal from "../../../../modals/newFlowModal"; +import { useIsFetching } from "@tanstack/react-query"; -type EmptyComponentProps = {}; +type EmptyComponentProps = { + handleOpenModal: () => void; +}; -const EmptyComponent = ({}: EmptyComponentProps) => { - const [openModal, setOpenModal] = useState(false); +const EmptyComponent = ({ handleOpenModal }: EmptyComponentProps) => { + const isLoadingFolders = !!useIsFetching({ + queryKey: ["useGetFolders"], + exact: false, + }); return ( - <> -
-
-
- - This folder is empty. New? - - - - - - 🚀 -
+
+
+
+ + This folder is empty. New? + + + + + 🚀
- +
); }; export default EmptyComponent; diff --git a/src/frontend/tests/extended/regression/general-bugs-shard-3909.spec.ts b/src/frontend/tests/extended/regression/general-bugs-shard-3909.spec.ts new file mode 100644 index 000000000..aee4ffc53 --- /dev/null +++ b/src/frontend/tests/extended/regression/general-bugs-shard-3909.spec.ts @@ -0,0 +1,72 @@ +import { expect, test } from "@playwright/test"; +import * as dotenv from "dotenv"; +import path from "path"; + +test("user must be able to create a new flow clicking on Start Here button", async ({ + page, +}) => { + test.skip( + !process?.env?.OPENAI_API_KEY, + "OPENAI_API_KEY required to run this test", + ); + + if (!process.env.CI) { + dotenv.config({ path: path.resolve(__dirname, "../../.env") }); + } + + await page.goto("/"); + + await page.waitForTimeout(1000); + + 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.getByText("Close").last().click(); + + await page.getByTestId("add-folder-button").click(); + + await page.getByText("New Folder").last().click(); + + await page.waitForSelector("text=start here", { timeout: 30000 }); + + await page.waitForTimeout(1000); + + expect( + ( + await page.waitForSelector("text=start here", { + timeout: 30000, + }) + ).isVisible(), + ); + + await page.getByText("Start Here", { exact: true }).click(); + + await page.getByRole("heading", { name: "Basic Prompting" }).click(); + await page.waitForSelector("text=playground", { timeout: 30000 }); + await page.waitForSelector("text=api", { timeout: 30000 }); + await page.waitForSelector("text=share", { timeout: 30000 }); + + await page.waitForTimeout(1000); + + expect( + await page.getByTestId("button_run_chat output").isVisible(), + ).toBeTruthy(); + expect(await page.getByTestId("button_run_openai").isVisible()).toBeTruthy(); + expect(await page.getByTestId("button_run_prompt").isVisible()).toBeTruthy(); + expect( + await page.getByTestId("button_run_chat input").isVisible(), + ).toBeTruthy(); +});