fix findings

SenseNet · Mar 4, 2021 · 2f063ea · 2f063ea
1 parent faac837
commit 2f063ea
Show file tree

Hide file tree

Showing 5 changed files with 108 additions and 113 deletions.
diff --git a/apps/sensenet/src/application-paths.ts b/apps/sensenet/src/application-paths.ts
@@ -17,7 +17,7 @@ export const PATHS = {
   settings: { appPath: '/settings/:submenu?' },
 } as const
 
-type SettingsItemType = 'stats' | 'apiKeys' | 'webHooks' | 'adminui'
+type SettingsItemType = 'stats' | 'apiKeys' | 'webhooks' | 'adminui'
 
 type RoutesWithContentBrowser = keyof Pick<typeof PATHS, 'content' | 'usersAndGroups' | 'contentTypes' | 'trash'>
 

diff --git a/apps/sensenet/src/components/drawer/PermanentDrawer.tsx b/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,13 @@ 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')
 
@@ -136,89 +114,11 @@ export const PermanentDrawer = () => {
               <AddButton aria-label={localization.add} isOpened={opened} />
             ) : null}
             {items.map((item, index) => {
-              return (
-                item.primaryText !== 'Settings' && (
-                  <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.primaryText} placement="right">
-                          <div>{item.icon}</div>
-                        </Tooltip>
-                      </ListItemIcon>
-                      {opened && (
-                        <Tooltip title={item.secondaryText} placement="right">
-                          <ListItemText
-                            primary={`${item.primaryText}`}
-                            style={{
-                              color:
-                                theme.palette.type === 'light'
-                                  ? theme.palette.common.black
-                                  : theme.palette.common.white,
-                            }}
-                          />
-                        </Tooltip>
-                      )}
-                    </ListItem>
-                  </NavLink>
-                )
-              )
+              return item.primaryText !== 'Settings' && <PermanentDrawerItem item={item} opened={opened} key={index} />
             })}
           </li>
           <li>
-            {settingsItem && (
-              <NavLink
-                aria-label={settingsItem.url}
-                to={`${settingsItem.url}stats`}
-                className={classes.navLink}
-                onClick={() => {
-                  selectionService.activeContent.setValue(undefined)
-                }}
-                activeClassName={classes.navLinkActive}>
-                <ListItem
-                  aria-label={settingsItem.primaryText}
-                  className={classes.listButton}
-                  button={true}
-                  selected={!!matchPath(location.pathname, settingsItem.url)}
-                  data-test={`drawer-menu-item-${settingsItem.primaryText.replace(/\s+/g, '-').toLowerCase()}`}>
-                  <ListItemIcon
-                    className={clsx(classes.listItemIconDark, globalClasses.centered, {
-                      [classes.listItemIconLight]: personalSettings.theme === 'light',
-                    })}>
-                    <Tooltip title={settingsItem.primaryText} placement="right">
-                      <div>{settingsItem.icon}</div>
-                    </Tooltip>
-                  </ListItemIcon>
-                  {opened && (
-                    <Tooltip title={settingsItem.secondaryText} placement="right">
-                      <ListItemText
-                        primary={`${settingsItem!.primaryText}`}
-                        style={{
-                          color:
-                            theme.palette.type === 'light' ? theme.palette.common.black : theme.palette.common.white,
-                        }}
-                      />
-                    </Tooltip>
-                  )}
-                </ListItem>
-              </NavLink>
-            )}
+            {settingsItem && <PermanentDrawerItem item={settingsItem} opened={opened} />}
             <div style={{ fontWeight: 'bold', textAlign: 'center' }}>BETA</div>
           </li>
         </List>

diff --git a/apps/sensenet/src/components/drawer/PermanentDrawerItem.tsx b/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>
+  )
+}
diff --git a/apps/sensenet/src/components/settings/index.tsx b/apps/sensenet/src/components/settings/index.tsx
@@ -58,12 +58,12 @@ export const Settings: React.FunctionComponent = () => {
     {
       name: 'stats',
       displayName: localizationDrawer.titles.Stats,
-      url: '/settings/stats',
+      url: resolvePathParams({ path: PATHS.settings.appPath, params: { submenu: 'stats' } }),
     },
     {
       name: 'apiKeys',
       displayName: localizationDrawer.titles.ApiAndSecurity,
-      url: '/settings/apikeys',
+      url: resolvePathParams({ path: PATHS.settings.appPath, params: { submenu: 'apiKeys' } }),
     },
     {
       name: 'localization',
@@ -73,12 +73,12 @@ export const Settings: React.FunctionComponent = () => {
     {
       name: 'webHooks',
       displayName: localizationDrawer.titles.Webhooks,
-      url: '/settings/webhooks',
+      url: resolvePathParams({ path: PATHS.settings.appPath, params: { submenu: 'webhooks' } }),
     },
     {
       name: 'adminui',
       displayName: localizationDrawer.titles.AdminUiCustomization,
-      url: '/settings/adminui',
+      url: resolvePathParams({ path: PATHS.settings.appPath, params: { submenu: 'adminui' } }),
     },
   ]
 
@@ -102,7 +102,7 @@ export const Settings: React.FunctionComponent = () => {
 
   return (
     <div className={clsx(globalClasses.contentWrapper, classes.settingsWrapper)} style={{ paddingLeft: 0 }}>
-      <div className={clsx(globalClasses.contentTitle, globalClasses.centeredVertical)} style={{ display: 'grid' }}>
+      <div className={clsx(globalClasses.contentTitle, globalClasses.centeredVertical)}>
         <span style={{ fontSize: '20px' }}>{localizationDrawer.titles.Settings}</span>
       </div>
       <div className={classes.settingsContainer}>

diff --git a/apps/sensenet/src/hooks/use-drawer-items.tsx b/apps/sensenet/src/hooks/use-drawer-items.tsx
@@ -139,7 +139,7 @@ export const useDrawerItems = () => {
             },
           })
         case 'Settings':
-          return resolvePathParams({ path: PATHS.settings.appPath })
+          return resolvePathParams({ path: PATHS.settings.appPath, params: { submenu: 'stats' } })
         default:
           return '/'
       }