CB-5292 add separate group for advanced properties

webapp/packages/plugin-connections/src/ConnectionForm/Options/AdvancedPropertiesForm.tsx

@@ -0,0 +1,47 @@
+/*
+ * CloudBeaver - Cloud Database Manager
+ * Copyright (C) 2020-2024 DBeaver Corp and others
+ *
+ * Licensed under the Apache License, Version 2.0.
+ * you may not use this file except in compliance with the License.
+ */
+import { observer } from 'mobx-react-lite';
+
+import { Expandable, Group, InputField, useTranslate } from '@cloudbeaver/core-blocks';
+import type { ConnectionConfig } from '@cloudbeaver/core-sdk';
+
+const MAX_KEEP_ALIVE_INTERVAL = 32767;
+const DEFAULT_CONFIG: ConnectionConfig = {
+  keepAliveInterval: 0,
+};
+
+interface Props {
+  config: ConnectionConfig;
+  disabled?: boolean;
+  readonly?: boolean;
+}
+
+export const AdvancedPropertiesForm = observer<Props>(function AdvancedPropertiesForm({ config, disabled, readonly }) {
+  const translate = useTranslate();
+
+  return (
+    <Group form gap>
+      <Expandable label={translate('ui_advanced_settings')}>
+        <InputField
+          type="number"
+          minLength={1}
+          min={0}
+          max={MAX_KEEP_ALIVE_INTERVAL}
+          name="keepAliveInterval"
+          disabled={disabled}
+          readOnly={readonly}
+          title={translate('connections_connection_keep_alive_tooltip')}
+          state={config}
+          defaultState={DEFAULT_CONFIG}
+        >
+          {translate('connections_connection_keep_alive')}
+        </InputField>
+      </Expandable>
+    </Group>
+  );
+});

webapp/packages/plugin-connections/src/ConnectionForm/Options/Options.tsx

@@ -43,6 +43,7 @@ import { ConnectionAuthModelSelector } from '../ConnectionAuthModelCredentials/C
 import { ConnectionFormService } from '../ConnectionFormService';
 import type { IConnectionFormProps } from '../IConnectionFormProps';
 import { CONNECTION_FORM_SHARED_CREDENTIALS_TAB_ID } from '../SharedCredentials/CONNECTION_FORM_SHARED_CREDENTIALS_TAB_ID';
+import { AdvancedPropertiesForm } from './AdvancedPropertiesForm';
 import { ConnectionOptionsTabService } from './ConnectionOptionsTabService';
 import styles from './Options.module.css';
 import { ParametersForm } from './ParametersForm';
@@ -338,6 +339,8 @@ export const Options: TabContainerPanelComponent<IConnectionFormProps> = observe
           {driver?.providerProperties && (
             <ProviderPropertiesForm config={config} properties={driver.providerProperties} disabled={disabled} readonly={readonly} />
           )}
+
+          <AdvancedPropertiesForm config={config} disabled={disabled} readonly={readonly} />
         </Container>
       </ColoredContainer>
     </Form>

webapp/packages/plugin-connections/src/ConnectionForm/Options/ProviderPropertiesForm.tsx

@@ -12,7 +12,6 @@ import {
   Expandable,
   Group,
   GroupTitle,
-  InputField,
   ObjectPropertyInfoForm,
   useObjectPropertyCategories,
   useTranslate,
@@ -28,11 +27,6 @@ interface Props {
   readonly?: boolean;
 }
 
-const MAX_KEEP_ALIVE_INTERVAL_IN_SECONDS = 32767;
-const DEFAULT_CONFIG: ConnectionConfig = {
-  keepAliveInterval: 0,
-};
-
 export const ProviderPropertiesForm = observer<Props>(function ProviderPropertiesForm({ config, properties, disabled, readonly }) {
   const translate = useTranslate();
   const supportedProperties = properties.filter(property => property.supportedConfigurationTypes?.some(type => type === config.configurationType));
@@ -78,21 +72,6 @@ export const ProviderPropertiesForm = observer<Props>(function ProviderPropertie
         </>
       )}
 
-      <InputField
-        type="number"
-        minLength={1}
-        min={0}
-        max={MAX_KEEP_ALIVE_INTERVAL_IN_SECONDS}
-        name="keepAliveInterval"
-        disabled={disabled}
-        readOnly={readonly}
-        title={translate('connections_connection_keep_alive_tooltip')}
-        state={config}
-        defaultState={DEFAULT_CONFIG}
-      >
-        {translate('connections_connection_keep_alive')}
-      </InputField>
-
       {categories.map((category, index) => (
         <Container key={`${category}_${config.driverId}`} gap>
           <Expandable label={category} defaultExpanded={index === 0}>