SenseNet · NoelKova · Jul 16, 2024 · Jul 15, 2024
diff --git a/apps/sensenet/src/components/AddButton.tsx b/apps/sensenet/src/components/AddButton.tsx
@@ -47,7 +47,8 @@ const useStyles = makeStyles((theme: Theme) => {
       display: 'flex',
       alignItems: 'center',
       justifyContent: 'space-evenly',
-      height: globals.common.drawerItemHeight,
+      height: globals.common.addButtonHeight,
+      paddingLeft: '2px',
     },
     listDropdown: {
       padding: '10px 0 10px 10px',

diff --git a/apps/sensenet/src/components/PageTitle.tsx b/apps/sensenet/src/components/PageTitle.tsx
@@ -10,7 +10,8 @@ const useStyles = makeStyles((theme: Theme) => {
     pageTitle: {
       color: theme.palette.type === 'light' ? theme.palette.common.black : theme.palette.common.white,
       fontFamily: '"Larsseit", Roboto',
-      fontSize: '20px',
+      fontSize: '24px',
+      padding: '8px 16px',
     },
   })
 })

diff --git a/apps/sensenet/src/components/appbar/desktop-app-bar.tsx b/apps/sensenet/src/components/appbar/desktop-app-bar.tsx
@@ -21,7 +21,8 @@ const useStyles = makeStyles(() => {
     toolBar: {
       position: 'static',
       height: '100%',
-      paddingLeft: '32px',
+      minHeight: '42px',
+      paddingLeft: '16px',
       paddingRight: 0,
     },
     logo: {

diff --git a/apps/sensenet/src/components/appbar/desktop-nav-menu.tsx b/apps/sensenet/src/components/appbar/desktop-nav-menu.tsx
@@ -21,6 +21,7 @@ const useStyles = makeStyles((theme: Theme) =>
     viewOptions: {
       cursor: 'pointer',
       marginRight: '16px',
+      padding: '7px',
     },
     navMenu: {
       height: '100%',

diff --git a/apps/sensenet/src/components/command-palette/CommandPalette.tsx b/apps/sensenet/src/components/command-palette/CommandPalette.tsx
@@ -45,9 +45,8 @@ const useStyles = makeStyles(() => {
     },
     iconButton: {
       color: globals.common.headerText,
-      '&:hover': {
-        backgroundColor: 'initial',
-      },
+      padding: '7px',
+      marginRight: '6px',
     },
     comboBox: {
       position: 'relative',

diff --git a/apps/sensenet/src/components/content-list/content-list.tsx b/apps/sensenet/src/components/content-list/content-list.tsx
@@ -93,7 +93,7 @@ export const isReferenceField = (fieldName: string, repo: Repository, schema = '
 }
 
 const rowHeightConst = 67
-const headerHeightConst = 58
+const headerHeightConst = 48
 
 /**
  * Compare passed minutes with
@@ -747,9 +747,9 @@ export const ContentList = <T extends GenericContent = GenericContent>(props: Co
               rowStyle: {
                 position: 'relative',
                 top: 'unset',
-                height: 'auto',
+                height: '48px',
                 overflow: 'initial',
-                padding: '5px 0px',
+                padding: '0',
               },
               onRowDoubleClick: onItemDoubleClickFunc,
               disableHeader: props.hideHeader,

diff --git a/apps/sensenet/src/components/content/Explore.tsx b/apps/sensenet/src/components/content/Explore.tsx
@@ -50,7 +50,6 @@ const useStyles = makeStyles((theme: Theme) => {
       width: '100%',
       position: 'relative',
       overflow: 'hidden',
-      paddingTop: '8px',
     },
   })
 })

diff --git a/apps/sensenet/src/components/drawer/PermanentDrawer.tsx b/apps/sensenet/src/components/drawer/PermanentDrawer.tsx
@@ -52,7 +52,8 @@ const useStyles = makeStyles((theme: Theme) => {
       width: '100%',
     },
     listButton: {
-      height: '65px',
+      height: '60px',
+      paddingLeft: '2px',
     },
     expandCollapseWrapper: {
       height: '49px',
@@ -126,7 +127,7 @@ export const PermanentDrawer = () => {
         </List>
 
         {systemItems && (
-          <List>
+          <List style={{ padding: 0 }}>
             {systemItems.map((item) => {
               return (
                 <li key={item.itemType}>

diff --git a/apps/sensenet/src/components/drawer/PermanentDrawerItem.tsx b/apps/sensenet/src/components/drawer/PermanentDrawerItem.tsx
@@ -30,7 +30,8 @@ const useStyles = makeStyles((theme: Theme) => {
       },
     },
     listButton: {
-      height: '65px',
+      height: '60px',
+      paddingLeft: '2px',
     },
     listItemIconDark: {
       color: theme.palette.common.white,

diff --git a/apps/sensenet/src/components/layout/DesktopLayout.tsx b/apps/sensenet/src/components/layout/DesktopLayout.tsx
@@ -35,10 +35,7 @@ const useStyles = makeStyles((theme: Theme) => {
       boxSizing: 'border-box',
       overflow: 'hidden',
       height: '100%',
-      paddingTop: '10px',
-      '& > *': {
-        paddingLeft: `${globals.common.explorePaddingLeft}`,
-      },
+      padding: '0px',
     },
     executeActionPaper: {
       height: '100%',

diff --git a/apps/sensenet/src/components/settings/settings-table.tsx b/apps/sensenet/src/components/settings/settings-table.tsx
@@ -0,0 +1,182 @@
+import {
+  IconButton,
+  makeStyles,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+} from '@material-ui/core'
+
+import { Delete, Edit, InfoOutlined } from '@material-ui/icons'
+import { Settings } from '@sensenet/default-content-types'
+import { useRepository } from '@sensenet/hooks-react'
+import React, { useContext } from 'react'
+import { Link, useHistory } from 'react-router-dom'
+import { ResponsivePersonalSettings } from '../../context'
+import { useLocalization } from '../../hooks'
+import { getPrimaryActionUrl } from '../../services'
+import { useDialog } from '../dialogs'
+
+const useStyles = makeStyles(() => ({
+  tableHead: {
+    backgroundColor: 'hsl(0deg 0% 24%)',
+    cursor: 'default',
+  },
+  tableHeadCell: {
+    color: 'white',
+    fontSize: '1.1rem',
+  },
+  stickyTableHeadCell: {
+    color: 'white',
+    padding: '0px 1px 0px 0px',
+    margin: 0,
+    textAlign: 'center',
+    maxWidth: '20px',
+    minWidth: '20px',
+  },
+  tableCell: {
+    verticalAlign: 'middle',
+  },
+  tableCellName: {
+    fontSize: '1.1rem',
+  },
+  descriptionCell: {
+    textAlign: 'left',
+    whiteSpace: 'normal',
+    wordBreak: 'break-word',
+    paddingTop: '12px',
+    paddingBottom: '12px',
+  },
+  stickyCell: {
+    maxWidth: '32px',
+    paddingLeft: '16px',
+  },
+  tableRow: {
+    '&:hover': {
+      backgroundColor: 'rgba(255, 255, 255, 0.08)',
+    },
+  },
+}))
+
+export const SETUP_DOCS_URL = 'https://docs.sensenet.com/guides/settings/setup'
+const hasDocumentation = ['Portal', 'OAuth', 'DocumentPreview', 'OfficeOnline', 'Indexing', 'Sharing']
+const isSystemSettings = [
+  'DocumentPreview',
+  'OAuth',
+  'OfficeOnline',
+  'Indexing',
+  'Sharing',
+  'Logging',
+  'Portal',
+  'Permission',
+  'MailProcessor',
+  'UserProfile',
+  'ColumnSettings',
+  'TaskManagement',
+  'MultiFactorAuthentication',
+]
+export const createAnchorFromName = (name: string) => `#${name.toLocaleLowerCase()}`
+
+export interface SettingsTableProps {
+  settings: Settings[]
+  onContextMenu: (ev: React.MouseEvent, setting: Settings) => void
+}
+
+export const SettingsTable = ({ settings, onContextMenu }: SettingsTableProps) => {
+  const classes = useStyles()
+  const localization = useLocalization().settings
+  const repository = useRepository()
+  const uiSettings = useContext(ResponsivePersonalSettings)
+  const history = useHistory()
+  const { openDialog } = useDialog()
+  const updatedSettings = settings.map((setting: Settings) => {
+    return {
+      ...setting,
+      nameToDisplay: setting.Name.split('.')[0]
+        .replace(/([A-Z])/g, ' $1')
+        .trim(),
+      nameToTest: setting.Name.replace(/\.settings/gi, '')
+        .replace(/\s+/g, '-')
+        .toLowerCase(),
+    }
+  })
+  const hasDeletableSetting = updatedSettings.some((setting) => !isSystemSettings.includes(setting.Name.split('.')[0]))
+  return (
+    <TableContainer>
+      <Table>
+        <TableHead className={classes.tableHead}>
+          <TableRow>
+            <TableCell className={classes.tableHeadCell}>{localization.name}</TableCell>
+            <TableCell className={classes.tableHeadCell}>{localization.description}</TableCell>
+            <TableCell className={classes.stickyTableHeadCell}>{localization.edit}</TableCell>
+            <TableCell className={classes.stickyTableHeadCell}>{localization.learnMore}</TableCell>
+            {hasDeletableSetting && (
+              <TableCell className={classes.stickyTableHeadCell}>{localization.delete}</TableCell>
+            )}
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {updatedSettings.map((setting) => (
+            <TableRow
+              key={setting.Id}
+              className={classes.tableRow}
+              onContextMenu={(ev) => {
+                ev.preventDefault()
+                onContextMenu(ev, setting)
+              }}>
+              <TableCell component="th" scope="row" className={`${classes.tableCell} ${classes.tableCellName}`}>
+                {setting.nameToDisplay}
+              </TableCell>
+              <TableCell className={`${classes.tableCell} ${classes.descriptionCell}`}>
+                {setting.Description || '-'}
+              </TableCell>
+              <TableCell className={classes.stickyCell}>
+                <Link
+                  to={getPrimaryActionUrl({ content: setting, repository, uiSettings, location: history.location })}
+                  style={{ textDecoration: 'none' }}>
+                  <IconButton aria-label={localization.edit} data-test={`${setting.nameToTest}-edit-button`}>
+                    <Edit />
+                  </IconButton>
+                </Link>
+              </TableCell>
+              <TableCell className={classes.stickyCell}>
+                {hasDocumentation.includes(
+                  (setting.Name || setting.DisplayName || '')?.replace(/\.settings/gi, ''),
+                ) && (
+                  <a
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    href={`${SETUP_DOCS_URL}${createAnchorFromName(setting.Name)}`}>
+                    <IconButton>
+                      <InfoOutlined />
+                    </IconButton>
+                  </a>
+                )}
+              </TableCell>
+              {hasDeletableSetting && (
+                <TableCell className={classes.stickyCell}>
+                  {!isSystemSettings.includes(setting.Name.split('.')[0]) && (
+                    <IconButton
+                      aria-label={localization.delete}
+                      data-test={`${setting.nameToTest}-delete-button`}
+                      onClick={() => {
+                        openDialog({
+                          name: 'delete',
+                          props: { content: [setting] },
+                          dialogProps: { disableBackdropClick: true, disableEscapeKeyDown: true },
+                        })
+                      }}>
+                      <Delete />
+                    </IconButton>
+                  )}
+                </TableCell>
+              )}
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </TableContainer>
+  )
+}
diff --git a/apps/sensenet/src/components/settings/setup.tsx b/apps/sensenet/src/components/settings/setup.tsx
@@ -11,7 +11,7 @@ import { navigateToAction } from '../../services/content-context-service'
 import { ContentContextMenu } from '../context-menu/content-context-menu'
 import { EditBinary } from '../edit/edit-binary'
 import { BrowseView, EditView, NewView, VersionView } from '../view-controls'
-import { ContentCard } from './content-card'
+import { SettingsTable } from './settings-table'
 
 const Setup = () => {
   const repository = useRepository()
@@ -22,7 +22,10 @@ const Setup = () => {
   const [reloadToken, setReloadToken] = useState(Date.now())
   const [settings, setSettings] = useState<Settings[]>([])
   const [isContextMenuOpened, setIsContextMenuOpened] = useState(false)
-  const [contextMenuAnchor, setContextMenuAnchor] = useState<HTMLElement | null>(null)
+  const [contextMenuAnchorPos, setContextMenuAnchorPos] = useState<{ top: number; left: number }>({
+    top: 0,
+    left: 0,
+  })
   const [contextMenuItem, setContextMenuItem] = useState<Settings | null>(null)
   const requestReload = useCallback(() => setReloadToken(Date.now()), [])
 
@@ -97,27 +100,23 @@ const Setup = () => {
                   content={contextMenuItem ?? settings[0]}
                   onClose={() => setIsContextMenuOpened(false)}
                   menuProps={{
-                    anchorEl: contextMenuAnchor,
+                    anchorReference: 'anchorPosition' as const,
+                    anchorPosition: contextMenuAnchorPos,
                     BackdropProps: {
                       onClick: () => setIsContextMenuOpened(false),
                       onContextMenu: (ev) => ev.preventDefault(),
                     },
                   }}
                 />
-                {settings.map((s) => {
-                  return (
-                    <ContentCard
-                      settings={s}
-                      key={s.Id}
-                      onContextMenu={(ev) => {
-                        ev.preventDefault()
-                        setContextMenuAnchor((ev.currentTarget as HTMLElement) || null)
-                        setContextMenuItem(s)
-                        setIsContextMenuOpened(true)
-                      }}
-                    />
-                  )
-                })}
+                <SettingsTable
+                  settings={settings}
+                  onContextMenu={(ev, setting) => {
+                    ev.preventDefault()
+                    setContextMenuAnchorPos({ top: ev.clientY, left: ev.clientX })
+                    setContextMenuItem(setting)
+                    setIsContextMenuOpened(true)
+                  }}
+                />
               </div>
             ) : null}
           </>

diff --git a/apps/sensenet/src/components/tree/tree.tsx b/apps/sensenet/src/components/tree/tree.tsx
@@ -162,7 +162,7 @@ export function Tree({ treeData, itemCount, onItemClick, loadMore, isLoading, ac
     )
 
     const nodeItem = (
-      <Tooltip title={item.Name} placement="bottom">
+      <Tooltip title={item.Name} key={keyPrefix} placement="bottom">
         <ListItem
           ref={listItemRef}
           className={classes.listItem}
@@ -219,7 +219,7 @@ export function Tree({ treeData, itemCount, onItemClick, loadMore, isLoading, ac
       )
     }
     return (
-      <MuiList key={key} style={style}>
+      <MuiList key={key} style={{ padding: 0 }}>
         {renderItem(treeData.children?.[index], index.toString(), 10)}
       </MuiList>
     )