fix: "Start Here" button not working as expected + fe tests (#3910)

* ✅ (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

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 (
     <>
       <div className="flex w-full gap-4 pb-5">
@@ -230,7 +237,7 @@ export default function ComponentsComponent({
         >
           <div className="flex w-full flex-col gap-4">
             {!isLoading && data?.length === 0 ? (
-              <EmptyComponent />
+              <EmptyComponent handleOpenModal={handleOpenModal} />
             ) : (
               <div className="grid w-full gap-4 md:grid-cols-2 lg:grid-cols-2">
                 {data?.length > 0 ? (
@@ -284,6 +291,7 @@ export default function ComponentsComponent({
           <></>
         </DeleteConfirmationModal>
       )}
+      <NewFlowModal open={openModal} setOpen={setOpenModal} />
     </>
   );
 }

src/frontend/src/pages/MainPage/components/emptyComponent/index.tsx

@@ -1,35 +1,35 @@
-import { useState } from "react";
+import { useIsFetching } from "@tanstack/react-query";
-import NewFlowModal from "../../../../modals/newFlowModal";
 
-type EmptyComponentProps = {};
+type EmptyComponentProps = {
+  handleOpenModal: () => void;
+};
 
-const EmptyComponent = ({}: EmptyComponentProps) => {
+const EmptyComponent = ({ handleOpenModal }: EmptyComponentProps) => {
-  const [openModal, setOpenModal] = useState(false);
+  const isLoadingFolders = !!useIsFetching({
+    queryKey: ["useGetFolders"],
+    exact: false,
+  });
 
   return (
-    <>
+    <div className="mt-2 flex w-full items-center justify-center text-center">
-      <div className="mt-2 flex w-full items-center justify-center text-center">
+      <div className="flex-max-width h-full flex-col">
-        <div className="flex-max-width h-full flex-col">
+        <div className="align-center flex w-full justify-center gap-1">
-          <div className="align-center flex w-full justify-center gap-1">
+          <span className="text-muted-foreground">
-            <span className="text-muted-foreground">
+            This folder is empty. New?
-              This folder is empty. New?
+          </span>
-            </span>
+          <span className="transition-colors hover:text-muted-foreground">
-            <span className="transition-colors hover:text-muted-foreground">
+            <button
-              <NewFlowModal open={openModal} setOpen={setOpenModal} />
+              onClick={handleOpenModal}
-              <button
+              disabled={isLoadingFolders}
-                onClick={() => {
+              className="underline"
-                  setOpenModal(true);
+            >
-                }}
+              Start Here
-                className="underline"
+            </button>
-              >
+          </span>
-                Start Here
+          <span className="animate-pulse">🚀</span>
-              </button>
-            </span>
-            <span className="animate-pulse">🚀</span>
-          </div>
         </div>
       </div>
-    </>
+    </div>
   );
 };
 export default EmptyComponent;

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();
+});