feat(client): refactors layout to resolve scroll bugs (#432)

- Refactors layout to fix scroll bugs - Creates a Page component and subcomponents to resolve issues and create consistent way of creating new pages without introducing scroll related styling bugs - @wesbillman notification style I dropped under the transition to prevent it from making the screen black as the notification component as a whole covers the whole screen
block · Oct 3, 2023 · b32d760 · b32d760
1 parent dee120e
commit b32d760
Show file tree

Hide file tree

Showing 18 changed files with 200 additions and 96 deletions.
diff --git a/console/client/.eslintrc.cjs b/console/client/.eslintrc.cjs
@@ -24,6 +24,7 @@ module.exports = {
   rules: {
     'react/react-in-jsx-scope': 'off',
     'react/jsx-uses-react': 'off',
+    'react/prop-types': 'off',
     'func-style': ['error', 'expression'],
     '@typescript-eslint/consistent-type-definitions': ['error', 'interface'],
     '@typescript-eslint/no-unused-vars': ['warn', { argsIgnorePattern: '^_', varsIgnorePattern: '^_' }],

diff --git a/console/client/index.html b/console/client/index.html
@@ -8,7 +8,7 @@
     <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;700&display=swap" rel="stylesheet" />
   </head>
 
-  <body class="bg-white dark:bg-slate-800">
+  <body class="bg-white dark:bg-slate-800 h-screen w-full overflow-hidden">
     <div id="root"></div>
     <script type="module" src="/src/main.tsx"></script>
   </body>

diff --git a/console/client/src/App.tsx b/console/client/src/App.tsx
@@ -7,26 +7,23 @@ import { ModulesPage } from './features/modules/ModulesPage.tsx'
 import { TimelinePage } from './features/timeline/TimelinePage.tsx'
 import { VerbPage } from './features/verbs/VerbPage.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 path='/' element={<Layout />}>
-          <Route path='/' element={<Navigate to='events' replace />} />
-          <Route path='events' element={<TimelinePage />} />
+    <Routes>
+      <Route path='/' element={<Layout />}>
+        <Route path='/' element={<Navigate to='events' replace />} />
+        <Route path='events' element={<TimelinePage />} />
 
-          <Route path='modules' element={<ModulesPage />} />
-          <Route path='modules/:moduleName' element={<ModulePage />} />
-          <Route path='modules/:moduleName/verbs/:verbName' element={<VerbPage />} />
+        <Route path='modules' element={<ModulesPage />} />
+        <Route path='modules/:moduleName' element={<ModulePage />} />
+        <Route path='modules/:moduleName/verbs/:verbName' element={<VerbPage />} />
 
-          <Route path='deployments' element={<DeploymentsPage />} />
-          <Route path='deployments/:deploymentName' element={<DeploymentPage />} />
+        <Route path='deployments' element={<DeploymentsPage />} />
+        <Route path='deployments/:deploymentName' element={<DeploymentPage />} />
 
-          <Route path='graph' element={<GraphPage />} />
-        </Route>
-      </Routes>
-    </div>
+        <Route path='graph' element={<GraphPage />} />
+      </Route>
+    </Routes>
   )
 }
diff --git a/console/client/src/components/PageHeader.tsx b/console/client/src/components/PageHeader.tsx
@@ -1,5 +1,6 @@
 import { ChevronRightIcon } from '@heroicons/react/20/solid'
 import React from 'react'
+import { classNames } from '../utils'
 
 interface Breadcrumb {
   label: string
@@ -11,11 +12,17 @@ interface Props {
   title: string
   children?: React.ReactNode
   breadcrumbs?: Breadcrumb[]
+  className?: string
 }
 
-export const PageHeader = ({ icon, title, children, breadcrumbs }: Props) => {
+export const PageHeader = ({ icon, title, children, breadcrumbs, className }: Props) => {
   return (
-    <div className={`sticky top-0 z-10 shadow dark:shadow-md flex justify-between items-center py-2 px-4 text-gray-70`}>
+    <div
+      className={classNames(
+        className,
+        `sticky top-0 z-10 shadow dark:shadow-md flex justify-between items-center py-2 px-4 text-gray-70`,
+      )}
+    >
       <div className='flex items-center'>
         <span className='mt-1 text-indigo-500 mr-2 mb-1 h-5 w-5'>{icon}</span>
         {breadcrumbs && breadcrumbs.length > 0 && (

diff --git a/console/client/src/components/index.ts b/console/client/src/components/index.ts
@@ -0,0 +1,6 @@
+export * from './AttributeBadge'
+export * from './ButtonSmall'
+export * from './Card'
+export * from './CloseButton'
+export * from './CodeBlock'
+export * from './DarkModeSwitch'
diff --git a/console/client/src/features/deployments/DeploymentPage.tsx b/console/client/src/features/deployments/DeploymentPage.tsx
@@ -3,11 +3,11 @@ import React from 'react'
 import { useNavigate, useParams } from 'react-router-dom'
 import { ButtonSmall } from '../../components/ButtonSmall'
 import { Card } from '../../components/Card'
-import { PageHeader } from '../../components/PageHeader'
 import { Module } from '../../protos/xyz/block/ftl/v1/console/console_pb'
 import { MetadataCalls, VerbRef } from '../../protos/xyz/block/ftl/v1/schema/schema_pb'
 import { modulesContext } from '../../providers/modules-provider'
 import { verbRefString } from '../verbs/verb.utils'
+import { Page } from '../../layout'
 
 export const DeploymentPage = () => {
   const navigate = useNavigate()
@@ -49,14 +49,14 @@ export const DeploymentPage = () => {
   }, [modules])
 
   return (
-    <>
-      <PageHeader
+    <Page>
+      <Page.Header
         icon={<RocketLaunchIcon />}
         title={module?.deploymentName || 'Loading...'}
         breadcrumbs={[{ label: 'Deployments', link: '/deployments' }]}
       />
 
-      <div className='m-4'>
+      <Page.Body className='p-4'>
         <div className='grid grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-4'>
           {module?.verbs.map((verb) => (
             <Card
@@ -77,7 +77,7 @@ export const DeploymentPage = () => {
             </li>
           ))}
         </ul>
-      </div>
-    </>
+      </Page.Body>
+    </Page>
   )
 }
diff --git a/console/client/src/features/deployments/DeploymentsPage.tsx b/console/client/src/features/deployments/DeploymentsPage.tsx
@@ -2,28 +2,30 @@ import { RocketLaunchIcon } from '@heroicons/react/24/outline'
 import React from 'react'
 import { useNavigate } from 'react-router-dom'
 import { Card } from '../../components/Card'
-import { PageHeader } from '../../components/PageHeader'
 import { modulesContext } from '../../providers/modules-provider'
+import { Page } from '../../layout'
 
 export const DeploymentsPage = () => {
   const modules = React.useContext(modulesContext)
   const navigate = useNavigate()
 
   return (
-    <>
-      <PageHeader icon={<RocketLaunchIcon />} title='Deployments' />
-      <div className='m-4 grid grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-4'>
-        {modules.modules.map((module) => (
-          <Card
-            key={module.deploymentName}
-            topBarColor='bg-green-500'
-            onClick={() => navigate(`/deployments/${module.deploymentName}`)}
-          >
-            {module.name}
-            <p className='text-xs text-gray-400'>{module.deploymentName}</p>
-          </Card>
-        ))}
-      </div>
-    </>
+    <Page>
+      <Page.Header icon={<RocketLaunchIcon />} title='Deployments' />
+      <Page.Body className='p-4'>
+        <div className='grid grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-4'>
+          {modules.modules.map((module) => (
+            <Card
+              key={module.deploymentName}
+              topBarColor='bg-green-500'
+              onClick={() => navigate(`/deployments/${module.deploymentName}`)}
+            >
+              {module.name}
+              <p className='text-xs text-gray-400'>{module.deploymentName}</p>
+            </Card>
+          ))}
+        </div>
+      </Page.Body>
+    </Page>
   )
 }
diff --git a/console/client/src/features/graph/GraphPage.tsx b/console/client/src/features/graph/GraphPage.tsx
@@ -2,12 +2,11 @@ import { CubeTransparentIcon } from '@heroicons/react/24/outline'
 import { useContext, useEffect } from 'react'
 import ReactFlow, { Controls, MiniMap, useEdgesState, useNodesState } from 'reactflow'
 import 'reactflow/dist/style.css'
-import { PageHeader } from '../../components/PageHeader'
 import { modulesContext } from '../../providers/modules-provider'
 import { GroupNode } from './GroupNode'
 import { VerbNode } from './VerbNode'
 import { layoutNodes } from './create-layout'
-
+import { Page } from '../../layout'
 const nodeTypes = { groupNode: GroupNode, verbNode: VerbNode }
 
 export const GraphPage = () => {
@@ -22,9 +21,9 @@ export const GraphPage = () => {
   }, [modules, setEdges, setNodes])
 
   return (
-    <>
-      <PageHeader icon={<CubeTransparentIcon />} title='Graph' />
-      <div className='flex h-full'>
+    <Page>
+      <Page.Header icon={<CubeTransparentIcon />} title='Graph' />
+      <Page.Body className='flex h-full'>
         <ReactFlow
           nodes={nodes}
           edges={edges}
@@ -36,7 +35,7 @@ export const GraphPage = () => {
           <Controls />
           <MiniMap />
         </ReactFlow>
-      </div>
-    </>
+      </Page.Body>
+    </Page>
   )
 }
diff --git a/console/client/src/features/modules/ModulePage.tsx b/console/client/src/features/modules/ModulePage.tsx
@@ -2,7 +2,7 @@ import { Square3Stack3DIcon } from '@heroicons/react/24/outline'
 import React from 'react'
 import { useNavigate, useParams } from 'react-router-dom'
 import { Card } from '../../components/Card'
-import { PageHeader } from '../../components/PageHeader'
+import { Page } from '../../layout'
 import { CallEvent, Module } from '../../protos/xyz/block/ftl/v1/console/console_pb'
 import { modulesContext } from '../../providers/modules-provider'
 import { getCalls } from '../../services/console.service'
@@ -33,14 +33,14 @@ export const ModulePage = () => {
   }, [module])
 
   return (
-    <>
-      <div className='flex flex-col h-full'>
+    <Page>
+      <Page.Header
+        icon={<Square3Stack3DIcon />}
+        title={module?.name || ''}
+        breadcrumbs={[{ label: 'Modules', link: '/modules' }]}
+      />
+      <Page.Body className='p-4'>
         <div className='flex-1 flex flex-col h-full'>
-          <PageHeader
-            icon={<Square3Stack3DIcon />}
-            title={module?.name || ''}
-            breadcrumbs={[{ label: 'Modules', link: '/modules' }]}
-          />
           <div className='flex-1 m-4'>
             <div className='grid grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-4'>
               {module?.verbs.map((verb) => (
@@ -59,7 +59,7 @@ export const ModulePage = () => {
             <CallList calls={calls} />
           </div>
         </div>
-      </div>
-    </>
+      </Page.Body>
+    </Page>
   )
 }
diff --git a/console/client/src/features/modules/ModulesPage.tsx b/console/client/src/features/modules/ModulesPage.tsx
@@ -1,12 +1,13 @@
 import React from 'react'
 import { Square3Stack3DIcon } from '@heroicons/react/24/outline'
-import { PageHeader } from '../../components/PageHeader'
 import { modulesContext } from '../../providers/modules-provider'
 import { generateDot } from './generate-dot'
 import { dotToSVG } from './dot-to-svg'
 import { formatSVG } from './format-svg'
 import { svgZoom } from './svg-zoom'
 import { createControls } from './create-controls'
+import { Page } from '../../layout'
+
 import './Modules.css'
 
 export const ModulesPage = () => {
@@ -49,10 +50,12 @@ export const ModulesPage = () => {
     }
   }, [controls, svg])
   return (
-    <div className='h-full w-full flex flex-col'>
-      <PageHeader icon={<Square3Stack3DIcon />} title='Modules' />
-      <div ref={controlRef} className='zoom-pan-controls'></div>
-      <div ref={viewportRef} className='viewport flex-1 overflow-hidden' />
-    </div>
+    <Page className='h-full w-full flex flex-col'>
+      <Page.Header icon={<Square3Stack3DIcon />} title='Modules' />
+      <Page.Body>
+        <div ref={controlRef} className='zoom-pan-controls'></div>
+        <div ref={viewportRef} className='viewport flex-1 overflow-hidden' />
+      </Page.Body>
+    </Page>
   )
 }
diff --git a/console/client/src/features/timeline/TimelinePage.tsx b/console/client/src/features/timeline/TimelinePage.tsx
@@ -1,7 +1,7 @@
 import { ListBulletIcon } from '@heroicons/react/24/outline'
 import React from 'react'
 import { useSearchParams } from 'react-router-dom'
-import { PageHeader } from '../../components/PageHeader'
+import { Page } from '../../layout'
 import { EventsQuery_Filter } from '../../protos/xyz/block/ftl/v1/console/console_pb'
 import { Timeline } from './Timeline'
 import { TimelineFilterPanel } from './filters/TimelineFilterPanel'
@@ -31,22 +31,22 @@ export const TimelinePage = () => {
   }
 
   return (
-    <>
-      <PageHeader icon={<ListBulletIcon />} title='Events'>
+    <Page>
+      <Page.Header icon={<ListBulletIcon />} title='Events'>
         <TimelineTimeControls
           selectedTimeRange={selectedTimeRange}
           isTimelinePaused={isTimelinePaused}
           onTimeSettingsChange={handleTimeSettingsChanged}
         />
-      </PageHeader>
-      <div className='flex' style={{ height: 'calc(100% - 44px)' }}>
+      </Page.Header>
+      <Page.Body className='flex'>
         <div className='sticky top-0 flex-none overflow-y-auto'>
           <TimelineFilterPanel onFiltersChanged={handleFiltersChanged} />
         </div>
         <div className='flex-grow overflow-y-scroll'>
           <Timeline timeSettings={timeSettings} filters={filters} />
         </div>
-      </div>
-    </>
+      </Page.Body>
+    </Page>
   )
 }
diff --git a/console/client/src/features/verbs/VerbPage.tsx b/console/client/src/features/verbs/VerbPage.tsx
@@ -2,7 +2,7 @@ import { Square3Stack3DIcon } from '@heroicons/react/24/outline'
 import React from 'react'
 import { useParams } from 'react-router-dom'
 import { CodeBlock } from '../../components/CodeBlock'
-import { PageHeader } from '../../components/PageHeader'
+import { Page } from '../../layout'
 import { CallEvent, Module, Verb } from '../../protos/xyz/block/ftl/v1/console/console_pb'
 import { modulesContext } from '../../providers/modules-provider'
 import { getCalls } from '../../services/console.service'
@@ -40,17 +40,17 @@ export const VerbPage = () => {
   }, [module])
 
   return (
-    <>
-      <div className='flex flex-col h-full'>
+    <Page>
+      <Page.Header
+        icon={<Square3Stack3DIcon />}
+        title={verb?.verb?.name || ''}
+        breadcrumbs={[
+          { label: 'Modules', link: '/modules' },
+          { label: module?.name || '', link: `/modules/${module?.name}` },
+        ]}
+      />
+      <Page.Body className='p-4'>
         <div className='flex-1 flex flex-col h-full'>
-          <PageHeader
-            icon={<Square3Stack3DIcon />}
-            title={verb?.verb?.name || ''}
-            breadcrumbs={[
-              { label: 'Modules', link: '/modules' },
-              { label: module?.name || '', link: `/modules/${module?.name}` },
-            ]}
-          />
           <div className='flex-1 h-1/2 overflow-y-auto mx-4 mt-4'>
             {verb?.verb?.request?.toJsonString() && (
               <CodeBlock
@@ -62,12 +62,11 @@ export const VerbPage = () => {
               />
             )}
           </div>
-
           <div className='flex-1 h-1/2 m-4'>
             <CallList calls={calls} />
           </div>
         </div>
-      </div>
-    </>
+      </Page.Body>
+    </Page>
   )
 }