From 4d24969a35ab625e75ad8001f9f34ce9c9c3dd0a Mon Sep 17 00:00:00 2001 From: Wroud Date: Thu, 15 Oct 2020 00:35:23 +0300 Subject: [PATCH] refactor: CB-338 forms, tabs, styles --- .../AdministrationTools.tsx | 18 +- .../AdministrationToolsStyles.ts | 35 ++++ .../packages/core-administration/src/index.ts | 1 + .../Checkboxes/CheckboxMarkup.tsx | 3 + .../core-blocks/src/FormControls/FormBox.tsx | 29 +++ .../src/FormControls/FormBoxElement.tsx | 27 +++ .../src/FormControls/FormGroup.tsx | 28 +++ .../src/FormControls/InputField.tsx | 4 +- .../src/FormControls/InputGroup.tsx | 12 +- .../core-blocks/src/FormControls/Switch.tsx | 3 + .../src/FormControls/baseFormControlStyles.ts | 13 +- .../src/Tabs/Tab/BorderTabStyles.ts | 39 ++++ .../core-blocks/src/Tabs/Tab/index.ts | 1 + webapp/packages/core-blocks/src/index.ts | 3 + .../ConnectionForm/ConnectionForm.tsx | 35 +--- .../ConnectionForm/Options/Options.tsx | 51 ++--- .../ConnectionForm/Options/ParametersForm.tsx | 14 +- .../ConnectionForm/Options/formStyles.ts | 4 - .../Connections/ConnectionsAdministration.tsx | 16 +- .../CreateConnection/CreateConnection.tsx | 35 +--- webapp/packages/core-executor/src/index.ts | 1 + .../core-executor/src/useFormValidator.ts | 39 ++++ .../Form/ServerConfigurationAdminForm.tsx | 57 ++++++ .../ServerConfigurationConfigurationForm.tsx | 65 ++++++ .../Form/ServerConfigurationInfoForm.tsx | 55 +++++ .../ServerConfigurationForm.tsx | 188 ------------------ .../ServerConfigurationPage.tsx | 51 ++--- .../plugin-administration/src/index.ts | 4 + .../Users/UserForm/UserForm.tsx | 79 ++------ .../Users/UsersAdministration.tsx | 16 +- .../ConnectionForm/ParametersForm.tsx | 51 ++--- .../ConnectionFormDialog.tsx | 23 +-- 32 files changed, 536 insertions(+), 464 deletions(-) create mode 100644 webapp/packages/core-administration/src/Administration/AdministrationTools/AdministrationToolsStyles.ts create mode 100644 webapp/packages/core-blocks/src/FormControls/FormBox.tsx create mode 100644 webapp/packages/core-blocks/src/FormControls/FormBoxElement.tsx create mode 100644 webapp/packages/core-blocks/src/FormControls/FormGroup.tsx create mode 100644 webapp/packages/core-blocks/src/Tabs/Tab/BorderTabStyles.ts create mode 100644 webapp/packages/core-executor/src/useFormValidator.ts create mode 100644 webapp/packages/plugin-administration/src/ConfigurationWizard/ServerConfiguration/Form/ServerConfigurationAdminForm.tsx create mode 100644 webapp/packages/plugin-administration/src/ConfigurationWizard/ServerConfiguration/Form/ServerConfigurationConfigurationForm.tsx create mode 100644 webapp/packages/plugin-administration/src/ConfigurationWizard/ServerConfiguration/Form/ServerConfigurationInfoForm.tsx delete mode 100644 webapp/packages/plugin-administration/src/ConfigurationWizard/ServerConfiguration/ServerConfigurationForm.tsx diff --git a/webapp/packages/core-administration/src/Administration/AdministrationTools/AdministrationTools.tsx b/webapp/packages/core-administration/src/Administration/AdministrationTools/AdministrationTools.tsx index b12542e58d..40d9bb3fec 100644 --- a/webapp/packages/core-administration/src/Administration/AdministrationTools/AdministrationTools.tsx +++ b/webapp/packages/core-administration/src/Administration/AdministrationTools/AdministrationTools.tsx @@ -6,22 +6,14 @@ * you may not use this file except in compliance with the License. */ -import styled, { css } from 'reshadow'; - -const styles = css` - administration-tools { - height: 48px; - } -`; - -type Props = React.PropsWithChildren<{ +interface Props { className?: string; -}>; +} -export function AdministrationTools({ children, className }: Props) { - return styled(styles)( +export const AdministrationTools: React.FC = function AdministrationTools({ children, className }) { + return ( {children} ); -} +}; diff --git a/webapp/packages/core-administration/src/Administration/AdministrationTools/AdministrationToolsStyles.ts b/webapp/packages/core-administration/src/Administration/AdministrationTools/AdministrationToolsStyles.ts new file mode 100644 index 0000000000..25dfbc9110 --- /dev/null +++ b/webapp/packages/core-administration/src/Administration/AdministrationTools/AdministrationToolsStyles.ts @@ -0,0 +1,35 @@ + +/* + * cloudbeaver - Cloud Database Manager + * Copyright (C) 2020 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'; + +import { composes } from '@cloudbeaver/core-theming'; + +export const ADMINISTRATION_TOOLS_STYLES = composes( + css` + AdministrationTools { + composes: theme-background-surface theme-text-on-surface theme-border-color-background from global; + } + `, + css` + AdministrationTools { + padding: 0 16px; + display: flex; + align-items: center; + border-bottom: solid 1px; + height: 48px; + + & IconButton { + height: 32px; + width: 32px; + margin-right: 16px; + } + } + ` +); diff --git a/webapp/packages/core-administration/src/index.ts b/webapp/packages/core-administration/src/index.ts index 9184c71a4b..d2a26ef256 100644 --- a/webapp/packages/core-administration/src/index.ts +++ b/webapp/packages/core-administration/src/index.ts @@ -1,4 +1,5 @@ export * from './Administration/AdministrationTools/AdministrationTools'; +export * from './Administration/AdministrationTools/AdministrationToolsStyles'; export * from './AdministrationItem/AdministrationItemService'; export * from './AdministrationItem/IAdministrationItem'; export * from './AdministrationScreen/AdministrationScreenService'; diff --git a/webapp/packages/core-blocks/src/FormControls/Checkboxes/CheckboxMarkup.tsx b/webapp/packages/core-blocks/src/FormControls/Checkboxes/CheckboxMarkup.tsx index faf2edddf9..373a8e93e1 100644 --- a/webapp/packages/core-blocks/src/FormControls/Checkboxes/CheckboxMarkup.tsx +++ b/webapp/packages/core-blocks/src/FormControls/Checkboxes/CheckboxMarkup.tsx @@ -39,6 +39,9 @@ const checkboxStyles = composes( display: flex; align-items: center; } + checkbox-label { + composes: theme-typography--body2 from global; + } ` ); diff --git a/webapp/packages/core-blocks/src/FormControls/FormBox.tsx b/webapp/packages/core-blocks/src/FormControls/FormBox.tsx new file mode 100644 index 0000000000..c7fdc04f8d --- /dev/null +++ b/webapp/packages/core-blocks/src/FormControls/FormBox.tsx @@ -0,0 +1,29 @@ +/* + * cloudbeaver - Cloud Database Manager + * Copyright (C) 2020 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 styled, { css } from 'reshadow'; + +const styles = css` + box { + flex: 1; + display: flex; + flex-wrap: wrap; + } +`; + +interface Props { + className?: string; +} + +export const FormBox: React.FC = function FormBox({ children, className }) { + return styled(styles)( + + {children} + + ); +}; diff --git a/webapp/packages/core-blocks/src/FormControls/FormBoxElement.tsx b/webapp/packages/core-blocks/src/FormControls/FormBoxElement.tsx new file mode 100644 index 0000000000..f041186ddc --- /dev/null +++ b/webapp/packages/core-blocks/src/FormControls/FormBoxElement.tsx @@ -0,0 +1,27 @@ +/* + * cloudbeaver - Cloud Database Manager + * Copyright (C) 2020 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 styled, { css } from 'reshadow'; + +const styles = css` + box-element { + min-width: 450px; + } +`; + +interface Props { + className?: string; +} + +export const FormBoxElement: React.FC = function FormBoxElement({ children, className }) { + return styled(styles)( + + {children} + + ); +}; diff --git a/webapp/packages/core-blocks/src/FormControls/FormGroup.tsx b/webapp/packages/core-blocks/src/FormControls/FormGroup.tsx new file mode 100644 index 0000000000..bd9c22a0e2 --- /dev/null +++ b/webapp/packages/core-blocks/src/FormControls/FormGroup.tsx @@ -0,0 +1,28 @@ +/* + * cloudbeaver - Cloud Database Manager + * Copyright (C) 2020 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 styled, { css } from 'reshadow'; + +const styles = css` + group { + box-sizing: border-box; + display: flex; + } +`; + +interface Props { + className?: string; +} + +export const FormGroup: React.FC = function FormGroup({ children, className }) { + return styled(styles)( + + {children} + + ); +}; diff --git a/webapp/packages/core-blocks/src/FormControls/InputField.tsx b/webapp/packages/core-blocks/src/FormControls/InputField.tsx index 967c6eaf2b..c22d9d59fe 100644 --- a/webapp/packages/core-blocks/src/FormControls/InputField.tsx +++ b/webapp/packages/core-blocks/src/FormControls/InputField.tsx @@ -18,6 +18,7 @@ import { FormContext } from './FormContext'; type BaseProps = Omit, 'onChange' | 'name' | 'value'> & { mod?: 'surface'; long?: boolean; + short?: boolean; }; type ControlledProps = BaseProps & { @@ -50,6 +51,7 @@ export const InputField: InputFieldType = observer(function InputField({ className, mod, long, + short, onChange, ...rest }: ControlledProps | ObjectProps) { @@ -70,7 +72,7 @@ export const InputField: InputFieldType = observer(function InputField({ const value = state ? state[name] : valueControlled; return styled(useStyles(baseFormControlStyles))( - + {children} {required && '*'} ; +} -export function InputGroup({ +export const InputGroup: React.FC = function InputGroup({ children, className, long, -}: Props) { +}) { return styled(useStyles(baseFormControlStyles, styles))( {children} ); -} +}; diff --git a/webapp/packages/core-blocks/src/FormControls/Switch.tsx b/webapp/packages/core-blocks/src/FormControls/Switch.tsx index 00da7604b4..fdfd09e26e 100644 --- a/webapp/packages/core-blocks/src/FormControls/Switch.tsx +++ b/webapp/packages/core-blocks/src/FormControls/Switch.tsx @@ -37,6 +37,9 @@ const switchStyles = composes( } `, css` + field { + max-width: 450px; + } field label { width: auto; } diff --git a/webapp/packages/core-blocks/src/FormControls/baseFormControlStyles.ts b/webapp/packages/core-blocks/src/FormControls/baseFormControlStyles.ts index ec6ab78570..25bc318568 100644 --- a/webapp/packages/core-blocks/src/FormControls/baseFormControlStyles.ts +++ b/webapp/packages/core-blocks/src/FormControls/baseFormControlStyles.ts @@ -28,9 +28,9 @@ export const baseFormControlStyles = css` field-label { composes: theme-typography--body1 from global; box-sizing: border-box; - width: 150px; + width: 180px; text-align: right; - padding-right: 24px; + padding: 0 16px; line-height: 16px; font-weight: 500; } @@ -50,4 +50,13 @@ export const baseFormControlStyles = css` padding-left: 200px; } } + + field[|short] { + & field-label { + width: auto; + } + & field-description { + padding-left: auto; + } + } `; diff --git a/webapp/packages/core-blocks/src/Tabs/Tab/BorderTabStyles.ts b/webapp/packages/core-blocks/src/Tabs/Tab/BorderTabStyles.ts new file mode 100644 index 0000000000..54b9221d19 --- /dev/null +++ b/webapp/packages/core-blocks/src/Tabs/Tab/BorderTabStyles.ts @@ -0,0 +1,39 @@ +/* + * cloudbeaver - Cloud Database Manager + * Copyright (C) 2020 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 BORDER_TAB_STYLES = css` + TabList { + align-items: center; + box-sizing: border-box; + display: inline-flex; + width: 100%; + padding-left: 24px; + outline: none; + } + + TabPanel { + overflow: auto !important; + } + + Tab { + composes: theme-typography--body2 from global; + text-transform: uppercase; + font-weight: normal; + + &:global([aria-selected=true]) { + font-weight: normal !important; + } + + & TabTitle { + padding: 0 24px !important; + } + } + ` +; diff --git a/webapp/packages/core-blocks/src/Tabs/Tab/index.ts b/webapp/packages/core-blocks/src/Tabs/Tab/index.ts index 854455cc13..7344b01b74 100644 --- a/webapp/packages/core-blocks/src/Tabs/Tab/index.ts +++ b/webapp/packages/core-blocks/src/Tabs/Tab/index.ts @@ -1,3 +1,4 @@ +export * from './BorderTabStyles'; export * from './Tab'; export * from './TabIcon'; export * from './TabTitle'; diff --git a/webapp/packages/core-blocks/src/index.ts b/webapp/packages/core-blocks/src/index.ts index 4da39ae17b..1ef791c145 100644 --- a/webapp/packages/core-blocks/src/index.ts +++ b/webapp/packages/core-blocks/src/index.ts @@ -16,8 +16,11 @@ export * from './Button'; export * from './FormControls/Checkboxes/Checkbox'; export * from './FormControls/Checkboxes/FieldCheckbox'; export * from './FormControls/Checkboxes/CheckboxMarkup'; +export * from './FormControls/FormBox'; +export * from './FormControls/FormBoxElement'; export * from './FormControls/Combobox'; export * from './FormControls/FormContext'; +export * from './FormControls/FormGroup'; export * from './FormControls/InputField'; export * from './FormControls/InputGroup'; export * from './FormControls/Radio'; diff --git a/webapp/packages/core-connections/src/Administration/Connections/ConnectionForm/ConnectionForm.tsx b/webapp/packages/core-connections/src/Administration/Connections/ConnectionForm/ConnectionForm.tsx index d56141aa69..a0142136a8 100644 --- a/webapp/packages/core-connections/src/Administration/Connections/ConnectionForm/ConnectionForm.tsx +++ b/webapp/packages/core-connections/src/Administration/Connections/ConnectionForm/ConnectionForm.tsx @@ -12,7 +12,7 @@ import styled, { css } from 'reshadow'; import { TabsState, TabList, Tab, TabTitle, Loader, TabPanel, - ErrorMessage, Button + Button, BORDER_TAB_STYLES } from '@cloudbeaver/core-blocks'; import { useController } from '@cloudbeaver/core-di'; import { useTranslate } from '@cloudbeaver/core-localization'; @@ -30,10 +30,6 @@ const styles = composes( composes: theme-ripple theme-background-secondary theme-text-on-secondary from global; } - ErrorMessage { - composes: theme-background-secondary from global; - } - TabList { composes: theme-background-surface theme-text-on-surface from global; } @@ -71,33 +67,6 @@ const styles = composes( flex-direction: column; } - TabList { - align-items: center; - box-sizing: border-box; - display: inline-flex; - width: 100%; - padding-left: 24px; - outline: none; - } - - TabPanel { - overflow: auto !important; - } - - Tab { - composes: theme-typography--body2 from global; - text-transform: uppercase; - font-weight: normal; - - &:global([aria-selected=true]) { - font-weight: normal !important; - } - - & TabTitle { - padding: 0 24px !important; - } - } - fill { flex: 1; } @@ -127,7 +96,7 @@ export const ConnectionForm = observer(function ConnectionForm({ const controller = useController(Controller, model, onCancel); const translate = useTranslate(); - return styled(useStyles(styles))( + return styled(useStyles(styles, BORDER_TAB_STYLES))( diff --git a/webapp/packages/core-connections/src/Administration/Connections/ConnectionForm/Options/Options.tsx b/webapp/packages/core-connections/src/Administration/Connections/ConnectionForm/Options/Options.tsx index 6737e8a477..f2544b88f8 100644 --- a/webapp/packages/core-connections/src/Administration/Connections/ConnectionForm/Options/Options.tsx +++ b/webapp/packages/core-connections/src/Administration/Connections/ConnectionForm/Options/Options.tsx @@ -14,14 +14,13 @@ import { InputField, useFocus, ObjectPropertyInfoForm, - Checkbox, Textarea, InputGroup, RadioGroup, TabsState, TabPanel, Combobox, - SubmittingForm, FieldCheckbox + SubmittingForm, FieldCheckbox, FormBox, FormBoxElement, FormGroup } from '@cloudbeaver/core-blocks'; import { useController } from '@cloudbeaver/core-di'; import { useTranslate } from '@cloudbeaver/core-localization'; @@ -48,14 +47,6 @@ const styles = css` flex-direction: column; flex: 1; } - box { - flex: 1; - display: flex; - flex-wrap: wrap; - } - box-element { - min-width: 450px; - } TabPanel { flex-direction: column; } @@ -75,9 +66,9 @@ export const Options = observer(function Options({ return styled(useStyles(styles, formStyles))( - - - + + + - - + + {translate('connections_connection_driver')} - - + + {translate('connections_connection_name')} - - + + - - - + + + @@ -145,7 +136,7 @@ export const Options = observer(function Options({ /> - + {translate('customConnection_url_JDBC')} - + {(controller.authModel && !controller.driver?.anonymousAccess) && ( <> - + {translate('connections_connection_edit_authentication')} - + - + - + )} - - + + ); }); diff --git a/webapp/packages/core-connections/src/Administration/Connections/ConnectionForm/Options/ParametersForm.tsx b/webapp/packages/core-connections/src/Administration/Connections/ConnectionForm/Options/ParametersForm.tsx index a300934b45..0e13b92412 100644 --- a/webapp/packages/core-connections/src/Administration/Connections/ConnectionForm/Options/ParametersForm.tsx +++ b/webapp/packages/core-connections/src/Administration/Connections/ConnectionForm/Options/ParametersForm.tsx @@ -9,7 +9,7 @@ import { observer } from 'mobx-react'; import styled, { use, css } from 'reshadow'; -import { InputField } from '@cloudbeaver/core-blocks'; +import { FormGroup, InputField } from '@cloudbeaver/core-blocks'; import { useTranslate } from '@cloudbeaver/core-localization'; import { ConnectionInfo } from '@cloudbeaver/core-sdk'; import { useStyles } from '@cloudbeaver/core-theming'; @@ -24,7 +24,7 @@ interface ParametersFormProps { const styles = css` layout-grid-inner { - max-width: 650px; + max-width: 630px; } `; @@ -39,7 +39,7 @@ export const ParametersForm = observer(function ParametersForm({ <> {!embedded && ( - + {translate('customConnection_custom_obligatory')} - + {translate('customConnection_custom_port')} )} - + {translate('customConnection_custom_database')} - + ); }); diff --git a/webapp/packages/core-connections/src/Administration/Connections/ConnectionForm/Options/formStyles.ts b/webapp/packages/core-connections/src/Administration/Connections/ConnectionForm/Options/formStyles.ts index 341e1768b1..1d493cba58 100644 --- a/webapp/packages/core-connections/src/Administration/Connections/ConnectionForm/Options/formStyles.ts +++ b/webapp/packages/core-connections/src/Administration/Connections/ConnectionForm/Options/formStyles.ts @@ -28,8 +28,4 @@ export const formStyles = css` composes: theme-typography--caption from global; line-height: 14px; } - group { - box-sizing: border-box; - display: flex; - } `; diff --git a/webapp/packages/core-connections/src/Administration/Connections/ConnectionsAdministration.tsx b/webapp/packages/core-connections/src/Administration/Connections/ConnectionsAdministration.tsx index 1b17f3b69e..05fa826846 100644 --- a/webapp/packages/core-connections/src/Administration/Connections/ConnectionsAdministration.tsx +++ b/webapp/packages/core-connections/src/Administration/Connections/ConnectionsAdministration.tsx @@ -9,7 +9,7 @@ import { observer } from 'mobx-react'; import styled, { css, use } from 'reshadow'; -import { AdministrationTools, AdministrationItemContentProps } from '@cloudbeaver/core-administration'; +import { AdministrationTools, AdministrationItemContentProps, ADMINISTRATION_TOOLS_STYLES } from '@cloudbeaver/core-administration'; import { Loader, IconButton } from '@cloudbeaver/core-blocks'; import { useController } from '@cloudbeaver/core-di'; import { Translate } from '@cloudbeaver/core-localization'; @@ -21,7 +21,7 @@ import { CreateConnection } from './CreateConnection/CreateConnection'; const styles = composes( css` - AdministrationTools, layout-grid-cell { + layout-grid-cell { composes: theme-background-surface theme-text-on-surface from global; } @@ -50,15 +50,7 @@ const styles = composes( } AdministrationTools { - display: flex; - padding: 0 16px; - align-items: center; - } - - IconButton { - height: 32px; - width: 32px; - margin-right: 16px; + border: none; } actions { @@ -80,7 +72,7 @@ export const ConnectionsAdministration: React.FC }) { const controller = useController(ConnectionsAdministrationController); - return styled(useStyles(styles))( + return styled(useStyles(styles, ADMINISTRATION_TOOLS_STYLES))( diff --git a/webapp/packages/core-connections/src/Administration/Connections/CreateConnection/CreateConnection.tsx b/webapp/packages/core-connections/src/Administration/Connections/CreateConnection/CreateConnection.tsx index 7bc4229475..d77b1b5b4b 100644 --- a/webapp/packages/core-connections/src/Administration/Connections/CreateConnection/CreateConnection.tsx +++ b/webapp/packages/core-connections/src/Administration/Connections/CreateConnection/CreateConnection.tsx @@ -7,11 +7,11 @@ */ import { observer } from 'mobx-react'; -import { useMemo, useEffect, useCallback } from 'react'; +import { useEffect, useCallback } from 'react'; import styled, { css } from 'reshadow'; import { - TabsState, TabList, Tab, TabTitle, IconButton, Loader, StaticImage, Icon + TabsState, TabList, Tab, TabTitle, IconButton, Loader, StaticImage, Icon, BORDER_TAB_STYLES } from '@cloudbeaver/core-blocks'; import { useController } from '@cloudbeaver/core-di'; import { useTranslate } from '@cloudbeaver/core-localization'; @@ -52,7 +52,7 @@ const styles = composes( connection-create { display: flex; flex-direction: column; - height: 550px; + height: 570px; overflow: hidden; } @@ -116,33 +116,6 @@ const styles = composes( width: 16px; } } - - TabList { - align-items: center; - box-sizing: border-box; - display: inline-flex; - padding-left: 24px; - outline: none; - flex: auto 0 0; - } - - TabPanel { - overflow: auto !important; - } - - Tab { - composes: theme-typography--body2 from global; - text-transform: uppercase; - font-weight: normal; - - &:global([aria-selected=true]) { - font-weight: normal !important; - } - - & TabTitle { - padding: 0 24px !important; - } - } ` ); @@ -192,7 +165,7 @@ export const CreateConnection = observer(function CreateConnection({ ); } - return styled(style)( + return styled(style, BORDER_TAB_STYLES)( diff --git a/webapp/packages/core-executor/src/index.ts b/webapp/packages/core-executor/src/index.ts index 2a771d7907..e0ff874226 100644 --- a/webapp/packages/core-executor/src/index.ts +++ b/webapp/packages/core-executor/src/index.ts @@ -2,3 +2,4 @@ export * from './ExecutionContext'; export * from './Executor'; export * from './IExecutor'; export * from './IExecutorHandler'; +export * from './useFormValidator'; diff --git a/webapp/packages/core-executor/src/useFormValidator.ts b/webapp/packages/core-executor/src/useFormValidator.ts new file mode 100644 index 0000000000..8336faacb8 --- /dev/null +++ b/webapp/packages/core-executor/src/useFormValidator.ts @@ -0,0 +1,39 @@ + +/* + * cloudbeaver - Cloud Database Manager + * Copyright (C) 2020 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 { useCallback, useEffect, useRef } from 'react'; + +import { IExecutor } from './IExecutor'; + +export function useFormValidator( + validationTask: IExecutor, + ref: React.RefObject, + callback?: () => void +): void { + const callbackRef = useRef(callback); + callbackRef.current = callback; + + const validate = useCallback(() => { + ref.current?.checkValidity(); + ref.current?.reportValidity(); + + if (callbackRef.current) { + callbackRef.current(); + } + }, [ref]); + + useEffect(() => { + if (!validationTask) { + return; + } + validationTask.addHandler(validate); + + return () => validationTask.removeHandler(validate); + }, [validationTask, validate]); +} diff --git a/webapp/packages/plugin-administration/src/ConfigurationWizard/ServerConfiguration/Form/ServerConfigurationAdminForm.tsx b/webapp/packages/plugin-administration/src/ConfigurationWizard/ServerConfiguration/Form/ServerConfigurationAdminForm.tsx new file mode 100644 index 0000000000..c901cfb0af --- /dev/null +++ b/webapp/packages/plugin-administration/src/ConfigurationWizard/ServerConfiguration/Form/ServerConfigurationAdminForm.tsx @@ -0,0 +1,57 @@ + +/* + * cloudbeaver - Cloud Database Manager + * Copyright (C) 2020 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'; + +import { FormGroup, InputGroup, InputField } from '@cloudbeaver/core-blocks'; +import { useTranslate } from '@cloudbeaver/core-localization'; +import { ServerConfigInput } from '@cloudbeaver/core-sdk'; + +interface Props { + serverConfig: ServerConfigInput; +} + +export const ServerConfigurationAdminForm: React.FC = observer(function ServerConfigurationAdminForm({ + serverConfig, +}) { + const translate = useTranslate(); + return ( + <> + + {translate('administration_configuration_wizard_configuration_admin')} + + + + {translate('administration_configuration_wizard_configuration_admin_name')} + + + + + {translate('administration_configuration_wizard_configuration_admin_password')} + + + + ); +}); diff --git a/webapp/packages/plugin-administration/src/ConfigurationWizard/ServerConfiguration/Form/ServerConfigurationConfigurationForm.tsx b/webapp/packages/plugin-administration/src/ConfigurationWizard/ServerConfiguration/Form/ServerConfigurationConfigurationForm.tsx new file mode 100644 index 0000000000..7e31d3774c --- /dev/null +++ b/webapp/packages/plugin-administration/src/ConfigurationWizard/ServerConfiguration/Form/ServerConfigurationConfigurationForm.tsx @@ -0,0 +1,65 @@ + +/* + * cloudbeaver - Cloud Database Manager + * Copyright (C) 2020 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'; + +import { FormGroup, InputGroup, Switch } from '@cloudbeaver/core-blocks'; +import { useTranslate } from '@cloudbeaver/core-localization'; +import { ServerConfigInput } from '@cloudbeaver/core-sdk'; + +interface Props { + serverConfig: ServerConfigInput; +} + +export const ServerConfigurationConfigurationForm: React.FC = observer(function ServerConfigurationConfigurationForm({ + serverConfig, +}) { + const translate = useTranslate(); + return ( + <> + + {translate('administration_configuration_wizard_configuration_plugins')} + + + + {translate('administration_configuration_wizard_configuration_anonymous_access')} + + + + + {translate('administration_configuration_wizard_configuration_authentication')} + + + + + {translate('administration_configuration_wizard_configuration_custom_connections')} + + + + ); +}); diff --git a/webapp/packages/plugin-administration/src/ConfigurationWizard/ServerConfiguration/Form/ServerConfigurationInfoForm.tsx b/webapp/packages/plugin-administration/src/ConfigurationWizard/ServerConfiguration/Form/ServerConfigurationInfoForm.tsx new file mode 100644 index 0000000000..3d8772e945 --- /dev/null +++ b/webapp/packages/plugin-administration/src/ConfigurationWizard/ServerConfiguration/Form/ServerConfigurationInfoForm.tsx @@ -0,0 +1,55 @@ + +/* + * cloudbeaver - Cloud Database Manager + * Copyright (C) 2020 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'; + +import { FormGroup, InputGroup, InputField } from '@cloudbeaver/core-blocks'; +import { useTranslate } from '@cloudbeaver/core-localization'; +import { ServerConfigInput } from '@cloudbeaver/core-sdk'; + +interface Props { + serverConfig: ServerConfigInput; +} + +export const ServerConfigurationInfoForm: React.FC = observer(function ServerConfigurationInfoForm({ + serverConfig, +}) { + const translate = useTranslate(); + return ( + <> + + {translate('administration_configuration_wizard_configuration_server_info')} + + + + {translate('administration_configuration_wizard_configuration_server_name')} + + + + + {translate('administration_configuration_wizard_configuration_server_session_expire_time')} + + + + ); +}); diff --git a/webapp/packages/plugin-administration/src/ConfigurationWizard/ServerConfiguration/ServerConfigurationForm.tsx b/webapp/packages/plugin-administration/src/ConfigurationWizard/ServerConfiguration/ServerConfigurationForm.tsx deleted file mode 100644 index 6f6f032fb7..0000000000 --- a/webapp/packages/plugin-administration/src/ConfigurationWizard/ServerConfiguration/ServerConfigurationForm.tsx +++ /dev/null @@ -1,188 +0,0 @@ -/* - * cloudbeaver - Cloud Database Manager - * Copyright (C) 2020 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'; -import { useCallback, useEffect } from 'react'; -import styled, { css } from 'reshadow'; - -import { - SubmittingForm, InputGroup, InputField, useFocus, Switch, Button -} from '@cloudbeaver/core-blocks'; -import { IExecutor } from '@cloudbeaver/core-executor'; -import { useTranslate } from '@cloudbeaver/core-localization'; -import { ServerConfigInput } from '@cloudbeaver/core-sdk'; -import { useStyles } from '@cloudbeaver/core-theming'; - -export const formStyles = css` - SubmittingForm { - flex: 1; - display: flex; - overflow: auto; - flex-direction: row; - } - group { - box-sizing: border-box; - display: flex; - } - Button { - margin: 12px; - margin-left: 24px; - float: right; - } -`; - -const boxStyles = css` - box { - flex: 1; - display: flex; - flex-wrap: wrap; - } - box-element { - width: 450px; - } -`; - -interface Props { - serverConfig: ServerConfigInput; - validationTask?: IExecutor; - editing?: boolean; - className?: string; - onChange: () => void; - onSubmit: () => void; -} - -export const ServerConfigurationForm: React.FC = observer(function ServerConfigurationForm({ - serverConfig, - validationTask, - editing, - className, - onChange, - onSubmit, -}) { - const translate = useTranslate(); - const [focusedRef] = useFocus({ focusFirstChild: true }); - - const validate = useCallback(() => { - focusedRef.current?.checkValidity(); - focusedRef.current?.reportValidity(); - }, []); - - useEffect(() => { - if (!validationTask) { - return; - } - validationTask.addHandler(validate); - - return () => validationTask.removeHandler(validate); - }, [validationTask]); - - return styled(useStyles(formStyles, boxStyles))( - - - - - {translate('administration_configuration_wizard_configuration_server_info')} - - - - {translate('administration_configuration_wizard_configuration_server_name')} - - - - - {translate('administration_configuration_wizard_configuration_server_session_expire_time')} - - - {!editing && ( - <> - - {translate('administration_configuration_wizard_configuration_admin')} - - - {translate('administration_configuration_wizard_configuration_admin_name')} - - - {translate('administration_configuration_wizard_configuration_admin_password')} - - - )} - - - - {translate('administration_configuration_wizard_configuration_plugins')} - - - - {translate('administration_configuration_wizard_configuration_anonymous_access')} - - - - - {translate('administration_configuration_wizard_configuration_authentication')} - - - - - {translate('administration_configuration_wizard_configuration_custom_connections')} - - - - - - ); -}); diff --git a/webapp/packages/plugin-administration/src/ConfigurationWizard/ServerConfiguration/ServerConfigurationPage.tsx b/webapp/packages/plugin-administration/src/ConfigurationWizard/ServerConfiguration/ServerConfigurationPage.tsx index 7c5fd77acf..b549b7e0dc 100644 --- a/webapp/packages/plugin-administration/src/ConfigurationWizard/ServerConfiguration/ServerConfigurationPage.tsx +++ b/webapp/packages/plugin-administration/src/ConfigurationWizard/ServerConfiguration/ServerConfigurationPage.tsx @@ -9,19 +9,22 @@ import { observer } from 'mobx-react'; import styled, { use, css } from 'reshadow'; -import { AdministrationTools } from '@cloudbeaver/core-administration'; -import { IconButton } from '@cloudbeaver/core-blocks'; +import { AdministrationTools, ADMINISTRATION_TOOLS_STYLES } from '@cloudbeaver/core-administration'; +import { FormBox, FormBoxElement, IconButton, SubmittingForm, useFocus } from '@cloudbeaver/core-blocks'; import { useController, useService } from '@cloudbeaver/core-di'; +import { useFormValidator } from '@cloudbeaver/core-executor'; import { useTranslate } from '@cloudbeaver/core-localization'; import { useStyles, composes } from '@cloudbeaver/core-theming'; -import { ServerConfigurationForm } from './ServerConfigurationForm'; +import { ServerConfigurationAdminForm } from './Form/ServerConfigurationAdminForm'; +import { ServerConfigurationConfigurationForm } from './Form/ServerConfigurationConfigurationForm'; +import { ServerConfigurationInfoForm } from './Form/ServerConfigurationInfoForm'; import { ServerConfigurationPageController } from './ServerConfigurationPageController'; import { ServerConfigurationService } from './ServerConfigurationService'; const styles = composes( css` - AdministrationTools, layout-grid-cell { + layout-grid-cell { composes: theme-background-surface theme-text-on-surface theme-border-color-background from global; } @@ -44,25 +47,19 @@ const styles = composes( border: solid 1px; } - message-box, AdministrationTools { + message-box { border-bottom: solid 1px; } - message-box, ServerConfigurationForm { + message-box, SubmittingForm { padding: 16px 24px; } - AdministrationTools { + SubmittingForm { + flex: 1; display: flex; - padding: 0 16px; - align-items: center; - border-bottom: solid 1px; - } - - IconButton { - height: 32px; - width: 32px; - margin-right: 16px; + overflow: auto; + flex-direction: row; } p { @@ -73,10 +70,12 @@ const styles = composes( export const ServerConfigurationPage = observer(function ServerConfigurationPage() { const translate = useTranslate(); + const [focusedRef] = useFocus({ focusFirstChild: true }); const service = useService(ServerConfigurationService); const controller = useController(ServerConfigurationPageController); + useFormValidator(service.validationTask, focusedRef); - return styled(useStyles(styles))( + return styled(useStyles(styles, ADMINISTRATION_TOOLS_STYLES))( @@ -91,13 +90,17 @@ export const ServerConfigurationPage = observer(function ServerConfigurationPage )} - + + + + + {!controller.editing && } + + + + + + diff --git a/webapp/packages/plugin-administration/src/index.ts b/webapp/packages/plugin-administration/src/index.ts index e2e38fb300..217e1aa3f6 100644 --- a/webapp/packages/plugin-administration/src/index.ts +++ b/webapp/packages/plugin-administration/src/index.ts @@ -1,3 +1,7 @@ import { manifest } from './manifest'; export default manifest; + +export * from './ConfigurationWizard/ServerConfiguration/Form/ServerConfigurationAdminForm'; +export * from './ConfigurationWizard/ServerConfiguration/Form/ServerConfigurationConfigurationForm'; +export * from './ConfigurationWizard/ServerConfiguration/Form/ServerConfigurationInfoForm'; diff --git a/webapp/packages/plugin-authentication/src/Administration/Users/UserForm/UserForm.tsx b/webapp/packages/plugin-authentication/src/Administration/Users/UserForm/UserForm.tsx index 4a44e122d9..d35324a6c0 100644 --- a/webapp/packages/plugin-authentication/src/Administration/Users/UserForm/UserForm.tsx +++ b/webapp/packages/plugin-authentication/src/Administration/Users/UserForm/UserForm.tsx @@ -17,7 +17,7 @@ import { InputField, FieldCheckbox, useFocus, - InputGroup + InputGroup, FormBox, FormBoxElement, FormGroup, BORDER_TAB_STYLES } from '@cloudbeaver/core-blocks'; import { useController } from '@cloudbeaver/core-di'; import { useTranslate } from '@cloudbeaver/core-localization'; @@ -41,7 +41,7 @@ const styles = composes( composes: theme-background-secondary from global; } - box { + FormBox { composes: theme-background-secondary theme-text-on-secondary from global; } @@ -60,33 +60,6 @@ const styles = composes( flex-direction: column; } - TabList { - align-items: center; - box-sizing: border-box; - display: inline-flex; - width: 100%; - padding-left: 24px; - outline: none; - } - - TabPanel { - overflow: auto !important; - } - - Tab { - composes: theme-typography--body2 from global; - text-transform: uppercase; - font-weight: normal; - - &:global([aria-selected=true]) { - font-weight: normal !important; - } - - & TabTitle { - padding: 0 24px !important; - } - } - ErrorMessage { position: sticky; bottom: 0; @@ -111,16 +84,6 @@ const styles = composes( flex: 1; width: 100%; } - - flex-box { - flex: 1; - display: flex; - flex-wrap: wrap; - } - - flex-box-element { - min-width: 450px; - } ` ); @@ -156,7 +119,7 @@ export const UserForm = observer(function UserForm({ [] ); - return styled(useStyles(styles))( + return styled(useStyles(styles, BORDER_TAB_STYLES))( @@ -187,12 +150,12 @@ export const UserForm = observer(function UserForm({ - - - + + + {translate('authentication_user_credentials')} - - + + {translate('authentication_user_name')} - - + + {translate('authentication_user_password')} - - + + {translate('authentication_user_password_repeat')} - - - - + + + + {translate('authentication_user_role')} - + {controller.roles.map((role, i) => ( - + handleRoleChange(role.roleId, checked)} /> - + ))} - - + + {controller.isLoading && } diff --git a/webapp/packages/plugin-authentication/src/Administration/Users/UsersAdministration.tsx b/webapp/packages/plugin-authentication/src/Administration/Users/UsersAdministration.tsx index 719d99f373..6614241bc7 100644 --- a/webapp/packages/plugin-authentication/src/Administration/Users/UsersAdministration.tsx +++ b/webapp/packages/plugin-authentication/src/Administration/Users/UsersAdministration.tsx @@ -9,7 +9,7 @@ import { observer } from 'mobx-react'; import styled, { css, use } from 'reshadow'; -import { AdministrationTools, AdministrationItemContentProps } from '@cloudbeaver/core-administration'; +import { AdministrationTools, AdministrationItemContentProps, ADMINISTRATION_TOOLS_STYLES } from '@cloudbeaver/core-administration'; import { Loader, IconButton } from '@cloudbeaver/core-blocks'; import { useController } from '@cloudbeaver/core-di'; import { useStyles, composes } from '@cloudbeaver/core-theming'; @@ -21,7 +21,7 @@ import { UsersTable } from './UsersTable/UsersTable'; const styles = composes( css` - AdministrationTools, layout-grid-cell { + layout-grid-cell { composes: theme-background-surface theme-text-on-surface from global; } @@ -44,15 +44,7 @@ const styles = composes( } AdministrationTools { - display: flex; - padding: 0 16px; - align-items: center; - } - - IconButton { - height: 32px; - width: 32px; - margin-right: 16px; + border: none; } ` ); @@ -66,7 +58,7 @@ export const UsersAdministration = observer(function UsersAdministration({ controller.create(); } - return styled(useStyles(styles))( + return styled(useStyles(styles, ADMINISTRATION_TOOLS_STYLES))( diff --git a/webapp/packages/plugin-connection-custom/src/CustomConnection/ConnectionFormDialog/ConnectionForm/ParametersForm.tsx b/webapp/packages/plugin-connection-custom/src/CustomConnection/ConnectionFormDialog/ConnectionForm/ParametersForm.tsx index 7955dcd4d4..80fa0e9958 100644 --- a/webapp/packages/plugin-connection-custom/src/CustomConnection/ConnectionFormDialog/ConnectionForm/ParametersForm.tsx +++ b/webapp/packages/plugin-connection-custom/src/CustomConnection/ConnectionFormDialog/ConnectionForm/ParametersForm.tsx @@ -30,29 +30,34 @@ export const ParametersForm = observer(function ParametersForm({ return styled(useStyles(formStyles))( <> {!embedded && ( - - controller.onChange('host', value)} - > - {translate('customConnection_custom_host')} - {translate('customConnection_custom_obligatory')} - - controller.onChange('port', value)} - > - {translate('customConnection_custom_port')} - - + + + controller.onChange('host', value)} + > + {translate('customConnection_custom_host')} + {translate('customConnection_custom_obligatory')} + + + + controller.onChange('port', value)} + > + {translate('customConnection_custom_port')} + + + )}