feat: add console decl page for fsm (#2663)

Tested with `ftl dev --recreate backend/controller/dal/testdata/go/fsm`

This PR steals the `RefLink` change from
#2662, so whichever one merges
first, the other will have to rebase.

Later, we should make this a graph, but for this base page, the list of
links is sufficient.

<img width="1048" alt="Screenshot 2024-09-12 at 4 20 23 PM"
src="https://github.com/user-attachments/assets/b1a88570-0452-46f8-a2c9-29ab4e6a1bba">

Fixes #2616

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

@@ -7,6 +7,7 @@ import { ConfigPanel } from './ConfigPanel'
 import { DataPanel } from './DataPanel'
 import { DatabasePanel } from './DatabasePanel'
 import { EnumPanel } from './EnumPanel'
+import { FsmPanel } from './FsmPanel'
 import { SecretPanel } from './SecretPanel'
 import { SubscriptionPanel } from './SubscriptionPanel'
 import { TopicPanel } from './TopicPanel'
@@ -35,6 +36,8 @@ export const DeclPanel = () => {
       return <DatabasePanel value={decl.value.value} {...nameProps} />
     case 'enum':
       return <EnumPanel value={decl.value.value} {...nameProps} />
+    case 'fsm':
+      return <FsmPanel value={decl.value.value} {...nameProps} />
     case 'secret':
       return <SecretPanel value={decl.value.value} {...nameProps} />
     case 'subscription':

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

@@ -0,0 +1,26 @@
+import type { FSM } from '../../../protos/xyz/block/ftl/v1/schema/schema_pb'
+import { PanelHeader } from './PanelHeader'
+import { RefLink } from './TypeEl'
+
+export const FsmPanel = ({ value, moduleName, declName }: { value: FSM; moduleName: string; declName: string }) => {
+  return (
+    <div className='py-2 px-4'>
+      <PanelHeader exported={false} comments={value.comments}>
+        FSM: {moduleName}.{declName}
+      </PanelHeader>
+      <div className='mt-8'>
+        Start{value.start.length === 1 ? '' : 's'}: {value.start.map((r, i) => [<RefLink key={i} r={r} />, i === value.start.length - 1 ? '' : ', '])}
+      </div>
+      <div className='mt-8'>
+        Transitions
+        <ul className='list-disc ml-8 text-sm'>
+          {value.transitions.map((t, i) => (
+            <li key={i} className='mt-2'>
+              From <RefLink r={t.from} /> to <RefLink r={t.to} />
+            </li>
+          ))}
+        </ul>
+      </div>
+    </div>
+  )
+}