Feature/addbutton change

.vscode/settings.json

@@ -1,5 +1,4 @@
 {
   "typescript.tsdk": "node_modules/typescript/lib",
-  "editor.formatOnSave": true,
-  "eslint.validate": [{ "language": "typescript", "autoFix": true }, { "language": "typescriptreact", "autoFix": true }]
+  "editor.formatOnSave": true
 }

apps/sensenet/src/components/AddButton.tsx

@@ -1,23 +1,49 @@
-import Button from '@material-ui/core/Button'
-import Fab from '@material-ui/core/Fab'
-import SwipeableDrawer from '@material-ui/core/SwipeableDrawer'
-import Tooltip from '@material-ui/core/Tooltip'
-import Typography from '@material-ui/core/Typography'
 import Add from '@material-ui/icons/Add'
 import CloudUpload from '@material-ui/icons/CloudUpload'
 import { GenericContent, Schema } from '@sensenet/default-content-types'
 import React, { useContext, useEffect, useState } from 'react'
 import { CurrentContentContext, useLogger, useRepository } from '@sensenet/hooks-react'
+import {
+  Button,
+  createStyles,
+  IconButton,
+  ListItem,
+  ListItemIcon,
+  ListItemText,
+  makeStyles,
+  SwipeableDrawer,
+  Theme,
+  Tooltip,
+  Typography,
+} from '@material-ui/core'
 import { useLocalization } from '../hooks'
 import { Icon } from './Icon'
 import { useDialog } from './dialogs'
 
