From a95bb29ce5334d5f1e57be49a4ea920f2d11f0f1 Mon Sep 17 00:00:00 2001
From: NoelKova <kovacsn@sensenete.com>
Date: Tue, 9 Jul 2024 14:57:01 +0200
Subject: [PATCH] remove whitespaces and configuration settings refactor

---
 apps/sensenet/src/components/AddButton.tsx    |   3 +-
 apps/sensenet/src/components/PageTitle.tsx    |   3 +-
 .../src/components/appbar/desktop-app-bar.tsx |   3 +-
 .../components/appbar/desktop-nav-menu.tsx    |   1 +
 .../command-palette/CommandPalette.tsx        |   5 +-
 .../components/content-list/content-list.tsx  |   7 +-
 .../src/components/content/Explore.tsx        |   1 -
 .../context-menu/content-context-menu.tsx     |   2 +-
 .../src/components/drawer/PermanentDrawer.tsx |   5 +-
 .../components/drawer/PermanentDrawerItem.tsx |   3 +-
 .../src/components/event-list/event-list.tsx  |   2 +-
 .../src/components/layout/DesktopLayout.tsx   |   5 +-
 .../src/components/settings/content-card.tsx  | 130 ++++++++--------
 .../components/settings/settings-table.tsx    | 140 ++++++++++++++++++
 .../src/components/settings/setup.tsx         |   7 +-
 apps/sensenet/src/components/tree/tree.tsx    |   2 +-
 apps/sensenet/src/globalStyles.ts             |  12 +-
 apps/sensenet/src/localization/default.ts     |   1 +
 18 files changed, 245 insertions(+), 87 deletions(-)
 create mode 100644 apps/sensenet/src/components/settings/settings-table.tsx

