Merge branch 'feature/sn-auth-package-extraimprovements' into feature/snauth-multi-repo-sessions

Author: VargaJoe

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

@@ -128,6 +128,11 @@ export const DesktopNavMenu: FunctionComponent = () => {
     service.setPersonalSettingsValue({ ...settings, preferDisplayName: event.target.checked })
   }
 
+  const toggleSortFoldersFirstValue = () => (event: ChangeEvent<HTMLInputElement>) => {
+    const settings = service.userValue.getValue()
+    service.setPersonalSettingsValue({ ...settings, sortFoldersFirst: event.target.checked })
+  }
+
   return (
     <div className={clsx(globalClasses.centered, classes.navMenu)}>
       <>
@@ -300,6 +305,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.sortFoldersFirst}
+                      </Grid>
+                      <Grid item>
+                        <Switch
+                          data-test="sort-folders-first-checkbox"
+                          checked={personalSettings.sortFoldersFirst}
+                          onChange={toggleSortFoldersFirstValue()}
+                        />
+                      </Grid>
+                    </Grid>
+                  </Typography>
+                </MenuItem>
               </MenuList>
             </ClickAwayListener>
           </div>

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

@@ -22,6 +22,7 @@ import React, {
   useCallback,
   useContext,
   useEffect,
+  useMemo,
   useState,
 } from 'react'
 import { TableCellProps } from 'react-virtualized'
