feat: add tanstack query to frontend

frontend/.eslintrc.cjs

@@ -0,0 +1,80 @@
+module.exports = {
+  env: {
+    browser: true,
+    es2021: true,
+  },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react/recommended',
+    'plugin:storybook/recommended',
+  ],
+  overrides: [
+    {
+      env: {
+        node: true,
+      },
+      files: ['.eslintrc.{js,cjs}'],
+      parserOptions: {
+        sourceType: 'script',
+      },
+    },
+  ],
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+  },
+  plugins: ['@typescript-eslint', 'react'],
+  rules: {
+    'semi': ['error', 'never'],
+    'quotes': ['error', 'single', { 'avoidEscape': true, 'allowTemplateLiterals': true }],
+    'jsx-quotes': ['error', 'prefer-single'],
+    'no-trailing-spaces': 'error',
+    'no-multiple-empty-lines': ['error', { 'max': 1, 'maxEOF': 0, 'maxBOF': 0 }],
+    'eol-last': ['error', 'always'],
+    'max-len': ['error', { 'code': 120, 'tabWidth': 4, 'ignoreUrls': true, 'ignoreComments': false, 'ignoreRegExpLiterals': true, 'ignoreStrings': true, 'ignoreTemplateLiterals': true }],
+    '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': [
+      'error',
+      {
+        'ts-ignore': 'allow-with-description',
+      },
+    ],
+    'indent': ['error', 2, {
+      'SwitchCase': 1,
+      'VariableDeclarator': 1,
+      'outerIIFEBody': 1,
+      'MemberExpression': 1,
+      'FunctionDeclaration': {
+        'parameters': 1,
+        'body': 1,
+      },
+      'FunctionExpression': {
+        'parameters': 1,
+        'body': 1,
+      },
+      'CallExpression': {
+        'arguments': 1,
+      },
+      'ArrayExpression': 1,
+      'ObjectExpression': 1,
+      'ImportDeclaration': 1,
+      'flatTernaryExpressions': false,
+      'ignoreComments': false,
+    }],
+    'react/jsx-indent': ['error', 2],
+    'react/jsx-indent-props': ['error', 2],
+    'no-multi-spaces': ['error'],
+  },
+  settings: {
+    react: {
+      version: 'detect',
+    },
+  },
+}

frontend/package.json

@@ -30,6 +30,8 @@
     "@headlessui/react": "2.1.2",
     "@heroicons/react": "2.1.5",
     "@tailwindcss/forms": "^0.5.6",
+    "@tanstack/react-query": "^5.51.23",
+    "@tanstack/react-query-devtools": "^5.51.23",
     "@uiw/codemirror-theme-atomone": "^4.22.0",
     "@uiw/codemirror-theme-github": "^4.22.0",
     "@vitejs/plugin-react": "^4.0.4",
@@ -59,6 +61,7 @@
     "@storybook/react": "^8.2.7",
     "@storybook/react-vite": "^8.2.7",
     "@storybook/test": "^8.2.7",
+    "@tanstack/eslint-plugin-query": "^5.51.15",
     "@types/react": "18.3.3",
     "@types/react-dom": "18.3.0",
     "buffer": "^6.0.3",

frontend/src/App.tsx

@@ -1,25 +1,5 @@
-import { Navigate, Route, Routes } from 'react-router-dom'
-import { ConsolePage } from './features/console/ConsolePage.tsx'
-import { DeploymentPage } from './features/deployments/DeploymentPage.tsx'
-import { DeploymentsPage } from './features/deployments/DeploymentsPage.tsx'
-import { TimelinePage } from './features/timeline/TimelinePage.tsx'
-import { VerbPage } from './features/verbs/VerbPage.tsx'
-import { Layout } from './layout/Layout.tsx'
-import { NotFoundPage } from './layout/NotFoundPage.tsx'
+import { AppProvider } from './providers/app-providers.tsx'
 
 export const App = () => {
-  return (
-    <Routes>
-      <Route path='/' element={<Layout />}>
-        <Route path='/' element={<Navigate to='events' replace />} />
-        <Route path='events' element={<TimelinePage />} />
-
-        <Route path='deployments' element={<DeploymentsPage />} />
-        <Route path='deployments/:deploymentKey' element={<DeploymentPage />} />
-        <Route path='deployments/:deploymentKey/verbs/:verbName' element={<VerbPage />} />
-        <Route path='console' element={<ConsolePage />} />
-      </Route>
-      <Route path='*' element={<NotFoundPage />} />
-    </Routes>
-  )
+  return <AppProvider />
 }