+const useStyles = makeStyles((theme: Theme) => {
+  return createStyles({
+    addButton: {
+      width: '32px',
+      height: '32px',
+      minHeight: 0,
+      padding: 0,
+      margin: '0.5rem 0.5rem',
+      backgroundColor: theme.palette.primary.main,
+      '&:hover': {
+        backgroundColor: theme.palette.primary.dark,
+      },
+    },
+  })
+})
+
 export interface AddButtonProps {
   parent?: GenericContent
-  allowedTypes?: string[]
+  isOpened?: boolean
+  path: string
 }
 
 export const AddButton: React.FunctionComponent<AddButtonProps> = props => {
+  const classes = useStyles()
   const repo = useRepository()
   const { openDialog } = useDialog()
   const parentContext = useContext(CurrentContentContext)
@@ -26,6 +52,7 @@ export const AddButton: React.FunctionComponent<AddButtonProps> = props => {
   const [allowedChildTypes, setAllowedChildTypes] = useState<Schema[]>([])
   const localization = useLocalization().addButton
   const logger = useLogger('AddButton')
+  const [isAvailable, setAvailable] = useState(false)
 
   useEffect(() => {
     props.parent && setParent(props.parent)
@@ -36,33 +63,83 @@ export const AddButton: React.FunctionComponent<AddButtonProps> = props => {
   }, [parentContext, props.parent])
 
   useEffect(() => {
-    if (props.allowedTypes && props.allowedTypes.length > 0) {
-      setAllowedChildTypes(props.allowedTypes.map(type => repo.schemas.getSchemaByName(type)))
-    } else if (showSelectType) {
-      repo
-        .getAllowedChildTypes({ idOrPath: parent.Id })
-        .then(types => setAllowedChildTypes(types.d.results.map(t => repo.schemas.getSchemaByName(t.Name))))
-        .catch(error => {
-          logger.error({
-            message: localization.errorGettingAllowedContentTypes,
-            data: {
-              details: { error },
-            },
-          })
+    const getActions = async () => {
+      try {
+        const actions = await repo.getActions({ idOrPath: props.parent ? parent.Id : props.path })
+        const isActionFound = actions.d.Actions.some(action => action.Name === 'Add' || action.Name === 'Upload')
+        setAvailable(isActionFound)
+      } catch (error) {
+        logger.error({
+          message: localization.errorGettingActions,
+          data: {
+            details: { error },
+          },
+        })
+      }
+    }
+
+    if (props.parent || props.path !== '') {
+      getActions()
+    } else {
+      setAvailable(false)
+    }
+  }, [localization.errorGettingActions, logger, parent, props.parent, props.path, repo])
+
+  useEffect(() => {
+    const getAllowedChildTypes = async () => {
+      try {
+        const allowedChildTypesFromRepo = await repo.getAllowedChildTypes({
+          idOrPath: props.parent ? parent.Id : props.path,
+        })
+        const allowedChildTypeList = allowedChildTypesFromRepo.d.results.map(t => repo.schemas.getSchemaByName(t.Name))
+        setAllowedChildTypes(allowedChildTypeList)
+      } catch (error) {
+        logger.error({
+          message: localization.errorGettingAllowedContentTypes,
+          data: {
+            details: { error },
+          },
         })
+      }
+    }
+
+    if (showSelectType) {
+      props.parent || props.path !== '' ? getAllowedChildTypes() : setAllowedChildTypes([])
     }
-  }, [localization.errorGettingAllowedContentTypes, logger, parent.Id, props.allowedTypes, repo, showSelectType])
+  }, [localization.errorGettingAllowedContentTypes, logger, parent.Id, props.parent, props.path, repo, showSelectType])
 
   return (
-    <div>
-      <Tooltip title={localization.tooltip} placement="top-end">
-        <Fab
-          color="primary"
-          style={{ position: 'fixed', bottom: '1em', right: '1em' }}
-          onClick={() => setShowSelectType(true)}>
-          <Add />
-        </Fab>
-      </Tooltip>
+    <div
+      style={{
+        display: 'flex',
+        justifyContent: 'center',
+        position: 'relative',
+      }}>
+      {!props.isOpened ? (
+        <Tooltip title={localization.tooltip} placement="right">
+          <span>
+            <IconButton className={classes.addButton} onClick={() => setShowSelectType(true)} disabled={!isAvailable}>
+              <Add />
+            </IconButton>
+          </span>
+        </Tooltip>
+      ) : (
+        <ListItem
+          style={{
+            width: '100%',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-evenly',
+          }}
+          button={true}
+          onClick={() => setShowSelectType(true)}
+          disabled={!isAvailable}>
+          <ListItemIcon>
+            <Add />
+          </ListItemIcon>
+          <ListItemText primary={localization.addNew} />
+        </ListItem>
+      )}
       <SwipeableDrawer
         anchor="bottom"
         onClose={() => setShowSelectType(false)}

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

@@ -10,7 +10,6 @@ import {
   useRepository,
 } from '@sensenet/hooks-react'
 import { useSelectionService } from '../../hooks'
-import { AddButton } from '../AddButton'
 import { CollectionComponent } from '../content-list'
 import { useDialog } from '../dialogs'
 
@@ -29,7 +28,6 @@ export const CommanderComponent: React.FunctionComponent<CommanderComponentProps
   const repo = useRepository()
   const { openDialog } = useDialog()
   const selectionService = useSelectionService()
-
   const [_leftPanelRef, setLeftPanelRef] = useState<null | any>(null)
   const [_rightPanelRef, setRightPanelRef] = useState<null | any>(null)
 
@@ -141,8 +139,6 @@ export const CommanderComponent: React.FunctionComponent<CommanderComponentProps
           </CurrentChildrenProvider>
         </CurrentContentProvider>
       </LoadSettingsContextProvider>
-
-      {activeParent ? <AddButton parent={activeParent} /> : null}
     </div>
   )
 }

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

@@ -8,7 +8,6 @@ import {
   LoadSettingsContextProvider,
 } from '@sensenet/hooks-react'
 import { useSelectionService } from '../../hooks'
-import { AddButton } from '../AddButton'
 import { ContentBreadcrumbs } from '../ContentBreadcrumbs'
 import { CollectionComponent } from '../content-list'
 import { Tree } from '../tree/index'
@@ -70,8 +69,6 @@ export const Explore: React.FunctionComponent<ExploreComponentProps> = props =>
                   fieldsToDisplay={props.fieldsToDisplay}
                   onActiveItemChange={item => selectionService.activeContent.setValue(item)}
                 />
-
-                <AddButton />
               </div>
             </CurrentAncestorsProvider>
           </CurrentChildrenProvider>

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

@@ -6,7 +6,6 @@ import {
   LoadSettingsContextProvider,
 } from '@sensenet/hooks-react'
 import { useSelectionService } from '../../hooks'
-import { AddButton } from '../AddButton'
 import { CollectionComponent, CollectionComponentProps } from '../content-list'
 
 export interface SimpleListComponentProps {
@@ -36,7 +35,6 @@ export const SimpleList: React.FunctionComponent<SimpleListComponentProps> = pro
                 onActiveItemChange={item => selectionService.activeContent.setValue(item)}
                 {...props.collectionComponentProps}
               />
-              <AddButton />
             </CurrentAncestorsProvider>
           </CurrentChildrenProvider>
         </CurrentContentProvider>

apps/sensenet/src/components/drawer/PermanentDrawer.tsx

@@ -12,21 +12,24 @@ import Settings from '@material-ui/icons/Settings'
 import { PathHelper } from '@sensenet/client-utils'
 import React, { useContext, useEffect, useState } from 'react'
 import { withRouter } from 'react-router'
-import { Link, matchPath, NavLink, RouteComponentProps } from 'react-router-dom'
+import { matchPath, NavLink, RouteComponentProps } from 'react-router-dom'
 import { useRepository, useSession } from '@sensenet/hooks-react'
 import { ResponsiveContext, ResponsivePersonalSetttings } from '../../context'
-import { useDrawerItems, useLocalization, usePersonalSettings, useTheme } from '../../hooks'
+import { useDrawerItems, useLocalization, usePersonalSettings, useSelectionService, useTheme } from '../../hooks'
 import { LogoutButton } from '../LogoutButton'
 import { UserAvatar } from '../UserAvatar'
+import { AddButton } from '../AddButton'
 
 const PermanentDrawer: React.FunctionComponent<RouteComponentProps> = props => {
   const settings = useContext(ResponsivePersonalSetttings)
+  const selectionService = useSelectionService()
   const personalSettings = usePersonalSettings()
   const theme = useTheme()
   const session = useSession()
   const repo = useRepository()
   const device = useContext(ResponsiveContext)
-
+  const [currentComponent, setCurrentComponent] = useState(selectionService.activeContent.getValue())
+  const [currentPath, setCurrentPath] = useState('')
   const [opened, setOpened] = useState(settings.drawer.type === 'permanent')
   const items = useDrawerItems()
   const localization = useLocalization().drawer
@@ -35,13 +38,21 @@ const PermanentDrawer: React.FunctionComponent<RouteComponentProps> = props => {
     personalSettings.repositories.find(r => r.url === PathHelper.trimSlashes(repo.configuration.repositoryUrl)),
   )
 
-  useEffect(
-    () =>
-      setCurrentRepoEntry(
-        personalSettings.repositories.find(r => r.url === PathHelper.trimSlashes(repo.configuration.repositoryUrl)),
-      ),
-    [personalSettings, repo],
-  )
+  useEffect(() => {
+    const activeComponentObserve = selectionService.activeContent.subscribe(newActiveComponent =>
+      setCurrentComponent(newActiveComponent),
+    )
+
+    return function cleanup() {
+      activeComponentObserve.dispose()
+    }
+  }, [selectionService.activeContent])
+
+  useEffect(() => {
+    setCurrentRepoEntry(
+      personalSettings.repositories.find(r => r.url === PathHelper.trimSlashes(repo.configuration.repositoryUrl)),
+    )
+  }, [personalSettings, repo])
 
   if (!settings.drawer.enabled) {
     return null
@@ -63,28 +74,18 @@ const PermanentDrawer: React.FunctionComponent<RouteComponentProps> = props => {
           transition: 'width 100ms ease-in-out',
         }}>
         <div style={{ paddingTop: '1em', overflowY: 'auto', overflowX: 'hidden' }}>
+          <AddButton isOpened={opened} parent={currentComponent} path={currentPath} />
           {items.map((item, index) => {
-            const isActive = matchPath(props.location.pathname, `/:repositoryId${item.url}`)
-            return isActive ? (
-              <ListItem button={true} key={index} selected>
-                <Tooltip
-                  title={
-                    <React.Fragment>
-                      {item.primaryText} <br /> {item.secondaryText}
-                    </React.Fragment>
-                  }
-                  placement="right">
-                  <ListItemIcon>{item.icon}</ListItemIcon>
-                </Tooltip>
-                {opened ? <ListItemText primary={item.primaryText} secondary={item.secondaryText} /> : null}
-              </ListItem>
-            ) : (
+            return (
               <NavLink
                 to={`/${btoa(repo.configuration.repositoryUrl)}${item.url}`}
-                activeStyle={{ opacity: 1 }}
                 style={{ textDecoration: 'none', opacity: 0.54 }}
-                key={index}>
-                <ListItem button={true}>
+                key={index}
+                onClick={() => setCurrentPath(item.root ? item.root : '')}>
+                <ListItem
+                  button={true}
+                  key={index}
+                  selected={matchPath(props.location.pathname, `/:repositoryId${item.url}`) === null ? false : true}>
                   <Tooltip
                     title={
                       <React.Fragment>
@@ -121,11 +122,11 @@ const PermanentDrawer: React.FunctionComponent<RouteComponentProps> = props => {
                 />
                 <ListItemSecondaryAction>
                   {device === 'mobile' ? null : (
-                    <Link to={`/personalSettings`} style={{ textDecoration: 'none' }}>
+                    <NavLink to="/personalSettings" style={{ textDecoration: 'none' }}>
                       <IconButton title={localization.personalSettingsTitle}>
                         <Settings />
                       </IconButton>
-                    </Link>
+                    </NavLink>
                   )}
                   <LogoutButton />
                 </ListItemSecondaryAction>
@@ -134,10 +135,10 @@ const PermanentDrawer: React.FunctionComponent<RouteComponentProps> = props => {
           ) : (
             <>
               <NavLink
-                to={'/personalSettings'}
-                activeStyle={{ opacity: 1 }}
+                to="/personalSettings"
                 style={{ textDecoration: 'none', opacity: 0.54 }}
-                key={'personalSettings'}>
+                key="personalSettings"
+                onClick={() => setCurrentPath('')}>
                 <ListItem button={true}>
                   <Tooltip
                     title={