Refactor: Replace all alert string into a constants file

src/frontend/src/alerts_constants.tsx

@@ -0,0 +1,49 @@
+// ERROR
+export const MISSED_ERROR_ALERT = "Oops! Looks like you missed something";
+export const INVALID_FILE_ALERT = "Please select a valid file. Only these file types are allowed:";
+export const CONSOLE_ERROR_MSG = "Error occurred while uploading file";
+export const CONSOLE_SUCCESS_MSG = "File uploaded successfully";
+export const INFO_MISSING_ALERT = "Oops! Looks like you missed some required information:";
+export const FUNC_ERROR_ALERT = "There is an error in your function"
+export const IMPORT_ERROR_ALERT = "There is an error in your imports"
+export const BUG_ALERT = "Something went wrong, please try again"
+export const CODE_ERROR_ALERT = "There is something wrong with this code, please review it"
+export const CHAT_ERROR_ALERT = "Please build the flow again before using the chat."
+export const MSG_ERROR_ALERT = "There was an error sending the message"
+export const PROMPT_ERROR_ALERT = "There is something wrong with this prompt, please review it"
+export const API_ERROR_ALERT = "There was an error saving the API Key, please try again."
+export const USER_DEL_ERROR_ALERT = "Error on delete user"
+export const USER_EDIT_ERROR_ALERT = "Error on edit user"
+export const USER_ADD_ERROR_ALERT = "Error when adding new user"
+export const SIGNIN_ERROR_ALERT = "Error signing in"
+export const DEL_KEY_ERROR_ALERT = "Error on delete key"
+export const UPLOAD_ERROR_ALERT = "Error uploading file"
+export const WRONG_FILE_ERROR_ALERT = "Invalid file type"
+export const UPLOAD_ALERT_LIST = "Please upload a JSON file"
+export const INVALID_SELECTION_ERROR_ALERT = "Invalid selection"
+export const EDIT_PASSWORD_ERROR_ALERT = "Error changing password"
+export const EDIT_PASSWORD_ALERT_LIST = "Passwords do not match"
+export const SAVE_ERROR_ALERT = "Error saving changes"
+export const SIGNUP_ERROR_ALERT = "Error signing up"
+export const APIKEY_ERROR_ALERT = "API Key Error"
+export const NOAPI_ERROR_ALERT = "You don't have an API Key. Please add one to use the Langflow Store."
+export const INVALID_API_ERROR_ALERT = "Your API Key is not valid. Please add a valid API Key to use the Langflow Store."
+export const COMPONENTS_ERROR_ALERT = "Error getting components."
+
+// NOTICE
+export const NOCHATOUTPUT_NOTICE_ALERT = "There is no ChatOutput node in the flow."
+export const API_WARNING_NOTICE_ALERT = "Warning: Critical data, JSON file may include API keys."
+export const COPIED_NOTICE_ALERT = "API Key copied!"
+export const TEMP_NOTICE_ALERT = "Your template does not have any variables."
+
+
+// SUCCESS
+export const CODE_SUCCESS_ALERT = "Code is ready to run"
+export const PROMPT_SUCCESS_ALERT = "Prompt is ready"
+export const API_SUCCESS_ALERT = "Success! Your API Key has been saved."
+export const USER_DEL_SUCCESS_ALERT = "Success! User deleted!"
+export const USER_EDIT_SUCCESS_ALERT = "Success! User edited!"
+export const USER_ADD_SUCCESS_ALERT = "Success! New user added!"
+export const DEL_KEY_SUCCESS_ALERT = "Success! Key deleted!"
+export const FLOW_BUILD_SUCCESS_ALERT = `Flow built successfully`
+export const SAVE_SUCCESS_ALERT = "Changes saved successfully!"

src/frontend/src/components/chatComponent/buildTrigger/index.tsx

@@ -8,6 +8,7 @@ import useFlowStore from "../../../stores/flowStore";
 import { validateNodes } from "../../../utils/reactflowUtils";
 import RadialProgressComponent from "../../RadialProgress";
 import IconComponent from "../../genericIconComponent";
