onlyoffice rework (#650)

#525 #515 #548 #523

This is a rewrite to have a more robust connexion with only office,
recovering forgotten files, handling editing sessions as global locks,
that kind

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

@@ -275,12 +275,6 @@ export const useOnBuildContextMenu = (
           //Add parent related menus
           const newMenuActions: any[] = inTrash
             ? [
-                {
-                  type: 'menu',
-                  text: Languages.t('components.item_context_menu.trash.exit'),
-                  onClick: () => setParentId('root'),
-                },
-                { type: 'separator' },
                 {
                   type: 'menu',
                   text: Languages.t('components.item_context_menu.trash.empty'),

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

@@ -4,7 +4,7 @@ import { Input } from '@atoms/input/input-text';
 import { Modal, ModalContent } from '@atoms/modal';
 import { useDriveActions } from '@features/drive/hooks/use-drive-actions';
 import { useDriveItem } from '@features/drive/hooks/use-drive-item';
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { atom, useRecoilState } from 'recoil';
 import Languages from '@features/global/services/languages-service';
 
@@ -44,54 +44,79 @@ const PropertiesModalContent = ({ id, onClose, inPublicSharing }: { id: string;
   const { update } = useDriveActions(inPublicSharing);
   const [loading, setLoading] = useState(false);
   const [name, setName] = useState('');
+  const inputRef = useRef<HTMLInputElement>(null);
 
   useEffect(() => {
     refresh(id);
   }, []);
 
+  useEffect(() => {
+    setTimeout(() => {
+      if (inputRef.current) {
+        inputRef.current.focus();
+        const lastDot = inputRef.current.value.lastIndexOf('.');
+        const endRange = lastDot >= 0 ? lastDot : inputRef.current.value.length;
+        inputRef.current.setSelectionRange(0, endRange);
+      }
+    }, 100);
+  }, []);
+
   useEffect(() => {
     if (!name) setName(item?.name || '');
   }, [item?.name]);
 
+  const doSave = async () => {
+    setLoading(true);
+    if (item) {
+      let finalName = (name || '').trim();
+      //TODO: Confirm rename if extension changed ?
+      if (!item?.is_directory) {
+        //TODO: Why do we trim extensions on folders ?
+        const lastDotIndex = finalName.lastIndexOf('.');
+        if (lastDotIndex !== -1) {
+          const fileExtension = name.slice(lastDotIndex);
+          finalName = finalName.slice(0, lastDotIndex) + fileExtension;
+        }
+      }
+      await update({ name: finalName }, id, item.parent_id);
+    }
+    onClose();
+    setLoading(false);
+  }
+
   return (
     <ModalContent
-      title={Languages.t('compenents.ProprietiesModalContent_rename') + ' ' + item?.name}
+      title={Languages.t('components.PropertiesModalContent_rename') + ' ' + item?.name}
     >
       <InputLabel
         className="mt-4"
-        label={Languages.t('compenents.ProprietiesModalContent_name')}
+        label={Languages.t('components.PropertiesModalContent_name')}
         input={
           <Input
             value={name}
+            inputRef={inputRef}
             onChange={e => setName(e.target.value)}
-            placeholder={Languages.t('compenents.ProprietiesModalContent_place_holder')}
+            onKeyUp={({ key }) => {
+              if (!loading) {
+                if (key === 'Enter')
+                  doSave();
+                else if (key === "Escape")
+                  onClose();
+              }
+            }}
+            placeholder={Languages.t('components.PropertiesModalContent_place_holder')}
           />
         }
       />
       <br />
       <Button
-        disabled={!name}
+        disabled={!((name || '').trim())}
         className="float-right mt-4"
         theme="primary"
         loading={loading}
-        onClick={async () => {
-          setLoading(true);
-          if (item) {
-            let finalName = name;
-            if (!item?.is_directory) {
-              const lastDotIndex = finalName.lastIndexOf('.');
-              if (lastDotIndex !== -1) {
-                const fileExtension = name.slice(lastDotIndex);
-                finalName = finalName.slice(0, lastDotIndex) + fileExtension;
-              }
-            }
-            await update({ name: finalName }, id, item.parent_id);
-          }
-          onClose();
-          setLoading(false);
-        }}
+        onClick={doSave}
       >
-        {Languages.t('compenents.ProprietiesModalContent_update_button')}
+        {Languages.t('components.PropertiesModalContent_update_button')}
       </Button>
     </ModalContent>
   );