feat(permissions): add support for restricting file actions via permissions prop

frontend/src/FileManager/Actions/Actions.jsx

@@ -18,13 +18,14 @@ const Actions = ({
   filePreviewComponent,
   acceptedFileTypes,
   triggerAction,
+  permissions,
 }) => {
   const [activeAction, setActiveAction] = useState(null);
   const { selectedFiles } = useSelection();
   const t = useTranslation();
 
   // Triggers all the keyboard shortcuts based actions
-  useShortcutHandler(triggerAction, onRefresh);
+  useShortcutHandler(triggerAction, onRefresh, permissions);
 
   const actionTypes = {
     uploadFile: {

frontend/src/FileManager/FileList/FileItem.jsx

@@ -25,6 +25,7 @@ const FileItem = ({
   triggerAction,
   handleContextMenu,
   setLastSelectedFile,
+  draggable,
 }) => {
   const [fileSelected, setFileSelected] = useState(false);
   const [lastClickTime, setLastClickTime] = useState(0);
@@ -194,7 +195,7 @@ const FileItem = ({
       onContextMenu={handleItemContextMenu}
       onMouseOver={handleMouseOver}
       onMouseLeave={handleMouseLeave}
-      draggable={fileSelected}
+      draggable={fileSelected && draggable}
       onDragStart={handleDragStart}
       onDragEnd={handleDragEnd}
       onDragEnter={handleDragEnterOver}

frontend/src/FileManager/FileList/FileList.jsx

@@ -16,6 +16,7 @@ const FileList = ({
   onRefresh,
   enableFilePreview,
   triggerAction,
+  permissions,
 }) => {
   const { currentPathFiles } = useFileNavigation();
   const filesViewRef = useRef(null);
@@ -33,7 +34,7 @@ const FileList = ({
     selectedFileIndexes,
     clickPosition,
     isSelectionCtx,
-  } = useFileList(onRefresh, enableFilePreview, triggerAction);
+  } = useFileList(onRefresh, enableFilePreview, triggerAction, permissions);
 
   const contextMenuRef = useDetectOutsideClick(() => setVisible(false));
 
@@ -63,6 +64,7 @@ const FileList = ({
               handleContextMenu={handleContextMenu}
               setVisible={setVisible}
               setLastSelectedFile={setLastSelectedFile}
+              draggable={permissions.move}
             />
           ))}
         </>

frontend/src/FileManager/FileList/useFileList.jsx

@@ -13,7 +13,7 @@ import { duplicateNameHandler } from "../../utils/duplicateNameHandler";
 import { validateApiCallback } from "../../utils/validateApiCallback";
 import { useTranslation } from "../../contexts/TranslationProvider";
 
-const useFileList = (onRefresh, enableFilePreview, triggerAction) => {
+const useFileList = (onRefresh, enableFilePreview, triggerAction, permissions) => {
   const [selectedFileIndexes, setSelectedFileIndexes] = useState([]);
   const [visible, setVisible] = useState(false);
   const [isSelectionCtx, setIsSelectionCtx] = useState(false);
@@ -121,12 +121,15 @@ const useFileList = (onRefresh, enableFilePreview, triggerAction) => {
       title: t("newFolder"),
       icon: <BsFolderPlus size={18} />,
       onClick: handleCreateNewFolder,
+      hidden: !permissions.create,
+      divider: !permissions.upload,
     },
     {
       title: t("upload"),
       icon: <MdOutlineFileUpload size={18} />,
       onClick: handleUpload,
       divider: true,
+      hidden: !permissions.upload,
     },
     {
       title: t("selectAll"),
@@ -146,37 +149,42 @@ const useFileList = (onRefresh, enableFilePreview, triggerAction) => {
       title: t("cut"),
       icon: <BsScissors size={19} />,
       onClick: () => handleMoveOrCopyItems(true),
+      divider: !lastSelectedFile?.isDirectory && !permissions.copy,
+      hidden: !permissions.move,
     },
     {
       title: t("copy"),
       icon: <BsCopy strokeWidth={0.1} size={17} />,
       onClick: () => handleMoveOrCopyItems(false),
       divider: !lastSelectedFile?.isDirectory,
+      hidden: !permissions.copy,
     },
     {
       title: t("paste"),
       icon: <FaRegPaste size={18} />,
       onClick: handleFilePasting,
       className: `${clipBoard ? "" : "disable-paste"}`,
-      hidden: !lastSelectedFile?.isDirectory,
+      hidden: !lastSelectedFile?.isDirectory || (!permissions.move && !permissions.copy),
       divider: true,
     },
     {
       title: t("rename"),
       icon: <BiRename size={19} />,
       onClick: handleRenaming,
       hidden: selectedFiles.length > 1,
+      hidden: !permissions.rename,
     },
     {
       title: t("download"),
       icon: <MdOutlineFileDownload size={18} />,
       onClick: handleDownloadItems,
-      hidden: lastSelectedFile?.isDirectory,
+      hidden: !permissions.download,
     },
     {
       title: t("delete"),
       icon: <MdOutlineDelete size={19} />,
       onClick: handleDelete,
+      hidden: !permissions.delete,
     },
   ];
   //

frontend/src/FileManager/FileManager.jsx

@@ -14,6 +14,8 @@ import { useColumnResize } from "../hooks/useColumnResize";
 import PropTypes from "prop-types";
 import { dateStringValidator, urlValidator } from "../validators/propValidators";
 import { TranslationProvider } from "../contexts/TranslationProvider";
+import { useMemo } from "react";
+import { defaultPermissions } from "../constants";
 import "./FileManager.scss";
 
 const FileManager = ({
@@ -46,6 +48,7 @@ const FileManager = ({
   primaryColor = "#6155b4",
   fontFamily = "Nunito Sans, sans-serif",
   language = "en",
+  permissions: userPermissions = {},
 }) => {
   const triggerAction = useTriggerAction();
   const { containerRef, colSizes, isDragging, handleMouseMove, handleMouseUp, handleMouseDown } =
@@ -57,6 +60,11 @@ const FileManager = ({
     width,
   };
 
+  const permissions = useMemo(
+    () => ({ ...defaultPermissions, ...userPermissions }),
+    [userPermissions]
+  );
+
   return (
     <main className="file-explorer" onContextMenu={(e) => e.preventDefault()} style={customStyles}>
       <Loader loading={isLoading} />
@@ -67,11 +75,10 @@ const FileManager = ({
               <ClipBoardProvider onPaste={onPaste} onCut={onCut} onCopy={onCopy}>
                 <LayoutProvider layout={layout}>
                   <Toolbar
-                    allowCreateFolder
-                    allowUploadFile
                     onLayoutChange={onLayoutChange}
                     onRefresh={onRefresh}
                     triggerAction={triggerAction}
+                    permissions={permissions}
                   />
                   <section
                     ref={containerRef}
@@ -96,6 +103,7 @@ const FileManager = ({
                         onRefresh={onRefresh}
                         enableFilePreview={enableFilePreview}
                         triggerAction={triggerAction}
+                        permissions={permissions}
                       />
                     </div>
                   </section>
@@ -111,6 +119,7 @@ const FileManager = ({
                     filePreviewComponent={filePreviewComponent}
                     acceptedFileTypes={acceptedFileTypes}
                     triggerAction={triggerAction}
+                    permissions={permissions}
                   />
                 </LayoutProvider>
               </ClipBoardProvider>
@@ -166,6 +175,15 @@ FileManager.propTypes = {
   primaryColor: PropTypes.string,
   fontFamily: PropTypes.string,
   language: PropTypes.string,
+  permissions: PropTypes.shape({
+    create: PropTypes.bool,
+    upload: PropTypes.bool,
+    move: PropTypes.bool,
+    copy: PropTypes.bool,
+    rename: PropTypes.bool,
+    download: PropTypes.bool,
+    delete: PropTypes.bool,
+  }),
 };
 
 export default FileManager;

frontend/src/FileManager/Toolbar/Toolbar.jsx

@@ -18,13 +18,7 @@ import { validateApiCallback } from "../../utils/validateApiCallback";
 import { useTranslation } from "../../contexts/TranslationProvider";
 import "./Toolbar.scss";
 
-const Toolbar = ({
-  allowCreateFolder = true,
-  allowUploadFile = true,
-  onLayoutChange,
-  onRefresh,
-  triggerAction,
-}) => {
+const Toolbar = ({ onLayoutChange, onRefresh, triggerAction, permissions }) => {
   const [showToggleViewMenu, setShowToggleViewMenu] = useState(false);
   const { currentFolder } = useFileNavigation();
   const { selectedFiles, setSelectedFiles, handleDownload } = useSelection();
@@ -37,13 +31,13 @@ const Toolbar = ({
     {
       icon: <BsFolderPlus size={17} strokeWidth={0.3} />,
       text: t("newFolder"),
-      permission: allowCreateFolder,
+      permission: permissions.create,
       onClick: () => triggerAction.show("createFolder"),
     },
     {
       icon: <MdOutlineFileUpload size={18} />,
       text: t("upload"),
-      permission: allowUploadFile,
+      permission: permissions.upload,
       onClick: () => triggerAction.show("uploadFile"),
     },
     {
@@ -85,14 +79,18 @@ const Toolbar = ({
       <div className="toolbar file-selected">
         <div className="file-action-container">
           <div>
-            <button className="item-action file-action" onClick={() => handleCutCopy(true)}>
-              <BsScissors size={18} />
-              <span>{t("cut")}</span>
-            </button>
-            <button className="item-action file-action" onClick={() => handleCutCopy(false)}>
-              <BsCopy strokeWidth={0.1} size={17} />
-              <span>{t("copy")}</span>
-            </button>
+            {permissions.move && (
+              <button className="item-action file-action" onClick={() => handleCutCopy(true)}>
+                <BsScissors size={18} />
+                <span>{t("cut")}</span>
+              </button>
+            )}
+            {permissions.copy && (
+              <button className="item-action file-action" onClick={() => handleCutCopy(false)}>
+                <BsCopy strokeWidth={0.1} size={17} />
+                <span>{t("copy")}</span>
+              </button>
+            )}
             {clipBoard?.files?.length > 0 && (
               <button
                 className="item-action file-action"
@@ -103,7 +101,7 @@ const Toolbar = ({
                 <span>{t("paste")}</span>
               </button>
             )}
-            {selectedFiles.length === 1 && (
+            {selectedFiles.length === 1 && permissions.rename && (
               <button
                 className="item-action file-action"
                 onClick={() => triggerAction.show("rename")}
@@ -112,19 +110,21 @@ const Toolbar = ({
                 <span>{t("rename")}</span>
               </button>
             )}
-            {!selectedFiles.isDirectory && (
+            {permissions.download && (
               <button className="item-action file-action" onClick={handleDownloadItems}>
                 <MdOutlineFileDownload size={19} />
                 <span>{t("download")}</span>
               </button>
             )}
-            <button
-              className="item-action file-action"
-              onClick={() => triggerAction.show("delete")}
-            >
-              <MdOutlineDelete size={19} />
-              <span>{t("delete")}</span>
-            </button>
+            {permissions.delete && (
+              <button
+                className="item-action file-action"
+                onClick={() => triggerAction.show("delete")}
+              >
+                <MdOutlineDelete size={19} />
+                <span>{t("delete")}</span>
+              </button>
+            )}
           </div>
           <button
             className="item-action file-action"

frontend/src/components/ContextMenu/ContextMenu.jsx

@@ -108,7 +108,10 @@ const ContextMenu = ({ filesViewRef, contextMenuRef, menuItems, visible, clickPo
                         </>
                       )}
                     </li>
-                    {item.divider && <div className="divider"></div>}
+                    {item.divider &&
+                      index !== menuItems.filter((item) => !item.hidden).length - 1 && (
+                        <div className="divider"></div>
+                      )}
                   </div>
                 );
               })}

frontend/src/constants/index.js

@@ -0,0 +1,9 @@
+export const defaultPermissions = {
+  create: true,
+  upload: true,
+  move: true,
+  copy: true,
+  rename: true,
+  download: true,
+  delete: true,
+};

frontend/src/contexts/TranslationProvider.jsx

@@ -9,7 +9,7 @@ export const TranslationProvider = ({ children, language }) => {
   useEffect(() => {
     initI18n(language);
     setT(() => i18n.t.bind(i18n));
-  }, language);
+  }, [language]);
 
   return <I18nContext.Provider value={t}>{children}</I18nContext.Provider>;
 };

frontend/src/hooks/useShortcutHandler.js

@@ -6,42 +6,42 @@ import { useSelection } from "../contexts/SelectionContext";
 import { useLayout } from "../contexts/LayoutContext";
 import { validateApiCallback } from "../utils/validateApiCallback";
 
-export const useShortcutHandler = (triggerAction, onRefresh) => {
+export const useShortcutHandler = (triggerAction, onRefresh, permissions) => {
   const { setClipBoard, handleCutCopy, handlePasting } = useClipBoard();
   const { currentFolder, currentPathFiles } = useFileNavigation();
   const { setSelectedFiles, handleDownload } = useSelection();
   const { setActiveLayout } = useLayout();
 
   const triggerCreateFolder = () => {
-    triggerAction.show("createFolder");
+    permissions.create && triggerAction.show("createFolder");
   };
 
   const triggerUploadFiles = () => {
-    triggerAction.show("uploadFile");
+    permissions.upload && triggerAction.show("uploadFile");
   };
 
   const triggerCutItems = () => {
-    handleCutCopy(true);
+    permissions.move && handleCutCopy(true);
   };
 
   const triggerCopyItems = () => {
-    handleCutCopy(false);
+    permissions.copy && handleCutCopy(false);
   };
 
   const triggerPasteItems = () => {
     handlePasting(currentFolder);
   };
 
   const triggerRename = () => {
-    triggerAction.show("rename");
+    permissions.rename && triggerAction.show("rename");
   };
 
   const triggerDownload = () => {
-    handleDownload();
+    permissions.download && handleDownload();
   };
 
   const triggerDelete = () => {
-    triggerAction.show("delete");
+    permissions.delete && triggerAction.show("delete");
   };
 
   const triggerSelectFirst = () => {