Added new settings components, added wrapper to all setting components

packages/web/src/elements/SettingsMenuControl.svelte

@@ -101,7 +101,7 @@
     height: 100%;
     width: 100%;
     background-color: var(--theme-bg-2);
-    overflow-y: auto;
+    overflow-x: auto;
   }
 
   .menu::-webkit-scrollbar {
@@ -111,7 +111,6 @@
   .menu-item {
     white-space: nowrap;
     padding: 12px 20px;
-    width: 100%;
     display: flex;
     align-items: center;
     cursor: pointer;

packages/web/src/settings/BehaviourSettings.svelte

@@ -5,6 +5,7 @@
     import FormValues from "../forms/FormValues.svelte";
 </script>
 
+<div class="wrapper">
 <FormValues let:values>
     <div class="heading">{_t('settings.behaviour', { defaultMessage: 'Behaviour' })}</div>
 
@@ -52,6 +53,7 @@
     })}
     />
 </FormValues>
+</div>
 
 <style>
   .heading {

packages/web/src/settings/ConnectionSettings.svelte

@@ -11,6 +11,7 @@
     
 </script>
 
+<div class="wrapper">
 <FormValues let:values>
     <div class="heading">{_t('settings.connection', { defaultMessage: 'Connection' })}</div>
 
@@ -72,6 +73,8 @@
     disabled={values['session.autoClose'] === false}
     />
 </FormValues>
+</div>
+
 
 <style>
   .heading {

packages/web/src/settings/DataGridSettings.svelte

@@ -0,0 +1,100 @@
+<script lang="ts">
+  import FormCheckboxField from "../forms/FormCheckboxField.svelte";
+  import FormSelectField from "../forms/FormSelectField.svelte";
+  import FormTextField from "../forms/FormTextField.svelte";
+  import { _t } from "../translations";
+  import { isProApp } from "../utility/proTools";
+
+
+</script>
+
+<div class="wrapper">
+    <div class="heading">{_t('settings.dataGrid.title', { defaultMessage: 'Data grid' })}</div>
+<FormTextField
+name="dataGrid.pageSize"
+label={_t('settings.dataGrid.pageSize', {
+    defaultMessage: 'Page size (number of rows for incremental loading, must be between 5 and 50000)',
+})}
+defaultValue="100"
+/>
+{#if isProApp()}
+<FormCheckboxField
+    name="dataGrid.showHintColumns"
+    label={_t('settings.dataGrid.showHintColumns', { defaultMessage: 'Show foreign key hints' })}
+    defaultValue={true}
+/>
+{/if}
+<!-- <FormCheckboxField name="dataGrid.showHintColumns" label="Show foreign key hints" defaultValue={true} /> -->
+
+<FormCheckboxField
+name="dataGrid.thousandsSeparator"
+label={_t('settings.dataGrid.thousandsSeparator', {
+    defaultMessage: 'Use thousands separator for numbers',
+})}
+/>
+
+<FormTextField
+name="dataGrid.defaultAutoRefreshInterval"
+label={_t('settings.dataGrid.defaultAutoRefreshInterval', {
+    defaultMessage: 'Default grid auto refresh interval in seconds',
+})}
+defaultValue="10"
+/>
+
+<FormCheckboxField
+name="dataGrid.alignNumbersRight"
+label={_t('settings.dataGrid.alignNumbersRight', { defaultMessage: 'Align numbers to right' })}
+defaultValue={false}
+/>
+
+<FormTextField
+name="dataGrid.collectionPageSize"
+label={_t('settings.dataGrid.collectionPageSize', {
+    defaultMessage: 'Collection page size (for MongoDB JSON view, must be between 5 and 1000)',
+})}
+defaultValue="50"
+/>
+
+<FormSelectField
+label={_t('settings.dataGrid.coloringMode', { defaultMessage: 'Row coloring mode' })}
+name="dataGrid.coloringMode"
+isNative
+defaultValue="36"
+options={[
+    {
+    value: '36',
+    label: _t('settings.dataGrid.coloringMode.36', { defaultMessage: 'Every 3rd and 6th row' }),
+    },
+    {
+    value: '2-primary',
+    label: _t('settings.dataGrid.coloringMode.2-primary', {
+        defaultMessage: 'Every 2-nd row, primary color',
+    }),
+    },
+    {
+    value: '2-secondary',
+    label: _t('settings.dataGrid.coloringMode.2-secondary', {
+        defaultMessage: 'Every 2-nd row, secondary color',
+    }),
+    },
+    { value: 'none', label: _t('settings.dataGrid.coloringMode.none', { defaultMessage: 'None' }) },
+]}
+/>
+
+<FormCheckboxField
+name="dataGrid.showAllColumnsWhenSearch"
+label={_t('settings.dataGrid.showAllColumnsWhenSearch', {
+    defaultMessage: 'Show all columns when searching',
+})}
+defaultValue={false}
+/>
+</div>
+
+<style>
+  .heading {
+    font-size: 20px;
+    margin: 5px;
+    margin-left: var(--dim-large-form-margin);
+    margin-top: var(--dim-large-form-margin);
+  }
+</style>

packages/web/src/settings/DefaultActionsSettings.svelte

@@ -8,6 +8,7 @@
 
 </script>
 
+<div class="wrapper">
 <FormValues let:values>
     <div class="heading">{_t('settings.defaultActions', { defaultMessage: 'Default actions' })}</div>
 
@@ -88,6 +89,8 @@
     disabled={values['defaultAction.useLastUsedAction'] !== false}
     />
 </FormValues>
+</div>
+
 
 <style>
   .heading {

packages/web/src/settings/ExternalToolsSettings.svelte

@@ -3,6 +3,7 @@
   import { _t } from "../translations";
 </script>
 
+<div class="wrapper">
 <div class="heading">{_t('settings.externalTools', { defaultMessage: 'External tools' })}</div>
 <FormTextField
     name="externalTools.mysqldump"
@@ -36,6 +37,7 @@
     label={_t('settings.other.externalTools.psql', { defaultMessage: 'psql (restore PostgreSQL database)' })}
     defaultValue="psql"
 />
+</div>
 
 <style>
   .heading {

packages/web/src/settings/GeneralSettings.svelte

@@ -19,7 +19,8 @@
     const electron = getElectron();
     let restartWarning = false;
 </script>
-<div class="heading">{_t('settings.general', { defaultMessage: 'General' })}</div>
+<div class="wrapper">
+    <div class="heading">{_t('settings.general', { defaultMessage: 'General' })}</div>
 {#if electron}
     <div class="heading">{_t('settings.appearance', { defaultMessage: 'Appearance' })}</div>
     <FormCheckboxField
@@ -86,162 +87,7 @@ type="combo"
     }}
 />
 </FormFieldTemplateLarge>
-
-<div class="heading">{_t('settings.dataGrid.title', { defaultMessage: 'Data grid' })}</div>
-<FormTextField
-name="dataGrid.pageSize"
-label={_t('settings.dataGrid.pageSize', {
-    defaultMessage: 'Page size (number of rows for incremental loading, must be between 5 and 50000)',
-})}
-defaultValue="100"
-/>
-{#if isProApp()}
-<FormCheckboxField
-    name="dataGrid.showHintColumns"
-    label={_t('settings.dataGrid.showHintColumns', { defaultMessage: 'Show foreign key hints' })}
-    defaultValue={true}
-/>
-{/if}
-<!-- <FormCheckboxField name="dataGrid.showHintColumns" label="Show foreign key hints" defaultValue={true} /> -->
-
-<FormCheckboxField
-name="dataGrid.thousandsSeparator"
-label={_t('settings.dataGrid.thousandsSeparator', {
-    defaultMessage: 'Use thousands separator for numbers',
-})}
-/>
-
-<FormTextField
-name="dataGrid.defaultAutoRefreshInterval"
-label={_t('settings.dataGrid.defaultAutoRefreshInterval', {
-    defaultMessage: 'Default grid auto refresh interval in seconds',
-})}
-defaultValue="10"
-/>
-
-<FormCheckboxField
-name="dataGrid.alignNumbersRight"
-label={_t('settings.dataGrid.alignNumbersRight', { defaultMessage: 'Align numbers to right' })}
-defaultValue={false}
-/>
-
-<FormTextField
-name="dataGrid.collectionPageSize"
-label={_t('settings.dataGrid.collectionPageSize', {
-    defaultMessage: 'Collection page size (for MongoDB JSON view, must be between 5 and 1000)',
-})}
-defaultValue="50"
-/>
-
-<FormSelectField
-label={_t('settings.dataGrid.coloringMode', { defaultMessage: 'Row coloring mode' })}
-name="dataGrid.coloringMode"
-isNative
-defaultValue="36"
-options={[
-    {
-    value: '36',
-    label: _t('settings.dataGrid.coloringMode.36', { defaultMessage: 'Every 3rd and 6th row' }),
-    },
-    {
-    value: '2-primary',
-    label: _t('settings.dataGrid.coloringMode.2-primary', {
-        defaultMessage: 'Every 2-nd row, primary color',
-    }),
-    },
-    {
-    value: '2-secondary',
-    label: _t('settings.dataGrid.coloringMode.2-secondary', {
-        defaultMessage: 'Every 2-nd row, secondary color',
-    }),
-    },
-    { value: 'none', label: _t('settings.dataGrid.coloringMode.none', { defaultMessage: 'None' }) },
-]}
-/>
-
-<FormCheckboxField
-name="dataGrid.showAllColumnsWhenSearch"
-label={_t('settings.dataGrid.showAllColumnsWhenSearch', {
-    defaultMessage: 'Show all columns when searching',
-})}
-defaultValue={false}
-/>
-
-<div class="heading">{_t('settings.sqlEditor', { defaultMessage: 'SQL editor' })}</div>
-
-<div class="flex">
-<div class="col-3">
-    <FormSelectField
-    label={_t('settings.sqlEditor.sqlCommandsCase', { defaultMessage: 'SQL commands case' })}
-    name="sqlEditor.sqlCommandsCase"
-    isNative
-    defaultValue="upperCase"
-    options={[
-        { value: 'upperCase', label: 'UPPER CASE' },
-        { value: 'lowerCase', label: 'lower case' },
-    ]}
-    />
 </div>
-<div class="col-3">
-    <FormFieldTemplateLarge
-    label={_t('settings.editor.keybinds', { defaultMessage: 'Editor keybinds' })}
-    type="combo"
-    >
-    <SelectField
-        isNative
-        defaultValue="default"
-        options={EDITOR_KEYBINDINGS_MODES.map(mode => ({ label: mode.label, value: mode.value }))}
-        value={$currentEditorKeybindigMode}
-        on:change={e => ($currentEditorKeybindigMode = e.detail)}
-    />
-    </FormFieldTemplateLarge>
-</div>
-<div class="col-3">
-    <FormFieldTemplateLarge
-    label={_t('settings.editor.wordWrap', { defaultMessage: 'Enable word wrap' })}
-    type="combo"
-    >
-    <CheckboxField
-        checked={$currentEditorWrapEnabled}
-        on:change={e => ($currentEditorWrapEnabled = e.target.checked)}
-    />
-    </FormFieldTemplateLarge>
-</div>
-</div>
-
-<FormTextField
-name="sqlEditor.limitRows"
-label={_t('settings.sqlEditor.limitRows', { defaultMessage: 'Return only N rows from query' })}
-placeholder={_t('settings.sqlEditor.limitRowsPlaceholder', { defaultMessage: '(No rows limit)' })}
-/>
-
-<FormCheckboxField
-name="sqlEditor.showTableAliasesInCodeCompletion"
-label={_t('settings.sqlEditor.showTableAliasesInCodeCompletion', {
-    defaultMessage: 'Show table aliases in code completion',
-})}
-defaultValue={false}
-/>
-
-<FormCheckboxField
-name="sqlEditor.disableSplitByEmptyLine"
-label={_t('settings.sqlEditor.disableSplitByEmptyLine', { defaultMessage: 'Disable split by empty line' })}
-defaultValue={false}
-/>
-
-<FormCheckboxField
-name="sqlEditor.disableExecuteCurrentLine"
-label={_t('settings.sqlEditor.disableExecuteCurrentLine', {
-    defaultMessage: 'Disable current line execution (Execute current)',
-})}
-defaultValue={false}
-/>
-
-<FormCheckboxField
-name="sqlEditor.hideColumnsPanel"
-label={_t('settings.sqlEditor.hideColumnsPanel', { defaultMessage: 'Hide Columns/Filters panel by default' })}
-defaultValue={false}
-/>
 
 <style>
   .heading {

packages/web/src/settings/OtherSettings.svelte

@@ -8,6 +8,7 @@
 
 </script>
 
+<div class="wrapper">
 <div class="heading">{_t('settings.other', { defaultMessage: 'Other' })}</div>
 
 <FormTextField
@@ -50,6 +51,8 @@ options={[
     defaultValue={false}
 />
 {/if}
+</div>
+
 
 <style>
   .heading {

packages/web/src/settings/SQLEditorSettings.svelte

@@ -0,0 +1,100 @@
+<script lang="ts">
+  import CheckboxField from "../forms/CheckboxField.svelte";
+  import FormCheckboxField from "../forms/FormCheckboxField.svelte";
+  import FormFieldTemplateLarge from "../forms/FormFieldTemplateLarge.svelte";
+  import FormSelectField from "../forms/FormSelectField.svelte";
+  import FormTextField from "../forms/FormTextField.svelte";
+  import SelectField from "../forms/SelectField.svelte";
+  import { EDITOR_KEYBINDINGS_MODES } from "../query/AceEditor.svelte";
+  import { currentEditorKeybindigMode, currentEditorWrapEnabled } from "../stores";
+  import { _t } from "../translations";
+
+
+</script>
+
+<div class="wrapper">
+    <div class="heading">{_t('settings.sqlEditor', { defaultMessage: 'SQL editor' })}</div>
+
+<div class="flex">
+<div class="col-3">
+    <FormSelectField
+    label={_t('settings.sqlEditor.sqlCommandsCase', { defaultMessage: 'SQL commands case' })}
+    name="sqlEditor.sqlCommandsCase"
+    isNative
+    defaultValue="upperCase"
+    options={[
+        { value: 'upperCase', label: 'UPPER CASE' },
+        { value: 'lowerCase', label: 'lower case' },
+    ]}
+    />
+</div>
+<div class="col-3">
+    <FormFieldTemplateLarge
+    label={_t('settings.editor.keybinds', { defaultMessage: 'Editor keybinds' })}
+    type="combo"
+    >
+    <SelectField
+        isNative
+        defaultValue="default"
+        options={EDITOR_KEYBINDINGS_MODES.map(mode => ({ label: mode.label, value: mode.value }))}
+        value={$currentEditorKeybindigMode}
+        on:change={e => ($currentEditorKeybindigMode = e.detail)}
+    />
+    </FormFieldTemplateLarge>
+</div>
+<div class="col-3">
+    <FormFieldTemplateLarge
+    label={_t('settings.editor.wordWrap', { defaultMessage: 'Enable word wrap' })}
+    type="combo"
+    >
+    <CheckboxField
+        checked={$currentEditorWrapEnabled}
+        on:change={e => ($currentEditorWrapEnabled = e.target.checked)}
+    />
+    </FormFieldTemplateLarge>
+</div>
+</div>
+
+<FormTextField
+name="sqlEditor.limitRows"
+label={_t('settings.sqlEditor.limitRows', { defaultMessage: 'Return only N rows from query' })}
+placeholder={_t('settings.sqlEditor.limitRowsPlaceholder', { defaultMessage: '(No rows limit)' })}
+/>
+
+<FormCheckboxField
+name="sqlEditor.showTableAliasesInCodeCompletion"
+label={_t('settings.sqlEditor.showTableAliasesInCodeCompletion', {
+    defaultMessage: 'Show table aliases in code completion',
+})}
+defaultValue={false}
+/>
+
+<FormCheckboxField
+name="sqlEditor.disableSplitByEmptyLine"
+label={_t('settings.sqlEditor.disableSplitByEmptyLine', { defaultMessage: 'Disable split by empty line' })}
+defaultValue={false}
+/>
+
+<FormCheckboxField
+name="sqlEditor.disableExecuteCurrentLine"
+label={_t('settings.sqlEditor.disableExecuteCurrentLine', {
+    defaultMessage: 'Disable current line execution (Execute current)',
+})}
+defaultValue={false}
+/>
+
+<FormCheckboxField
+name="sqlEditor.hideColumnsPanel"
+label={_t('settings.sqlEditor.hideColumnsPanel', { defaultMessage: 'Hide Columns/Filters panel by default' })}
+defaultValue={false}
+/>
+</div>
+
+<style>
+    .heading {
+    font-size: 20px;
+    margin: 5px;
+    margin-left: var(--dim-large-form-margin);
+    margin-top: var(--dim-large-form-margin);
+  }
+</style>

packages/web/src/settings/ThemeSettings.svelte

@@ -35,12 +35,13 @@ ORDER BY
   `;
 </script>
 
-<div class="heading">{_t('settings.appearance', { defaultMessage: 'Application theme' })}</div>
+<div class="wrapper">
+  <div class="heading">{_t('settings.appearance', { defaultMessage: 'Application theme' })}</div>
 
-<FormFieldTemplateLarge
+  <FormFieldTemplateLarge
-label={_t('settings.appearance.useSystemTheme', { defaultMessage: 'Use system theme' })}
+  label={_t('settings.appearance.useSystemTheme', { defaultMessage: 'Use system theme' })}
-type="checkbox"
+  type="checkbox"
-labelProps={{
+  labelProps={{
       onClick: () => {
       if ($currentTheme) {
           $currentTheme = null;
@@ -48,9 +49,9 @@ labelProps={{
           $currentTheme = getSystemTheme();
       }
       },
-}}
+  }}
->
+  >
-<CheckboxField
+  <CheckboxField
       checked={!$currentTheme}
       on:change={e => {
       if (e.target['checked']) {
@@ -59,29 +60,29 @@ labelProps={{
           $currentTheme = getSystemTheme();
       }
       }}
-/>
+  />
-</FormFieldTemplateLarge>
+  </FormFieldTemplateLarge>
 
-<div class="themes">
+  <div class="themes">
-{#each $extensions.themes as theme}
+  {#each $extensions.themes as theme}
       <ThemeSkeleton {theme} />
-{/each}
+  {/each}
-</div>
+  </div>
 
-<div class="m-5">
+  <div class="m-5">
-{_t('settings.appearance.moreThemes', { defaultMessage: 'More themes are available as' })}
+  {_t('settings.appearance.moreThemes', { defaultMessage: 'More themes are available as' })}
-<Link onClick={openThemePlugins}>plugins</Link>
+  <Link onClick={openThemePlugins}>plugins</Link>
-<br />
+  <br />
-{_t('settings.appearance.afterInstalling', {
+  {_t('settings.appearance.afterInstalling', {
       defaultMessage:
       'After installing theme plugin (try search "theme" in available extensions) new themes will be available here.',
-})}
+  })}
-</div>
+  </div>
 
-<div class="heading">{_t('settings.appearance.editorTheme', { defaultMessage: 'Editor theme' })}</div>
+  <div class="heading">{_t('settings.appearance.editorTheme', { defaultMessage: 'Editor theme' })}</div>
 
-<div class="flex">
+  <div class="flex">
-<div class="col-3">
+  <div class="col-3">
       <FormFieldTemplateLarge
       label={_t('settings.appearance.editorTheme', { defaultMessage: 'Theme' })}
       type="combo"
@@ -94,9 +95,9 @@ labelProps={{
           on:change={e => ($currentEditorTheme = e.detail)}
       />
       </FormFieldTemplateLarge>
-</div>
+  </div>
 
-<div class="col-3">
+  <div class="col-3">
       <FormFieldTemplateLarge
       label={_t('settings.appearance.fontSize', { defaultMessage: 'Font size' })}
       type="combo"
@@ -109,9 +110,9 @@ labelProps={{
           on:change={e => ($currentEditorFontSize = e.detail)}
       />
       </FormFieldTemplateLarge>
-</div>
+  </div>
 
-<div class="col-3">
+  <div class="col-3">
       <FormFieldTemplateLarge
       label={_t('settings.appearance.customSize', { defaultMessage: 'Custom size' })}
       type="text"
@@ -123,21 +124,21 @@ labelProps={{
           $currentEditorFontSize != 'custom'}
       />
       </FormFieldTemplateLarge>
-</div>
+  </div>
 
-<div class="col-3">
+  <div class="col-3">
       <FormTextField
       name="editor.fontFamily"
       label={_t('settings.appearance.fontFamily', { defaultMessage: 'Editor font family' })}
       />
-</div>
+  </div>
-</div>
+  </div>
 
-<div class="editor">
+  <div class="editor">
-<SqlEditor value={sqlPreview} readOnly />
+  <SqlEditor value={sqlPreview} readOnly />
+  </div>
 </div>
 
-
 <style>
   .heading {
     font-size: 20px;
@@ -159,8 +160,7 @@ labelProps={{
 
   .editor {
     position: relative;
-    height: 400px;
+    height: 250px;
-    min-height: 200px;
     width: 400px;
     margin-left: var(--dim-large-form-margin);
     margin-top: var(--dim-large-form-margin);

packages/web/src/tabs/SettingsTab.svelte

@@ -13,6 +13,8 @@
   import { isProApp } from "../utility/proTools";
   import { _t } from "../translations";
   import CommandListTab from "./CommandListTab.svelte";
+  import DataGridSettings from "../settings/DataGridSettings.svelte";
+    import SQLEditorSettings from "../settings/SQLEditorSettings.svelte";
 
     const menuItems = [
         {
@@ -29,6 +31,20 @@
             props: {},
             testid: 'settings-connection',
         },
+        {
+            label: _t('settings.dataGrid.title', { defaultMessage: 'Data grid' }),
+            identifier: 'data-grid',
+            component: DataGridSettings,
+            props: {},
+            testid: 'settings-data-grid',
+        },
+        {
+            label: _t('settings.sqlEditor.title', { defaultMessage: 'SQL Editor' }),
+            identifier: 'sql-editor',
+            component: SQLEditorSettings,
+            props: {},
+            testid: 'settings-sql-editor',
+        },
         {
             label: _t('settings.theme', { defaultMessage: 'Themes' }),
             identifier: 'theme',