Fix CB-3524 use resource mobx reaction (#1717)

* CB-3524 fix: mobx reaction dependencies

* CB-3524 fix: driver properties setting

webapp/packages/core-blocks/src/ResourcesHooks/useResource.ts

@@ -50,11 +50,7 @@ interface IActions<TResource extends CachedResource<any, any, any, any, any>, TK
   active?: boolean;
   forceSuspense?: boolean;
   silent?: boolean;
-  onData?: (
-    data: ResourceData<TResource, TKey, TIncludes>,
-    resource: TResource,
-    prevData: ResourceData<TResource, TKey, TIncludes> | undefined,
-  ) => Promise<any> | any;
+  onData?: (data: ResourceData<TResource, TKey, TIncludes>, resource: TResource) => Promise<any> | 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);
         }
       },
       {

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

webapp/packages/plugin-connections/src/ConnectionForm/Options/Options.tsx

@@ -106,8 +106,8 @@ export const Options: TabContainerPanelComponent<IConnectionFormProps> = observe
     DBDriverResource,
     { key: config.driverId || null, includes: ['includeProviderProperties'] as const },
     {
-      onData: (data, resource, prevDriver) => {
-        optionsHook.setDefaults(data, prevDriver);
+      onData: data => {
+        optionsHook.setDefaults(data);
       },
     },
   );

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

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<IConnectionFormProps> = 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;
+          }
+        });
       },
     },
   );