Settings initial steps

apps/sensenet/src/application-paths.ts

@@ -3,26 +3,25 @@ import { BrowseType } from './components/content'
 export const PATHS = {
   loginCallback: { appPath: '/authentication/login-callback' },
   silentCallback: { appPath: '/authentication/silent-callback' },
-  personalSettings: { appPath: '/personal-settings' },
   events: { appPath: '/events/:eventGuid?' },
   savedQueries: { appPath: '/saved-queries/:action?', snPath: '/Root/Content/Queries' },
-  setup: { appPath: '/setup/:action?', snPath: '/Root/System/Settings' },
   trash: { appPath: '/trash/:browseType/:action?', snPath: '/Root/Trash' },
-  localization: { appPath: '/localization/:browseType/:action?', snPath: '/Root/Localization' },
   usersAndGroups: { appPath: '/users-and-groups/:browseType/:action?', snPath: '/Root/IMS/Public' },
   dashboard: { appPath: '/dashboard' },
   contentTypes: { appPath: '/content-types/:browseType/:action?', snPath: '/Root/System/Schema/ContentTypes' },
   search: { appPath: '/search' },
   content: { appPath: '/content/:browseType/:action?', snPath: '/Root/Content' },
   custom: { appPath: '/custom/:browseType/:path/:action?' },
+  configuration: { appPath: '/settings/configuration/:action?', snPath: '/Root/System/Settings' },
+  localization: { appPath: '/settings/localization/:action?', snPath: '/Root/Localization' },
+  settings: { appPath: '/settings/:submenu?' },
 } as const
 
-type RoutesWithContentBrowser = keyof Pick<
-  typeof PATHS,
-  'content' | 'localization' | 'usersAndGroups' | 'contentTypes' | 'trash'
->
+type SettingsItemType = 'stats' | 'apiKeys' | 'webhooks' | 'adminui'
 
-type RoutesWithActionParam = keyof Pick<typeof PATHS, 'setup' | 'savedQueries'>
+type RoutesWithContentBrowser = keyof Pick<typeof PATHS, 'content' | 'usersAndGroups' | 'contentTypes' | 'trash'>
+
+type RoutesWithActionParam = keyof Pick<typeof PATHS, 'savedQueries' | 'localization' | 'configuration'>
 
 type Options =
   | { path: typeof PATHS['events']['appPath']; params?: { eventGuid: string; [index: string]: string } }
@@ -43,6 +42,10 @@ type Options =
       path: typeof PATHS[RoutesWithActionParam]['appPath']
       params?: { action: string; [index: string]: string }
     }
