opensource/cloudbeaver
3
0
Fork 0
mirror of https://github.com/dbeaver/cloudbeaver.git synced 2026-09-24 16:04:36 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(plugin-connections): CB-1822 CB-1824 support advanced properties

Browse Source
This commit is contained in:
Naumov Alexey
2022-03-28 14:45:50 +02:00
parent bc6f69b9d2
commit 7dc4ecdafe
9 changed files with 148 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
webapp/packages/core-blocks/src/Expand/EXPANDABLE_FORM_STYLES.ts
+19
View File
@@ -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;
}
`;
webapp/packages/core-blocks/src/Expand/Expandable.tsx
+85
View File
@@ -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<DisclosureStateReturn, 'setVisible' | 'show' | 'hide' | 'toggle' | 'visible'>;
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<Props, ExpandableState>(function Expandable({
label,
defaultExpanded,
disabled,
children,
style,
}, ref) {
const disclosure = useDisclosureState({ visible: defaultExpanded ?? false });
useImperativeHandle(ref, () => disclosure);
return styled(useStyles(styles, style))(
<>
<Disclosure {...disclosure} disabled={disabled}>
<expand-icon {...use({ expanded: disclosure.visible })}>
<IconOrImage icon='arrow' />
</expand-icon>
<expand-label>{label}</expand-label>
</Disclosure>
<DisclosureContent {...disclosure}>
<>{children}</>
</DisclosureContent>
</>
);
}, { forwardRef: true });
webapp/packages/core-blocks/src/index.ts
+3
View File
@@ -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';
webapp/packages/core-connections/src/locales/en.ts
+1
View File
@@ -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'],
webapp/packages/core-connections/src/locales/it.ts
+1
View File
@@ -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'],
webapp/packages/core-connections/src/locales/ru.ts
+1
View File
@@ -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', 'Подключения к базам данных не найдены'],
webapp/packages/core-connections/src/locales/zh.ts
+2 -1
View File
@@ -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', '未找到数据库连接'],
webapp/packages/plugin-connections/src/ConnectionForm/SSH/ConnectionSSHTabService.ts
+5 -1
View File
@@ -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;
}
webapp/packages/plugin-connections/src/ConnectionForm/SSH/SSH.tsx
+31 -1
View File
@@ -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<IConnectionFormProps> = observer(fu
{translate('connections_connection_edit_save_credentials')}
</FieldCheckbox>
)}
<Container>
<Expandable
style={EXPANDABLE_FORM_STYLES}
label={translate('connections_network_handler_ssh_tunnel_advanced_settings')}
>
<Container gap>
<InputField
name='aliveInterval'
state={state.properties}
disabled={disabled || !enabled}
readOnly={readonly}
mod='surface'
tiny
>
Alive interval
</InputField>
<InputField
name='sshConnectTimeout'
state={state.properties}
disabled={disabled || !enabled}
readOnly={readonly}
mod='surface'
tiny
>
Connect timeout
</InputField>
</Container>
</Expandable>
</Container>
<GroupItem>
<Button
type='button'