New navigation (#379)

<img width="1582" alt="Screenshot 2023-09-12 at 12 06 23 PM"
src="https://github.com/TBD54566975/ftl/assets/51647/3d0dd9f4-6331-429f-9bc1-308027174145">
<img width="1582" alt="Screenshot 2023-09-12 at 12 06 28 PM"
src="https://github.com/TBD54566975/ftl/assets/51647/1005c14f-1cdb-4c8d-80f7-551959778237">
<img width="1582" alt="Screenshot 2023-09-12 at 12 17 26 PM"
src="https://github.com/TBD54566975/ftl/assets/51647/01abc76a-8e97-4880-bcf7-d317850f6229">

console/client/src/App.test.tsx

@@ -5,6 +5,8 @@ import { App } from './App'
 
 describe('App', () => {
   it('renders the app', () => {
+    window.history.pushState({}, 'Modules', '/modules')
+
     render(
       <BrowserRouter>
         <App />

console/client/src/App.tsx

@@ -1,14 +1,20 @@
-import { Route, Routes } from 'react-router-dom'
+import { Navigate, Route, Routes } from 'react-router-dom'
 import { GraphPage } from './features/graph/GraphPage.tsx'
-import { IDELayout } from './layout/IDELayout.tsx'
+import { ModulesList } from './features/modules/ModulesList.tsx'
+import { Timeline } from './features/timeline/Timeline.tsx'
+import { Layout } from './layout/Layout.tsx'
 import { bgColor, textColor } from './utils/style.utils.ts'
 
 export const App = () => {
   return (
     <div className={`h-screen flex flex-col min-w-[1024px] min-h-[600px] ${bgColor} ${textColor}`}>
       <Routes>
-        <Route index element={<IDELayout />} />
-        <Route path='graph' element={<GraphPage />} />
+        <Route path='/' element={<Layout />}>
+          <Route path='/' element={<Navigate to='events' replace />} />
+          <Route path='events' element={<Timeline />} />
+          <Route path='modules' element={<ModulesList />} />
+          <Route path='graph' element={<GraphPage />} />
+        </Route>
       </Routes>
     </div>
   )

console/client/src/features/graph/GraphPage.tsx

@@ -1,7 +1,6 @@
 import { useContext, useEffect } from 'react'
 import ReactFlow, { Controls, MiniMap, useEdgesState, useNodesState } from 'reactflow'
 import 'reactflow/dist/style.css'
-import { Navigation } from '../../layout/Navigation'
 import { modulesContext } from '../../providers/modules-provider'
 import { GroupNode } from './GroupNode'
 import { VerbNode } from './VerbNode'
@@ -22,7 +21,6 @@ export const GraphPage = () => {
 
   return (
     <>
-      <Navigation />
       <div style={{ width: '100vw', height: '100vh' }}>
         <ReactFlow
           nodes={nodes}

console/client/src/features/modules/ModuleDetails.tsx

@@ -1,16 +1,12 @@
 import React from 'react'
 import { useSearchParams } from 'react-router-dom'
-import { Verb } from '../../protos/xyz/block/ftl/v1/console/console_pb'
 import { modulesContext } from '../../providers/modules-provider'
 import { SelectedModuleContext } from '../../providers/selected-module-provider'
-import { TabsContext } from '../../providers/tabs-provider'
 import { textColor } from '../../utils'
-import { VerbTab } from '../verbs/VerbTab'
 
 export const ModuleDetails = () => {
   const modules = React.useContext(modulesContext)
   const { selectedModule, setSelectedModule } = React.useContext(SelectedModuleContext)
-  const { openTab } = React.useContext(TabsContext)
   const [searchParams] = useSearchParams()
   const moduleId = searchParams.get('module')
   // When mounting with a valid module in query params set selected module
@@ -29,16 +25,6 @@ export const ModuleDetails = () => {
     )
   }
 
-  const handleVerbClicked = (verb: Verb) => {
-    const verbId = [selectedModule.name, verb.verb?.name].join('.')
-    openTab({
-      id: verbId,
-      label: verb.verb?.name ?? 'Verb',
-      isClosable: true,
-      component: <VerbTab id={verbId} />,
-    })
-  }
-
   return (
     <div className='flex-1 overflow-auto text-sm font-medium text-gray-500 dark:text-gray-400'>
       <div className='flex justify-between'>
@@ -60,9 +46,6 @@ export const ModuleDetails = () => {
           {selectedModule.verbs.map((verb, index) => (
             <div
               key={index}
-              onClick={() => {
-                handleVerbClicked(verb)
-              }}
               className='rounded bg-indigo-600 px-2 py-1 text-xs font-semibold text-white text-center cursor-pointer
             shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600'
             >

console/client/src/features/verbs/VerbForm.tsx

@@ -10,7 +10,6 @@ import { Module, Verb } from '../../protos/xyz/block/ftl/v1/console/console_pb'
 import { VerbService } from '../../protos/xyz/block/ftl/v1/ftl_connect'
 import { VerbRef } from '../../protos/xyz/block/ftl/v1/schema/schema_pb'
 import { useDarkMode } from '../../providers/dark-mode-provider'
-import { TabsContext } from '../../providers/tabs-provider'
 
 export type Schema = JSONSchema4 | JSONSchema6 | JSONSchema7
 
@@ -22,7 +21,6 @@ interface Props {
 export const VerbForm = ({ module, verb }: Props) => {
   const client = useClient(VerbService)
   const { isDarkMode } = useDarkMode()
-  const { activeTabId } = React.useContext(TabsContext)
   const [editorText, setEditorText] = React.useState<string>('')
   const [response, setResponse] = React.useState<string | null>(null)
   const [error, setError] = React.useState<string | null>(null)
@@ -82,7 +80,7 @@ export const VerbForm = ({ module, verb }: Props) => {
         validate: true,
         schemas: [{ schema, uri: 'http://myserver/foo-schema.json', fileMatch: ['*'] }],
       })
-  }, [monaco, schema, activeTabId])
+  }, [monaco, schema])
 
   return (
     <>

console/client/src/layout/Layout.tsx

@@ -0,0 +1,21 @@
+import { Outlet } from 'react-router-dom'
+import { Navigation } from './Navigation'
+import { Notification } from './Notification'
+import { SidePanel } from './SidePanel'
+
+export const Layout = () => {
+  return (
+    <div className='flex h-screen'>
+      <Navigation />
+
+      <main className='overflow-hidden'>
+        <section className='overflow-y-auto h-full'>
+          <Outlet />
+        </section>
+      </main>
+
+      <SidePanel />
+      <Notification />
+    </div>
+  )
+}

console/client/src/layout/Navigation.tsx

@@ -1,36 +1,82 @@
-import { NavLink } from 'react-router-dom'
+import { Schema, Timeline, ViewModuleSharp } from '@mui/icons-material'
+import { useContext } from 'react'
+import { Link, NavLink } from 'react-router-dom'
 import { DarkModeSwitch } from '../components/DarkModeSwitch'
-import { classNames } from '../utils/react.utils'
-import { navColor } from '../utils/style.utils'
+import { modulesContext } from '../providers/modules-provider'
+import { classNames } from '../utils'
+
+const navigation = [
+  { name: 'Events', href: '/events', icon: Timeline },
+  { name: 'Modules', href: '/modules', icon: ViewModuleSharp },
+  { name: 'Graph', href: '/graph', icon: Schema },
+]
 
 export const Navigation = () => {
+  const modules = useContext(modulesContext)
+
   return (
-    <div className={`px-4 py-2 flex items-center justify-between ${navColor} text-white shadow-md`}>
-      <div className='flex items-center space-x-2'>
-        <NavLink to='/'>
-          <div className='pb-1'>
-            <span className='text-xl font-medium'>FTL</span>
-            <span className='px-2 text-pink-400 text-2xl font-medium'>∞</span>
-          </div>
-        </NavLink>
-        <div className='hidden md:block'>
-          <div className='ml-2 flex items-baseline space-x-4'>
-            <NavLink
-              to='/graph'
-              key='graph'
-              className={({ isActive }) =>
-                classNames(
-                  isActive ? 'bg-indigo-700 text-white' : 'text-white hover:bg-indigo-500 hover:bg-opacity-75',
-                  'rounded-md px-3 py-2 text-sm font-medium',
-                )
-              }
-            >
-              Graph
-            </NavLink>
+    <div className='bg-gray-800 flex-shrink-0 w-52 h-full'>
+      <aside className={`flex flex-col h-full`}>
+        <div className='flex flex-col h-full overflow-y-auto bg-indigo-600'>
+          <div className='flex grow flex-col overflow-y-auto bg-indigo-600 px-4'>
+            <Link to='/events'>
+              <div className='-mx-2 space-y-1'>
+                <div className='flex shrink-0 items-center p-2 rounded-md hover:bg-indigo-700'>
+                  <span className='text-2xl font-medium text-white'>FTL</span>
+                  <span className='px-2 text-pink-400 text-2xl font-medium'>∞</span>
+                </div>
+              </div>
+            </Link>
+            <nav className='flex flex-1 flex-col pt-4'>
+              <ul role='list' className='flex flex-1 flex-col gap-y-7'>
+                <li>
+                  <ul role='list' className='-mx-2 space-y-1'>
+                    {navigation.map((item) => (
+                      <li key={item.name}>
+                        <NavLink
+                          to={item.href}
+                          className={({ isActive }) =>
+                            classNames(
+                              isActive
+                                ? 'bg-indigo-700 text-white'
+                                : 'text-indigo-200 hover:text-white hover:bg-indigo-700',
+                              'group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold',
+                            )
+                          }
+                        >
+                          {({ isActive }) => (
+                            <>
+                              <item.icon
+                                className={classNames(
+                                  isActive ? 'text-white' : 'text-indigo-200 group-hover:text-white',
+                                  'h-6 w-6 shrink-0',
+                                )}
+                                aria-hidden='true'
+                              />
+                              {item.name}
+                              {item.href === '/modules' && (
+                                <span
+                                  className='ml-auto w-9 min-w-max whitespace-nowrap rounded-full bg-indigo-600 px-2.5 py-0.5 text-center text-xs font-medium leading-5 text-white ring-1 ring-inset ring-indigo-500'
+                                  aria-hidden='true'
+                                >
+                                  {modules.modules.length}
+                                </span>
+                              )}
+                            </>
+                          )}
+                        </NavLink>
+                      </li>
+                    ))}
+                  </ul>
+                </li>
+                <li className='pb-2 mt-auto'>
+                  <DarkModeSwitch />
+                </li>
+              </ul>
+            </nav>
           </div>
         </div>
-      </div>
-      <DarkModeSwitch />
+      </aside>
     </div>
   )
 }

console/client/src/layout/SidePanel.tsx

@@ -20,9 +20,7 @@ export const SidePanel = () => {
         leaveTo='translate-x-full'
       >
         <div className={`fixed right-0 w-1/3 h-full ${sidePanelColor} shadow-xl`}>
-          <div
-            className={`flex items-center justify-between pl-4 pr-2 py-2 rounded-tl ${headerTextColor} ${headerColor}`}
-          >
+          <div className={`flex items-center justify-between pl-4 pr-2 py-2 ${headerTextColor} ${headerColor}`}>
             Event Details
             <button onClick={() => closePanel()} className='hover:bg-indigo-800 dark:hover:bg-indigo-500'>
               <XMarkIcon className={`h-5 w-5`} />