From 63ef50e27831fe345d836d10a018027b6fe9bfff Mon Sep 17 00:00:00 2001
From: wadii <wadii.zaim@flagsmith.com>
Date: Mon, 3 Aug 2026 11:57:10 +0200
Subject: [PATCH] fix: make warehouse connection test failures more visible

Show test failures with error styling instead of a warning, stretch the
banner to full width, and put the save-anyway hint on its own line.
---
 .../warehouse-tab/ClickHouseConfigForm.tsx    |  9 ++++-----
 .../tabs/warehouse-tab/ConfigForm.scss        |  4 ++++
 .../__tests__/warehouseFormUtils.test.ts      | 19 +++++++++++--------
 .../tabs/warehouse-tab/warehouseFormUtils.ts  |  4 ++--
 4 files changed, 21 insertions(+), 15 deletions(-)

diff --git a/frontend/web/components/pages/environment-settings/tabs/warehouse-tab/ClickHouseConfigForm.tsx b/frontend/web/components/pages/environment-settings/tabs/warehouse-tab/ClickHouseConfigForm.tsx
index 855940e19534..cc2903714ff3 100644
--- a/frontend/web/components/pages/environment-settings/tabs/warehouse-tab/ClickHouseConfigForm.tsx
+++ b/frontend/web/components/pages/environment-settings/tabs/warehouse-tab/ClickHouseConfigForm.tsx
@@ -5,7 +5,6 @@ import Switch from 'components/Switch'
 import ErrorMessage from 'components/ErrorMessage'
 import FieldError from 'components/base/forms/FieldError'
 import WarehouseSetupSqlHelp from './WarehouseSetupSqlHelp'
-import WarningMessage from 'components/WarningMessage'
 import { ClickHouseConfig } from 'common/types/responses'
 import { useTestWarehouseConnectionConfigMutation } from 'common/services/useWarehouseConnection'
 import {
@@ -286,10 +285,10 @@ const ClickHouseConfigForm: FC<ClickHouseConfigFormProps> = ({
           </div>
         )}
         {testState === 'errored' && (
-          <div className='d-flex justify-content-end'>
-            <WarningMessage
-              warningMessage={getTestFailureWarning(testDetail)}
-              warningMessageClass='mb-0'
+          <div className='d-flex'>
+            <ErrorMessage
+              error={getTestFailureWarning(testDetail)}
+              errorMessageClass='mb-0 flex-1 wh-config-form__test-error'
             />
           </div>
         )}
diff --git a/frontend/web/components/pages/environment-settings/tabs/warehouse-tab/ConfigForm.scss b/frontend/web/components/pages/environment-settings/tabs/warehouse-tab/ConfigForm.scss
index 3941ffe93e29..6b73bd1d10f3 100644
--- a/frontend/web/components/pages/environment-settings/tabs/warehouse-tab/ConfigForm.scss
+++ b/frontend/web/components/pages/environment-settings/tabs/warehouse-tab/ConfigForm.scss
@@ -36,6 +36,10 @@
     color: var(--color-text-tertiary);
   }
 
+  &__test-error {
+    white-space: pre-line;
+  }
+
   &__note {
     padding: 12px 14px;
     background: var(--color-surface-info-subtle, var(--color-surface-muted));
diff --git a/frontend/web/components/pages/environment-settings/tabs/warehouse-tab/__tests__/warehouseFormUtils.test.ts b/frontend/web/components/pages/environment-settings/tabs/warehouse-tab/__tests__/warehouseFormUtils.test.ts
index 76da13c4ccc2..05ff1b26fd58 100644
--- a/frontend/web/components/pages/environment-settings/tabs/warehouse-tab/__tests__/warehouseFormUtils.test.ts
+++ b/frontend/web/components/pages/environment-settings/tabs/warehouse-tab/__tests__/warehouseFormUtils.test.ts
@@ -2,13 +2,16 @@ import { getTestFailureWarning } from 'components/pages/environment-settings/tab
 
 describe('getTestFailureWarning', () => {
   it.each([
-    ['Authentication failed.', ': Authentication failed. You can save anyway'],
-    ['Connection refused', ': Connection refused. You can save anyway'],
-    ['Timed out!', ': Timed out! You can save anyway'],
-    [null, '. You can save anyway'],
-  ])('formats detail %p with a single sentence break', (detail, expected) => {
-    expect(getTestFailureWarning(detail)).toContain(expected)
-  })
+    ['Authentication failed.', ': Authentication failed.\nYou can save anyway'],
+    ['Connection refused', ': Connection refused.\nYou can save anyway'],
+    ['Timed out!', ': Timed out!\nYou can save anyway'],
+    [null, '.\nYou can save anyway'],
+  ])(
+    'formats detail %p with the save-anyway hint on its own line',
+    (detail, expected) => {
+      expect(getTestFailureWarning(detail)).toContain(expected)
+    },
+  )
 
   it('does not claim a failed connection when only the events table is missing', () => {
     const detail =
@@ -25,7 +28,7 @@ describe('getTestFailureWarning', () => {
 
   it('keeps the sentence boundary when the missing-table detail lacks punctuation', () => {
     expect(getTestFailureWarning('Events table not found')).toContain(
-      'Events table not found. You can save anyway',
+      'Events table not found.\nYou can save anyway',
     )
   })
 })
diff --git a/frontend/web/components/pages/environment-settings/tabs/warehouse-tab/warehouseFormUtils.ts b/frontend/web/components/pages/environment-settings/tabs/warehouse-tab/warehouseFormUtils.ts
index 6fbc6bae1011..17a2119e514a 100644
--- a/frontend/web/components/pages/environment-settings/tabs/warehouse-tab/warehouseFormUtils.ts
+++ b/frontend/web/components/pages/environment-settings/tabs/warehouse-tab/warehouseFormUtils.ts
@@ -20,8 +20,8 @@ export const getTestFailureWarning = (detail: string | null): string => {
   if (detail && isMissingEventsTableDetail(detail)) {
     return `${punctuate(
       detail,
-    )} You can save anyway and test again later, but events won't be delivered until the table exists.`
+    )}\nYou can save anyway and test again later, but events won't be delivered until the table exists.`
   }
   const reason = detail ? `: ${punctuate(detail)}` : '.'
-  return `We couldn't establish a connection${reason} You can save anyway and test again later, but events won't be delivered until the connection succeeds.`
+  return `We couldn't establish a connection${reason}\nYou can save anyway and test again later, but events won't be delivered until the connection succeeds.`
 }