Merge branch 'develop' into fix/2105-number-field

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: '300px',
+    },
     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,26 @@ 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 })
+  }
+
+  const togglePreferDisplayNameValue = () => (event: ChangeEvent<HTMLInputElement>) => {
+    const settings = service.userValue.getValue()
+    service.setPersonalSettingsValue({ ...settings, preferDisplayName: 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 +215,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 +246,38 @@ 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>
+                <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.preferDisplayName}
+                      </Grid>
+                      <Grid item>
+                        <Switch
+                          data-test="prefer-display-name-checkbox"
+                          checked={personalSettings.preferDisplayName}
+                          onChange={togglePreferDisplayNameValue()}
+                        />
+                      </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>