-
Notifications
You must be signed in to change notification settings - Fork 550
feat: clickhouse warehouse setup UI #8028
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Open
Zaimwa9
wants to merge
5
commits into
main
Choose a base branch
from
feat/clickhouse-byo-warehouse-frontend
base: main
Could not load branches
Branch not found: {{ refName }}
Loading
Could not load tags
Nothing to show
Loading
Are you sure you want to change the base?
Some commits from the old base branch may be removed from the timeline,
and old review comments may become outdated.
Open
Changes from all commits
Commits
Show all changes
5 commits
Select commit
Hold shift + click to select a range
c6bec5a
feat: ClickHouse warehouse connection types in frontend API layer
Zaimwa9 62a58de
feat: ClickHouse warehouse config form
Zaimwa9 ed0f724
feat: ClickHouse warehouse setup flow behind clickhouse_warehouse flag
Zaimwa9 6934367
feat: surface warehouse connection status detail in the frontend
Zaimwa9 aa07e2f
fix: address review feedback on warehouse frontend
Zaimwa9 File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
193 changes: 193 additions & 0 deletions
193
...end/web/components/pages/environment-settings/tabs/warehouse-tab/ClickHouseConfigForm.tsx
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,193 @@ | ||
| import React, { FC, useState } from 'react' | ||
| import Button from 'components/base/forms/Button' | ||
| import Input from 'components/base/forms/Input' | ||
| import Switch from 'components/Switch' | ||
| import ErrorMessage from 'components/ErrorMessage' | ||
| import { ClickHouseConfig } from 'common/types/responses' | ||
| import { | ||
| buildClickHousePayload, | ||
| CLICKHOUSE_DEFAULTS, | ||
| ClickHouseFormData, | ||
| ClickHouseFormState, | ||
| isClickHouseFormValid, | ||
| } from './clickhouseConfig' | ||
| import { getButtonLabel } from './warehouseFormUtils' | ||
| import './ConfigForm.scss' | ||
|
|
||
| type ClickHouseConfigFormProps = { | ||
| onSave: (data: ClickHouseFormData) => Promise<unknown> | ||
| onCancel: () => void | ||
| isEdit?: boolean | ||
| initialConfig?: ClickHouseConfig | ||
| initialName?: string | ||
| } | ||
|
|
||
| const ClickHouseConfigForm: FC<ClickHouseConfigFormProps> = ({ | ||
| initialConfig, | ||
| initialName = '', | ||
| isEdit = false, | ||
| onCancel, | ||
| onSave, | ||
| }) => { | ||
| const defaults = { ...CLICKHOUSE_DEFAULTS, ...initialConfig } | ||
| const [name, setName] = useState(initialName) | ||
| const [host, setHost] = useState(defaults.host) | ||
| const [port, setPort] = useState(String(defaults.port)) | ||
| const [database, setDatabase] = useState(defaults.database) | ||
| const [username, setUsername] = useState(defaults.username) | ||
| const [password, setPassword] = useState('') | ||
| const [secure, setSecure] = useState(defaults.secure) | ||
| const [isSaving, setIsSaving] = useState(false) | ||
| const [error, setError] = useState(false) | ||
|
|
||
| const form: ClickHouseFormState = { | ||
| database, | ||
| host, | ||
| name, | ||
| password, | ||
| port, | ||
| secure, | ||
| username, | ||
| } | ||
| const isValid = isClickHouseFormValid(form, isEdit) | ||
|
|
||
| const handleSubmit = async (e: React.FormEvent) => { | ||
| e.preventDefault() | ||
| if (!isValid) return | ||
|
|
||
| setIsSaving(true) | ||
| setError(false) | ||
| try { | ||
| await onSave(buildClickHousePayload(form)) | ||
| } catch { | ||
| setError(true) | ||
| setIsSaving(false) | ||
| } | ||
| } | ||
|
|
||
| return ( | ||
| <form onSubmit={handleSubmit} className='wh-config-form'> | ||
| <div className='wh-config-form__card'> | ||
| <div className='wh-config-form__field'> | ||
| <label className='wh-config-form__label'>Host</label> | ||
| <Input | ||
| value={host} | ||
| onChange={(e: React.ChangeEvent<HTMLInputElement>) => | ||
| setHost(e.target.value) | ||
| } | ||
| placeholder='your-instance.clickhouse.cloud' | ||
| disabled={isEdit} | ||
| /> | ||
| <span className='wh-config-form__hint'> | ||
| {isEdit | ||
| ? "Host can't be changed. To use a different ClickHouse instance, disconnect and create a new connection." | ||
| : 'The hostname of your ClickHouse instance, without protocol or port.'} | ||
| </span> | ||
| </div> | ||
|
|
||
| <div className='wh-config-form__field'> | ||
| <label className='wh-config-form__label'>Name</label> | ||
| <Input | ||
| value={name} | ||
| onChange={(e: React.ChangeEvent<HTMLInputElement>) => | ||
| setName(e.target.value) | ||
| } | ||
| placeholder='e.g. Production ClickHouse' | ||
| /> | ||
| </div> | ||
|
|
||
| <div className='wh-config-form__row'> | ||
| <div className='wh-config-form__field'> | ||
| <label className='wh-config-form__label'>Port</label> | ||
| <Input | ||
| value={port} | ||
| onChange={(e: React.ChangeEvent<HTMLInputElement>) => | ||
| setPort(e.target.value) | ||
| } | ||
| placeholder='9440' | ||
| /> | ||
| </div> | ||
| <div className='wh-config-form__field'> | ||
| <label className='wh-config-form__label'>Database</label> | ||
| <Input | ||
| value={database} | ||
| onChange={(e: React.ChangeEvent<HTMLInputElement>) => | ||
| setDatabase(e.target.value) | ||
| } | ||
| placeholder='flagsmith' | ||
| /> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div className='wh-config-form__field'> | ||
| <label className='wh-config-form__label'>Username</label> | ||
| <Input | ||
| value={username} | ||
| onChange={(e: React.ChangeEvent<HTMLInputElement>) => | ||
| setUsername(e.target.value) | ||
| } | ||
| placeholder='default' | ||
| /> | ||
| </div> | ||
|
|
||
| <div className='wh-config-form__field'> | ||
| <label className='wh-config-form__label'>Password</label> | ||
| <Input | ||
| value={password} | ||
| onChange={(e: React.ChangeEvent<HTMLInputElement>) => | ||
| setPassword(e.target.value) | ||
| } | ||
| type='password' | ||
| placeholder={isEdit ? '••••••••' : 'Password'} | ||
| /> | ||
| {isEdit && ( | ||
| <span className='wh-config-form__hint'> | ||
| Leave blank to keep the current password. | ||
| </span> | ||
| )} | ||
| </div> | ||
|
|
||
| <div className='wh-config-form__field'> | ||
| <div className='d-flex flex-row align-items-center gap-2'> | ||
| <Switch checked={secure} onChange={setSecure} /> | ||
| <label className='wh-config-form__label mb-0'> | ||
| Secure connection (TLS) | ||
| </label> | ||
| </div> | ||
| </div> | ||
|
|
||
| {error && ( | ||
| <ErrorMessage | ||
| error={`Failed to ${ | ||
| isEdit ? 'update' : 'create' | ||
| } warehouse connection. Please try again.`} | ||
| /> | ||
| )} | ||
|
|
||
| <div className='wh-config-form__actions'> | ||
| <Button | ||
| id='warehouse-config-cancel' | ||
| theme='outline' | ||
| size='small' | ||
| onClick={onCancel} | ||
| type='button' | ||
| > | ||
| Cancel | ||
| </Button> | ||
| <Button | ||
| id='warehouse-config-save' | ||
| theme='primary' | ||
| size='small' | ||
| type='submit' | ||
| disabled={isSaving || !isValid} | ||
| > | ||
| {getButtonLabel(isEdit, isSaving)} | ||
| </Button> | ||
| </div> | ||
| </div> | ||
| </form> | ||
| ) | ||
| } | ||
|
|
||
| ClickHouseConfigForm.displayName = 'ClickHouseConfigForm' | ||
| export default ClickHouseConfigForm | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
📐 Maintainability & Code Quality | 🟠 Major | ⚡ Quick win
Move into its own component folder and stop importing
ConfigForm.scssdirectly.This new component lives directly under
warehouse-tab/and imports./ConfigForm.scss(Snowflake's stylesheet) rather than having its own co-located stylesheet. That silently couples ClickHouse styling to the Snowflake form file.As per path instructions, "Each new component must live in its own folder with a barrel
index.ts, aComponentName/ComponentName.tsxfile, co-locatedComponentName.scss, any subcomponents, and imports should use the component folder path rather than the inner file."♻️ Proposed structure
Source: Path instructions