settings error, grid extre scrollbar

Author: NoelKova

apps/sensenet/src/application-paths.ts

@@ -16,7 +16,7 @@ export const PATHS = {
   configuration: { appPath: '/system/settings/:action?', snPath: '/Root/System/Settings' },
   localization: { appPath: '/system/localization/:action?', snPath: '/Root/Localization' },
   webhooks: { appPath: '/system/webhooks/:action?', snPath: '/Root/System/WebHooks' },
-  settings: { appPath: '/system/:submenu?' },
+  settings: { appPath: '/system/:submenu?', snPath: '/Root/System/Settings' },
   apiKeys: { appPath: '/system/apikeys' },
   landingPath: { appPath: '/content/explorer/' },
   root: { appPath: '/Root', snPath: '/Root' },

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

@@ -1,6 +1,9 @@
+import { IconButton } from '@material-ui/core'
+import { Edit, InfoOutlined } from '@material-ui/icons'
 import { ColDef } from 'ag-grid-community'
 import React from 'react'
-import { EnabledField, ReferenceField, RolesField } from '../../content-list'
+import { ReferenceField, RolesField } from '../../content-list'
+import { createAnchorFromName, SETUP_DOCS_URL, UpdatedSettings } from '../../settings/settings-table'
 import { ActionFormatter } from '../Formatters/ActionFormatter'
 import { DateTimeFormatter } from '../Formatters/DateTimeFormatter'
 import { IconFormatter } from '../Formatters/IconFormatter'
@@ -705,3 +708,54 @@ export const webHooksColumnDefs: ColDef[] = [
     autoHeight: true,
   },
 ]
+
+const hasDocumentation = ['Portal', 'OAuth', 'DocumentPreview', 'OfficeOnline', 'Indexing', 'Sharing']
+
+export const getSettingsColumnDefs = (history: any): ColDef[] => [
+  {
+    headerName: 'Display Name',
+    field: 'DisplayName',
+    sortable: true,
+    resizable: true,
+    flex: 1,
+  },
+  {
+    headerName: 'Description',
+    field: 'Description',
+    resizable: true,
+    flex: 4,
+  },
+  {
+    headerName: 'Edit',
+    resizable: false,
+    width: 50,
+    cellRenderer: (params: any) => {
+      const content = encodeURIComponent(params.data?.Name || '')
+      return (
+        <IconButton
+          style={{ padding: '3px', marginBottom: '6px' }}
+          onClick={() => {
+            history.push(`/system/settings/edit-binary?path=&content=%2F${content}`)
+          }}>
+          <Edit style={{ fontSize: '16px' }} />
+        </IconButton>
+      )
+    },
+  },
+  {
+    headerName: 'Learn More',
+    resizable: false,
+    cellRenderer: (params: { data: UpdatedSettings }) =>
+      hasDocumentation.includes(params.data.Name.replace(/\.settings/gi, '')) ? (
+        <a
+          target="_blank"
+          rel="noopener noreferrer"
+          href={`${SETUP_DOCS_URL}${createAnchorFromName(params.data.Name)}`}>
+          <IconButton style={{ padding: '3px', marginBottom: '6px' }}>
+            <InfoOutlined style={{ fontSize: '16px' }} />
+          </IconButton>
+        </a>
+      ) : null,
+    width: 90,
+  },
+]

apps/sensenet/src/components/settings/index.tsx

@@ -2,11 +2,11 @@ import { createStyles, ListItem, ListItemText, makeStyles, Theme } from '@materi
 import SettingsIcon from '@material-ui/icons/Settings'
 import { clsx } from 'clsx'
 import React, { lazy } from 'react'
-import { matchPath, NavLink, useLocation, useRouteMatch } from 'react-router-dom'
+import { matchPath, NavLink, useHistory, useLocation, useRouteMatch } from 'react-router-dom'
 import { PATHS, resolvePathParams } from '../../application-paths'
 import { globals, useGlobalStyles } from '../../globalStyles'
 import { useLocalization } from '../../hooks'
-import { localizationColumnDefs, webHooksColumnDefs } from '../grid/Cols/ColumnDefs.'
+import { getSettingsColumnDefs, localizationColumnDefs, webHooksColumnDefs } from '../grid/Cols/ColumnDefs.'
 import { ApiKeys } from './api-keys'
 import { Stats } from './stats'
 
@@ -31,6 +31,8 @@ const useStyles = makeStyles((theme: Theme) =>
       borderRight: theme.palette.type === 'light' ? '1px solid #DBDBDB' : '1px solid rgba(255, 255, 255, 0.11)',
     },
     settingsContent: {
+      display: 'flex',
+      flexDirection: 'column',
       overflow: 'auto',
       width: `calc(100% - ${globals.common.settingsDrawerWidth}px)`,
     },
@@ -51,6 +53,7 @@ export const Settings: React.FunctionComponent = () => {
   const globalClasses = useGlobalStyles()
   const localizationDrawer = useLocalization().drawer
   const location = useLocation()
+  const history = useHistory()
 
   const settingsItems = [
     {
@@ -91,7 +94,13 @@ export const Settings: React.FunctionComponent = () => {
           />
         )
       case 'settings':
-        return <SetupComponent />
+        return (
+          <ContentComponent
+            disableColumnSettings
+            rootPath={PATHS.settings.snPath}
+            colDef={getSettingsColumnDefs(history)}
+          />
+        )
       case 'adminui':
         return <PersonalSettingsEditor />
       case 'stats':