+  | {
+      path: typeof PATHS['settings']['appPath']
+      params?: { submenu: SettingsItemType; [index: string]: string | SettingsItemType }
+    }
 
 export const resolvePathParams = ({ path, params }: Options) => {
   let currentPath: string = path

apps/sensenet/src/components/MainRouter.tsx

@@ -12,23 +12,16 @@ const DashboardComponent = lazy(() => import(/* webpackChunkName: "dashboard" */
 const UsersAndGroupsComponent = lazy(() => import(/* webpackChunkName: "users-and-groups" */ './users-and-groups'))
 const SearchComponent = lazy(() => import(/* webpackChunkName: "search" */ './search'))
 const SavedQueriesComponent = lazy(() => import(/* webpackChunkName: "saved-queries" */ './search/saved-queries'))
-const SetupComponent = lazy(() => import(/* webpackChunkName: "setup" */ './setup/setup'))
 const TrashComponent = lazy(() => import(/* webpackChunkName: "Trash" */ './trash/Trash'))
 const EventListComponent = lazy(() => import(/* webpackChunkName: "EventList" */ './event-list/event-list'))
 const CustomContent = lazy(() => import(/* webpackChunkName: "CustomContent" */ './content/CustomContent'))
-const PersonalSettingsEditor = lazy(
-  () => import(/* webpackChunkName: "PersonalSettingsEditor" */ './edit/PersonalSettingsEditor'),
-)
+const SettingsComponent = lazy(() => import(/* webpackChunkName: "setup" */ './settings'))
 
 export const MainRouter = () => {
   return (
     <ErrorBoundary FallbackComponent={ErrorBoundaryWithDialogs}>
       <Suspense fallback={<FullScreenLoader />}>
         <Switch>
-          <Route path={PATHS.personalSettings.appPath}>
-            <PersonalSettingsEditor />
-          </Route>
-
           <Route path={PATHS.events.appPath}>
             <EventListComponent />
           </Route>
@@ -51,22 +44,18 @@ export const MainRouter = () => {
             </LoadSettingsContextProvider>
           </Route>
 
-          <Route path={PATHS.setup.appPath}>
-            <SetupComponent />
-          </Route>
-
           <Route path={PATHS.trash.appPath}>
             <TrashComponent />
           </Route>
 
-          <Route path={PATHS.localization.appPath}>
-            <ContentComponent rootPath={PATHS.localization.snPath} />
-          </Route>
-
           <Route path={PATHS.usersAndGroups.appPath}>
             <UsersAndGroupsComponent />
           </Route>
 
+          <Route path={PATHS.settings.appPath}>
+            <SettingsComponent />
+          </Route>
+
           <Route path={PATHS.contentTypes.appPath}>
             <ContentComponent
               rootPath={PATHS.contentTypes.snPath}

apps/sensenet/src/components/drawer/PermanentDrawer.tsx

@@ -1,20 +1,20 @@
-import { createStyles, makeStyles, Theme, useTheme } from '@material-ui/core'
+import { createStyles, makeStyles, Theme } from '@material-ui/core'
 import List from '@material-ui/core/List'
 import ListItem from '@material-ui/core/ListItem'
 import ListItemIcon from '@material-ui/core/ListItemIcon'
-import ListItemText from '@material-ui/core/ListItemText'
 import Paper from '@material-ui/core/Paper'
 import Tooltip from '@material-ui/core/Tooltip'
 import { Close, Menu } from '@material-ui/icons'
 import clsx from 'clsx'
 import React, { useContext, useState } from 'react'
-import { matchPath, NavLink, useLocation } from 'react-router-dom'
+import { matchPath, useLocation } from 'react-router-dom'
 import { PATHS } from '../../application-paths'
 import { ResponsivePersonalSettings } from '../../context'
 import { globals, useGlobalStyles } from '../../globalStyles'
-import { useDrawerItems, useLocalization, usePersonalSettings, useSelectionService } from '../../hooks'
+import { useDrawerItems, useLocalization } from '../../hooks'
 import { AddButton } from '../AddButton'
 import { SearchButton } from '../search-button'
+import { PermanentDrawerItem } from './PermanentDrawerItem'
 
 const useStyles = makeStyles((theme: Theme) => {
   return createStyles({
@@ -50,28 +50,9 @@ const useStyles = makeStyles((theme: Theme) => {
       overflowX: 'hidden',
       width: '100%',
     },
-    navLink: {
-      textDecoration: 'none',
-      opacity: 0.54,
-    },
     listButton: {
       height: '65px',
     },
-    navLinkActive: {
-      opacity: 1,
-      '& .MuiListItem-root': { backgroundColor: theme.palette.primary.main },
-      '& .MuiTypography-root': { color: theme.palette.common.white },
-      '& svg': {
-        fill: theme.palette.common.white,
-      },
-    },
-    listItemIconDark: {
-      color: theme.palette.common.white,
-    },
-    listItemIconLight: {
-      color: theme.palette.common.black,
-      opacity: 0.87,
-    },
     expandCollapseWrapper: {
       height: '49px',
       padding: '0 0 12px 0',
@@ -85,16 +66,15 @@ const useStyles = makeStyles((theme: Theme) => {
 })
 
 export const PermanentDrawer = () => {
-  const personalSettings = usePersonalSettings()
   const classes = useStyles()
   const globalClasses = useGlobalStyles()
   const settings = useContext(ResponsivePersonalSettings)
-  const theme = useTheme()
   const [opened, setOpened] = useState(settings.drawer.type === 'permanent')
   const items = useDrawerItems()
   const localization = useLocalization().drawer
   const location = useLocation()
-  const selectionService = useSelectionService()
+
+  const settingsItem = items.find((item) => item.primaryText === 'Settings')
 
   if (!settings.drawer.enabled) {
     return null
@@ -127,54 +107,20 @@ export const PermanentDrawer = () => {
             {matchPath(location.pathname, [
               PATHS.content.appPath,
               PATHS.usersAndGroups.appPath,
-              PATHS.setup.appPath,
               PATHS.contentTypes.appPath,
-              PATHS.localization.appPath,
+              PATHS.settings.appPath,
               PATHS.custom.appPath.replace(':path', 'root'),
             ]) ? (
               <AddButton aria-label={localization.add} isOpened={opened} />
             ) : null}
             {items.map((item, index) => {
-              return (
-                <NavLink
-                  aria-label={item.url}
-                  to={item.url}
-                  className={classes.navLink}
-                  key={index}
-                  onClick={() => {
-                    selectionService.activeContent.setValue(undefined)
-                  }}
-                  activeClassName={classes.navLinkActive}>
-                  <ListItem
-                    aria-label={item.primaryText}
-                    className={classes.listButton}
-                    button={true}
-                    key={index}
-                    selected={!!matchPath(location.pathname, item.url)}
-                    data-test={`drawer-menu-item-${item.primaryText.replace(/\s+/g, '-').toLowerCase()}`}>
-                    <ListItemIcon
-                      className={clsx(classes.listItemIconDark, globalClasses.centered, {
-                        [classes.listItemIconLight]: personalSettings.theme === 'light',
-                      })}>
-                      <Tooltip title={item.secondaryText} placement="right">
-                        <div>{item.icon}</div>
-                      </Tooltip>
-                    </ListItemIcon>
-                    {opened && (
-                      <ListItemText
-                        primary={`${item.primaryText}`}
-                        style={{
-                          color:
-                            theme.palette.type === 'light' ? theme.palette.common.black : theme.palette.common.white,
-                        }}
-                      />
-                    )}
-                  </ListItem>
-                </NavLink>
-              )
+              return item.primaryText !== 'Settings' && <PermanentDrawerItem item={item} opened={opened} key={index} />
             })}
           </li>
-          <li style={{ fontWeight: 'bold', textAlign: 'center' }}>BETA</li>
+          <li>
+            {settingsItem && <PermanentDrawerItem item={settingsItem} opened={opened} />}
+            <div style={{ fontWeight: 'bold', textAlign: 'center' }}>BETA</div>
+          </li>
         </List>
       </div>
     </Paper>

apps/sensenet/src/components/drawer/PermanentDrawerItem.tsx

@@ -0,0 +1,95 @@
+import {
+  createStyles,
+  ListItem,
+  ListItemIcon,
+  ListItemText,
+  makeStyles,
+  Theme,
+  Tooltip,
+  useTheme,
+} from '@material-ui/core'
+import clsx from 'clsx'
+import React from 'react'
+import { matchPath, NavLink, useLocation } from 'react-router-dom'
+import { useGlobalStyles } from '../../globalStyles'
+import { usePersonalSettings, useSelectionService } from '../../hooks'
+import { DrawerItem } from '../../hooks/use-drawer-items'
+
+const useStyles = makeStyles((theme: Theme) => {
+  return createStyles({
+    navLink: {
+      textDecoration: 'none',
+      opacity: 0.54,
+    },
+    navLinkActive: {
+      opacity: 1,
+      '& .MuiListItem-root': { backgroundColor: theme.palette.primary.main },
+      '& .MuiTypography-root': { color: theme.palette.common.white },
+      '& svg': {
+        fill: theme.palette.common.white,
+      },
+    },
+    listButton: {
+      height: '65px',
+    },
+    listItemIconDark: {
+      color: theme.palette.common.white,
+    },
+    listItemIconLight: {
+      color: theme.palette.common.black,
+      opacity: 0.87,
+    },
+  })
+})
+
+export interface PermanentDrawerItemProps {
+  item: DrawerItem
+  opened: boolean
+}
+
+export const PermanentDrawerItem: React.FunctionComponent<PermanentDrawerItemProps> = (props) => {
+  const classes = useStyles()
+  const globalClasses = useGlobalStyles()
+  const theme = useTheme()
+
+  const selectionService = useSelectionService()
+  const location = useLocation()
+  const personalSettings = usePersonalSettings()
+
+  return (
+    <NavLink
+      aria-label={props.item.url}
+      to={props.item.url}
+      className={classes.navLink}
+      onClick={() => {
+        selectionService.activeContent.setValue(undefined)
+      }}
+      activeClassName={classes.navLinkActive}>
+      <ListItem
+        aria-label={props.item.primaryText}
+        className={classes.listButton}
+        button={true}
+        selected={!!matchPath(location.pathname, props.item.url)}
+        data-test={`drawer-menu-item-${props.item.primaryText.replace(/\s+/g, '-').toLowerCase()}`}>
+        <ListItemIcon
+          className={clsx(classes.listItemIconDark, globalClasses.centered, {
+            [classes.listItemIconLight]: personalSettings.theme === 'light',
+          })}>
+          <Tooltip title={props.item.primaryText} placement="right">
+            <div>{props.item.icon}</div>
+          </Tooltip>
+        </ListItemIcon>
+        {props.opened && (
+          <Tooltip title={props.item.secondaryText} placement="right">
+            <ListItemText
+              primary={`${props.item.primaryText}`}
+              style={{
+                color: theme.palette.type === 'light' ? theme.palette.common.black : theme.palette.common.white,
+              }}
+            />
+          </Tooltip>
+        )}
+      </ListItem>
+    </NavLink>
+  )
+}

apps/sensenet/src/components/drawer/TemporaryDrawer.tsx

@@ -13,7 +13,7 @@ import {
 import Settings from '@material-ui/icons/Settings'
 import React, { useContext } from 'react'
 import { Link, matchPath, NavLink, useLocation } from 'react-router-dom'
-import { PATHS } from '../../application-paths'
+import { PATHS, resolvePathParams } from '../../application-paths'
 import { ResponsiveContext, ResponsivePersonalSettings } from '../../context'
 import { useDrawerItems, useLocalization, useTheme } from '../../hooks'
 import { LogoutButton } from '../LogoutButton'
@@ -111,7 +111,10 @@ export const TemporaryDrawer = (props: TemporaryDrawerProps) => {
             <ListItemSecondaryAction>
               {device === 'mobile' ? null : (
                 <Link
-                  to={PATHS.personalSettings.appPath}
+                  to={resolvePathParams({
+                    path: PATHS.settings.appPath,
+                    params: { submenu: 'adminui' },
+                  })}
                   style={{ textDecoration: 'none' }}
                   onClick={() => props.onClose()}>
                   <IconButton title={localization.personalSettingsTitle}>