feat: create new module decl panels and layout

frontend/console/src/features/console/ConsolePage.tsx

@@ -5,9 +5,9 @@ import { Loader } from '../../components/Loader'
 import { ResizablePanels } from '../../components/ResizablePanels'
 import { Config, Module, Secret, Verb } from '../../protos/xyz/block/ftl/v1/console/console_pb'
 import { type FTLNode, GraphPane } from '../graph/GraphPane'
+import { configPanels } from '../modules/decls/config/ConfigRightPanels'
 import { Timeline } from '../timeline/Timeline'
 import type { ExpandablePanelProps } from './ExpandablePanel'
-import { configPanels } from './right-panel/ConfigPanels'
 import { modulePanels } from './right-panel/ModulePanels'
 import { headerForNode } from './right-panel/RightPanelHeader'
 import { secretPanels } from './right-panel/SecretPanels'

frontend/console/src/features/graph/create-layout.ts

@@ -1,6 +1,6 @@
 import type { Edge, Node } from 'reactflow'
 import type { Module, Topology } from '../../protos/xyz/block/ftl/v1/console/console_pb'
-import { verbCalls } from '../verbs/verb.utils'
+import { verbCalls } from '../modules/decls/verb/verb.utils'
 import { configHeight } from './ConfigNode'
 import { groupPadding } from './GroupNode'
 import { secretHeight } from './SecretNode'

frontend/console/src/features/modules/decls/DeclDefaultPanels.tsx

