refactor: queries loading order and wrapper order (#3603)

* Added loading page

* Removed unused loadings and changed loading to LoadingPage

* Refactored ComponentsComponent to receive info from parent

* refactored headerTabsComponent to receive loading from parent

* Added loading of folders into MyCollectionComponent

* removed unused loading and folderSelected

* updated get config api call to update everything

* Make app wait for autoLogin to be set to execute everything else

* changed API type to not contain params if its undefined

* Updated get autologin to do all logic regarding autologin

* Updated other queries with the new useQueryFunctionType type

* Updated App.tsx with new gets and configurations and added a loader before loading the router

* Made ProtectedRoute refresh on authentication change

* Fixed order of wrappers in order for Auth and  API context to have access to router

* Made loading only exist in one place

* 📝 (folders.spec.ts): remove unused test for adding folder by drag and drop to improve test suite cleanliness and maintainability.

* Fixed flow dropping to another folder

* ✨ (folders.spec.ts): add test for adding folder by drag and drop functionality
🔧 (auto-save-off.spec.ts): add click event for "Save And Exit" button
🔧 (dragAndDrop.spec.ts): change dispatchEvent to getByTestId and add assertions for specific text visibility
🔧 (store-shard-3.spec.ts): increase timeout for page.waitForTimeout to improve test reliability

* ✅ (folders.spec.ts): update test description to be more descriptive and accurate

* test: improve timeout for page.waitForSelector in auto-save-off.spec.ts

* feat: add replace button functionality to main page

The code changes include adding the functionality for the replace button on the main page. This allows users to replace a flow or a component. The replace button is now visible on the page, and clicking on it triggers the appropriate action.

Recent user commits:
- test: improve timeout for page.waitForSelector in auto-save-off.spec.ts
- ✅ (folders.spec.ts): update test description to be more descriptive and accurate
- ✨ (folders.spec.ts): add test for adding folder by drag and drop functionality
- 🔧 (auto-save-off.spec.ts): add click event for "Save And Exit" button
- 🔧 (dragAndDrop.spec.ts): change dispatchEvent to getByTestId and add assertions for specific text visibility
- 🔧 (store-shard-3.spec.ts): increase timeout for page.waitForTimeout to improve test reliability

Recent repository commits:
- test: improve timeout for page.waitForSelector in auto-save-off.spec.ts
- ✅ (folders.spec.ts): update test description to be more descriptive and accurate
- ✨ (folders.spec.ts): add test for adding folder by drag and drop functionality
- 🔧 (auto-save-off.spec.ts): add click event for "Save And Exit" button
- 🔧 (dragAndDrop.spec.ts): change dispatchEvent to getByTestId and add assertions for specific text visibility
- 🔧 (store-shard-3.spec.ts): increase timeout for page.waitForTimeout to improve test reliability
- Fixed flow dropping to another folder
- 📝 (folders.spec.ts): remove unused test for adding folder by drag and drop to improve test suite cleanliness and maintainability.
- Made loading only exist in one place
- Fixed order of wrappers in order for Auth and API context to have access to router
- Made ProtectedRoute refresh on authentication change
- Updated App.tsx with new gets and configurations and added a loader before loading the router
- Updated other queries with the new useQueryFunctionType type

---------

Co-authored-by: cristhianzl <cristhian.lousa@gmail.com>

src/frontend/tests/end-to-end/folders.spec.ts

@@ -1,4 +1,4 @@
-import { test } from "@playwright/test";
+import { expect, test } from "@playwright/test";
 import { readFileSync } from "fs";
 
 test("CRUD folders", async ({ page }) => {
@@ -71,7 +71,7 @@ test("CRUD folders", async ({ page }) => {
   await page.getByText("Folder deleted successfully").isVisible();
 });
 
-test("add folder by drag and drop", async ({ page }) => {
+test("add a flow into a folder by drag and drop", async ({ page }) => {
   await page.goto("/");
 
   await page.waitForSelector("text=my collection", {
@@ -84,10 +84,10 @@ test("add folder by drag and drop", async ({ page }) => {
   );
 
   // Wait for the target element to be available before evaluation
-  await page.waitForSelector(
-    '//*[@id="root"]/div/div[2]/div[2]/div[3]/aside/nav/div/div[2]',
-  );
 
+  await page.waitForSelector('[data-testid="sidebar-nav-My Projects"]', {
+    timeout: 100000,
+  });
   // Create the DataTransfer and File
   const dataTransfer = await page.evaluateHandle((data) => {
     const dt = new DataTransfer();
@@ -100,15 +100,34 @@ test("add folder by drag and drop", async ({ page }) => {
   }, jsonContent);
 
   // Now dispatch
-  await page.dispatchEvent(
-    '//*[@id="root"]/div/div[2]/div[2]/div[3]/aside/nav/div/div[2]',
-    "drop",
-    {
-      dataTransfer,
-    },
-  );
+  await page.getByTestId("sidebar-nav-My Projects").dispatchEvent("drop", {
+    dataTransfer,
+  });
 
-  await page.getByText("Getting Started").first().isVisible();
+  await page.waitForTimeout(3000);
+
+  const genericNode = page.getByTestId("div-generic-node");
+  const elementCount = await genericNode?.count();
+  if (elementCount > 0) {
+    expect(true).toBeTruthy();
+  }
+
+  await page.getByTestId("sidebar-nav-My Projects").click();
+
+  await page.waitForTimeout(1000);
+
+  expect(
+    await page.locator("text=Getting Started:").last().isVisible(),
+  ).toBeTruthy();
+  expect(
+    await page.locator("text=Inquisitive Pike").last().isVisible(),
+  ).toBeTruthy();
+  expect(
+    await page.locator("text=Dreamy Bassi").last().isVisible(),
+  ).toBeTruthy();
+  expect(
+    await page.locator("text=Furious Faraday").last().isVisible(),
+  ).toBeTruthy();
 });
 
 test("change flow folder", async ({ page }) => {

src/frontend/tests/scheduled-end-to-end/actionsMainPage-shard-0.spec.ts

@@ -162,6 +162,12 @@ test("user should be able to duplicate a flow or a component", async ({
     await page.getByText("Exit", { exact: true }).click();
   }
 
+  const replaceButton = await page.getByTestId("replace-button").isVisible();
+
+  if (replaceButton) {
+    await page.getByTestId("replace-button").click();
+  }
+
   await page.getByTestId("icon-ChevronLeft").last().click();
   await page.getByRole("checkbox").nth(1).click();
 

src/frontend/tests/scheduled-end-to-end/auto-save-off.spec.ts

@@ -22,11 +22,11 @@ test("user should be able to manually save a flow when the auto_save is off", as
   await page.locator("span").filter({ hasText: "My Collection" }).isVisible();
 
   await page.waitForSelector('[data-testid="mainpage_title"]', {
-    timeout: 30000,
+    timeout: 5000,
   });
 
   await page.waitForSelector('[id="new-project-btn"]', {
-    timeout: 30000,
+    timeout: 5000,
   });
 
   let modalCount = 0;
@@ -46,12 +46,12 @@ test("user should be able to manually save a flow when the auto_save is off", as
   }
 
   await page.waitForSelector('[data-testid="blank-flow"]', {
-    timeout: 30000,
+    timeout: 5000,
   });
 
   await page.getByTestId("blank-flow").click();
   await page.waitForSelector('[data-testid="extended-disclosure"]', {
-    timeout: 30000,
+    timeout: 5000,
   });
 
   await page.getByPlaceholder("Search").click();
@@ -66,7 +66,7 @@ test("user should be able to manually save a flow when the auto_save is off", as
   await page.mouse.down();
 
   await page.waitForSelector('[title="fit view"]', {
-    timeout: 100000,
+    timeout: 5000,
   });
 
   await page.getByTitle("fit view").click();
@@ -77,7 +77,7 @@ test("user should be able to manually save a flow when the auto_save is off", as
 
   await page.waitForSelector("text=loading", {
     state: "hidden",
-    timeout: 100000,
+    timeout: 5000,
   });
 
   await page.getByTestId("icon-ChevronLeft").last().click();
@@ -93,7 +93,7 @@ test("user should be able to manually save a flow when the auto_save is off", as
   await page.getByText("Untitled document").first().click();
 
   await page.waitForSelector('[data-testid="icon-ChevronLeft"]', {
-    timeout: 100000,
+    timeout: 5000,
   });
 
   expect(await page.getByText("NVIDIA").isVisible()).toBeFalsy();
@@ -110,7 +110,7 @@ test("user should be able to manually save a flow when the auto_save is off", as
   await page.mouse.down();
 
   await page.waitForSelector('[title="fit view"]', {
-    timeout: 100000,
+    timeout: 5000,
   });
 
   await page.getByTitle("fit view").click();
@@ -123,7 +123,7 @@ test("user should be able to manually save a flow when the auto_save is off", as
 
   await page.waitForSelector("text=loading", {
     state: "hidden",
-    timeout: 100000,
+    timeout: 5000,
   });
 
   await page.waitForTimeout(5000);
@@ -142,7 +142,7 @@ test("user should be able to manually save a flow when the auto_save is off", as
   await page.mouse.down();
 
   await page.waitForSelector('[title="fit view"]', {
-    timeout: 100000,
+    timeout: 5000,
   });
 
   await page.getByTitle("fit view").click();
@@ -150,10 +150,25 @@ test("user should be able to manually save a flow when the auto_save is off", as
   await page.getByTestId("save-flow-button").click();
   await page.getByTestId("icon-ChevronLeft").last().click();
 
+  const replaceButton = await page.getByTestId("replace-button").isVisible();
+
+  if (replaceButton) {
+    await page.getByTestId("replace-button").click();
+  }
+
+  const saveExitButton = await page
+    .getByText("Save And Exit", { exact: true })
+    .last()
+    .isVisible();
+
+  if (saveExitButton) {
+    await page.getByText("Save And Exit", { exact: true }).last().click();
+  }
+
   await page.getByText("Untitled document").first().click();
 
   await page.waitForSelector('[data-testid="icon-ChevronLeft"]', {
-    timeout: 100000,
+    timeout: 5000,
   });
 
   await page.waitForTimeout(5000);

src/frontend/tests/scheduled-end-to-end/dragAndDrop.spec.ts

@@ -42,18 +42,29 @@ test.describe("drag and drop test", () => {
     }, jsonContent);
 
     // Now dispatch
-    await page.dispatchEvent(
-      '//*[@id="root"]/div/div[2]/div[2]/div[3]/div',
-      "drop",
-      {
-        dataTransfer,
-      },
-    );
+    await page.getByTestId("cards-wrapper").dispatchEvent("drop", {
+      dataTransfer,
+    });
+
+    await page.waitForTimeout(3000);
 
     const genericNode = page.getByTestId("div-generic-node");
     const elementCount = await genericNode?.count();
     if (elementCount > 0) {
       expect(true).toBeTruthy();
     }
+
+    expect(
+      await page.locator("text=Getting Started:").last().isVisible(),
+    ).toBeTruthy();
+    expect(
+      await page.locator("text=Inquisitive Pike").last().isVisible(),
+    ).toBeTruthy();
+    expect(
+      await page.locator("text=Dreamy Bassi").last().isVisible(),
+    ).toBeTruthy();
+    expect(
+      await page.locator("text=Furious Faraday").last().isVisible(),
+    ).toBeTruthy();
   });
 });

src/frontend/tests/scheduled-end-to-end/store-shard-3.spec.ts

@@ -96,12 +96,12 @@ test("should filter by type", async ({ page }) => {
   expect(toyBrick).not.toBe(0);
 
   await page.getByTestId("all-button-store").click();
-  await page.waitForTimeout(8000);
+  await page.waitForTimeout(10000);
 
   let iconGroupAllCount = await page.getByTestId("icon-Group")?.count();
-  await page.waitForTimeout(1000);
+  await page.waitForTimeout(5000);
   let toyBrickAllCount = await page.getByTestId("icon-ToyBrick")?.count();
-  await page.waitForTimeout(1000);
+  await page.waitForTimeout(5000);
 
   if (iconGroupAllCount === 0 || toyBrickAllCount === 0) {
     expect(false).toBe(true);