fix: console layout and cors error. re-enable tests (#3734)

block · Dec 12, 2024 · 0611da7 · 0611da7
1 parent c1cf31d
commit 0611da7
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 14 deletions.
diff --git a/frontend/cli/cmd_serve.go b/frontend/cli/cmd_serve.go
@@ -211,12 +211,18 @@ func (s *serveCommonConfig) run(
 		controllerAddresses = append(controllerAddresses, controllerBind)
 	}
 
-	// Add console address to allow origins for console requests.
-	consoleURL, err := url.Parse("http://127.0.0.1:8899")
-	if err != nil {
-		return fmt.Errorf("could not parse console URL: %w", err)
+	// Add console addresses to allow origins for console requests
+	consoleURLs := []string{
+		"http://localhost:8899",
+		"http://127.0.0.1:8899",
+	}
+	for _, urlStr := range consoleURLs {
+		consoleURL, err := url.Parse(urlStr)
+		if err != nil {
+			return fmt.Errorf("could not parse console URL %q: %w", urlStr, err)
+		}
+		s.Ingress.AllowOrigins = append(s.Ingress.AllowOrigins, consoleURL)
 	}
-	s.Ingress.AllowOrigins = append(s.Ingress.AllowOrigins, consoleURL)
 
 	provisionerAddresses := make([]*url.URL, 0, s.Provisioners)
 	for range s.Provisioners {

diff --git a/frontend/console/e2e/ingress-http.spec.ts b/frontend/console/e2e/ingress-http.spec.ts
@@ -1,7 +1,7 @@
 import { expect, test } from '@playwright/test'
 import { navigateToDecl, setVerbRequestBody } from './helpers'
 
-test.skip('shows http ingress form', async ({ page }) => {
+test('shows http ingress form', async ({ page }) => {
   await navigateToDecl(page, 'http', 'get')
 
   await expect(page.locator('#call-type')).toHaveText('GET')
@@ -10,7 +10,7 @@ test.skip('shows http ingress form', async ({ page }) => {
   await expect(page.getByText('Schema', { exact: true })).toBeVisible()
 })
 
-test.skip('send get request with path and query params', async ({ page }) => {
+test('send get request with path and query params', async ({ page }) => {
   await navigateToDecl(page, 'http', 'get')
 
   // Wait for the input to be stable with the initial value
@@ -55,7 +55,7 @@ test.skip('send get request with path and query params', async ({ page }) => {
   })
 })
 
-test.skip('send post request with body', async ({ page }) => {
+test('send post request with body', async ({ page }) => {
   await navigateToDecl(page, 'http', 'post')
 
   await expect(page.locator('input#request-path')).toHaveValue('http://localhost:8891/post')

diff --git a/frontend/console/index.html b/frontend/console/index.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en" class="bg-white dark:bg-gray-800 h-full">
+<html lang="en" class="h-full w-full">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -8,7 +8,7 @@
     <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;700&display=swap" rel="stylesheet" />
   </head>
 
-  <body class="h-full w-full">
+  <body class="h-full w-full bg-white dark:bg-gray-800">
     <div id="root" class="h-full"></div>
     <script type="module" src="/src/main.tsx"></script>
   </body>

diff --git a/frontend/console/src/components/ResizablePanels.tsx b/frontend/console/src/components/ResizablePanels.tsx
@@ -4,12 +4,13 @@ import type { ExpandablePanelProps } from '../features/graph/ExpandablePanel'
 import useLocalStorage from '../hooks/use-local-storage'
 import RightPanel from './RightPanel'
 
+const TOP_BAR_HEIGHT = 64
+
 interface ResizablePanelsProps {
   initialRightPanelWidth?: number
   initialBottomPanelHeight?: number
   minRightPanelWidth?: number
   minBottomPanelHeight?: number
-  topBarHeight?: number
   rightPanelHeader: React.ReactNode
   rightPanelPanels: ExpandablePanelProps[]
   bottomPanelContent?: React.ReactNode
@@ -76,7 +77,7 @@ export const ResizablePanels: React.FC<ResizablePanelsProps> = ({
       <div className='flex flex-1'>
         <div
           style={{
-            maxHeight: bottomPanelContent ? `calc(100vh - ${bottomPanelHeight + 46}px)` : '100vh',
+            maxHeight: bottomPanelContent ? `calc(100vh - ${bottomPanelHeight + TOP_BAR_HEIGHT}px)` : '100vh',
           }}
           className='flex-1 flex-col min-h-64'
         >
@@ -90,7 +91,7 @@ export const ResizablePanels: React.FC<ResizablePanelsProps> = ({
         <div
           style={{
             width: `${rightPanelWidth}px`,
-            maxHeight: bottomPanelContent ? `calc(100vh - ${bottomPanelHeight + 46}px)` : '100vh',
+            maxHeight: bottomPanelContent ? `calc(100vh - ${bottomPanelHeight + TOP_BAR_HEIGHT}px)` : '100vh',
           }}
           className='flex flex-col h-full overflow-y-scroll'
         >

diff --git a/frontend/console/src/features/modules/decls/verb/verb.utils.ts b/frontend/console/src/features/modules/decls/verb/verb.utils.ts
@@ -3,7 +3,7 @@ import type { JsonValue } from 'type-fest/source/basic'
 import type { Module, Verb } from '../../../../protos/xyz/block/ftl/console/v1/console_pb'
 import type { MetadataCalls, MetadataCronJob, MetadataIngress, MetadataSubscriber, Ref } from '../../../../protos/xyz/block/ftl/schema/v1/schema_pb'
 
-const basePath = 'http://localhost:8891/'
+const basePath = `${window.location.protocol}//${window.location.hostname}:8891/`
 
 export const refString = (ref?: Ref): string => {
   if (!ref) {