Feature/tree actions

apps/sensenet/src/components/ContentBreadcrumbs.tsx

@@ -22,12 +22,21 @@ const useStyles = makeStyles((theme: Theme) => {
       },
       marginLeft: 'auto',
     },
+    treeActionWrapper: {
+      marginRight: '7.5%',
+      ' & .MuiIconButton-root': {
+        color: theme.palette.type === 'light' ? theme.palette.common.black : theme.palette.common.white,
+      },
+      // marginLeft: '10px',
+      borderLeft: theme.palette.type === 'light' ? '1px solid #DBDBDB' : '1px solid rgba(255, 255, 255, 0.11)',
+    },
   })
 })
 
 type ContentBreadcrumbsProps<T extends GenericContent> = {
   onItemClick?: (item: BreadcrumbItem<T>) => void
   batchActions?: boolean
+  treeActions?: boolean
 }
 
 export const ContentBreadcrumbs = <T extends GenericContent = GenericContent>(props: ContentBreadcrumbsProps<T>) => {
@@ -78,6 +87,68 @@ export const ContentBreadcrumbs = <T extends GenericContent = GenericContent>(pr
             : history.push(getPrimaryActionUrl({ content: item.content, repository, uiSettings, location }))
         }}
       />
+      {props.treeActions && selected.length > 0 ? (
+        <div className={classes.treeActionWrapper} data-test="tree-actions">
+          <Tooltip title={localization.treeActions.delete} placement="bottom">
+            <IconButton
+              data-test="tree-delete"
+              aria-label="delete"
+              onClick={() => {
+                openDialog({
+                  name: 'delete',
+                  props: { content: selected },
+                  dialogProps: { disableBackdropClick: true, disableEscapeKeyDown: true },
+                })
+              }}>
+              <DeleteIcon />
+            </IconButton>
+          </Tooltip>
+          <Tooltip title={localization.treeActions.move} placement="bottom">
+            <IconButton
+              data-test="tree-move"
+              aria-label="move"
+              onClick={() => {
+                openDialog({
+                  name: 'copy-move',
+                  props: {
+                    content: selected,
+                    currentParent: parent,
+                    operation: 'move',
+                  },
+                  dialogProps: {
+                    disableBackdropClick: true,
+                    disableEscapeKeyDown: true,
+                    classes: { paper: globalClasses.pickerDialog },
+                  },
+                })
+              }}>
+              <FileCopyIcon />
+            </IconButton>
+          </Tooltip>
+          <Tooltip title={localization.treeActions.copy} placement="bottom">
+            <IconButton
+              data-test="tree-copy"
+              aria-label="copy"
+              onClick={() => {
+                openDialog({
+                  name: 'copy-move',
+                  props: {
+                    content: selected,
+                    currentParent: parent,
+                    operation: 'copy',
+                  },
+                  dialogProps: {
+                    disableBackdropClick: true,
+                    disableEscapeKeyDown: true,
+                    classes: { paper: globalClasses.pickerDialog },
+                  },
+                })
+              }}>
+              <FileCopyOutlinedIcon />
+            </IconButton>
+          </Tooltip>
+        </div>
+      ) : null}
       {props.batchActions && selected.length > 0 ? (
         <div className={classes.batchActionWrapper} data-test="batch-actions">
           <Tooltip title={localization.batchActions.delete} placement="bottom">

apps/sensenet/src/components/content/Explore.tsx

@@ -11,7 +11,7 @@ import {
 } from '@sensenet/hooks-react'
 import { ColumnSetting } from '@sensenet/list-controls-react/src/ContentList/content-list-base-props'
 import { clsx } from 'clsx'
-import React, { useCallback, useContext, useState } from 'react'
+import React, { useCallback, useContext, useEffect, useState } from 'react'
 import { useHistory } from 'react-router'
 import { ResponsivePersonalSettings } from '../../context'
 import { globals, useGlobalStyles } from '../../globalStyles'
@@ -96,6 +96,7 @@ export function Explore({
   const pathFromUrl = useQuery().get('path')
   const snRoute = useSnRoute()
   const activeAction = snRoute.match!.params.action
+  const [selected, setSelected] = useState<GenericContent[]>([])
 
   const onActivateItemOverride = async (activeItem: GenericContent) => {
     const expandedItem = await repository.load({
@@ -186,6 +187,10 @@ export function Explore({
     )
   }
 
+  useEffect(() => {
+    selectionService.selection.setValue(selected)
+  }, [selected, selectionService.selection])
+
   return (
     <LoadSettingsContextProvider>
       <CurrentContentProvider idOrPath={currentPath}>
@@ -197,13 +202,15 @@ export function Explore({
                   onNavigate(i.content)
                 }}
                 batchActions={true}
+                treeActions={true}
               />
             </div>
             <div className={classes.treeAndDatagridWrapper}>
               {hasTree && (
                 <TreeWithData
                   onItemClick={(item) => {
                     onNavigate(item)
+                    setSelected([item])
                   }}
                   parentPath={PathHelper.isAncestorOf(rootPath, currentPath) ? rootPath : currentPath}
                   activeItemPath={currentPath}

apps/sensenet/src/components/tree/tree-with-data.tsx

@@ -263,7 +263,10 @@ export default function TreeWithData(props: TreeWithDataProps) {
       }),
     ]
 
-    return () => subscriptions.forEach((s) => s.dispose())
+    return () => {
+      console.log('unmounting')
+      subscriptions.forEach((s) => s.dispose())
+    }
   }, [
     treeData,
     eventHub.onContentDeleted,

apps/sensenet/src/localization/default.ts

@@ -549,6 +549,12 @@ const values = {
     copy: 'Copy selected items',
     copyPath: 'Copy path',
   },
+  treeActions: {
+    delete: 'Delete selected items',
+    move: 'Move selected items',
+    copy: 'Copy selected items',
+    copyPath: 'Copy path',
+  },
   referenceContentListDialog: {
     errorAlreadyInList: 'The selected item is already in the list',
   },