From 7dc4ecdafe2d3773d165185980805e8065b964e3 Mon Sep 17 00:00:00 2001 From: Naumov Alexey Date: Mon, 28 Mar 2022 14:45:50 +0200 Subject: [PATCH] feat(plugin-connections): CB-1822 CB-1824 support advanced properties --- .../src/Expand/EXPANDABLE_FORM_STYLES.ts | 19 +++++ .../core-blocks/src/Expand/Expandable.tsx | 85 +++++++++++++++++++ webapp/packages/core-blocks/src/index.ts | 3 + .../core-connections/src/locales/en.ts | 1 + .../core-connections/src/locales/it.ts | 1 + .../core-connections/src/locales/ru.ts | 1 + .../core-connections/src/locales/zh.ts | 3 +- .../SSH/ConnectionSSHTabService.ts | 6 +- .../src/ConnectionForm/SSH/SSH.tsx | 32 ++++++- 9 files changed, 148 insertions(+), 3 deletions(-) create mode 100644 webapp/packages/core-blocks/src/Expand/EXPANDABLE_FORM_STYLES.ts create mode 100644 webapp/packages/core-blocks/src/Expand/Expandable.tsx diff --git a/webapp/packages/core-blocks/src/Expand/EXPANDABLE_FORM_STYLES.ts b/webapp/packages/core-blocks/src/Expand/EXPANDABLE_FORM_STYLES.ts new file mode 100644 index 0000000000..ca8b2f29e0 --- /dev/null +++ b/webapp/packages/core-blocks/src/Expand/EXPANDABLE_FORM_STYLES.ts @@ -0,0 +1,19 @@ +/* + * CloudBeaver - Cloud Database Manager + * Copyright (C) 2020-2022 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 { css } from 'reshadow'; + +export const EXPANDABLE_FORM_STYLES = css` + Disclosure:global([aria-expanded="true"]) { + margin-bottom: 10px; + } + expand-label { + composes: theme-typography--body1 from global; + font-weight: 500; + } +`; \ No newline at end of file diff --git a/webapp/packages/core-blocks/src/Expand/Expandable.tsx b/webapp/packages/core-blocks/src/Expand/Expandable.tsx new file mode 100644 index 0000000000..ee7074c434 --- /dev/null +++ b/webapp/packages/core-blocks/src/Expand/Expandable.tsx @@ -0,0 +1,85 @@ +/* + * CloudBeaver - Cloud Database Manager + * Copyright (C) 2020-2022 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 { ReactNode, useImperativeHandle } from 'react'; +import { Disclosure, DisclosureContent, DisclosureStateReturn, useDisclosureState } from 'reakit'; +import styled, { css, use } from 'reshadow'; + +import { ComponentStyle, useStyles } from '@cloudbeaver/core-theming'; + +import { IconOrImage } from '../IconOrImage'; + +export type ExpandableState = Pick; + +interface Props { + label: string; + children: ReactNode; + defaultExpanded?: boolean; + disabled?: boolean; + style?: ComponentStyle; +} + +const styles = css` + Disclosure { + border: none; + padding: 0; + margin: 0; + background: transparent; + color: inherit; + font: inherit; + outline: none; + cursor: pointer; + display: flex; + align-items: center; + max-width: max-content; + } + expand-icon { + display: flex; + box-sizing: border-box; + flex-shrink: 0; + opacity: 0.5; + width: 16px; + height: 16px; + transform: rotate(-90deg); + + &[|expanded] { + transform: rotate(0deg); + } + } + IconOrImage { + width: 100%; + height: 100%; + } +`; + +export const Expandable = observer(function Expandable({ + label, + defaultExpanded, + disabled, + children, + style, +}, ref) { + const disclosure = useDisclosureState({ visible: defaultExpanded ?? false }); + + useImperativeHandle(ref, () => disclosure); + + return styled(useStyles(styles, style))( + <> + + + + + {label} + + + <>{children} + + + ); +}, { forwardRef: true }); \ No newline at end of file diff --git a/webapp/packages/core-blocks/src/index.ts b/webapp/packages/core-blocks/src/index.ts index 926b2dd1e7..f649c7ded8 100644 --- a/webapp/packages/core-blocks/src/index.ts +++ b/webapp/packages/core-blocks/src/index.ts @@ -65,6 +65,9 @@ export * from './Table/TableState'; export * from './Table/TableSelect'; export * from './Table/getSelectedItems'; +export * from './Expand/Expandable'; +export * from './Expand/EXPANDABLE_FORM_STYLES'; + export * from './Tree/TreeNode/EventTreeNodeExpandFlag'; export * from './Tree/TreeNode/EventTreeNodeSelectFlag'; export * from './Tree/TreeNode/TreeNode'; diff --git a/webapp/packages/core-connections/src/locales/en.ts b/webapp/packages/core-connections/src/locales/en.ts index d52f4dfea9..ded7db0416 100644 --- a/webapp/packages/core-connections/src/locales/en.ts +++ b/webapp/packages/core-connections/src/locales/en.ts @@ -60,6 +60,7 @@ export default [ ['connections_network_handler_ssh_tunnel_password', 'Password'], ['connections_network_handler_ssh_tunnel_auth_type', 'Authentication method'], ['connections_network_handler_ssh_tunnel_private_key', 'Private key'], + ['connections_network_handler_ssh_tunnel_advanced_settings', 'Advanced Settings'], ['connections_driver_search_placeholder', 'Type driver name...'], ['connections_not_found', 'No database connections were found'], diff --git a/webapp/packages/core-connections/src/locales/it.ts b/webapp/packages/core-connections/src/locales/it.ts index 8aa99ccb5e..c7346d51f3 100644 --- a/webapp/packages/core-connections/src/locales/it.ts +++ b/webapp/packages/core-connections/src/locales/it.ts @@ -62,6 +62,7 @@ export default [ ['connections_network_handler_ssh_tunnel_password', 'Password'], ['connections_network_handler_ssh_tunnel_auth_type', 'Authentication method'], ['connections_network_handler_ssh_tunnel_private_key', 'Private key'], + ['connections_network_handler_ssh_tunnel_advanced_settings', 'Advanced Settings'], ['connections_driver_search_placeholder', 'Digita il nome del driver...'], ['connections_not_found', 'Nessuna connessione al database trovata'], diff --git a/webapp/packages/core-connections/src/locales/ru.ts b/webapp/packages/core-connections/src/locales/ru.ts index 3d9c1e616f..36a0df157e 100644 --- a/webapp/packages/core-connections/src/locales/ru.ts +++ b/webapp/packages/core-connections/src/locales/ru.ts @@ -57,6 +57,7 @@ export default [ ['connections_network_handler_ssh_tunnel_password', 'Пароль'], ['connections_network_handler_ssh_tunnel_auth_type', 'Метод аутентификации'], ['connections_network_handler_ssh_tunnel_private_key', 'Приватный ключ'], + ['connections_network_handler_ssh_tunnel_advanced_settings', 'Дополнительные настройки'], ['connections_driver_search_placeholder', 'Введите название драйвера...'], ['connections_not_found', 'Подключения к базам данных не найдены'], diff --git a/webapp/packages/core-connections/src/locales/zh.ts b/webapp/packages/core-connections/src/locales/zh.ts index 16a3f5f046..12232954cd 100644 --- a/webapp/packages/core-connections/src/locales/zh.ts +++ b/webapp/packages/core-connections/src/locales/zh.ts @@ -11,7 +11,7 @@ export default [ ['connections_administration_configuration_wizard_title', '添加数据库连接'], ['connections_administration_configuration_wizard_message', '您可以在此处手动创建数据库连接或使用数据库服务器搜索。您可以跳过此步骤并稍后配置连接。'], ['connections_administration_connection_no_information', '没有可用信息'], - ['connections_administration_delete_confirmation', "您将删除这些连接："], + ['connections_administration_delete_confirmation', '您将删除这些连接：'], ['connections_administration_tools_add_tooltip', '添加新连接'], ['connections_administration_tools_refresh_tooltip', '刷新连接列表'], ['connections_administration_tools_delete_tooltip', '删除选中的连接'], @@ -60,6 +60,7 @@ export default [ ['connections_network_handler_ssh_tunnel_password', '密码'], ['connections_network_handler_ssh_tunnel_auth_type', 'Authentication method'], ['connections_network_handler_ssh_tunnel_private_key', 'Private key'], + ['connections_network_handler_ssh_tunnel_advanced_settings', 'Advanced Settings'], ['connections_driver_search_placeholder', '输入驱动名称...'], ['connections_not_found', '未找到数据库连接'], diff --git a/webapp/packages/plugin-connections/src/ConnectionForm/SSH/ConnectionSSHTabService.ts b/webapp/packages/plugin-connections/src/ConnectionForm/SSH/ConnectionSSHTabService.ts index bddefe9e40..48b0cedaaf 100644 --- a/webapp/packages/plugin-connections/src/ConnectionForm/SSH/ConnectionSSHTabService.ts +++ b/webapp/packages/plugin-connections/src/ConnectionForm/SSH/ConnectionSSHTabService.ts @@ -97,6 +97,8 @@ export class ConnectionSSHTabService extends Bootstrap { properties: { port: 22, host: '', + aliveInterval: '', + sshConnectTimeout: '', ...initialConfig?.properties, }, }); @@ -218,7 +220,9 @@ export class ConnectionSSHTabService extends Bootstrap { || handler.savePassword !== initial?.savePassword || handler.userName !== initial?.userName || handler.properties?.host !== initial?.properties?.host - || port !== formPort) { + || port !== formPort + || handler.properties?.aliveInterval !== initial?.properties?.aliveInterval + || handler.properties?.sshConnectTimeout !== initial?.properties?.sshConnectTimeout) { return true; } diff --git a/webapp/packages/plugin-connections/src/ConnectionForm/SSH/SSH.tsx b/webapp/packages/plugin-connections/src/ConnectionForm/SSH/SSH.tsx index 486594568f..ea9832db3c 100644 --- a/webapp/packages/plugin-connections/src/ConnectionForm/SSH/SSH.tsx +++ b/webapp/packages/plugin-connections/src/ConnectionForm/SSH/SSH.tsx @@ -13,7 +13,8 @@ import styled, { css } from 'reshadow'; import { useAdministrationSettings } from '@cloudbeaver/core-administration'; import { Group, SubmittingForm, useMapResource, Button, ColoredContainer, InputField, - FieldCheckbox, BASE_CONTAINERS_STYLES, Switch, GroupItem, Container, Textarea, UploadArea, Combobox + FieldCheckbox, BASE_CONTAINERS_STYLES, Switch, GroupItem, Container, Textarea, + UploadArea, Combobox, Expandable, EXPANDABLE_FORM_STYLES } from '@cloudbeaver/core-blocks'; import { NetworkHandlerResource, SSH_TUNNEL_ID } from '@cloudbeaver/core-connections'; import { useTranslate } from '@cloudbeaver/core-localization'; @@ -215,6 +216,35 @@ export const SSH: TabContainerPanelComponent = observer(fu {translate('connections_connection_edit_save_credentials')} )} + + + + + Alive interval + + + Connect timeout + + + +