✨ Move upload buttons from "Create" button context menu to "Upload" button context menu (#281)

* moved upload file, dir buttons to another menu Signed-Off by: Tibor Michel  <tibor.michel1@gmail.com>
Co-authored-by: Tibor Michel <tibor.michel1@gmail.com>
Co-authored-by: Monta <monta@HP-ProBook-445-14-inch-G9-Notebook-PC-505aadfc.localdomain>

tdrive/frontend/src/app/components/uploads/upload-zone.tsx

@@ -68,13 +68,10 @@ export default class UploadZone extends React.Component<PropsType, StateType> {
   }
 
   open() {
-    console.log("OPEN");
     if (this.props.disabled) {
       return;
     }
-
     this.setCallback();
-
     this.file_input.click();
   }
 

tdrive/frontend/src/app/views/client/body/drive/browser.tsx

@@ -26,6 +26,7 @@ import HeaderPath from './header-path';
 import { ConfirmDeleteModal } from './modals/confirm-delete';
 import { ConfirmTrashModal } from './modals/confirm-trash';
 import { CreateModalAtom } from './modals/create';
+import { UploadModelAtom } from './modals/upload'
 import { PropertiesModal } from './modals/properties';
 import { AccessModal } from './modals/update-access';
 import { VersionsModal } from './modals/versions';
@@ -101,6 +102,7 @@ export default memo(
     const uploadZoneRef = useRef<UploadZone | null>(null);
 
     const setCreationModalState = useSetRecoilState(CreateModalAtom);
+    const setUploadModalState = useSetRecoilState(UploadModelAtom);
 
     const [checked, setChecked] = useRecoilState(DriveItemSelectedList);
 
@@ -124,9 +126,9 @@ export default memo(
       if (!inPublicSharing) refresh('trash');
     }, [parentId, refresh, filter]);
 
-    const openItemModal = useCallback(() => {
+    const uploadItemModal = useCallback(() => {
-      if (item?.id) setCreationModalState({ open: true, parent_id: item.id });
+      if (item?.id) setUploadModalState({ open: true, parent_id: item.id });
-    }, [item?.id, setCreationModalState]);
+    }, [item?.id, setUploadModalState]);
 
     const selectedCount = Object.values(checked).filter(v => v).length;
     const folders = children
@@ -416,7 +418,7 @@ export default memo(
                         <>
                           <Base>{Languages.t('scenes.app.drive.drag_and_drop')}</Base>
                           <br />
-                          <Button onClick={() => openItemModal()} theme="primary" className="mt-4">
+                          <Button onClick={() => uploadItemModal()} theme="primary" className="mt-4">
                             {Languages.t('scenes.app.drive.add_doc')}
                           </Button>
                         </>

tdrive/frontend/src/app/views/client/body/drive/context-menu.tsx

@@ -4,6 +4,7 @@ import { DriveCurrentFolderAtom } from './browser';
 import { ConfirmDeleteModalAtom } from './modals/confirm-delete';
 import { ConfirmTrashModalAtom } from './modals/confirm-trash';
 import { CreateModalAtom } from './modals/create';
+import { UploadModelAtom } from './modals/upload'
 import { PropertiesModalAtom } from './modals/properties';
 import { SelectorModalAtom } from './modals/selector';
 import { AccessModalAtom } from './modals/update-access';
@@ -38,6 +39,7 @@ export const useOnBuildContextMenu = (children: DriveItem[], initialParentId?: s
 
   const { download, downloadZip, update, restore } = useDriveActions();
   const setCreationModalState = useSetRecoilState(CreateModalAtom);
+  const setUploadModalState = useSetRecoilState(UploadModelAtom);
   const setSelectorModalState = useSetRecoilState(SelectorModalAtom);
   const setConfirmDeleteModalState = useSetRecoilState(ConfirmDeleteModalAtom);
   const setConfirmTrashModalState = useSetRecoilState(ConfirmTrashModalAtom);
@@ -285,7 +287,7 @@ export const useOnBuildContextMenu = (children: DriveItem[], initialParentId?: s
                   hide: inTrash || parent.access === 'read',
                   onClick: () =>
                     parent?.item?.id &&
-                    setCreationModalState({ open: true, parent_id: parent?.item?.id }),
+                    setUploadModalState({ open: true, parent_id: parent?.item?.id }),
                 },
                 {
                   type: 'menu',
@@ -357,6 +359,7 @@ export const useOnBuildContextMenu = (children: DriveItem[], initialParentId?: s
       preview,
       setParentId,
       setCreationModalState,
+      setUploadModalState,
       setVersionModal,
       setAccessModalState,
       setPropertiesModalState,

tdrive/frontend/src/app/views/client/body/drive/modals/create/index.tsx

@@ -84,16 +84,6 @@ export const CreateModal = ({
                 text={Languages.t('components.create_modal.create_folder')}
                 onClick={() => setState({ ...state, type: 'folder' })}
               />
-              <CreateModalOption
-                icon={<DocumentDownloadIcon className="w-5 h-5" />}
-                text={Languages.t('components.create_modal.upload_files')}
-                onClick={() => selectFromDevice()}
-              />
-              <CreateModalOption
-                icon={<FolderDownloadIcon className="w-5 h-5" />}
-                text={Languages.t('components.create_modal.upload_folders')}
-                onClick={() => selectFolderFromDevice()}
-              />
               <CreateModalOption
                 icon={<LinkIcon className="w-5 h-5" />}
                 text={Languages.t('components.create_modal.create_link')}

tdrive/frontend/src/app/views/client/body/drive/modals/upload/index.tsx

@@ -0,0 +1,110 @@
+import Avatar from '@atoms/avatar';
+import A from '@atoms/link';
+import { Modal, ModalContent } from '@atoms/modal';
+import { Base } from '@atoms/text';
+import { useCompanyApplications } from '@features/applications/hooks/use-company-applications';
+import { Application } from '@features/applications/types/application';
+import { Transition } from '@headlessui/react';
+import {
+  ChevronLeftIcon,
+  DocumentDownloadIcon,
+  FolderAddIcon,
+  FolderDownloadIcon,
+  LinkIcon,
+} from '@heroicons/react/outline';
+import { ReactNode } from 'react';
+import { atom, useRecoilState } from 'recoil';
+import { slideXTransition, slideXTransitionReverted } from 'src/utils/transitions';
+import Languages from "features/global/services/languages-service";
+
+export type UploadModalAtomType = {
+  open: boolean;
+  parent_id: string;
+  type?: string;
+};
+
+export const UploadModelAtom = atom<UploadModalAtomType>({
+  key: 'UploadModalAtom',
+  default: {
+    open: false,
+    parent_id: 'root',
+  },
+});
+
+export const UploadModal = ({
+  selectFromDevice,
+  selectFolderFromDevice,
+  addFromUrl,
+}: {
+  selectFromDevice: () => void;
+  selectFolderFromDevice: () => void;
+  addFromUrl: (url: string, name: string) => void;
+}) => {
+  const [state, setState] = useRecoilState(UploadModelAtom);
+  const { applications } = useCompanyApplications();
+
+  return (
+    <Modal
+      open={state.open}
+      onClose={() => setState({ ...state, open: false })}
+      className="!max-w-sm"
+    >
+      <ModalContent
+        title={
+          <div className="flex flex-row items-center justify-start">
+            {!!state.type && (
+              <A onClick={() => setState({ ...state, type: '' })}>
+                <ChevronLeftIcon className="w-6 h-6" />
+              </A>
+            )}
+            <span className="ml-2">{Languages.t('components.create_modal.create_folder_or_doc')}</span>
+          </div>
+        }
+      >
+        <div
+          style={{
+            display: 'grid',
+            gridTemplate: '1fr / 1fr',
+          }}
+        >
+          <Transition
+            style={{
+              gridColumn: '1 / 1',
+              gridRow: '1 / 1',
+            }}
+            show={!state.type}
+            as="div"
+            {...(!state.type ? slideXTransitionReverted : slideXTransition)}
+          >
+          <div className="-m-2" >
+                  <CreateModalOption
+                      icon={<DocumentDownloadIcon className="w-5 h-5" />}
+                      text={Languages.t('components.create_modal.upload_files')}
+                      onClick={() => selectFromDevice()}
+                  />
+                  <CreateModalOption
+                      icon={<FolderDownloadIcon className="w-5 h-5" />}
+                      text={Languages.t('components.create_modal.upload_folders')}
+                      onClick={() => selectFolderFromDevice()}
+                  />
+                </div>
+          </Transition>
+        </div>
+      </ModalContent>
+    </Modal>
+  );
+};
+
+const CreateModalOption = (props: { icon: ReactNode; text: string; onClick: () => void }) => {
+  return (
+    <div
+      onClick={props.onClick}
+      className="flex flex-row p-4 dark:bg-zinc-800 dark:text-white bg-zinc-100 hover:bg-opacity-75 cursor-pointer rounded-md m-2"
+    >
+      <div className="flex items-center justify-center">{props.icon}</div>
+      <div className="grow flex items-center ml-2">
+        <Base>{props.text}</Base>
+      </div>
+    </div>
+  );
+};

tdrive/frontend/src/app/views/client/side-bar/actions.tsx

@@ -10,6 +10,7 @@ import useRouterCompany from '../../../features/router/hooks/use-router-company'
 import { DriveCurrentFolderAtom } from '../body/drive/browser';
 import { ConfirmDeleteModalAtom } from '../body/drive/modals/confirm-delete';
 import { CreateModal, CreateModalAtom } from '../body/drive/modals/create';
+import { UploadModelAtom, UploadModal } from '../body/drive/modals/upload'
 import { Button } from '@atoms/button/button';
 import Languages from "features/global/services/languages-service";
 import { useCurrentUser } from 'app/features/users/hooks/use-current-user';
@@ -20,6 +21,7 @@ export const CreateModalWithUploadZones = ({ initialParentId }: { initialParentI
   const uploadZoneRef = useRef<UploadZone | null>(null);
   const uploadFolderZoneRef = useRef<UploadZone | null>(null);
   const setCreationModalState = useSetRecoilState(CreateModalAtom);
+  const setUploadModalState = useSetRecoilState(UploadModelAtom);
   const { uploadTree, uploadFromUrl } = useDriveUpload();
   const { user } = useCurrentUser();
   const [parentId, _] = useRecoilState(
@@ -43,6 +45,7 @@ export const CreateModalWithUploadZones = ({ initialParentId }: { initialParentI
             companyId,
             parentId,
           });
+          setUploadModalState({ parent_id: '', open: false });
         }}
       />
       <UploadZone
@@ -61,6 +64,7 @@ export const CreateModalWithUploadZones = ({ initialParentId }: { initialParentI
             companyId,
             parentId,
           });
+          setUploadModalState({ parent_id: '', open: false });
         }}
       />
       <CreateModal
@@ -73,7 +77,18 @@ export const CreateModalWithUploadZones = ({ initialParentId }: { initialParentI
             parentId,
           });
         }}
-      />
+    />
+    <UploadModal
+        selectFolderFromDevice={() => uploadFolderZoneRef.current?.open()}
+        selectFromDevice={() => uploadZoneRef.current?.open()}
+        addFromUrl={(url, name) => {
+            setUploadModalState({ parent_id: '', open: false });
+            uploadFromUrl(url, name, {
+                companyId,
+                parentId,
+            });
+        }}
+     />
     </>
   );
 };
@@ -91,11 +106,16 @@ export default () => {
 
   const setConfirmDeleteModalState = useSetRecoilState(ConfirmDeleteModalAtom);
   const setCreationModalState = useSetRecoilState(CreateModalAtom);
+  const setUploadModalState = useSetRecoilState(UploadModelAtom);
 
   const openItemModal = useCallback(() => {
     if (item?.id) setCreationModalState({ open: true, parent_id: item.id });
   }, [item?.id, setCreationModalState]);
 
+  const uploadItemModal = useCallback(() => {
+    if (item?.id) setUploadModalState({ open: true, parent_id: item.id });
+  }, [item?.id, setUploadModalState]);
+
   return (
     <div className="-m-4 overflow-hidden">
       <AnimatedHeight>
@@ -141,9 +161,7 @@ export default () => {
               />
 
               <Button
-                onClick={() => {
+                onClick={() => uploadItemModal()}
-                  uploadZoneRef.current?.open();
-                }}
                 size="lg"
                 theme="primary"
                 className="w-full mb-2 justify-center"