Refactor: Replace all alert string into a constants file

This commit is contained in:
igorrCarvalho 2024-02-26 16:06:39 -03:00
commit 9323f773e1
22 changed files with 126 additions and 57 deletions

View file

@ -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!"

View file

@ -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;

View file

@ -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:
"Please select a valid file. Only these file types are allowed:",
title: INVALID_FILE_ALERT,
list: fileTypes,
});
setLoading(false);

View file

@ -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,
});
}

View file

@ -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);

View file

@ -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);

View file

@ -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,
});
});
}

View file

@ -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(

View file

@ -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,
});
}

View file

@ -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()],
});
});

View file

@ -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"]],
});
});

View file

@ -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],
});
});

View file

@ -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"]],
});
});

View file

@ -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",
list: ["Please upload a JSON file"],
title: WRONG_FILE_ERROR_ALERT,
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),
});
}

View file

@ -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],
});
}

View file

@ -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",
list: ["Please upload a JSON file"],
title: WRONG_FILE_ERROR_ALERT,
list: [UPLOAD_ALERT_LIST],
});
}
}

View file

@ -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],
});
});

View file

@ -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",
list: ["Passwords do not match"],
title: EDIT_PASSWORD_ERROR_ALERT,
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],
});
}

View file

@ -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"]],
});
}

View file

@ -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"]],
});
});

View file

@ -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;

View file

@ -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);
},