Refactor SQL editor settings layout and update word wrap field type

This commit is contained in:
Stela Augustinova
2025-12-15 13:02:11 +01:00
parent a503898b21
commit 4682255d5f

View File

@@ -15,8 +15,6 @@
<div class="wrapper"> <div class="wrapper">
<div class="heading">{_t('settings.sqlEditor', { defaultMessage: 'SQL editor' })}</div> <div class="heading">{_t('settings.sqlEditor', { defaultMessage: 'SQL editor' })}</div>
<div class="flex">
<div class="col-3">
<FormSelectField <FormSelectField
label={_t('settings.sqlEditor.sqlCommandsCase', { defaultMessage: 'SQL commands case' })} label={_t('settings.sqlEditor.sqlCommandsCase', { defaultMessage: 'SQL commands case' })}
name="sqlEditor.sqlCommandsCase" name="sqlEditor.sqlCommandsCase"
@@ -28,8 +26,6 @@
]} ]}
data-testid="SQLEditorSettings_sqlCommandsCase" data-testid="SQLEditorSettings_sqlCommandsCase"
/> />
</div>
<div class="col-3">
<FormFieldTemplateLarge <FormFieldTemplateLarge
label={_t('settings.editor.keybinds', { defaultMessage: 'Editor keybinds' })} label={_t('settings.editor.keybinds', { defaultMessage: 'Editor keybinds' })}
type="combo" type="combo"
@@ -42,53 +38,49 @@
on:change={e => ($currentEditorKeybindigMode = e.detail)} on:change={e => ($currentEditorKeybindigMode = e.detail)}
/> />
</FormFieldTemplateLarge> </FormFieldTemplateLarge>
</div>
<div class="col-3">
<FormFieldTemplateLarge <FormFieldTemplateLarge
label={_t('settings.editor.wordWrap', { defaultMessage: 'Enable word wrap' })} label={_t('settings.editor.wordWrap', { defaultMessage: 'Enable word wrap' })}
type="combo" type="checkbox"
> >
<CheckboxField <CheckboxField
checked={$currentEditorWrapEnabled} checked={$currentEditorWrapEnabled}
on:change={e => ($currentEditorWrapEnabled = e.target.checked)} on:change={e => ($currentEditorWrapEnabled = e.target.checked)}
/> />
</FormFieldTemplateLarge> </FormFieldTemplateLarge>
</div>
</div>
<FormTextField <FormTextField
name="sqlEditor.limitRows" name="sqlEditor.limitRows"
label={_t('settings.sqlEditor.limitRows', { defaultMessage: 'Return only N rows from query' })} label={_t('settings.sqlEditor.limitRows', { defaultMessage: 'Return only N rows from query' })}
placeholder={_t('settings.sqlEditor.limitRowsPlaceholder', { defaultMessage: '(No rows limit)' })} placeholder={_t('settings.sqlEditor.limitRowsPlaceholder', { defaultMessage: '(No rows limit)' })}
/> />
<FormCheckboxField <FormCheckboxField
name="sqlEditor.showTableAliasesInCodeCompletion" name="sqlEditor.showTableAliasesInCodeCompletion"
label={_t('settings.sqlEditor.showTableAliasesInCodeCompletion', { label={_t('settings.sqlEditor.showTableAliasesInCodeCompletion', {
defaultMessage: 'Show table aliases in code completion', defaultMessage: 'Show table aliases in code completion',
})} })}
defaultValue={false} defaultValue={false}
/> />
<FormCheckboxField <FormCheckboxField
name="sqlEditor.disableSplitByEmptyLine" name="sqlEditor.disableSplitByEmptyLine"
label={_t('settings.sqlEditor.disableSplitByEmptyLine', { defaultMessage: 'Disable split by empty line' })} label={_t('settings.sqlEditor.disableSplitByEmptyLine', { defaultMessage: 'Disable split by empty line' })}
defaultValue={false} defaultValue={false}
/> />
<FormCheckboxField <FormCheckboxField
name="sqlEditor.disableExecuteCurrentLine" name="sqlEditor.disableExecuteCurrentLine"
label={_t('settings.sqlEditor.disableExecuteCurrentLine', { label={_t('settings.sqlEditor.disableExecuteCurrentLine', {
defaultMessage: 'Disable current line execution (Execute current)', defaultMessage: 'Disable current line execution (Execute current)',
})} })}
defaultValue={false} defaultValue={false}
/> />
<FormCheckboxField <FormCheckboxField
name="sqlEditor.hideColumnsPanel" name="sqlEditor.hideColumnsPanel"
label={_t('settings.sqlEditor.hideColumnsPanel', { defaultMessage: 'Hide Columns/Filters panel by default' })} label={_t('settings.sqlEditor.hideColumnsPanel', { defaultMessage: 'Hide Columns/Filters panel by default' })}
defaultValue={false} defaultValue={false}
/> />
</div> </div>
<style> <style>
@@ -102,4 +94,8 @@ defaultValue={false}
.wrapper :global(input){ .wrapper :global(input){
max-width: 400px; max-width: 400px;
} }
.wrapper :global(select) {
max-width: 400px;
}
</style> </style>