DisplayName-Name switcher option

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

@@ -48,7 +48,7 @@ const useStyles = makeStyles((theme: Theme) =>
       top: globals.common.headerHeight,
       right: '1px',
       height: 'fit-content',
-      width: '256px',
+      width: '300px',
     },
     popper: {
       backgroundColor: theme.palette.type === 'light' ? globals.light.navMenuColor : globals.dark.navMenuColor,
@@ -117,6 +117,11 @@ export const DesktopNavMenu: FunctionComponent = () => {
     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)}>
       <>
@@ -257,6 +262,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.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/tree/tree-with-data.tsx

@@ -42,6 +42,7 @@ export default function TreeWithData(props: TreeWithDataProps) {
 
   const prevActiveItemPath = usePreviousValue(props.activeItemPath)
   const prevShowHiddenItems = usePreviousValue(personalSettings.showHiddenItems)
+  const prevPreferDisplayName = usePreviousValue(personalSettings.preferDisplayName)
   const { onTreeLoadingChange } = props
 
   const loadCollection = useCallback(
@@ -287,6 +288,51 @@ export default function TreeWithData(props: TreeWithDataProps) {
     openTree(personalSettings.showHiddenItems !== prevShowHiddenItems)
   }, [openTree, personalSettings.showHiddenItems, prevShowHiddenItems])
 
+  useEffect(() => {
+    if (prevPreferDisplayName !== personalSettings.preferDisplayName) {
+      const buildTree = (items: GenericContent[], id?: number): any => {
+        if (!id) {
+          return { ...items[0], children: buildTree(items, items[0].Id), hasNextPage: false, expanded: true }
+        }
+
+        return items
+          .filter((item) => item.ParentId === id)
+          .map((item) => ({
+            ...item,
+            children: buildTree(items, item.Id),
+            hasNextPage: false,
+            expanded: items.some((treeNode) => treeNode.ParentId === item.Id) || props.activeItemPath === item.Path,
+          }))
+      }
+
+      repo
+        .executeAction<any, ODataResponse<{ results: GenericContent[] }>>({
+          idOrPath: props.activeItemPath,
+          name: 'OpenTree',
+          method: 'GET',
+          oDataOptions: {
+            ...props.loadSettings,
+            filter: !personalSettings.showHiddenItems ? SETTINGS_FOLDER_FILTER : '',
+            orderby: personalSettings.preferDisplayName ? [['DisplayName', 'asc']] : [['Name', 'asc']],
+          },
+          body: {
+            rootPath: props.parentPath,
+            withSystem: true,
+          },
+        })
+        .then((response) => {
+          const tree = buildTree(response.d.results)
+          setItemCount(tree.children.length)
+          setTreeData(tree)
+        })
+        .catch(() => {
+          setItemCount(0)
+          setTreeData(undefined)
+        })
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [prevPreferDisplayName, personalSettings.preferDisplayName])
+
   const onItemClick = async (item: ItemType) => {
     if (!treeData) {
       return

apps/sensenet/src/components/tree/tree.tsx

@@ -10,6 +10,7 @@ import {
 import { GenericContent } from '@sensenet/default-content-types'
 import React, { ReactNode, useCallback, useEffect, useRef, useState } from 'react'
 import { AutoSizer, Index, List, ListRowProps } from 'react-virtualized'
+import { usePersonalSettings } from '../../hooks'
 import { ContentContextMenu } from '../context-menu/content-context-menu'
 import { Icon } from '../Icon'
 
@@ -76,6 +77,7 @@ export function Tree({ treeData, itemCount, onItemClick, loadMore, isLoading, ac
   const [elements, setElements] = useState<Element[]>()
   const [rowHeight, setRowHeight] = useState(ROW_HEIGHT)
   const classes = useStyles()
+  const personalSettings = usePersonalSettings()
 
   const listItemRef = useCallback((node) => {
     if (node) {
@@ -155,7 +157,9 @@ export function Tree({ treeData, itemCount, onItemClick, loadMore, isLoading, ac
     }
 
     //Convert the name to two parts in order to display ... in the middle
-    const [firstPart, SecondPart] = getStringParts(item.Name)
+    const [firstPart, SecondPart] = getStringParts(
+      personalSettings.preferDisplayName && item.DisplayName ? item.DisplayName : item.Name,
+    )
 
     const nodeItem = (
       <Tooltip title={item.Name} placement="bottom">

apps/sensenet/src/localization/default.ts

@@ -312,6 +312,7 @@ const values = {
     accountSettings: 'Account settings',
     openViewOptions: 'Open view options',
     showHiddenItems: 'Show hidden items',
+    preferDisplayName: 'Prefer DisplayName in Tree',
     viewOptions: 'View options',
   },
   navigationCommandProvider: {

apps/sensenet/src/localization/hungarian.ts

@@ -149,7 +149,8 @@ const values: Localization = {
     openNewMenu: 'Újdonságok',
     accountSettings: 'Felhasználói beállítások',
     openViewOptions: 'Felületi beállítások kinyitása',
-    showHiddenItems: 'Rejtett elemek megj.',
+    showHiddenItems: 'Rejtett elemek megjelenítése',
+    preferDisplayName: 'DisplayName a mappaszerkezetnél',
     viewOptions: 'Felület beállítások',
   },
   settings: {

apps/sensenet/src/services/PersonalSettings.ts

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