[REFACTOR] Refactor & comment document picker modal (#929)

* implement alternating color rows for file picker

* implement alternating colors for workspace directory

* remove unneeded props/variables

* remove unused border classes

* WIP new folder UI

* remove unneeded expanded prop from filerow component

* folder creation UI and files object manipulation WIP

* folder creation & moving files complete

* add developer API support for creating folders and moving files

* update alternating row css for file picker

* remove unneeded props from merge

* add comments to ManageWorkspace modal and switch flex direction on smaller screen sizes

* drop Legacy and remove transitions post-merge

* switch flex direction on document picker on smaller screen sizes + css fixes for my documents

* linting

---------

Co-authored-by: timothycarambat <rambat1010@gmail.com>

frontend/src/components/Modals/MangeWorkspace/Documents/Directory/FileRow/index.jsx

@@ -24,7 +24,7 @@ export default function FileRow({ item, selected, toggleSelection }) {
   return (
     <tr
       onClick={() => toggleSelection(item)}
-      className={`transition-all duration-200 text-white/80 text-xs grid grid-cols-12 py-2 pl-3.5 pr-8 hover:bg-sky-500/20 cursor-pointer file-row ${
+      className={`text-white/80 text-xs grid grid-cols-12 py-2 pl-3.5 pr-8 hover:bg-sky-500/20 cursor-pointer file-row ${
         selected ? "selected" : ""
       }`}
     >

frontend/src/components/Modals/MangeWorkspace/Documents/Directory/FolderRow/index.jsx

@@ -22,7 +22,7 @@ export default function FolderRow({
     <>
       <tr
         onClick={onRowClick}
-        className={`transition-all duration-200 text-white/80 text-xs grid grid-cols-12 py-2 pl-3.5 pr-8 bg-[#1C1E21] hover:bg-sky-500/20 cursor-pointer w-full ${
+        className={`text-white/80 text-xs grid grid-cols-12 py-2 pl-3.5 pr-8 bg-[#1C1E21] hover:bg-sky-500/20 cursor-pointer w-full file-row ${
           selected ? "selected" : ""
         }`}
       >
@@ -59,7 +59,7 @@ export default function FolderRow({
         <p className="col-span-2 pl-2" />
       </tr>
       {expanded && (
-        <div className="col-span-full">
+        <>
           {item.items.map((fileItem) => (
             <FileRow
               key={fileItem.id}
@@ -68,7 +68,7 @@ export default function FolderRow({
               toggleSelection={toggleSelection}
             />
           ))}
-        </div>
+        </>
       )}
     </>
   );

frontend/src/components/Modals/MangeWorkspace/Documents/Directory/index.jsx

@@ -87,8 +87,8 @@ function Directory({
   const toggleSelection = (item) => {
     setSelectedItems((prevSelectedItems) => {
       const newSelectedItems = { ...prevSelectedItems };
-
       if (item.type === "folder") {
+        // select all files in the folder
         if (newSelectedItems[item.name]) {
           delete newSelectedItems[item.name];
           item.items.forEach((file) => delete newSelectedItems[file.id]);
@@ -97,6 +97,7 @@ function Directory({
           item.items.forEach((file) => (newSelectedItems[file.id] = true));
         }
       } else {
+        // single file selections
         if (newSelectedItems[item.id]) {
           delete newSelectedItems[item.id];
         } else {
@@ -108,16 +109,13 @@ function Directory({
     });
   };
 
-  const isFolderCompletelySelected = (folder) => {
-    if (!selectedItems[folder.name]) {
-      return false;
-    }
-    return folder.items.every((file) => selectedItems[file.id]);
-  };
-
+  // check if item is selected based on selectedItems state
   const isSelected = (id, item) => {
     if (item && item.type === "folder") {
-      return isFolderCompletelySelected(item);
+      if (!selectedItems[item.name]) {
+        return false;
+      }
+      return item.items.every((file) => selectedItems[file.id]);
     }
 
     return !!selectedItems[id];
@@ -175,6 +173,7 @@ function Directory({
     }
 
     if (success && message) {
+      // show info if some files were not moved due to being embedded
       showToast(message, "info");
     } else {
       showToast(`Successfully moved ${toMove.length} documents.`, "success");
@@ -209,7 +208,7 @@ function Directory({
             </div>
           ) : (
             <button
-              className="flex items-center gap-x-2 cursor-pointer z-50 px-[14px] py-[7px] -mr-[14px] rounded-lg hover:bg-[#222628]/60"
+              className="flex items-center gap-x-2 cursor-pointer px-[14px] py-[7px] -mr-[14px] rounded-lg hover:bg-[#222628]/60"
               onClick={createNewFolder}
             >
               <Plus size={18} weight="bold" color="#D3D4D4" />
@@ -220,17 +219,14 @@ function Directory({
           )}
         </div>
 
-        <div className="relative w-[560px] h-[310px] bg-zinc-900 rounded-2xl">
-          <div className="rounded-t-2xl text-white/80 text-xs grid grid-cols-12 py-2 px-8 border-b border-white/20 shadow-lg bg-zinc-900 sticky top-0 z-10">
+        <div className="relative w-[560px] h-[310px] bg-zinc-900 rounded-2xl overflow-hidden">
+          <div className="absolute top-0 left-0 right-0 z-10 rounded-t-2xl text-white/80 text-xs grid grid-cols-12 py-2 px-8 border-b border-white/20 shadow-lg bg-zinc-900">
             <p className="col-span-6">Name</p>
             <p className="col-span-3">Date</p>
             <p className="col-span-2">Kind</p>
           </div>
 
-          <div
-            className="overflow-y-auto pb-9"
-            style={{ height: "calc(100% - 40px)" }}
-          >
+          <div className="overflow-y-auto h-full pt-8">
             {loading ? (
               <div className="w-full h-full flex items-center justify-center flex-col gap-y-5">
                 <PreLoader />
@@ -264,42 +260,44 @@ function Directory({
               </div>
             )}
           </div>
-
           {amountSelected !== 0 && (
-            <div className="w-full justify-center absolute bottom-[12px] flex">
-              <div className="justify-center flex flex-row items-center bg-white/40 rounded-lg py-1 px-2 gap-x-2">
-                <button
-                  onClick={moveToWorkspace}
-                  onMouseEnter={() => setHighlightWorkspace(true)}
-                  onMouseLeave={() => setHighlightWorkspace(false)}
-                  className="border-none text-sm font-semibold bg-white h-[30px] px-2.5 rounded-lg hover:text-white hover:bg-neutral-800/80"
-                >
-                  Move to Workspace
-                </button>
-
-                <div className="relative">
+            <div className="absolute bottom-[12px] left-0 right-0 flex justify-center">
+              <div className="mx-auto bg-white/40 rounded-lg py-1 px-2">
+                <div className="flex flex-row items-center gap-x-2">
                   <button
-                    onClick={() => setShowFolderSelection(!showFolderSelection)}
-                    className="border-none text-sm font-semibold bg-white h-[32px] w-[32px] rounded-lg text-[#222628] hover:bg-neutral-800/80 flex justify-center items-center group"
+                    onClick={moveToWorkspace}
+                    onMouseEnter={() => setHighlightWorkspace(true)}
+                    onMouseLeave={() => setHighlightWorkspace(false)}
+                    className="border-none text-sm font-semibold bg-white h-[30px] px-2.5 rounded-lg hover:text-white hover:bg-neutral-800/80"
                   >
-                    <MoveToFolderIcon className="text-[#222628] group-hover:text-white" />
+                    Move to Workspace
+                  </button>
+                  <div className="relative">
+                    <button
+                      onClick={() =>
+                        setShowFolderSelection(!showFolderSelection)
+                      }
+                      className="border-none text-sm font-semibold bg-white h-[32px] w-[32px] rounded-lg text-[#222628] hover:bg-neutral-800/80 flex justify-center items-center group"
+                    >
+                      <MoveToFolderIcon className="text-[#222628] group-hover:text-white" />
+                    </button>
+                    {showFolderSelection && (
+                      <FolderSelectionPopup
+                        folders={files.items.filter(
+                          (item) => item.type === "folder"
+                        )}
+                        onSelect={moveToFolder}
+                        onClose={() => setShowFolderSelection(false)}
+                      />
+                    )}
+                  </div>
+                  <button
+                    onClick={deleteFiles}
+                    className="border-none text-sm font-semibold bg-white h-[32px] w-[32px] rounded-lg text-[#222628] hover:text-white hover:bg-neutral-800/80 flex justify-center items-center"
+                  >
+                    <Trash size={18} weight="bold" />
                   </button>
-                  {showFolderSelection && (
-                    <FolderSelectionPopup
-                      folders={files.items.filter(
-                        (item) => item.type === "folder"
-                      )}
-                      onSelect={moveToFolder}
-                      onClose={() => setShowFolderSelection(false)}
-                    />
-                  )}
                 </div>
-                <button
-                  onClick={deleteFiles}
-                  className="border-none text-sm font-semibold bg-white h-[32px] w-[32px] rounded-lg text-[#222628] hover:text-white hover:bg-neutral-800/80 flex justify-center items-center"
-                >
-                  <Trash size={18} weight="bold" />
-                </button>
               </div>
             </div>
           )}

frontend/src/components/Modals/MangeWorkspace/Documents/UploadFile/index.jsx

@@ -76,7 +76,7 @@ export default function UploadFile({ workspace, fetchKeys, setLoading }) {
   return (
     <div>
       <div
-        className={`transition-all duration-300 w-[560px] border-2 border-dashed rounded-2xl bg-zinc-900/50 p-3 ${
+        className={`w-[560px] border-2 border-dashed rounded-2xl bg-zinc-900/50 p-3 ${
           ready ? "cursor-pointer" : "cursor-not-allowed"
         } hover:bg-zinc-900/90`}
         {...getRootProps()}
@@ -134,7 +134,7 @@ export default function UploadFile({ workspace, fetchKeys, setLoading }) {
         <button
           disabled={fetchingUrl}
           type="submit"
-          className="disabled:bg-white/20 disabled:text-slate-300 disabled:border-slate-400 disabled:cursor-wait bg bg-transparent hover:bg-slate-200 hover:text-slate-800 w-auto border border-white text-sm text-white p-2.5 rounded-lg transition-all duration-300"
+          className="disabled:bg-white/20 disabled:text-slate-300 disabled:border-slate-400 disabled:cursor-wait bg bg-transparent hover:bg-slate-200 hover:text-slate-800 w-auto border border-white text-sm text-white p-2.5 rounded-lg"
         >
           {fetchingUrl ? "Fetching..." : "Fetch website"}
         </button>

frontend/src/components/Modals/MangeWorkspace/Documents/WorkspaceDirectory/WorkspaceFileRow/index.jsx

@@ -53,7 +53,7 @@ export default function WorkspaceFileRow({
   const handleMouseLeave = debounce(handleHideTooltip, 500);
   return (
     <div
-      className={`items-center transition-all duration-200 text-white/80 text-xs grid grid-cols-12 py-2 pl-3.5 pr-8 hover:bg-sky-500/20 cursor-pointer
+      className={`items-center text-white/80 text-xs grid grid-cols-12 py-2 pl-3.5 pr-8 hover:bg-sky-500/20 cursor-pointer
           ${isMovedItem ? "bg-green-800/40" : "file-row"}`}
     >
       <div className="col-span-5 flex gap-x-[4px] items-center">

frontend/src/components/Modals/MangeWorkspace/Documents/WorkspaceDirectory/index.jsx

@@ -55,7 +55,7 @@ function WorkspaceDirectory({
           </h3>
         </div>
         <div
-          className={`relative w-[560px] h-[445px] bg-zinc-900 rounded-2xl mt-5 overflow-y-auto border-4 transition-all duration-300 ${
+          className={`relative w-[560px] h-[445px] bg-zinc-900 rounded-2xl mt-5 overflow-y-auto border-4 ${
             highlightWorkspace ? "border-cyan-300/80" : "border-transparent"
           }`}
         >
@@ -96,7 +96,7 @@ function WorkspaceDirectory({
           </div>
         </div>
         {hasChanges && (
-          <div className="flex items-center justify-between py-6 transition-all duration-300">
+          <div className="flex items-center justify-between py-6">
             <div className="text-white/80">
               <p className="text-sm font-semibold">
                 {embeddingCosts === 0
@@ -114,7 +114,7 @@ function WorkspaceDirectory({
 
             <button
               onClick={saveChanges}
-              className="transition-all duration-300 border border-slate-200 px-5 py-2.5 rounded-lg text-white text-sm items-center flex gap-x-2 hover:bg-slate-200 hover:text-slate-800 focus:ring-gray-800"
+              className="border border-slate-200 px-5 py-2.5 rounded-lg text-white text-sm items-center flex gap-x-2 hover:bg-slate-200 hover:text-slate-800 focus:ring-gray-800"
             >
               Save and Embed
             </button>
@@ -177,7 +177,7 @@ const PinAlert = memo(() => {
             <button disabled={true} className="invisible" />
             <button
               onClick={dismissAlert}
-              className="transition-all duration-300 border border-slate-200 px-4 py-2 rounded-lg text-white text-sm items-center flex gap-x-2 hover:bg-slate-200 hover:text-slate-800 focus:ring-gray-800"
+              className="border border-slate-200 px-4 py-2 rounded-lg text-white text-sm items-center flex gap-x-2 hover:bg-slate-200 hover:text-slate-800 focus:ring-gray-800"
             >
               Okay, got it
             </button>

frontend/src/components/Modals/MangeWorkspace/Documents/index.jsx

@@ -191,7 +191,7 @@ export default function DocumentSettings({ workspace, systemSettings }) {
   };
 
   return (
-    <div className="flex gap-x-6 justify-center -mt-6 z-10">
+    <div className="flex upload-modal -mt-6 z-10 relative">
       <Directory
         files={availableDocs}
         setFiles={setAvailableDocs}
@@ -208,7 +208,7 @@ export default function DocumentSettings({ workspace, systemSettings }) {
         moveToWorkspace={moveSelectedItemsToWorkspace}
         setLoadingMessage={setLoadingMessage}
       />
-      <div className="flex items-center">
+      <div className="upload-modal-arrow">
         <ArrowsDownUp className="text-white text-base font-bold rotate-90 w-11 h-11" />
       </div>
       <WorkspaceDirectory

frontend/src/components/Modals/MangeWorkspace/index.jsx

@@ -64,13 +64,14 @@ const ManageWorkspace = ({ hideModal = noop, providedSlug = null }) => {
   return (
     <div className="w-screen h-screen fixed top-0 left-0 flex justify-center items-center z-99">
       <div className="backdrop h-full w-full absolute top-0 z-10" />
-      <div className="absolute max-h-full w-fit transition duration-300 z-20">
+      <div className="absolute max-h-full w-fit transition duration-300 z-20 md:overflow-y-auto py-10">
         <div className="relative bg-main-gradient rounded-[12px] shadow border-2 border-slate-300/10">
-          <div className="flex items-start justify-between p-2 rounded-t border-gray-500/50 z-20 relative">
+          <div className="flex items-start justify-between p-2 rounded-t border-gray-500/50 relative">
+            <div />
             <button
               onClick={hideModal}
               type="button"
-              className="transition-all duration-300 text-gray-400 bg-transparent rounded-lg text-sm p-1.5 ml-auto inline-flex items-center hover:border-white/60 bg-sidebar-button hover:bg-menu-item-selected-gradient hover:border-slate-100 hover:border-opacity-50 border-transparent border"
+              className="z-50 text-gray-400 bg-transparent rounded-lg text-sm p-1.5 ml-auto inline-flex items-center hover:border-white/60 bg-sidebar-button hover:bg-menu-item-selected-gradient hover:border-slate-100 hover:border-opacity-50 border-transparent border"
             >
               <X className="text-gray-300 text-lg" />
             </button>

frontend/src/index.css

@@ -613,3 +613,23 @@ dialog::backdrop {
 .file-row.selected:nth-child(odd) {
   @apply bg-sky-500/10;
 }
+
+/* Flex upload modal to be a column when on small screens so that the UI
+does not extend the close button beyond the viewport. */
+@media (max-width: 1330px) {
+  .upload-modal {
+    @apply !flex-col !items-center !py-4 no-scroll;
+  }
+
+  .upload-modal-arrow {
+    margin-top: 0px !important;
+  }
+}
+
+.upload-modal {
+  @apply flex-row items-start gap-x-6 justify-center;
+}
+
+.upload-modal-arrow {
+  margin-top: 25%;
+}