feat: move Configuration menu to Personal settings

ui/src/layout/AppBar.js

@@ -1,13 +1,12 @@
 import React, { forwardRef } from 'react'
 import {
   AppBar as RAAppBar,
-  UserMenu,
   MenuItemLink,
+  UserMenu,
   useTranslate
 } from 'react-admin'
 import { makeStyles } from '@material-ui/core'
 import InfoIcon from '@material-ui/icons/Info'
-import TuneIcon from '@material-ui/icons/Tune'
 
 const useStyles = makeStyles((theme) => ({
   menuItem: {
@@ -15,22 +14,6 @@ const useStyles = makeStyles((theme) => ({
   }
 }))
 
-const ConfigurationMenu = forwardRef(({ onClick }, ref) => {
-  const translate = useTranslate()
-  const classes = useStyles()
-  return (
-    <MenuItemLink
-      ref={ref}
-      to="/configuration"
-      primaryText={translate('menu.configuration')}
-      leftIcon={<TuneIcon />}
-      onClick={onClick}
-      className={classes.menuItem}
-      sidebarIsOpen={true}
-    />
-  )
-})
-
 const VersionMenu = forwardRef((props, ref) => {
   const translate = useTranslate()
   const classes = useStyles()
@@ -50,7 +33,6 @@ const VersionMenu = forwardRef((props, ref) => {
 
 const CustomUserMenu = (props) => (
   <UserMenu {...props}>
-    <ConfigurationMenu />
     <VersionMenu />
   </UserMenu>
 )

ui/src/layout/Menu.js

@@ -8,6 +8,7 @@ import SettingsIcon from '@material-ui/icons/Settings'
 import ViewListIcon from '@material-ui/icons/ViewList'
 import SubMenu from './SubMenu'
 import inflection from 'inflection'
+import PersonalMenu from './PersonalMenu'
 
 const translatedResourceName = (resource, translate) =>
   translate(`resources.${resource.name}.name`, {
@@ -74,6 +75,7 @@ const Menu = ({ onMenuClick, dense, logout }) => {
         dense={dense}
       >
         {resources.filter(subItems('settings')).map(renderMenuItemLink)}
+        <PersonalMenu dense={dense} sidebarIsOpen={open} />
       </SubMenu>
       {resources.filter(subItems(undefined)).map(renderMenuItemLink)}
       {isXsmall && logout}

ui/src/layout/PersonalMenu.js

@@ -0,0 +1,29 @@
+import React, { forwardRef } from 'react'
+import { MenuItemLink, useTranslate } from 'react-admin'
+import { makeStyles } from '@material-ui/core'
+import TuneIcon from '@material-ui/icons/Tune'
+
+const useStyles = makeStyles((theme) => ({
+  menuItem: {
+    color: theme.palette.text.secondary
+  }
+}))
+
+const PersonalMenu = forwardRef(({ onClick, open, dense }, ref) => {
+  const translate = useTranslate()
+  const classes = useStyles()
+  return (
+    <MenuItemLink
+      ref={ref}
+      to="/personal"
+      primaryText={translate('menu.personal')}
+      leftIcon={<TuneIcon />}
+      onClick={onClick}
+      className={classes.menuItem}
+      sidebarIsOpen={open}
+      dense={dense}
+    />
+  )
+})
+
+export default PersonalMenu