+import { MISSED_ERROR_ALERT } from "../../../alerts_constants";
 
 export default function BuildTrigger({
   open,
@@ -36,7 +37,7 @@ export default function BuildTrigger({
       const errors = validateNodes(nodes, edges);
       if (errors.length > 0) {
         setErrorData({
-          title: "Oops! Looks like you missed something",
+          title: MISSED_ERROR_ALERT,
           list: errors,
         });
         return;

src/frontend/src/components/inputFileComponent/index.tsx

@@ -4,6 +4,7 @@ import useAlertStore from "../../stores/alertStore";
 import useFlowsManagerStore from "../../stores/flowsManagerStore";
 import { FileComponentType } from "../../types/components";
 import IconComponent from "../genericIconComponent";
+import { CONSOLE_ERROR_MSG, CONSOLE_SUCCESS_MSG, INVALID_FILE_ALERT } from "../../alerts_constants";
 
 export default function InputFileComponent({
   value,
@@ -61,7 +62,7 @@ export default function InputFileComponent({
         uploadFile(file, currentFlowId)
           .then((res) => res.data)
           .then((data) => {
-            console.log("File uploaded successfully");
+            console.log(CONSOLE_SUCCESS_MSG);
             // Get the file name from the response
             const { file_path } = data;
             console.log("File name:", file_path);
@@ -75,14 +76,13 @@ export default function InputFileComponent({
             setLoading(false);
           })
           .catch(() => {
-            console.error("Error occurred while uploading file");
+            console.error(CONSOLE_ERROR_MSG);
             setLoading(false);
           });
       } else {
         // Show an error if the file type is not allowed
         setErrorData({
-          title:
+          title: INVALID_FILE_ALERT,
-            "Please select a valid file. Only these file types are allowed:",
           list: fileTypes,
         });
         setLoading(false);

src/frontend/src/components/newChatView/index.tsx

@@ -16,6 +16,7 @@ import { validateNodes } from "../../utils/reactflowUtils";
 import { classNames } from "../../utils/utils";
 import ChatInput from "./chatInput";
 import ChatMessage from "./chatMessage";
+import { INFO_MISSING_ALERT, NOCHATOUTPUT_NOTICE_ALERT } from "../../alerts_constants";
 
 export default function NewChatView(): JSX.Element {
   const [chatValue, setChatValue] = useState("");
@@ -44,7 +45,7 @@ export default function NewChatView(): JSX.Element {
 
   useEffect(() => {
     if (!outputTypes.includes("ChatOutput")) {
-      setNoticeData({ title: "There is no ChatOutput node in the flow." });
+      setNoticeData({ title: NOCHATOUTPUT_NOTICE_ALERT });
     }
   }, []);
 
@@ -144,7 +145,7 @@ export default function NewChatView(): JSX.Element {
       //@ts-ignore
     } else {
       setErrorData({
-        title: "Oops! Looks like you missed some required information:",
+        title: INFO_MISSING_ALERT,
         list: nodeValidationErrors,
       });
     }

src/frontend/src/modals/SecretKeyModal/index.tsx

@@ -8,6 +8,7 @@ import useAlertStore from "../../stores/alertStore";
 import { ApiKeyType } from "../../types/components";
 import { nodeIconsLucide } from "../../utils/styleUtils";
 import BaseModal from "../baseModal";
+import { COPIED_NOTICE_ALERT } from "../../alerts_constants";
 
 export default function SecretKeyModal({
   title,
@@ -47,7 +48,7 @@ export default function SecretKeyModal({
       inputRef?.current?.focus();
       inputRef?.current?.select();
       setSuccessData({
-        title: "API Key copied!",
+        title: COPIED_NOTICE_ALERT,
       });
       setTextCopied(false);
 

src/frontend/src/modals/StoreApiKeyModal/index.tsx

@@ -9,6 +9,7 @@ import useAlertStore from "../../stores/alertStore";
 import { useStoreStore } from "../../stores/storeStore";
 import { StoreApiKeyType } from "../../types/components";
 import BaseModal from "../baseModal";
+import { API_ERROR_ALERT, API_SUCCESS_ALERT } from "../../alerts_constants";
 
 export default function StoreApiKeyModal({
   children,
@@ -32,7 +33,7 @@ export default function StoreApiKeyModal({
       addApiKeyStore(apiKeyValue).then(
         () => {
           setSuccessData({
-            title: "Success! Your API Key has been saved.",
+            title: API_SUCCESS_ALERT,
           });
           storeApiKey(apiKeyValue);
           setOpen(false);
@@ -42,7 +43,7 @@ export default function StoreApiKeyModal({
         },
         (error) => {
           setErrorData({
-            title: "There was an error saving the API Key, please try again.",
+            title: API_ERROR_ALERT,
             list: [error["response"]["data"]["detail"]],
           });
           setHasApiKey(false);

src/frontend/src/modals/codeAreaModal/index.tsx

@@ -16,6 +16,7 @@ import { useDarkStore } from "../../stores/darkStore";
 import useFlowStore from "../../stores/flowStore";
 import { codeAreaModalPropsType } from "../../types/components";
 import BaseModal from "../baseModal";
+import { BUG_ALERT, CODE_ERROR_ALERT, CODE_SUCCESS_ALERT, FUNC_ERROR_ALERT, IMPORT_ERROR_ALERT } from "../../alerts_constants";
 
 export default function CodeAreaModal({
   value,
@@ -58,7 +59,7 @@ export default function CodeAreaModal({
           let funcErrors = apiReturn.data.function.errors;
           if (funcErrors.length === 0 && importsErrors.length === 0) {
             setSuccessData({
-              title: "Code is ready to run",
+              title: CODE_SUCCESS_ALERT,
             });
             setOpen(false);
             setValue(code);
@@ -66,26 +67,26 @@ export default function CodeAreaModal({
           } else {
             if (funcErrors.length !== 0) {
               setErrorData({
-                title: "There is an error in your function",
+                title: FUNC_ERROR_ALERT,
                 list: funcErrors,
               });
             }
             if (importsErrors.length !== 0) {
               setErrorData({
-                title: "There is an error in your imports",
+                title: IMPORT_ERROR_ALERT,
                 list: importsErrors,
               });
             }
           }
         } else {
           setErrorData({
-            title: "Something went wrong, please try again",
+            title: BUG_ALERT,
           });
         }
       })
       .catch((_) => {
         setErrorData({
-          title: "There is something wrong with this code, please review it",
+          title: CODE_ERROR_ALERT,
         });
       });
   }

src/frontend/src/modals/exportModal/index.tsx

@@ -9,6 +9,7 @@ import { useDarkStore } from "../../stores/darkStore";
 import useFlowsManagerStore from "../../stores/flowsManagerStore";
 import { downloadFlow, removeApiKeys } from "../../utils/reactflowUtils";
 import BaseModal from "../baseModal";
+import { API_WARNING_NOTICE_ALERT } from "../../alerts_constants";
 
 const ExportModal = forwardRef(
   (props: { children: ReactNode }, ref): JSX.Element => {
@@ -78,7 +79,7 @@ const ExportModal = forwardRef(
                 );
                 setNoticeData({
                   title:
-                    "Warning: Critical data, JSON file may include API keys.",
+                    API_WARNING_NOTICE_ALERT,
                 });
               } else
                 downloadFlow(

src/frontend/src/modals/formModal/index.tsx

@@ -27,6 +27,7 @@ import useAlertStore from "../../stores/alertStore";
 import useFlowStore from "../../stores/flowStore";
 import { FlowState } from "../../types/tabs";
 import { validateNodes } from "../../utils/reactflowUtils";
+import { CHAT_ERROR_ALERT, INFO_MISSING_ALERT, MSG_ERROR_ALERT } from "../../alerts_constants";
 
 export default function FormModal({
   flow,
@@ -169,7 +170,7 @@ export default function FormModal({
             connectWS();
           } else {
             setErrorData({
-              title: "Please build the flow again before using the chat.",
+              title: CHAT_ERROR_ALERT,
             });
           }
         })
@@ -356,7 +357,7 @@ export default function FormModal({
       }
     } catch (error) {
       setErrorData({
-        title: "There was an error sending the message",
+        title: MSG_ERROR_ALERT,
         list: [(error as { message: string }).message],
       });
       setChatValue(data.inputs);
@@ -401,7 +402,7 @@ export default function FormModal({
       }
     } else {
       setErrorData({
-        title: "Oops! Looks like you missed some required information:",
+        title: INFO_MISSING_ALERT,
         list: nodeValidationErrors,
       });
     }

src/frontend/src/modals/genericModal/index.tsx

@@ -19,6 +19,7 @@ import { genericModalPropsType } from "../../types/components";
 import { handleKeyDown } from "../../utils/reactflowUtils";
 import { classNames, varHighlightHTML } from "../../utils/utils";
 import BaseModal from "../baseModal";
+import { BUG_ALERT, PROMPT_ERROR_ALERT, PROMPT_SUCCESS_ALERT, TEMP_NOTICE_ALERT } from "../../alerts_constants";
 
 export default function GenericModal({
   field_name = "",
@@ -133,17 +134,17 @@ export default function GenericModal({
           }
           if (!inputVariables || inputVariables.length === 0) {
             setNoticeData({
-              title: "Your template does not have any variables.",
+              title: TEMP_NOTICE_ALERT,
             });
           } else {
             setSuccessData({
-              title: "Prompt is ready",
+              title: PROMPT_SUCCESS_ALERT,
             });
           }
         } else {
           setIsEdit(true);
           setErrorData({
-            title: "Something went wrong, please try again",
+            title: BUG_ALERT,
           });
         }
       })
@@ -151,7 +152,7 @@ export default function GenericModal({
         console.log(error);
         setIsEdit(true);
         return setErrorData({
-          title: "There is something wrong with this prompt, please review it",
+          title: PROMPT_ERROR_ALERT,
           list: [error.toString()],
         });
       });

src/frontend/src/pages/AdminPage/LoginPage/index.tsx

@@ -11,6 +11,7 @@ import {
   inputHandlerEventType,
   loginInputStateType,
 } from "../../../types/components";
+import { SIGNIN_ERROR_ALERT } from "../../../alerts_constants";
 
 export default function LoginAdminPage() {
   const navigate = useNavigate();
@@ -39,7 +40,7 @@ export default function LoginAdminPage() {
       })
       .catch((error) => {
         setErrorData({
-          title: "Error signing in",
+          title: SIGNIN_ERROR_ALERT,
           list: [error["response"]["data"]["detail"]],
         });
       });

src/frontend/src/pages/AdminPage/index.tsx

@@ -33,6 +33,7 @@ import useAlertStore from "../../stores/alertStore";
 import useFlowsManagerStore from "../../stores/flowsManagerStore";
 import { Users } from "../../types/api";
 import { UserInputType } from "../../types/components";
+import { USER_ADD_ERROR_ALERT, USER_ADD_SUCCESS_ALERT, USER_DEL_ERROR_ALERT, USER_DEL_SUCCESS_ALERT, USER_EDIT_ERROR_ALERT, USER_EDIT_SUCCESS_ALERT } from "../../alerts_constants";
 
 export default function AdminPage() {
   const [inputValue, setInputValue] = useState("");
@@ -117,12 +118,12 @@ export default function AdminPage() {
       .then((res) => {
         resetFilter();
         setSuccessData({
-          title: "Success! User deleted!",
+          title: USER_DEL_SUCCESS_ALERT,
         });
       })
       .catch((error) => {
         setErrorData({
-          title: "Error on delete user",
+          title: USER_DEL_ERROR_ALERT,
           list: [error["response"]["data"]["detail"]],
         });
       });
@@ -133,12 +134,12 @@ export default function AdminPage() {
       .then((res) => {
         resetFilter();
         setSuccessData({
-          title: "Success! User edited!",
+          title: USER_EDIT_SUCCESS_ALERT,
         });
       })
       .catch((error) => {
         setErrorData({
-          title: "Error on edit user",
+          title: USER_EDIT_ERROR_ALERT,
           list: [error["response"]["data"]["detail"]],
         });
       });
@@ -152,12 +153,12 @@ export default function AdminPage() {
       .then((res) => {
         resetFilter();
         setSuccessData({
-          title: "Success! User edited!",
+          title: USER_EDIT_SUCCESS_ALERT,
         });
       })
       .catch((error) => {
         setErrorData({
-          title: "Error on edit user",
+          title: USER_EDIT_ERROR_ALERT,
           list: [error["response"]["data"]["detail"]],
         });
       });
@@ -170,12 +171,12 @@ export default function AdminPage() {
       .then((res) => {
         resetFilter();
         setSuccessData({
-          title: "Success! User edited!",
+          title: USER_EDIT_SUCCESS_ALERT,
         });
       })
       .catch((error) => {
         setErrorData({
-          title: "Error on edit user",
+          title: USER_EDIT_ERROR_ALERT,
           list: [error["response"]["data"]["detail"]],
         });
       });
@@ -190,13 +191,13 @@ export default function AdminPage() {
         }).then((res) => {
           resetFilter();
           setSuccessData({
-            title: "Success! New user added!",
+            title: USER_ADD_SUCCESS_ALERT,
           });
         });
       })
       .catch((error) => {
         setErrorData({
-          title: "Error when adding new user",
+          title: USER_ADD_ERROR_ALERT,
           list: [error.response.data.detail],
         });
       });

src/frontend/src/pages/ApiKeysPage/index.tsx

@@ -26,6 +26,7 @@ import {
 } from "../../constants/constants";
 import useAlertStore from "../../stores/alertStore";
 import { ApiKey } from "../../types/components";
+import { DEL_KEY_ERROR_ALERT, DEL_KEY_SUCCESS_ALERT } from "../../alerts_constants";
 
 export default function ApiKeysPage() {
   const [loadingKeys, setLoadingKeys] = useState(true);
@@ -63,12 +64,12 @@ export default function ApiKeysPage() {
       .then((res) => {
         resetFilter();
         setSuccessData({
-          title: "Success! Key deleted!",
+          title: DEL_KEY_SUCCESS_ALERT,
         });
       })
       .catch((error) => {
         setErrorData({
-          title: "Error on delete key",
+          title: DEL_KEY_ERROR_ALERT,
           list: [error["response"]["data"]["detail"]],
         });
       });

src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx

@@ -31,6 +31,7 @@ import { getRandomName, isWrappedWithClass } from "../../../../utils/utils";
 import ConnectionLineComponent from "../ConnectionLineComponent";
 import SelectionMenu from "../SelectionMenuComponent";
 import ExtraSidebar from "../extraSidebarComponent";
+import { INVALID_SELECTION_ERROR_ALERT, UPLOAD_ALERT_LIST, UPLOAD_ERROR_ALERT, WRONG_FILE_ERROR_ALERT } from "../../../../alerts_constants";
 
 const nodeTypes = {
   genericNode: GenericNode,
@@ -257,14 +258,14 @@ export default function Page({
             position: position,
           }).catch((error) => {
             setErrorData({
-              title: "Error uploading file",
+              title: UPLOAD_ERROR_ALERT,
               list: [error],
             });
           });
         } else {
           setErrorData({
-            title: "Invalid file type",
+            title: WRONG_FILE_ERROR_ALERT,
-            list: ["Please upload a JSON file"],
+            list: [UPLOAD_ALERT_LIST],
           });
         }
       }
@@ -432,7 +433,7 @@ export default function Page({
                         ]);
                       } else {
                         setErrorData({
-                          title: "Invalid selection",
+                          title: INVALID_SELECTION_ERROR_ALERT,
                           list: validateSelection(lastSelection!, edges),
                         });
                       }

src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx

@@ -25,6 +25,7 @@ import {
 } from "../../../../utils/utils";
 import DisclosureComponent from "../DisclosureComponent";
 import SidebarDraggableComponent from "./sideBarDraggableComponent";
+import { UPLOAD_ERROR_ALERT } from "../../../../alerts_constants";
 
 export default function ExtraSidebar(): JSX.Element {
   const data = useTypesStore((state) => state.data);
@@ -255,7 +256,7 @@ export default function ExtraSidebar(): JSX.Element {
                 uploadFlow({ newProject: false, isComponent: false }).catch(
                   (error) => {
                     setErrorData({
-                      title: "Error uploading file",
+                      title: UPLOAD_ERROR_ALERT,
                       list: [error],
                     });
                   }

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

@@ -9,6 +9,7 @@ import { Button } from "../../../../components/ui/button";
 import useAlertStore from "../../../../stores/alertStore";
 import useFlowsManagerStore from "../../../../stores/flowsManagerStore";
 import { FlowType } from "../../../../types/flow";
+import { CONSOLE_ERROR_MSG, UPLOAD_ALERT_LIST, WRONG_FILE_ERROR_ALERT } from "../../../../alerts_constants";
 
 export default function ComponentsComponent({
   is_component = true,
@@ -76,14 +77,14 @@ export default function ComponentsComponent({
           })
           .catch((error) => {
             setErrorData({
-              title: "Error uploading file",
+              title: CONSOLE_ERROR_MSG,
               list: [error],
             });
           });
       } else {
         setErrorData({
-          title: "Invalid file type",
+          title: WRONG_FILE_ERROR_ALERT,
-          list: ["Please upload a JSON file"],
+          list: [UPLOAD_ALERT_LIST],
         });
       }
     }

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

@@ -10,6 +10,7 @@ import { USER_PROJECTS_HEADER } from "../../constants/constants";
 import useAlertStore from "../../stores/alertStore";
 import useFlowsManagerStore from "../../stores/flowsManagerStore";
 import { downloadFlows } from "../../utils/reactflowUtils";
+import { CONSOLE_ERROR_MSG } from "../../alerts_constants";
 export default function HomePage(): JSX.Element {
   const addFlow = useFlowsManagerStore((state) => state.addFlow);
   const uploadFlow = useFlowsManagerStore((state) => state.uploadFlow);
@@ -40,7 +41,7 @@ export default function HomePage(): JSX.Element {
           })
           .catch((error) => {
             setErrorData({
-              title: "Error uploading file",
+              title: CONSOLE_ERROR_MSG,
               list: [error],
             });
           });

src/frontend/src/pages/ProfileSettingsPage/index.tsx

@@ -16,6 +16,7 @@ import {
   patchUserInputStateType,
 } from "../../types/components";
 import { gradients } from "../../utils/styleUtils";
+import { EDIT_PASSWORD_ALERT_LIST, EDIT_PASSWORD_ERROR_ALERT, SAVE_ERROR_ALERT, SAVE_SUCCESS_ALERT } from "../../alerts_constants";
 export default function ProfileSettingsPage(): JSX.Element {
   const setCurrentFlowId = useFlowsManagerStore(
     (state) => state.setCurrentFlowId
@@ -37,8 +38,8 @@ export default function ProfileSettingsPage(): JSX.Element {
   async function handlePatchUser() {
     if (password !== cnfPassword) {
       setErrorData({
-        title: "Error changing password",
+        title: EDIT_PASSWORD_ERROR_ALERT,
-        list: ["Passwords do not match"],
+        list: [EDIT_PASSWORD_ALERT_LIST],
       });
       return;
     }
@@ -54,10 +55,10 @@ export default function ProfileSettingsPage(): JSX.Element {
       }
       handleInput({ target: { name: "password", value: "" } });
       handleInput({ target: { name: "cnfPassword", value: "" } });
-      setSuccessData({ title: "Changes saved successfully!" });
+      setSuccessData({ title: SAVE_SUCCESS_ALERT });
     } catch (error) {
       setErrorData({
-        title: "Error saving changes",
+        title: SAVE_ERROR_ALERT,
         list: [(error as any).response.data.detail],
       });
     }

src/frontend/src/pages/StorePage/index.tsx

@@ -32,6 +32,7 @@ import useFlowsManagerStore from "../../stores/flowsManagerStore";
 import { useStoreStore } from "../../stores/storeStore";
 import { storeComponent } from "../../types/store";
 import { cn } from "../../utils/utils";
+import { APIKEY_ERROR_ALERT, COMPONENTS_ERROR_ALERT, INVALID_API_ERROR_ALERT, NOAPI_ERROR_ALERT } from "../../alerts_constants";
 
 export default function StorePage(): JSX.Element {
   const hasApiKey = useStoreStore((state) => state.hasApiKey);
@@ -71,17 +72,17 @@ export default function StorePage(): JSX.Element {
     if (!loadingApiKey) {
       if (!hasApiKey) {
         setErrorData({
-          title: "API Key Error",
+          title: APIKEY_ERROR_ALERT,
           list: [
-            "You don't have an API Key. Please add one to use the Langflow Store.",
+            NOAPI_ERROR_ALERT,
           ],
         });
         setLoading(false);
       } else if (!validApiKey) {
         setErrorData({
-          title: "API Key Error",
+          title: APIKEY_ERROR_ALERT,
           list: [
-            "Your API Key is not valid. Please add a valid API Key to use the Langflow Store.",
+            INVALID_API_ERROR_ALERT,
           ],
         });
       }
@@ -159,7 +160,7 @@ export default function StorePage(): JSX.Element {
           setTotalRowsCount(0);
           setLoading(false);
           setErrorData({
-            title: "Error getting components.",
+            title: COMPONENTS_ERROR_ALERT,
             list: [err["response"]["data"]["detail"]],
           });
         }

src/frontend/src/pages/loginPage/index.tsx

@@ -13,6 +13,7 @@ import {
   inputHandlerEventType,
   loginInputStateType,
 } from "../../types/components";
+import { SIGNIN_ERROR_ALERT } from "../../alerts_constants";
 
 export default function LoginPage(): JSX.Element {
   const [inputState, setInputState] =
@@ -42,7 +43,7 @@ export default function LoginPage(): JSX.Element {
       })
       .catch((error) => {
         setErrorData({
-          title: "Error signing in",
+          title: SIGNIN_ERROR_ALERT,
           list: [error["response"]["data"]["detail"]],
         });
       });

src/frontend/src/pages/signUpPage/index.tsx

@@ -15,6 +15,7 @@ import {
   inputHandlerEventType,
   signUpInputStateType,
 } from "../../types/components";
+import { SIGNUP_ERROR_ALERT } from "../../alerts_constants";
 
 export default function SignUp(): JSX.Element {
   const [inputState, setInputState] =
@@ -60,7 +61,7 @@ export default function SignUp(): JSX.Element {
           },
         } = error;
         setErrorData({
-          title: "Error signing up",
+          title: SIGNUP_ERROR_ALERT,
           list: [detail],
         });
         return;

src/frontend/src/stores/flowStore.ts

@@ -31,6 +31,7 @@ import { getInputsAndOutputs } from "../utils/storeUtils";
 import useAlertStore from "./alertStore";
 import { useDarkStore } from "./darkStore";
 import useFlowsManagerStore from "./flowsManagerStore";
+import { FLOW_BUILD_SUCCESS_ALERT } from "../alerts_constants";
 
 // this is our useStore hook that we can use in our components to get parts of the store and call actions
 const useFlowStore = create<FlowStoreType>((set, get) => ({
@@ -404,7 +405,7 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
         if (nodeId) {
           setSuccessData({ title: `${get().nodes.find((node) => node.id === nodeId)?.data.node?.display_name} built successfully` });
         } else {
-          setSuccessData({ title: `Flow built successfully` });
+          setSuccessData({ title: FLOW_BUILD_SUCCESS_ALERT });
         }
         get().setIsBuilding(false);
       },