permission fix, missing localization, avatar fixes

Author: NoelKova

apps/sensenet/src/components/UserAvatar.tsx

@@ -22,8 +22,13 @@ export const UserAvatar: FC<{
     )
   }
   return (
-    <Avatar style={props.style}>
-      {(props.user?.DisplayName && props.user.DisplayName[0]) || (props.user?.Name && props.user.Name[0]) || 'U'}
+    <Avatar
+      style={{
+        ...props.style,
+      }}>
+      {(props.user?.DisplayName && props.user.DisplayName[0])?.toUpperCase() ||
+        (props.user?.Name && props.user.Name[0])?.toUpperCase() ||
+        'U'}
     </Avatar>
   )
 }

apps/sensenet/src/components/dialogs/logout.tsx

@@ -22,8 +22,6 @@ export function LogoutDialog() {
           <Icon
             style={{
               margin: '0 1em 0 0',
-              transition: 'filter linear 1s, opacity linear 1.5s',
-              width: '1.5em',
             }}
             item={user}
           />

apps/sensenet/src/components/field-controls/reference-grid.tsx

@@ -10,7 +10,9 @@ export const ReferenceGrid: React.FC<ReactClientFieldSetting> = (props) => {
     <SnReferenceGrid
       {...props}
       dialogProps={{ classes: { paper: clsx(globalClasses.dialog, globalClasses.pickerDialog) } }}
-      renderPickerIcon={(item) => <Icon item={item} />}
+      renderPickerIcon={(item) => (
+        <Icon item={item} style={{ width: 'auto', height: 'auto', marginTop: 1, paddingTop: 1 }} />
+      )}
       pickerClasses={{ cancelButton: globalClasses.cancelButton }}
     />
   )

apps/sensenet/src/components/grid/Cols/ColumnDefs..tsx

@@ -195,7 +195,7 @@ export const userColumnDefs: ColDef[] = [
     width: 110,
     minWidth: 110,
     maxWidth: 110,
-    cellRendererFramework: (params: any) => {
+    cellRenderer: (params: any) => {
       const roles = params.data.AllRoles.length ? params.data.AllRoles : []
       const directRoles = params.data.DirectRoles?.length ? params.data.DirectRoles : []
       return <RolesField user={params.data} roles={roles} directRoles={directRoles} />
@@ -240,7 +240,7 @@ export const groupColumnDefs: ColDef[] = [
     width: 110,
     minWidth: 110,
     maxWidth: 110,
-    cellRendererFramework: (params: any) => {
+    cellRenderer: (params: any) => {
       return <ReferenceField content={params.data} fieldName={'Members'} parent={params.data} showIcon={true} />
     },
   },

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

@@ -111,7 +111,7 @@ export const StyledTreeItem = ({
   const getLabel = () => (
     <>
       <ListItemIcon>
-        <Icon item={contentvalue} style={{ height: 20, width: 20, fontSize: 18 }} />
+        <Icon item={contentvalue} style={{ height: 20, width: 20, fontSize: 15 }} />
       </ListItemIcon>
       <ListItemText style={{ fontSize: '11px', color: isDisabled ? 'grey' : undefined }} primary={contentvalue.Name} />
     </>

apps/sensenet/src/hooks/use-drawer-items.tsx

@@ -201,7 +201,7 @@ export const useDrawerItems = () => {
           for (const permission of item.permissions) {
             const actions = await repo.getActions({ idOrPath: permission.path })
             const action = actions.d.results.find((a) => a.Name === permission.action)
-            if (!action || action.Forbidden) return false
+            if (!action) return false
           }
         } catch (error) {
           logger.debug({

packages/sn-hooks-react/src/context/current-content.tsx

@@ -3,7 +3,8 @@ import { PathHelper } from '@sensenet/client-utils'
 import { GenericContent } from '@sensenet/default-content-types'
 import React, { createContext, FunctionComponent, useCallback, useEffect, useState } from 'react'
 import Semaphore from 'semaphore-async-await'
-import { useRepository, useRepositoryEvents } from '../hooks'
+import { useLogger, useRepository, useRepositoryEvents } from '../hooks'
+import { useLocalization } from '../hooks/use-localization'
 
 /**
  * Returns a given content as current content
@@ -43,6 +44,8 @@ export const CurrentContentProvider: FunctionComponent<CurrentContentProviderPro
   const reload = () => setReloadToken(Math.random())
   const repo = useRepository()
   const events = useRepositoryEvents()
+  const logger = useLogger('CurrentContent')
+  const localization = useLocalization()
 
   const onDeleteContent = useCallback(
     async (deleted: Content[]) => {
@@ -99,10 +102,14 @@ export const CurrentContentProvider: FunctionComponent<CurrentContentProviderPro
   }, [repo, props.idOrPath, reloadToken, loadLock])
 
   if (errorState?.error) {
-    if (errorState?.status === 404) {
-      throw errorState
-    }
-    throw errorState.error
+    console.log(errorState)
+    logger.error({
+      message: localization.currentContextError,
+      data: {
+        error: errorState.error,
+      },
+    })
+    setErrorState({})
   }
 
   return (

packages/sn-hooks-react/src/context/localizatzion-context.tsx

@@ -0,0 +1,24 @@
+import { deepMerge, DeepPartial } from '@sensenet/client-utils'
+import React, { createContext, FC, useEffect, useState } from 'react'
+
+export const defaultLocalization = {
+  currentContextError: 'There was an unexpected error while fetching content!',
+}
+
+export const LocalizationContext = createContext(defaultLocalization)
+
+export type LocalizationType = DeepPartial<typeof defaultLocalization>
+
+interface LocalizationProviderProps {
+  localization?: Partial<LocalizationType>
+}
+
+export const LocalizationProvider: FC<LocalizationProviderProps> = (props) => {
+  const [currentValue, setCurrentValue] = useState(deepMerge(defaultLocalization, props.localization))
+
+  useEffect(() => {
+    setCurrentValue(deepMerge(defaultLocalization, props.localization))
+  }, [props.localization])
+
+  return <LocalizationContext.Provider value={currentValue}>{props.children}</LocalizationContext.Provider>
+}

packages/sn-hooks-react/src/hooks/use-localization.ts

@@ -0,0 +1,6 @@
+import { useContext } from 'react'
+import { LocalizationContext } from '../context/localizatzion-context'
+
+export const useLocalization = () => {
+  return useContext(LocalizationContext)
+}

packages/sn-pickers-react/src/components/picker-advanced.tsx

@@ -10,6 +10,7 @@ import { Query, QueryExpression, QueryOperators } from '@sensenet/query'
 import { ColDef } from 'ag-grid-community'
 import { AgGridReact } from 'ag-grid-react'
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { useLocalization } from '../hooks/use-localization'
 import { GenericContentWithIsParent } from '../types'
 
 // Icons
@@ -152,6 +153,7 @@ const useStyles = makeStyles(() =>
       wordBreak: 'break-all',
     },
     treeIcon: {
+      width: '22px',
       '& span': {
         display: 'flex',
       },
@@ -338,6 +340,8 @@ export const PickerAdvanced: React.FC<PickerAdvancedProps> = ({
   const [rootElement, setRootElement] = useState<GenericContent>()
   const [searchTerm, setSearchTerm] = useState<string>('')
 
+  const localization = useLocalization()
+
   const searchFieldRef = useRef<HTMLInputElement | null>(null)
 
   //Grid Columns
@@ -555,7 +559,7 @@ export const PickerAdvanced: React.FC<PickerAdvancedProps> = ({
             <TextField
               ref={searchFieldRef}
               fullWidth={true}
-              placeholder={'Search'}
+              placeholder={localization.search}
               onChange={(ev) => {
                 onSearchFieldChange(ev.target.value)
               }}
@@ -607,15 +611,15 @@ export const PickerAdvanced: React.FC<PickerAdvancedProps> = ({
         <div className={classes.errorMsg}>
           {selectionRoots &&
             !selectionRoots.some((root) => currentPath === root || currentPath.startsWith(`${root}/`)) && (
-              <div>Disabled Path</div>
+              <div>{localization.disabledPath}</div>
             )}
         </div>
         <Button
           type="button"
           onClick={() => {
             onCancel?.()
           }}>
-          Cancel
+          {localization.cancel}
         </Button>
         <Button
           type="button"
@@ -627,7 +631,7 @@ export const PickerAdvanced: React.FC<PickerAdvancedProps> = ({
           onClick={() => {
             onSubmit?.(selectedItems)
           }}>
-          Submit
+          {localization.submit}
         </Button>
       </div>
     </div>