diff --git a/src/frontend/src/components/dropdownButtonComponent/index.tsx b/src/frontend/src/components/dropdownButtonComponent/index.tsx index 7e9aea5b761..eae8e41ef87 100644 --- a/src/frontend/src/components/dropdownButtonComponent/index.tsx +++ b/src/frontend/src/components/dropdownButtonComponent/index.tsx @@ -15,6 +15,7 @@ export default function DropdownButton({ options, plusButton = false, dropdownOptions = true, + isFetchingFolders = false, }: dropdownButtonPropsType): JSX.Element { const [showOptions, setShowOptions] = useState(false); @@ -33,6 +34,7 @@ export default function DropdownButton({ event.preventDefault(); onFirstBtnClick(); }} + disabled={isFetchingFolders} > {plusButton && ( diff --git a/src/frontend/src/components/folderSidebarComponent/components/sideBarFolderButtons/index.tsx b/src/frontend/src/components/folderSidebarComponent/components/sideBarFolderButtons/index.tsx index 17f9442714b..38ac3c1d484 100644 --- a/src/frontend/src/components/folderSidebarComponent/components/sideBarFolderButtons/index.tsx +++ b/src/frontend/src/components/folderSidebarComponent/components/sideBarFolderButtons/index.tsx @@ -230,37 +230,107 @@ const SideBarFoldersButtonsComponent = ({ exact: false, }); + const isUpdatingFolder = isFetchingFolders || isPending || loading; + + const HeaderButtons = () => ( +
+
Folders
+ + +
+ ); + + const AddFolderButton = ({ onClick, disabled }) => ( + + + + ); + + const UploadFolderButton = ({ onClick, disabled }) => ( + + + + ); + + const handleDoubleClick = (event, item) => { + if (item.name === "My Projects") { + return; + } + + if (!foldersNames[item.name]) { + setFoldersNames({ [item.name]: item.name }); + } + + if (editFolders.find((obj) => obj.name === item.name)?.name) { + const newEditFolders = editFolders.map((obj) => { + if (obj.name === item.name) { + return { name: item.name, edit: true }; + } + return { name: obj.name, edit: false }; + }); + setEditFolderName(newEditFolders); + takeSnapshot(); + event.stopPropagation(); + event.preventDefault(); + return; + } + + setEditFolderName((old) => [...old, { name: item.name, edit: true }]); + setFoldersNames((oldFolder) => ({ + ...oldFolder, + [item.name]: item.name, + })); + takeSnapshot(); + event.stopPropagation(); + event.preventDefault(); + }; + + const handleKeyDownFn = (e, item) => { + if (e.key === "Escape") { + const newEditFolders = editFolders.map((obj) => { + if (obj.name === item.name) { + return { name: item.name, edit: false }; + } + return { name: obj.name, edit: false }; + }); + setEditFolderName(newEditFolders); + setFoldersNames({}); + setEditFolderName( + folders.map((obj) => ({ + name: obj.name, + edit: false, + })), + ); + } + if (e.key === "Enter") { + refInput.current?.blur(); + } + }; + return ( <> -
-
Folders
- - - - - - - - -
+
<> @@ -289,41 +359,7 @@ const SideBarFoldersButtonsComponent = ({ >
{ - if (item.name === "My Projects") { - return; - } - - if (!foldersNames[item.name]) { - setFoldersNames({ [item.name]: item.name }); - } - - if ( - editFolders.find((obj) => obj.name === item.name)?.name - ) { - const newEditFolders = editFolders.map((obj) => { - if (obj.name === item.name) { - return { name: item.name, edit: true }; - } - return { name: obj.name, edit: false }; - }); - setEditFolderName(newEditFolders); - takeSnapshot(); - event.stopPropagation(); - event.preventDefault(); - return; - } - - setEditFolderName((old) => [ - ...old, - { name: item.name, edit: true }, - ]); - setFoldersNames((oldFolder) => ({ - ...oldFolder, - [item.name]: item.name, - })); - takeSnapshot(); - event.stopPropagation(); - event.preventDefault(); + handleDoubleClick(event, item); }} className="flex w-full items-center gap-2" > @@ -331,7 +367,7 @@ const SideBarFoldersButtonsComponent = ({ name={"folder"} className="mr-2 w-4 flex-shrink-0 justify-start stroke-[1.5] opacity-100" /> - {editFolderName?.edit ? ( + {editFolderName?.edit && !isUpdatingFolder ? (
{ - if (e.key === "Escape") { - const newEditFolders = editFolders.map((obj) => { - if (obj.name === item.name) { - return { name: item.name, edit: false }; - } - return { name: obj.name, edit: false }; - }); - setEditFolderName(newEditFolders); - setFoldersNames({}); - setEditFolderName( - folders.map((obj) => ({ - name: obj.name, - edit: false, - })), - ); - } - if (e.key === "Enter") { - refInput.current?.blur(); - } + handleKeyDownFn(e, item); handleKeyDown(e, e.key, ""); }} autoFocus={true} - onBlur={async () => { + onBlur={() => { if (refInput.current?.value !== item.name) { handleEditNameFolder(item); } else { editFolderName.edit = false; } + refInput.current?.blur(); }} value={foldersNames[item.name]} id={`input-folder-${item.name}`} @@ -390,6 +409,7 @@ const SideBarFoldersButtonsComponent = ({ }} variant={"ghost"} size={"icon"} + disabled={isUpdatingFolder} > )}
} diff --git a/src/frontend/src/types/components/index.ts b/src/frontend/src/types/components/index.ts index da5591f512a..bcceb069b83 100644 --- a/src/frontend/src/types/components/index.ts +++ b/src/frontend/src/types/components/index.ts @@ -827,6 +827,7 @@ export type dropdownButtonPropsType = { options: Array<{ name: string; onBtnClick: () => void }>; plusButton?: boolean; dropdownOptions?: boolean; + isFetchingFolders?: boolean; }; export type IOFieldViewProps = {