support clickhouse UI

wren-ui/src/apollo/client/graphql/__types__.ts

@@ -135,6 +135,7 @@ export type DataSourceInput = {
 
 export enum DataSourceName {
   BIG_QUERY = 'BIG_QUERY',
+  CLICK_HOUSE = 'CLICK_HOUSE',
   DUCKDB = 'DUCKDB',
   MSSQL = 'MSSQL',
   MYSQL = 'MYSQL',
@@ -498,6 +499,11 @@ export type MutationDeleteViewArgs = {
 };
 
 
+export type MutationDeployArgs = {
+  force?: InputMaybe<Scalars['Boolean']>;
+};
+
+
 export type MutationPreviewDataArgs = {
   where: PreviewDataInput;
 };

wren-ui/src/components/pages/setup/dataSources/ClickHouseProperties.tsx

@@ -0,0 +1,99 @@
+import { Form, Input, Switch } from 'antd';
+import { ERROR_TEXTS } from '@/utils/error';
+import { FORM_MODE } from '@/utils/enum';
+
+interface Props {
+  mode?: FORM_MODE;
+}
+
+export default function ClickHouseProperties(props: Props) {
+  const { mode } = props;
+  const isEditMode = mode === FORM_MODE.EDIT;
+  return (
+    <>
+      <Form.Item
+        label="Display name"
+        name="displayName"
+        required
+        rules={[
+          {
+            required: true,
+            message: ERROR_TEXTS.CONNECTION.DISPLAY_NAME.REQUIRED,
+          },
+        ]}
+      >
+        <Input />
+      </Form.Item>
+      <Form.Item
+        label="Host"
+        name="host"
+        required
+        rules={[
+          {
+            required: true,
+            message: ERROR_TEXTS.CONNECTION.HOST.REQUIRED,
+          },
+        ]}
+      >
+        <Input
+          placeholder="<your_click_house_account>.clickhouse.cloud"
+          disabled={isEditMode}
+        />
+      </Form.Item>
+      <Form.Item
+        label="Port"
+        name="port"
+        required
+        rules={[
+          {
+            required: true,
+            message: ERROR_TEXTS.CONNECTION.PORT.REQUIRED,
+          },
+        ]}
+      >
+        <Input placeholder="8443" disabled={isEditMode} />
+      </Form.Item>
+      <Form.Item
+        label="Username"
+        name="user"
+        rules={[
+          {
+            required: true,
+            message: ERROR_TEXTS.CONNECTION.USERNAME.REQUIRED,
+          },
+        ]}
+      >
+        <Input />
+      </Form.Item>
+      <Form.Item
+        label="Password"
+        name="password"
+        required
+        rules={[
+          {
+            required: true,
+            message: ERROR_TEXTS.CONNECTION.PASSWORD.REQUIRED,
+          },
+        ]}
+      >
+        <Input.Password placeholder="input password" />
+      </Form.Item>
+      <Form.Item
+        label="Database name"
+        name="database"
+        required
+        rules={[
+          {
+            required: true,
+            message: ERROR_TEXTS.CONNECTION.DATABASE.REQUIRED,
+          },
+        ]}
+      >
+        <Input placeholder="ClickHouse database name" disabled={isEditMode} />
+      </Form.Item>
+      <Form.Item label="Use SSL" name="ssl" valuePropName="checked">
+        <Switch />
+      </Form.Item>
+    </>
+  );
+}

wren-ui/src/components/pages/setup/utils.tsx

@@ -12,6 +12,7 @@ import DuckDBProperties from './dataSources/DuckDBProperties';
 import MySQLProperties from './dataSources/MySQLProperties';
 import PostgreSQLProperties from './dataSources/PostgreSQLProperties';
 import SQLServerProperties from './dataSources/SQLServerProperties';
+import ClickHouseProperties from './dataSources/ClickHouseProperties';
 import { SampleDatasetName } from '@/apollo/client/graphql/__types__';
 import { ERROR_CODES } from '@/utils/errorHandler';
 
@@ -88,6 +89,12 @@ export const DATA_SOURCE_OPTIONS = {
     guide: 'https://docs.getwren.ai/guide/connect/sqlserver',
     disabled: false,
   },
+  [DATA_SOURCES.CLICK_HOUSE]: {
+    label: 'ClickHouse',
+    logo: '/images/dataSource/clickhouse.svg',
+    guide: 'https://docs.getwren.ai/guide/connect/clickhouse',
+    disabled: false,
+  },
 } as { [key: string]: ButtonOption };
 
 export const DATA_SOURCE_FORM = {
@@ -96,6 +103,7 @@ export const DATA_SOURCE_FORM = {
   [DATA_SOURCES.PG_SQL]: { component: PostgreSQLProperties },
   [DATA_SOURCES.MYSQL]: { component: MySQLProperties },
   [DATA_SOURCES.MSSQL]: { component: SQLServerProperties },
+  [DATA_SOURCES.CLICK_HOUSE]: { component: ClickHouseProperties },
 };
 
 export const TEMPLATE_OPTIONS = {
@@ -140,6 +148,10 @@ export const getDataSource = (dataSource: DATA_SOURCES) => {
         DATA_SOURCE_OPTIONS[DATA_SOURCES.MSSQL],
         DATA_SOURCE_FORM[DATA_SOURCES.MSSQL],
       ),
+      [DATA_SOURCES.CLICK_HOUSE]: merge(
+        DATA_SOURCE_OPTIONS[DATA_SOURCES.CLICK_HOUSE],
+        DATA_SOURCE_FORM[DATA_SOURCES.CLICK_HOUSE],
+      ),
     }[dataSource] || defaultDataSource
   );
 };