From b4be2b76de07d44bdbe96d7d83eeb8e6fc7eadcf Mon Sep 17 00:00:00 2001 From: Alexey Date: Tue, 30 May 2023 21:23:30 +0400 Subject: [PATCH] Fix CB-3524 use resource mobx reaction (#1717) * CB-3524 fix: mobx reaction dependencies * CB-3524 fix: driver properties setting --- .../src/ResourcesHooks/useResource.ts | 12 +++------ .../core-cli/configs/webpack.config.js | 7 +++-- .../src/ConnectionForm/Options/Options.tsx | 4 +-- .../src/ConnectionForm/Options/useOptions.ts | 16 +++++++++-- .../ConnectionForm/OriginInfo/OriginInfo.tsx | 27 ++++++++++--------- 5 files changed, 37 insertions(+), 29 deletions(-) diff --git a/webapp/packages/core-blocks/src/ResourcesHooks/useResource.ts b/webapp/packages/core-blocks/src/ResourcesHooks/useResource.ts index 2ad1ee2b0c..3de5bd3cf6 100644 --- a/webapp/packages/core-blocks/src/ResourcesHooks/useResource.ts +++ b/webapp/packages/core-blocks/src/ResourcesHooks/useResource.ts @@ -50,11 +50,7 @@ interface IActions, TK active?: boolean; forceSuspense?: boolean; silent?: boolean; - onData?: ( - data: ResourceData, - resource: TResource, - prevData: ResourceData | undefined, - ) => Promise | any; + onData?: (data: ResourceData, resource: TResource) => Promise | any; onError?: (exception: Error | Error[] | null) => void; preload?: ILoadableState[]; } @@ -323,7 +319,7 @@ export function useResource< return getData(); }, - get outdated() { + get outdated(): boolean { return propertiesRef.key === null || !this.preloaded || this.loading || !this.loaded || this.resource.isOutdated(propertiesRef.key); }, get loaded() { @@ -400,9 +396,9 @@ export function useResource< useEffect(() => { const disposeDataUpdate = reaction( () => ({ data: result.tryGetData, loaded: result.loaded }), - ({ data, loaded }, prev) => { + ({ data, loaded }) => { if (loaded) { - actions?.onData?.(data as any, resource, prev as any); + actions?.onData?.(data as any, resource); } }, { diff --git a/webapp/packages/core-cli/configs/webpack.config.js b/webapp/packages/core-cli/configs/webpack.config.js index ea54571a7c..16bf87b53e 100644 --- a/webapp/packages/core-cli/configs/webpack.config.js +++ b/webapp/packages/core-cli/configs/webpack.config.js @@ -3,7 +3,6 @@ const PnpWebpackPlugin = require('pnp-webpack-plugin'); const ModuleDependencyWarning = require('webpack/lib/ModuleDependencyWarning'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin'); -const ExtraWatchWebpackPlugin = require('extra-watch-webpack-plugin'); const excludedFromVendor = require('./excludedFromVendor.js'); // const ESLintPlugin = require('eslint-webpack-plugin'); @@ -228,15 +227,15 @@ module.exports = (env, argv) => { plugins: [ new ForkTsCheckerWebpackPlugin({ typescript: { + configOverwrite: { + include: ['**/src/**/*.ts', '**/src/**/*.tsx'], + }, diagnosticOptions: { semantic: true, syntactic: true, }, }, }), - // new ExtraWatchWebpackPlugin({ - // files: ['packages/*/src/**.ts', 'packages/*/src/**.tsx'] - // }), new IgnoreNotFoundExportPlugin(), new MiniCssExtractPlugin({ // Options similar to the same options in webpackOptions.output diff --git a/webapp/packages/plugin-connections/src/ConnectionForm/Options/Options.tsx b/webapp/packages/plugin-connections/src/ConnectionForm/Options/Options.tsx index ec905d18f0..1b77ab1393 100644 --- a/webapp/packages/plugin-connections/src/ConnectionForm/Options/Options.tsx +++ b/webapp/packages/plugin-connections/src/ConnectionForm/Options/Options.tsx @@ -106,8 +106,8 @@ export const Options: TabContainerPanelComponent = observe DBDriverResource, { key: config.driverId || null, includes: ['includeProviderProperties'] as const }, { - onData: (data, resource, prevDriver) => { - optionsHook.setDefaults(data, prevDriver); + onData: data => { + optionsHook.setDefaults(data); }, }, ); diff --git a/webapp/packages/plugin-connections/src/ConnectionForm/Options/useOptions.ts b/webapp/packages/plugin-connections/src/ConnectionForm/Options/useOptions.ts index d9b519c04b..07899ffb96 100644 --- a/webapp/packages/plugin-connections/src/ConnectionForm/Options/useOptions.ts +++ b/webapp/packages/plugin-connections/src/ConnectionForm/Options/useOptions.ts @@ -8,7 +8,8 @@ import { runInAction } from 'mobx'; import { useObjectRef } from '@cloudbeaver/core-blocks'; -import { DBDriver, isJDBCConnection } from '@cloudbeaver/core-connections'; +import { DBDriver, DBDriverResource, isJDBCConnection } from '@cloudbeaver/core-connections'; +import { useService } from '@cloudbeaver/core-di'; import { DatabaseAuthModel, DriverConfigurationType } from '@cloudbeaver/core-sdk'; import type { IConnectionFormState } from '../IConnectionFormProps'; @@ -16,9 +17,11 @@ import type { IConnectionFormState } from '../IConnectionFormProps'; const MAX_HOST_LENGTH = 20; export function useOptions(state: IConnectionFormState) { + const dbDriverResource = useService(DBDriverResource); const refObject = useObjectRef( () => ({ prevName: null as string | null, + prevDriverId: null as string | null, }), { state, @@ -61,16 +64,25 @@ export function useOptions(state: IConnectionFormState) { config.name = name; }); }, - setDefaults(driver: DBDriver | undefined, prevDriver?: DBDriver) { + setDefaults(driver: DBDriver | undefined) { runInAction(() => { const { state: { config, info }, + prevDriverId, } = refObject; if (info || driver?.id !== config.driverId) { return; } + let prevDriver: DBDriver | undefined; + + if (prevDriverId) { + prevDriver = dbDriverResource.get(prevDriverId); + } + + refObject.prevDriverId = driver?.id || null; + if (!config.configurationType || !driver?.configurationTypes.includes(config.configurationType)) { config.configurationType = driver?.configurationTypes.includes(DriverConfigurationType.Manual) ? DriverConfigurationType.Manual diff --git a/webapp/packages/plugin-connections/src/ConnectionForm/OriginInfo/OriginInfo.tsx b/webapp/packages/plugin-connections/src/ConnectionForm/OriginInfo/OriginInfo.tsx index 1bf2c2d4ad..f38c2946f4 100644 --- a/webapp/packages/plugin-connections/src/ConnectionForm/OriginInfo/OriginInfo.tsx +++ b/webapp/packages/plugin-connections/src/ConnectionForm/OriginInfo/OriginInfo.tsx @@ -5,6 +5,7 @@ * Licensed under the Apache License, Version 2.0. * you may not use this file except in compliance with the License. */ +import { runInAction } from 'mobx'; import { observer } from 'mobx-react-lite'; import styled, { css } from 'reshadow'; @@ -54,21 +55,21 @@ export const OriginInfo: TabContainerPanelComponent = obse }, { // isActive: () => !info?.origin || userInfoService.hasOrigin(info.origin), - onData: (connection, res, prev) => { - if (!connection.origin.details) { - return; - } - - if (prev?.origin.details) { - for (const property of prev.origin.details) { - // eslint-disable-next-line @typescript-eslint/no-dynamic-delete - delete state[property.id!]; + onData: connection => { + runInAction(() => { + if (!connection.origin.details) { + return; } - } - for (const property of connection.origin.details) { - state[property.id!] = property.value; - } + for (const property of Object.keys(state)) { + // eslint-disable-next-line @typescript-eslint/no-dynamic-delete + delete state[property]; + } + + for (const property of connection.origin.details) { + state[property.id!] = property.value; + } + }); }, }, );