feat: stub out each decl panel (#3441)

Just stubbing out these pages so we have somewhere to add content once we figure out what we need. ![Screenshot 2024-11-20 at 9 16 24 AM](https://github.com/user-attachments/assets/12364c14-4505-4f6e-b90b-38e070ad2419) ![Screenshot 2024-11-20 at 9 16 26 AM](https://github.com/user-attachments/assets/3a76ef55-24b8-44cc-9167-1a686375e631) ![Screenshot 2024-11-20 at 9 16 28 AM](https://github.com/user-attachments/assets/98f1fd10-6f1b-483e-9b0b-54e2d6b5ce2d) ![Screenshot 2024-11-20 at 9 16 33 AM](https://github.com/user-attachments/assets/3e17097d-9280-4874-8585-3aae4b51c6fc) ![Screenshot 2024-11-20 at 9 16 35 AM](https://github.com/user-attachments/assets/1e532398-dc09-495b-ad74-9d40fb302da9)
TBD54566975 · Nov 20, 2024 · 9781ce1 · 9781ce1
1 parent 2a5d45a
commit 9781ce1
Show file tree

Hide file tree

Showing 12 changed files with 148 additions and 32 deletions.
diff --git a/frontend/console/src/features/modules/decls/RightPanelHeader.tsx b/frontend/console/src/features/modules/decls/RightPanelHeader.tsx
@@ -1,7 +1,7 @@
 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' />}
+      {Icon && <Icon className='h-5 w-5 text-indigo-500' />}
       {title && <div className='flex flex-col min-w-0'>{title}</div>}
     </div>
   )

diff --git a/frontend/console/src/features/modules/decls/database/DatabasePanel.tsx b/frontend/console/src/features/modules/decls/database/DatabasePanel.tsx
@@ -1,16 +1,35 @@
+import { ResizablePanels } from '../../../../components/ResizablePanels'
 import type { Database } 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 { References } from '../References'
+import { RightPanelHeader } from '../RightPanelHeader'
+import { databasePanels } from './DatabaseRightPanels'
 
 export const DatabasePanel = ({ value, schema, moduleName, declName }: { value: Database; schema: string; moduleName: string; declName: string }) => {
+  const decl = value.database
+  if (!decl) {
+    return
+  }
+
   return (
-    <div className='py-2 px-4'>
-      <PanelHeader title='Database' declRef={`${moduleName}.${declName}`} exported={false} comments={value.database?.comments} />
-      <div className='-mx-3.5'>
-        <Schema schema={schema} />
-      </div>
-      <References references={value.references} />
+    <div className='h-full'>
+      <ResizablePanels
+        mainContent={
+          <div className='p-4'>
+            <div className=''>
+              <PanelHeader title='Database' declRef={`${moduleName}.${declName}`} exported={false} comments={decl.comments} />
+              <div className='-mx-3.5'>
+                <Schema schema={schema} />
+              </div>
+            </div>
+          </div>
+        }
+        rightPanelHeader={<RightPanelHeader Icon={declIcon('database', decl)} title={declName} />}
+        rightPanelPanels={[...databasePanels(value), ...DeclDefaultPanels(schema, value.references)]}
+        storageKeyPrefix='databasePanel'
+      />
     </div>
   )
 }
diff --git a/frontend/console/src/features/modules/decls/database/DatabaseRightPanels.tsx b/frontend/console/src/features/modules/decls/database/DatabaseRightPanels.tsx
@@ -0,0 +1,16 @@
+import { RightPanelAttribute } from '../../../../components/RightPanelAttribute'
+import type { Database } from '../../../../protos/xyz/block/ftl/v1/console/console_pb'
+import type { ExpandablePanelProps } from '../../../console/ExpandablePanel'
+
+export const databasePanels = (database: Database) => {
+  return [
+    {
+      title: 'Details',
+      expanded: true,
+      children: [
+        <RightPanelAttribute key='name' name='Name' value={database.database?.name} />,
+        <RightPanelAttribute key='type' name='Type' value={database.database?.type} />,
+      ],
+    },
+  ] as ExpandablePanelProps[]
+}
diff --git a/frontend/console/src/features/modules/decls/enum/EnumPanel.tsx b/frontend/console/src/features/modules/decls/enum/EnumPanel.tsx
@@ -1,8 +1,11 @@
+import { ResizablePanels } from '../../../../components/ResizablePanels'
 import type { Enum } 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 { References } from '../References'
-import { enumType } from './enum.utils'
+import { RightPanelHeader } from '../RightPanelHeader'
+import { enumPanels } from './EnumRightPanels'
 
 export const EnumPanel = ({ value, schema, moduleName, declName }: { value: Enum; schema: string; moduleName: string; declName: string }) => {
   if (!value || !schema) {
@@ -13,12 +16,22 @@ export const EnumPanel = ({ value, schema, moduleName, declName }: { value: Enum
     return
   }
   return (
-    <div className='py-2 px-4'>
-      <PanelHeader title={enumType(decl)} declRef={`${moduleName}.${declName}`} exported={decl.export} comments={decl.comments} />
-      <div className='-mx-3.5'>
-        <Schema schema={schema} />
-      </div>
-      <References references={value.references} />
+    <div className='h-full'>
+      <ResizablePanels
+        mainContent={
+          <div className='p-4'>
+            <div className=''>
+              <PanelHeader title='Enum' declRef={`${moduleName}.${declName}`} exported={false} comments={decl.comments} />
+              <div className='-mx-3.5'>
+                <Schema schema={schema} />
+              </div>
+            </div>
+          </div>
+        }
+        rightPanelHeader={<RightPanelHeader Icon={declIcon('enum', decl)} title={declName} />}
+        rightPanelPanels={[...enumPanels(value), ...DeclDefaultPanels(schema, value.references)]}
+        storageKeyPrefix='enumPanel'
+      />
     </div>
   )
 }
diff --git a/frontend/console/src/features/modules/decls/enum/EnumRightPanels.tsx b/frontend/console/src/features/modules/decls/enum/EnumRightPanels.tsx
@@ -0,0 +1,16 @@
+import { RightPanelAttribute } from '../../../../components/RightPanelAttribute'
+import type { Enum } from '../../../../protos/xyz/block/ftl/v1/console/console_pb'
+import type { ExpandablePanelProps } from '../../../console/ExpandablePanel'
+
+export const enumPanels = (enumDecl: Enum) => {
+  return [
+    {
+      title: 'Details',
+      expanded: true,
+      children: [
+        <RightPanelAttribute key='name' name='Name' value={enumDecl.enum?.name} />,
+        <RightPanelAttribute key='type' name='Type' value={enumDecl.enum?.type?.value.case} />,
+      ],
+    },
+  ] as ExpandablePanelProps[]
+}
diff --git a/frontend/console/src/features/modules/decls/secret/SecretPanel.tsx b/frontend/console/src/features/modules/decls/secret/SecretPanel.tsx
@@ -1,5 +1,5 @@
-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'
@@ -24,10 +24,20 @@ export const SecretPanel = ({ value, schema, moduleName, declName }: { value: Se
 
   const handleGetSecret = () => {
     setIsLoading(true)
-    client.getSecret({ module: moduleName, name: declName }).then((resp) => {
-      setSecretValue(new TextDecoder().decode(resp.value))
-      setIsLoading(false)
-    })
+    client
+      .getSecret({ module: moduleName, name: declName })
+      .then((resp) => {
+        setSecretValue(new TextDecoder().decode(resp.value))
+        setIsLoading(false)
+      })
+      .catch((error) => {
+        setIsLoading(false)
+        notification?.showNotification({
+          title: 'Failed to get secret',
+          message: error.message,
+          type: NotificationType.Error,
+        })
+      })
   }
 
   const handleSetSecret = () => {

diff --git a/frontend/console/src/features/modules/decls/subscription/SubscriptionPanel.tsx b/frontend/console/src/features/modules/decls/subscription/SubscriptionPanel.tsx
@@ -23,7 +23,7 @@ export const SubscriptionPanel = ({ value, schema, moduleName, declName }: { val
         mainContent={
           <div className='p-4'>
             <div className=''>
-              <PanelHeader title='Data' declRef={`${moduleName}.${declName}`} exported={false} comments={decl.comments} />
+              <PanelHeader title='Subscription' declRef={`${moduleName}.${declName}`} exported={false} comments={decl.comments} />
               <div className='-mx-3.5'>
                 <Schema schema={schema} />
               </div>

diff --git a/frontend/console/src/features/modules/decls/subscription/SubscriptionRightPanels.tsx b/frontend/console/src/features/modules/decls/subscription/SubscriptionRightPanels.tsx
@@ -7,7 +7,10 @@ export const subscriptionPanels = (subscription: Subscription) => {
     {
       title: 'Details',
       expanded: true,
-      children: [<RightPanelAttribute key='name' name='Name' value={subscription.subscription?.name} />],
+      children: [
+        <RightPanelAttribute key='name' name='Name' value={subscription.subscription?.name} />,
+        <RightPanelAttribute key='topic' name='Topic' value={subscription.subscription?.topic?.name} />,
+      ],
     },
   ] as ExpandablePanelProps[]
 }
diff --git a/frontend/console/src/features/modules/decls/topic/TopicPanel.tsx b/frontend/console/src/features/modules/decls/topic/TopicPanel.tsx
@@ -23,7 +23,7 @@ export const TopicPanel = ({ value, schema, moduleName, declName }: { value: Top
         mainContent={
           <div className='p-4'>
             <div className=''>
-              <PanelHeader title='Data' declRef={`${moduleName}.${declName}`} exported={decl.export} comments={decl.comments} />
+              <PanelHeader title='Topic' declRef={`${moduleName}.${declName}`} exported={decl.export} comments={decl.comments} />
               <div className='-mx-3.5'>
                 <Schema schema={schema} />
               </div>

diff --git a/frontend/console/src/features/modules/decls/topic/TopicRightPanels.tsx b/frontend/console/src/features/modules/decls/topic/TopicRightPanels.tsx
@@ -7,7 +7,10 @@ export const topicPanels = (topic: Topic) => {
     {
       title: 'Details',
       expanded: true,
-      children: [<RightPanelAttribute key='name' name='Name' value={topic.topic?.name} />],
+      children: [
+        <RightPanelAttribute key='name' name='Name' value={topic.topic?.name} />,
+        <RightPanelAttribute key='export' name='Event' value={topic.topic?.event?.value.case} />,
+      ],
     },
   ] as ExpandablePanelProps[]
 }
diff --git a/frontend/console/src/features/modules/decls/typealias/TypeAliasPanel.tsx b/frontend/console/src/features/modules/decls/typealias/TypeAliasPanel.tsx
@@ -1,19 +1,39 @@
+import { ResizablePanels } from '../../../../components/ResizablePanels'
 import type { TypeAlias } 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 { References } from '../References'
+import { RightPanelHeader } from '../RightPanelHeader'
+import { typeAliasPanels } from './TypeAliasRightPanels'
 
 export const TypeAliasPanel = ({ value, schema, moduleName, declName }: { value: TypeAlias; schema: string; moduleName: string; declName: string }) => {
   if (!value || !schema) {
     return
   }
+
+  const decl = value.typealias
+  if (!decl) {
+    return
+  }
+
   return (
-    <div className='py-2 px-4'>
-      <PanelHeader title='Type Alias' declRef={`${moduleName}.${declName}`} exported={!!value.typealias?.export} comments={value.typealias?.comments} />
-      <div className='-mx-3.5'>
-        <Schema schema={schema} />
-      </div>
-      <References references={value.references} />
+    <div className='h-full'>
+      <ResizablePanels
+        mainContent={
+          <div className='p-4'>
+            <div className=''>
+              <PanelHeader title='TypeAlias' declRef={`${moduleName}.${declName}`} exported={decl.export} comments={decl.comments} />
+              <div className='-mx-3.5'>
+                <Schema schema={schema} />
+              </div>
+            </div>
+          </div>
+        }
+        rightPanelHeader={<RightPanelHeader Icon={declIcon('typealias', decl)} title={declName} />}
+        rightPanelPanels={[...typeAliasPanels(value), ...DeclDefaultPanels(schema, value.references)]}
+        storageKeyPrefix='typeAliasPanel'
+      />
     </div>
   )
 }
diff --git a/frontend/console/src/features/modules/decls/typealias/TypeAliasRightPanels.tsx b/frontend/console/src/features/modules/decls/typealias/TypeAliasRightPanels.tsx
@@ -0,0 +1,16 @@
+import { RightPanelAttribute } from '../../../../components/RightPanelAttribute'
+import type { TypeAlias } from '../../../../protos/xyz/block/ftl/v1/console/console_pb'
+import type { ExpandablePanelProps } from '../../../console/ExpandablePanel'
+
+export const typeAliasPanels = (typeAlias: TypeAlias) => {
+  return [
+    {
+      title: 'Details',
+      expanded: true,
+      children: [
+        <RightPanelAttribute key='name' name='Name' value={typeAlias.typealias?.name} />,
+        <RightPanelAttribute key='export' name='Type' value={typeAlias.typealias?.type?.value.case} />,
+      ],
+    },
+  ] as ExpandablePanelProps[]
+}