Merge branch 'fix/minor_bugs' into fix/api_settings

src/frontend/src/pages/SettingsPage/pages/GeneralPage/index.tsx

@@ -1,6 +1,5 @@
 import * as Form from "@radix-ui/react-form";
-import { cloneDeep } from "lodash";
+import { useContext, useState } from "react";
-import { useContext, useEffect, useState } from "react";
 import { useParams } from "react-router-dom";
 import ForwardedIconComponent from "../../../../components/genericIconComponent";
 import GradientChooserComponent from "../../../../components/gradientChooserComponent";
@@ -14,14 +13,6 @@ import {
   CardHeader,
   CardTitle,
 } from "../../../../components/ui/card";
-import {
-  API_ERROR_ALERT,
-  API_SUCCESS_ALERT,
-  EDIT_PASSWORD_ALERT_LIST,
-  EDIT_PASSWORD_ERROR_ALERT,
-  SAVE_ERROR_ALERT,
-  SAVE_SUCCESS_ALERT,
-} from "../../../../constants/alerts_constants";
 import {
   CONTROL_PATCH_USER_STATE,
   CREATE_API_KEY,
@@ -30,11 +21,6 @@ import {
   NO_API_KEY,
 } from "../../../../constants/constants";
 import { AuthContext } from "../../../../contexts/authContext";
-import {
-  addApiKeyStore,
-  resetPassword,
-  updateUser,
-} from "../../../../controllers/API";
 import useAlertStore from "../../../../stores/alertStore";
 import useFlowsManagerStore from "../../../../stores/flowsManagerStore";
 import { useStoreStore } from "../../../../stores/storeStore";
@@ -43,6 +29,10 @@ import {
   patchUserInputStateType,
 } from "../../../../types/components";
 import { gradients } from "../../../../utils/styleUtils";
+import usePatchGradient from "../hooks/use-patch-gradient";
+import usePatchPassword from "../hooks/use-patch-password";
+import useSaveKey from "../hooks/use-save-key";
+import useScrollToElement from "../hooks/use-scroll-to-element";
 
 export default function GeneralPage() {
   const setCurrentFlowId = useFlowsManagerStore(
@@ -51,29 +41,16 @@ export default function GeneralPage() {
 
   const { scrollId } = useParams();
 
-  useEffect(() => {
-    const element = document.getElementById(scrollId ?? "null");
-    if (element) {
-      // 👇 Will scroll smoothly to the top of the next section
-      element.scrollIntoView({ behavior: "smooth" });
-    }
-  }, [scrollId]);
-
   const [inputState, setInputState] = useState<patchUserInputStateType>(
     CONTROL_PATCH_USER_STATE,
   );
 
   const { autoLogin } = useContext(AuthContext);
 
-  // set null id
-  useEffect(() => {
-    setCurrentFlowId("");
-  }, []);
   const setSuccessData = useAlertStore((state) => state.setSuccessData);
   const setErrorData = useAlertStore((state) => state.setErrorData);
   const { userData, setUserData } = useContext(AuthContext);
   const hasStore = useStoreStore((state) => state.hasStore);
-  const { storeApiKey } = useContext(AuthContext);
 
   const validApiKey = useStoreStore((state) => state.validApiKey);
   const hasApiKey = useStoreStore((state) => state.hasApiKey);
@@ -83,71 +60,28 @@ export default function GeneralPage() {
   const setLoadingApiKey = useStoreStore((state) => state.updateLoadingApiKey);
   const { password, cnfPassword, gradient, apikey } = inputState;
 
-  async function handlePatchPassword() {
+  const { handlePatchPassword } = usePatchPassword(
-    if (password !== cnfPassword) {
+    userData,
-      setErrorData({
+    setSuccessData,
-        title: EDIT_PASSWORD_ERROR_ALERT,
+    setErrorData,
-        list: [EDIT_PASSWORD_ALERT_LIST],
+  );
-      });
-      return;
-    }
-    try {
-      if (password !== "") await resetPassword(userData!.id, { password });
-      handleInput({ target: { name: "password", value: "" } });
-      handleInput({ target: { name: "cnfPassword", value: "" } });
-      setSuccessData({ title: SAVE_SUCCESS_ALERT });
-    } catch (error) {
-      setErrorData({
-        title: SAVE_ERROR_ALERT,
-        list: [(error as any).response.data.detail],
-      });
-    }
-  }
 
-  async function handlePatchGradient() {
+  const { handlePatchGradient } = usePatchGradient(
-    try {
+    setSuccessData,
-      if (gradient !== "")
+    setErrorData,
-        await updateUser(userData!.id, { profile_image: gradient });
+    userData,
-      if (gradient !== "") {
+    setUserData,
-        let newUserData = cloneDeep(userData);
+  );
-        newUserData!.profile_image = gradient;
 
-        setUserData(newUserData);
+  useScrollToElement(scrollId, setCurrentFlowId);
-      }
-      setSuccessData({ title: SAVE_SUCCESS_ALERT });
-    } catch (error) {
-      setErrorData({
-        title: SAVE_ERROR_ALERT,
-        list: [(error as any).response.data.detail],
-      });
-    }
-  }
 
-  const handleSaveKey = () => {
+  const { handleSaveKey } = useSaveKey(
-    if (apikey) {
+    setSuccessData,
-      addApiKeyStore(apikey).then(
+    setErrorData,
-        () => {
+    setHasApiKey,
-          setSuccessData({
+    setValidApiKey,
-            title: API_SUCCESS_ALERT,
+    setLoadingApiKey,
-          });
+  );
-          storeApiKey(apikey);
-          setHasApiKey(true);
-          setValidApiKey(true);
-          setLoadingApiKey(false);
-          handleInput({ target: { name: "apikey", value: "" } });
-        },
-        (error) => {
-          setErrorData({
-            title: API_ERROR_ALERT,
-            list: [error["response"]["data"]["detail"]],
-          });
-          setHasApiKey(false);
-          setValidApiKey(false);
-          setLoadingApiKey(false);
-        },
-      );
-    }
-  };
 
   function handleInput({
     target: { name, value },
@@ -175,7 +109,7 @@ export default function GeneralPage() {
       <div className="grid gap-6">
         <Form.Root
           onSubmit={(event) => {
-            handlePatchGradient();
+            handlePatchGradient(gradient);
             event.preventDefault();
           }}
         >
@@ -213,7 +147,7 @@ export default function GeneralPage() {
         {!autoLogin && (
           <Form.Root
             onSubmit={(event) => {
-              handlePatchPassword();
+              handlePatchPassword(password, cnfPassword, handleInput);
               event.preventDefault();
             }}
           >
@@ -281,7 +215,7 @@ export default function GeneralPage() {
           <Form.Root
             onSubmit={(event) => {
               event.preventDefault();
-              handleSaveKey();
+              handleSaveKey(apikey, handleInput);
             }}
           >
             <Card x-chunk="dashboard-04-chunk-2" id="api">

src/frontend/src/pages/SettingsPage/pages/hooks/use-patch-gradient.tsx

@@ -0,0 +1,37 @@
+import cloneDeep from "lodash/cloneDeep";
+import {
+  SAVE_ERROR_ALERT,
+  SAVE_SUCCESS_ALERT,
+} from "../../../../constants/alerts_constants";
+import { updateUser } from "../../../../controllers/API";
+
+const usePatchGradient = (
+  setSuccessData,
+  setErrorData,
+  currentUserData,
+  setUserData,
+) => {
+  const handlePatchGradient = async (gradient) => {
+    try {
+      if (gradient !== "") {
+        await updateUser(currentUserData.id, { profile_image: gradient });
+        let newUserData = cloneDeep(currentUserData);
+        newUserData.profile_image = gradient;
+        setUserData(newUserData);
+      }
+      setSuccessData({ title: SAVE_SUCCESS_ALERT });
+    } catch (error) {
+      setErrorData({
+        title: SAVE_ERROR_ALERT,
+        list: [(error as any)?.response?.data?.detail],
+      });
+    }
+  };
+
+  return {
+    currentUserData,
+    handlePatchGradient,
+  };
+};
+
+export default usePatchGradient;

src/frontend/src/pages/SettingsPage/pages/hooks/use-patch-password.tsx

@@ -0,0 +1,36 @@
+import {
+  EDIT_PASSWORD_ALERT_LIST,
+  EDIT_PASSWORD_ERROR_ALERT,
+  SAVE_ERROR_ALERT,
+  SAVE_SUCCESS_ALERT,
+} from "../../../../constants/alerts_constants";
+import { resetPassword } from "../../../../controllers/API";
+
+const usePatchPassword = (userData, setSuccessData, setErrorData) => {
+  const handlePatchPassword = async (password, cnfPassword, handleInput) => {
+    if (password !== cnfPassword) {
+      setErrorData({
+        title: EDIT_PASSWORD_ERROR_ALERT,
+        list: [EDIT_PASSWORD_ALERT_LIST],
+      });
+      return;
+    }
+    try {
+      if (password !== "") await resetPassword(userData.id, { password });
+      handleInput({ target: { name: "password", value: "" } });
+      handleInput({ target: { name: "cnfPassword", value: "" } });
+      setSuccessData({ title: SAVE_SUCCESS_ALERT });
+    } catch (error) {
+      setErrorData({
+        title: SAVE_ERROR_ALERT,
+        list: [(error as any)?.response?.data?.detail],
+      });
+    }
+  };
+
+  return {
+    handlePatchPassword,
+  };
+};
+
+export default usePatchPassword;

src/frontend/src/pages/SettingsPage/pages/hooks/use-save-key.tsx

@@ -0,0 +1,48 @@
+import { useContext } from "react";
+import {
+  API_ERROR_ALERT,
+  API_SUCCESS_ALERT,
+} from "../../../../constants/alerts_constants";
+import { AuthContext } from "../../../../contexts/authContext";
+import { addApiKeyStore } from "../../../../controllers/API";
+
+const useSaveKey = (
+  setSuccessData,
+  setErrorData,
+  setHasApiKey,
+  setValidApiKey,
+  setLoadingApiKey,
+) => {
+  const { storeApiKey } = useContext(AuthContext);
+
+  const handleSaveKey = (apikey, handleInput) => {
+    if (apikey) {
+      setLoadingApiKey(true);
+      addApiKeyStore(apikey).then(
+        () => {
+          setSuccessData({ title: API_SUCCESS_ALERT });
+          storeApiKey(apikey);
+          setHasApiKey(true);
+          setValidApiKey(true);
+          setLoadingApiKey(false);
+          handleInput({ target: { name: "apikey", value: "" } });
+        },
+        (error) => {
+          setErrorData({
+            title: API_ERROR_ALERT,
+            list: [error.response.data.detail],
+          });
+          setHasApiKey(false);
+          setValidApiKey(false);
+          setLoadingApiKey(false);
+        },
+      );
+    }
+  };
+
+  return {
+    handleSaveKey,
+  };
+};
+
+export default useSaveKey;

src/frontend/src/pages/SettingsPage/pages/hooks/use-scroll-to-element.tsx

@@ -0,0 +1,17 @@
+import { useEffect } from "react";
+
+const useScrollToElement = (scrollId, setCurrentFlowId) => {
+  useEffect(() => {
+    const element = document.getElementById(scrollId ?? "null");
+    if (element) {
+      // Scroll smoothly to the top of the next section
+      element.scrollIntoView({ behavior: "smooth" });
+    }
+  }, [scrollId]);
+
+  useEffect(() => {
+    setCurrentFlowId("");
+  }, [setCurrentFlowId]);
+};
+
+export default useScrollToElement;

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

@@ -11,6 +11,7 @@ test("shoud delete a flow", async ({ page }) => {
     .fill(process.env.STORE_API_KEY ?? "");
   await page.getByText("Save").last().click();
   await page.waitForTimeout(8000);
+  await page.getByText("Store").nth(0).click();
 
   await page.getByTestId("install-Website Content QA").click();
   await page.waitForTimeout(5000);

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

@@ -45,7 +45,8 @@ test("flowSettings", async ({ page }) => {
     );
 
   await page.getByTestId("save-flow-settings").click();
-  await page.getByTestId("save-flow-settings").click();
+
+  await page.getByText("Close").last().click();
 
   await page.waitForTimeout(1000);
 

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

@@ -96,27 +96,29 @@ test("should filter by type", async ({ page }) => {
   await page.getByText("Website Content QA").isVisible();
 
   await page.getByTestId("flows-button-store").click();
-  await page.waitForTimeout(3000);
+  await page.waitForTimeout(8000);
 
   let iconGroup = await page.getByTestId("icon-Group")?.count();
   expect(iconGroup).not.toBe(0);
 
-  await page.getByText("icon-ToyBrick").isHidden();
+  await page.getByText("icon-ToyBrick").last().isHidden();
 
   await page.getByTestId("components-button-store").click();
-  await page.waitForTimeout(3000);
+  await page.waitForTimeout(8000);
 
-  await page.getByTestId("icon-Group").isHidden();
+  await page.getByTestId("icon-Group").last().isHidden();
   let toyBrick = await page.getByTestId("icon-ToyBrick")?.count();
   expect(toyBrick).not.toBe(0);
 
   await page.getByTestId("all-button-store").click();
-  await page.waitForTimeout(3000);
+  await page.waitForTimeout(8000);
 
-  iconGroup = await page.getByTestId("icon-Group")?.count();
+  let iconGroupAllCount = await page.getByTestId("icon-Group")?.count();
-  toyBrick = await page.getByTestId("icon-ToyBrick")?.count();
+  await page.waitForTimeout(2000);
+  let toyBrickAllCount = await page.getByTestId("icon-ToyBrick")?.count();
+  await page.waitForTimeout(2000);
 
-  if (iconGroup === 0 || toyBrick === 0) {
+  if (iconGroupAllCount === 0 || toyBrickAllCount === 0) {
     expect(false).toBe(true);
   }
 });
@@ -252,6 +254,7 @@ test("should share component with share button", async ({ page }) => {
     .getByPlaceholder("Flow description")
     .inputValue();
   await page.getByText("Save").last().click();
+  await page.getByText("Close").last().click();
 
   await page.getByTestId("icon-Share3").first().click();
   await page.getByText("Name:").isVisible();