From af03a2b4772482b9f11fd5966e50a3bbbf9a196a Mon Sep 17 00:00:00 2001
From: Wes <wesbillman@users.noreply.github.com>
Date: Tue, 10 Oct 2023 10:29:51 -0700
Subject: [PATCH 1/4] chore: linting and style updates

---
 console/client/.eslintrc.cjs                   |  1 -
 .../src/features/modules/components/Panel.tsx  | 14 +++++++++-----
 .../src/features/modules/graph/svg-zoom.ts     |  2 +-
 console/client/src/layout/Page.tsx             | 14 +++++++++-----
 console/client/tsconfig.json                   | 18 +++++++++++++-----
 5 files changed, 32 insertions(+), 17 deletions(-)

diff --git a/console/client/.eslintrc.cjs b/console/client/.eslintrc.cjs
index f94f680b21..7b8ae2a15a 100644
--- a/console/client/.eslintrc.cjs
+++ b/console/client/.eslintrc.cjs
@@ -24,7 +24,6 @@ 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/src/features/modules/components/Panel.tsx b/console/client/src/features/modules/components/Panel.tsx
index 3b0f762977..c7752b51d0 100644
--- a/console/client/src/features/modules/components/Panel.tsx
+++ b/console/client/src/features/modules/components/Panel.tsx
@@ -26,14 +26,18 @@ const Body: React.FC<{
   )
 }
 
