From f17934b7b807fa2924d5a656109f623bd903f1ea Mon Sep 17 00:00:00 2001 From: Deon Sanchez <69873175+deon-sanchez@users.noreply.github.com> Date: Tue, 5 Nov 2024 15:47:54 -0700 Subject: [PATCH] fix: Fix Home Page Issues post Uplift (#4362) * fixes spotted by otavio * Refactor folder export logic and fix folder name in download link * Refactor getTemplateStyle to handle partial matches in flowData.name * Refactor folder export logic and add file drop functionality * spelling * Re enable/fix drag and drop behaviors * [autofix.ci] apply automated fixes * folder upload fix --------- Co-authored-by: Mike Fortman Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com> --- .../components/sideBarFolderButtons/index.tsx | 13 ++++----- src/frontend/src/pages/LoginPage/index.tsx | 2 +- .../pages/MainPage/components/grid/index.tsx | 12 ++++++-- .../pages/MainPage/components/list/index.tsx | 12 ++++++-- .../pages/MainPage/pages/emptyPage/index.tsx | 1 + .../pages/MainPage/pages/homePage/index.tsx | 6 ++-- .../src/pages/MainPage/pages/index.tsx | 29 ++++++++++++------- .../MainPage/utils/get-template-style.ts | 4 +-- src/frontend/src/routes.tsx | 18 ++++++------ 9 files changed, 58 insertions(+), 39 deletions(-) diff --git a/src/frontend/src/components/folderSidebarComponent/components/sideBarFolderButtons/index.tsx b/src/frontend/src/components/folderSidebarComponent/components/sideBarFolderButtons/index.tsx index 6d21953a4..32e229a38 100644 --- a/src/frontend/src/components/folderSidebarComponent/components/sideBarFolderButtons/index.tsx +++ b/src/frontend/src/components/folderSidebarComponent/components/sideBarFolderButtons/index.tsx @@ -104,7 +104,7 @@ const SideBarFoldersButtonsComponent = ({ onError: (err) => { console.log(err); setErrorData({ - title: `Error on upload`, + title: `Error on uploading your folder, try dragging it into an existing folder.`, list: [err["response"]["data"]["message"]], }); }, @@ -125,10 +125,8 @@ const SideBarFoldersButtonsComponent = ({ }, { onSuccess: (data) => { - const folder = folders.find((f) => f.id === data.folderId); - - data.folder_name = folder?.name || "folder"; - data.folder_description = folder?.description || ""; + data.folder_name = data?.name || "folder"; + data.folder_description = data?.description || ""; const jsonString = `data:text/json;charset=utf-8,${encodeURIComponent( JSON.stringify(data), @@ -136,7 +134,7 @@ const SideBarFoldersButtonsComponent = ({ const link = document.createElement("a"); link.href = jsonString; - link.download = `${data.folder_name}.json`; + link.download = `${data?.name}.json`; link.click(); track("Folder Exported", { folderId: id! }); @@ -291,7 +289,8 @@ const SideBarFoldersButtonsComponent = ({ ); const UploadFolderButton = ({ onClick, disabled }) => ( - + /* Todo: change this back to being a folder upload */ + )} */} - + {/* {openPlayground && ( { }); }; + const { onDragStart } = useDragStart(flowData); + const descriptionModal = useDescriptionModal([flowData?.id], "flow"); return ( <> -
@@ -185,7 +191,7 @@ const ListComponent = ({ flowData }: { flowData: FlowType }) => {
- + {/* {openPlayground && ( { const [pageIndex, setPageIndex] = useState(1); const [pageSize, setPageSize] = useState(10); const [search, setSearch] = useState(""); - const handleFileDrop = useFileDrop(type); - const [flowType, setFlowType] = useState<"flows" | "components">("flows"); + const handleFileDrop = useFileDrop("flows"); + const [flowType, setFlowType] = useState<"flows" | "components">(type); const myCollectionId = useFolderStore((state) => state.myCollectionId); const [folderName, setFolderName] = useState(""); @@ -163,7 +163,7 @@ const HomePage = ({ type }) => {
No saved or custom components. Learn more about{" "} state.myCollectionId); - + const handleFileDrop = useFileDrop("flow"); const setSuccessData = useAlertStore((state) => state.setSuccessData); const setErrorData = useAlertStore((state) => state.setErrorData); const folderToEdit = useFolderStore((state) => state.folderToEdit); @@ -34,7 +36,7 @@ export default function CollectionPage(): JSX.Element { return () => queryClient.removeQueries({ queryKey: ["useGetFolder"] }); }, []); - const { data, isFetching } = useGetFolderQuery({ + const { isFetching, data } = useGetFolderQuery({ id: folderId ?? myCollectionId!, }); @@ -104,15 +106,20 @@ export default function CollectionPage(): JSX.Element { } }} > - {folderData && folderData?.flows?.items?.length !== 0 ? ( - - ) : ( - - )} + + {folderData && folderData?.flows?.items?.length !== 0 ? ( + + ) : ( + + )} +
) : ( diff --git a/src/frontend/src/pages/MainPage/utils/get-template-style.ts b/src/frontend/src/pages/MainPage/utils/get-template-style.ts index cd9a05f86..40e4cf09c 100644 --- a/src/frontend/src/pages/MainPage/utils/get-template-style.ts +++ b/src/frontend/src/pages/MainPage/utils/get-template-style.ts @@ -3,8 +3,8 @@ import { TEMPLATES_DATA } from "../constants"; export const getTemplateStyle = (flowData: { name: string; }): { icon: string; icon_bg_color: string } => { - const { icon, icon_bg_color } = TEMPLATES_DATA.examples.find( - (example) => example.name === flowData.name, + const { icon, icon_bg_color } = TEMPLATES_DATA.examples.find((example) => + flowData.name.includes(example.name), ) ?? { icon: "circle-help", icon_bg_color: "bg-purple-300" }; return { icon, icon_bg_color }; }; diff --git a/src/frontend/src/routes.tsx b/src/frontend/src/routes.tsx index 64bf0a039..12100fe95 100644 --- a/src/frontend/src/routes.tsx +++ b/src/frontend/src/routes.tsx @@ -73,15 +73,15 @@ const router = createBrowserRouter( > } + element={} /> + ) : ( - + ) } > @@ -89,9 +89,9 @@ const router = createBrowserRouter( path="folder/:folderId" element={ ENABLE_HOMEPAGE ? ( - + ) : ( - + ) } /> @@ -100,7 +100,7 @@ const router = createBrowserRouter( path="components/" element={ ENABLE_HOMEPAGE ? ( - + ) : ( + ) : ( + ) : ( ) @@ -137,7 +137,7 @@ const router = createBrowserRouter( path="folder/:folderId" element={ ENABLE_HOMEPAGE ? ( - + ) : ( )