feat: add decl pages for topics and subscriptions (#2662)

Issue: #2616

All the remains now is FSM.

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

@@ -8,6 +8,8 @@ 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'
 
 export const DeclPanel = () => {
@@ -35,6 +37,10 @@ export const DeclPanel = () => {
       return <EnumPanel value={decl.value.value} {...nameProps} />
     case 'secret':
       return <SecretPanel value={decl.value.value} {...nameProps} />
+    case 'subscription':
+      return <SubscriptionPanel value={decl.value.value} {...nameProps} />
+    case 'topic':
+      return <TopicPanel value={decl.value.value} {...nameProps} />
     case 'typeAlias':
       return <TypeAliasPanel value={decl.value.value} {...nameProps} />
     case 'verb':

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

@@ -0,0 +1,16 @@
+import type { Subscription } from '../../../protos/xyz/block/ftl/v1/schema/schema_pb'
+import { PanelHeader } from './PanelHeader'
+import { RefLink } from './TypeEl'
+
+export const SubscriptionPanel = ({ value, moduleName, declName }: { value: Subscription; moduleName: string; declName: string }) => {
+  return (
+    <div className='py-2 px-4'>
+      <PanelHeader exported={false} comments={value.comments}>
+        Subscription: {moduleName}.{declName}
+      </PanelHeader>
+      <div className='text-sm my-4'>
+        To Topic: <RefLink r={value.topic} />
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,16 @@
+import type { Topic } from '../../../protos/xyz/block/ftl/v1/schema/schema_pb'
+import { PanelHeader } from './PanelHeader'
+import { TypeEl } from './TypeEl'
+
+export const TopicPanel = ({ value, moduleName, declName }: { value: Topic; moduleName: string; declName: string }) => {
+  return (
+    <div className='py-2 px-4'>
+      <PanelHeader exported={value.export} comments={value.comments}>
+        Topic: {moduleName}.{declName}
+      </PanelHeader>
+      <div className='text-sm my-4'>
+        Event Type: <TypeEl t={value.event} />
+      </div>
+    </div>
+  )
+}

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

@@ -18,6 +18,18 @@ const TypeParams = ({ types }: { types?: (Type | undefined)[] }) => {
   )
 }
 
+export const RefLink = ({ r }: { r?: Ref }) => {
+  if (!r) {
+    return
+  }
+  return (
+    <span>
+      <DeclLink moduleName={r.module} declName={r.name} />
+      <TypeParams types={r.typeParameters} />
+    </span>
+  )
+}
+
 export const TypeEl = ({ t }: { t?: Type }) => {
   if (!t) {
     return ''
@@ -51,12 +63,7 @@ export const TypeEl = ({ t }: { t?: Type }) => {
         </span>
       )
     case 'ref':
-      return (
-        <span>
-          <DeclLink moduleName={(v as Ref).module} declName={(v as Ref).name} />
-          <TypeParams types={(v as Ref).typeParameters} />
-        </span>
-      )
+      return <RefLink r={v as Ref} />
     default:
       return t.value.case || ''
   }