-export const Panel: React.FC<{
+export const Panel: React.FC & {
+  Header: typeof Header
+  Body: typeof Body
+} = ({
+  className,
+  children,
+  style,
+}: {
   className?: string
   children?: React.ReactNode
   style?: React.CSSProperties
-}> & {
-  Header: typeof Header
-  Body: typeof Body
-} = ({ className, children, style }) => {
+}) => {
   return (
     <div style={style} className={classNames(className, `p-2 overflow-hidden ${borders.level1} ${backgrounds.level1}`)}>
       {children}
diff --git a/console/client/src/features/modules/graph/svg-zoom.ts b/console/client/src/features/modules/graph/svg-zoom.ts
index f0c27898f5..f77b2ecb9c 100644
--- a/console/client/src/features/modules/graph/svg-zoom.ts
+++ b/console/client/src/features/modules/graph/svg-zoom.ts
@@ -1,4 +1,4 @@
-import { SVG, Element, Svg } from '@svgdotjs/svg.js'
+import { Element, SVG, Svg } from '@svgdotjs/svg.js'
 import '@svgdotjs/svg.panzoom.js/dist/svg.panzoom.esm.js'
 
 const centerGroup = ({
diff --git a/console/client/src/layout/Page.tsx b/console/client/src/layout/Page.tsx
index fc994113c9..fe04f6353d 100644
--- a/console/client/src/layout/Page.tsx
+++ b/console/client/src/layout/Page.tsx
@@ -60,14 +60,18 @@ const Body: React.FC<{
   )
 }
 
-export const Page: React.FC<{
+export const Page: React.FC & {
+  Header: typeof Header
+  Body: typeof Body
+} = ({
+  className,
+  style,
+  children,
+}: {
   className?: string
   style?: React.CSSProperties
   children?: React.ReactNode
-}> & {
-  Header: typeof Header
-  Body: typeof Body
-} = ({ className, style, children }) => {
+}) => {
   return (
     <div className={classNames(className, 'flex flex-col h-full')} style={style}>
       {children}
diff --git a/console/client/tsconfig.json b/console/client/tsconfig.json
index 1d90f677e8..5b46fe6661 100644
--- a/console/client/tsconfig.json
+++ b/console/client/tsconfig.json
@@ -1,21 +1,29 @@
 {
   "compilerOptions": {
-    "target": "es6",
-    "lib": ["dom", "dom.iterable", "esnext"],
-    "allowJs": true,
+    "target": "ES2021",
+    "useDefineForClassFields": true,
+    "lib": [
+      "ES2021",
+      "DOM",
+      "DOM.Iterable"
+    ],
     "skipLibCheck": true,
     "esModuleInterop": true,
     "allowSyntheticDefaultImports": true,
     "allowImportingTsExtensions": true,
     "strict": true,
     "forceConsistentCasingInFileNames": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true,
     "module": "esnext",
     "moduleResolution": "node",
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "react-jsx"
+    "jsx": "react-jsx",
   },
-  "include": ["src/**/*"]
+  "include": [
+    "src/**/*"
+  ]
 }

From a96c4188b4b4b1cc71b0cadcb05f24cbf22e22a6 Mon Sep 17 00:00:00 2001
From: Wes <wesbillman@users.noreply.github.com>
Date: Tue, 10 Oct 2023 10:52:42 -0700
Subject: [PATCH 2/4] Update react imports

---
 console/client/.eslintrc.cjs                  |  1 +
 .../client/src/features/calls/CallList.tsx    |  6 ++--
 .../features/deployments/DeploymentPage.tsx   | 12 +++----
 .../features/deployments/DeploymentsPage.tsx  |  6 ++--
 .../src/features/modules/ModulePage.tsx       | 12 +++----
 .../src/features/modules/ModulesGraph.tsx     | 20 +++++------
 .../src/features/modules/ModulesPage.tsx      |  8 ++---
 .../src/features/modules/ModulesRequests.tsx  | 25 +++++++-------
 .../src/features/modules/ModulesSidebar.tsx   | 10 +++---
 .../src/features/modules/components/Panel.tsx | 14 +++-----
 .../features/modules/components/Select.tsx    | 34 -------------------
 .../src/features/modules/components/index.ts  |  1 -
 .../client/src/features/timeline/Timeline.tsx | 14 ++++----
 .../src/features/timeline/TimelinePage.tsx    | 12 +++----
 .../timeline/details/TimelineCallDetails.tsx  |  4 +--
 .../TimelineDeploymentCreatedDetails.tsx      |  4 +--
 .../TimelineDeploymentUpdatedDetails.tsx      |  4 +--
 .../timeline/details/TimelineLogDetails.tsx   |  4 +--
 .../timeline/details/TimelineTimestamp.tsx    |  6 +---
 .../timeline/filters/TimelineFilterPanel.tsx  | 14 ++++----
 .../timeline/filters/TimelineTimeControls.tsx | 12 +++----
 .../client/src/features/verbs/VerbCalls.tsx   |  8 ++---
 .../client/src/features/verbs/VerbForm.tsx    | 16 ++++-----
 .../client/src/features/verbs/VerbPage.tsx    | 14 ++++----
 console/client/src/features/verbs/VerbTab.tsx |  4 +--
 console/client/src/hooks/use-local-storage.ts |  6 ++--
 console/client/src/layout/Notification.tsx    |  4 +--
 console/client/src/layout/Page.tsx            | 14 +++-----
 .../src/providers/dark-mode-provider.tsx      |  4 +--
 .../src/providers/notifications-provider.tsx  |  8 ++---
 .../src/providers/side-panel-provider.tsx     |  8 ++---
 31 files changed, 130 insertions(+), 179 deletions(-)
 delete mode 100644 console/client/src/features/modules/components/Select.tsx

diff --git a/console/client/.eslintrc.cjs b/console/client/.eslintrc.cjs
index 7b8ae2a15a..ad545b8dd1 100644
--- a/console/client/.eslintrc.cjs
+++ b/console/client/.eslintrc.cjs
@@ -25,6 +25,7 @@ module.exports = {
     'react/react-in-jsx-scope': 'off',
     'react/jsx-uses-react': 'off',
     'func-style': ['error', 'expression'],
+    'react/prop-types': 'off',
     '@typescript-eslint/consistent-type-definitions': ['error', 'interface'],
     '@typescript-eslint/no-unused-vars': ['warn', { argsIgnorePattern: '^_', varsIgnorePattern: '^_' }],
     '@typescript-eslint/ban-ts-comment': [
diff --git a/console/client/src/features/calls/CallList.tsx b/console/client/src/features/calls/CallList.tsx
index 0ce1f6ca68..0c3e4d95a5 100644
--- a/console/client/src/features/calls/CallList.tsx
+++ b/console/client/src/features/calls/CallList.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import { useContext, useState } from 'react'
 import { CallEvent } from '../../protos/xyz/block/ftl/v1/console/console_pb'
 import { SidePanelContext } from '../../providers/side-panel-provider'
 import { formatDuration, formatTimestampShort } from '../../utils'
@@ -10,8 +10,8 @@ interface Props {
 }
 
 export const CallList = ({ calls }: Props) => {
-  const { openPanel, closePanel } = React.useContext(SidePanelContext)
-  const [selectedCall, setSelectedCall] = React.useState<CallEvent | undefined>()
+  const { openPanel, closePanel } = useContext(SidePanelContext)
+  const [selectedCall, setSelectedCall] = useState<CallEvent | undefined>()
 
   const handleCallClicked = (call: CallEvent) => {
     if (selectedCall?.equals(call)) {
diff --git a/console/client/src/features/deployments/DeploymentPage.tsx b/console/client/src/features/deployments/DeploymentPage.tsx
index 807e174831..31aa48528c 100644
--- a/console/client/src/features/deployments/DeploymentPage.tsx
+++ b/console/client/src/features/deployments/DeploymentPage.tsx
@@ -1,5 +1,5 @@
 import { RocketLaunchIcon } from '@heroicons/react/24/outline'
-import React from 'react'
+import { useContext, useEffect, useState } from 'react'
 import { useNavigate, useParams } from 'react-router-dom'
 import { ButtonSmall } from '../../components/ButtonSmall'
 import { Card } from '../../components/Card'
@@ -12,18 +12,18 @@ import { verbRefString } from '../verbs/verb.utils'
 export const DeploymentPage = () => {
   const navigate = useNavigate()
   const { deploymentName } = useParams()
-  const modules = React.useContext(modulesContext)
-  const [module, setModule] = React.useState<Module | undefined>()
-  const [calls, setCalls] = React.useState<VerbRef[]>([])
+  const modules = useContext(modulesContext)
+  const [module, setModule] = useState<Module | undefined>()
+  const [calls, setCalls] = useState<VerbRef[]>([])
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (modules) {
       const module = modules.modules.find((module) => module.deploymentName === deploymentName)
       setModule(module)
     }
   }, [modules, deploymentName])
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (!module) return
 
     const verbCalls: VerbRef[] = []
diff --git a/console/client/src/features/deployments/DeploymentsPage.tsx b/console/client/src/features/deployments/DeploymentsPage.tsx
index c854ef0760..a2faf449e9 100644
--- a/console/client/src/features/deployments/DeploymentsPage.tsx
+++ b/console/client/src/features/deployments/DeploymentsPage.tsx
@@ -1,12 +1,12 @@
 import { RocketLaunchIcon } from '@heroicons/react/24/outline'
-import React from 'react'
+import { useContext } from 'react'
 import { useNavigate } from 'react-router-dom'
 import { Card } from '../../components/Card'
-import { modulesContext } from '../../providers/modules-provider'
 import { Page } from '../../layout'
+import { modulesContext } from '../../providers/modules-provider'
 
 export const DeploymentsPage = () => {
-  const modules = React.useContext(modulesContext)
+  const modules = useContext(modulesContext)
   const navigate = useNavigate()
 
   return (
diff --git a/console/client/src/features/modules/ModulePage.tsx b/console/client/src/features/modules/ModulePage.tsx
index 51d2ec3088..39377fe0ef 100644
--- a/console/client/src/features/modules/ModulePage.tsx
+++ b/console/client/src/features/modules/ModulePage.tsx
@@ -1,5 +1,5 @@
 import { Square3Stack3DIcon } from '@heroicons/react/24/outline'
-import React from 'react'
+import { useContext, useEffect, useState } from 'react'
 import { useNavigate, useParams } from 'react-router-dom'
 import { Card } from '../../components/Card'
 import { Page } from '../../layout'
@@ -12,18 +12,18 @@ import { CallList } from '../calls/CallList'
 export const ModulePage = () => {
   const navigate = useNavigate()
   const { moduleName } = useParams()
-  const modules = React.useContext(modulesContext)
-  const [module, setModule] = React.useState<Module | undefined>()
-  const [calls, setCalls] = React.useState<CallEvent[] | undefined>()
+  const modules = useContext(modulesContext)
+  const [module, setModule] = useState<Module | undefined>()
+  const [calls, setCalls] = useState<CallEvent[] | undefined>()
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (modules) {
       const module = modules.modules.find((module) => module.name === moduleName?.toLocaleLowerCase())
       setModule(module)
     }
   }, [modules, moduleName])
 
-  React.useEffect(() => {
+  useEffect(() => {
     const abortController = new AbortController()
     if (!module) return
 
diff --git a/console/client/src/features/modules/ModulesGraph.tsx b/console/client/src/features/modules/ModulesGraph.tsx
index 217e1241b1..900c971088 100644
--- a/console/client/src/features/modules/ModulesGraph.tsx
+++ b/console/client/src/features/modules/ModulesGraph.tsx
@@ -1,9 +1,9 @@
-import React from 'react'
-import { PlusCircleIcon, MinusCircleIcon, ArrowPathIcon } from '@heroicons/react/24/outline'
+import { ArrowPathIcon, MinusCircleIcon, PlusCircleIcon } from '@heroicons/react/24/outline'
+import React, { useContext, useEffect, useRef, useState } from 'react'
 import { modulesContext } from '../../providers/modules-provider'
-import { VerbId, ZoomCallbacks } from './modules.constants'
 import { Panel } from './components'
-import { svgZoom, formatSVG, dotToSVG, generateDot } from './graph'
+import { dotToSVG, formatSVG, generateDot, svgZoom } from './graph'
+import { VerbId, ZoomCallbacks } from './modules.constants'
 
 export const ModulesGraph: React.FC<{
   className?: string
@@ -13,12 +13,12 @@ export const ModulesGraph: React.FC<{
   setZoomCallbacks: React.Dispatch<React.SetStateAction<ZoomCallbacks | undefined>>
   zoomCallbacks?: ZoomCallbacks
 }> = ({ className, setZoomCallbacks, zoomCallbacks }) => {
-  const modules = React.useContext(modulesContext)
-  const canvasRef = React.useRef<HTMLDivElement>(null)
-  const [resizeCount, setResizeCount] = React.useState<number>(0)
-  const previousDimensions = React.useRef({ width: 0, height: 0 }) // Store previous dimensions
+  const modules = useContext(modulesContext)
+  const canvasRef = useRef<HTMLDivElement>(null)
+  const [resizeCount, setResizeCount] = useState<number>(0)
+  const previousDimensions = useRef({ width: 0, height: 0 }) // Store previous dimensions
 
-  React.useEffect(() => {
+  useEffect(() => {
     const canvasCur = canvasRef.current
     if (canvasCur) {
       const observer = new ResizeObserver((entries) => {
@@ -39,7 +39,7 @@ export const ModulesGraph: React.FC<{
     }
   }, [canvasRef])
 
-  React.useEffect(() => {
+  useEffect(() => {
     const canvas = canvasRef.current
     const ready = canvas && Boolean(modules)
     let animationFrameId: number
diff --git a/console/client/src/features/modules/ModulesPage.tsx b/console/client/src/features/modules/ModulesPage.tsx
index e608e4abf3..7c04be3b00 100644
--- a/console/client/src/features/modules/ModulesPage.tsx
+++ b/console/client/src/features/modules/ModulesPage.tsx
@@ -1,5 +1,5 @@
 import { Square3Stack3DIcon } from '@heroicons/react/24/outline'
-import React from 'react'
+import { useContext, useState } from 'react'
 import { Page } from '../../layout'
 import { modulesContext } from '../../providers/modules-provider'
 import { SidePanelProvider } from '../../providers/side-panel-provider'
@@ -12,10 +12,10 @@ import type { ZoomCallbacks } from './modules.constants'
 import { VerbId } from './modules.constants'
 
 export const ModulesPage = () => {
-  const { modules } = React.useContext(modulesContext)
-  const [selectedVerbs, setSelectedVerbs] = React.useState<VerbId[]>([])
+  const { modules } = useContext(modulesContext)
+  const [selectedVerbs, setSelectedVerbs] = useState<VerbId[]>([])
   const hasVerbs = Boolean(selectedVerbs.length)
-  const [zoomCallbacks, setZoomCallbacks] = React.useState<ZoomCallbacks>()
+  const [zoomCallbacks, setZoomCallbacks] = useState<ZoomCallbacks>()
 
   return (
     <SidePanelProvider>
diff --git a/console/client/src/features/modules/ModulesRequests.tsx b/console/client/src/features/modules/ModulesRequests.tsx
index 7f6ec8672d..6dcbddcb72 100644
--- a/console/client/src/features/modules/ModulesRequests.tsx
+++ b/console/client/src/features/modules/ModulesRequests.tsx
@@ -1,9 +1,11 @@
-import React from 'react'
+import { Timestamp } from '@bufbuild/protobuf'
+import React, { useContext, useEffect, useState } from 'react'
 import { useSearchParams } from 'react-router-dom'
-import { Panel } from './components'
-import { modulesFilter } from '../../services/console.service'
-import { streamEvents } from '../../services/console.service'
-import { Event, Module, EventsQuery_Filter } from '../../protos/xyz/block/ftl/v1/console/console_pb'
+import { Event, EventsQuery_Filter, Module } from '../../protos/xyz/block/ftl/v1/console/console_pb'
+import { SidePanelContext } from '../../providers/side-panel-provider.tsx'
+import { modulesFilter, streamEvents } from '../../services/console.service'
+import { formatTimestampShort } from '../../utils/date.utils.ts'
+import { panelColor } from '../../utils/style.utils.ts'
 import { TimelineCall } from '../timeline/TimelineCall.tsx'
 import { TimelineDeploymentCreated } from '../timeline/TimelineDeploymentCreated.tsx'
 import { TimelineDeploymentUpdated } from '../timeline/TimelineDeploymentUpdated.tsx'
@@ -13,10 +15,7 @@ import { TimelineCallDetails } from '../timeline/details/TimelineCallDetails.tsx
 import { TimelineDeploymentCreatedDetails } from '../timeline/details/TimelineDeploymentCreatedDetails.tsx'
 import { TimelineDeploymentUpdatedDetails } from '../timeline/details/TimelineDeploymentUpdatedDetails.tsx'
 import { TimelineLogDetails } from '../timeline/details/TimelineLogDetails.tsx'
-import { SidePanelContext } from '../../providers/side-panel-provider.tsx'
-import { formatTimestampShort } from '../../utils/date.utils.ts'
-import { panelColor } from '../../utils/style.utils.ts'
-import { Timestamp } from '@bufbuild/protobuf'
+import { Panel } from './components'
 
 const maxTimelineEntries = 1000
 
@@ -25,9 +24,9 @@ export const ModulesRequests: React.FC<{
   modules: Module[]
 }> = ({ className, modules }) => {
   const [searchParams, setSearchParams] = useSearchParams()
-  const [entries, setEntries] = React.useState<Event[]>([])
-  const { openPanel, closePanel } = React.useContext(SidePanelContext)
-  const [selectedEntry, setSelectedEntry] = React.useState<Event | null>(null)
+  const [entries, setEntries] = useState<Event[]>([])
+  const { openPanel, closePanel } = useContext(SidePanelContext)
+  const [selectedEntry, setSelectedEntry] = useState<Event | null>(null)
   const deployments = modules.map(({ deploymentName }) => deploymentName)
 
   const filters: EventsQuery_Filter[] = []
@@ -35,7 +34,7 @@ export const ModulesRequests: React.FC<{
     filters.push(modulesFilter(deployments))
   }
 
-  React.useEffect(() => {
+  useEffect(() => {
     setEntries([])
     if (!filters.length) return
     const abortController = new AbortController()
diff --git a/console/client/src/features/modules/ModulesSidebar.tsx b/console/client/src/features/modules/ModulesSidebar.tsx
index dc0f4d9c02..42e777e894 100644
--- a/console/client/src/features/modules/ModulesSidebar.tsx
+++ b/console/client/src/features/modules/ModulesSidebar.tsx
@@ -1,11 +1,11 @@
-import React from 'react'
 import { Listbox } from '@headlessui/react'
 import { EyeIcon } from '@heroicons/react/20/solid'
+import React, { useState } from 'react'
 import { Module } from '../../protos/xyz/block/ftl/v1/console/console_pb'
-import { VerbId, ZoomCallbacks } from './modules.constants'
-import { getNames } from './modules.utils'
 import { classNames } from '../../utils'
 import { backgrounds, borders, colors } from './components'
+import { VerbId, ZoomCallbacks } from './modules.constants'
+import { getNames } from './modules.utils'
 
 interface DeploymentVerbs {
   deploymentName: string
@@ -73,10 +73,8 @@ export const ModulesSidebar: React.FC<{
   selectedVerbs: VerbId[]
   zoomCallbacks?: ZoomCallbacks
 }> = ({ className, modules, setSelectedVerbs, selectedVerbs, zoomCallbacks }) => {
-  /** Setup hooks */
-  const [query, setQuery] = React.useState('')
+  const [query, setQuery] = useState('')
 
-  /** Format data */
   const map: Map<string, DeploymentVerbs> = new Map()
   for (const { name: moduleName, verbs, deploymentName } of modules) {
     const value: DeploymentVerbs = {
diff --git a/console/client/src/features/modules/components/Panel.tsx b/console/client/src/features/modules/components/Panel.tsx
index c7752b51d0..3b0f762977 100644
--- a/console/client/src/features/modules/components/Panel.tsx
+++ b/console/client/src/features/modules/components/Panel.tsx
@@ -26,18 +26,14 @@ const Body: React.FC<{
   )
 }
 
-export const Panel: React.FC & {
-  Header: typeof Header
-  Body: typeof Body
-} = ({
-  className,
-  children,
-  style,
-}: {
+export const Panel: React.FC<{
   className?: string
   children?: React.ReactNode
   style?: React.CSSProperties
-}) => {
+}> & {
+  Header: typeof Header
+  Body: typeof Body
+} = ({ className, children, style }) => {
   return (
     <div style={style} className={classNames(className, `p-2 overflow-hidden ${borders.level1} ${backgrounds.level1}`)}>
       {children}
diff --git a/console/client/src/features/modules/components/Select.tsx b/console/client/src/features/modules/components/Select.tsx
deleted file mode 100644
index 008514b743..0000000000
--- a/console/client/src/features/modules/components/Select.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import React from 'react'
-import { Listbox } from '@headlessui/react'
-
-type OptionTypes = 'verb' | 'module'
-interface Option {
-  key: string
-  value: string
-  type?: OptionTypes
-}
-const SelectIcon: React.FC<{ type: OptionTypes }> = ({ type }) => <span>{type}</span>
-
-export const Select: React.FC<{
-  data: Option[]
-  onChange: (value: string) => void
-}> = ({ data, onChange }) => {
-  const [selected, setSelected] = React.useState(data[0])
-  const handleChange = (option: Option) => {
-    setSelected(option)
-    onChange(option.value)
-  }
-  return (
-    <Listbox value={selected} onChange={handleChange}>
-      <Listbox.Button>{selected.value}</Listbox.Button>
-      <Listbox.Options>
-        {data.map((item) => (
-          <Listbox.Option key={item.value} value={item}>
-            {item.type && <SelectIcon type={item.type} />}
-            {item.value}
-          </Listbox.Option>
-        ))}
-      </Listbox.Options>
-    </Listbox>
-  )
-}
diff --git a/console/client/src/features/modules/components/index.ts b/console/client/src/features/modules/components/index.ts
index a7d4722670..8c554565a1 100644
--- a/console/client/src/features/modules/components/index.ts
+++ b/console/client/src/features/modules/components/index.ts
@@ -1,3 +1,2 @@
-export * from './Select'
 export * from './Panel'
 export * from './components.constants'
diff --git a/console/client/src/features/timeline/Timeline.tsx b/console/client/src/features/timeline/Timeline.tsx
index c74fc7aad0..e63fe1a454 100644
--- a/console/client/src/features/timeline/Timeline.tsx
+++ b/console/client/src/features/timeline/Timeline.tsx
@@ -1,11 +1,12 @@
 import { Timestamp } from '@bufbuild/protobuf'
-import React from 'react'
+import { useContext, useEffect, useState } from 'react'
 import { useSearchParams } from 'react-router-dom'
 import { Event, EventsQuery_Filter } from '../../protos/xyz/block/ftl/v1/console/console_pb.ts'
 import { SidePanelContext } from '../../providers/side-panel-provider.tsx'
 import { eventIdFilter, getEvents, streamEvents, timeFilter } from '../../services/console.service.ts'
 import { formatTimestampShort } from '../../utils/date.utils.ts'
 import { panelColor } from '../../utils/style.utils.ts'
+import { DeploymentLabel } from './DeploymentLabel.tsx'
 import { TimelineCall } from './TimelineCall.tsx'
 import { TimelineDeploymentCreated } from './TimelineDeploymentCreated.tsx'
 import { TimelineDeploymentUpdated } from './TimelineDeploymentUpdated.tsx'
@@ -16,7 +17,6 @@ import { TimelineDeploymentCreatedDetails } from './details/TimelineDeploymentCr
 import { TimelineDeploymentUpdatedDetails } from './details/TimelineDeploymentUpdatedDetails.tsx'
 import { TimelineLogDetails } from './details/TimelineLogDetails.tsx'
 import { TimeSettings } from './filters/TimelineTimeControls.tsx'
-import { DeploymentLabel } from './DeploymentLabel.tsx'
 
 interface Props {
   timeSettings: TimeSettings
@@ -27,11 +27,11 @@ const maxTimelineEntries = 1000
 
 export const Timeline = ({ timeSettings, filters }: Props) => {
   const [searchParams, setSearchParams] = useSearchParams()
-  const { openPanel, closePanel, isOpen } = React.useContext(SidePanelContext)
-  const [entries, setEntries] = React.useState<Event[]>([])
-  const [selectedEntry, setSelectedEntry] = React.useState<Event | null>(null)
+  const { openPanel, closePanel, isOpen } = useContext(SidePanelContext)
+  const [entries, setEntries] = useState<Event[]>([])
+  const [selectedEntry, setSelectedEntry] = useState<Event | null>(null)
 
-  React.useEffect(() => {
+  useEffect(() => {
     const eventId = searchParams.get('id')
     const abortController = new AbortController()
 
@@ -75,7 +75,7 @@ export const Timeline = ({ timeSettings, filters }: Props) => {
     }
   }, [filters, timeSettings])
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (!isOpen) {
       setSelectedEntry(null)
     }
diff --git a/console/client/src/features/timeline/TimelinePage.tsx b/console/client/src/features/timeline/TimelinePage.tsx
index ce107fdcae..b96ab0e06a 100644
--- a/console/client/src/features/timeline/TimelinePage.tsx
+++ b/console/client/src/features/timeline/TimelinePage.tsx
@@ -1,5 +1,5 @@
 import { ListBulletIcon } from '@heroicons/react/24/outline'
-import React from 'react'
+import { useEffect, useState } from 'react'
 import { useSearchParams } from 'react-router-dom'
 import { Page } from '../../layout'
 import { EventsQuery_Filter } from '../../protos/xyz/block/ftl/v1/console/console_pb'
@@ -10,13 +10,13 @@ import { TIME_RANGES, TimeSettings, TimelineTimeControls } from './filters/Timel
 
 export const TimelinePage = () => {
   const [searchParams] = useSearchParams()
-  const [timeSettings, setTimeSettings] = React.useState<TimeSettings>({ isTailing: true, isPaused: false })
-  const [filters, setFilters] = React.useState<EventsQuery_Filter[]>([])
-  const [selectedTimeRange, setSelectedTimeRange] = React.useState(TIME_RANGES['tail'])
-  const [isTimelinePaused, setIsTimelinePaused] = React.useState(false)
+  const [timeSettings, setTimeSettings] = useState<TimeSettings>({ isTailing: true, isPaused: false })
+  const [filters, setFilters] = useState<EventsQuery_Filter[]>([])
+  const [selectedTimeRange, setSelectedTimeRange] = useState(TIME_RANGES['tail'])
+  const [isTimelinePaused, setIsTimelinePaused] = useState(false)
 
   const initialEventId = searchParams.get('id')
-  React.useEffect(() => {
+  useEffect(() => {
     if (initialEventId) {
       // if we're loading a specific event, we don't want to tail.
       setSelectedTimeRange(TIME_RANGES['5m'])
diff --git a/console/client/src/features/timeline/details/TimelineCallDetails.tsx b/console/client/src/features/timeline/details/TimelineCallDetails.tsx
index b04ab6eebc..10c075d198 100644
--- a/console/client/src/features/timeline/details/TimelineCallDetails.tsx
+++ b/console/client/src/features/timeline/details/TimelineCallDetails.tsx
@@ -1,5 +1,5 @@
 import { Timestamp } from '@bufbuild/protobuf'
-import React, { useEffect, useState } from 'react'
+import { useContext, useEffect, useState } from 'react'
 import { useNavigate } from 'react-router-dom'
 import { Card } from '../../../components'
 import { AttributeBadge } from '../../../components/AttributeBadge'
@@ -23,7 +23,7 @@ interface Props {
 export const TimelineCallDetails = ({ timestamp, call }: Props) => {
   const client = useClient(ConsoleService)
   const navigate = useNavigate()
-  const { closePanel } = React.useContext(SidePanelContext)
+  const { closePanel } = useContext(SidePanelContext)
   const [requestCalls, setRequestCalls] = useState<CallEvent[]>([])
   const [selectedCall, setSelectedCall] = useState(call)
 
diff --git a/console/client/src/features/timeline/details/TimelineDeploymentCreatedDetails.tsx b/console/client/src/features/timeline/details/TimelineDeploymentCreatedDetails.tsx
index 0abdd6952a..ebc10210e6 100644
--- a/console/client/src/features/timeline/details/TimelineDeploymentCreatedDetails.tsx
+++ b/console/client/src/features/timeline/details/TimelineDeploymentCreatedDetails.tsx
@@ -1,5 +1,5 @@
 import { Timestamp } from '@bufbuild/protobuf'
-import React from 'react'
+import { useContext } from 'react'
 import { useNavigate } from 'react-router-dom'
 import { AttributeBadge } from '../../../components/AttributeBadge'
 import { Card } from '../../../components/Card'
@@ -14,7 +14,7 @@ interface Props {
 }
 
 export const TimelineDeploymentCreatedDetails = ({ event, deployment }: Props) => {
-  const { closePanel } = React.useContext(SidePanelContext)
+  const { closePanel } = useContext(SidePanelContext)
   const navigate = useNavigate()
 
   return (
diff --git a/console/client/src/features/timeline/details/TimelineDeploymentUpdatedDetails.tsx b/console/client/src/features/timeline/details/TimelineDeploymentUpdatedDetails.tsx
index 282c39b74c..5d88256e1d 100644
--- a/console/client/src/features/timeline/details/TimelineDeploymentUpdatedDetails.tsx
+++ b/console/client/src/features/timeline/details/TimelineDeploymentUpdatedDetails.tsx
@@ -1,5 +1,5 @@
 import { Timestamp } from '@bufbuild/protobuf'
-import React from 'react'
+import { useContext } from 'react'
 import { useNavigate } from 'react-router-dom'
 import { AttributeBadge } from '../../../components/AttributeBadge'
 import { Card } from '../../../components/Card'
@@ -14,7 +14,7 @@ interface Props {
 }
 
 export const TimelineDeploymentUpdatedDetails = ({ event, deployment }: Props) => {
-  const { closePanel } = React.useContext(SidePanelContext)
+  const { closePanel } = useContext(SidePanelContext)
   const navigate = useNavigate()
 
   return (
diff --git a/console/client/src/features/timeline/details/TimelineLogDetails.tsx b/console/client/src/features/timeline/details/TimelineLogDetails.tsx
index d5ecabb3d9..568790e4e4 100644
--- a/console/client/src/features/timeline/details/TimelineLogDetails.tsx
+++ b/console/client/src/features/timeline/details/TimelineLogDetails.tsx
@@ -1,5 +1,5 @@
 import { Timestamp } from '@bufbuild/protobuf'
-import React from 'react'
+import { useContext } from 'react'
 import { useNavigate } from 'react-router-dom'
 import { AttributeBadge } from '../../../components/AttributeBadge'
 import { Card } from '../../../components/Card'
@@ -18,7 +18,7 @@ interface Props {
 }
 
 export const TimelineLogDetails = ({ event, log }: Props) => {
-  const { closePanel } = React.useContext(SidePanelContext)
+  const { closePanel } = useContext(SidePanelContext)
   const navigate = useNavigate()
 
   return (
diff --git a/console/client/src/features/timeline/details/TimelineTimestamp.tsx b/console/client/src/features/timeline/details/TimelineTimestamp.tsx
index e237e76d5b..ad108715cb 100644
--- a/console/client/src/features/timeline/details/TimelineTimestamp.tsx
+++ b/console/client/src/features/timeline/details/TimelineTimestamp.tsx
@@ -2,11 +2,7 @@ import { Timestamp } from '@bufbuild/protobuf'
 import { formatTimestampShort } from '../../../utils/date.utils'
 import { textColor } from '../../../utils/style.utils'
 
-interface Props {
-  timestamp: Timestamp
-}
-
-export const TimelineTimestamp = ({ timestamp }: Props) => {
+export const TimelineTimestamp = ({ timestamp }: { timestamp: Timestamp }) => {
   return (
     <time dateTime={formatTimestampShort(timestamp)} className={`flex-none text-sm ${textColor}`}>
       {formatTimestampShort(timestamp)}
diff --git a/console/client/src/features/timeline/filters/TimelineFilterPanel.tsx b/console/client/src/features/timeline/filters/TimelineFilterPanel.tsx
index 9f25aedaf5..4c727daf80 100644
--- a/console/client/src/features/timeline/filters/TimelineFilterPanel.tsx
+++ b/console/client/src/features/timeline/filters/TimelineFilterPanel.tsx
@@ -1,5 +1,5 @@
 import { PhoneIcon, RocketLaunchIcon } from '@heroicons/react/24/outline'
-import React from 'react'
+import React, { useContext, useEffect, useState } from 'react'
 import { EventType, EventsQuery_Filter, LogLevel } from '../../../protos/xyz/block/ftl/v1/console/console_pb'
 import { modulesContext } from '../../../providers/modules-provider'
 import { eventTypesFilter, logLevelFilter, modulesFilter } from '../../../services/console.service'
@@ -42,18 +42,18 @@ interface Props {
 }
 
 export const TimelineFilterPanel = ({ onFiltersChanged }: Props) => {
-  const modules = React.useContext(modulesContext)
-  const [selectedEventTypes, setSelectedEventTypes] = React.useState<string[]>(Object.keys(EVENT_TYPES))
-  const [selectedModules, setSelectedModules] = React.useState<string[]>([])
-  const [selectedLogLevel, setSelectedLogLevel] = React.useState<number>(1)
+  const modules = useContext(modulesContext)
+  const [selectedEventTypes, setSelectedEventTypes] = useState<string[]>(Object.keys(EVENT_TYPES))
+  const [selectedModules, setSelectedModules] = useState<string[]>([])
+  const [selectedLogLevel, setSelectedLogLevel] = useState<number>(1)
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (selectedModules.length === 0) {
       setSelectedModules(modules.modules.map((module) => module.deploymentName))
     }
   }, [modules])
 
-  React.useEffect(() => {
+  useEffect(() => {
     const filter: EventsQuery_Filter[] = []
     if (selectedEventTypes.length !== Object.keys(EVENT_TYPES).length) {
       const selectedTypes = selectedEventTypes.map((key) => EVENT_TYPES[key].type)
diff --git a/console/client/src/features/timeline/filters/TimelineTimeControls.tsx b/console/client/src/features/timeline/filters/TimelineTimeControls.tsx
index ddbdcc03e1..82119b872d 100644
--- a/console/client/src/features/timeline/filters/TimelineTimeControls.tsx
+++ b/console/client/src/features/timeline/filters/TimelineTimeControls.tsx
@@ -8,7 +8,7 @@ import {
   PauseIcon,
   PlayIcon,
 } from '@heroicons/react/24/outline'
-import React, { Fragment } from 'react'
+import { Fragment, useEffect, useState } from 'react'
 import {
   bgColor,
   borderColor,
@@ -47,18 +47,18 @@ interface Props {
 }
 
 export const TimelineTimeControls = ({ onTimeSettingsChange, selectedTimeRange, isTimelinePaused }: Props) => {
-  const [selected, setSelected] = React.useState(selectedTimeRange)
-  const [isPaused, setIsPaused] = React.useState(isTimelinePaused)
-  const [newerThan, setNewerThan] = React.useState<Timestamp | undefined>()
+  const [selected, setSelected] = useState(selectedTimeRange)
+  const [isPaused, setIsPaused] = useState(isTimelinePaused)
+  const [newerThan, setNewerThan] = useState<Timestamp | undefined>()
 
   const isTailing = selected.value === TIME_RANGES['tail'].value
 
-  React.useEffect(() => {
+  useEffect(() => {
     handleRangeChanged(selectedTimeRange)
     setIsPaused(isTimelinePaused)
   }, [selectedTimeRange, isTimelinePaused])
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (isTailing) {
       onTimeSettingsChange({ isTailing, isPaused })
       return
diff --git a/console/client/src/features/verbs/VerbCalls.tsx b/console/client/src/features/verbs/VerbCalls.tsx
index 9dc7fdefce..90c50e7df3 100644
--- a/console/client/src/features/verbs/VerbCalls.tsx
+++ b/console/client/src/features/verbs/VerbCalls.tsx
@@ -1,5 +1,5 @@
 import { Timestamp } from '@bufbuild/protobuf'
-import React from 'react'
+import { useContext, useEffect, useState } from 'react'
 import { useClient } from '../../hooks/use-client.ts'
 import { ConsoleService } from '../../protos/xyz/block/ftl/v1/console/console_connect.ts'
 import { CallEvent, Module, Verb } from '../../protos/xyz/block/ftl/v1/console/console_pb'
@@ -15,10 +15,10 @@ interface Props {
 
 export const VerbCalls = ({ module, verb }: Props) => {
   const client = useClient(ConsoleService)
-  const [calls, setCalls] = React.useState<CallEvent[]>([])
-  const { openPanel } = React.useContext(SidePanelContext)
+  const [calls, setCalls] = useState<CallEvent[]>([])
+  const { openPanel } = useContext(SidePanelContext)
 
-  React.useEffect(() => {
+  useEffect(() => {
     const abortController = new AbortController()
     const fetchCalls = async () => {
       if (module === undefined) {
diff --git a/console/client/src/features/verbs/VerbForm.tsx b/console/client/src/features/verbs/VerbForm.tsx
index fad753fe2e..31dc226609 100644
--- a/console/client/src/features/verbs/VerbForm.tsx
+++ b/console/client/src/features/verbs/VerbForm.tsx
@@ -3,7 +3,7 @@
 import Editor, { Monaco } from '@monaco-editor/react'
 import type { JSONSchema4, JSONSchema6, JSONSchema7 } from 'json-schema'
 import { JSONSchemaFaker } from 'json-schema-faker'
-import React from 'react'
+import React, { useEffect, useState } from 'react'
 import { CodeBlock } from '../../components/CodeBlock'
 import { useClient } from '../../hooks/use-client'
 import { Module, Verb } from '../../protos/xyz/block/ftl/v1/console/console_pb'
@@ -21,13 +21,13 @@ interface Props {
 export const VerbForm = ({ module, verb }: Props) => {
   const client = useClient(VerbService)
   const { isDarkMode } = useDarkMode()
-  const [editorText, setEditorText] = React.useState<string>('')
-  const [response, setResponse] = React.useState<string | null>(null)
-  const [error, setError] = React.useState<string | null>(null)
-  const [schema, setSchema] = React.useState<Schema>()
-  const [monaco, setMonaco] = React.useState<Monaco>()
+  const [editorText, setEditorText] = useState<string>('')
+  const [response, setResponse] = useState<string | null>(null)
+  const [error, setError] = useState<string | null>(null)
+  const [schema, setSchema] = useState<Schema>()
+  const [monaco, setMonaco] = useState<Monaco>()
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (verb?.jsonRequestSchema) {
       JSONSchemaFaker.option('maxItems', 2)
       JSONSchemaFaker.option('alwaysFakeOptionals', true)
@@ -74,7 +74,7 @@ export const VerbForm = ({ module, verb }: Props) => {
     setMonaco(monaco)
   }
 
-  React.useEffect(() => {
+  useEffect(() => {
     schema &&
       monaco?.languages.json.jsonDefaults.setDiagnosticsOptions({
         validate: true,
diff --git a/console/client/src/features/verbs/VerbPage.tsx b/console/client/src/features/verbs/VerbPage.tsx
index d506ad448e..6c5fb505c0 100644
--- a/console/client/src/features/verbs/VerbPage.tsx
+++ b/console/client/src/features/verbs/VerbPage.tsx
@@ -1,5 +1,5 @@
 import { Square3Stack3DIcon } from '@heroicons/react/24/outline'
-import React from 'react'
+import { useContext, useEffect, useState } from 'react'
 import { useParams } from 'react-router-dom'
 import { CodeBlock } from '../../components/CodeBlock'
 import { Page } from '../../layout'
@@ -13,16 +13,16 @@ import { buildVerbSchema } from './verb.utils'
 
 export const VerbPage = () => {
   const { moduleName, verbName } = useParams()
-  const modules = React.useContext(modulesContext)
-  const [module, setModule] = React.useState<Module | undefined>()
-  const [verb, setVerb] = React.useState<Verb | undefined>()
-  const [calls, setCalls] = React.useState<CallEvent[]>([])
+  const modules = useContext(modulesContext)
+  const [module, setModule] = useState<Module | undefined>()
+  const [verb, setVerb] = useState<Verb | undefined>()
+  const [calls, setCalls] = useState<CallEvent[]>([])
 
   const callData =
     module?.data.filter((data) => [verb?.verb?.request?.name, verb?.verb?.response?.name].includes(data.data?.name)) ??
     []
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (modules) {
       const module = modules.modules.find((module) => module.name === moduleName?.toLocaleLowerCase())
       setModule(module)
@@ -31,7 +31,7 @@ export const VerbPage = () => {
     }
   }, [modules, moduleName])
 
-  React.useEffect(() => {
+  useEffect(() => {
     const abortController = new AbortController()
     if (!module) return
 
diff --git a/console/client/src/features/verbs/VerbTab.tsx b/console/client/src/features/verbs/VerbTab.tsx
index 8b51ab9bb2..313fd07809 100644
--- a/console/client/src/features/verbs/VerbTab.tsx
+++ b/console/client/src/features/verbs/VerbTab.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import { useContext } from 'react'
 import { CodeBlock } from '../../components/CodeBlock'
 import { modulesContext } from '../../providers/modules-provider'
 import { VerbCalls } from './VerbCalls'
@@ -10,7 +10,7 @@ interface Props {
 
 export const VerbTab = ({ id }: Props) => {
   const [moduleId, verbName] = id.split('.')
-  const modules = React.useContext(modulesContext)
+  const modules = useContext(modulesContext)
   const module = modules.modules.find((module) => module?.name === moduleId)
   const verb = module?.verbs.find((v) => v.verb?.name === verbName)
 
diff --git a/console/client/src/hooks/use-local-storage.ts b/console/client/src/hooks/use-local-storage.ts
index c1df0fe26a..8085a7b5cd 100644
--- a/console/client/src/hooks/use-local-storage.ts
+++ b/console/client/src/hooks/use-local-storage.ts
@@ -1,16 +1,16 @@
-import React from 'react'
+import React, { useEffect, useState } from 'react'
 
 export default function useLocalStorage(
   key: string,
   initialValue: string,
 ): [string, React.Dispatch<React.SetStateAction<string>>] {
-  const [value, setValue] = React.useState<string>(() => {
+  const [value, setValue] = useState<string>(() => {
     const jsonValue = localStorage.getItem(key)
     if (jsonValue != null) return JSON.parse(jsonValue) as string
     return initialValue
   })
 
-  React.useEffect(() => {
+  useEffect(() => {
     localStorage.setItem(key, JSON.stringify(value))
   }, [key, value])
 
diff --git a/console/client/src/layout/Notification.tsx b/console/client/src/layout/Notification.tsx
index 189c573878..5bee378ab6 100644
--- a/console/client/src/layout/Notification.tsx
+++ b/console/client/src/layout/Notification.tsx
@@ -6,12 +6,12 @@ import {
   ExclamationTriangleIcon,
   InformationCircleIcon,
 } from '@heroicons/react/24/outline'
-import React, { Fragment } from 'react'
+import { Fragment, useContext } from 'react'
 import { NotificationType, NotificationsContext } from '../providers/notifications-provider'
 import { textColor } from '../utils'
 
 export const Notification = () => {
-  const { isOpen, notification, closeNotification } = React.useContext(NotificationsContext)
+  const { isOpen, notification, closeNotification } = useContext(NotificationsContext)
 
   const iconColor = () => {
     switch (notification?.type) {
diff --git a/console/client/src/layout/Page.tsx b/console/client/src/layout/Page.tsx
index fe04f6353d..fc994113c9 100644
--- a/console/client/src/layout/Page.tsx
+++ b/console/client/src/layout/Page.tsx
@@ -60,18 +60,14 @@ const Body: React.FC<{
   )
 }
 
-export const Page: React.FC & {
-  Header: typeof Header
-  Body: typeof Body
-} = ({
-  className,
-  style,
-  children,
-}: {
+export const Page: React.FC<{
   className?: string
   style?: React.CSSProperties
   children?: React.ReactNode
-}) => {
+}> & {
+  Header: typeof Header
+  Body: typeof Body
+} = ({ className, style, children }) => {
   return (
     <div className={classNames(className, 'flex flex-col h-full')} style={style}>
       {children}
diff --git a/console/client/src/providers/dark-mode-provider.tsx b/console/client/src/providers/dark-mode-provider.tsx
index 349d8f2ecd..90adc11a92 100644
--- a/console/client/src/providers/dark-mode-provider.tsx
+++ b/console/client/src/providers/dark-mode-provider.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useContext } from 'react'
 import useLocalStorage from '../hooks/use-local-storage'
 
 const DarkModeContext = React.createContext({
@@ -7,7 +7,7 @@ const DarkModeContext = React.createContext({
 })
 
 export const useDarkMode = () => {
-  return React.useContext(DarkModeContext)
+  return useContext(DarkModeContext)
 }
 
 interface Props {
diff --git a/console/client/src/providers/notifications-provider.tsx b/console/client/src/providers/notifications-provider.tsx
index 4f366368c2..e18bfc6c36 100644
--- a/console/client/src/providers/notifications-provider.tsx
+++ b/console/client/src/providers/notifications-provider.tsx
@@ -1,4 +1,4 @@
-import React, { PropsWithChildren } from 'react'
+import React, { PropsWithChildren, useRef, useState } from 'react'
 
 export enum NotificationType {
   Success,
@@ -29,9 +29,9 @@ const defaultContextValue: NotificationContextType = {
 export const NotificationsContext = React.createContext<NotificationContextType>(defaultContextValue)
 
 export const NotificationsProvider = ({ children }: PropsWithChildren) => {
-  const [isOpen, setIsOpen] = React.useState(false)
-  const [notification, setNotification] = React.useState<Notification>()
-  const timeoutRef = React.useRef<NodeJS.Timeout | null>(null)
+  const [isOpen, setIsOpen] = useState(false)
+  const [notification, setNotification] = useState<Notification>()
+  const timeoutRef = useRef<NodeJS.Timeout | null>(null)
 
   const closeNotification = () => {
     setIsOpen(false)
diff --git a/console/client/src/providers/side-panel-provider.tsx b/console/client/src/providers/side-panel-provider.tsx
index 39702d2b26..2bc89fa87f 100644
--- a/console/client/src/providers/side-panel-provider.tsx
+++ b/console/client/src/providers/side-panel-provider.tsx
@@ -1,4 +1,4 @@
-import React, { PropsWithChildren } from 'react'
+import React, { PropsWithChildren, useState } from 'react'
 import { SidePanel } from '../layout/SidePanel'
 
 interface SidePanelContextType {
@@ -18,9 +18,9 @@ const defaultContextValue: SidePanelContextType = {
 export const SidePanelContext = React.createContext<SidePanelContextType>(defaultContextValue)
 
 export const SidePanelProvider = ({ children }: PropsWithChildren) => {
-  const [isOpen, setIsOpen] = React.useState(false)
-  const [component, setComponent] = React.useState<React.ReactNode>()
-  const [onCloseCallback, setOnCloseCallback] = React.useState<(() => void) | null>(null)
+  const [isOpen, setIsOpen] = useState(false)
+  const [component, setComponent] = useState<React.ReactNode>()
+  const [onCloseCallback, setOnCloseCallback] = useState<(() => void) | null>(null)
 
   const openPanel = React.useCallback((comp: React.ReactNode, onClose?: () => void) => {
     setIsOpen(true)

From 8ade7d38ed9191bedb08dc30ccff304d8862d82f Mon Sep 17 00:00:00 2001
From: Wes <wesbillman@users.noreply.github.com>
Date: Tue, 10 Oct 2023 11:06:56 -0700
Subject: [PATCH 3/4] Clean up args and remove usused code.

---
 console/client/src/features/calls/CallList.tsx |  6 +-----
 .../src/features/modules/ModulesGraph.tsx      |  5 +----
 .../src/features/modules/ModulesPage.tsx       |  2 --
 .../src/features/modules/ModulesRequests.tsx   |  7 ++-----
 .../features/modules/ModulesSelectedVerbs.tsx  | 18 +++++++++++-------
 .../src/features/modules/ModulesSidebar.tsx    |  9 +++++++--
 .../src/features/requests/RequestGraph.tsx     | 11 +++++++----
 .../client/src/features/timeline/Timeline.tsx  |  7 +------
 .../src/features/timeline/TimelineCall.tsx     |  6 +-----
 .../timeline/TimelineDeploymentCreated.tsx     |  6 +-----
 .../timeline/TimelineDeploymentUpdated.tsx     |  6 +-----
 .../src/features/timeline/TimelineIcon.tsx     |  6 +-----
 .../src/features/timeline/TimelineLog.tsx      |  6 +-----
 .../timeline/details/TimelineCallDetails.tsx   |  7 +------
 .../TimelineDeploymentCreatedDetails.tsx       |  9 +++++----
 .../TimelineDeploymentUpdatedDetails.tsx       |  9 +++++----
 .../timeline/details/TimelineLogDetails.tsx    |  7 +------
 .../timeline/filters/FilterPanelSection.tsx    | 10 ++++++----
 .../timeline/filters/LogLevelsFilter.tsx       |  9 +++++----
 .../features/timeline/filters/TimeFilter.tsx   |  9 +++++----
 .../timeline/filters/TimelineFilterPanel.tsx   |  8 ++++----
 .../timeline/filters/TimelineTimeControls.tsx  | 10 ++++++----
 .../client/src/features/verbs/VerbCalls.tsx    |  7 +------
 console/client/src/features/verbs/VerbForm.tsx |  7 +------
 console/client/src/features/verbs/VerbTab.tsx  |  5 +----
 console/client/src/layout/Page.tsx             | 12 ++++++++----
 .../src/providers/dark-mode-provider.tsx       |  8 ++------
 .../client/src/providers/modules-provider.tsx  |  4 ++--
 .../client/src/providers/schema-provider.tsx   | 10 +++-------
 29 files changed, 91 insertions(+), 135 deletions(-)

diff --git a/console/client/src/features/calls/CallList.tsx b/console/client/src/features/calls/CallList.tsx
index 0c3e4d95a5..c2aa53a468 100644
--- a/console/client/src/features/calls/CallList.tsx
+++ b/console/client/src/features/calls/CallList.tsx
@@ -5,11 +5,7 @@ import { formatDuration, formatTimestampShort } from '../../utils'
 import { TimelineCallDetails } from '../timeline/details/TimelineCallDetails'
 import { verbRefString } from '../verbs/verb.utils'
 
-interface Props {
-  calls: CallEvent[] | undefined
-}
-
-export const CallList = ({ calls }: Props) => {
+export const CallList = ({ calls }: { calls: CallEvent[] | undefined }) => {
   const { openPanel, closePanel } = useContext(SidePanelContext)
   const [selectedCall, setSelectedCall] = useState<CallEvent | undefined>()
 
diff --git a/console/client/src/features/modules/ModulesGraph.tsx b/console/client/src/features/modules/ModulesGraph.tsx
index 900c971088..2645dc0677 100644
--- a/console/client/src/features/modules/ModulesGraph.tsx
+++ b/console/client/src/features/modules/ModulesGraph.tsx
@@ -3,13 +3,10 @@ import React, { useContext, useEffect, useRef, useState } from 'react'
 import { modulesContext } from '../../providers/modules-provider'
 import { Panel } from './components'
 import { dotToSVG, formatSVG, generateDot, svgZoom } from './graph'
-import { VerbId, ZoomCallbacks } from './modules.constants'
+import { ZoomCallbacks } from './modules.constants'
 
 export const ModulesGraph: React.FC<{
   className?: string
-  zoomId?: string
-  setSelectedVerbs: React.Dispatch<React.SetStateAction<VerbId[]>>
-  selectedVerbs: VerbId[]
   setZoomCallbacks: React.Dispatch<React.SetStateAction<ZoomCallbacks | undefined>>
   zoomCallbacks?: ZoomCallbacks
 }> = ({ className, setZoomCallbacks, zoomCallbacks }) => {
diff --git a/console/client/src/features/modules/ModulesPage.tsx b/console/client/src/features/modules/ModulesPage.tsx
index 7c04be3b00..b7512be7d0 100644
--- a/console/client/src/features/modules/ModulesPage.tsx
+++ b/console/client/src/features/modules/ModulesPage.tsx
@@ -37,8 +37,6 @@ export const ModulesPage = () => {
             )}
           >
             <ModulesGraph
-              setSelectedVerbs={setSelectedVerbs}
-              selectedVerbs={selectedVerbs}
               setZoomCallbacks={setZoomCallbacks}
               zoomCallbacks={zoomCallbacks}
               className={classNames(hasVerbs && 'row-start-1 row-span-1 col-start-1 col-span-1')}
diff --git a/console/client/src/features/modules/ModulesRequests.tsx b/console/client/src/features/modules/ModulesRequests.tsx
index 6dcbddcb72..6cc6a248de 100644
--- a/console/client/src/features/modules/ModulesRequests.tsx
+++ b/console/client/src/features/modules/ModulesRequests.tsx
@@ -1,5 +1,5 @@
 import { Timestamp } from '@bufbuild/protobuf'
-import React, { useContext, useEffect, useState } from 'react'
+import { useContext, useEffect, useState } from 'react'
 import { useSearchParams } from 'react-router-dom'
 import { Event, EventsQuery_Filter, Module } from '../../protos/xyz/block/ftl/v1/console/console_pb'
 import { SidePanelContext } from '../../providers/side-panel-provider.tsx'
@@ -19,10 +19,7 @@ import { Panel } from './components'
 
 const maxTimelineEntries = 1000
 
-export const ModulesRequests: React.FC<{
-  className?: string
-  modules: Module[]
-}> = ({ className, modules }) => {
+export const ModulesRequests = ({ className, modules }: { className?: string; modules: Module[] }) => {
   const [searchParams, setSearchParams] = useSearchParams()
   const [entries, setEntries] = useState<Event[]>([])
   const { openPanel, closePanel } = useContext(SidePanelContext)
diff --git a/console/client/src/features/modules/ModulesSelectedVerbs.tsx b/console/client/src/features/modules/ModulesSelectedVerbs.tsx
index 1f6c4c1a90..61f4698c93 100644
--- a/console/client/src/features/modules/ModulesSelectedVerbs.tsx
+++ b/console/client/src/features/modules/ModulesSelectedVerbs.tsx
@@ -1,18 +1,22 @@
-import React from 'react'
 import { Tab } from '@headlessui/react'
+import React from 'react'
 import { CodeBlock } from '../../components'
-import { Panel } from './components'
-import { Module, Verb, Data } from '../../protos/xyz/block/ftl/v1/console/console_pb'
-import { VerbId } from './modules.constants'
-import { getNames, buildVerbSchema } from './modules.utils'
+import { Data, Module, Verb } from '../../protos/xyz/block/ftl/v1/console/console_pb'
 import { classNames } from '../../utils'
 import { VerbForm } from '../verbs/VerbForm'
+import { Panel } from './components'
+import { VerbId } from './modules.constants'
+import { buildVerbSchema, getNames } from './modules.utils'
 
-export const ModulesSelectedVerbs: React.FC<{
+export const ModulesSelectedVerbs = ({
+  className,
+  modules,
+  selectedVerbs,
+}: {
   className?: string
   modules: Module[]
   selectedVerbs?: VerbId[]
-}> = ({ className, modules, selectedVerbs }) => {
+}) => {
   if (!selectedVerbs?.length) return <></>
   const verbs: { module: Module; verb: Verb; callData: Data[] }[] = []
   for (const verbId of selectedVerbs) {
diff --git a/console/client/src/features/modules/ModulesSidebar.tsx b/console/client/src/features/modules/ModulesSidebar.tsx
index 42e777e894..1d0f01a144 100644
--- a/console/client/src/features/modules/ModulesSidebar.tsx
+++ b/console/client/src/features/modules/ModulesSidebar.tsx
@@ -14,12 +14,17 @@ interface DeploymentVerbs {
   queriedVerbs: Set<VerbId>
 }
 
-const ModulesOption: React.FC<{
+const ModulesOption = ({
+  id,
+  zoomCallbacks,
+  verbs,
+  deploymentName,
+}: {
   id: string
   verbs: VerbId[]
   deploymentName: string
   zoomCallbacks?: ZoomCallbacks
-}> = ({ id, zoomCallbacks, verbs, deploymentName }) => {
+}) => {
   return (
     <li className={`flex flex-wrap gap-1 ${backgrounds.level1} ${borders.level1}`}>
       <div className={`w-1 bg-${colors.deployment}`}></div>
diff --git a/console/client/src/features/requests/RequestGraph.tsx b/console/client/src/features/requests/RequestGraph.tsx
index 83185ddd35..152a6172bb 100644
--- a/console/client/src/features/requests/RequestGraph.tsx
+++ b/console/client/src/features/requests/RequestGraph.tsx
@@ -2,14 +2,17 @@ import { Duration, Timestamp } from '@bufbuild/protobuf'
 import { CallEvent } from '../../protos/xyz/block/ftl/v1/console/console_pb'
 import { verbRefString } from '../verbs/verb.utils'
 
-interface CallBlockProps {
+const CallBlock = ({
+  call,
+  selectedCall,
+  firstTimeStamp,
+  firstDuration,
+}: {
   call: CallEvent
   selectedCall?: CallEvent
   firstTimeStamp: Timestamp
   firstDuration: Duration
-}
-
-const CallBlock = ({ call, selectedCall, firstTimeStamp, firstDuration }: CallBlockProps) => {
+}) => {
   const totalDurationMillis = (firstDuration.nanos ?? 0) / 1000000
   const durationInMillis = (call.duration?.nanos ?? 0) / 1000000
   let width = (durationInMillis / totalDurationMillis) * 100
diff --git a/console/client/src/features/timeline/Timeline.tsx b/console/client/src/features/timeline/Timeline.tsx
index e63fe1a454..52479164b0 100644
--- a/console/client/src/features/timeline/Timeline.tsx
+++ b/console/client/src/features/timeline/Timeline.tsx
@@ -18,14 +18,9 @@ import { TimelineDeploymentUpdatedDetails } from './details/TimelineDeploymentUp
 import { TimelineLogDetails } from './details/TimelineLogDetails.tsx'
 import { TimeSettings } from './filters/TimelineTimeControls.tsx'
 
-interface Props {
-  timeSettings: TimeSettings
-  filters: EventsQuery_Filter[]
-}
-
 const maxTimelineEntries = 1000
 
-export const Timeline = ({ timeSettings, filters }: Props) => {
+export const Timeline = ({ timeSettings, filters }: { timeSettings: TimeSettings; filters: EventsQuery_Filter[] }) => {
   const [searchParams, setSearchParams] = useSearchParams()
   const { openPanel, closePanel, isOpen } = useContext(SidePanelContext)
   const [entries, setEntries] = useState<Event[]>([])
diff --git a/console/client/src/features/timeline/TimelineCall.tsx b/console/client/src/features/timeline/TimelineCall.tsx
index 4c8e73b307..34851fe2a2 100644
--- a/console/client/src/features/timeline/TimelineCall.tsx
+++ b/console/client/src/features/timeline/TimelineCall.tsx
@@ -1,11 +1,7 @@
 import { CallEvent } from '../../protos/xyz/block/ftl/v1/console/console_pb'
 import { verbRefString } from '../verbs/verb.utils'
 
-interface Props {
-  call: CallEvent
-}
-
-export const TimelineCall = ({ call }: Props) => {
+export const TimelineCall = ({ call }: { call: CallEvent }) => {
   return (
     <span>
       {call.sourceVerbRef?.module && (
diff --git a/console/client/src/features/timeline/TimelineDeploymentCreated.tsx b/console/client/src/features/timeline/TimelineDeploymentCreated.tsx
index 3b5df4aecb..85058b8d65 100644
--- a/console/client/src/features/timeline/TimelineDeploymentCreated.tsx
+++ b/console/client/src/features/timeline/TimelineDeploymentCreated.tsx
@@ -1,10 +1,6 @@
 import { DeploymentCreatedEvent } from '../../protos/xyz/block/ftl/v1/console/console_pb'
 
-interface Props {
-  deployment: DeploymentCreatedEvent
-}
-
-export const TimelineDeploymentCreated = ({ deployment }: Props) => {
+export const TimelineDeploymentCreated = ({ deployment }: { deployment: DeploymentCreatedEvent }) => {
   return (
     <>
       Created deployment <span className='text-indigo-500 dark:text-indigo-300'>{deployment.name}</span> for language{' '}
diff --git a/console/client/src/features/timeline/TimelineDeploymentUpdated.tsx b/console/client/src/features/timeline/TimelineDeploymentUpdated.tsx
index 2d30699370..44ba850b97 100644
--- a/console/client/src/features/timeline/TimelineDeploymentUpdated.tsx
+++ b/console/client/src/features/timeline/TimelineDeploymentUpdated.tsx
@@ -1,10 +1,6 @@
 import { DeploymentUpdatedEvent } from '../../protos/xyz/block/ftl/v1/console/console_pb'
 
-interface Props {
-  deployment: DeploymentUpdatedEvent
-}
-
-export const TimelineDeploymentUpdated = ({ deployment }: Props) => {
+export const TimelineDeploymentUpdated = ({ deployment }: { deployment: DeploymentUpdatedEvent }) => {
   return (
     <>
       Updated deployment <span className='text-indigo-500 dark:text-indigo-300'>{deployment.name}</span> min replicas to{' '}
diff --git a/console/client/src/features/timeline/TimelineIcon.tsx b/console/client/src/features/timeline/TimelineIcon.tsx
index de65e867bb..6b8a05c9d9 100644
--- a/console/client/src/features/timeline/TimelineIcon.tsx
+++ b/console/client/src/features/timeline/TimelineIcon.tsx
@@ -2,11 +2,7 @@ import { ListBulletIcon, PhoneArrowDownLeftIcon, PhoneIcon, RocketLaunchIcon } f
 import { Event } from '../../protos/xyz/block/ftl/v1/console/console_pb'
 import { LogLevelBadgeSmall } from '../logs/LogLevelBadgeSmall'
 
-interface Props {
-  event: Event
-}
-
-export const TimelineIcon = ({ event }: Props) => {
+export const TimelineIcon = ({ event }: { event: Event }) => {
   const icon = (event: Event) => {
     const style = 'h4 w-4 text-indigo-600'
     switch (event.entry.case) {
diff --git a/console/client/src/features/timeline/TimelineLog.tsx b/console/client/src/features/timeline/TimelineLog.tsx
index ec7cab5419..5fb4127c19 100644
--- a/console/client/src/features/timeline/TimelineLog.tsx
+++ b/console/client/src/features/timeline/TimelineLog.tsx
@@ -1,9 +1,5 @@
 import { LogEvent } from '../../protos/xyz/block/ftl/v1/console/console_pb'
 
-interface Props {
-  log: LogEvent
-}
-
-export const TimelineLog = ({ log }: Props) => {
+export const TimelineLog = ({ log }: { log: LogEvent }) => {
   return <span>{log.message}</span>
 }
diff --git a/console/client/src/features/timeline/details/TimelineCallDetails.tsx b/console/client/src/features/timeline/details/TimelineCallDetails.tsx
index 10c075d198..45b99847de 100644
--- a/console/client/src/features/timeline/details/TimelineCallDetails.tsx
+++ b/console/client/src/features/timeline/details/TimelineCallDetails.tsx
@@ -15,12 +15,7 @@ import { RequestGraph } from '../../requests/RequestGraph'
 import { verbRefString } from '../../verbs/verb.utils'
 import { TimelineTimestamp } from './TimelineTimestamp'
 
-interface Props {
-  timestamp: Timestamp
-  call: CallEvent
-}
-
-export const TimelineCallDetails = ({ timestamp, call }: Props) => {
+export const TimelineCallDetails = ({ timestamp, call }: { timestamp: Timestamp; call: CallEvent }) => {
   const client = useClient(ConsoleService)
   const navigate = useNavigate()
   const { closePanel } = useContext(SidePanelContext)
diff --git a/console/client/src/features/timeline/details/TimelineDeploymentCreatedDetails.tsx b/console/client/src/features/timeline/details/TimelineDeploymentCreatedDetails.tsx
index ebc10210e6..0e93de7807 100644
--- a/console/client/src/features/timeline/details/TimelineDeploymentCreatedDetails.tsx
+++ b/console/client/src/features/timeline/details/TimelineDeploymentCreatedDetails.tsx
@@ -8,12 +8,13 @@ import { DeploymentCreatedEvent, Event } from '../../../protos/xyz/block/ftl/v1/
 import { SidePanelContext } from '../../../providers/side-panel-provider'
 import { TimelineTimestamp } from './TimelineTimestamp'
 
-interface Props {
+export const TimelineDeploymentCreatedDetails = ({
+  event,
+  deployment,
+}: {
   event: Event
   deployment: DeploymentCreatedEvent
-}
-
-export const TimelineDeploymentCreatedDetails = ({ event, deployment }: Props) => {
+}) => {
   const { closePanel } = useContext(SidePanelContext)
   const navigate = useNavigate()
 
diff --git a/console/client/src/features/timeline/details/TimelineDeploymentUpdatedDetails.tsx b/console/client/src/features/timeline/details/TimelineDeploymentUpdatedDetails.tsx
index 5d88256e1d..18689fa0aa 100644
--- a/console/client/src/features/timeline/details/TimelineDeploymentUpdatedDetails.tsx
+++ b/console/client/src/features/timeline/details/TimelineDeploymentUpdatedDetails.tsx
@@ -8,12 +8,13 @@ import { DeploymentUpdatedEvent, Event } from '../../../protos/xyz/block/ftl/v1/
 import { SidePanelContext } from '../../../providers/side-panel-provider'
 import { TimelineTimestamp } from './TimelineTimestamp'
 
-interface Props {
+export const TimelineDeploymentUpdatedDetails = ({
+  event,
+  deployment,
+}: {
   event: Event
   deployment: DeploymentUpdatedEvent
-}
-
-export const TimelineDeploymentUpdatedDetails = ({ event, deployment }: Props) => {
+}) => {
   const { closePanel } = useContext(SidePanelContext)
   const navigate = useNavigate()
 
diff --git a/console/client/src/features/timeline/details/TimelineLogDetails.tsx b/console/client/src/features/timeline/details/TimelineLogDetails.tsx
index 568790e4e4..267fc15c6c 100644
--- a/console/client/src/features/timeline/details/TimelineLogDetails.tsx
+++ b/console/client/src/features/timeline/details/TimelineLogDetails.tsx
@@ -12,12 +12,7 @@ import { LogLevelBadge } from '../../logs/LogLevelBadge'
 import { logLevelBgColor } from '../../logs/log.utils'
 import { TimelineTimestamp } from './TimelineTimestamp'
 
-interface Props {
-  event: Event
-  log: LogEvent
-}
-
-export const TimelineLogDetails = ({ event, log }: Props) => {
+export const TimelineLogDetails = ({ event, log }: { event: Event; log: LogEvent }) => {
   const { closePanel } = useContext(SidePanelContext)
   const navigate = useNavigate()
 
diff --git a/console/client/src/features/timeline/filters/FilterPanelSection.tsx b/console/client/src/features/timeline/filters/FilterPanelSection.tsx
index 782eeae8df..3c91898945 100644
--- a/console/client/src/features/timeline/filters/FilterPanelSection.tsx
+++ b/console/client/src/features/timeline/filters/FilterPanelSection.tsx
@@ -2,13 +2,15 @@ import { Disclosure } from '@headlessui/react'
 import { ChevronUpIcon } from '@heroicons/react/20/solid'
 import { textColor } from '../../../utils'
 
-interface Props {
+export const FilterPanelSection = ({
+  title,
+  children,
+  defaultOpen = true,
+}: {
   title: string
   children: React.ReactNode
   defaultOpen?: boolean
-}
-
-export const FilterPanelSection = ({ title, children, defaultOpen = true }: Props) => {
+}) => {
   return (
     <Disclosure defaultOpen={defaultOpen}>
       {({ open }) => (
diff --git a/console/client/src/features/timeline/filters/LogLevelsFilter.tsx b/console/client/src/features/timeline/filters/LogLevelsFilter.tsx
index 741a7af258..09bb2b2bde 100644
--- a/console/client/src/features/timeline/filters/LogLevelsFilter.tsx
+++ b/console/client/src/features/timeline/filters/LogLevelsFilter.tsx
@@ -6,12 +6,13 @@ import { logLevelText } from '../../logs/log.utils'
 
 const logLevels = [1, 5, 9, 13, 17]
 
-interface Props {
+export const LogLevelsFilter = ({
+  selectedLogLevels,
+  onLogLevelsChanged,
+}: {
   selectedLogLevels: number[]
   onLogLevelsChanged: (logLevel: number, checked: boolean) => void
-}
-
-export const LogLevelsFilter = ({ selectedLogLevels, onLogLevelsChanged }: Props) => {
+}) => {
   return (
     <Popover.Group className='hidden sm:flex sm:items-baseline sm:space-x-8'>
       <Popover as='div' key='log-levels' id={`desktop-menu-log-levels`} className='relative inline-block text-left'>
diff --git a/console/client/src/features/timeline/filters/TimeFilter.tsx b/console/client/src/features/timeline/filters/TimeFilter.tsx
index d462bd22ed..e4a235cb66 100644
--- a/console/client/src/features/timeline/filters/TimeFilter.tsx
+++ b/console/client/src/features/timeline/filters/TimeFilter.tsx
@@ -15,12 +15,13 @@ export const TIME_RANGES: Record<string, TimeRange> = {
   '24h': { label: 'Last 24 hours', value: 24 * 60 * 60 * 1000 },
 }
 
-interface Props {
+export const TimeFilter = ({
+  selectedRange,
+  onSelectedRangeChanged,
+}: {
   selectedRange: string
   onSelectedRangeChanged: (range: string) => void
-}
-
-export const TimeFilter = ({ selectedRange, onSelectedRangeChanged }: Props) => {
+}) => {
   return (
     <Popover.Group className='hidden sm:flex sm:items-baseline sm:space-x-8'>
       <Popover as='div' key='log-levels' id={`desktop-menu-log-levels`} className='relative inline-block text-left'>
diff --git a/console/client/src/features/timeline/filters/TimelineFilterPanel.tsx b/console/client/src/features/timeline/filters/TimelineFilterPanel.tsx
index 4c727daf80..e571f66d13 100644
--- a/console/client/src/features/timeline/filters/TimelineFilterPanel.tsx
+++ b/console/client/src/features/timeline/filters/TimelineFilterPanel.tsx
@@ -37,11 +37,11 @@ const LOG_LEVELS: Record<number, string> = {
   17: 'Error',
 }
 
-interface Props {
+export const TimelineFilterPanel = ({
+  onFiltersChanged,
+}: {
   onFiltersChanged: (filters: EventsQuery_Filter[]) => void
-}
-
-export const TimelineFilterPanel = ({ onFiltersChanged }: Props) => {
+}) => {
   const modules = useContext(modulesContext)
   const [selectedEventTypes, setSelectedEventTypes] = useState<string[]>(Object.keys(EVENT_TYPES))
   const [selectedModules, setSelectedModules] = useState<string[]>([])
diff --git a/console/client/src/features/timeline/filters/TimelineTimeControls.tsx b/console/client/src/features/timeline/filters/TimelineTimeControls.tsx
index 82119b872d..88963d3022 100644
--- a/console/client/src/features/timeline/filters/TimelineTimeControls.tsx
+++ b/console/client/src/features/timeline/filters/TimelineTimeControls.tsx
@@ -40,13 +40,15 @@ export interface TimeSettings {
   newerThan?: Timestamp
 }
 
-interface Props {
+export const TimelineTimeControls = ({
+  onTimeSettingsChange,
+  selectedTimeRange,
+  isTimelinePaused,
+}: {
   onTimeSettingsChange: (settings: TimeSettings) => void
   selectedTimeRange: TimeRange
   isTimelinePaused: boolean
-}
-
-export const TimelineTimeControls = ({ onTimeSettingsChange, selectedTimeRange, isTimelinePaused }: Props) => {
+}) => {
   const [selected, setSelected] = useState(selectedTimeRange)
   const [isPaused, setIsPaused] = useState(isTimelinePaused)
   const [newerThan, setNewerThan] = useState<Timestamp | undefined>()
diff --git a/console/client/src/features/verbs/VerbCalls.tsx b/console/client/src/features/verbs/VerbCalls.tsx
index 90c50e7df3..32da234902 100644
--- a/console/client/src/features/verbs/VerbCalls.tsx
+++ b/console/client/src/features/verbs/VerbCalls.tsx
@@ -8,12 +8,7 @@ import { getCalls } from '../../services/console.service.ts'
 import { formatDuration, formatTimestamp } from '../../utils/date.utils.ts'
 import { TimelineCallDetails } from '../timeline/details/TimelineCallDetails.tsx'
 
-interface Props {
-  module?: Module
-  verb?: Verb
-}
-
-export const VerbCalls = ({ module, verb }: Props) => {
+export const VerbCalls = ({ module, verb }: { module?: Module; verb?: Verb }) => {
   const client = useClient(ConsoleService)
   const [calls, setCalls] = useState<CallEvent[]>([])
   const { openPanel } = useContext(SidePanelContext)
diff --git a/console/client/src/features/verbs/VerbForm.tsx b/console/client/src/features/verbs/VerbForm.tsx
index 31dc226609..7f5b49dca4 100644
--- a/console/client/src/features/verbs/VerbForm.tsx
+++ b/console/client/src/features/verbs/VerbForm.tsx
@@ -13,12 +13,7 @@ import { useDarkMode } from '../../providers/dark-mode-provider'
 
 export type Schema = JSONSchema4 | JSONSchema6 | JSONSchema7
 
-interface Props {
-  module?: Module
-  verb?: Verb
-}
-
-export const VerbForm = ({ module, verb }: Props) => {
+export const VerbForm = ({ module, verb }: { module?: Module; verb?: Verb }) => {
   const client = useClient(VerbService)
   const { isDarkMode } = useDarkMode()
   const [editorText, setEditorText] = useState<string>('')
diff --git a/console/client/src/features/verbs/VerbTab.tsx b/console/client/src/features/verbs/VerbTab.tsx
index 313fd07809..9f1e65ca5d 100644
--- a/console/client/src/features/verbs/VerbTab.tsx
+++ b/console/client/src/features/verbs/VerbTab.tsx
@@ -4,11 +4,8 @@ import { modulesContext } from '../../providers/modules-provider'
 import { VerbCalls } from './VerbCalls'
 import { VerbForm } from './VerbForm'
 import { buildVerbSchema } from './verb.utils'
-interface Props {
-  id: string
-}
 
-export const VerbTab = ({ id }: Props) => {
+export const VerbTab = ({ id }: { id: string }) => {
   const [moduleId, verbName] = id.split('.')
   const modules = useContext(modulesContext)
   const module = modules.modules.find((module) => module?.name === moduleId)
diff --git a/console/client/src/layout/Page.tsx b/console/client/src/layout/Page.tsx
index fc994113c9..7bec05395e 100644
--- a/console/client/src/layout/Page.tsx
+++ b/console/client/src/layout/Page.tsx
@@ -7,15 +7,19 @@ interface Breadcrumb {
   link?: string
 }
 
-interface Props {
+const Header = ({
+  icon,
+  title,
+  children,
+  breadcrumbs,
+  className,
+}: {
   icon?: React.ReactNode
   title: string
   children?: React.ReactNode
   breadcrumbs?: Breadcrumb[]
   className?: string
-}
-
-const Header = ({ icon, title, children, breadcrumbs, className }: Props) => {
+}) => {
   return (
     <div
       className={classNames(
diff --git a/console/client/src/providers/dark-mode-provider.tsx b/console/client/src/providers/dark-mode-provider.tsx
index 90adc11a92..8f8784311f 100644
--- a/console/client/src/providers/dark-mode-provider.tsx
+++ b/console/client/src/providers/dark-mode-provider.tsx
@@ -1,4 +1,4 @@
-import React, { useContext } from 'react'
+import React, { PropsWithChildren, useContext } from 'react'
 import useLocalStorage from '../hooks/use-local-storage'
 
 const DarkModeContext = React.createContext({
@@ -10,11 +10,7 @@ export const useDarkMode = () => {
   return useContext(DarkModeContext)
 }
 
-interface Props {
-  children: React.ReactNode
-}
-
-export const DarkModeProvider = ({ children }: Props) => {
+export const DarkModeProvider = ({ children }: PropsWithChildren) => {
   const [isDarkMode, setDarkMode] = useLocalStorage('dark-mode', 'false')
   const setMode = (val: boolean) => {
     setDarkMode(`${val}`)
diff --git a/console/client/src/providers/modules-provider.tsx b/console/client/src/providers/modules-provider.tsx
index adcea60502..d776321a34 100644
--- a/console/client/src/providers/modules-provider.tsx
+++ b/console/client/src/providers/modules-provider.tsx
@@ -7,7 +7,7 @@ import { schemaContext } from './schema-provider'
 
 export const modulesContext = createContext<GetModulesResponse>(new GetModulesResponse())
 
-export const ModulesProvider = (props: PropsWithChildren) => {
+export const ModulesProvider = ({ children }: PropsWithChildren) => {
   const schema = useContext(schemaContext)
   const client = useClient(ConsoleService)
   const [modules, setModules] = useState<GetModulesResponse>(new GetModulesResponse())
@@ -37,5 +37,5 @@ export const ModulesProvider = (props: PropsWithChildren) => {
     }
   }, [client, schema])
 
-  return <modulesContext.Provider value={modules}>{props.children}</modulesContext.Provider>
+  return <modulesContext.Provider value={modules}>{children}</modulesContext.Provider>
 }
diff --git a/console/client/src/providers/schema-provider.tsx b/console/client/src/providers/schema-provider.tsx
index a8dad6b228..78b54ad43c 100644
--- a/console/client/src/providers/schema-provider.tsx
+++ b/console/client/src/providers/schema-provider.tsx
@@ -1,15 +1,11 @@
-import { createContext, useEffect, useState } from 'react'
+import { PropsWithChildren, createContext, useEffect, useState } from 'react'
 import { useClient } from '../hooks/use-client'
 import { ControllerService } from '../protos/xyz/block/ftl/v1/ftl_connect.ts'
 import { DeploymentChangeType, PullSchemaResponse } from '../protos/xyz/block/ftl/v1/ftl_pb'
 
 export const schemaContext = createContext<PullSchemaResponse[]>([])
 
-interface Props {
-  children: React.ReactNode
-}
-
-export const SchemaProvider = (props: Props) => {
+export const SchemaProvider = ({ children }: PropsWithChildren) => {
   const client = useClient(ControllerService)
   const [schema, setSchema] = useState<PullSchemaResponse[]>([])
 
@@ -47,5 +43,5 @@ export const SchemaProvider = (props: Props) => {
     }
   }, [client])
 
-  return <schemaContext.Provider value={schema}>{props.children}</schemaContext.Provider>
+  return <schemaContext.Provider value={schema}>{children}</schemaContext.Provider>
 }

From 5fe4419c9856623a0ab9ffac48bd71286fc92a2a Mon Sep 17 00:00:00 2001
From: "github-actions[bot]" <github-actions[bot]@users.noreply.github.com>
Date: Tue, 10 Oct 2023 18:08:55 +0000
Subject: [PATCH 4/4] chore(autofmt): Automated formatting

---
 console/client/tsconfig.json | 12 +++---------
 1 file changed, 3 insertions(+), 9 deletions(-)

diff --git a/console/client/tsconfig.json b/console/client/tsconfig.json
index 5b46fe6661..a0cae67058 100644
--- a/console/client/tsconfig.json
+++ b/console/client/tsconfig.json
@@ -2,11 +2,7 @@
   "compilerOptions": {
     "target": "ES2021",
     "useDefineForClassFields": true,
-    "lib": [
-      "ES2021",
-      "DOM",
-      "DOM.Iterable"
-    ],
+    "lib": ["ES2021", "DOM", "DOM.Iterable"],
     "skipLibCheck": true,
     "esModuleInterop": true,
     "allowSyntheticDefaultImports": true,
@@ -21,9 +17,7 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "react-jsx",
+    "jsx": "react-jsx"
   },
-  "include": [
-    "src/**/*"
-  ]
+  "include": ["src/**/*"]
 }