From f6068292a2a6c5d712ee84dfe9cc3517add8d844 Mon Sep 17 00:00:00 2001
From: wadii <wadii.zaim@flagsmith.com>
Date: Mon, 27 Jul 2026 16:28:02 +0200
Subject: [PATCH 01/11] feat: clickhouse database setup SQL on the warehouse
 card and docs

---
 .../experimentation/connect-a-warehouse.md    | 43 ++++++++++++++++
 .../warehouse-tab/WarehouseConnectionCard.tsx |  6 +++
 .../warehouse-tab/WarehouseSetupSqlHelp.tsx   | 49 +++++++++++++++++++
 .../tabs/warehouse-tab/clickhouseSetupSql.ts  | 25 ++++++++++
 4 files changed, 123 insertions(+)
 create mode 100644 frontend/web/components/pages/environment-settings/tabs/warehouse-tab/WarehouseSetupSqlHelp.tsx
 create mode 100644 frontend/web/components/pages/environment-settings/tabs/warehouse-tab/clickhouseSetupSql.ts

diff --git a/docs/docs/experimentation/connect-a-warehouse.md b/docs/docs/experimentation/connect-a-warehouse.md
index 2bd01eb3d13e..47528c0b7846 100644
--- a/docs/docs/experimentation/connect-a-warehouse.md
+++ b/docs/docs/experimentation/connect-a-warehouse.md
@@ -50,6 +50,49 @@ The current status is shown on the warehouse card in **Environment Settings > Wa
 - **Connected**: events have been received; you are ready to run experiments.
 - **Errored**: something went wrong; [contact support](/support/).
 
+## Bring your own ClickHouse
+
+Instead of the managed Flagsmith warehouse, you can store experiment events in your own **ClickHouse** instance, so
+experiment data never leaves your data platform.
+
+1. Create the database and events table by running the following against your ClickHouse instance. This is a one-off
+   setup step; the same SQL is available to copy from the warehouse card in the Flagsmith dashboard.
+
+```sql
+CREATE DATABASE IF NOT EXISTS flagsmith_exp;
+
+CREATE TABLE IF NOT EXISTS flagsmith_exp.events
+(
+    environment_key      LowCardinality(String),
+    event                LowCardinality(String),
+    feature_name         LowCardinality(String),
+    timestamp            DateTime64(3),
+    collected_at         DateTime64(3),
+    identifier           String,
+    value                String                          CODEC(ZSTD(3)),
+    traits               String                          CODEC(ZSTD(3)),
+    metadata             String                          CODEC(ZSTD(3)),
+    sdk_language         LowCardinality(String),
+    sdk_version          LowCardinality(String),
+
+    INDEX idx_identity identifier TYPE bloom_filter GRANULARITY 4,
+
+    CONSTRAINT environment_key_not_empty CHECK environment_key != '',
+    CONSTRAINT event_not_empty           CHECK event != '',
+    CONSTRAINT timestamp_sane            CHECK timestamp > toDateTime64('2020-01-01 00:00:00', 3)
+)
+ENGINE = MergeTree
+PARTITION BY toYYYYMMDD(timestamp)
+ORDER BY (environment_key, event, feature_name, timestamp, identifier);
+```
+
+2. Go to **Environment Settings > Warehouse**, select **ClickHouse** and enter your connection details: host, port (9440
+   by default, the native protocol port), database, username and password. The configured user needs `INSERT` permission
+   on `flagsmith_exp.events`.
+3. Click **Test connection**. Once the test succeeds, save the connection.
+
+Connections use the ClickHouse native protocol, with TLS enabled by default.
+
 ## Coming soon
 
 Bring your own warehouse: connections for **Snowflake**, **BigQuery** and **Databricks**, so experiment results are
diff --git a/frontend/web/components/pages/environment-settings/tabs/warehouse-tab/WarehouseConnectionCard.tsx b/frontend/web/components/pages/environment-settings/tabs/warehouse-tab/WarehouseConnectionCard.tsx
index 4daf8b516e6f..d89cd1c9a18e 100644
--- a/frontend/web/components/pages/environment-settings/tabs/warehouse-tab/WarehouseConnectionCard.tsx
+++ b/frontend/web/components/pages/environment-settings/tabs/warehouse-tab/WarehouseConnectionCard.tsx
@@ -9,6 +9,7 @@ import Tooltip from 'components/Tooltip'
 import Icon from 'components/icons/Icon'
 import Button from 'components/base/forms/Button'
 import WarehouseEventCodeHelp from './WarehouseEventCodeHelp'
