Web: Files: disabled switching to shared folder

packages/client/src/components/FolderTreeBody/TreeFolders.js

@@ -2,21 +2,12 @@ import React from "react";
 import TreeMenu from "@docspace/components/tree-menu";
 import TreeNode from "@docspace/components/tree-menu/sub-components/tree-node";
 import styled from "styled-components";
-import {
+import { FolderType, ShareAccessRights } from "@docspace/common/constants";
-  ConflictResolveType,
-  FolderType,
-  ShareAccessRights,
-} from "@docspace/common/constants";
-import toastr from "@docspace/components/toast/toastr";
-
 import { onConvertFiles } from "../../helpers/files-converter";
 import { ReactSVG } from "react-svg";
 import ExpanderDownIcon from "PUBLIC_DIR/images/expander-down.react.svg";
 import ExpanderRightIcon from "PUBLIC_DIR/images/expander-right.react.svg";
 import commonIconsStyles from "@docspace/components/utils/common-icons-style";
-import withLoader from "../../HOCs/withLoader";
-import Loaders from "@docspace/common/components/Loaders";
-
 import { observer, inject } from "mobx-react";
 import { runInAction } from "mobx";
 import { withTranslation } from "react-i18next";
@@ -181,14 +172,7 @@ class TreeFolders extends React.Component {
   };
 
   showDragItems = (item) => {
-    const {
+    const { isAdmin, myId, commonId, currentId, draggableItems } = this.props;
-      isAdmin,
-      myId,
-      commonId,
-      //rootFolderType,
-      currentId,
-      draggableItems,
-    } = this.props;
     if (item.id === currentId) {
       return false;
     }
@@ -196,10 +180,6 @@ class TreeFolders extends React.Component {
     if (!draggableItems || draggableItems.find((x) => x.id === item.id))
       return false;
 
-    // const isMy = rootFolderType === FolderType.USER;
-    // const isCommon = rootFolderType === FolderType.COMMON;
-    // const isShare = rootFolderType === FolderType.SHARE;
-
     if (
       item.rootFolderType === FolderType.SHARE &&
       item.access === ShareAccessRights.FullAccess
@@ -208,7 +188,6 @@ class TreeFolders extends React.Component {
     }
 
     if (isAdmin) {
-      //if (isMy || isCommon || isShare) {
       if (
         (item.pathParts &&
           (item.pathParts[0] === myId || item.pathParts[0] === commonId)) ||
@@ -217,24 +196,19 @@ class TreeFolders extends React.Component {
       ) {
         return true;
       }
-      //}
     } else {
-      //if (isMy || isCommon || isShare) {
       if (
         (item.pathParts && item.pathParts[0] === myId) ||
         item.rootFolderType === FolderType.USER
       ) {
         return true;
       }
-      //}
     }
 
     return false;
   };
 
   getItems = (data) => {
-    const { theme } = this.props;
-
     return data.map((item) => {
       const dragging = this.props.dragging ? this.showDragItems(item) : false;
       const showBadge = false;
@@ -245,9 +219,18 @@ class TreeFolders extends React.Component {
         disableNodeValue = "";
       if (dragging) value = `${item.id} dragging ${provider}`;
 
+      const { roomsFolderId, expandedPanelKeys } = this.props;
+
+      let isDisabledNode = false;
+      if (item.id == roomsFolderId) {
+        isDisabledNode = expandedPanelKeys.includes(roomsFolderId + "");
+      }
+
       if (this.selectionFoldersId && this.selectionFoldersId.includes(item.id))
         disableNodeValue = "disable-node";
 
+      if (isDisabledNode) disableNodeValue += " disable-folder ";
+
       if ((item.folders && item.folders.length > 0) || serviceFolder) {
         return (
           <TreeNode
@@ -397,7 +380,7 @@ class TreeFolders extends React.Component {
   };
 
   onLoadData = (treeNode, isExpand) => {
-    const { data: incomingDate, certainFolders } = this.props;
+    const { data: incomingDate, certainFolders, roomsFolderId } = this.props;
     isExpand && this.setState({ isExpand: true });
     //console.log("load data...", treeNode);
 
@@ -421,6 +404,12 @@ class TreeFolders extends React.Component {
 
         this.getNewTreeData(treeData, listIds, data.folders, data.level);
         !certainFolders && this.props.setTreeFolders(treeData);
+
+        if (data.listIds[0] == roomsFolderId && this.props.onSelect) {
+          const roomsIndex = treeData.findIndex((f) => f.id == roomsFolderId);
+          const firstRoomsNodeId = treeData[roomsIndex]?.folders[0]?.id;
+          this.props.onSelect([firstRoomsNodeId], treeNode);
+        }
       })
       .catch((err) => console.log("err", err))
       .finally(() => {
@@ -439,6 +428,20 @@ class TreeFolders extends React.Component {
     this.props.setExpandedPanelKeys(expandedKeys);
   };
 
+  onSelect = (folder, treeNode) => {
+    const { onSelect, expandedPanelKeys, roomsFolderId } = this.props;
+
+    const newExpandedPanelKeys = JSON.parse(JSON.stringify(expandedPanelKeys));
+    newExpandedPanelKeys.push(folder[0]);
+
+    if (folder[0] == roomsFolderId) {
+      this.onExpand(newExpandedPanelKeys, treeNode);
+      return;
+    }
+
+    onSelect && onSelect(folder, treeNode);
+  };
+
   onDragOver = (data) => {
     const parentElement = data.event.target.parentElement;
     const existElement = parentElement.classList.contains(
@@ -488,16 +491,15 @@ class TreeFolders extends React.Component {
       firstLoadScroll();
     }
   };
+
   render() {
     const {
       selectedKeys,
-      onSelect,
       dragging,
       expandedPanelKeys,
       treeFolders,
       data,
       disabled,
-      theme,
       isPanel,
       isLoadingNodes,
     } = this.props;
@@ -514,7 +516,7 @@ class TreeFolders extends React.Component {
         multiple={false}
         showIcon
         switcherIcon={this.switcherIcon}
-        onSelect={onSelect}
+        onSelect={this.onSelect}
         selectedKeys={selectedKeys}
         loadData={this.onLoadData}
         expandedKeys={expandedPanelKeys}
@@ -556,17 +558,14 @@ export default inject(
       getSubfolders,
       setIsLoadingNodes,
       isLoadingNodes,
+      roomsFolderId,
     } = treeFoldersStore;
-    const {
+    const { id, parentId: selectedNodeParentId } = selectedFolderStore;
-      id,
-      parentId: selectedNodeParentId /* rootFolderType */,
-    } = selectedFolderStore;
 
     return {
       isAdmin: auth.isAdmin,
       isDesktop: auth.settingsStore.isDesktopClient,
       dragging,
-      //rootFolderType,
       currentId: id,
       myId: myFolderId,
       commonId: commonFolderId,
@@ -584,6 +583,7 @@ export default inject(
       setIsLoadingNodes,
       isLoadingNodes,
       selectedNodeParentId,
+      roomsFolderId,
     };
   }
 )(withTranslation(["Files", "Common"])(observer(TreeFolders)));

packages/client/src/components/panels/SelectFolderDialog/index.js

@@ -219,6 +219,9 @@ class SelectFolderDialog extends React.Component {
     const folderSelectionDisabled =
       folderId === sharedRoomId || folderId === sharedRoomId?.toString();
 
+    const buttonIsDisabled =
+      isDisableButton || (isRecycleBin && currentFolderId === folderId);
+
     return displayType === "aside" ? (
       <SelectFolderDialogAsideView
         folderSelectionDisabled={folderSelectionDisabled}
@@ -244,9 +247,7 @@ class SelectFolderDialog extends React.Component {
         }
         isAvailable={isAvailable}
         isDisableTree={isDisableTree}
-        isDisableButton={
+        isDisableButton={buttonIsDisabled}
-          isDisableButton || (isRecycleBin && currentFolderId === folderId)
-        }
       />
     ) : (
       <SelectionPanel
@@ -272,9 +273,7 @@ class SelectFolderDialog extends React.Component {
         isDisableTree={isDisableTree}
         folderSelection
         newFilter={this.newFilter}
-        isDisableButton={
+        isDisableButton={buttonIsDisabled}
-          isDisableButton || (isRecycleBin && currentFolderId === folderId)
-        }
       />
     );
   }

packages/components/tree-menu/index.js

@@ -33,6 +33,22 @@ const StyledTree = styled(Tree)`
       }
     }
 
+    .disable-folder {
+      span.rc-tree-node-content-wrapper {
+        pointer-events: none;
+        span.rc-tree-iconEle {
+          svg {
+            path {
+              fill: ${(props) => props.theme.treeNode.disableColor};
+            }
+          }
+        }
+        span.rc-tree-title {
+          color: ${(props) => props.theme.treeNode.disableColor} !important;
+        }
+      }
+    }
+
     .rc-tree-treenode {
       height: 36px;
       display: flex;