feat: add verb form to verb page (#465)

![Screenshot 2023-10-06 at 10 49 43 AM](https://github.com/TBD54566975/ftl/assets/51647/731a0356-f334-480a-82dc-7e357c26c1f9) ![Screenshot 2023-10-06 at 10 49 57 AM](https://github.com/TBD54566975/ftl/assets/51647/7075901a-f02a-4d2d-984f-54dd16befed1) ![Screenshot 2023-10-06 at 10 50 00 AM](https://github.com/TBD54566975/ftl/assets/51647/edb0ff58-c4c9-4c40-b74a-2b9f42d1dd99)
block · Oct 6, 2023 · 0e141fe · 0e141fe
1 parent e54edd2
commit 0e141fe
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 29 deletions.
diff --git a/console/client/src/features/calls/CallList.tsx b/console/client/src/features/calls/CallList.tsx
@@ -82,7 +82,7 @@ export const CallList = ({ calls }: Props) => {
                   <td className='p-1 flex-1 flex-grow truncate' title={call.response}>
                     {call.response}
                   </td>
-                  <td className='p-1 flex-1 flex-grow truncate' title={call.error}>
+                  <td className='p-1 flex-1 flex-grow truncate text-red-500' title={call.error}>
                     {call.error}
                   </td>
                 </tr>

diff --git a/console/client/src/features/verbs/VerbForm.tsx b/console/client/src/features/verbs/VerbForm.tsx
@@ -88,7 +88,7 @@ export const VerbForm = ({ module, verb }: Props) => {
         <div className='border border-gray-200 dark:border-slate-800 rounded-sm'>
           <Editor
             key={[module?.name, verb?.verb?.name].join('.')}
-            height='35vh'
+            height='20vh'
             theme={`${isDarkMode ? 'vs-dark' : 'light'}`}
             defaultLanguage='json'
             path={[module?.name, verb?.verb?.name].join('.')}
@@ -101,13 +101,14 @@ export const VerbForm = ({ module, verb }: Props) => {
             beforeMount={handleEditorWillMount}
           />
         </div>
-
-        <button
-          type='submit'
-          className='bg-indigo-700 text-white mt-4 px-4 py-2 rounded hover:bg-indigo-600 focus:outline-none focus:bg-indigo-600'
-        >
-          Submit
-        </button>
+        <div className='text-right'>
+          <button
+            type='submit'
+            className='bg-indigo-700 text-white mt-4 px-4 py-2 rounded hover:bg-indigo-600 focus:outline-none focus:bg-indigo-600'
+          >
+            Submit
+          </button>
+        </div>
       </form>
       {response && (
         <div className='pt-4'>

diff --git a/console/client/src/features/verbs/VerbPage.tsx b/console/client/src/features/verbs/VerbPage.tsx
@@ -3,19 +3,20 @@ import React from 'react'
 import { useParams } from 'react-router-dom'
 import { CodeBlock } from '../../components/CodeBlock'
 import { Page } from '../../layout'
-import { CallEvent, Module, Verb } from '../../protos/xyz/block/ftl/v1/console/console_pb'
+import { CallEvent, EventType, Module, Verb } from '../../protos/xyz/block/ftl/v1/console/console_pb'
 import { modulesContext } from '../../providers/modules-provider'
 import { SidePanelProvider } from '../../providers/side-panel-provider'
-import { getCalls } from '../../services/console.service'
+import { callFilter, eventTypesFilter, streamEvents } from '../../services/console.service'
 import { CallList } from '../calls/CallList'
+import { VerbForm } from './VerbForm'
 import { buildVerbSchema } from './verb.utils'
 
 export const VerbPage = () => {
   const { moduleName, verbName } = useParams()
   const modules = React.useContext(modulesContext)
   const [module, setModule] = React.useState<Module | undefined>()
   const [verb, setVerb] = React.useState<Verb | undefined>()
-  const [calls, setCalls] = React.useState<CallEvent[] | undefined>()
+  const [calls, setCalls] = React.useState<CallEvent[]>([])
 
   const callData =
     module?.data.filter((data) => [verb?.verb?.request?.name, verb?.verb?.response?.name].includes(data.data?.name)) ??
@@ -34,15 +35,17 @@ export const VerbPage = () => {
     const abortController = new AbortController()
     if (!module) return
 
-    const fetchCalls = async () => {
-      const calls = await getCalls({
+    const streamCalls = async () => {
+      setCalls([])
+      streamEvents({
         abortControllerSignal: abortController.signal,
-        destModule: module.name,
-        destVerb: verb?.verb?.name,
+        filters: [callFilter(module.name, verb?.verb?.name), eventTypesFilter([EventType.CALL])],
+        onEventReceived: (event) => {
+          setCalls((prev) => [event.entry.value as CallEvent, ...prev])
+        },
       })
-      setCalls(calls)
     }
-    fetchCalls()
+    streamCalls()
 
     return () => {
       abortController.abort()
@@ -62,16 +65,21 @@ export const VerbPage = () => {
         />
         <Page.Body className='p-4'>
           <div className='flex-1 flex flex-col h-full'>
-            <div className='flex-1 h-1/2 overflow-y-auto'>
-              {verb?.verb?.request?.toJsonString() && (
-                <CodeBlock
-                  code={buildVerbSchema(
-                    verb?.schema,
-                    callData.map((d) => d.schema),
-                  )}
-                  language='json'
-                />
-              )}
+            <div className='flex-1 flex flex-grow h-1/2 mb-4'>
+              <div className='mr-2 flex-1 w-1/2 overflow-y-auto'>
+                {verb?.verb?.request?.toJsonString() && (
+                  <CodeBlock
+                    code={buildVerbSchema(
+                      verb?.schema,
+                      callData.map((d) => d.schema),
+                    )}
+                    language='json'
+                  />
+                )}
+              </div>
+              <div className='ml-2 flex-1 w-1/2 overflow-y-auto'>
+                <VerbForm module={module} verb={verb} />
+              </div>
             </div>
             <div className='flex-1 h-1/2'>
               <CallList calls={calls} />

diff --git a/console/client/src/layout/SidePanel.tsx b/console/client/src/layout/SidePanel.tsx
@@ -8,7 +8,7 @@ export const SidePanel = () => {
   const { isOpen, component } = useContext(SidePanelContext)
 
   return (
-    <div className={`absolute z-20 top-0 border border-red-500 ${bgColor} ${textColor}`}>
+    <div className={`absolute z-20 top-0 ${bgColor} ${textColor}`}>
       <Transition
         show={isOpen}
         as={Fragment}