fix(flp): disable folder-level actions accordingly

webiny · Nov 8, 2023 · 8920b0e · 8920b0e
1 parent b561124
commit 8920b0e
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 17 deletions.
diff --git a/packages/app-aco/src/components/FolderTree/ButtonCreate/styled.tsx b/packages/app-aco/src/components/FolderTree/ButtonCreate/styled.tsx
@@ -2,22 +2,22 @@ import styled from "@emotion/styled";
 import { ReactComponent as Plus } from "@material-design-icons/svg/outlined/add_circle_outline.svg";
 
 export const Button = styled("button")`
-  background: none;
-  border: none;
-  cursor: pointer;
-  outline: none;
-  font-family: var(--mdc-typography-font-family);
-  color: var(--webiny-theme-color-text-secondary);
-  fill: currentColor;
-  display: flex;
-  align-items: center;
-  font-size: 1em;
-  padding: 8px;
+    background: none;
+    border: none;
+    cursor: pointer;
+    outline: none;
+    font-family: var(--mdc-typography-font-family);
+    color: var(--webiny-theme-color-text-secondary);
+    fill: currentColor;
+    display: flex;
+    align-items: center;
+    font-size: 1em;
+    padding: 8px;
 
-  &:disabled {
-    cursor: not-allowed;
-    opacity: 0.5;
-  }
+    &:disabled {
+        cursor: not-allowed;
+        opacity: 0.5;
+    }
 `;
 
 export const IconContainer = styled.div`

diff --git a/packages/app-aco/src/components/FolderTree/List/index.tsx b/packages/app-aco/src/components/FolderTree/List/index.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useState } from "react";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
 import {
     DropOptions,
     getBackendOptions,
@@ -99,6 +99,11 @@ export const List: React.VFC<ListProps> = ({
         setOpenFolderIds([ROOT_FOLDER, ...folderIds]);
     };
 
+    const canDrag = useCallback((folderId: string) => {
+        const isRootFolder = folderId === ROOT_FOLDER;
+        return !isRootFolder && canManageFolderStructure(folderId);
+    }, []);
+
     return (
         <>
             <DndProvider backend={MultiBackend} options={getBackendOptions()} context={window}>
@@ -108,7 +113,7 @@ export const List: React.VFC<ListProps> = ({
                     onDrop={handleDrop}
                     onChangeOpen={ids => handleChangeOpen(ids as string[])}
                     sort={sort}
-                    canDrag={item => canManageFolderStructure(String(item!.id))}
+                    canDrag={item => canDrag(item!.id as string)}
                     render={(node, { depth, isOpen, onToggle }) => (
                         <Node
                             node={node}