frontend/src/api/modules/use-modules.ts

@@ -0,0 +1,45 @@
+import { ConsoleService } from '../../protos/xyz/block/ftl/v1/console/console_connect'
+import { GetModulesResponse } from '../../protos/xyz/block/ftl/v1/console/console_pb'
+
+import { Code, ConnectError } from '@connectrpc/connect'
+import { useClient } from '../../hooks/use-client'
+
+const fetchModules = async (client: ConsoleService, isVisible: boolean): Promise<GetModulesResponse> => {
+  if (!isVisible) {
+    throw new Error('Component is not visible')
+  }
+
+  const abortController = new AbortController()
+
+  try {
+    const modules = await client.getModules({}, { signal: abortController.signal })
+    return modules ?? []
+  } catch (error) {
+    if (error instanceof ConnectError) {
+      if (error.code !== Code.Canceled) {
+        console.error('fetchModules - Connect error:', error)
+      }
+    } else {
+      console.error('fetchModules:', error)
+    }
+    throw error
+  } finally {
+    abortController.abort()
+  }
+}
+
+export const useModules = () => {
+  const client = useClient(ConsoleService)
+  const isVisible = useVisibility()
+  const schema = useSchema()
+
+  return useQuery<GetModulesResponse>(
+    ['modules', schema, isVisible], // The query key, include schema and isVisible as dependencies
+    () => fetchModules(client, isVisible),
+    {
+      enabled: isVisible, // Only run the query when the component is visible
+      refetchOnWindowFocus: false, // Optional: Disable refetching on window focus
+      staleTime: 1000 * 60 * 5, // Optional: Cache data for 5 minutes
+    }
+  )
+}

frontend/src/hooks/use-schema.ts → frontend/src/api/schema/use-schema.ts

@@ -1,9 +1,9 @@
 import { Code, ConnectError } from '@connectrpc/connect'
 import { useEffect, useState } from 'react'
-import { useClient } from '../hooks/use-client'
-import { useVisibility } from '../hooks/use-visibility.ts'
-import { ControllerService } from '../protos/xyz/block/ftl/v1/ftl_connect.ts'
-import { DeploymentChangeType, type PullSchemaResponse } from '../protos/xyz/block/ftl/v1/ftl_pb'
+import { useClient } from '../../hooks/use-client.ts'
+import { useVisibility } from '../../hooks/use-visibility.ts'
+import { ControllerService } from '../../protos/xyz/block/ftl/v1/ftl_connect.ts'
+import { DeploymentChangeType, type PullSchemaResponse } from '../../protos/xyz/block/ftl/v1/ftl_pb.ts'
 
 export const useSchema = () => {
   const client = useClient(ControllerService)
@@ -28,6 +28,7 @@ export const useSchema = () => {
           },
         )) {
           const moduleName = response.moduleName ?? ''
+          console.log(`${response.changeType} ${moduleName}`)
           switch (response.changeType) {
             case DeploymentChangeType.DEPLOYMENT_ADDED:
               schemaMap.set(moduleName, response)

frontend/src/components/CodeEditor.tsx

@@ -14,7 +14,7 @@ import { defaultKeymap } from '@codemirror/commands'
 import { handleRefresh, jsonSchemaHover, jsonSchemaLinter, stateExtensions } from 'codemirror-json-schema'
 import { json5, json5ParseLinter } from 'codemirror-json5'
 import { useCallback, useEffect, useRef } from 'react'
-import { useDarkMode } from '../providers/dark-mode-provider'
+import { useDarkMode } from '../hooks/use-dark-mode'
 
 const commonExtensions = [
   gutter({ class: 'CodeMirror-lint-markers' }),