From 272a77f2442706a33d3c43443d11874ff13fee5b Mon Sep 17 00:00:00 2001 From: Naumov Alexey Date: Tue, 20 Oct 2020 13:51:30 +0300 Subject: [PATCH 01/13] improve(core-connection): CB-319 save cred checkbox(nav tree, new connection) CB-319 --- .../Checkboxes/CheckboxMarkup.tsx | 1 + .../src/ObjectPropertyInfoForm/formStyles.ts | 1 - .../src/ConnectionInfoResource.ts | 9 ++++---- .../src/DatabaseAuthDialog/DBAuthConfig.ts | 4 ++++ .../DBAuthDialogController.ts | 12 +++++++++-- .../DatabaseAuthDialog/DatabaseAuthDialog.tsx | 21 +++++++++++++++++-- .../ConnectionForm/ConnectionForm.tsx | 13 +++++++++++- .../ConnectionFormDialog.tsx | 2 +- .../ConnectionFormDialogController.ts | 2 ++ 9 files changed, 54 insertions(+), 11 deletions(-) create mode 100644 webapp/packages/core-connections/src/DatabaseAuthDialog/DBAuthConfig.ts diff --git a/webapp/packages/core-blocks/src/FormControls/Checkboxes/CheckboxMarkup.tsx b/webapp/packages/core-blocks/src/FormControls/Checkboxes/CheckboxMarkup.tsx index 373a8e93e1..89976b56d8 100644 --- a/webapp/packages/core-blocks/src/FormControls/Checkboxes/CheckboxMarkup.tsx +++ b/webapp/packages/core-blocks/src/FormControls/Checkboxes/CheckboxMarkup.tsx @@ -41,6 +41,7 @@ const checkboxStyles = composes( } checkbox-label { composes: theme-typography--body2 from global; + cursor: pointer; } ` ); diff --git a/webapp/packages/core-blocks/src/ObjectPropertyInfoForm/formStyles.ts b/webapp/packages/core-blocks/src/ObjectPropertyInfoForm/formStyles.ts index 47fe3374c7..108147c0dd 100644 --- a/webapp/packages/core-blocks/src/ObjectPropertyInfoForm/formStyles.ts +++ b/webapp/packages/core-blocks/src/ObjectPropertyInfoForm/formStyles.ts @@ -10,7 +10,6 @@ import { css } from 'reshadow'; export const formStyles = css` form-body { - flex: 1; box-sizing: border-box; display: flex; flex-direction: column; diff --git a/webapp/packages/core-connections/src/ConnectionInfoResource.ts b/webapp/packages/core-connections/src/ConnectionInfoResource.ts index 9bcdcc362b..a5d7edbf12 100644 --- a/webapp/packages/core-connections/src/ConnectionInfoResource.ts +++ b/webapp/packages/core-connections/src/ConnectionInfoResource.ts @@ -20,6 +20,7 @@ import { } from '@cloudbeaver/core-sdk'; import { ConnectionsResource } from './Administration/ConnectionsResource'; +import { IDBAuthConfig } from './DatabaseAuthDialog/DBAuthConfig'; export type Connection = Pick< ConnectionInfo, @@ -72,9 +73,9 @@ export class ConnectionInfoResource extends CachedMapResource { + async init(id: string, config?: IDBAuthConfig): Promise { await this.performUpdate(id, async () => { - const connection = await this.initConnection(id, credentials); + const connection = await this.initConnection(id, config); this.set(id, connection); return connection; }); @@ -151,8 +152,8 @@ export class ConnectionInfoResource extends CachedMapResource { - const { connection } = await this.graphQLService.sdk.initConnection({ id, credentials }); + private async initConnection(id: string, config?: IDBAuthConfig): Promise { + const { connection } = await this.graphQLService.sdk.initConnection({ id, ...config }); return connection; } diff --git a/webapp/packages/core-connections/src/DatabaseAuthDialog/DBAuthConfig.ts b/webapp/packages/core-connections/src/DatabaseAuthDialog/DBAuthConfig.ts new file mode 100644 index 0000000000..fb004da866 --- /dev/null +++ b/webapp/packages/core-connections/src/DatabaseAuthDialog/DBAuthConfig.ts @@ -0,0 +1,4 @@ +export interface IDBAuthConfig { + credentials: Record; + saveCredentials: boolean; +} diff --git a/webapp/packages/core-connections/src/DatabaseAuthDialog/DBAuthDialogController.ts b/webapp/packages/core-connections/src/DatabaseAuthDialog/DBAuthDialogController.ts index 6be1910642..f78df63101 100644 --- a/webapp/packages/core-connections/src/DatabaseAuthDialog/DBAuthDialogController.ts +++ b/webapp/packages/core-connections/src/DatabaseAuthDialog/DBAuthDialogController.ts @@ -16,11 +16,15 @@ import { GQLErrorCatcher } from '@cloudbeaver/core-sdk'; import { ConnectionInfoResource } from '../ConnectionInfoResource'; import { DBDriverResource } from '../DBDriverResource'; +import { IDBAuthConfig } from './DBAuthConfig'; @injectable() export class DBAuthDialogController implements IInitializableController, IDestructibleController { @observable isAuthenticating = false; - @observable credentials = {}; + @observable config: IDBAuthConfig = { + credentials: {}, + saveCredentials: false, + }; readonly error = new GQLErrorCatcher(); @@ -46,6 +50,10 @@ export class DBAuthDialogController implements IInitializableController, IDestru this.isDistructed = true; } + onChange = (property: keyof IDBAuthConfig, value: any) => { + this.config[property] = value; + }; + login = async () => { if (this.isAuthenticating) { return; @@ -53,7 +61,7 @@ export class DBAuthDialogController implements IInitializableController, IDestru this.isAuthenticating = true; try { - await this.connectionInfoResource.init(this.connectionId, this.credentials); + await this.connectionInfoResource.init(this.connectionId, this.config); this.close(); } catch (exception) { if (!this.error.catch(exception) || this.isDistructed) { diff --git a/webapp/packages/core-connections/src/DatabaseAuthDialog/DatabaseAuthDialog.tsx b/webapp/packages/core-connections/src/DatabaseAuthDialog/DatabaseAuthDialog.tsx index 8115dbdbb4..7b3599a28c 100644 --- a/webapp/packages/core-connections/src/DatabaseAuthDialog/DatabaseAuthDialog.tsx +++ b/webapp/packages/core-connections/src/DatabaseAuthDialog/DatabaseAuthDialog.tsx @@ -10,10 +10,11 @@ import { observer } from 'mobx-react'; import styled, { css } from 'reshadow'; import { - SubmittingForm, ErrorMessage, Loader, useFocus, ObjectPropertyInfoForm + SubmittingForm, ErrorMessage, Loader, useFocus, ObjectPropertyInfoForm, FieldCheckbox } from '@cloudbeaver/core-blocks'; import { useController } from '@cloudbeaver/core-di'; import { CommonDialogWrapper, DialogComponentProps } from '@cloudbeaver/core-dialogs'; +import { useTranslate } from '@cloudbeaver/core-localization'; import { composes, useStyles } from '@cloudbeaver/core-theming'; import { useConnectionInfo } from '../useConnectionInfo'; @@ -42,6 +43,7 @@ const styles = composes( flex: 1; display: flex; flex-direction: column; + justify-content: center; } ObjectPropertyInfoForm { align-items: center; @@ -52,6 +54,10 @@ const styles = composes( bottom: 0; padding: 8px 24px; } + FieldCheckbox { + flex: unset; + min-height: unset; + } ` ); @@ -64,6 +70,7 @@ export const DatabaseAuthDialog = observer(function DatabaseAuthDialog({ const [focusedRef] = useFocus({ focusFirstChild: true }); const { driver } = useDBDriver(connection.connectionInfo?.driverId || ''); const controller = useController(DBAuthDialogController, payload, rejectDialog); + const translate = useTranslate(); return styled(useStyles(styles))( + controller.onChange('saveCredentials', value)} + /> + )} {controller.error.responseMessage && ( diff --git a/webapp/packages/plugin-connection-custom/src/CustomConnection/ConnectionFormDialog/ConnectionForm/ConnectionForm.tsx b/webapp/packages/plugin-connection-custom/src/CustomConnection/ConnectionFormDialog/ConnectionForm/ConnectionForm.tsx index 16fdafa55c..09555ece56 100644 --- a/webapp/packages/plugin-connection-custom/src/CustomConnection/ConnectionFormDialog/ConnectionForm/ConnectionForm.tsx +++ b/webapp/packages/plugin-connection-custom/src/CustomConnection/ConnectionFormDialog/ConnectionForm/ConnectionForm.tsx @@ -10,7 +10,7 @@ import { observer } from 'mobx-react'; import styled from 'reshadow'; import { - Radio, InputField, useFocus, ObjectPropertyInfoForm, InputGroup + Radio, InputField, useFocus, ObjectPropertyInfoForm, InputGroup, FieldCheckbox } from '@cloudbeaver/core-blocks'; import { DBDriver } from '@cloudbeaver/core-connections'; import { useTranslate } from '@cloudbeaver/core-localization'; @@ -86,6 +86,17 @@ export const ConnectionForm = observer(function ConnectionForm({ credentials={controller.config.credentials} disabled={controller.isConnecting} /> + + controller.onChange('saveCredentials', value)} + /> + )} diff --git a/webapp/packages/plugin-connection-custom/src/CustomConnection/ConnectionFormDialog/ConnectionFormDialog.tsx b/webapp/packages/plugin-connection-custom/src/CustomConnection/ConnectionFormDialog/ConnectionFormDialog.tsx index f19d9da321..2b3065ff74 100644 --- a/webapp/packages/plugin-connection-custom/src/CustomConnection/ConnectionFormDialog/ConnectionFormDialog.tsx +++ b/webapp/packages/plugin-connection-custom/src/CustomConnection/ConnectionFormDialog/ConnectionFormDialog.tsx @@ -40,7 +40,7 @@ const styles = composes( box-sizing: border-box; } CommonDialogWrapper { - max-height: 550px; + max-height: 580px; min-height: 550px; } SubmittingForm { diff --git a/webapp/packages/plugin-connection-custom/src/CustomConnection/ConnectionFormDialog/ConnectionFormDialogController.ts b/webapp/packages/plugin-connection-custom/src/CustomConnection/ConnectionFormDialog/ConnectionFormDialogController.ts index 4b3dfb6aad..4bb6f66a3c 100644 --- a/webapp/packages/plugin-connection-custom/src/CustomConnection/ConnectionFormDialog/ConnectionFormDialogController.ts +++ b/webapp/packages/plugin-connection-custom/src/CustomConnection/ConnectionFormDialog/ConnectionFormDialogController.ts @@ -39,6 +39,7 @@ implements IInitializableController, IDestructibleController { url: '', properties: {}, credentials: {}, + saveCredentials: false, }; readonly error = new GQLErrorCatcher(); @@ -126,6 +127,7 @@ implements IInitializableController, IDestructibleController { if (this.authModel) { config.authModelId = this.config.authModelId; config.credentials = this.config.credentials; + config.saveCredentials = this.config.saveCredentials; } if (Object.keys(this.config.properties).length > 0) { config.properties = this.config.properties; From a4e0b3510b1e94eb3b12b248547c83ac02ac3b98 Mon Sep 17 00:00:00 2001 From: Naumov Alexey Date: Tue, 20 Oct 2020 19:57:39 +0300 Subject: [PATCH 02/13] improve(core-connection): CB-319 transform html el to components CB-319 --- .../src/ObjectPropertyInfoForm/formStyles.ts | 1 + .../src/ConnectionInfoResource.ts | 9 +- .../src/DatabaseAuthDialog/DBAuthConfig.ts | 4 - .../DBAuthDialogController.ts | 7 +- .../DatabaseAuthDialog/DatabaseAuthDialog.tsx | 48 +++--- .../ConnectionForm/ConnectionForm.tsx | 149 ++++++++++-------- .../ConnectionForm/formStyles.ts | 1 + .../ConnectionFormDialog.tsx | 2 +- 8 files changed, 117 insertions(+), 104 deletions(-) delete mode 100644 webapp/packages/core-connections/src/DatabaseAuthDialog/DBAuthConfig.ts diff --git a/webapp/packages/core-blocks/src/ObjectPropertyInfoForm/formStyles.ts b/webapp/packages/core-blocks/src/ObjectPropertyInfoForm/formStyles.ts index 108147c0dd..47fe3374c7 100644 --- a/webapp/packages/core-blocks/src/ObjectPropertyInfoForm/formStyles.ts +++ b/webapp/packages/core-blocks/src/ObjectPropertyInfoForm/formStyles.ts @@ -10,6 +10,7 @@ import { css } from 'reshadow'; export const formStyles = css` form-body { + flex: 1; box-sizing: border-box; display: flex; flex-direction: column; diff --git a/webapp/packages/core-connections/src/ConnectionInfoResource.ts b/webapp/packages/core-connections/src/ConnectionInfoResource.ts index a5d7edbf12..9bcdcc362b 100644 --- a/webapp/packages/core-connections/src/ConnectionInfoResource.ts +++ b/webapp/packages/core-connections/src/ConnectionInfoResource.ts @@ -20,7 +20,6 @@ import { } from '@cloudbeaver/core-sdk'; import { ConnectionsResource } from './Administration/ConnectionsResource'; -import { IDBAuthConfig } from './DatabaseAuthDialog/DBAuthConfig'; export type Connection = Pick< ConnectionInfo, @@ -73,9 +72,9 @@ export class ConnectionInfoResource extends CachedMapResource { + async init(id: string, credentials?: any): Promise { await this.performUpdate(id, async () => { - const connection = await this.initConnection(id, config); + const connection = await this.initConnection(id, credentials); this.set(id, connection); return connection; }); @@ -152,8 +151,8 @@ export class ConnectionInfoResource extends CachedMapResource { - const { connection } = await this.graphQLService.sdk.initConnection({ id, ...config }); + private async initConnection(id: string, credentials?: any): Promise { + const { connection } = await this.graphQLService.sdk.initConnection({ id, credentials }); return connection; } diff --git a/webapp/packages/core-connections/src/DatabaseAuthDialog/DBAuthConfig.ts b/webapp/packages/core-connections/src/DatabaseAuthDialog/DBAuthConfig.ts deleted file mode 100644 index fb004da866..0000000000 --- a/webapp/packages/core-connections/src/DatabaseAuthDialog/DBAuthConfig.ts +++ /dev/null @@ -1,4 +0,0 @@ -export interface IDBAuthConfig { - credentials: Record; - saveCredentials: boolean; -} diff --git a/webapp/packages/core-connections/src/DatabaseAuthDialog/DBAuthDialogController.ts b/webapp/packages/core-connections/src/DatabaseAuthDialog/DBAuthDialogController.ts index f78df63101..dfab55f42c 100644 --- a/webapp/packages/core-connections/src/DatabaseAuthDialog/DBAuthDialogController.ts +++ b/webapp/packages/core-connections/src/DatabaseAuthDialog/DBAuthDialogController.ts @@ -16,8 +16,11 @@ import { GQLErrorCatcher } from '@cloudbeaver/core-sdk'; import { ConnectionInfoResource } from '../ConnectionInfoResource'; import { DBDriverResource } from '../DBDriverResource'; -import { IDBAuthConfig } from './DBAuthConfig'; +interface IDBAuthConfig { + credentials: any; + saveCredentials: boolean; +} @injectable() export class DBAuthDialogController implements IInitializableController, IDestructibleController { @observable isAuthenticating = false; @@ -61,7 +64,7 @@ export class DBAuthDialogController implements IInitializableController, IDestru this.isAuthenticating = true; try { - await this.connectionInfoResource.init(this.connectionId, this.config); + await this.connectionInfoResource.init(this.connectionId, this.config.credentials); this.close(); } catch (exception) { if (!this.error.catch(exception) || this.isDistructed) { diff --git a/webapp/packages/core-connections/src/DatabaseAuthDialog/DatabaseAuthDialog.tsx b/webapp/packages/core-connections/src/DatabaseAuthDialog/DatabaseAuthDialog.tsx index 7b3599a28c..d7bf350d1f 100644 --- a/webapp/packages/core-connections/src/DatabaseAuthDialog/DatabaseAuthDialog.tsx +++ b/webapp/packages/core-connections/src/DatabaseAuthDialog/DatabaseAuthDialog.tsx @@ -10,7 +10,7 @@ import { observer } from 'mobx-react'; import styled, { css } from 'reshadow'; import { - SubmittingForm, ErrorMessage, Loader, useFocus, ObjectPropertyInfoForm, FieldCheckbox + SubmittingForm, ErrorMessage, Loader, useFocus, ObjectPropertyInfoForm, FieldCheckbox, FormBox, FormBoxElement, FormGroup } from '@cloudbeaver/core-blocks'; import { useController } from '@cloudbeaver/core-di'; import { CommonDialogWrapper, DialogComponentProps } from '@cloudbeaver/core-dialogs'; @@ -43,21 +43,20 @@ const styles = composes( flex: 1; display: flex; flex-direction: column; - justify-content: center; } ObjectPropertyInfoForm { align-items: center; justify-content: center; + display: block; + } + FormBox { + align-items: center; } ErrorMessage { position: sticky; bottom: 0; padding: 8px 24px; } - FieldCheckbox { - flex: unset; - min-height: unset; - } ` ); @@ -89,22 +88,27 @@ export const DatabaseAuthDialog = observer(function DatabaseAuthDialog({ ? : ( - - controller.onChange('saveCredentials', value)} - /> - + + + + + controller.onChange('saveCredentials', value)} + /> + + + )} {controller.error.responseMessage && ( diff --git a/webapp/packages/plugin-connection-custom/src/CustomConnection/ConnectionFormDialog/ConnectionForm/ConnectionForm.tsx b/webapp/packages/plugin-connection-custom/src/CustomConnection/ConnectionFormDialog/ConnectionForm/ConnectionForm.tsx index 09555ece56..1650693a0d 100644 --- a/webapp/packages/plugin-connection-custom/src/CustomConnection/ConnectionFormDialog/ConnectionForm/ConnectionForm.tsx +++ b/webapp/packages/plugin-connection-custom/src/CustomConnection/ConnectionFormDialog/ConnectionForm/ConnectionForm.tsx @@ -7,10 +7,10 @@ */ import { observer } from 'mobx-react'; -import styled from 'reshadow'; +import styled, { css } from 'reshadow'; import { - Radio, InputField, useFocus, ObjectPropertyInfoForm, InputGroup, FieldCheckbox + Radio, InputField, useFocus, ObjectPropertyInfoForm, InputGroup, FieldCheckbox, SubmittingForm, FormBox, FormBoxElement, FormGroup, RadioGroup } from '@cloudbeaver/core-blocks'; import { DBDriver } from '@cloudbeaver/core-connections'; import { useTranslate } from '@cloudbeaver/core-localization'; @@ -26,79 +26,88 @@ interface ConnectionFormProps { controller: IFormController; } +const connectionFormStyles = css` + SubmittingForm { + flex: 1; + padding: 4px 24px 18px; + } + FormBoxElement { + flex: 1; + } +`; + export const ConnectionForm = observer(function ConnectionForm({ driver, controller, }: ConnectionFormProps) { const translate = useTranslate(); - const [focusedRef] = useFocus({ focusFirstChild: true }); + const [focusedRef] = useFocus({ focusFirstChild: true }); - return styled(useStyles(formStyles))( - - - controller.onChangeType(ConnectionType.Attributes)} - > - {translate('customConnection_connectionType_custom')} - - controller.onChangeType(ConnectionType.URL)} - > - {translate('customConnection_connectionType_url')} - - - {controller.connectionType === ConnectionType.Attributes ? ( - - ) : ( - - controller.onChange('url', value)} - > - {translate('customConnection_url_JDBC')} - - - )} - {controller.authModel && ( - <> - - {translate('connections_connection_edit_authentication')} - - - - controller.onChange('saveCredentials', value)} - /> - - - )} - + return styled(useStyles(formStyles, connectionFormStyles))( + + + + + + + + {translate('customConnection_connectionType_custom')} + + + {translate('customConnection_connectionType_url')} + + + + + {controller.connectionType === ConnectionType.Attributes ? ( + + ) : ( + + controller.onChange('url', value)} + > + {translate('customConnection_url_JDBC')} + + + )} + {controller.authModel && ( + <> + + {translate('connections_connection_edit_authentication')} + + + + + + + )} + + + ); }); diff --git a/webapp/packages/plugin-connection-custom/src/CustomConnection/ConnectionFormDialog/ConnectionForm/formStyles.ts b/webapp/packages/plugin-connection-custom/src/CustomConnection/ConnectionFormDialog/ConnectionForm/formStyles.ts index 36a09fae52..414e579479 100644 --- a/webapp/packages/plugin-connection-custom/src/CustomConnection/ConnectionFormDialog/ConnectionForm/formStyles.ts +++ b/webapp/packages/plugin-connection-custom/src/CustomConnection/ConnectionFormDialog/ConnectionForm/formStyles.ts @@ -18,6 +18,7 @@ export const formStyles = css` } connection-type { padding: 12px; + margin-left: 160px; } Radio { composes: theme-typography--body1 from global; diff --git a/webapp/packages/plugin-connection-custom/src/CustomConnection/ConnectionFormDialog/ConnectionFormDialog.tsx b/webapp/packages/plugin-connection-custom/src/CustomConnection/ConnectionFormDialog/ConnectionFormDialog.tsx index 2b3065ff74..a10aa97ecc 100644 --- a/webapp/packages/plugin-connection-custom/src/CustomConnection/ConnectionFormDialog/ConnectionFormDialog.tsx +++ b/webapp/packages/plugin-connection-custom/src/CustomConnection/ConnectionFormDialog/ConnectionFormDialog.tsx @@ -41,7 +41,7 @@ const styles = composes( } CommonDialogWrapper { max-height: 580px; - min-height: 550px; + min-height: 580px; } SubmittingForm { flex: 1; From 5b64378ad104a8d5002d495e79cbbc0886c51816 Mon Sep 17 00:00:00 2001 From: Naumov Alexey Date: Tue, 20 Oct 2020 22:11:09 +0300 Subject: [PATCH 03/13] improve(core-connection): CB-319 objectPropertyInfoForm block => inline-flex CB-319 --- .../src/DatabaseAuthDialog/DatabaseAuthDialog.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/webapp/packages/core-connections/src/DatabaseAuthDialog/DatabaseAuthDialog.tsx b/webapp/packages/core-connections/src/DatabaseAuthDialog/DatabaseAuthDialog.tsx index d7bf350d1f..442600aa3c 100644 --- a/webapp/packages/core-connections/src/DatabaseAuthDialog/DatabaseAuthDialog.tsx +++ b/webapp/packages/core-connections/src/DatabaseAuthDialog/DatabaseAuthDialog.tsx @@ -47,7 +47,7 @@ const styles = composes( ObjectPropertyInfoForm { align-items: center; justify-content: center; - display: block; + display: inline-flex; } FormBox { align-items: center; From 7efcdfe76b3a121d68e741b6d8e824b1b56d8534 Mon Sep 17 00:00:00 2001 From: Naumov Alexey Date: Tue, 20 Oct 2020 22:22:42 +0300 Subject: [PATCH 04/13] improve(core-connection): CB-319 checkbox onChange => state CB-319 --- .../src/DatabaseAuthDialog/DBAuthDialogController.ts | 4 ---- .../src/DatabaseAuthDialog/DatabaseAuthDialog.tsx | 5 ++--- 2 files changed, 2 insertions(+), 7 deletions(-) diff --git a/webapp/packages/core-connections/src/DatabaseAuthDialog/DBAuthDialogController.ts b/webapp/packages/core-connections/src/DatabaseAuthDialog/DBAuthDialogController.ts index dfab55f42c..e8bac62a07 100644 --- a/webapp/packages/core-connections/src/DatabaseAuthDialog/DBAuthDialogController.ts +++ b/webapp/packages/core-connections/src/DatabaseAuthDialog/DBAuthDialogController.ts @@ -53,10 +53,6 @@ export class DBAuthDialogController implements IInitializableController, IDestru this.isDistructed = true; } - onChange = (property: keyof IDBAuthConfig, value: any) => { - this.config[property] = value; - }; - login = async () => { if (this.isAuthenticating) { return; diff --git a/webapp/packages/core-connections/src/DatabaseAuthDialog/DatabaseAuthDialog.tsx b/webapp/packages/core-connections/src/DatabaseAuthDialog/DatabaseAuthDialog.tsx index 442600aa3c..e36eccf1bd 100644 --- a/webapp/packages/core-connections/src/DatabaseAuthDialog/DatabaseAuthDialog.tsx +++ b/webapp/packages/core-connections/src/DatabaseAuthDialog/DatabaseAuthDialog.tsx @@ -99,12 +99,11 @@ export const DatabaseAuthDialog = observer(function DatabaseAuthDialog({ controller.onChange('saveCredentials', value)} /> From 81ad29ccb495676e2d3d1b53fbfac813c75192b3 Mon Sep 17 00:00:00 2001 From: Naumov Alexey Date: Wed, 21 Oct 2020 12:01:39 +0300 Subject: [PATCH 05/13] improve(core-connection): CB-319 delete some extra styles CB-319 --- .../ConnectionFormDialog/ConnectionForm/formStyles.ts | 8 -------- 1 file changed, 8 deletions(-) diff --git a/webapp/packages/plugin-connection-custom/src/CustomConnection/ConnectionFormDialog/ConnectionForm/formStyles.ts b/webapp/packages/plugin-connection-custom/src/CustomConnection/ConnectionFormDialog/ConnectionForm/formStyles.ts index 414e579479..090955e37b 100644 --- a/webapp/packages/plugin-connection-custom/src/CustomConnection/ConnectionFormDialog/ConnectionForm/formStyles.ts +++ b/webapp/packages/plugin-connection-custom/src/CustomConnection/ConnectionFormDialog/ConnectionForm/formStyles.ts @@ -29,12 +29,4 @@ export const formStyles = css` composes: theme-typography--caption from global; line-height: 14px; } - group { - box-sizing: border-box; - display: flex; - } - hr { - margin-left: 24px; - margin-right: 24px; - } `; From 47ec4d2534bfc2c8ef0f1058da57435aaeddced1 Mon Sep 17 00:00:00 2001 From: Wroud Date: Wed, 21 Oct 2020 12:03:17 +0300 Subject: [PATCH 06/13] chore(plugin-administration): CB-338 auto hide server configuration params --- .../Form/ServerConfigurationConfigurationForm.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/webapp/packages/plugin-administration/src/ConfigurationWizard/ServerConfiguration/Form/ServerConfigurationConfigurationForm.tsx b/webapp/packages/plugin-administration/src/ConfigurationWizard/ServerConfiguration/Form/ServerConfigurationConfigurationForm.tsx index 7e31d3774c..d0f3c88432 100644 --- a/webapp/packages/plugin-administration/src/ConfigurationWizard/ServerConfiguration/Form/ServerConfigurationConfigurationForm.tsx +++ b/webapp/packages/plugin-administration/src/ConfigurationWizard/ServerConfiguration/Form/ServerConfigurationConfigurationForm.tsx @@ -34,6 +34,7 @@ export const ServerConfigurationConfigurationForm: React.FC = observer(fu mod={['primary']} disabled={!serverConfig.authenticationEnabled} long + autoHide > {translate('administration_configuration_wizard_configuration_anonymous_access')} @@ -45,6 +46,7 @@ export const ServerConfigurationConfigurationForm: React.FC = observer(fu description={translate('administration_configuration_wizard_configuration_authentication_description')} mod={['primary']} long + autoHide > {translate('administration_configuration_wizard_configuration_authentication')} @@ -56,6 +58,7 @@ export const ServerConfigurationConfigurationForm: React.FC = observer(fu description={translate('administration_configuration_wizard_configuration_custom_connections_description')} mod={['primary']} long + autoHide > {translate('administration_configuration_wizard_configuration_custom_connections')} From 18231f7be6a11516baccaa3b021dbc1ef3a6398f Mon Sep 17 00:00:00 2001 From: Wroud Date: Wed, 21 Oct 2020 12:31:56 +0300 Subject: [PATCH 07/13] feat(plugin-administration): CB-338 add loader for server config page --- .../ServerConfigurationPage.tsx | 33 ++++++++++++------- .../ServerConfigurationService.ts | 21 ++++++++---- 2 files changed, 36 insertions(+), 18 deletions(-) diff --git a/webapp/packages/plugin-administration/src/ConfigurationWizard/ServerConfiguration/ServerConfigurationPage.tsx b/webapp/packages/plugin-administration/src/ConfigurationWizard/ServerConfiguration/ServerConfigurationPage.tsx index b549b7e0dc..0241a6e625 100644 --- a/webapp/packages/plugin-administration/src/ConfigurationWizard/ServerConfiguration/ServerConfigurationPage.tsx +++ b/webapp/packages/plugin-administration/src/ConfigurationWizard/ServerConfiguration/ServerConfigurationPage.tsx @@ -10,7 +10,7 @@ import { observer } from 'mobx-react'; import styled, { use, css } from 'reshadow'; import { AdministrationTools, ADMINISTRATION_TOOLS_STYLES } from '@cloudbeaver/core-administration'; -import { FormBox, FormBoxElement, IconButton, SubmittingForm, useFocus } from '@cloudbeaver/core-blocks'; +import { FormBox, FormBoxElement, IconButton, Loader, 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'; @@ -44,6 +44,8 @@ const styles = composes( layout-grid-cell { position: relative; + display: flex; + flex-direction: column; border: solid 1px; } @@ -70,12 +72,13 @@ const styles = composes( export const ServerConfigurationPage = observer(function ServerConfigurationPage() { const translate = useTranslate(); + const style = useStyles(styles, ADMINISTRATION_TOOLS_STYLES); const [focusedRef] = useFocus({ focusFirstChild: true }); const service = useService(ServerConfigurationService); const controller = useController(ServerConfigurationPageController); useFormValidator(service.validationTask, focusedRef); - return styled(useStyles(styles, ADMINISTRATION_TOOLS_STYLES))( + return styled(style)( @@ -91,15 +94,23 @@ export const ServerConfigurationPage = observer(function ServerConfigurationPage )} - - - - {!controller.editing && } - - - - - + {service.loading ? ( + + ) : ( + <> + + + + {!controller.editing && ( + + )} + + + + + + + )} diff --git a/webapp/packages/plugin-administration/src/ConfigurationWizard/ServerConfiguration/ServerConfigurationService.ts b/webapp/packages/plugin-administration/src/ConfigurationWizard/ServerConfiguration/ServerConfigurationService.ts index d16262bb41..1314eae732 100644 --- a/webapp/packages/plugin-administration/src/ConfigurationWizard/ServerConfiguration/ServerConfigurationService.ts +++ b/webapp/packages/plugin-administration/src/ConfigurationWizard/ServerConfiguration/ServerConfigurationService.ts @@ -26,6 +26,7 @@ export interface IValidationStatusContext { @injectable() export class ServerConfigurationService { @observable state: IServerConfigurationPageState; + @observable loading: boolean; readonly validationTask: IExecutor; constructor( @@ -35,19 +36,25 @@ export class ServerConfigurationService { private readonly notificationService: NotificationService, private readonly usersResource: UsersResource ) { + this.loading = true; this.state = this.getConfig(); this.validationTask = new Executor(); } async loadConfig(): Promise { - const config = await this.serverConfigResource.load(null); + this.loading = true; + try { + const config = await this.serverConfigResource.load(null); - this.state = this.administrationScreenService - .getItemState( - 'server-configuration', - () => this.getConfig(config), - !config?.configurationMode - ); + this.state = this.administrationScreenService + .getItemState( + 'server-configuration', + () => this.getConfig(config), + !config?.configurationMode + ); + } finally { + this.loading = false; + } } isDone(): boolean { From 93bc26f0122cd314b0c28147f96cea68e0274496 Mon Sep 17 00:00:00 2001 From: Wroud Date: Wed, 21 Oct 2020 12:40:25 +0300 Subject: [PATCH 08/13] fix(plugin-administration): CB-338 styles --- .../ServerConfiguration/ServerConfigurationPage.tsx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/webapp/packages/plugin-administration/src/ConfigurationWizard/ServerConfiguration/ServerConfigurationPage.tsx b/webapp/packages/plugin-administration/src/ConfigurationWizard/ServerConfiguration/ServerConfigurationPage.tsx index 0241a6e625..283dfa1fce 100644 --- a/webapp/packages/plugin-administration/src/ConfigurationWizard/ServerConfiguration/ServerConfigurationPage.tsx +++ b/webapp/packages/plugin-administration/src/ConfigurationWizard/ServerConfiguration/ServerConfigurationPage.tsx @@ -64,6 +64,10 @@ const styles = composes( flex-direction: row; } + FormBox { + flex: 0; + } + p { line-height: 2; } From 25f207a84e6e82c28fa422f38b023868777256a9 Mon Sep 17 00:00:00 2001 From: Wroud Date: Wed, 21 Oct 2020 12:44:43 +0300 Subject: [PATCH 09/13] chore(plugin-administration): CB-338 add error notification for server configuration --- .../ServerConfiguration/ServerConfigurationService.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/webapp/packages/plugin-administration/src/ConfigurationWizard/ServerConfiguration/ServerConfigurationService.ts b/webapp/packages/plugin-administration/src/ConfigurationWizard/ServerConfiguration/ServerConfigurationService.ts index 1314eae732..8b7ef80d05 100644 --- a/webapp/packages/plugin-administration/src/ConfigurationWizard/ServerConfiguration/ServerConfigurationService.ts +++ b/webapp/packages/plugin-administration/src/ConfigurationWizard/ServerConfiguration/ServerConfigurationService.ts @@ -52,6 +52,8 @@ export class ServerConfigurationService { () => this.getConfig(config), !config?.configurationMode ); + } catch (exception) { + this.notificationService.logException(exception, 'Can\'t load server configuration'); } finally { this.loading = false; } From ca9edd2ad9d7a74b48d1985d64fca1b03e3a87b6 Mon Sep 17 00:00:00 2001 From: Naumov Alexey Date: Wed, 21 Oct 2020 12:46:34 +0300 Subject: [PATCH 10/13] improve(core-connection): CB-319 delete formStyles.ts CB-319 --- .../ConnectionForm/Options/Options.tsx | 9 ++++-- .../ConnectionForm/Options/ParametersForm.tsx | 12 ++++--- .../ConnectionForm/Options/formStyles.ts | 31 ------------------ .../ConnectionForm/ConnectionForm.tsx | 12 +++++-- .../ConnectionForm/ParametersForm.tsx | 11 +++++-- .../ConnectionForm/formStyles.ts | 32 ------------------- 6 files changed, 33 insertions(+), 74 deletions(-) delete mode 100644 webapp/packages/core-connections/src/Administration/Connections/ConnectionForm/Options/formStyles.ts delete mode 100644 webapp/packages/plugin-connection-custom/src/CustomConnection/ConnectionFormDialog/ConnectionForm/formStyles.ts 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 2a12a3359e..4f0a96b2a2 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 @@ -28,7 +28,6 @@ import { useStyles } from '@cloudbeaver/core-theming'; import { EConnectionType } from '../EConnectionType'; import { IConnectionFormModel } from '../IConnectionFormModel'; -import { formStyles } from './formStyles'; import { OptionsController } from './OptionsController'; import { ParametersForm } from './ParametersForm'; @@ -52,6 +51,12 @@ const styles = css` flex-direction: column; max-width: 630px; } + connection-type { + margin-left: 180px; + } + Radio { + composes: theme-typography--body2 from global; + } `; export const Options = observer(function Options({ @@ -66,7 +71,7 @@ export const Options = observer(function Options({ const translate = useTranslate(); const [focusedRef] = useFocus({ focusFirstChild: true }); - return styled(useStyles(styles, formStyles))( + return styled(useStyles(styles))( 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 19dd37791c..3df89c540e 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 @@ -7,21 +7,25 @@ */ import { observer } from 'mobx-react'; -import styled, { use, css } from 'reshadow'; +import styled, { css, use } from 'reshadow'; 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'; -import { formStyles } from './formStyles'; - interface ParametersFormProps { connection: ConnectionInfo; disabled?: boolean; embedded?: boolean; } +const parametersFormStyles = css` + sub-label { + composes: theme-typography--caption from global; + line-height: 14px; + }`; + export const ParametersForm = observer(function ParametersForm({ connection, embedded, @@ -29,7 +33,7 @@ export const ParametersForm = observer(function ParametersForm({ }: ParametersFormProps) { const translate = useTranslate(); - return styled(useStyles(formStyles))( + return styled(useStyles(parametersFormStyles))( <> {!embedded && ( 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 deleted file mode 100644 index 3128565886..0000000000 --- a/webapp/packages/core-connections/src/Administration/Connections/ConnectionForm/Options/formStyles.ts +++ /dev/null @@ -1,31 +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 { css } from 'reshadow'; - -export const formStyles = css` - connection-form { - flex: 1; - display: flex; - overflow: auto; - flex-direction: row; - } - layout-grid { - flex: 1; - } - connection-type { - margin-left: 180px; - } - Radio { - composes: theme-typography--body1 from global; - } - sub-label { - composes: theme-typography--caption from global; - line-height: 14px; - } -`; diff --git a/webapp/packages/plugin-connection-custom/src/CustomConnection/ConnectionFormDialog/ConnectionForm/ConnectionForm.tsx b/webapp/packages/plugin-connection-custom/src/CustomConnection/ConnectionFormDialog/ConnectionForm/ConnectionForm.tsx index 1650693a0d..25caf9c3ad 100644 --- a/webapp/packages/plugin-connection-custom/src/CustomConnection/ConnectionFormDialog/ConnectionForm/ConnectionForm.tsx +++ b/webapp/packages/plugin-connection-custom/src/CustomConnection/ConnectionFormDialog/ConnectionForm/ConnectionForm.tsx @@ -17,7 +17,6 @@ import { useTranslate } from '@cloudbeaver/core-localization'; import { useStyles } from '@cloudbeaver/core-theming'; import { ConnectionType } from '../ConnectionFormDialogController'; -import { formStyles } from './formStyles'; import { IFormController } from './IFormController'; import { ParametersForm } from './ParametersForm'; @@ -34,6 +33,15 @@ const connectionFormStyles = css` FormBoxElement { flex: 1; } + connection-type { + padding: 12px; + margin-left: 160px; + } + Radio { + composes: theme-typography--body2 from global; + font-weight: 500; + padding: 0 12px; + } `; export const ConnectionForm = observer(function ConnectionForm({ @@ -43,7 +51,7 @@ export const ConnectionForm = observer(function ConnectionForm({ const translate = useTranslate(); const [focusedRef] = useFocus({ focusFirstChild: true }); - return styled(useStyles(formStyles, connectionFormStyles))( + return styled(useStyles(connectionFormStyles))( 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 80fa0e9958..41f597a7f7 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 @@ -7,13 +7,12 @@ */ import { observer } from 'mobx-react'; -import styled, { use } from 'reshadow'; +import styled, { css, use } from 'reshadow'; import { InputField } from '@cloudbeaver/core-blocks'; import { useTranslate } from '@cloudbeaver/core-localization'; import { useStyles } from '@cloudbeaver/core-theming'; -import { formStyles } from './formStyles'; import { IFormController } from './IFormController'; interface ParametersFormProps { @@ -21,13 +20,19 @@ interface ParametersFormProps { embedded?: boolean; } +const parametersFormStyles = css` + sub-label { + composes: theme-typography--caption from global; + line-height: 14px; + }`; + export const ParametersForm = observer(function ParametersForm({ controller, embedded, }: ParametersFormProps) { const translate = useTranslate(); - return styled(useStyles(formStyles))( + return styled(useStyles(parametersFormStyles))( <> {!embedded && ( diff --git a/webapp/packages/plugin-connection-custom/src/CustomConnection/ConnectionFormDialog/ConnectionForm/formStyles.ts b/webapp/packages/plugin-connection-custom/src/CustomConnection/ConnectionFormDialog/ConnectionForm/formStyles.ts deleted file mode 100644 index 090955e37b..0000000000 --- a/webapp/packages/plugin-connection-custom/src/CustomConnection/ConnectionFormDialog/ConnectionForm/formStyles.ts +++ /dev/null @@ -1,32 +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 { css } from 'reshadow'; - -export const formStyles = css` - connection-form { - flex: 1; - display: flex; - flex-direction: column; - padding: 18px 24px; - padding-top: 4px; - } - connection-type { - padding: 12px; - margin-left: 160px; - } - Radio { - composes: theme-typography--body1 from global; - font-weight: 500; - padding: 0 12px; - } - sub-label { - composes: theme-typography--caption from global; - line-height: 14px; - } -`; From 90af52eca61fcadd81a0b0d71928bed03ba2f9a1 Mon Sep 17 00:00:00 2001 From: Naumov Alexey Date: Wed, 21 Oct 2020 13:52:12 +0300 Subject: [PATCH 11/13] improve(core-connection): CB-329 checkbox values change, move padding style to FormBox CB-329 --- .../src/DatabaseAuthDialog/DatabaseAuthDialog.tsx | 2 +- .../ConnectionFormDialog/ConnectionForm/ConnectionForm.tsx | 6 ++++-- .../ConnectionFormDialog/ConnectionFormDialog.tsx | 4 ++-- 3 files changed, 7 insertions(+), 5 deletions(-) diff --git a/webapp/packages/core-connections/src/DatabaseAuthDialog/DatabaseAuthDialog.tsx b/webapp/packages/core-connections/src/DatabaseAuthDialog/DatabaseAuthDialog.tsx index e36eccf1bd..367a8ebcf6 100644 --- a/webapp/packages/core-connections/src/DatabaseAuthDialog/DatabaseAuthDialog.tsx +++ b/webapp/packages/core-connections/src/DatabaseAuthDialog/DatabaseAuthDialog.tsx @@ -99,7 +99,7 @@ export const DatabaseAuthDialog = observer(function DatabaseAuthDialog({ Date: Wed, 21 Oct 2020 16:32:57 +0300 Subject: [PATCH 12/13] chore(core-app): CB-339 export ElementsTree component --- webapp/packages/core-app/src/index.ts | 2 ++ .../src/shared/NodesManager/NavNodeManagerService.ts | 10 ++++++++-- 2 files changed, 10 insertions(+), 2 deletions(-) diff --git a/webapp/packages/core-app/src/index.ts b/webapp/packages/core-app/src/index.ts index d8b6099614..a214a2c96b 100644 --- a/webapp/packages/core-app/src/index.ts +++ b/webapp/packages/core-app/src/index.ts @@ -22,6 +22,8 @@ export * from './shared/NavigationTabs/TabNavigationContext'; export * from './shared/ToolsPanel/LogViewTab/LogViewerMenuService'; export * from './shared/ToolsPanel/LogViewTab/LogViewerService'; export * from './shared/SessionExpireDialog/SessionExpiredDialogService'; +export * from './NavigationTree/ElementsTree'; +export * from './NavigationTree/TreeContext'; export * from './NavigationTree/NavigationTreeService'; export * from './NavigationTree/NavigationTreeContextMenuService'; export * from './AppLocaleService'; diff --git a/webapp/packages/core-app/src/shared/NodesManager/NavNodeManagerService.ts b/webapp/packages/core-app/src/shared/NodesManager/NavNodeManagerService.ts index 3be46fcbbf..4aadaae65d 100644 --- a/webapp/packages/core-app/src/shared/NodesManager/NavNodeManagerService.ts +++ b/webapp/packages/core-app/src/shared/NodesManager/NavNodeManagerService.ts @@ -120,7 +120,7 @@ export class NavNodeManagerService extends Bootstrap { this.connectionInfo.onItemAdd.subscribe(this.connectionUpdateHandler.bind(this)); this.connectionInfo.onItemDelete.subscribe(this.connectionRemoveHandler.bind(this)); this.connectionInfo.onConnectionCreate.subscribe(this.connectionCreateHandler.bind(this)); - this.sessionResource.onDataUpdate.subscribe(this.updateRootChildren.bind(this)); + this.sessionResource.onDataUpdate.subscribe(this.refreshRoot.bind(this)); } load(): void {} @@ -319,7 +319,13 @@ export class NavNodeManagerService extends Bootstrap { }; }; - private async updateRootChildren() { + async updateRoot(): Promise { + if (await this.isNavTreeEnabled()) { + await this.navTree.refresh(ROOT_NODE_PATH); + } + } + + async refreshRoot(): Promise { this.navTree.delete(ROOT_NODE_PATH); if (await this.isNavTreeEnabled()) { await this.navTree.refresh(ROOT_NODE_PATH); From b646a6da81d6afa5d88f8db74835eef1e7967fea Mon Sep 17 00:00:00 2001 From: Wroud Date: Wed, 21 Oct 2020 19:00:28 +0300 Subject: [PATCH 13/13] fix: use useMemo instead useLocalStore --- .../src/NavigationTree/ElementsTree.tsx | 13 ++++++------- .../core-blocks/src/Tree/TreeNode/TreeNode.tsx | 17 ++++------------- 2 files changed, 10 insertions(+), 20 deletions(-) diff --git a/webapp/packages/core-app/src/NavigationTree/ElementsTree.tsx b/webapp/packages/core-app/src/NavigationTree/ElementsTree.tsx index 845b473f1c..1a7d091e54 100644 --- a/webapp/packages/core-app/src/NavigationTree/ElementsTree.tsx +++ b/webapp/packages/core-app/src/NavigationTree/ElementsTree.tsx @@ -6,7 +6,8 @@ * you may not use this file except in compliance with the License. */ -import { observer, useLocalStore } from 'mobx-react'; +import { observer } from 'mobx-react'; +import { useMemo } from 'react'; import styled, { css } from 'reshadow'; import { Loader } from '@cloudbeaver/core-blocks'; @@ -53,12 +54,10 @@ export const ElementsTree: React.FC = observer(function ElementsTree({ const nodeChildren = useChildren(root); const Placeholder = emptyPlaceholder; - const context = useLocalStore(source => source, { - control, - onOpen, - onSelect, - isSelected, - }); + const context = useMemo( + () => ({ control, onOpen, onSelect, isSelected }), + [control, onOpen, onSelect, isSelected] + ); if (!nodeChildren.children || nodeChildren.children.length === 0) { if (nodeChildren.isLoading()) { diff --git a/webapp/packages/core-blocks/src/Tree/TreeNode/TreeNode.tsx b/webapp/packages/core-blocks/src/Tree/TreeNode/TreeNode.tsx index f3e7a51812..90ebdf85f1 100644 --- a/webapp/packages/core-blocks/src/Tree/TreeNode/TreeNode.tsx +++ b/webapp/packages/core-blocks/src/Tree/TreeNode/TreeNode.tsx @@ -6,8 +6,8 @@ * you may not use this file except in compliance with the License. */ -import { observer, useLocalStore } from 'mobx-react'; -import { useRef } from 'react'; +import { observer } from 'mobx-react'; +import { useMemo, useRef } from 'react'; import styled, { use } from 'reshadow'; import { useStyles } from '@cloudbeaver/core-theming'; @@ -50,7 +50,7 @@ export const TreeNode: React.FC = observer(function TreeNode({ handlersRef.current.onOpen?.(); }; - const nodeContext = useLocalStore(source => source, { + const nodeContext = useMemo(() => ({ loading, selected, expanded, @@ -58,16 +58,7 @@ export const TreeNode: React.FC = observer(function TreeNode({ expand: handleExpand, select: handleSelect, open: handleOpen, - }); - // const nodeContext = useMemo(() => ({ - // loading, - // selected, - // expanded, - // leaf, - // expand: handleExpand, - // select: handleSelect, - // open: handleOpen, - // }), [loading, selected, expanded, leaf, handleExpand, handleSelect, handleOpen]); + }), [loading, selected, expanded, leaf, handleExpand, handleSelect, handleOpen]); return styled(useStyles(TREE_NODE_STYLES))(