From 182db8c9b95cabd476f41a0d24a1f2480b4444f2 Mon Sep 17 00:00:00 2001
From: Denise Li <dli@squareup.com>
Date: Thu, 12 Sep 2024 22:18:55 -0400
Subject: [PATCH] feat: add decl pages for topics and subscriptions (#2662)

Issue: https://github.com/TBD54566975/ftl/issues/2616

All the remains now is FSM.
---
 .../src/features/modules/decls/DeclPanel.tsx  |  6 ++++++
 .../modules/decls/SubscriptionPanel.tsx       | 16 ++++++++++++++++
 .../src/features/modules/decls/TopicPanel.tsx | 16 ++++++++++++++++
 .../src/features/modules/decls/TypeEl.tsx     | 19 +++++++++++++------
 4 files changed, 51 insertions(+), 6 deletions(-)
 create mode 100644 frontend/console/src/features/modules/decls/SubscriptionPanel.tsx
 create mode 100644 frontend/console/src/features/modules/decls/TopicPanel.tsx

diff --git a/frontend/console/src/features/modules/decls/DeclPanel.tsx b/frontend/console/src/features/modules/decls/DeclPanel.tsx
index ab2e07ef5..37c70b342 100644
--- a/frontend/console/src/features/modules/decls/DeclPanel.tsx
+++ b/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':
diff --git a/frontend/console/src/features/modules/decls/SubscriptionPanel.tsx b/frontend/console/src/features/modules/decls/SubscriptionPanel.tsx
new file mode 100644
index 000000000..ea1ce0b01
--- /dev/null
+++ b/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>
+  )
+}
diff --git a/frontend/console/src/features/modules/decls/TopicPanel.tsx b/frontend/console/src/features/modules/decls/TopicPanel.tsx
new file mode 100644
index 000000000..914cd5a6d
--- /dev/null
+++ b/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>
+  )
+}
diff --git a/frontend/console/src/features/modules/decls/TypeEl.tsx b/frontend/console/src/features/modules/decls/TypeEl.tsx
index fb1c9acc8..bb31fcf82 100644
--- a/frontend/console/src/features/modules/decls/TypeEl.tsx
+++ b/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 || ''
   }