Shortcuts: New anatomy and bundles

src/components/Menu/MenuComponents/Menu.styled.js

@@ -193,3 +193,11 @@ export const Footer = styled.footer`
     }
   }
 `
+
+export const Shortcut = styled.span`
+  background-color: var(--md-sys-color-surface-container);
+  padding: 2px 4px;
+  border-radius: var(--border-radius-m);
+  font-size: 90%;
+  margin-left: auto;
+`

src/components/Menu/MenuComponents/MenuItem.jsx

@@ -5,7 +5,10 @@ import { isArray } from 'lodash'
 import { Link } from 'react-router-dom'
 
 const MenuItem = forwardRef(
-  ({ label, icon, highlighted, selected, items = [], className, isLink, ...props }, ref) => {
+  (
+    { label, icon, highlighted, selected, items = [], className, isLink, shortcut, ...props },
+    ref,
+  ) => {
     const labelsArray = isArray(label) ? label : [label]
 
     const Item = (
@@ -22,6 +25,7 @@ const MenuItem = forwardRef(
         {labelsArray.map((label, index) => (
           <span key={index}>{label}</span>
         ))}
+        {shortcut && <Styled.Shortcut>{shortcut}</Styled.Shortcut>}
         {!!items.length && <Icon icon="arrow_right" className="more" />}
       </Styled.Item>
     )

src/components/Menu/Menus/AppMenu.jsx

@@ -46,12 +46,14 @@ export const AppMenu = ({ user, ...props }) => {
       link: '/settings/bundles',
       label: 'Studio Settings',
       icon: 'settings',
+      shortcut: 'S+S',
     },
     {
       id: 'projectsManager',
       link: '/manageProjects/anatomy',
       label: 'Projects Settings',
       icon: 'settings_applications',
+      shortcut: 'P+P',
     },
     // this is weird I know, instead of returning a node, we return a menu object with sub menus
     InstallerDownload({ isMenu: true }),
@@ -64,6 +66,7 @@ export const AppMenu = ({ user, ...props }) => {
       link: '/events',
       label: 'Event Viewer',
       icon: 'history',
+      shortcut: 'E+E',
     },
     {
       id: 'services',

src/containers/header/AppNavLinks.jsx

@@ -53,7 +53,7 @@ const AppNavLinks = ({ links = [] }) => {
           }
 
           return (
-            <Styled.NavItem key={idx}>
+            <Styled.NavItem key={idx} data-shortcut={item.shortcut}>
               <NavLink to={item.path}>
                 <Button variant="nav" className={Typography.titleSmall} tabIndex={-1}>
                   {item.name}

src/context/shortcutsContext.jsx

@@ -3,11 +3,13 @@ import { useNavigate } from 'react-router'
 import { useDispatch } from 'react-redux'
 import { toggleMenuOpen } from '../features/context'
 import { useLogOutMutation } from '../services/auth/getAuth'
+import { useSearchParams } from 'react-router-dom'
 
 const ShortcutsContext = createContext()
 
 function ShortcutsProvider(props) {
   const navigate = useNavigate()
+  const [searchParams] = useSearchParams()
   const dispatch = useDispatch()
 
   // logout
@@ -27,17 +29,24 @@ function ShortcutsProvider(props) {
   const navigation = useMemo(
     () => [
       // project settings
-      { key: 'p+p', action: () => navigate('/manageProjects/anatomy') },
+      {
+        key: 'p+p',
+        action: () => navigate('/manageProjects/projectSettings?' + searchParams.toString()),
+      },
+      // project settings anatomy
+      { key: 'a+a', action: () => navigate('/manageProjects/anatomy?' + searchParams.toString()) },
       // studio settings
       { key: 's+s', action: () => navigate('/settings/studio') },
+      // bundles settings
+      { key: 'b+b', action: () => navigate('/settings/bundles') },
       // dashboard
       { key: 'd+d', action: () => navigate('/dashboard') },
       // user settings
       { key: 'u+u', action: () => navigate('/settings/users') },
       // events page
       { key: 'e+e', action: () => navigate('/events') },
     ],
-    [navigate],
+    [navigate, searchParams],
   )
 
   const navBar = useMemo(
@@ -51,7 +60,7 @@ function ShortcutsProvider(props) {
     [navigate],
   )
   // when these variables change, update shortcutshh
-  const deps = []
+  const deps = [searchParams]
 
   const defaultShortcuts = [...navigation, ...navBar]
 

src/pages/ProjectManagerPage/ProjectManagerPage.jsx

@@ -80,12 +80,14 @@ const ProjectManagerPage = () => {
       path: '/manageProjects/anatomy',
       module: 'anatomy',
       accessLevels: ['manager'],
+      shortcut: 'A+A',
     },
     {
       name: 'Project settings',
       path: '/manageProjects/projectSettings',
       module: 'projectSettings',
       accessLevels: ['manager'],
+      shortcut: 'P+P',
     },
     {
       name: 'Site settings',

src/pages/SettingsPage/SettingsPage.jsx

@@ -74,12 +74,14 @@ const SettingsPage = () => {
         path: '/settings/bundles',
         module: 'bundles',
         accessLevels: ['manager'],
+        shortcut: 'B+B',
       },
       {
         name: 'Studio settings',
         path: '/settings/studio',
         module: 'studio',
         accessLevels: ['manager'],
+        shortcut: 'S+S',
       },
       {
         name: 'Site settings',
@@ -104,6 +106,7 @@ const SettingsPage = () => {
         path: '/settings/users',
         module: 'users',
         accessLevels: ['manager'],
+        shortcut: 'U+U',
       },
       {
         name: 'Permissions',

src/pages/UserDashboardPage/UserDashboardPage.jsx

@@ -20,6 +20,7 @@ const UserDashboardPage = () => {
       path: '/dashboard/tasks',
       module: 'tasks',
       accessLevels: [],
+      shortcut: 'D+D',
     },
     {
       name: 'Overview',