@@ -9,6 +9,7 @@ export const DeclDefaultPanels = (schema: string, references: Ref[]) => {
   panels.push({
     title: 'Schema',
     expanded: true,
+    padding: 'p-2',
     children: <Schema schema={schema} />,
   })
 

frontend/console/src/features/modules/decls/DeclPanel.tsx

@@ -2,17 +2,17 @@ import { useMemo } from 'react'
 import { useParams } from 'react-router-dom'
 import { useStreamModules } from '../../../api/modules/use-stream-modules'
 import type { Config, Data, Database, Enum, Secret, Subscription, Topic, TypeAlias } from '../../../protos/xyz/block/ftl/v1/console/console_pb'
-import { VerbPage } from '../../verbs/VerbPage'
 import { declFromModules } from '../module.utils'
 import { declSchemaFromModules } from '../schema/schema.utils'
-import { ConfigPanel } from './ConfigPanel'
-import { DataPanel } from './DataPanel'
-import { DatabasePanel } from './DatabasePanel'
-import { EnumPanel } from './EnumPanel'
-import { SecretPanel } from './SecretPanel'
-import { SubscriptionPanel } from './SubscriptionPanel'
-import { TopicPanel } from './TopicPanel'
-import { TypeAliasPanel } from './TypeAliasPanel'
+import { ConfigPanel } from './config/ConfigPanel'
+import { DataPanel } from './data/DataPanel'
+import { DatabasePanel } from './database/DatabasePanel'
+import { EnumPanel } from './enum/EnumPanel'
+import { SecretPanel } from './secret/SecretPanel'
+import { SubscriptionPanel } from './subscription/SubscriptionPanel'
+import { TopicPanel } from './topic/TopicPanel'
+import { TypeAliasPanel } from './typealias/TypeAliasPanel'
+import { VerbPage } from './verb/VerbPage'
 
 export const DeclPanel = () => {
   const { moduleName, declCase, declName } = useParams()

frontend/console/src/features/modules/decls/RightPanelHeader.tsx

@@ -0,0 +1,8 @@
+export const RightPanelHeader = ({ Icon, title }: { Icon?: React.ElementType; title?: string }) => {
+  return (
+    <div className='flex items-center gap-2 px-2 py-2'>
+      {Icon && <Icon className='h-5 w-5 text-indigo-600' />}
+      {title && <div className='flex flex-col min-w-0'>{title}</div>}
+    </div>
+  )
+}

frontend/console/src/features/modules/decls/ConfigPanel.tsx → frontend/console/src/features/modules/decls/config/ConfigPanel.tsx

@@ -1,13 +1,16 @@
 import { useContext, useEffect, useState } from 'react'
-import { Button } from '../../../components/Button'
-import { CodeEditor } from '../../../components/CodeEditor'
-import { ResizablePanels } from '../../../components/ResizablePanels'
-import { useClient } from '../../../hooks/use-client'
-import { ConsoleService } from '../../../protos/xyz/block/ftl/v1/console/console_connect'
-import type { Config } from '../../../protos/xyz/block/ftl/v1/console/console_pb'
-import { NotificationType, NotificationsContext } from '../../../providers/notifications-provider'
-import { DeclDefaultPanels } from './DeclDefaultPanels'
-import { PanelHeader } from './PanelHeader'
+import { Button } from '../../../../components/Button'
+import { CodeEditor } from '../../../../components/CodeEditor'
+import { ResizablePanels } from '../../../../components/ResizablePanels'
+import { useClient } from '../../../../hooks/use-client'
+import { ConsoleService } from '../../../../protos/xyz/block/ftl/v1/console/console_connect'
+import type { Config } from '../../../../protos/xyz/block/ftl/v1/console/console_pb'
+import { NotificationType, NotificationsContext } from '../../../../providers/notifications-provider'
+import { declIcon } from '../../module.utils'
+import { DeclDefaultPanels } from '../DeclDefaultPanels'
+import { PanelHeader } from '../PanelHeader'
+import { RightPanelHeader } from '../RightPanelHeader'
+import { configPanels } from './ConfigRightPanels'
 
 export const ConfigPanel = ({ value, schema, moduleName, declName }: { value: Config; schema: string; moduleName: string; declName: string }) => {
   const client = useClient(ConsoleService)
@@ -80,8 +83,8 @@ export const ConfigPanel = ({ value, schema, moduleName, declName }: { value: Co
             </div>
           </div>
         }
-        rightPanelHeader={undefined}
-        rightPanelPanels={DeclDefaultPanels(schema, value.references)}
+        rightPanelHeader={<RightPanelHeader Icon={declIcon('config', decl)} title={declName} />}
+        rightPanelPanels={[...configPanels(value), ...DeclDefaultPanels(schema, value.references)]}
         storageKeyPrefix='configPanel'
       />
     </div>

frontend/console/src/features/modules/decls/config/ConfigRightPanels.tsx

@@ -0,0 +1,16 @@
+import { RightPanelAttribute } from '../../../../components/RightPanelAttribute'
+import type { Config } from '../../../../protos/xyz/block/ftl/v1/console/console_pb'
+import type { ExpandablePanelProps } from '../../../console/ExpandablePanel'
+
+export const configPanels = (config: Config) => {
+  return [
+    {
+      title: 'Details',
+      expanded: true,
+      children: [
+        <RightPanelAttribute key='name' name='Name' value={config.config?.name} />,
+        <RightPanelAttribute key='type' name='Type' value={config.config?.type?.value.case ?? ''} />,
+      ],
+    },
+  ] as ExpandablePanelProps[]
+}

frontend/console/src/features/modules/decls/DataPanel.tsx → frontend/console/src/features/modules/decls/data/DataPanel.tsx

@@ -1,8 +1,11 @@
-import { ResizablePanels } from '../../../components/ResizablePanels'
-import type { Data } from '../../../protos/xyz/block/ftl/v1/console/console_pb'
-import { Schema } from '../schema/Schema'
-import { PanelHeader } from './PanelHeader'
-import { References } from './References'
+import { ResizablePanels } from '../../../../components/ResizablePanels'
+import type { Data } from '../../../../protos/xyz/block/ftl/v1/console/console_pb'
+import { declIcon } from '../../module.utils'
+import { Schema } from '../../schema/Schema'
+import { DeclDefaultPanels } from '../DeclDefaultPanels'
+import { PanelHeader } from '../PanelHeader'
+import { RightPanelHeader } from '../RightPanelHeader'
+import { dataPanels } from './DataRightPanels'
 
 export const DataPanel = ({ value, schema, moduleName, declName }: { value: Data; schema: string; moduleName: string; declName: string }) => {
   if (!value || !schema) {
@@ -26,14 +29,8 @@ export const DataPanel = ({ value, schema, moduleName, declName }: { value: Data
             </div>
           </div>
         }
-        rightPanelHeader={undefined}
-        rightPanelPanels={[
-          {
-            title: 'References',
-            expanded: true,
-            children: <References references={value.references} />,
-          },
-        ]}
+        rightPanelHeader={<RightPanelHeader Icon={declIcon('data', decl)} title={declName} />}
+        rightPanelPanels={[...dataPanels(value), ...DeclDefaultPanels(schema, value.references)]}
         storageKeyPrefix='dataPanel'
       />
     </div>

frontend/console/src/features/modules/decls/data/DataRightPanels.tsx

@@ -0,0 +1,13 @@
+import { RightPanelAttribute } from '../../../../components/RightPanelAttribute'
+import type { Data } from '../../../../protos/xyz/block/ftl/v1/console/console_pb'
+import type { ExpandablePanelProps } from '../../../console/ExpandablePanel'
+
+export const dataPanels = (data: Data) => {
+  return [
+    {
+      title: 'Details',
+      expanded: true,
+      children: [<RightPanelAttribute key='name' name='Name' value={data.data?.name} />],
+    },
+  ] as ExpandablePanelProps[]
+}

frontend/console/src/features/modules/decls/DatabasePanel.tsx → frontend/console/src/features/modules/decls/database/DatabasePanel.tsx

@@ -1,7 +1,7 @@
-import type { Database } from '../../../protos/xyz/block/ftl/v1/console/console_pb'
-import { Schema } from '../schema/Schema'
-import { PanelHeader } from './PanelHeader'
-import { References } from './References'
+import type { Database } from '../../../../protos/xyz/block/ftl/v1/console/console_pb'
+import { Schema } from '../../schema/Schema'
+import { PanelHeader } from '../PanelHeader'
+import { References } from '../References'
 
 export const DatabasePanel = ({ value, schema, moduleName, declName }: { value: Database; schema: string; moduleName: string; declName: string }) => {
   return (

frontend/console/src/features/modules/decls/EnumPanel.tsx → frontend/console/src/features/modules/decls/enum/EnumPanel.tsx

@@ -1,7 +1,7 @@
-import type { Enum } from '../../../protos/xyz/block/ftl/v1/console/console_pb'
-import { Schema } from '../schema/Schema'
-import { PanelHeader } from './PanelHeader'
-import { References } from './References'
+import type { Enum } from '../../../../protos/xyz/block/ftl/v1/console/console_pb'
+import { Schema } from '../../schema/Schema'
+import { PanelHeader } from '../PanelHeader'
+import { References } from '../References'
 import { enumType } from './enum.utils'
 
 export const EnumPanel = ({ value, schema, moduleName, declName }: { value: Enum; schema: string; moduleName: string; declName: string }) => {

frontend/console/src/features/modules/decls/enum.utils.ts → frontend/console/src/features/modules/decls/enum/enum.utils.ts

@@ -1,4 +1,4 @@
-import type { Enum } from '../../../protos/xyz/block/ftl/v1/schema/schema_pb'
+import type { Enum } from '../../../../protos/xyz/block/ftl/v1/schema/schema_pb'
 
 export function enumType(value: Enum): string {
   if (!value.type) {

frontend/console/src/features/modules/decls/SecretPanel.tsx → frontend/console/src/features/modules/decls/secret/SecretPanel.tsx

@@ -1,13 +1,16 @@
+import { Button } from '@headlessui/react'
 import { useContext, useEffect, useState } from 'react'
-import { Button } from '../../../components/Button'
-import { CodeEditor } from '../../../components/CodeEditor'
-import { ResizablePanels } from '../../../components/ResizablePanels'
-import { useClient } from '../../../hooks/use-client'
-import { ConsoleService } from '../../../protos/xyz/block/ftl/v1/console/console_connect'
-import type { Secret } from '../../../protos/xyz/block/ftl/v1/console/console_pb'
-import { NotificationType, NotificationsContext } from '../../../providers/notifications-provider'
-import { DeclDefaultPanels } from './DeclDefaultPanels'
-import { PanelHeader } from './PanelHeader'
+import { CodeEditor } from '../../../../components/CodeEditor'
+import { ResizablePanels } from '../../../../components/ResizablePanels'
+import { useClient } from '../../../../hooks/use-client'
+import { ConsoleService } from '../../../../protos/xyz/block/ftl/v1/console/console_connect'
+import type { Secret } from '../../../../protos/xyz/block/ftl/v1/console/console_pb'
+import { NotificationType, NotificationsContext } from '../../../../providers/notifications-provider'
+import { declIcon } from '../../module.utils'
+import { DeclDefaultPanels } from '../DeclDefaultPanels'
+import { PanelHeader } from '../PanelHeader'
+import { RightPanelHeader } from '../RightPanelHeader'
+import { secretPanels } from './SecretRightPanels'
 
 export const SecretPanel = ({ value, schema, moduleName, declName }: { value: Secret; schema: string; moduleName: string; declName: string }) => {
   const client = useClient(ConsoleService)
@@ -56,6 +59,7 @@ export const SecretPanel = ({ value, schema, moduleName, declName }: { value: Se
   if (!value || !schema) {
     return null
   }
+
   const decl = value.secret
   if (!decl) {
     return null
@@ -80,8 +84,8 @@ export const SecretPanel = ({ value, schema, moduleName, declName }: { value: Se
             </div>
           </div>
         }
-        rightPanelHeader={undefined}
-        rightPanelPanels={DeclDefaultPanels(schema, value.references)}
+        rightPanelHeader={<RightPanelHeader Icon={declIcon('secret', decl)} title={declName} />}
+        rightPanelPanels={[...secretPanels(value), ...DeclDefaultPanels(schema, value.references)]}
         storageKeyPrefix='secretPanel'
       />
     </div>

frontend/console/src/features/modules/decls/secret/SecretRightPanels.tsx

@@ -0,0 +1,16 @@
+import { RightPanelAttribute } from '../../../../components/RightPanelAttribute'
+import type { Secret } from '../../../../protos/xyz/block/ftl/v1/console/console_pb'
+import type { ExpandablePanelProps } from '../../../console/ExpandablePanel'
+
+export const secretPanels = (secret: Secret) => {
+  return [
+    {
+      title: 'Details',
+      expanded: true,
+      children: [
+        <RightPanelAttribute key='name' name='Name' value={secret.secret?.name} />,
+        <RightPanelAttribute key='type' name='Type' value={secret.secret?.type?.value.case ?? ''} />,
+      ],
+    },
+  ] as ExpandablePanelProps[]
+}

frontend/console/src/features/modules/decls/subscription/SubscriptionPanel.tsx

@@ -0,0 +1,39 @@
+import { ResizablePanels } from '../../../../components/ResizablePanels'
+import type { Subscription } from '../../../../protos/xyz/block/ftl/v1/console/console_pb'
+import { declIcon } from '../../module.utils'
+import { Schema } from '../../schema/Schema'
+import { DeclDefaultPanels } from '../DeclDefaultPanels'
+import { PanelHeader } from '../PanelHeader'
+import { RightPanelHeader } from '../RightPanelHeader'
+import { subscriptionPanels } from './SubscriptionRightPanels'
+
+export const SubscriptionPanel = ({ value, schema, moduleName, declName }: { value: Subscription; schema: string; moduleName: string; declName: string }) => {
+  if (!value || !schema) {
+    return
+  }
+
+  const decl = value.subscription
+  if (!decl) {
+    return
+  }
+
+  return (
+    <div className='h-full'>
+      <ResizablePanels
+        mainContent={
+          <div className='p-4'>
+            <div className=''>
+              <PanelHeader title='Data' declRef={`${moduleName}.${declName}`} exported={false} comments={decl.comments} />
+              <div className='-mx-3.5'>
+                <Schema schema={schema} />
+              </div>
+            </div>
+          </div>
+        }
+        rightPanelHeader={<RightPanelHeader Icon={declIcon('subscription', decl)} title={declName} />}
+        rightPanelPanels={[...subscriptionPanels(value), ...DeclDefaultPanels(schema, value.references)]}
+        storageKeyPrefix='subscriptionPanel'
+      />
+    </div>
+  )
+}

frontend/console/src/features/modules/decls/subscription/SubscriptionRightPanels.tsx

@@ -0,0 +1,13 @@
+import { RightPanelAttribute } from '../../../../components/RightPanelAttribute'
+import type { Subscription } from '../../../../protos/xyz/block/ftl/v1/console/console_pb'
+import type { ExpandablePanelProps } from '../../../console/ExpandablePanel'
+
+export const subscriptionPanels = (subscription: Subscription) => {
+  return [
+    {
+      title: 'Details',
+      expanded: true,
+      children: [<RightPanelAttribute key='name' name='Name' value={subscription.subscription?.name} />],
+    },
+  ] as ExpandablePanelProps[]
+}