From 712d019f1e2c5685afd64f81b02ee331aa2690cb Mon Sep 17 00:00:00 2001 From: Lucas Oliveira Date: Thu, 6 Jun 2024 14:20:59 -0300 Subject: [PATCH 01/21] Added play on hover of entire node --- .../src/customNodes/genericNode/index.tsx | 70 +++++++++++-------- 1 file changed, 39 insertions(+), 31 deletions(-) diff --git a/src/frontend/src/customNodes/genericNode/index.tsx b/src/frontend/src/customNodes/genericNode/index.tsx index 5f145d523..c007caab3 100644 --- a/src/frontend/src/customNodes/genericNode/index.tsx +++ b/src/frontend/src/customNodes/genericNode/index.tsx @@ -56,14 +56,14 @@ export default function GenericNode({ const [nodeName, setNodeName] = useState(data.node!.display_name); const [inputDescription, setInputDescription] = useState(false); const [nodeDescription, setNodeDescription] = useState( - data.node?.description! + data.node?.description!, ); const [isOutdated, setIsOutdated] = useState(false); const buildStatus = useFlowStore( - (state) => state.flowBuildStatus[data.id]?.status + (state) => state.flowBuildStatus[data.id]?.status, ); const lastRunTime = useFlowStore( - (state) => state.flowBuildStatus[data.id]?.timestamp + (state) => state.flowBuildStatus[data.id]?.timestamp, ); const [validationStatus, setValidationStatus] = useState(null); @@ -116,7 +116,7 @@ export default function GenericNode({ updateNodeInternals(data.id); }, - [data.id, data.node, setNode, setIsOutdated] + [data.id, data.node, setNode, setIsOutdated], ); if (!data.node!.template) { @@ -255,8 +255,17 @@ export default function GenericNode({ const isDark = useDarkStore((state) => state.dark); const renderIconStatus = ( buildStatus: BuildStatus | undefined, - validationStatus: validationStatusType | null + validationStatus: validationStatusType | null, ) => { + const conditionSuccess = validationStatus && validationStatus.valid; + const conditionInactive = + validationStatus && + !validationStatus.valid && + buildStatus === BuildStatus.INACTIVE; + const conditionError = + buildStatus === BuildStatus.ERROR || + (validationStatus && !validationStatus.valid); + if (buildStatus === BuildStatus.BUILDING) { return ; } else { @@ -264,31 +273,30 @@ export default function GenericNode({ <> - {validationStatus && validationStatus.valid ? ( + {conditionSuccess ? ( - ) : validationStatus && - !validationStatus.valid && - buildStatus === BuildStatus.INACTIVE ? ( + ) : conditionInactive ? ( - ) : buildStatus === BuildStatus.ERROR || - (validationStatus && !validationStatus.valid) ? ( + ) : conditionError ? ( ) : ( - + <> )} ); @@ -296,7 +304,7 @@ export default function GenericNode({ }; const getSpecificClassFromBuildStatus = ( buildStatus: BuildStatus | undefined, - validationStatus: validationStatusType | null + validationStatus: validationStatusType | null, ) => { let isInvalid = validationStatus && !validationStatus.valid; @@ -320,11 +328,11 @@ export default function GenericNode({ selected: boolean, showNode: boolean, buildStatus: BuildStatus | undefined, - validationStatus: validationStatusType | null + validationStatus: validationStatusType | null, ) => { const specificClassFromBuildStatus = getSpecificClassFromBuildStatus( buildStatus, - validationStatus + validationStatus, ); const baseBorderClass = getBaseBorderClass(selected); @@ -332,8 +340,8 @@ export default function GenericNode({ const names = classNames( baseBorderClass, nodeSizeClass, - "generic-node-div", - specificClassFromBuildStatus + "generic-node-div group/node", + specificClassFromBuildStatus, ); return names; }; @@ -393,7 +401,7 @@ export default function GenericNode({ selected, showNode, buildStatus, - validationStatus + validationStatus, )} > {data.node?.beta && showNode && ( @@ -524,7 +532,7 @@ export default function GenericNode({ } title={getFieldTitle( data.node?.template!, - templateField + templateField, )} info={data.node?.template[templateField].info} name={templateField} @@ -552,7 +560,7 @@ export default function GenericNode({ proxy={data.node?.template[templateField].proxy} showNode={showNode} /> - ) + ), )} { setInputDescription(true); @@ -771,13 +779,13 @@ export default function GenericNode({ } title={getFieldTitle( data.node?.template!, - templateField + templateField, )} info={data.node?.template[templateField].info} name={templateField} tooltipTitle={ data.node?.template[templateField].input_types?.join( - "\n" + "\n", ) ?? data.node?.template[templateField].type } required={data.node!.template[templateField].required} @@ -804,7 +812,7 @@ export default function GenericNode({
{" "} From 7c28bb2bd693668d1797bf430af8247019d42765 Mon Sep 17 00:00:00 2001 From: Lucas Oliveira Date: Thu, 6 Jun 2024 14:35:12 -0300 Subject: [PATCH 02/21] Added Export handler on Main Page --- .../components/componentsComponent/index.tsx | 45 ++++++++++++++----- 1 file changed, 35 insertions(+), 10 deletions(-) diff --git a/src/frontend/src/pages/MainPage/components/componentsComponent/index.tsx b/src/frontend/src/pages/MainPage/components/componentsComponent/index.tsx index f7d52c611..3e167db13 100644 --- a/src/frontend/src/pages/MainPage/components/componentsComponent/index.tsx +++ b/src/frontend/src/pages/MainPage/components/componentsComponent/index.tsx @@ -18,6 +18,8 @@ import { getNameByType } from "../../utils/get-name-by-type"; import { sortFlows } from "../../utils/sort-flows"; import EmptyComponent from "../emptyComponent"; import HeaderComponent from "../headerComponent"; +import { downloadFlow, removeApiKeys } from "../../../../utils/reactflowUtils"; +import { useDarkStore } from "../../../../stores/darkStore"; export default function ComponentsComponent({ type = "all", @@ -31,22 +33,22 @@ export default function ComponentsComponent({ const allFlows = useFlowsManagerStore((state) => state.allFlows); const flowsFromFolder = useFolderStore( - (state) => state.selectedFolder?.flows + (state) => state.selectedFolder?.flows, ); const setSuccessData = useAlertStore((state) => state.setSuccessData); const setErrorData = useAlertStore((state) => state.setErrorData); const [openDelete, setOpenDelete] = useState(false); const searchFlowsComponents = useFlowsManagerStore( - (state) => state.searchFlowsComponents + (state) => state.searchFlowsComponents, ); const setSelectedFlowsComponentsCards = useFlowsManagerStore( - (state) => state.setSelectedFlowsComponentsCards + (state) => state.setSelectedFlowsComponentsCards, ); const selectedFlowsComponentsCards = useFlowsManagerStore( - (state) => state.selectedFlowsComponentsCards + (state) => state.selectedFlowsComponentsCards, ); const [handleFileDrop] = useFileDrop(uploadFlow, type)!; @@ -82,7 +84,7 @@ export default function ComponentsComponent({ f.name.toLowerCase().includes(searchFlowsComponents.toLowerCase()) || f.description .toLowerCase() - .includes(searchFlowsComponents.toLowerCase()) + .includes(searchFlowsComponents.toLowerCase()), ); if (searchFlowsComponents === "") { @@ -129,6 +131,8 @@ export default function ComponentsComponent({ setOpenDelete(true); } else if (action === "duplicate") { handleDuplicate(); + } else if (action === "exprot") { + handleExport(); } }; @@ -137,9 +141,9 @@ export default function ComponentsComponent({ selectedFlowsComponentsCards.map((selectedFlow) => addFlow( true, - allFlows.find((flow) => flow.id === selectedFlow) - ) - ) + allFlows.find((flow) => flow.id === selectedFlow), + ), + ), ).then(() => { resetFilter(); getFoldersApi(true); @@ -152,6 +156,26 @@ export default function ComponentsComponent({ }); }; + const version = useDarkStore((state) => state.version); + + const handleExport = () => { + selectedFlowsComponentsCards.map((selectedFlowId) => { + const selectedFlow = allFlows.find((flow) => flow.id === selectedFlowId); + downloadFlow( + removeApiKeys({ + id: selectedFlow!.id, + data: selectedFlow!.data!, + description: selectedFlow!.description, + name: selectedFlow!.name, + last_tested_version: version, + is_component: false, + }), + selectedFlow!.name, + selectedFlow!.description, + ); + }); + }; + const handleDeleteMultiple = () => { removeFlow(selectedFlowsComponentsCards) .then(() => { @@ -180,7 +204,7 @@ export default function ComponentsComponent({ return true; } return false; - } + }, ); setSelectedFlowsComponentsCards(selectedFlows); @@ -215,7 +239,7 @@ export default function ComponentsComponent({ if (type === "all") return allFlows?.length; return allFlows?.filter( - (f) => (f.is_component ?? false) === (type === "component") + (f) => (f.is_component ?? false) === (type === "component"), )?.length; }; @@ -226,6 +250,7 @@ export default function ComponentsComponent({ handleDelete={() => handleSelectOptionsChange("delete")} handleSelectAll={handleSelectAll} handleDuplicate={() => handleSelectOptionsChange("duplicate")} + handleExport={() => handleSelectOptionsChange("export")} disableFunctions={!(selectedFlowsComponentsCards?.length > 0)} /> )} From 5b1de707fa72cd6a00f52ce1202769b523ca11f0 Mon Sep 17 00:00:00 2001 From: Lucas Oliveira Date: Thu, 6 Jun 2024 14:37:30 -0300 Subject: [PATCH 03/21] Added handleExport as parameter of header and added button to export --- .../components/headerComponent/index.tsx | 22 ++++++++++++++++++- 1 file changed, 21 insertions(+), 1 deletion(-) diff --git a/src/frontend/src/pages/MainPage/components/headerComponent/index.tsx b/src/frontend/src/pages/MainPage/components/headerComponent/index.tsx index 2d2e43a2a..756fda03c 100644 --- a/src/frontend/src/pages/MainPage/components/headerComponent/index.tsx +++ b/src/frontend/src/pages/MainPage/components/headerComponent/index.tsx @@ -8,6 +8,7 @@ type HeaderComponentProps = { handleSelectAll: (select) => void; handleDelete: () => void; handleDuplicate: () => void; + handleExport: () => void; disableFunctions: boolean; }; @@ -15,6 +16,7 @@ const HeaderComponent = ({ handleSelectAll, handleDelete, handleDuplicate, + handleExport, disableFunctions, }: HeaderComponentProps) => { const [shouldSelectAll, setShouldSelectAll] = useState(true); @@ -49,6 +51,24 @@ const HeaderComponent = ({
+
+ Select items to export + ) : ( + Export selected items + ) + } + > + + +
From 22248d91040ba5f99b1a8058797c7f96df342f42 Mon Sep 17 00:00:00 2001 From: Lucas Oliveira Date: Thu, 6 Jun 2024 14:39:33 -0300 Subject: [PATCH 04/21] Fixed naming of errors --- .../pages/MainPage/components/componentsComponent/index.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/frontend/src/pages/MainPage/components/componentsComponent/index.tsx b/src/frontend/src/pages/MainPage/components/componentsComponent/index.tsx index 3e167db13..5bd536e8d 100644 --- a/src/frontend/src/pages/MainPage/components/componentsComponent/index.tsx +++ b/src/frontend/src/pages/MainPage/components/componentsComponent/index.tsx @@ -131,7 +131,7 @@ export default function ComponentsComponent({ setOpenDelete(true); } else if (action === "duplicate") { handleDuplicate(); - } else if (action === "exprot") { + } else if (action === "export") { handleExport(); } }; @@ -174,6 +174,7 @@ export default function ComponentsComponent({ selectedFlow!.description, ); }); + setSuccessData({ title: "Flows exported successfully" }); }; const handleDeleteMultiple = () => { @@ -185,7 +186,7 @@ export default function ComponentsComponent({ getFolderById(folderId ? folderId : myCollectionId); } setSuccessData({ - title: "Selected items deleted successfully!", + title: "Selected items deleted successfully", }); }) .catch(() => { From a96b08472f46526b9b1c4a8a504f2a4539ee876b Mon Sep 17 00:00:00 2001 From: Lucas Oliveira Date: Thu, 6 Jun 2024 14:42:50 -0300 Subject: [PATCH 05/21] Fixed buttons not using ShadCN buttons on header of components section --- .../components/headerComponent/index.tsx | 28 +++++++++++++++---- 1 file changed, 22 insertions(+), 6 deletions(-) diff --git a/src/frontend/src/pages/MainPage/components/headerComponent/index.tsx b/src/frontend/src/pages/MainPage/components/headerComponent/index.tsx index 756fda03c..114816a91 100644 --- a/src/frontend/src/pages/MainPage/components/headerComponent/index.tsx +++ b/src/frontend/src/pages/MainPage/components/headerComponent/index.tsx @@ -3,6 +3,7 @@ import IconComponent from "../../../../components/genericIconComponent"; import ShadTooltip from "../../../../components/shadTooltipComponent"; import { Checkbox } from "../../../../components/ui/checkbox"; import { cn } from "../../../../utils/utils"; +import { Button } from "../../../../components/ui/button"; type HeaderComponentProps = { handleSelectAll: (select) => void; @@ -61,12 +62,17 @@ const HeaderComponent = ({ ) } > - +
@@ -79,12 +85,17 @@ const HeaderComponent = ({ ) } > - +
@@ -97,7 +108,12 @@ const HeaderComponent = ({ ) } > - +
From 9c91f4056aadec354d02729c1fa1fa72f496f41a Mon Sep 17 00:00:00 2001 From: Lucas Oliveira Date: Thu, 6 Jun 2024 14:43:04 -0300 Subject: [PATCH 06/21] Fixed naming and position of alert on Export modal --- src/frontend/src/constants/constants.ts | 2 +- src/frontend/src/modals/exportModal/index.tsx | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/frontend/src/constants/constants.ts b/src/frontend/src/constants/constants.ts index d9ce00554..a113b3911 100644 --- a/src/frontend/src/constants/constants.ts +++ b/src/frontend/src/constants/constants.ts @@ -668,7 +668,7 @@ export const ZERO_NOTIFICATIONS = "No new notifications"; export const SUCCESS_BUILD = "Built sucessfully ✨"; export const ALERT_SAVE_WITH_API = - "Caution: Uncheck this box only removes API keys from fields specifically designated for API keys."; + "Caution: Unchecking this box only removes API keys from fields specifically designated for API keys."; export const SAVE_WITH_API_CHECKBOX = "Save with my API keys"; export const EDIT_TEXT_MODAL_TITLE = "Edit Text"; diff --git a/src/frontend/src/modals/exportModal/index.tsx b/src/frontend/src/modals/exportModal/index.tsx index a04891821..9cd81c123 100644 --- a/src/frontend/src/modals/exportModal/index.tsx +++ b/src/frontend/src/modals/exportModal/index.tsx @@ -45,7 +45,7 @@ const ExportModal = forwardRef( is_component: false, }, name!, - description + description, ); setNoticeData({ title: API_WARNING_NOTICE_ALERT, @@ -61,7 +61,7 @@ const ExportModal = forwardRef( is_component: false, }), name!, - description + description, ); setOpen(false); }} @@ -94,7 +94,7 @@ const ExportModal = forwardRef( {SAVE_WITH_API_CHECKBOX} - + {ALERT_SAVE_WITH_API} @@ -102,6 +102,6 @@ const ExportModal = forwardRef( ); - } + }, ); export default ExportModal; From fe9dcdf424efb3732ee520f6b85072a304508bb3 Mon Sep 17 00:00:00 2001 From: Lucas Oliveira Date: Thu, 6 Jun 2024 14:59:10 -0300 Subject: [PATCH 07/21] Fixed select all classes --- .../components/headerComponent/index.tsx | 30 ++++++++----------- 1 file changed, 12 insertions(+), 18 deletions(-) diff --git a/src/frontend/src/pages/MainPage/components/headerComponent/index.tsx b/src/frontend/src/pages/MainPage/components/headerComponent/index.tsx index 114816a91..dc7143198 100644 --- a/src/frontend/src/pages/MainPage/components/headerComponent/index.tsx +++ b/src/frontend/src/pages/MainPage/components/headerComponent/index.tsx @@ -31,25 +31,19 @@ const HeaderComponent = ({ <>
- -
From ec240072e77a95244c2ba2990a097165a5e8dbe8 Mon Sep 17 00:00:00 2001 From: Lucas Oliveira Date: Thu, 6 Jun 2024 15:03:10 -0300 Subject: [PATCH 08/21] Added Upload Flow button to main page --- .../components/headerComponent/index.tsx | 18 ++++++++++++++++-- 1 file changed, 16 insertions(+), 2 deletions(-) diff --git a/src/frontend/src/pages/MainPage/components/headerComponent/index.tsx b/src/frontend/src/pages/MainPage/components/headerComponent/index.tsx index dc7143198..e5145fd83 100644 --- a/src/frontend/src/pages/MainPage/components/headerComponent/index.tsx +++ b/src/frontend/src/pages/MainPage/components/headerComponent/index.tsx @@ -1,5 +1,7 @@ import { useState } from "react"; -import IconComponent from "../../../../components/genericIconComponent"; +import IconComponent, { + ForwardedIconComponent, +} from "../../../../components/genericIconComponent"; import ShadTooltip from "../../../../components/shadTooltipComponent"; import { Checkbox } from "../../../../components/ui/checkbox"; import { cn } from "../../../../utils/utils"; @@ -30,7 +32,19 @@ const HeaderComponent = ({ return ( <>
-
+
+ + {allFlows?.length > 0 && ( + handleSelectOptionsChange("delete")} + handleSelectAll={handleSelectAll} + handleDuplicate={() => handleSelectOptionsChange("duplicate")} + handleExport={() => handleSelectOptionsChange("export")} + disableFunctions={!(selectedFlowsComponentsCards?.length > 0)} + /> + )} +
{ return ( <> -
+
diff --git a/src/frontend/src/pages/MainPage/components/headerComponent/index.tsx b/src/frontend/src/pages/MainPage/components/headerComponent/index.tsx index a4fd7cfb4..b52fe8ad0 100644 --- a/src/frontend/src/pages/MainPage/components/headerComponent/index.tsx +++ b/src/frontend/src/pages/MainPage/components/headerComponent/index.tsx @@ -12,7 +12,6 @@ type HeaderComponentProps = { handleDelete: () => void; handleDuplicate: () => void; handleExport: () => void; - handleImport: () => void; disableFunctions: boolean; }; @@ -21,7 +20,6 @@ const HeaderComponent = ({ handleDelete, handleDuplicate, handleExport, - handleImport, disableFunctions, }: HeaderComponentProps) => { const [shouldSelectAll, setShouldSelectAll] = useState(true); @@ -33,20 +31,8 @@ const HeaderComponent = ({ return ( <> -
-
- +
+
-
+
Date: Thu, 6 Jun 2024 17:42:53 -0300 Subject: [PATCH 13/21] Removed Upload Flows from page --- .../components/componentsComponent/index.tsx | 12 ------------ .../MainPage/components/headerComponent/index.tsx | 4 ++-- src/frontend/src/utils/styleUtils.ts | 2 ++ 3 files changed, 4 insertions(+), 14 deletions(-) diff --git a/src/frontend/src/pages/MainPage/components/componentsComponent/index.tsx b/src/frontend/src/pages/MainPage/components/componentsComponent/index.tsx index 62ec3b246..fa5524891 100644 --- a/src/frontend/src/pages/MainPage/components/componentsComponent/index.tsx +++ b/src/frontend/src/pages/MainPage/components/componentsComponent/index.tsx @@ -270,18 +270,6 @@ export default function ComponentsComponent({ return ( <>
- {allFlows?.length > 0 && ( handleSelectOptionsChange("delete")} diff --git a/src/frontend/src/pages/MainPage/components/headerComponent/index.tsx b/src/frontend/src/pages/MainPage/components/headerComponent/index.tsx index ea45bb5aa..527c8d423 100644 --- a/src/frontend/src/pages/MainPage/components/headerComponent/index.tsx +++ b/src/frontend/src/pages/MainPage/components/headerComponent/index.tsx @@ -31,7 +31,7 @@ const HeaderComponent = ({ return ( <> -
+
-
+
Date: Thu, 6 Jun 2024 17:46:38 -0300 Subject: [PATCH 14/21] Fixed Messages icon --- src/frontend/src/pages/SettingsPage/index.tsx | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/frontend/src/pages/SettingsPage/index.tsx b/src/frontend/src/pages/SettingsPage/index.tsx index d956f20f4..d5face8fa 100644 --- a/src/frontend/src/pages/SettingsPage/index.tsx +++ b/src/frontend/src/pages/SettingsPage/index.tsx @@ -8,7 +8,7 @@ import useFlowsManagerStore from "../../stores/flowsManagerStore"; export default function SettingsPage(): JSX.Element { const pathname = location.pathname; const setCurrentFlowId = useFlowsManagerStore( - (state) => state.setCurrentFlowId + (state) => state.setCurrentFlowId, ); useEffect(() => { setCurrentFlowId(""); @@ -59,7 +59,10 @@ export default function SettingsPage(): JSX.Element { title: "Messages", href: "/settings/messages", icon: ( - + ), }, ]; From c8ce77bbf0d299e4efb4d935b437d39984d7d19a Mon Sep 17 00:00:00 2001 From: Lucas Oliveira Date: Thu, 6 Jun 2024 17:49:20 -0300 Subject: [PATCH 15/21] Fixed padding from Settings page outlet --- src/frontend/src/pages/SettingsPage/index.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/frontend/src/pages/SettingsPage/index.tsx b/src/frontend/src/pages/SettingsPage/index.tsx index d5face8fa..d201d2596 100644 --- a/src/frontend/src/pages/SettingsPage/index.tsx +++ b/src/frontend/src/pages/SettingsPage/index.tsx @@ -75,8 +75,10 @@ export default function SettingsPage(): JSX.Element { -
- +
+
+ +
From 2558786851a861cb3fb95540447e66e5c17b5a2f Mon Sep 17 00:00:00 2001 From: Lucas Oliveira Date: Thu, 6 Jun 2024 17:49:53 -0300 Subject: [PATCH 16/21] Fixed padding from Messages page --- .../src/pages/SettingsPage/pages/messagesPage/index.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/frontend/src/pages/SettingsPage/pages/messagesPage/index.tsx b/src/frontend/src/pages/SettingsPage/pages/messagesPage/index.tsx index 2fff6f360..c46910fd1 100644 --- a/src/frontend/src/pages/SettingsPage/pages/messagesPage/index.tsx +++ b/src/frontend/src/pages/SettingsPage/pages/messagesPage/index.tsx @@ -27,7 +27,7 @@ export default function MessagesPage() { setSelectedRows, setSuccessData, setErrorData, - selectedRows + selectedRows, ); const { handleUpdate } = useUpdateMessage(setSuccessData, setErrorData); @@ -52,7 +52,7 @@ export default function MessagesPage() { handleRemoveMessages={handleRemoveMessages} /> -
+
{ setSelectedRows( - event.api.getSelectedRows().map((row) => row.index) + event.api.getSelectedRows().map((row) => row.index), ); }} rowSelection="multiple" From 49f977911e14ec7d7af1b98f25cd52f43681b3fe Mon Sep 17 00:00:00 2001 From: Lucas Oliveira Date: Thu, 6 Jun 2024 18:32:30 -0300 Subject: [PATCH 17/21] Added logic to upload flows and folders at the same place --- src/frontend/src/stores/foldersStore.tsx | 41 ++++++++++++++++++------ 1 file changed, 32 insertions(+), 9 deletions(-) diff --git a/src/frontend/src/stores/foldersStore.tsx b/src/frontend/src/stores/foldersStore.tsx index ce063e032..3f3208e24 100644 --- a/src/frontend/src/stores/foldersStore.tsx +++ b/src/frontend/src/stores/foldersStore.tsx @@ -7,6 +7,7 @@ import { } from "../pages/MainPage/services"; import { FoldersStoreType } from "../types/zustand/folders"; import useFlowsManagerStore from "./flowsManagerStore"; +import { uploadFlowsToDatabase } from "../controllers/API"; export const useFolderStore = create((set, get) => ({ folders: [], @@ -17,18 +18,18 @@ export const useFolderStore = create((set, get) => ({ getFolders().then( (res) => { const foldersWithoutStarterProjects = res.filter( - (folder) => folder.name !== STARTER_FOLDER_NAME + (folder) => folder.name !== STARTER_FOLDER_NAME, ); const starterProjects = res.find( - (folder) => folder.name === STARTER_FOLDER_NAME + (folder) => folder.name === STARTER_FOLDER_NAME, ); set({ starterProjectId: starterProjects!.id ?? "" }); set({ folders: foldersWithoutStarterProjects }); const myCollectionId = res?.find( - (f) => f.name === DEFAULT_FOLDER + (f) => f.name === DEFAULT_FOLDER, )?.id; set({ myCollectionId }); @@ -45,7 +46,7 @@ export const useFolderStore = create((set, get) => ({ set({ folders: [] }); get().setLoading(false); reject(); - } + }, ); } }); @@ -65,7 +66,7 @@ export const useFolderStore = create((set, get) => ({ }, () => { get().setLoadingById(false); - } + }, ); } }, @@ -100,7 +101,7 @@ export const useFolderStore = create((set, get) => ({ folderIdDragging: "", setFolderIdDragging: (id) => set(() => ({ folderIdDragging: id })), uploadFolder: () => { - return new Promise(() => { + return new Promise((resolve) => { const input = document.createElement("input"); input.type = "file"; input.onchange = (event: Event) => { @@ -111,9 +112,31 @@ export const useFolderStore = create((set, get) => ({ const file = (event.target as HTMLInputElement).files![0]; const formData = new FormData(); formData.append("file", file); - uploadFlowsFromFolders(formData).then(() => { - get().getFoldersApi(true); - }); + const fileReader = new FileReader(); + fileReader.readAsText(file, "UTF-8"); + fileReader.onload = (e) => { + if (e && e.target) { + const data = JSON.parse(e.target.result as string); + if (data.data?.nodes) { + uploadFlowsToDatabase(formData).then(() => { + useFlowsManagerStore + .getState() + .refreshFlows() + .then(() => { + resolve(); + }); + }); + } else { + uploadFlowsFromFolders(formData).then(() => { + get() + .getFoldersApi(true) + .then(() => { + resolve(); + }); + }); + } + } + }; } }; input.click(); From 2fc3541f3377a88875f875ca9e7dade36ed13171 Mon Sep 17 00:00:00 2001 From: Lucas Oliveira Date: Thu, 6 Jun 2024 18:46:06 -0300 Subject: [PATCH 18/21] Fixed function to upload flows on Folder upload button --- .../components/sideBarFolderButtons/index.tsx | 22 +++++----- src/frontend/src/stores/foldersStore.tsx | 40 ++++++++----------- .../src/types/zustand/folders/index.ts | 2 +- 3 files changed, 30 insertions(+), 34 deletions(-) diff --git a/src/frontend/src/components/sidebarComponent/components/sideBarFolderButtons/index.tsx b/src/frontend/src/components/sidebarComponent/components/sideBarFolderButtons/index.tsx index bf2353edd..b887c2aab 100644 --- a/src/frontend/src/components/sidebarComponent/components/sideBarFolderButtons/index.tsx +++ b/src/frontend/src/components/sidebarComponent/components/sideBarFolderButtons/index.tsx @@ -33,7 +33,7 @@ const SideBarFoldersButtonsComponent = ({ const [foldersNames, setFoldersNames] = useState({}); const takeSnapshot = useFlowsManagerStore((state) => state.takeSnapshot); const [editFolders, setEditFolderName] = useState( - folders.map((obj) => ({ name: obj.name, edit: false })) + folders.map((obj) => ({ name: obj.name, edit: false })), ); const uploadFolder = useFolderStore((state) => state.uploadFolder); const currentFolder = pathname.split("/"); @@ -58,11 +58,13 @@ const SideBarFoldersButtonsComponent = ({ const { dragOver, dragEnter, dragLeave, onDrop } = useFileDrop( folderId, - handleFolderChange + handleFolderChange, ); const handleUploadFlowsToFolder = () => { - uploadFolder(folderId); + uploadFolder(folderId).then(() => { + getFolderById(folderId); + }); }; const handleDownloadFolder = (id: string) => { @@ -73,7 +75,7 @@ const SideBarFoldersButtonsComponent = ({ addFolder({ name: "New Folder", parent_id: null, description: "" }).then( (res) => { getFoldersApi(true); - } + }, ); } @@ -119,7 +121,7 @@ const SideBarFoldersButtonsComponent = ({ <> {folders.map((item, index) => { const editFolderName = editFolders?.filter( - (folder) => folder.name === item.name + (folder) => folder.name === item.name, )[0]; return (
handleChangeFolder!(item.id!)} > @@ -205,7 +207,7 @@ const SideBarFoldersButtonsComponent = ({ folders.map((obj) => ({ name: obj.name, edit: false, - })) + })), ); } if (e.key === "Enter") { @@ -238,10 +240,10 @@ const SideBarFoldersButtonsComponent = ({ }; const updatedFolder = await updateFolder( body, - item.id! + item.id!, ); const updateFolders = folders.filter( - (f) => f.name !== item.name + (f) => f.name !== item.name, ); setFolders([...updateFolders, updatedFolder]); setFoldersNames({}); @@ -249,7 +251,7 @@ const SideBarFoldersButtonsComponent = ({ folders.map((obj) => ({ name: obj.name, edit: false, - })) + })), ); } else { setFoldersNames((old) => ({ diff --git a/src/frontend/src/stores/foldersStore.tsx b/src/frontend/src/stores/foldersStore.tsx index 3f3208e24..4b878e764 100644 --- a/src/frontend/src/stores/foldersStore.tsx +++ b/src/frontend/src/stores/foldersStore.tsx @@ -112,31 +112,25 @@ export const useFolderStore = create((set, get) => ({ const file = (event.target as HTMLInputElement).files![0]; const formData = new FormData(); formData.append("file", file); - const fileReader = new FileReader(); - fileReader.readAsText(file, "UTF-8"); - fileReader.onload = (e) => { - if (e && e.target) { - const data = JSON.parse(e.target.result as string); - if (data.data?.nodes) { - uploadFlowsToDatabase(formData).then(() => { - useFlowsManagerStore - .getState() - .refreshFlows() - .then(() => { - resolve(); - }); + file.text().then((text) => { + const data = JSON.parse(text); + if (data.data?.nodes) { + useFlowsManagerStore + .getState() + .addFlow(true, data) + .then(() => { + resolve(); }); - } else { - uploadFlowsFromFolders(formData).then(() => { - get() - .getFoldersApi(true) - .then(() => { - resolve(); - }); - }); - } + } else { + uploadFlowsFromFolders(formData).then(() => { + get() + .getFoldersApi(true) + .then(() => { + resolve(); + }); + }); } - }; + }); } }; input.click(); diff --git a/src/frontend/src/types/zustand/folders/index.ts b/src/frontend/src/types/zustand/folders/index.ts index 352be3baf..2c5b2b96b 100644 --- a/src/frontend/src/types/zustand/folders/index.ts +++ b/src/frontend/src/types/zustand/folders/index.ts @@ -20,7 +20,7 @@ export type FoldersStoreType = { setFolderUrl: (folderUrl: string) => void; folderDragging: boolean; setFolderDragging: (set: boolean) => void; - uploadFolder: (folderId: string) => void; + uploadFolder: (folderId: string) => Promise; folderIdDragging: string; setFolderIdDragging: (id: string) => void; starterProjectId: string; From 18d78914640e9ded2734ae9da987a3d3eeebc225 Mon Sep 17 00:00:00 2001 From: Lucas Oliveira Date: Thu, 6 Jun 2024 18:54:02 -0300 Subject: [PATCH 19/21] Added error catching on folder upload --- .../components/sideBarFolderButtons/index.tsx | 16 ++++++++++--- src/frontend/src/stores/foldersStore.tsx | 23 ++++++++++++------- 2 files changed, 28 insertions(+), 11 deletions(-) diff --git a/src/frontend/src/components/sidebarComponent/components/sideBarFolderButtons/index.tsx b/src/frontend/src/components/sidebarComponent/components/sideBarFolderButtons/index.tsx index b887c2aab..3586596d6 100644 --- a/src/frontend/src/components/sidebarComponent/components/sideBarFolderButtons/index.tsx +++ b/src/frontend/src/components/sidebarComponent/components/sideBarFolderButtons/index.tsx @@ -13,6 +13,7 @@ import IconComponent, { import { Button, buttonVariants } from "../../../ui/button"; import { Input } from "../../../ui/input"; import useFileDrop from "../../hooks/use-on-file-drop"; +import useAlertStore from "../../../../stores/alertStore"; type SideBarFoldersButtonsComponentProps = { folders: FolderType[]; @@ -51,6 +52,7 @@ const SideBarFoldersButtonsComponent = ({ const location = useLocation(); const folderId = location?.state?.folderId ?? myCollectionId; const getFolderById = useFolderStore((state) => state.getFolderById); + const setErrorData = useAlertStore((state) => state.setErrorData); const handleFolderChange = (folderId: string) => { getFolderById(folderId); @@ -62,9 +64,17 @@ const SideBarFoldersButtonsComponent = ({ ); const handleUploadFlowsToFolder = () => { - uploadFolder(folderId).then(() => { - getFolderById(folderId); - }); + uploadFolder(folderId) + .then(() => { + getFolderById(folderId); + }) + .catch((err) => { + console.log(err); + setErrorData({ + title: `Error on upload`, + list: [err["response"]["data"]], + }); + }); }; const handleDownloadFolder = (id: string) => { diff --git a/src/frontend/src/stores/foldersStore.tsx b/src/frontend/src/stores/foldersStore.tsx index 4b878e764..9284c426f 100644 --- a/src/frontend/src/stores/foldersStore.tsx +++ b/src/frontend/src/stores/foldersStore.tsx @@ -101,7 +101,7 @@ export const useFolderStore = create((set, get) => ({ folderIdDragging: "", setFolderIdDragging: (id) => set(() => ({ folderIdDragging: id })), uploadFolder: () => { - return new Promise((resolve) => { + return new Promise((resolve, reject) => { const input = document.createElement("input"); input.type = "file"; input.onchange = (event: Event) => { @@ -120,15 +120,22 @@ export const useFolderStore = create((set, get) => ({ .addFlow(true, data) .then(() => { resolve(); + }) + .catch((error) => { + reject(error); }); } else { - uploadFlowsFromFolders(formData).then(() => { - get() - .getFoldersApi(true) - .then(() => { - resolve(); - }); - }); + uploadFlowsFromFolders(formData) + .then(() => { + get() + .getFoldersApi(true) + .then(() => { + resolve(); + }); + }) + .catch((error) => { + reject(error); + }); } }); } From ee46ab1d71f5ea03a27981db059e2040ac0138ba Mon Sep 17 00:00:00 2001 From: Lucas Oliveira Date: Thu, 6 Jun 2024 19:00:10 -0300 Subject: [PATCH 20/21] Fixed line clamp on alerts --- src/frontend/src/alerts/error/index.tsx | 6 ++++-- src/frontend/src/alerts/notice/index.tsx | 2 +- src/frontend/src/alerts/success/index.tsx | 2 +- 3 files changed, 6 insertions(+), 4 deletions(-) diff --git a/src/frontend/src/alerts/error/index.tsx b/src/frontend/src/alerts/error/index.tsx index 3690590b9..b70a5ae45 100644 --- a/src/frontend/src/alerts/error/index.tsx +++ b/src/frontend/src/alerts/error/index.tsx @@ -51,13 +51,15 @@ export default function ErrorAlert({ />
-

{title}

+

{title}

{list?.length !== 0 && list?.some((item) => item !== null && item !== undefined) ? (
    {list.map((item, index) => ( -
  • {item}
    • +
  • + {item} +
    • ))}
diff --git a/src/frontend/src/alerts/notice/index.tsx b/src/frontend/src/alerts/notice/index.tsx index fb29954ea..dcb034691 100644 --- a/src/frontend/src/alerts/notice/index.tsx +++ b/src/frontend/src/alerts/notice/index.tsx @@ -47,7 +47,7 @@ export default function NoticeAlert({ />
-

+

{title}

diff --git a/src/frontend/src/alerts/success/index.tsx b/src/frontend/src/alerts/success/index.tsx index db62c8432..270ae5515 100644 --- a/src/frontend/src/alerts/success/index.tsx +++ b/src/frontend/src/alerts/success/index.tsx @@ -45,7 +45,7 @@ export default function SuccessAlert({ />

-

{title}

+

{title}

From c6a5070e4b7b91100a26ff4da55c71153c656938 Mon Sep 17 00:00:00 2001 From: Lucas Oliveira Date: Thu, 6 Jun 2024 19:37:28 -0300 Subject: [PATCH 21/21] removed border from tables on Settings --- .../SettingsPage/pages/ApiKeysPage/index.tsx | 28 +++++-------- .../pages/GlobalVariablesPage/index.tsx | 36 +++++++---------- .../pages/ShortcutsPage/index.tsx | 14 +++---- .../SettingsPage/pages/messagesPage/index.tsx | 40 +++++++++---------- 4 files changed, 49 insertions(+), 69 deletions(-) diff --git a/src/frontend/src/pages/SettingsPage/pages/ApiKeysPage/index.tsx b/src/frontend/src/pages/SettingsPage/pages/ApiKeysPage/index.tsx index 8efa2e3f9..cc19346c3 100644 --- a/src/frontend/src/pages/SettingsPage/pages/ApiKeysPage/index.tsx +++ b/src/frontend/src/pages/SettingsPage/pages/ApiKeysPage/index.tsx @@ -52,23 +52,17 @@ export default function ApiKeysPage() { />
- - - { - setSelectedRows( - event.api.getSelectedRows().map((row) => row.id), - ); - }} - rowSelection="multiple" - suppressRowClickSelection={true} - pagination={true} - columnDefs={columnDefs} - rowData={keysList.current} - /> - - + { + setSelectedRows(event.api.getSelectedRows().map((row) => row.id)); + }} + rowSelection="multiple" + suppressRowClickSelection={true} + pagination={true} + columnDefs={columnDefs} + rowData={keysList.current} + />
); diff --git a/src/frontend/src/pages/SettingsPage/pages/GlobalVariablesPage/index.tsx b/src/frontend/src/pages/SettingsPage/pages/GlobalVariablesPage/index.tsx index d33761a17..554bfdd28 100644 --- a/src/frontend/src/pages/SettingsPage/pages/GlobalVariablesPage/index.tsx +++ b/src/frontend/src/pages/SettingsPage/pages/GlobalVariablesPage/index.tsx @@ -16,13 +16,13 @@ import { cn } from "../../../../utils/utils"; export default function GlobalVariablesPage() { const globalVariablesEntries = useGlobalVariablesStore( - (state) => state.globalVariablesEntries + (state) => state.globalVariablesEntries, ); const removeGlobalVariable = useGlobalVariablesStore( - (state) => state.removeGlobalVariable + (state) => state.removeGlobalVariable, ); const globalVariables = useGlobalVariablesStore( - (state) => state.globalVariables + (state) => state.globalVariables, ); const setErrorData = useAlertStore((state) => state.setErrorData); const getVariableId = useGlobalVariablesStore((state) => state.getVariableId); @@ -154,7 +154,7 @@ export default function GlobalVariablesPage() { @@ -168,23 +168,17 @@ export default function GlobalVariablesPage() {
- - - { - setSelectedRows( - event.api.getSelectedRows().map((row) => row.name) - ); - }} - rowSelection="multiple" - suppressRowClickSelection={true} - pagination={true} - columnDefs={colDefs} - rowData={rowData} - /> - - + { + setSelectedRows(event.api.getSelectedRows().map((row) => row.name)); + }} + rowSelection="multiple" + suppressRowClickSelection={true} + pagination={true} + columnDefs={colDefs} + rowData={rowData} + />
); diff --git a/src/frontend/src/pages/SettingsPage/pages/ShortcutsPage/index.tsx b/src/frontend/src/pages/SettingsPage/pages/ShortcutsPage/index.tsx index c6a5235d4..ebc0b5ed9 100644 --- a/src/frontend/src/pages/SettingsPage/pages/ShortcutsPage/index.tsx +++ b/src/frontend/src/pages/SettingsPage/pages/ShortcutsPage/index.tsx @@ -115,15 +115,11 @@ export default function ShortcutsPage() {
- - - - - +
); diff --git a/src/frontend/src/pages/SettingsPage/pages/messagesPage/index.tsx b/src/frontend/src/pages/SettingsPage/pages/messagesPage/index.tsx index c46910fd1..840460959 100644 --- a/src/frontend/src/pages/SettingsPage/pages/messagesPage/index.tsx +++ b/src/frontend/src/pages/SettingsPage/pages/messagesPage/index.tsx @@ -53,28 +53,24 @@ export default function MessagesPage() { />
- - - { - handleUpdateMessage(event); - }} - editable={["Sender Name", "Message"]} - overlayNoRowsTemplate="No data available" - onSelectionChanged={(event: SelectionChangedEvent) => { - setSelectedRows( - event.api.getSelectedRows().map((row) => row.index), - ); - }} - rowSelection="multiple" - suppressRowClickSelection={true} - pagination={true} - columnDefs={columns} - rowData={messages} - /> - - + { + handleUpdateMessage(event); + }} + editable={["Sender Name", "Message"]} + overlayNoRowsTemplate="No data available" + onSelectionChanged={(event: SelectionChangedEvent) => { + setSelectedRows( + event.api.getSelectedRows().map((row) => row.index), + ); + }} + rowSelection="multiple" + suppressRowClickSelection={true} + pagination={true} + columnDefs={columns} + rowData={messages} + />
);