diff --git a/apps/sensenet/src/components/AddButton.tsx b/apps/sensenet/src/components/AddButton.tsx
index d9e5633b9..eed47f8a0 100644
--- 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
index fdb7f5abb..a7a1372f6 100644
--- 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
index 8e9d99dff..9a0ee8135 100644
--- 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
index 15707159a..10dbcebf1 100644
--- 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
index 3fca3a95f..18d58ff52 100644
--- 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
index bbcab9528..f9844a164 100644
--- 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,
@@ -757,7 +757,6 @@ export const ContentList = <T extends GenericContent = GenericContent>(props: Co
                 display: 'flex',
                 flexDirection: 'column',
                 overflowY: 'auto',
-                paddingBottom: '15px',
                 minHeight: '100%',
                 height: 'inherit',
                 maxHeight: 'inherit',
diff --git a/apps/sensenet/src/components/content/Explore.tsx b/apps/sensenet/src/components/content/Explore.tsx
index 78dd8f518..cf5bd08ca 100644
--- 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/context-menu/content-context-menu.tsx b/apps/sensenet/src/components/context-menu/content-context-menu.tsx
index 7b40b9989..2965f6277 100644
--- a/apps/sensenet/src/components/context-menu/content-context-menu.tsx
+++ b/apps/sensenet/src/components/context-menu/content-context-menu.tsx
@@ -79,7 +79,7 @@ export const ContentContextMenu: React.FunctionComponent<ContentContextMenuProps
           disablePortal={true}
           open={props.isOpened}
           PaperProps={{ style: { paddingBottom: '2em' } }}>
-          <List>
+          <List style={{ padding: 0, backgroundColor: 'green' }}>
             {actions?.map((action) => {
               return (
                 <ListItem
diff --git a/apps/sensenet/src/components/drawer/PermanentDrawer.tsx b/apps/sensenet/src/components/drawer/PermanentDrawer.tsx
index f83cd9f1a..7f42c9b96 100644
--- 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
index dafaab592..56645b3b1 100644
--- 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/event-list/event-list.tsx b/apps/sensenet/src/components/event-list/event-list.tsx
index 90a104bcd..ecd150cde 100644
--- a/apps/sensenet/src/components/event-list/event-list.tsx
+++ b/apps/sensenet/src/components/event-list/event-list.tsx
@@ -54,7 +54,7 @@ export default function EventList() {
         {currentEvent ? (
           <EventDetails event={currentEvent} />
         ) : (
-          <List style={{ height: 'calc(100% - 48px)', overflow: 'auto' }} values={events} />
+          <List style={{ height: 'calc(100% - 48px)', overflow: 'auto', backgroundColor: 'green' }} values={events} />
         )}
       </div>
     </FilterContextProvider>
diff --git a/apps/sensenet/src/components/layout/DesktopLayout.tsx b/apps/sensenet/src/components/layout/DesktopLayout.tsx
index 8b9530377..b47a5858d 100644
--- 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/content-card.tsx b/apps/sensenet/src/components/settings/content-card.tsx
index f926e0abf..30a74338f 100644
--- a/apps/sensenet/src/components/settings/content-card.tsx
+++ b/apps/sensenet/src/components/settings/content-card.tsx
@@ -1,4 +1,15 @@
-import { createStyles, IconButton, makeStyles, Theme, Tooltip } from '@material-ui/core'
+import {
+  createStyles,
+  IconButton,
+  makeStyles,
+  Table,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+  Theme,
+  Tooltip,
+} from '@material-ui/core'
 import Button from '@material-ui/core/Button'
 import Card from '@material-ui/core/Card'
 import CardActions from '@material-ui/core/CardActions'
@@ -82,67 +93,70 @@ export const ContentCard = ({ settings, onContextMenu }: ContentCardProps) => {
   const dataTestName = settingsTitle.replace(/\s+/g, '-').toLowerCase()
 
   return (
-    <Card
-      onContextMenu={(ev) => {
-        ev.preventDefault()
-        onContextMenu(ev)
-      }}
-      className={classes.card}
-      data-test={`content-card-${settingsName.replace(/\s+/g, '-').toLowerCase()}`}>
-      <CardContent>
-        <Tooltip placement="top" title={settingsName}>
-          <Typography variant="h5" gutterBottom={true} className={classes.title}>
-            {settingsTitle}
-          </Typography>
-        </Tooltip>
-        <Typography
-          color="textSecondary"
-          style={{ wordWrap: 'break-word' }}
-          dangerouslySetInnerHTML={{ __html: settings.Description || '' }}
-        />
-      </CardContent>
-      <CardActions style={{ justifyContent: 'flex-end' }}>
-        {!isSystemSettings.includes(settingsTitle) && (
-          <IconButton
-            data-test={`${dataTestName}-delete-button`}
-            aria-label="delete"
-            onClick={() => {
-              openDialog({
-                name: 'delete',
-                props: { content: [settings] },
-                dialogProps: { disableBackdropClick: true, disableEscapeKeyDown: true },
-              })
-            }}>
-            <DeleteIcon />
-          </IconButton>
-        )}
-        <Link
-          to={getPrimaryActionUrl({ content: settings, repository, uiSettings, location: history.location })}
-          style={{ textDecoration: 'none' }}>
-          <Button
-            aria-label={localization.edit}
-            size="small"
-            className={classes.button}
-            data-test={`${dataTestName}-edit-button`}>
-            {localization.edit}
-          </Button>
-        </Link>
-        {hasDocumentation.includes(settingsTitle) && (
-          <a
-            target="_blank"
-            rel="noopener noreferrer"
-            href={`${SETUP_DOCS_URL}${createAnchorFromName(settings.Name)}`}
+    <div>
+      <div />
+      <Card
+        onContextMenu={(ev) => {
+          ev.preventDefault()
+          onContextMenu(ev)
+        }}
+        className={classes.card}
+        data-test={`content-card-${settingsName.replace(/\s+/g, '-').toLowerCase()}`}>
+        <CardContent>
+          <Tooltip placement="top" title={settingsName}>
+            <Typography variant="h5" gutterBottom={true} className={classes.title}>
+              {settingsTitle}
+            </Typography>
+          </Tooltip>
+          <Typography
+            color="textSecondary"
+            style={{ wordWrap: 'break-word' }}
+            dangerouslySetInnerHTML={{ __html: settings.Description || '' }}
+          />
+        </CardContent>
+        <CardActions style={{ justifyContent: 'flex-end' }}>
+          {!isSystemSettings.includes(settingsTitle) && (
+            <IconButton
+              data-test={`${dataTestName}-delete-button`}
+              aria-label="delete"
+              onClick={() => {
+                openDialog({
+                  name: 'delete',
+                  props: { content: [settings] },
+                  dialogProps: { disableBackdropClick: true, disableEscapeKeyDown: true },
+                })
+              }}>
+              <DeleteIcon />
+            </IconButton>
+          )}
+          <Link
+            to={getPrimaryActionUrl({ content: settings, repository, uiSettings, location: history.location })}
             style={{ textDecoration: 'none' }}>
             <Button
-              aria-label={localization.learnMore}
+              aria-label={localization.edit}
               size="small"
               className={classes.button}
-              data-test={`${dataTestName}-learnmore-button`}>
-              {localization.learnMore}
+              data-test={`${dataTestName}-edit-button`}>
+              {localization.edit}
             </Button>
-          </a>
-        )}
-      </CardActions>
-    </Card>
+          </Link>
+          {hasDocumentation.includes(settingsTitle) && (
+            <a
+              target="_blank"
+              rel="noopener noreferrer"
+              href={`${SETUP_DOCS_URL}${createAnchorFromName(settings.Name)}`}
+              style={{ textDecoration: 'none' }}>
+              <Button
+                aria-label={localization.learnMore}
+                size="small"
+                className={classes.button}
+                data-test={`${dataTestName}-learnmore-button`}>
+                {localization.learnMore}
+              </Button>
+            </a>
+          )}
+        </CardActions>
+      </Card>
+    </div>
   )
 }
diff --git a/apps/sensenet/src/components/settings/settings-table.tsx b/apps/sensenet/src/components/settings/settings-table.tsx
new file mode 100644
index 000000000..9d4b640aa
--- /dev/null
+++ b/apps/sensenet/src/components/settings/settings-table.tsx
@@ -0,0 +1,140 @@
+import {
+  Button,
+  createStyles,
+  IconButton,
+  makeStyles,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+  Theme,
+  Tooltip,
+} from '@material-ui/core'
+
+import { 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'
+
+const useStyles = makeStyles((theme) => ({
+  tableHead: {
+    backgroundColor: 'hsl(0deg 0% 24%)',
+    cursor: 'default',
+  },
+  tableHeadCell: {
+    color: 'white',
+    fontSize: '1.1rem',
+  },
+  tableCell: {
+    verticalAlign: 'middle',
+  },
+  tableCellName: {
+    fontSize: '1.1rem',
+  },
+  descriptionCell: {
+    textAlign: 'left',
+    whiteSpace: 'normal',
+    wordBreak: 'break-word',
+    paddingTop: '12px',
+    paddingBottom: '12px',
+  },
+  tableRow: {
+    '&:hover': {
+      backgroundColor: 'rgba(255, 255, 255, 0.08)',
+    },
+  },
+}))
+
+export interface SettingsTableProps {
+  settings: Settings[]
+}
+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 const SettingsTable = ({ settings }: SettingsTableProps) => {
+  console.log(settings)
+  const classes = useStyles()
+  const localization = useLocalization().settings
+  const repository = useRepository()
+  const uiSettings = useContext(ResponsivePersonalSettings)
+  const history = useHistory()
+  if (!settings) {
+    return <div>Loading</div>
+  }
+  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.tableHeadCell}>{localization.edit}</TableCell>
+            <TableCell className={classes.tableHeadCell}>{localization.learnMore}</TableCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {settings.map((setting) => (
+            <TableRow key={setting.Id} className={classes.tableRow}>
+              <TableCell component="th" scope="row" className={`${classes.tableCell} ${classes.tableCellName}`}>
+                {setting.Name.split('.')[0]
+                  .replace(/([A-Z])/g, ' $1')
+                  .trim()}
+              </TableCell>
+              <TableCell className={`${classes.tableCell} ${classes.descriptionCell}`}>
+                {setting.Description || '-'}
+              </TableCell>
+              <TableCell className={classes.tableCell}>
+                <Link
+                  to={getPrimaryActionUrl({ content: setting, repository, uiSettings, location: history.location })}
+                  style={{ textDecoration: 'none' }}>
+                  <IconButton
+                    aria-label={localization.edit}
+                    //data-test={`${dataTestName}-edit-button`}
+                  >
+                    <Edit />
+                  </IconButton>
+                </Link>
+              </TableCell>
+              <TableCell className={classes.tableCell}>
+                {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>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </TableContainer>
+  )
+}
diff --git a/apps/sensenet/src/components/settings/setup.tsx b/apps/sensenet/src/components/settings/setup.tsx
index 495e78e93..a9750ae14 100644
--- a/apps/sensenet/src/components/settings/setup.tsx
+++ b/apps/sensenet/src/components/settings/setup.tsx
@@ -12,6 +12,7 @@ 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()
@@ -62,6 +63,7 @@ const Setup = () => {
   ])
 
   const renderContent = () => {
+    console.log(settings)
     switch (activeAction) {
       case 'browse':
         return <BrowseView contentPath={`${PATHS.configuration.snPath}${activeContent}`} />
@@ -104,7 +106,8 @@ const Setup = () => {
                     },
                   }}
                 />
-                {settings.map((s) => {
+                <SettingsTable settings={settings} />
+                {/* {settings.map((s) => {
                   return (
                     <ContentCard
                       settings={s}
@@ -117,7 +120,7 @@ const Setup = () => {
                       }}
                     />
                   )
-                })}
+                })} */}
               </div>
             ) : null}
           </>
diff --git a/apps/sensenet/src/components/tree/tree.tsx b/apps/sensenet/src/components/tree/tree.tsx
index 347d92dcd..69a10010c 100644
--- a/apps/sensenet/src/components/tree/tree.tsx
+++ b/apps/sensenet/src/components/tree/tree.tsx
@@ -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>
     )
diff --git a/apps/sensenet/src/globalStyles.ts b/apps/sensenet/src/globalStyles.ts
index 55eed16b3..a1326dc37 100644
--- a/apps/sensenet/src/globalStyles.ts
+++ b/apps/sensenet/src/globalStyles.ts
@@ -4,18 +4,18 @@ import { clsx } from 'clsx'
 export const globals = {
   common: {
     //Fix sizes
-    headerHeight: 80,
-    drawerWidthCollapsed: 90,
-    drawerWidthExpanded: 250,
-    drawerItemHeight: 65,
+    headerHeight: 42,
+    drawerWidthCollapsed: 60,
+    drawerWidthExpanded: 240,
+    drawerItemHeight: 42,
     formTitleHeight: 68,
     formActionButtonsHeight: 80,
     settingsDrawerWidth: 250,
+    addButtonHeight: 60,
     //Colors
     headerBackground: '#353B4E',
     headerText: 'rgba(255,255,255,0.87)',
     secondaryIconSize: '16px',
-    explorePaddingLeft: '15px',
     elavationShadow: '1px 1px 3px 0px hsl(0deg 0% 0% / 28%)',
   },
   light: {
@@ -106,7 +106,7 @@ export const useGlobalStyles = makeStyles((theme: Theme) => {
       backgroundColor: theme.palette.primary.main,
     },
     drawerIconButtonWrapper: {
-      height: globals.common.drawerItemHeight,
+      height: globals.common.addButtonHeight,
       width: '100%',
       display: 'flex',
       justifyContent: 'center',
diff --git a/apps/sensenet/src/localization/default.ts b/apps/sensenet/src/localization/default.ts
index d5b3137d6..2274233fe 100644
--- a/apps/sensenet/src/localization/default.ts
+++ b/apps/sensenet/src/localization/default.ts
@@ -442,6 +442,7 @@ const values = {
     },
   },
   settings: {
+    name: 'Name',
     edit: 'Edit',
     learnMore: 'Learn more',
     stats: 'Stats',