Merge branch 'develop' into feature/Accordion-in-Tiptap-editor

apps/sensenet/src/application-paths.ts

@@ -13,11 +13,11 @@ export const PATHS = {
   content: { appPath: '/content/:browseType/:action?', snPath: '/Root/Content' },
   contentTemplates: { appPath: '/content-templates/:browseType/:action?', snPath: '/Root/ContentTemplates' },
   custom: { appPath: '/custom/:browseType/:path/:action?' },
-  configuration: { appPath: '/settings/configuration/:action?', snPath: '/Root/System/Settings' },
-  localization: { appPath: '/settings/localization/:action?', snPath: '/Root/Localization' },
-  webhooks: { appPath: '/settings/webhooks/:action?', snPath: '/Root/System/WebHooks' },
-  settings: { appPath: '/settings/:submenu?' },
-  apiKeys: { appPath: '/settings/apikeys' },
+  configuration: { appPath: '/system/settings/:action?', snPath: '/Root/System/Settings' },
+  localization: { appPath: '/system/localization/:action?', snPath: '/Root/Localization' },
+  webhooks: { appPath: '/system/webhooks/:action?', snPath: '/Root/System/WebHooks' },
+  settings: { appPath: '/system/:submenu?' },
+  apiKeys: { appPath: '/system/apikeys' },
 } as const
 
 type SettingsItemType = 'stats' | 'apikeys' | 'webhooks' | 'adminui'
@@ -30,28 +30,28 @@ type RoutesWithContentBrowser = keyof Pick<
 type RoutesWithActionParam = keyof Pick<typeof PATHS, 'savedQueries' | 'localization' | 'configuration' | 'webhooks'>
 
 type Options =