@@ -33,7 +34,7 @@ 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 { isFolderLikeTreeItem, SETTINGS_FOLDER_FILTER } from '../tree/tree-helpers'
 import { ContextMenuWrapper } from './context-menu-wrapper'
 import {
   ActionsField,
@@ -94,6 +95,8 @@ export const isReferenceField = (fieldName: string, repo: Repository, schema = '
 
 const rowHeightConst = 67
 const headerHeightConst = 48
+const displayNameInArray = ['DisplayName']
+const sortableColumns = ['DisplayName', 'Path', 'Type', 'Name', 'Version', 'CreationDate', 'ModificationDate']
 
 /**
  * Compare passed minutes with
@@ -121,7 +124,7 @@ const ColumnSettingsContainer: ColumnSettingsContainerType = {}
 export const ContentList = <T extends GenericContent = GenericContent>(props: ContentListProps<T>) => {
   const selectionService = useSelectionService()
   const parentContent = useContext(CurrentContentContext)
-  const children = useContext(CurrentChildrenContext) as T[]
+  const currentChildren = useContext(CurrentChildrenContext) as T[]
   const ancestors = useContext(CurrentAncestorsContext) as T[]
   const device = useContext(ResponsiveContext)
   const personalSettings = useContext(ResponsivePersonalSettings)
@@ -133,8 +136,6 @@ export const ContentList = <T extends GenericContent = GenericContent>(props: Co
   const { openDialog, closeLastDialog } = useDialog()
   const logger = useLogger('ContentList')
   const localization = useLocalization()
-  const [selected, setSelected] = useState<T[]>([])
-  const [activeContent, setActiveContent] = useState<T>(children[0])
   const [isFocused, setIsFocused] = useState(true)
   const [isContextMenuOpened, setIsContextMenuOpened] = useState(false)
   const [schema, setSchema] = useState(repo.schemas.getSchemaByName(props.schema || 'GenericContent'))
@@ -150,6 +151,35 @@ export const ContentList = <T extends GenericContent = GenericContent>(props: Co
   const [currentDirection, setCurrentDirection] = useState<'asc' | 'desc'>(
     (loadChildrenSettingsOrderBy?.[0][1] as 'asc' | 'desc') || 'asc',
   )
+  const children = useMemo(() => {
+    return [...currentChildren].sort((a, b) => {
+      if (userPersonalSettings.sortFoldersFirst) {
+        const folderOrder = Number(!isFolderLikeTreeItem(a)) - Number(!isFolderLikeTreeItem(b))
+
+        if (folderOrder) {
+          return folderOrder
+        }
+      }
+
+      if (sortableColumns.includes(String(currentOrder))) {
+        const nameA = String(a[currentOrder] ?? '')
+        const nameB = String(b[currentOrder] ?? '')
+
+        return currentDirection === 'asc' ? nameA.localeCompare(nameB) : nameB.localeCompare(nameA)
+      }
+
+      if (currentOrder === 'CreatedBy' || currentOrder === 'ModifiedBy') {
+        const nameA = String((a[currentOrder] as GenericContent)?.DisplayName ?? '')
+        const nameB = String((b[currentOrder] as GenericContent)?.DisplayName ?? '')
+
+        return currentDirection === 'asc' ? nameA.localeCompare(nameB) : nameB.localeCompare(nameA)
+      }
+
+      return 0
+    })
+  }, [currentChildren, currentDirection, currentOrder, userPersonalSettings.sortFoldersFirst])
+  const [selected, setSelected] = useState<T[]>([])
+  const [activeContent, setActiveContent] = useState<T>(children[0])
 
   const [columnSettings, setColumnSettings] = useState<Array<ColumnSetting<GenericContent>>>(
     personalSettings.content.fields,
@@ -673,9 +703,6 @@ export const ContentList = <T extends GenericContent = GenericContent>(props: Co
     },
   }
 
-  const displayNameInArray = ['DisplayName']
-  const sortableColumns = ['DisplayName', 'Path', 'Type', 'Name', 'Version', 'CreationDate', 'ModificationDate']
-
   return (
     <div style={{ ...props.style, ...{ height: '100%' } }} {...props.containerProps}>
       {props.enableBreadcrumbs ? (
@@ -719,34 +746,7 @@ export const ContentList = <T extends GenericContent = GenericContent>(props: Co
                 displayNameInArray) as any
             }
             getSelectionControl={getSelectionControl}
-            /* If the Order by Column Is The Display. The client will sort it. Due to some locale and indexing issues */
-            items={
-              sortableColumns.includes(String(currentOrder))
-                ? children?.sort((a, b) => {
-                    // If no display Name
-                    const nameA = String(a[currentOrder]) ?? '' // Provide a default value if displayName is undefined
-                    const nameB = String(b[currentOrder]) ?? '' // Provide a default value if displayName is undefined
-
-                    if (currentDirection === 'asc') {
-                      return nameA.localeCompare(nameB)
-                    }
-                    return nameB.localeCompare(nameA)
-                  })
-                : currentOrder === 'CreatedBy' || currentOrder === 'ModifiedBy'
-                ? children?.sort((a, b) => {
-                    const aTmp = a[currentOrder] as GenericContent
-                    const bTmp = b[currentOrder] as GenericContent
-
-                    const nameA = String(aTmp?.DisplayName) ?? ''
-                    const nameB = String(bTmp?.DisplayName) ?? ''
-
-                    if (currentDirection === 'asc') {
-                      return nameA.localeCompare(nameB)
-                    }
-                    return nameB.localeCompare(nameA)
-                  })
-                : children
-            }
+            items={children}
             onRequestOrderChange={onRequestOrderChangeFunc}
             onRequestSelectionChange={setSelected}
             orderBy={currentOrder}

apps/sensenet/src/components/grid/Grid.tsx

@@ -13,9 +13,10 @@ import {
 } from 'ag-grid-community'
 import { AgGridReact } from 'ag-grid-react'
 import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react'
-import { useLocalization, useSelectionService } from '../../hooks'
+import { useLocalization, usePersonalSettings, useSelectionService } from '../../hooks'
 import { ContentContextMenu } from '../context-menu/content-context-menu'
 import { DropFileArea } from '../DropFileArea'
+import { compareTreeItems } from '../tree/tree-helpers'
 import { GridProps } from './Props/GridProps'
 import { useGridLoading } from './Providers/GridLoadingProvider'
 
@@ -25,20 +26,13 @@ export function Grid<T extends GenericContent = GenericContent>(props: GridProps
   const { isGridLoading, setIsGridLoading } = useGridLoading()
   const selectionService = useSelectionService()
   const localization = useLocalization().common
+  const personalSettings = usePersonalSettings()
   const parentContent = useContext(CurrentContentContext)
   const currentChildren = useContext(CurrentChildrenContext) as GenericContent[]
   const isCurrentChildrenLoading = useContext(CurrentChildrenIsLoadingContext)
   const children = useMemo(() => {
-    return [...currentChildren].sort((a, b) => {
-      const aIsFolder = a.Type?.toLowerCase().includes('folder') ?? false
-      const bIsFolder = b.Type?.toLowerCase().includes('folder') ?? false
-
-      if (aIsFolder && !bIsFolder) return -1
-      if (!aIsFolder && bIsFolder) return 1
-
-      return (a.DisplayName ?? '').localeCompare(b.DisplayName ?? '')
-    })
-  }, [currentChildren])
+    return [...currentChildren].sort(compareTreeItems(true, personalSettings.sortFoldersFirst))
+  }, [currentChildren, personalSettings.sortFoldersFirst])
 
   const theme = useTheme()
   const [contextMenuItem, setContextMenuItem] = useState<GenericContent | null>(null)

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

@@ -1,6 +1,8 @@
 import { GenericContent } from '@sensenet/default-content-types'
 import { useRepository } from '@sensenet/hooks-react'
 import React, { createContext, ReactNode, useRef, useState } from 'react'
+import { usePersonalSettings } from '../../../hooks'
+import { getTreeOrderBy, SETTINGS_FOLDER_FILTER } from '../tree-helpers'
 // Meghatározzuk a Context típusát: egy string tömb és egy setter függvény
 type ExpandItemsContextType = [
   Set<string>,
@@ -20,13 +22,15 @@ const ExpandedItemsProvider = ({ children }: { children: ReactNode }) => {
   const [cacheTime, setCacheTime] = useState<number>(6000)
   const cache = useRef<{ [key: string]: { data: GenericContent[] | undefined; timestamp: number } }>({})
   const repo = useRepository()
+  const personalSettings = usePersonalSettings()
 
   const loadChildren = async (path: string): Promise<GenericContent[] | undefined> => {
     if (!path) return undefined
 
     const now = Date.now()
+    const cacheKey = `${path}|showHiddenItems:${personalSettings.showHiddenItems}`
 
-    const cached = cache.current[path]
+    const cached = cache.current[cacheKey]
     if (cached) {
       if (cached.data !== undefined && now - cached.timestamp < cacheTime) {
         return cached.data
@@ -37,7 +41,7 @@ const ExpandedItemsProvider = ({ children }: { children: ReactNode }) => {
         // Polling-based wait
         for (let i = 0; i < 10; i++) {
           await new Promise((res) => setTimeout(res, 200))
-          const recheck = cache.current[path]
+          const recheck = cache.current[cacheKey]
           if (recheck?.data !== undefined && now - recheck.timestamp < cacheTime) {
             return recheck.data
           }
@@ -47,30 +51,35 @@ const ExpandedItemsProvider = ({ children }: { children: ReactNode }) => {
     }
 
     // Mark as loading
-    cache.current[path] = { data: undefined, timestamp: now }
+    cache.current[cacheKey] = { data: undefined, timestamp: now }
 
     try {
       const response = await repo.loadCollection<GenericContent>({
         path,
         oDataOptions: {
           select: ['Id', 'Path', 'Name', 'DisplayName', 'Type', 'Actions', 'Icon', 'ParentId'],
-          filter: 'IsFolder eq true',
+          filter: `IsFolder eq true ${!personalSettings.showHiddenItems ? `and (${SETTINGS_FOLDER_FILTER})` : ''}`,
+          orderby: getTreeOrderBy(personalSettings.preferDisplayName),
           onlyselectList: true,
         },
       })
       const result = response?.d.results
-      cache.current[path] = { data: result, timestamp: Date.now() }
+      cache.current[cacheKey] = { data: result, timestamp: Date.now() }
       return result
     } catch (error) {
       console.error('#globalfetch: Fetch error:', error)
       // Clean up failed cache
-      delete cache.current[path]
+      delete cache.current[cacheKey]
       return undefined
     }
   }
 
   const deleteCache = (path: string) => {
-    delete cache.current[path]
+    Object.keys(cache.current)
+      .filter((key) => key.startsWith(`${path}|`))
+      .forEach((key) => {
+        delete cache.current[key]
+      })
   }
 
   return (

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

@@ -5,13 +5,14 @@ import { useRepository } from '@sensenet/hooks-react'
 import React, { MouseEventHandler, useCallback, useContext, useEffect, useRef, useState } from 'react'
 import { useHistory } from 'react-router'
 import { ResponsivePersonalSettings } from '../../context'
-import { useQuery, useSelectionService, useSnRoute } from '../../hooks'
+import { usePersonalSettings, useQuery, useSelectionService, useSnRoute } from '../../hooks'
 import { getPrimaryActionUrl, navigateToAction } from '../../services'
 import { ContentContextMenu } from '../context-menu/content-context-menu'
 import { Icon } from '../Icon'
 import { ExpandItemsContext } from './Contexts/ExpandedItemsProvider'
 import { useTreeLoading } from './Contexts/TreeLoadingProvider'
 import StyledTreeItemProps from './Props/StyledTreeItemProps'
+import { compareTreeItems, getTreeItemLabel } from './tree-helpers'
 
 export const StyledTreeItem = ({
   contentvalue,
@@ -38,6 +39,7 @@ export const StyledTreeItem = ({
   const snRoute = useSnRoute()
   const uiSettings = useContext(ResponsivePersonalSettings)
   const selectionService = useSelectionService()
+  const personalSettings = usePersonalSettings()
 
   const currentPath = useQuery().get('path')
   const mountedRef = useRef(true)
@@ -60,11 +62,9 @@ export const StyledTreeItem = ({
         const children = await loadChildren(contentPath)
         if (!mountedRef.current) return
 
-        const sorted = children?.sort((a, b) => {
-          const isAFolder = a.Type.toLowerCase().includes('folder') ? 0 : 1
-          const isBFolder = b.Type.toLowerCase().includes('folder') ? 0 : 1
-          return isAFolder - isBFolder || a.Name.localeCompare(b.Name)
-        })
+        const sorted = children
+          ? [...children].sort(compareTreeItems(personalSettings.preferDisplayName, personalSettings.sortFoldersFirst))
+          : undefined
 
         const elements = sorted?.map((child) => (
           <StyledTreeItem
@@ -87,7 +87,14 @@ export const StyledTreeItem = ({
         //
       }
     },
-    [loadChildren, activeitempath, navigate, editMode],
+    [
+      loadChildren,
+      personalSettings.preferDisplayName,
+      personalSettings.sortFoldersFirst,
+      activeitempath,
+      navigate,
+      editMode,
+    ],
   )
 
   // Load children if expanded
@@ -114,7 +121,10 @@ export const StyledTreeItem = ({
       <ListItemIcon>
         <Icon item={contentvalue} style={{ height: 20, width: 20, fontSize: 15 }} />
       </ListItemIcon>
-      <ListItemText style={{ fontSize: '11px', color: isDisabled ? 'grey' : undefined }} primary={contentvalue.Name} />
+      <ListItemText
+        style={{ fontSize: '11px', color: isDisabled ? 'grey' : undefined }}
+        primary={getTreeItemLabel(contentvalue, personalSettings.preferDisplayName)}
+      />
     </>
   )
 

apps/sensenet/src/components/tree/tree-helpers.ts

@@ -0,0 +1,40 @@
+import type { ODataParams } from '@sensenet/client-core'
+import type { GenericContent } from '@sensenet/default-content-types'
+
+type SortableTreeItem = Pick<GenericContent, 'DisplayName' | 'Name' | 'Type'> & { IsFolder?: boolean }
+
+export const SETTINGS_FOLDER_FILTER = `not ((Name eq 'Settings') and (isOf('SystemFolder')))`
+
+export const getTreeItemLabel = (item: SortableTreeItem, preferDisplayName: boolean) =>
+  (preferDisplayName && item.DisplayName ? item.DisplayName : item.Name) || ''
+
+export const isFolderLikeTreeItem = (item: SortableTreeItem) =>
+  item.Type ? item.Type.toLowerCase().includes('folder') : item.IsFolder === true
+
+export const compareTreeItems =
+  (preferDisplayName: boolean, sortFoldersFirst: boolean) => (left: SortableTreeItem, right: SortableTreeItem) => {
+    if (sortFoldersFirst) {
+      const folderOrder = Number(!isFolderLikeTreeItem(left)) - Number(!isFolderLikeTreeItem(right))
+
+      if (folderOrder) {
+        return folderOrder
+      }
+    }
+
+    return (
+      getTreeItemLabel(left, preferDisplayName).localeCompare(getTreeItemLabel(right, preferDisplayName), undefined, {
+        sensitivity: 'base',
+      }) ||
+      (left.Name || '').localeCompare(right.Name || '', undefined, {
+        sensitivity: 'base',
+      })
+    )
+  }
+
+export const getTreeOrderBy = (preferDisplayName: boolean): ODataParams<GenericContent>['orderby'] =>
+  preferDisplayName
+    ? [
+        ['DisplayName', 'asc'],
+        ['Name', 'asc'],
+      ]
+    : [['Name', 'asc']]