+import WarehouseSetupSqlHelp from './WarehouseSetupSqlHelp'
 import WarehouseStats from './WarehouseStats'
 
 type WarehouseConnectionCardProps = {
@@ -142,6 +143,11 @@ const WarehouseConnectionCard: FC<WarehouseConnectionCardProps> = ({
           </span>
         </div>
       )}
+      {connection.warehouse_type === 'clickhouse' && (
+        <div className='mb-3'>
+          <WarehouseSetupSqlHelp showInitially={!isConnected} />
+        </div>
+      )}
       <WarehouseEventCodeHelp />
       <div className='d-flex justify-content-end mt-3'>
         {onTestConnection && (
diff --git a/frontend/web/components/pages/environment-settings/tabs/warehouse-tab/WarehouseSetupSqlHelp.tsx b/frontend/web/components/pages/environment-settings/tabs/warehouse-tab/WarehouseSetupSqlHelp.tsx
new file mode 100644
index 000000000000..22c69e1902a8
--- /dev/null
+++ b/frontend/web/components/pages/environment-settings/tabs/warehouse-tab/WarehouseSetupSqlHelp.tsx
@@ -0,0 +1,49 @@
+import React, { FC, useState } from 'react'
+import Button from 'components/base/forms/Button'
+import CalloutBar from 'components/CalloutBar'
+import Highlight from 'components/Highlight'
+import Icon from 'components/icons/Icon'
+import Utils from 'common/utils/utils'
+import { CLICKHOUSE_SETUP_SQL } from './clickhouseSetupSql'
+
+type WarehouseSetupSqlHelpProps = {
+  showInitially?: boolean
+}
+
+const WarehouseSetupSqlHelp: FC<WarehouseSetupSqlHelpProps> = ({
+  showInitially,
+}) => {
+  const [visible, setVisible] = useState(!!showInitially)
+
+  return (
+    <div>
+      <CalloutBar
+        icon={<>{'<>'}</>}
+        prefix='Database setup:'
+        label='Run once against your ClickHouse instance to create the events table'
+        expanded={visible}
+        onClick={() => setVisible(!visible)}
+      />
+      {visible && (
+        <div className='hljs-container mt-2 mb-2'>
+          <Highlight forceExpanded preventEscape className='sql'>
+            {CLICKHOUSE_SETUP_SQL}
+          </Highlight>
+          <div className='flex-column hljs-docs'>
+            <Button
+              onClick={() => Utils.copyToClipboard(CLICKHOUSE_SETUP_SQL)}
+              theme='primary'
+              size='xSmall'
+            >
+              <Icon name='copy' width={16} fill='white' />
+              Copy Code
+            </Button>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
+
+WarehouseSetupSqlHelp.displayName = 'WarehouseSetupSqlHelp'
+export default WarehouseSetupSqlHelp
diff --git a/frontend/web/components/pages/environment-settings/tabs/warehouse-tab/clickhouseSetupSql.ts b/frontend/web/components/pages/environment-settings/tabs/warehouse-tab/clickhouseSetupSql.ts
new file mode 100644
index 000000000000..3a0d6530d4ba
--- /dev/null
+++ b/frontend/web/components/pages/environment-settings/tabs/warehouse-tab/clickhouseSetupSql.ts
@@ -0,0 +1,25 @@
+export const CLICKHOUSE_SETUP_SQL = `CREATE DATABASE IF NOT EXISTS flagsmith_exp;
+
+CREATE TABLE IF NOT EXISTS flagsmith_exp.events
+(
+    environment_key      LowCardinality(String),
+    event                LowCardinality(String),
+    feature_name         LowCardinality(String),
+    timestamp            DateTime64(3),
+    collected_at         DateTime64(3),
+    identifier           String,
+    value                String                          CODEC(ZSTD(3)),
+    traits               String                          CODEC(ZSTD(3)),
+    metadata             String                          CODEC(ZSTD(3)),
+    sdk_language         LowCardinality(String),
+    sdk_version          LowCardinality(String),
+
+    INDEX idx_identity identifier TYPE bloom_filter GRANULARITY 4,
+
+    CONSTRAINT environment_key_not_empty CHECK environment_key != '',
+    CONSTRAINT event_not_empty           CHECK event != '',
+    CONSTRAINT timestamp_sane            CHECK timestamp > toDateTime64('2020-01-01 00:00:00', 3)
+)
+ENGINE = MergeTree
+PARTITION BY toYYYYMMDD(timestamp)
+ORDER BY (environment_key, event, feature_name, timestamp, identifier);`

From ec16d3275c79cd0b9f65def09da6758c1ebb0c5e Mon Sep 17 00:00:00 2001
From: wadii <wadii.zaim@flagsmith.com>
Date: Mon, 27 Jul 2026 16:36:25 +0200
Subject: [PATCH 02/11] fix: expand setup SQL until the first event is received
 rather than on status

---
 .../tabs/warehouse-tab/WarehouseConnectionCard.tsx            | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/frontend/web/components/pages/environment-settings/tabs/warehouse-tab/WarehouseConnectionCard.tsx b/frontend/web/components/pages/environment-settings/tabs/warehouse-tab/WarehouseConnectionCard.tsx
index d89cd1c9a18e..2e664c6c4c22 100644
--- a/frontend/web/components/pages/environment-settings/tabs/warehouse-tab/WarehouseConnectionCard.tsx
+++ b/frontend/web/components/pages/environment-settings/tabs/warehouse-tab/WarehouseConnectionCard.tsx
@@ -145,7 +145,9 @@ const WarehouseConnectionCard: FC<WarehouseConnectionCardProps> = ({
       )}
       {connection.warehouse_type === 'clickhouse' && (
         <div className='mb-3'>
-          <WarehouseSetupSqlHelp showInitially={!isConnected} />
+          <WarehouseSetupSqlHelp
+            showInitially={!connection.total_events_received}
+          />
         </div>
       )}
       <WarehouseEventCodeHelp />

From 8932ebe71300f4a2ec2987d9deb528921f0ae5f8 Mon Sep 17 00:00:00 2001
From: wadii <wadii.zaim@flagsmith.com>
Date: Mon, 27 Jul 2026 17:12:19 +0200
Subject: [PATCH 03/11] feat: interpolate configured database into setup SQL,
 default flagsmith_exp, snippet in form

---
 .../experimentation/connect-a-warehouse.md    | 72 ++++++++++---------
 .../warehouse-tab/ClickHouseConfigForm.tsx    |  7 +-
 .../warehouse-tab/WarehouseConnectionCard.tsx |  7 ++
 .../warehouse-tab/WarehouseSetupSqlHelp.tsx   |  9 ++-
 .../__tests__/clickhouseSetupSql.test.ts      | 18 +++++
 .../tabs/warehouse-tab/clickhouseConfig.ts    |  2 +-
 .../tabs/warehouse-tab/clickhouseSetupSql.ts  |  6 +-
 7 files changed, 79 insertions(+), 42 deletions(-)
 create mode 100644 frontend/web/components/pages/environment-settings/tabs/warehouse-tab/__tests__/clickhouseSetupSql.test.ts

diff --git a/docs/docs/experimentation/connect-a-warehouse.md b/docs/docs/experimentation/connect-a-warehouse.md
index 47528c0b7846..4e494cda7346 100644
--- a/docs/docs/experimentation/connect-a-warehouse.md
+++ b/docs/docs/experimentation/connect-a-warehouse.md
@@ -52,43 +52,45 @@ The current status is shown on the warehouse card in **Environment Settings > Wa
 
 ## Bring your own ClickHouse
 
-Instead of the managed Flagsmith warehouse, you can store experiment events in your own **ClickHouse** instance, so
-experiment data never leaves your data platform.
-
-1. Create the database and events table by running the following against your ClickHouse instance. This is a one-off
-   setup step; the same SQL is available to copy from the warehouse card in the Flagsmith dashboard.
-
-```sql
-CREATE DATABASE IF NOT EXISTS flagsmith_exp;
-
-CREATE TABLE IF NOT EXISTS flagsmith_exp.events
-(
-    environment_key      LowCardinality(String),
-    event                LowCardinality(String),
-    feature_name         LowCardinality(String),
-    timestamp            DateTime64(3),
-    collected_at         DateTime64(3),
-    identifier           String,
-    value                String                          CODEC(ZSTD(3)),
-    traits               String                          CODEC(ZSTD(3)),
-    metadata             String                          CODEC(ZSTD(3)),
-    sdk_language         LowCardinality(String),
-    sdk_version          LowCardinality(String),
-
-    INDEX idx_identity identifier TYPE bloom_filter GRANULARITY 4,
-
-    CONSTRAINT environment_key_not_empty CHECK environment_key != '',
-    CONSTRAINT event_not_empty           CHECK event != '',
-    CONSTRAINT timestamp_sane            CHECK timestamp > toDateTime64('2020-01-01 00:00:00', 3)
-)
-ENGINE = MergeTree
-PARTITION BY toYYYYMMDD(timestamp)
-ORDER BY (environment_key, event, feature_name, timestamp, identifier);
-```
+Instead of the managed Flagsmith warehouse, you can store experiment events in your own **ClickHouse** instance.
+
+1. Create the database and events table by running the following against your ClickHouse instance, using an
+   administrative user (the statements require `CREATE DATABASE` and `CREATE TABLE` privileges). This is a one-off setup
+   step; the same SQL is available to copy from the warehouse card in the Flagsmith dashboard, adjusted to the database
+   name you configure.
+
+   ```sql
+   CREATE DATABASE IF NOT EXISTS flagsmith_exp;
+
+   CREATE TABLE IF NOT EXISTS flagsmith_exp.events
+   (
+       environment_key      LowCardinality(String),
+       event                LowCardinality(String),
+       feature_name         LowCardinality(String),
+       timestamp            DateTime64(3),
+       collected_at         DateTime64(3),
+       identifier           String,
+       value                String                          CODEC(ZSTD(3)),
+       traits               String                          CODEC(ZSTD(3)),
+       metadata             String                          CODEC(ZSTD(3)),
+       sdk_language         LowCardinality(String),
+       sdk_version          LowCardinality(String),
+
+       INDEX idx_identity identifier TYPE bloom_filter GRANULARITY 4,
+
+       CONSTRAINT environment_key_not_empty CHECK environment_key != '',
+       CONSTRAINT event_not_empty           CHECK event != '',
+       CONSTRAINT timestamp_sane            CHECK timestamp > toDateTime64('2020-01-01 00:00:00', 3)
+   )
+   ENGINE = MergeTree
+   PARTITION BY toYYYYMMDD(timestamp)
+   ORDER BY (environment_key, event, feature_name, timestamp, identifier);
+   ```
 
 2. Go to **Environment Settings > Warehouse**, select **ClickHouse** and enter your connection details: host, port (9440
-   by default, the native protocol port), database, username and password. The configured user needs `INSERT` permission
-   on `flagsmith_exp.events`.
+   by default, the native protocol port), database (`flagsmith_exp` by default), username and password. Use a
+   least-privileged runtime user rather than the administrative one — it needs `INSERT` and `SELECT` on the `events`
+   table in the configured database.
 3. Click **Test connection**. Once the test succeeds, save the connection.
 
 Connections use the ClickHouse native protocol, with TLS enabled by default.
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 d6f09ce9d3c7..5aa9cc71e898 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
@@ -4,6 +4,7 @@ import Input from 'components/base/forms/Input'
 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'
@@ -185,7 +186,7 @@ const ClickHouseConfigForm: FC<ClickHouseConfigFormProps> = ({
               onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
                 setField(setDatabase)(e.target.value)
               }
-              placeholder='flagsmith'
+              placeholder='flagsmith_exp'
             />
           </div>
         </div>
@@ -230,6 +231,10 @@ const ClickHouseConfigForm: FC<ClickHouseConfigFormProps> = ({
           </div>
         </div>
 
+        <WarehouseSetupSqlHelp
+          database={database.trim() || CLICKHOUSE_DEFAULTS.database}
+        />
+
         {error && <ErrorMessage error={getWarehouseErrorMessage(isEdit)} />}
 
         <div className='wh-config-form__actions'>
diff --git a/frontend/web/components/pages/environment-settings/tabs/warehouse-tab/WarehouseConnectionCard.tsx b/frontend/web/components/pages/environment-settings/tabs/warehouse-tab/WarehouseConnectionCard.tsx
index 2e664c6c4c22..a2fbd79621ab 100644
--- a/frontend/web/components/pages/environment-settings/tabs/warehouse-tab/WarehouseConnectionCard.tsx
+++ b/frontend/web/components/pages/environment-settings/tabs/warehouse-tab/WarehouseConnectionCard.tsx
@@ -10,6 +10,7 @@ import Icon from 'components/icons/Icon'
 import Button from 'components/base/forms/Button'
 import WarehouseEventCodeHelp from './WarehouseEventCodeHelp'
 import WarehouseSetupSqlHelp from './WarehouseSetupSqlHelp'
+import { CLICKHOUSE_DEFAULTS } from './clickhouseConfig'
 import WarehouseStats from './WarehouseStats'
 
 type WarehouseConnectionCardProps = {
@@ -146,6 +147,12 @@ const WarehouseConnectionCard: FC<WarehouseConnectionCardProps> = ({
       {connection.warehouse_type === 'clickhouse' && (
         <div className='mb-3'>
           <WarehouseSetupSqlHelp
+            database={
+              (connection.config &&
+                'database' in connection.config &&
+                connection.config.database) ||
+              CLICKHOUSE_DEFAULTS.database
+            }
             showInitially={!connection.total_events_received}
           />
         </div>
diff --git a/frontend/web/components/pages/environment-settings/tabs/warehouse-tab/WarehouseSetupSqlHelp.tsx b/frontend/web/components/pages/environment-settings/tabs/warehouse-tab/WarehouseSetupSqlHelp.tsx
index 22c69e1902a8..79bcec14ce41 100644
--- a/frontend/web/components/pages/environment-settings/tabs/warehouse-tab/WarehouseSetupSqlHelp.tsx
+++ b/frontend/web/components/pages/environment-settings/tabs/warehouse-tab/WarehouseSetupSqlHelp.tsx
@@ -4,16 +4,19 @@ import CalloutBar from 'components/CalloutBar'
 import Highlight from 'components/Highlight'
 import Icon from 'components/icons/Icon'
 import Utils from 'common/utils/utils'
-import { CLICKHOUSE_SETUP_SQL } from './clickhouseSetupSql'
+import { getClickHouseSetupSql } from './clickhouseSetupSql'
 
 type WarehouseSetupSqlHelpProps = {
+  database: string
   showInitially?: boolean
 }
 
 const WarehouseSetupSqlHelp: FC<WarehouseSetupSqlHelpProps> = ({
+  database,
   showInitially,
 }) => {
   const [visible, setVisible] = useState(!!showInitially)
+  const sql = getClickHouseSetupSql(database)
 
   return (
     <div>
@@ -27,11 +30,11 @@ const WarehouseSetupSqlHelp: FC<WarehouseSetupSqlHelpProps> = ({
       {visible && (
         <div className='hljs-container mt-2 mb-2'>
           <Highlight forceExpanded preventEscape className='sql'>
-            {CLICKHOUSE_SETUP_SQL}
+            {sql}
           </Highlight>
           <div className='flex-column hljs-docs'>
             <Button
-              onClick={() => Utils.copyToClipboard(CLICKHOUSE_SETUP_SQL)}
+              onClick={() => Utils.copyToClipboard(sql)}
               theme='primary'
               size='xSmall'
             >
diff --git a/frontend/web/components/pages/environment-settings/tabs/warehouse-tab/__tests__/clickhouseSetupSql.test.ts b/frontend/web/components/pages/environment-settings/tabs/warehouse-tab/__tests__/clickhouseSetupSql.test.ts
new file mode 100644
index 000000000000..ef810e5c418e
--- /dev/null
+++ b/frontend/web/components/pages/environment-settings/tabs/warehouse-tab/__tests__/clickhouseSetupSql.test.ts
@@ -0,0 +1,18 @@
+import { CLICKHOUSE_DEFAULTS } from 'components/pages/environment-settings/tabs/warehouse-tab/clickhouseConfig'
+import { getClickHouseSetupSql } from 'components/pages/environment-settings/tabs/warehouse-tab/clickhouseSetupSql'
+
+describe('getClickHouseSetupSql', () => {
+  it('interpolates the configured database into both statements', () => {
+    const sql = getClickHouseSetupSql('analytics')
+
+    expect(sql).toContain('CREATE DATABASE IF NOT EXISTS analytics;')
+    expect(sql).toContain('CREATE TABLE IF NOT EXISTS analytics.events')
+    expect(sql).not.toContain('flagsmith_exp')
+  })
+
+  it('matches the form default database', () => {
+    expect(getClickHouseSetupSql(CLICKHOUSE_DEFAULTS.database)).toContain(
+      'CREATE TABLE IF NOT EXISTS flagsmith_exp.events',
+    )
+  })
+})
diff --git a/frontend/web/components/pages/environment-settings/tabs/warehouse-tab/clickhouseConfig.ts b/frontend/web/components/pages/environment-settings/tabs/warehouse-tab/clickhouseConfig.ts
index a727a392802b..1d4831313f0b 100644
--- a/frontend/web/components/pages/environment-settings/tabs/warehouse-tab/clickhouseConfig.ts
+++ b/frontend/web/components/pages/environment-settings/tabs/warehouse-tab/clickhouseConfig.ts
@@ -1,7 +1,7 @@
 import { ClickHouseConfig } from 'common/types/responses'
 
 export const CLICKHOUSE_DEFAULTS: ClickHouseConfig = {
-  database: 'flagsmith',
+  database: 'flagsmith_exp',
   host: '',
   port: 9440,
   secure: true,
diff --git a/frontend/web/components/pages/environment-settings/tabs/warehouse-tab/clickhouseSetupSql.ts b/frontend/web/components/pages/environment-settings/tabs/warehouse-tab/clickhouseSetupSql.ts
index 3a0d6530d4ba..7b30835c626f 100644
--- a/frontend/web/components/pages/environment-settings/tabs/warehouse-tab/clickhouseSetupSql.ts
+++ b/frontend/web/components/pages/environment-settings/tabs/warehouse-tab/clickhouseSetupSql.ts
@@ -1,6 +1,8 @@
-export const CLICKHOUSE_SETUP_SQL = `CREATE DATABASE IF NOT EXISTS flagsmith_exp;
+export const getClickHouseSetupSql = (
+  database: string,
+): string => `CREATE DATABASE IF NOT EXISTS ${database};
 
-CREATE TABLE IF NOT EXISTS flagsmith_exp.events
+CREATE TABLE IF NOT EXISTS ${database}.events
 (
     environment_key      LowCardinality(String),
     event                LowCardinality(String),

From fe1b7b2ba5fe92d6e06a0f128fd9921c2d04130e Mon Sep 17 00:00:00 2001
From: wadii <wadii.zaim@flagsmith.com>
Date: Tue, 28 Jul 2026 11:10:26 +0200
Subject: [PATCH 04/11] feat: expand setup SQL by default in the connect form

---
 .../tabs/warehouse-tab/ClickHouseConfigForm.tsx                  | 1 +
 1 file changed, 1 insertion(+)

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 5aa9cc71e898..716ac9c212de 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
@@ -233,6 +233,7 @@ const ClickHouseConfigForm: FC<ClickHouseConfigFormProps> = ({
 
         <WarehouseSetupSqlHelp
           database={database.trim() || CLICKHOUSE_DEFAULTS.database}
+          showInitially={!isEdit}
         />
 
         {error && <ErrorMessage error={getWarehouseErrorMessage(isEdit)} />}

From 70757db1d0fc5fc26e5d4b29de10ca4c731a4c88 Mon Sep 17 00:00:00 2001
From: wadii <wadii.zaim@flagsmith.com>
Date: Tue, 28 Jul 2026 13:17:38 +0200
Subject: [PATCH 05/11] fix: derive setup SQL visibility so it collapses once
 events arrive

---
 .../experimentation/connect-a-warehouse.md    |  3 +++
 .../warehouse-tab/ClickHouseConfigForm.tsx    |  2 +-
 .../warehouse-tab/WarehouseSetupSqlHelp.tsx   |  7 +++++--
 .../__tests__/clickhouseSetupSql.test.ts      | 20 +++++++++++++++++++
 .../__tests__/warehouseFormUtils.test.ts      | 13 ++++++++++++
 .../tabs/warehouse-tab/warehouseFormUtils.ts  |  5 +++++
 6 files changed, 47 insertions(+), 3 deletions(-)

diff --git a/docs/docs/experimentation/connect-a-warehouse.md b/docs/docs/experimentation/connect-a-warehouse.md
index 4e494cda7346..cf0b6b1f1765 100644
--- a/docs/docs/experimentation/connect-a-warehouse.md
+++ b/docs/docs/experimentation/connect-a-warehouse.md
@@ -95,6 +95,9 @@ Instead of the managed Flagsmith warehouse, you can store experiment events in y
 
 Connections use the ClickHouse native protocol, with TLS enabled by default.
 
+Experiment results and exposure queries are currently computed from the managed Flagsmith warehouse; serving results
+directly from your own ClickHouse instance is not supported yet.
+
 ## Coming soon
 
 Bring your own warehouse: connections for **Snowflake**, **BigQuery** and **Databricks**, so experiment results are
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 716ac9c212de..69047cf8f231 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
@@ -233,7 +233,7 @@ const ClickHouseConfigForm: FC<ClickHouseConfigFormProps> = ({
 
         <WarehouseSetupSqlHelp
           database={database.trim() || CLICKHOUSE_DEFAULTS.database}
-          showInitially={!isEdit}
+          showInitially={!isEdit || testState === 'errored'}
         />
 
         {error && <ErrorMessage error={getWarehouseErrorMessage(isEdit)} />}
diff --git a/frontend/web/components/pages/environment-settings/tabs/warehouse-tab/WarehouseSetupSqlHelp.tsx b/frontend/web/components/pages/environment-settings/tabs/warehouse-tab/WarehouseSetupSqlHelp.tsx
index 79bcec14ce41..677b860de27c 100644
--- a/frontend/web/components/pages/environment-settings/tabs/warehouse-tab/WarehouseSetupSqlHelp.tsx
+++ b/frontend/web/components/pages/environment-settings/tabs/warehouse-tab/WarehouseSetupSqlHelp.tsx
@@ -15,7 +15,10 @@ const WarehouseSetupSqlHelp: FC<WarehouseSetupSqlHelpProps> = ({
   database,
   showInitially,
 }) => {
-  const [visible, setVisible] = useState(!!showInitially)
+  // Visibility follows showInitially until the user toggles; their choice
+  // then stays authoritative across re-renders.
+  const [override, setOverride] = useState<boolean | null>(null)
+  const visible = override ?? !!showInitially
   const sql = getClickHouseSetupSql(database)
 
   return (
@@ -25,7 +28,7 @@ const WarehouseSetupSqlHelp: FC<WarehouseSetupSqlHelpProps> = ({
         prefix='Database setup:'
         label='Run once against your ClickHouse instance to create the events table'
         expanded={visible}
-        onClick={() => setVisible(!visible)}
+        onClick={() => setOverride(!visible)}
       />
       {visible && (
         <div className='hljs-container mt-2 mb-2'>
diff --git a/frontend/web/components/pages/environment-settings/tabs/warehouse-tab/__tests__/clickhouseSetupSql.test.ts b/frontend/web/components/pages/environment-settings/tabs/warehouse-tab/__tests__/clickhouseSetupSql.test.ts
index ef810e5c418e..33c1ce5b660b 100644
--- a/frontend/web/components/pages/environment-settings/tabs/warehouse-tab/__tests__/clickhouseSetupSql.test.ts
+++ b/frontend/web/components/pages/environment-settings/tabs/warehouse-tab/__tests__/clickhouseSetupSql.test.ts
@@ -1,3 +1,5 @@
+import fs from 'fs'
+import path from 'path'
 import { CLICKHOUSE_DEFAULTS } from 'components/pages/environment-settings/tabs/warehouse-tab/clickhouseConfig'
 import { getClickHouseSetupSql } from 'components/pages/environment-settings/tabs/warehouse-tab/clickhouseSetupSql'
 
@@ -15,4 +17,22 @@ describe('getClickHouseSetupSql', () => {
       'CREATE TABLE IF NOT EXISTS flagsmith_exp.events',
     )
   })
+
+  it('matches the copy of the DDL in the documentation', () => {
+    const doc = fs.readFileSync(
+      path.join(
+        __dirname,
+        '../../../../../../../../docs/docs/experimentation/connect-a-warehouse.md',
+      ),
+      'utf8',
+    )
+    const fencedSql = doc.match(/```sql\n([\s\S]*?)```/)?.[1] ?? ''
+    const dedented = fencedSql
+      .split('\n')
+      .map((line) => line.replace(/^ {3}/, ''))
+      .join('\n')
+      .trim()
+
+    expect(dedented).toEqual(getClickHouseSetupSql('flagsmith_exp'))
+  })
 })
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 588d487ac737..f079b5fd0786 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
@@ -9,4 +9,17 @@ describe('getTestFailureWarning', () => {
   ])('formats detail %p with a single sentence break', (detail, expected) => {
     expect(getTestFailureWarning(detail)).toContain(expected)
   })
+
+  it('does not claim a failed connection when only the events table is missing', () => {
+    const detail =
+      'Events table not found in the configured database. Run the setup SQL to create it.'
+
+    const warning = getTestFailureWarning(detail)
+
+    expect(warning).not.toContain("couldn't establish a connection")
+    expect(warning).toContain(detail)
+    expect(warning).toContain(
+      "events won't be delivered until the table exists",
+    )
+  })
 })
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 4dfe4413817a..6899e27a7040 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
@@ -9,6 +9,11 @@ export const getWarehouseErrorMessage = (isEdit: boolean): string =>
   } warehouse connection. Please try again.`
 
 export const getTestFailureWarning = (detail: string | null): string => {
+  // The missing-table detail means the connection itself succeeded, so the
+  // "couldn't establish a connection" lead-in would be wrong.
+  if (detail?.startsWith('Events table not found')) {
+    return `${detail} You can save anyway and test again later, but events won't be delivered until the table exists.`
+  }
   const reason = detail ? `: ${detail}${/[.!?]$/.test(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.`
 }

From d3f9f92380e8506fc74fa2ce0cd7a099a1893c76 Mon Sep 17 00:00:00 2001
From: wadii <wadii.zaim@flagsmith.com>
Date: Tue, 28 Jul 2026 14:52:34 +0200
Subject: [PATCH 06/11] feat: two-step ClickHouse creation flow with user setup
 SQL and first-event nudge

---
 .../experimentation/connect-a-warehouse.md    | 22 ++++---
 .../warehouse-tab/ClickHouseConfigForm.tsx    | 20 ++++---
 .../warehouse-tab/WarehouseConnectionCard.tsx |  7 ++-
 .../tabs/warehouse-tab/WarehouseSetup.scss    | 56 ++++++++++++++++++
 .../tabs/warehouse-tab/WarehouseSetup.tsx     | 57 +++++++++++++++++--
 .../warehouse-tab/WarehouseSetupSqlHelp.tsx   | 24 +-------
 .../warehouse-tab/WarehouseSqlSnippet.tsx     | 30 ++++++++++
 .../__tests__/clickhouseSetupSql.test.ts      | 23 +++++++-
 .../tabs/warehouse-tab/clickhouseConfig.ts    |  2 +-
 .../tabs/warehouse-tab/clickhouseSetupSql.ts  | 10 ++++
 10 files changed, 204 insertions(+), 47 deletions(-)
 create mode 100644 frontend/web/components/pages/environment-settings/tabs/warehouse-tab/WarehouseSqlSnippet.tsx

diff --git a/docs/docs/experimentation/connect-a-warehouse.md b/docs/docs/experimentation/connect-a-warehouse.md
index cf0b6b1f1765..ae98c25f6284 100644
--- a/docs/docs/experimentation/connect-a-warehouse.md
+++ b/docs/docs/experimentation/connect-a-warehouse.md
@@ -54,12 +54,19 @@ The current status is shown on the warehouse card in **Environment Settings > Wa
 
 Instead of the managed Flagsmith warehouse, you can store experiment events in your own **ClickHouse** instance.
 
-1. Create the database and events table by running the following against your ClickHouse instance, using an
-   administrative user (the statements require `CREATE DATABASE` and `CREATE TABLE` privileges). This is a one-off setup
-   step; the same SQL is available to copy from the warehouse card in the Flagsmith dashboard, adjusted to the database
-   name you configure.
+1. Configure your instance by running the following against it, using an administrative user (the statements require
+   `CREATE USER`, `GRANT`, `CREATE DATABASE` and `CREATE TABLE` privileges). Replace `<USERNAME>` and
+   `<YOUR_SECURED_PASSWORD>` with your own values. This is a one-off setup step; the same SQL is available to copy from
+   the Flagsmith dashboard.
 
    ```sql
+   -- Create a dedicated user for Flagsmith
+   CREATE USER IF NOT EXISTS <USERNAME> IDENTIFIED BY '<YOUR_SECURED_PASSWORD>';
+
+   -- Allow it to write and read experiment events
+   GRANT INSERT, SELECT ON flagsmith_exp.* TO <USERNAME>;
+
+   -- Create the database and events table
    CREATE DATABASE IF NOT EXISTS flagsmith_exp;
 
    CREATE TABLE IF NOT EXISTS flagsmith_exp.events
@@ -88,10 +95,11 @@ Instead of the managed Flagsmith warehouse, you can store experiment events in y
    ```
 
 2. Go to **Environment Settings > Warehouse**, select **ClickHouse** and enter your connection details: host, port (9440
-   by default, the native protocol port), database (`flagsmith_exp` by default), username and password. Use a
-   least-privileged runtime user rather than the administrative one — it needs `INSERT` and `SELECT` on the `events`
-   table in the configured database.
+   by default, the native protocol port), database (`flagsmith_exp` by default), and the username and password of the
+   user you created in step 1.
 3. Click **Test connection**. Once the test succeeds, save the connection.
+4. Click **Send your first event** on the connection card to verify events are arriving in your warehouse; the button
+   disappears once the first event is received.
 
 Connections use the ClickHouse native protocol, with TLS enabled by default.
 
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 69047cf8f231..0f6ba6139af6 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
@@ -51,7 +51,7 @@ const ClickHouseConfigForm: FC<ClickHouseConfigFormProps> = ({
   const [database, setDatabase] = useState(defaults.database)
   const [username, setUsername] = useState(defaults.username)
   const [password, setPassword] = useState('')
-  const [secure, setSecure] = useState(defaults.secure)
+  const [secure] = useState(defaults.secure)
   const [isSaving, setIsSaving] = useState(false)
   const [error, setError] = useState(false)
   const [testState, setTestState] = useState<TestState>('idle')
@@ -148,7 +148,7 @@ const ClickHouseConfigForm: FC<ClickHouseConfigFormProps> = ({
         </div>
 
         <div className='wh-config-form__field'>
-          <label className='wh-config-form__label'>Name</label>
+          <label className='wh-config-form__label'>Name this warehouse</label>
           <Input
             value={name}
             onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
@@ -180,7 +180,7 @@ const ClickHouseConfigForm: FC<ClickHouseConfigFormProps> = ({
             />
           </div>
           <div className='wh-config-form__field'>
-            <label className='wh-config-form__label'>Database</label>
+            <label className='wh-config-form__label'>Database Name</label>
             <Input
               value={database}
               onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
@@ -198,7 +198,7 @@ const ClickHouseConfigForm: FC<ClickHouseConfigFormProps> = ({
             onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
               setField(setUsername)(e.target.value)
             }
-            placeholder='default'
+            placeholder='The user from the setup script'
           />
         </div>
 
@@ -224,17 +224,19 @@ const ClickHouseConfigForm: FC<ClickHouseConfigFormProps> = ({
 
         <div className='wh-config-form__field'>
           <div className='d-flex flex-row align-items-center gap-2'>
-            <Switch checked={secure} onChange={setField(setSecure)} />
+            <Switch checked={secure} disabled />
             <label className='wh-config-form__label mb-0'>
               Secure connection (TLS)
             </label>
           </div>
         </div>
 
-        <WarehouseSetupSqlHelp
-          database={database.trim() || CLICKHOUSE_DEFAULTS.database}
-          showInitially={!isEdit || testState === 'errored'}
-        />
+        {isEdit && (
+          <WarehouseSetupSqlHelp
+            database={database.trim() || CLICKHOUSE_DEFAULTS.database}
+            showInitially={testState === 'errored'}
+          />
+        )}
 
         {error && <ErrorMessage error={getWarehouseErrorMessage(isEdit)} />}
 
diff --git a/frontend/web/components/pages/environment-settings/tabs/warehouse-tab/WarehouseConnectionCard.tsx b/frontend/web/components/pages/environment-settings/tabs/warehouse-tab/WarehouseConnectionCard.tsx
index a2fbd79621ab..90ae56f851a7 100644
--- a/frontend/web/components/pages/environment-settings/tabs/warehouse-tab/WarehouseConnectionCard.tsx
+++ b/frontend/web/components/pages/environment-settings/tabs/warehouse-tab/WarehouseConnectionCard.tsx
@@ -59,6 +59,11 @@ const WarehouseConnectionCard: FC<WarehouseConnectionCardProps> = ({
   const isFlagsmith = connection.warehouse_type === 'flagsmith'
   const isPending = connection.status === 'pending_connection'
   const isConnected = connection.status === 'connected'
+  // ClickHouse connections are born connected, so the first-event nudge stays
+  // until events actually arrive in the customer's warehouse.
+  const showSendFirstEvent = isFlagsmith
+    ? !isPending && !isConnected
+    : !connection.total_events_received
 
   const handleDelete = () => {
     openConfirm({
@@ -170,7 +175,7 @@ const WarehouseConnectionCard: FC<WarehouseConnectionCardProps> = ({
             {isSendingTestEvent ? 'Testing...' : 'Test connection'}
           </Button>
         )}
-        {isFlagsmith && !isPending && !isConnected && (
+        {showSendFirstEvent && (
           <Button
             id='warehouse-send-first-event'
             theme='primary'
diff --git a/frontend/web/components/pages/environment-settings/tabs/warehouse-tab/WarehouseSetup.scss b/frontend/web/components/pages/environment-settings/tabs/warehouse-tab/WarehouseSetup.scss
index c6cc747d359c..84462e63d8ad 100644
--- a/frontend/web/components/pages/environment-settings/tabs/warehouse-tab/WarehouseSetup.scss
+++ b/frontend/web/components/pages/environment-settings/tabs/warehouse-tab/WarehouseSetup.scss
@@ -37,6 +37,62 @@
     border-radius: var(--radius-lg);
   }
 
+  &__steps {
+    display: flex;
+    flex-direction: column;
+  }
+
+  &__step {
+    display: flex;
+    gap: 16px;
+
+    &:not(:last-child) &-content {
+      padding-bottom: 32px;
+    }
+  }
+
+  &__step-rail {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 4px;
+  }
+
+  &__step-marker {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 28px;
+    height: 28px;
+    flex-shrink: 0;
+    border: 1px solid var(--color-border-default);
+    border-radius: 50%;
+    font-weight: var(--font-weight-semibold);
+    color: var(--color-text-secondary);
+    background: var(--color-surface-subtle);
+  }
+
+  &__step-connector {
+    flex: 1;
+    width: 1px;
+    background: var(--color-border-default);
+  }
+
+  &__step-toggle {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 0;
+    border: none;
+    background: none;
+    text-align: left;
+  }
+
+  &__step-content {
+    flex: 1;
+    min-width: 0;
+  }
+
   &__flagsmith-description {
     font-size: 16px;
     font-weight: 700;
diff --git a/frontend/web/components/pages/environment-settings/tabs/warehouse-tab/WarehouseSetup.tsx b/frontend/web/components/pages/environment-settings/tabs/warehouse-tab/WarehouseSetup.tsx
index 2acd69cdc328..8bb93546eb26 100644
--- a/frontend/web/components/pages/environment-settings/tabs/warehouse-tab/WarehouseSetup.tsx
+++ b/frontend/web/components/pages/environment-settings/tabs/warehouse-tab/WarehouseSetup.tsx
@@ -7,6 +7,8 @@ import SelectableCard from 'components/base/SelectableCard'
 import ConfigForm from './ConfigForm'
 import Utils from 'common/utils/utils'
 import ClickHouseConfigForm from './ClickHouseConfigForm'
+import WarehouseSqlSnippet from './WarehouseSqlSnippet'
+import { getClickHouseOnboardingSql } from './clickhouseSetupSql'
 import { ClickHouseFormData } from './clickhouseConfig'
 import './WarehouseSetup.scss'
 
@@ -29,6 +31,7 @@ const WarehouseSetup: FC<WarehouseSetupProps> = ({
 }) => {
   const [selectedType, setSelectedType] =
     useState<WarehouseTypeOption>('flagsmith')
+  const [sqlExpanded, setSqlExpanded] = useState(true)
   const clickhouseEnabled = Utils.getFlagsmithHasFeature('clickhouse_warehouse')
   const configurableTypes: WarehouseTypeOption[] = clickhouseEnabled
     ? ['flagsmith', 'clickhouse']
@@ -132,10 +135,56 @@ const WarehouseSetup: FC<WarehouseSetupProps> = ({
       )}
 
       {selectedType === 'clickhouse' && (
-        <ClickHouseConfigForm
-          environmentId={environmentId}
-          onSave={onCreateClickHouse}
-        />
+        <div className='warehouse-setup__steps'>
+          <div className='warehouse-setup__step'>
+            <div className='warehouse-setup__step-rail'>
+              <div className='warehouse-setup__step-marker'>1</div>
+              <div className='warehouse-setup__step-connector' />
+            </div>
+            <div className='warehouse-setup__step-content'>
+              <button
+                type='button'
+                className='warehouse-setup__step-toggle mb-2'
+                aria-expanded={sqlExpanded}
+                onClick={() => setSqlExpanded(!sqlExpanded)}
+              >
+                <h6 className='mb-0'>
+                  Configure your warehouse for experimentation
+                </h6>
+                <Icon
+                  name={sqlExpanded ? 'chevron-up' : 'chevron-down'}
+                  width={22}
+                  fill='#656D7B'
+                />
+              </button>
+              {sqlExpanded && (
+                <>
+                  <p className='text-muted mb-3'>
+                    Run this once against your ClickHouse instance using an
+                    administrative user. Replace {'<USERNAME>'} and{' '}
+                    {'<YOUR_SECURED_PASSWORD>'} with your own values.
+                  </p>
+                  <WarehouseSqlSnippet sql={getClickHouseOnboardingSql()} />
+                </>
+              )}
+            </div>
+          </div>
+          <div className='warehouse-setup__step'>
+            <div className='warehouse-setup__step-rail'>
+              <div className='warehouse-setup__step-marker'>2</div>
+            </div>
+            <div className='warehouse-setup__step-content'>
+              <h6 className='mb-2'>Connect your warehouse</h6>
+              <p className='text-muted mb-3'>
+                Enter the connection details for the user you created in step 1.
+              </p>
+              <ClickHouseConfigForm
+                environmentId={environmentId}
+                onSave={onCreateClickHouse}
+              />
+            </div>
+          </div>
+        </div>
       )}
 
       {!configurableTypes.includes(selectedType) && (
diff --git a/frontend/web/components/pages/environment-settings/tabs/warehouse-tab/WarehouseSetupSqlHelp.tsx b/frontend/web/components/pages/environment-settings/tabs/warehouse-tab/WarehouseSetupSqlHelp.tsx
index 677b860de27c..4458c6fb18dc 100644
--- a/frontend/web/components/pages/environment-settings/tabs/warehouse-tab/WarehouseSetupSqlHelp.tsx
+++ b/frontend/web/components/pages/environment-settings/tabs/warehouse-tab/WarehouseSetupSqlHelp.tsx
@@ -1,9 +1,6 @@
 import React, { FC, useState } from 'react'
-import Button from 'components/base/forms/Button'
 import CalloutBar from 'components/CalloutBar'
-import Highlight from 'components/Highlight'
-import Icon from 'components/icons/Icon'
-import Utils from 'common/utils/utils'
+import WarehouseSqlSnippet from './WarehouseSqlSnippet'
 import { getClickHouseSetupSql } from './clickhouseSetupSql'
 
 type WarehouseSetupSqlHelpProps = {
@@ -19,7 +16,6 @@ const WarehouseSetupSqlHelp: FC<WarehouseSetupSqlHelpProps> = ({
   // then stays authoritative across re-renders.
   const [override, setOverride] = useState<boolean | null>(null)
   const visible = override ?? !!showInitially
-  const sql = getClickHouseSetupSql(database)
 
   return (
     <div>
@@ -30,23 +26,7 @@ const WarehouseSetupSqlHelp: FC<WarehouseSetupSqlHelpProps> = ({
         expanded={visible}
         onClick={() => setOverride(!visible)}
       />
-      {visible && (
-        <div className='hljs-container mt-2 mb-2'>
-          <Highlight forceExpanded preventEscape className='sql'>
-            {sql}
-          </Highlight>
-          <div className='flex-column hljs-docs'>
-            <Button
-              onClick={() => Utils.copyToClipboard(sql)}
-              theme='primary'
-              size='xSmall'
-            >
-              <Icon name='copy' width={16} fill='white' />
-              Copy Code
-            </Button>
-          </div>
-        </div>
-      )}
+      {visible && <WarehouseSqlSnippet sql={getClickHouseSetupSql(database)} />}
     </div>
   )
 }
diff --git a/frontend/web/components/pages/environment-settings/tabs/warehouse-tab/WarehouseSqlSnippet.tsx b/frontend/web/components/pages/environment-settings/tabs/warehouse-tab/WarehouseSqlSnippet.tsx
new file mode 100644
index 000000000000..1621e618efb1
--- /dev/null
+++ b/frontend/web/components/pages/environment-settings/tabs/warehouse-tab/WarehouseSqlSnippet.tsx
@@ -0,0 +1,30 @@
+import React, { FC } from 'react'
+import Button from 'components/base/forms/Button'
+import Highlight from 'components/Highlight'
+import Icon from 'components/icons/Icon'
+import Utils from 'common/utils/utils'
+
+type WarehouseSqlSnippetProps = {
+  sql: string
+}
+
+const WarehouseSqlSnippet: FC<WarehouseSqlSnippetProps> = ({ sql }) => (
+  <div className='hljs-container mt-2 mb-2'>
+    <Highlight forceExpanded className='sql'>
+      {sql}
+    </Highlight>
+    <div className='flex-column hljs-docs'>
+      <Button
+        onClick={() => Utils.copyToClipboard(sql)}
+        theme='primary'
+        size='xSmall'
+      >
+        <Icon name='copy' width={16} fill='white' />
+        Copy Code
+      </Button>
+    </div>
+  </div>
+)
+
+WarehouseSqlSnippet.displayName = 'WarehouseSqlSnippet'
+export default WarehouseSqlSnippet
diff --git a/frontend/web/components/pages/environment-settings/tabs/warehouse-tab/__tests__/clickhouseSetupSql.test.ts b/frontend/web/components/pages/environment-settings/tabs/warehouse-tab/__tests__/clickhouseSetupSql.test.ts
index 33c1ce5b660b..e201013465eb 100644
--- a/frontend/web/components/pages/environment-settings/tabs/warehouse-tab/__tests__/clickhouseSetupSql.test.ts
+++ b/frontend/web/components/pages/environment-settings/tabs/warehouse-tab/__tests__/clickhouseSetupSql.test.ts
@@ -1,7 +1,10 @@
 import fs from 'fs'
 import path from 'path'
 import { CLICKHOUSE_DEFAULTS } from 'components/pages/environment-settings/tabs/warehouse-tab/clickhouseConfig'
-import { getClickHouseSetupSql } from 'components/pages/environment-settings/tabs/warehouse-tab/clickhouseSetupSql'
+import {
+  getClickHouseOnboardingSql,
+  getClickHouseSetupSql,
+} from 'components/pages/environment-settings/tabs/warehouse-tab/clickhouseSetupSql'
 
 describe('getClickHouseSetupSql', () => {
   it('interpolates the configured database into both statements', () => {
@@ -17,8 +20,22 @@ describe('getClickHouseSetupSql', () => {
       'CREATE TABLE IF NOT EXISTS flagsmith_exp.events',
     )
   })
+})
+
+describe('getClickHouseOnboardingSql', () => {
+  it('creates a placeholder user, grants it access, and includes the DDL', () => {
+    const sql = getClickHouseOnboardingSql()
+
+    expect(sql).toContain(
+      "CREATE USER IF NOT EXISTS <USERNAME> IDENTIFIED BY '<YOUR_SECURED_PASSWORD>';",
+    )
+    expect(sql).toContain(
+      'GRANT INSERT, SELECT ON flagsmith_exp.* TO <USERNAME>;',
+    )
+    expect(sql).toContain(getClickHouseSetupSql('flagsmith_exp'))
+  })
 
-  it('matches the copy of the DDL in the documentation', () => {
+  it('matches the copy of the script in the documentation', () => {
     const doc = fs.readFileSync(
       path.join(
         __dirname,
@@ -33,6 +50,6 @@ describe('getClickHouseSetupSql', () => {
       .join('\n')
       .trim()
 
-    expect(dedented).toEqual(getClickHouseSetupSql('flagsmith_exp'))
+    expect(dedented).toEqual(getClickHouseOnboardingSql())
   })
 })
diff --git a/frontend/web/components/pages/environment-settings/tabs/warehouse-tab/clickhouseConfig.ts b/frontend/web/components/pages/environment-settings/tabs/warehouse-tab/clickhouseConfig.ts
index 1d4831313f0b..81bd293a927a 100644
--- a/frontend/web/components/pages/environment-settings/tabs/warehouse-tab/clickhouseConfig.ts
+++ b/frontend/web/components/pages/environment-settings/tabs/warehouse-tab/clickhouseConfig.ts
@@ -5,7 +5,7 @@ export const CLICKHOUSE_DEFAULTS: ClickHouseConfig = {
   host: '',
   port: 9440,
   secure: true,
-  username: 'default',
+  username: '',
 }
 
 export type ClickHouseFormState = {
diff --git a/frontend/web/components/pages/environment-settings/tabs/warehouse-tab/clickhouseSetupSql.ts b/frontend/web/components/pages/environment-settings/tabs/warehouse-tab/clickhouseSetupSql.ts
index 7b30835c626f..62fea650e876 100644
--- a/frontend/web/components/pages/environment-settings/tabs/warehouse-tab/clickhouseSetupSql.ts
+++ b/frontend/web/components/pages/environment-settings/tabs/warehouse-tab/clickhouseSetupSql.ts
@@ -25,3 +25,13 @@ CREATE TABLE IF NOT EXISTS ${database}.events
 ENGINE = MergeTree
 PARTITION BY toYYYYMMDD(timestamp)
 ORDER BY (environment_key, event, feature_name, timestamp, identifier);`
+
+export const getClickHouseOnboardingSql =
+  (): string => `-- Create a dedicated user for Flagsmith
+CREATE USER IF NOT EXISTS <USERNAME> IDENTIFIED BY '<YOUR_SECURED_PASSWORD>';
+
+-- Allow it to write and read experiment events
+GRANT INSERT, SELECT ON flagsmith_exp.* TO <USERNAME>;
+
+-- Create the database and events table
+${getClickHouseSetupSql('flagsmith_exp')}`

From 8df5da25b46df6aa73dde5cc075726311af972a5 Mon Sep 17 00:00:00 2001
From: wadii <wadii.zaim@flagsmith.com>
Date: Wed, 29 Jul 2026 09:59:57 +0200
Subject: [PATCH 07/11] feat: scoped grants and sha256 password for setup SQL
 user

---
 docs/docs/experimentation/connect-a-warehouse.md    | 13 ++++++++-----
 .../__tests__/clickhouseSetupSql.test.ts            |  8 ++++++--
 .../tabs/warehouse-tab/clickhouseSetupSql.ts        |  8 ++++++--
 3 files changed, 20 insertions(+), 9 deletions(-)

diff --git a/docs/docs/experimentation/connect-a-warehouse.md b/docs/docs/experimentation/connect-a-warehouse.md
index ae98c25f6284..1b28b31293bc 100644
--- a/docs/docs/experimentation/connect-a-warehouse.md
+++ b/docs/docs/experimentation/connect-a-warehouse.md
@@ -55,16 +55,19 @@ The current status is shown on the warehouse card in **Environment Settings > Wa
 Instead of the managed Flagsmith warehouse, you can store experiment events in your own **ClickHouse** instance.
 
 1. Configure your instance by running the following against it, using an administrative user (the statements require
-   `CREATE USER`, `GRANT`, `CREATE DATABASE` and `CREATE TABLE` privileges). Replace `<USERNAME>` and
-   `<YOUR_SECURED_PASSWORD>` with your own values. This is a one-off setup step; the same SQL is available to copy from
-   the Flagsmith dashboard.
+   `CREATE USER`, `GRANT`, `CREATE DATABASE` and `CREATE TABLE` privileges). Replace `<USER>` and `<CHANGE_ME_PASSWORD>`
+   with your own values. This is a one-off setup step; the same SQL is available to copy from the Flagsmith dashboard.
 
    ```sql
    -- Create a dedicated user for Flagsmith
-   CREATE USER IF NOT EXISTS <USERNAME> IDENTIFIED BY '<YOUR_SECURED_PASSWORD>';
+   CREATE USER IF NOT EXISTS <USER>
+       IDENTIFIED WITH sha256_password BY '<CHANGE_ME_PASSWORD>';
 
    -- Allow it to write and read experiment events
-   GRANT INSERT, SELECT ON flagsmith_exp.* TO <USERNAME>;
+   GRANT SELECT, INSERT ON flagsmith_exp.events TO <USER>;
+
+   -- Allow it to check the events table exists
+   GRANT SHOW TABLES, SHOW COLUMNS ON flagsmith_exp.* TO <USER>;
 
    -- Create the database and events table
    CREATE DATABASE IF NOT EXISTS flagsmith_exp;
diff --git a/frontend/web/components/pages/environment-settings/tabs/warehouse-tab/__tests__/clickhouseSetupSql.test.ts b/frontend/web/components/pages/environment-settings/tabs/warehouse-tab/__tests__/clickhouseSetupSql.test.ts
index e201013465eb..a5562eec5a1b 100644
--- a/frontend/web/components/pages/environment-settings/tabs/warehouse-tab/__tests__/clickhouseSetupSql.test.ts
+++ b/frontend/web/components/pages/environment-settings/tabs/warehouse-tab/__tests__/clickhouseSetupSql.test.ts
@@ -26,11 +26,15 @@ describe('getClickHouseOnboardingSql', () => {
   it('creates a placeholder user, grants it access, and includes the DDL', () => {
     const sql = getClickHouseOnboardingSql()
 
+    expect(sql).toContain('CREATE USER IF NOT EXISTS <USER>')
     expect(sql).toContain(
-      "CREATE USER IF NOT EXISTS <USERNAME> IDENTIFIED BY '<YOUR_SECURED_PASSWORD>';",
+      "IDENTIFIED WITH sha256_password BY '<CHANGE_ME_PASSWORD>';",
     )
     expect(sql).toContain(
-      'GRANT INSERT, SELECT ON flagsmith_exp.* TO <USERNAME>;',
+      'GRANT SELECT, INSERT ON flagsmith_exp.events TO <USER>;',
+    )
+    expect(sql).toContain(
+      'GRANT SHOW TABLES, SHOW COLUMNS ON flagsmith_exp.* TO <USER>;',
     )
     expect(sql).toContain(getClickHouseSetupSql('flagsmith_exp'))
   })
diff --git a/frontend/web/components/pages/environment-settings/tabs/warehouse-tab/clickhouseSetupSql.ts b/frontend/web/components/pages/environment-settings/tabs/warehouse-tab/clickhouseSetupSql.ts
index 62fea650e876..048829449399 100644
--- a/frontend/web/components/pages/environment-settings/tabs/warehouse-tab/clickhouseSetupSql.ts
+++ b/frontend/web/components/pages/environment-settings/tabs/warehouse-tab/clickhouseSetupSql.ts
@@ -28,10 +28,14 @@ ORDER BY (environment_key, event, feature_name, timestamp, identifier);`
 
 export const getClickHouseOnboardingSql =
   (): string => `-- Create a dedicated user for Flagsmith
-CREATE USER IF NOT EXISTS <USERNAME> IDENTIFIED BY '<YOUR_SECURED_PASSWORD>';
+CREATE USER IF NOT EXISTS <USER>
+    IDENTIFIED WITH sha256_password BY '<CHANGE_ME_PASSWORD>';
 
 -- Allow it to write and read experiment events
-GRANT INSERT, SELECT ON flagsmith_exp.* TO <USERNAME>;
+GRANT SELECT, INSERT ON flagsmith_exp.events TO <USER>;
+
+-- Allow it to check the events table exists
+GRANT SHOW TABLES, SHOW COLUMNS ON flagsmith_exp.* TO <USER>;
 
 -- Create the database and events table
 ${getClickHouseSetupSql('flagsmith_exp')}`

From fbfde0a08c0cf102eb18e8edb95514edc3b114b2 Mon Sep 17 00:00:00 2001
From: wadii <wadii.zaim@flagsmith.com>
Date: Wed, 29 Jul 2026 11:27:56 +0200
Subject: [PATCH 08/11] feat: collapse database setup below the SDK snippet and
 hide test connection once connected

---
 .../tabs/warehouse-tab/WarehouseConnectionCard.tsx     | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/frontend/web/components/pages/environment-settings/tabs/warehouse-tab/WarehouseConnectionCard.tsx b/frontend/web/components/pages/environment-settings/tabs/warehouse-tab/WarehouseConnectionCard.tsx
index 90ae56f851a7..4989590c7ffe 100644
--- a/frontend/web/components/pages/environment-settings/tabs/warehouse-tab/WarehouseConnectionCard.tsx
+++ b/frontend/web/components/pages/environment-settings/tabs/warehouse-tab/WarehouseConnectionCard.tsx
@@ -63,7 +63,8 @@ const WarehouseConnectionCard: FC<WarehouseConnectionCardProps> = ({
   // until events actually arrive in the customer's warehouse.
   const showSendFirstEvent = isFlagsmith
     ? !isPending && !isConnected
-    : !connection.total_events_received
+    : connection.warehouse_type === 'clickhouse' &&
+      !connection.total_events_received
 
   const handleDelete = () => {
     openConfirm({
@@ -149,8 +150,9 @@ const WarehouseConnectionCard: FC<WarehouseConnectionCardProps> = ({
           </span>
         </div>
       )}
+      <WarehouseEventCodeHelp />
       {connection.warehouse_type === 'clickhouse' && (
-        <div className='mb-3'>
+        <div className='mt-3'>
           <WarehouseSetupSqlHelp
             database={
               (connection.config &&
@@ -158,13 +160,11 @@ const WarehouseConnectionCard: FC<WarehouseConnectionCardProps> = ({
                 connection.config.database) ||
               CLICKHOUSE_DEFAULTS.database
             }
-            showInitially={!connection.total_events_received}
           />
         </div>
       )}
-      <WarehouseEventCodeHelp />
       <div className='d-flex justify-content-end mt-3'>
-        {onTestConnection && (
+        {onTestConnection && !isConnected && (
           <Button
             id='warehouse-connection-test'
             theme='outline'

From 2c456d9a3a552fb5e63623da8111b2d78832b0eb Mon Sep 17 00:00:00 2001
From: wadii <wadii.zaim@flagsmith.com>
Date: Wed, 29 Jul 2026 11:27:58 +0200
Subject: [PATCH 09/11] fix: sticky setup SQL on missing-table failures and
 warning punctuation

---
 .../tabs/warehouse-tab/ClickHouseConfigForm.tsx    |  7 ++++++-
 .../__tests__/warehouseFormUtils.test.ts           |  6 ++++++
 .../tabs/warehouse-tab/warehouseFormUtils.ts       | 14 +++++++++++---
 3 files changed, 23 insertions(+), 4 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 0f6ba6139af6..eec12ea85c92 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
@@ -22,6 +22,7 @@ import {
   getButtonLabel,
   getTestFailureWarning,
   getWarehouseErrorMessage,
+  isMissingEventsTableDetail,
 } from './warehouseFormUtils'
 import './ConfigForm.scss'
 
@@ -56,6 +57,9 @@ const ClickHouseConfigForm: FC<ClickHouseConfigFormProps> = ({
   const [error, setError] = useState(false)
   const [testState, setTestState] = useState<TestState>('idle')
   const [testDetail, setTestDetail] = useState<string | null>(null)
+  // Sticky: the setup SQL stays offered once a test reports the table missing,
+  // even while the user edits fields (which resets the live test state).
+  const [showSetupSql, setShowSetupSql] = useState(false)
   const testRevision = useRef(0)
 
   const [testConnectionConfig, { isLoading: isTesting }] =
@@ -105,6 +109,7 @@ const ClickHouseConfigForm: FC<ClickHouseConfigFormProps> = ({
       } else {
         setTestState('errored')
         setTestDetail(result.status_detail)
+        setShowSetupSql(isMissingEventsTableDetail(result.status_detail))
       }
     } catch {
       if (revision !== testRevision.current) return
@@ -234,7 +239,7 @@ const ClickHouseConfigForm: FC<ClickHouseConfigFormProps> = ({
         {isEdit && (
           <WarehouseSetupSqlHelp
             database={database.trim() || CLICKHOUSE_DEFAULTS.database}
-            showInitially={testState === 'errored'}
+            showInitially={showSetupSql}
           />
         )}
 
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 f079b5fd0786..76da13c4ccc2 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
@@ -22,4 +22,10 @@ describe('getTestFailureWarning', () => {
       "events won't be delivered until the table exists",
     )
   })
+
+  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',
+    )
+  })
 })
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 6899e27a7040..6fbc6bae1011 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
@@ -8,12 +8,20 @@ export const getWarehouseErrorMessage = (isEdit: boolean): string =>
     isEdit ? 'update' : 'create'
   } warehouse connection. Please try again.`
 
+export const isMissingEventsTableDetail = (detail: string | null): boolean =>
+  !!detail?.startsWith('Events table not found')
+
+const punctuate = (detail: string): string =>
+  `${detail}${/[.!?]$/.test(detail) ? '' : '.'}`
+
 export const getTestFailureWarning = (detail: string | null): string => {
   // The missing-table detail means the connection itself succeeded, so the
   // "couldn't establish a connection" lead-in would be wrong.
-  if (detail?.startsWith('Events table not found')) {
-    return `${detail} You can save anyway and test again later, but events won't be delivered until the table exists.`
+  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.`
   }
-  const reason = detail ? `: ${detail}${/[.!?]$/.test(detail) ? '' : '.'}` : '.'
+  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.`
 }

From 6b5e02f061357b1b56cc2be67279abd8ccf05a4d Mon Sep 17 00:00:00 2001
From: wadii <wadii.zaim@flagsmith.com>
Date: Wed, 29 Jul 2026 13:57:11 +0200
Subject: [PATCH 10/11] fix: align step 1 copy with the setup SQL placeholders

---
 .../tabs/warehouse-tab/WarehouseSetup.tsx                     | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/web/components/pages/environment-settings/tabs/warehouse-tab/WarehouseSetup.tsx b/frontend/web/components/pages/environment-settings/tabs/warehouse-tab/WarehouseSetup.tsx
index 8bb93546eb26..5a3e4d220bb4 100644
--- a/frontend/web/components/pages/environment-settings/tabs/warehouse-tab/WarehouseSetup.tsx
+++ b/frontend/web/components/pages/environment-settings/tabs/warehouse-tab/WarehouseSetup.tsx
@@ -161,8 +161,8 @@ const WarehouseSetup: FC<WarehouseSetupProps> = ({
                 <>
                   <p className='text-muted mb-3'>
                     Run this once against your ClickHouse instance using an
-                    administrative user. Replace {'<USERNAME>'} and{' '}
-                    {'<YOUR_SECURED_PASSWORD>'} with your own values.
+                    administrative user. Replace {'<USER>'} and{' '}
+                    {'<CHANGE_ME_PASSWORD>'} with your own values.
                   </p>
                   <WarehouseSqlSnippet sql={getClickHouseOnboardingSql()} />
                 </>

From ff57e654750651f961aba125680baaf8d26dbd67 Mon Sep 17 00:00:00 2001
From: wadii <wadii.zaim@flagsmith.com>
Date: Wed, 29 Jul 2026 16:36:40 +0200
Subject: [PATCH 11/11] feat: address review feedback

---
 frontend/web/components/CalloutBar.tsx                      | 4 ++--
 .../tabs/warehouse-tab/WarehouseSetup.scss                  | 5 -----
 .../tabs/warehouse-tab/WarehouseSetup.tsx                   | 6 +++---
 .../tabs/warehouse-tab/WarehouseSetupSqlHelp.tsx            | 1 -
 .../tabs/warehouse-tab/WarehouseSqlSnippet.tsx              | 2 +-
 5 files changed, 6 insertions(+), 12 deletions(-)

diff --git a/frontend/web/components/CalloutBar.tsx b/frontend/web/components/CalloutBar.tsx
index c2b59716d3e5..b78b6ef541c3 100644
--- a/frontend/web/components/CalloutBar.tsx
+++ b/frontend/web/components/CalloutBar.tsx
@@ -5,7 +5,7 @@ export type CalloutBarTheme = 'light' | 'dark'
 
 type CalloutBarProps = {
   theme?: CalloutBarTheme
-  icon: ReactNode
+  icon?: ReactNode
   prefix: ReactNode
   label: ReactNode
   expanded?: boolean
@@ -14,7 +14,7 @@ type CalloutBarProps = {
 
 const CalloutBar: FC<CalloutBarProps> = ({
   expanded,
-  icon,
+  icon = <>{'<>'}</>,
   label,
   onClick,
   prefix,
diff --git a/frontend/web/components/pages/environment-settings/tabs/warehouse-tab/WarehouseSetup.scss b/frontend/web/components/pages/environment-settings/tabs/warehouse-tab/WarehouseSetup.scss
index 84462e63d8ad..4286ec7a636f 100644
--- a/frontend/web/components/pages/environment-settings/tabs/warehouse-tab/WarehouseSetup.scss
+++ b/frontend/web/components/pages/environment-settings/tabs/warehouse-tab/WarehouseSetup.scss
@@ -80,12 +80,7 @@
 
   &__step-toggle {
     display: flex;
-    align-items: center;
     gap: 8px;
-    padding: 0;
-    border: none;
-    background: none;
-    text-align: left;
   }
 
   &__step-content {
diff --git a/frontend/web/components/pages/environment-settings/tabs/warehouse-tab/WarehouseSetup.tsx b/frontend/web/components/pages/environment-settings/tabs/warehouse-tab/WarehouseSetup.tsx
index 5a3e4d220bb4..f20283ca50e0 100644
--- a/frontend/web/components/pages/environment-settings/tabs/warehouse-tab/WarehouseSetup.tsx
+++ b/frontend/web/components/pages/environment-settings/tabs/warehouse-tab/WarehouseSetup.tsx
@@ -1,6 +1,7 @@
 import { FC, useState } from 'react'
 import Icon from 'components/icons/Icon'
 import Button from 'components/base/forms/Button'
+import BareButton from 'components/base/forms/BareButton'
 import { WarehouseType } from 'common/types/responses'
 import { ConfigFormData } from './ConfigForm'
 import SelectableCard from 'components/base/SelectableCard'
@@ -142,8 +143,7 @@ const WarehouseSetup: FC<WarehouseSetupProps> = ({
               <div className='warehouse-setup__step-connector' />
             </div>
             <div className='warehouse-setup__step-content'>
-              <button
-                type='button'
+              <BareButton
                 className='warehouse-setup__step-toggle mb-2'
                 aria-expanded={sqlExpanded}
                 onClick={() => setSqlExpanded(!sqlExpanded)}
@@ -156,7 +156,7 @@ const WarehouseSetup: FC<WarehouseSetupProps> = ({
                   width={22}
                   fill='#656D7B'
                 />
-              </button>
+              </BareButton>
               {sqlExpanded && (
                 <>
                   <p className='text-muted mb-3'>
diff --git a/frontend/web/components/pages/environment-settings/tabs/warehouse-tab/WarehouseSetupSqlHelp.tsx b/frontend/web/components/pages/environment-settings/tabs/warehouse-tab/WarehouseSetupSqlHelp.tsx
index 4458c6fb18dc..4c499c14e425 100644
--- a/frontend/web/components/pages/environment-settings/tabs/warehouse-tab/WarehouseSetupSqlHelp.tsx
+++ b/frontend/web/components/pages/environment-settings/tabs/warehouse-tab/WarehouseSetupSqlHelp.tsx
@@ -20,7 +20,6 @@ const WarehouseSetupSqlHelp: FC<WarehouseSetupSqlHelpProps> = ({
   return (
     <div>
       <CalloutBar
-        icon={<>{'<>'}</>}
         prefix='Database setup:'
         label='Run once against your ClickHouse instance to create the events table'
         expanded={visible}
diff --git a/frontend/web/components/pages/environment-settings/tabs/warehouse-tab/WarehouseSqlSnippet.tsx b/frontend/web/components/pages/environment-settings/tabs/warehouse-tab/WarehouseSqlSnippet.tsx
index 1621e618efb1..d2ffb9e0b4a2 100644
--- a/frontend/web/components/pages/environment-settings/tabs/warehouse-tab/WarehouseSqlSnippet.tsx
+++ b/frontend/web/components/pages/environment-settings/tabs/warehouse-tab/WarehouseSqlSnippet.tsx
@@ -19,7 +19,7 @@ const WarehouseSqlSnippet: FC<WarehouseSqlSnippetProps> = ({ sql }) => (
         theme='primary'
         size='xSmall'
       >
-        <Icon name='copy' width={16} fill='white' />
+        <Icon name='copy' width={16} />
         Copy Code
       </Button>
     </div>