-  | { path: (typeof PATHS)['events']['appPath']; params?: { eventGuid: string; [index: string]: string } }
+  | { path: (typeof PATHS)['events']['appPath']; params?: { eventGuid: string;[index: string]: string } }
   | {
-      path: (typeof PATHS)[RoutesWithContentBrowser]['appPath']
-      params: { browseType: (typeof BrowseType)[number]; action?: string; [index: string]: string | undefined }
-    }
+    path: (typeof PATHS)[RoutesWithContentBrowser]['appPath']
+    params: { browseType: (typeof BrowseType)[number]; action?: string;[index: string]: string | undefined }
+  }
   | {
-      path: (typeof PATHS)['custom']['appPath']
-      params: {
-        browseType: (typeof BrowseType)[number]
-        path: string
-        action?: string
-        [index: string]: string | undefined
-      }
+    path: (typeof PATHS)['custom']['appPath']
+    params: {
+      browseType: (typeof BrowseType)[number]
+      path: string
+      action?: string
+      [index: string]: string | undefined
     }
+  }
   | {
-      path: (typeof PATHS)[RoutesWithActionParam]['appPath']
-      params?: { action: string; [index: string]: string }
-    }
+    path: (typeof PATHS)[RoutesWithActionParam]['appPath']
+    params?: { action: string;[index: string]: string }
+  }
   | {
-      path: (typeof PATHS)['settings']['appPath']
-      params?: { submenu: SettingsItemType; [index: string]: string | SettingsItemType }
-    }
+    path: (typeof PATHS)['settings']['appPath']
+    params?: { submenu: SettingsItemType;[index: string]: string | SettingsItemType }
+  }
 
 export const resolvePathParams = ({ path, params }: Options) => {
   let currentPath: string = path

apps/sensenet/src/components/appbar/desktop-nav-menu.tsx

@@ -1,6 +1,7 @@
 import { Grid, IconButton, ListItemIcon, ListItemText, MenuItem, MenuList, Paper, Typography } from '@material-ui/core'
 import ClickAwayListener from '@material-ui/core/ClickAwayListener'
 import { createStyles, makeStyles, Theme, useTheme } from '@material-ui/core/styles'
+import { TuneOutlined } from '@material-ui/icons'
 import KeyboardArrowDown from '@material-ui/icons/KeyboardArrowDown'
 import { Switch } from '@sensenet/controls-react'
 import { useInjector, useRepository } from '@sensenet/hooks-react'
@@ -17,6 +18,10 @@ import { UserAvatar } from '../UserAvatar'
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
+    viewOptions: {
+      cursor: 'pointer',
+      marginRight: '16px',
+    },
     navMenu: {
       height: '100%',
       width: '140px',
@@ -38,6 +43,13 @@ const useStyles = makeStyles((theme: Theme) =>
       height: 'fit-content',
       width: '216px',
     },
+    popperViewWrapper: {
+      position: 'absolute',
+      top: globals.common.headerHeight,
+      right: '1px',
+      height: 'fit-content',
+      width: '256px',
+    },
     popper: {
       backgroundColor: theme.palette.type === 'light' ? globals.light.navMenuColor : globals.dark.navMenuColor,
       border: theme.palette.type === 'light' ? clsx(globals.light.borderColor, '1px') : 'none',
@@ -52,7 +64,7 @@ const useStyles = makeStyles((theme: Theme) =>
       color: theme.palette.primary.main,
       fontSize: '14px',
     },
-    themeSwitcher: {
+    checkboxMenuItem: {
       color: theme.palette.primary.main,
       fontSize: '14px',
       '& .MuiButtonBase-root': {
@@ -75,6 +87,7 @@ export const DesktopNavMenu: FunctionComponent = () => {
   const localization = useLocalization()
   const { openDialog } = useDialog()
   const [openUserMenu, setOpenUserMenu] = useState(false)
+  const [openViewOptions, setOpenViewOptions] = useState(false)
 
   const handleToggle = (setter: Dispatch<SetStateAction<boolean>>) => {
     setter((prevState) => !prevState)
@@ -99,9 +112,21 @@ export const DesktopNavMenu: FunctionComponent = () => {
     service.setPersonalSettingsValue({ ...settings, theme: event.target.checked ? 'dark' : 'light' })
   }
 
+  const toggleHideSettingsFolder = () => (event: ChangeEvent<HTMLInputElement>) => {
+    const settings = service.userValue.getValue()
+    service.setPersonalSettingsValue({ ...settings, showHiddenItems: event.target.checked })
+  }
+
   return (
     <div className={clsx(globalClasses.centered, classes.navMenu)}>
       <>
+        <IconButton
+          aria-label={localization.topMenu.openViewOptions}
+          aria-controls={openViewOptions ? 'menu-list-grow' : undefined}
+          className={classes.viewOptions}
+          onClick={() => handleToggle(setOpenViewOptions)}>
+          <TuneOutlined />
+        </IconButton>
         <UserAvatar
           user={currentUser}
           repositoryUrl={repo.configuration.repositoryUrl}
@@ -185,10 +210,25 @@ export const DesktopNavMenu: FunctionComponent = () => {
                 <MenuItem onClick={logout} className={classes.userMenuItem}>
                   {localization.topMenu.logout}
                 </MenuItem>
+              </MenuList>
+            </ClickAwayListener>
+          </div>
+        </Paper>
+      ) : null}
+      {openViewOptions ? (
+        <Paper className={classes.popperViewWrapper}>
+          <div className={classes.popper}>
+            <ClickAwayListener onClickAway={() => handleClose(setOpenViewOptions)}>
+              <MenuList autoFocusItem={openViewOptions} id="menu-list-grow">
+                <MenuItem onClick={() => handleClose(setOpenViewOptions)}>
+                  <Typography component="div" style={{ margin: '0 auto' }}>
+                    {localization.topMenu.viewOptions}
+                  </Typography>
+                </MenuItem>
                 <MenuItem>
-                  <Typography component="div" className={classes.themeSwitcher}>
-                    <Grid component="label" container alignItems="center" spacing={1}>
-                      <Grid item style={{ paddingRight: '32px' }} data-test="theme-status">
+                  <Typography component="div" className={classes.checkboxMenuItem} style={{ width: '100%' }}>
+                    <Grid component="label" container alignItems="center" justify="space-between">
+                      <Grid item style={{ paddingRight: '16px' }} data-test="theme-status">
                         {personalSettings.theme === 'dark' ? 'Light theme' : 'Dark theme'}
                       </Grid>
                       <Grid item>
@@ -201,6 +241,22 @@ export const DesktopNavMenu: FunctionComponent = () => {
                     </Grid>
                   </Typography>
                 </MenuItem>
+                <MenuItem>
+                  <Typography component="div" className={classes.checkboxMenuItem} style={{ width: '100%' }}>
+                    <Grid component="label" container alignItems="center" justify="space-between">
+                      <Grid item style={{ paddingRight: '16px' }}>
+                        {localization.topMenu.showHiddenItems}
+                      </Grid>
+                      <Grid item>
+                        <Switch
+                          data-test="hide-settings-folder-checkbox"
+                          checked={personalSettings.showHiddenItems}
+                          onChange={toggleHideSettingsFolder()}
+                        />
+                      </Grid>
+                    </Grid>
+                  </Typography>
+                </MenuItem>
               </MenuList>
             </ClickAwayListener>
           </div>

apps/sensenet/src/components/content-list/content-list.tsx

@@ -27,12 +27,13 @@ import React, {
 import { TableCellProps } from 'react-virtualized'
 import { ResponsiveContext, ResponsivePersonalSettings } from '../../context'
 import { globals, useGlobalStyles } from '../../globalStyles'
-import { useLocalization, useSelectionService } from '../../hooks'
+import { useLocalization, usePersonalSettings, useSelectionService } from '../../hooks'
 import { ContentBreadcrumbs } from '../ContentBreadcrumbs'
 import { ContentContextMenu } from '../context-menu/content-context-menu'
 import { useDialog } from '../dialogs'
 import { DropFileArea } from '../DropFileArea'
 import { SelectionControl } from '../SelectionControl'
+import { SETTINGS_FOLDER_FILTER } from '../tree/tree-with-data'
 import { ContextMenuWrapper } from './context-menu-wrapper'
 import {
   ActionsField,
@@ -124,6 +125,7 @@ export const ContentList = <T extends GenericContent = GenericContent>(props: Co
   const ancestors = useContext(CurrentAncestorsContext) as T[]
   const device = useContext(ResponsiveContext)
   const personalSettings = useContext(ResponsivePersonalSettings)
+  const userPersonalSettings = usePersonalSettings()
   const loadSettings = useContext(LoadSettingsContext)
   const repo = useRepository()
   const classes = useStyles()
@@ -266,9 +268,18 @@ export const ContentList = <T extends GenericContent = GenericContent>(props: Co
         }, []),
       ],
       orderby: [[currentOrder as any, currentDirection as any]],
+      filter: !userPersonalSettings.showHiddenItems ? `(${SETTINGS_FOLDER_FILTER})` : '',
     })
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [currentDirection, currentOrder, personalSettings.content.fields, props.fieldsToDisplay, repo, columnSettings])
+  }, [
+    currentDirection,
+    currentOrder,
+    personalSettings.content.fields,
+    userPersonalSettings.showHiddenItems,
+    props.fieldsToDisplay,
+    repo,
+    columnSettings,
+  ])
 
   useEffect(() => {
     setSelected([])

apps/sensenet/src/components/settings/index.tsx

@@ -53,8 +53,8 @@ export const Settings: React.FunctionComponent = () => {
 
   const settingsItems = [
     {
-      name: 'configuration',
-      displayName: localizationDrawer.titles.Configuration,
+      name: 'settings',
+      displayName: localizationDrawer.titles.Settings,
       url: resolvePathParams({ path: PATHS.configuration.appPath }),
     },
     {
@@ -83,7 +83,7 @@ export const Settings: React.FunctionComponent = () => {
     switch (routeMatch.params.submenu) {
       case 'localization':
         return <ContentComponent disableColumnSettings rootPath={PATHS.localization.snPath} />
-      case 'configuration':
+      case 'settings':
         return <SetupComponent />
       case 'adminui':
         return <PersonalSettingsEditor />
@@ -117,7 +117,7 @@ export const Settings: React.FunctionComponent = () => {
   return (
     <div className={clsx(globalClasses.contentWrapper, classes.settingsWrapper)} style={{ paddingLeft: 0 }}>
       <div className={clsx(globalClasses.contentTitle, globalClasses.centeredVertical)}>
-        <span style={{ fontSize: '20px' }}>{localizationDrawer.titles.Settings}</span>
+        <span style={{ fontSize: '20px' }}>{localizationDrawer.titles.System}</span>
       </div>
       <div className={classes.settingsContainer}>
         <div className={classes.settingsDrawer}>

apps/sensenet/src/components/settings/setup.tsx

@@ -128,7 +128,7 @@ const Setup = () => {
   return (
     <div className={globalClasses.contentWrapper} style={{ paddingLeft: 0 }} data-test="settings-container">
       <div className={clsx(globalClasses.contentTitle, globalClasses.centeredVertical)} style={{ display: 'grid' }}>
-        <span style={{ fontSize: '20px' }}>{localizationDrawerTitles.Configuration}</span>
+        <span style={{ fontSize: '20px' }}>{localizationDrawerTitles.Settings}</span>
       </div>
       {renderContent()}
     </div>

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

@@ -4,7 +4,7 @@ import { GenericContent } from '@sensenet/default-content-types'
 import { useLogger, useRepository, useRepositoryEvents } from '@sensenet/hooks-react'
 import React, { useCallback, useEffect, useState } from 'react'
 import Semaphore from 'semaphore-async-await'
-import { usePreviousValue, useSelectionService } from '../../hooks'
+import { usePersonalSettings, usePreviousValue, useSelectionService } from '../../hooks'
 import { ItemType, Tree } from './tree'
 
 type TreeWithDataProps = {
@@ -18,6 +18,7 @@ type TreeWithDataProps = {
 let lastRequest: { path: string; lastIndex: number } | undefined
 
 const ITEM_THRESHOLD = 50
+export const SETTINGS_FOLDER_FILTER = `not ((Name eq 'Settings') and (isOf('SystemFolder')))`
 
 const walkTree = (node: ItemType, callBack: (node: ItemType) => void) => {
   if (node?.children?.length) {
@@ -31,6 +32,7 @@ const lock = new Semaphore(1)
 
 export default function TreeWithData(props: TreeWithDataProps) {
   const repo = useRepository()
+  const personalSettings = usePersonalSettings()
   const [itemCount, setItemCount] = useState(0)
   const [treeData, setTreeData] = useState<ItemType>()
   const [isLoading, setIsLoading] = useState(false)
@@ -39,6 +41,7 @@ export default function TreeWithData(props: TreeWithDataProps) {
   const logger = useLogger('tree-with-data')
 
   const prevActiveItemPath = usePreviousValue(props.activeItemPath)
+  const prevShowHiddenItems = usePreviousValue(personalSettings.showHiddenItems)
   const { onTreeLoadingChange } = props
 
   const loadCollection = useCallback(
@@ -55,7 +58,7 @@ export default function TreeWithData(props: TreeWithDataProps) {
           oDataOptions: {
             top,
             skip,
-            filter: 'IsFolder eq true',
+            filter: `IsFolder eq true ${!personalSettings.showHiddenItems ? `and (${SETTINGS_FOLDER_FILTER})` : ''}`,
             orderby: [
               ['DisplayName', 'asc'],
               ['Name', 'asc'],
@@ -72,7 +75,7 @@ export default function TreeWithData(props: TreeWithDataProps) {
         setIsLoading(false)
       }
     },
-    [logger, repo, onTreeLoadingChange],
+    [onTreeLoadingChange, repo, personalSettings.showHiddenItems, logger],
   )
 
   useEffect(() => {
@@ -97,7 +100,6 @@ export default function TreeWithData(props: TreeWithDataProps) {
   const openTree = useCallback(
     async (forced = false) => {
       if (!forced && treeData && treeData.Path === props.parentPath) return
-
       const buildTree = (items: GenericContent[], id?: number): any => {
         if (!id) {
           return { ...items[0], children: buildTree(items, items[0].Id), hasNextPage: false, expanded: true }
@@ -118,7 +120,10 @@ export default function TreeWithData(props: TreeWithDataProps) {
           idOrPath: props.activeItemPath,
           name: 'OpenTree',
           method: 'GET',
-          oDataOptions: props.loadSettings,
+          oDataOptions: {
+            ...props.loadSettings,
+            filter: !personalSettings.showHiddenItems ? SETTINGS_FOLDER_FILTER : '',
+          },
           body: {
             rootPath: props.parentPath,
             withSystem: true,
@@ -132,7 +137,7 @@ export default function TreeWithData(props: TreeWithDataProps) {
         setTreeData(undefined)
       }
     },
-    [props.activeItemPath, props.parentPath, repo, treeData, props.loadSettings],
+    [treeData, props.parentPath, props.activeItemPath, props.loadSettings, repo, personalSettings.showHiddenItems],
   )
 
   const loadMoreItems = useCallback(
@@ -279,8 +284,8 @@ export default function TreeWithData(props: TreeWithDataProps) {
   ])
 
   useEffect(() => {
-    openTree()
-  }, [openTree])
+    openTree(personalSettings.showHiddenItems !== prevShowHiddenItems)
+  }, [openTree, personalSettings.showHiddenItems, prevShowHiddenItems])
 
   const onItemClick = async (item: ItemType) => {
     if (!treeData) {

apps/sensenet/src/components/view-controls/common/view-title.tsx

@@ -37,7 +37,9 @@ const useStyles = makeStyles(() => {
       color: 'grey',
       marginLeft: '5px',
     },
-
+    actionText: {
+      marginRight: '5px',
+    },
     viewTitle: {
       '& span': {
         display: 'inline-block',
@@ -76,7 +78,8 @@ export const ViewTitle: React.FunctionComponent<ViewTitleProps> = (props) => {
   return (
     <div className={clsx(classes.title, globalClasses.centered)}>
       <div data-test="viewtitle" className={classes.viewTitle}>
-        {props.title} <span className={classes.textBolder}>{props.titleBold}</span>
+        <span className={classes.actionText}>{props.title}</span>
+        <span className={classes.textBolder}>{props.titleBold}</span>
         <span className={classes.typeinfo}>({props.content!.Type})</span>
       </div>
       <div className={classes.actionBar}>

apps/sensenet/src/components/view-controls/permission-view.tsx

@@ -292,7 +292,7 @@ export const PermissionView: React.FC<PermissionViewProps> = (props) => {
                       <ListItemText
                         primary={
                           <div>
-                            {inheritedEntry.identity.displayName}
+                            {inheritedEntry.identity.displayName} ({inheritedEntry.identity.path})
                             <Link
                               data-test={`inherited-${inheritedEntry.identity.displayName
                                 ?.replace(/\s+/g, '-')
@@ -383,7 +383,7 @@ export const PermissionView: React.FC<PermissionViewProps> = (props) => {
                         <ListItemText
                           primary={
                             <div className={globalClasses.centeredVertical}>
-                              {setOnThisEntry.identity.displayName}
+                              {setOnThisEntry.identity.displayName} ({setOnThisEntry.identity.path})
                               {!setOnThisEntry.propagates && (
                                 <Tooltip title={localization.permissionEditor.localOnly} placement="top">
                                   <DesktopMac className={classes.localOnlyIcon} />