Hide settings folder option

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/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/localization/default.ts

@@ -308,6 +308,9 @@ const values = {
     openUserMenu: 'Open user menu',
     openNewMenu: `What's new`,
     accountSettings: 'Account settings',
+    openViewOptions: 'Open view options',
+    showHiddenItems: 'Show hidden items',
+    viewOptions: 'View options',
   },
   navigationCommandProvider: {
     personalSettingsPrimary: 'Personal Settings',

apps/sensenet/src/localization/hungarian.ts

@@ -148,6 +148,9 @@ const values: Localization = {
     openUserMenu: 'Felhasználói menü kinyitása',
     openNewMenu: 'Újdonságok',
     accountSettings: 'Felhasználói beállítások',
+    openViewOptions: 'Felületi beállítások kinyitása',
+    showHiddenItems: 'Rejtett elemek megj.',
+    viewOptions: 'Felület beállítások',
   },
   settings: {
     edit: 'Módosítás',

apps/sensenet/src/services/PersonalSettings.ts

@@ -88,6 +88,7 @@ export interface CustomContentDrawerItem
 export type PersonalSettingsType = PlatformDependent<UiSettings> & {
   eventLogSize: number
   sendLogWithCrashReports: boolean
+  showHiddenItems: boolean
   logLevel: Array<keyof typeof LogLevel>
   language: 'default' | 'hungarian'
   theme: 'light' | 'dark'
@@ -138,6 +139,7 @@ export const defaultSettings: PersonalSettingsType = {
   sendLogWithCrashReports: true,
   logLevel: ['Information', 'Warning', 'Error', 'Fatal'],
   theme: prefersDark ? 'dark' : 'light',
+  showHiddenItems: true,
   uploadHandlers: [
     'SenseNet.ContentRepository.File',
     'SenseNet.ContentRepository.Image',