chore(deps): update deps

refactor(core): replace useLocale with useTranslate overload
refactor(core): useTheme and useStyles now auto subscribes to updates

dbeaver-corp/dbeaver-web#611

webapp/packages/_plugin-template/package.json

@@ -20,12 +20,12 @@
     "graphql": "^14.5.8",
     "graphql-request": "^1.8.2",
     "graphql-tag": "^2.10.1",
-    "mobx": "^5.15.0",
-    "mobx-react": "^6.1.4",
-    "react": "^16.12.0",
-    "react-dom": "^16.12.0",
+    "mobx": "^5.15.4",
+    "mobx-react": "^6.2.2",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
     "reakit": "^1.0.0-beta.11",
-    "reshadow": "0.0.1-alpha.73",
-    "rxjs": "^6.5.4"
+    "reshadow": "0.0.1-alpha.75",
+    "rxjs": "^6.5.5"
   }
 }

webapp/packages/ag-grid-plugin/package.json

@@ -12,12 +12,12 @@
   },
   "license": "Apache-2.0",
   "dependencies": {
-    "@ag-grid-community/core": "^22.1.0",
-    "@ag-grid-community/all-modules": "^22.1.0",
-    "@ag-grid-enterprise/all-modules": "^22.1.0",
-    "ag-grid-community": "^22.1.0",
-    "ag-grid-enterprise": "^22.1.0",
-    "ag-grid-react": "^22.1.0"
+    "@ag-grid-community/core": "^23.0.2",
+    "@ag-grid-community/all-modules": "^23.0.2",
+    "@ag-grid-enterprise/all-modules": "^23.0.2",
+    "ag-grid-community": "^23.0.2",
+    "ag-grid-enterprise": "^23.0.2",
+    "ag-grid-react": "^23.0.3"
   },
   "peerDependencies": {
     "@dbeaver/core": "^0.1.0",
@@ -29,12 +29,12 @@
     "graphql": "^14.5.8",
     "graphql-request": "^1.8.2",
     "graphql-tag": "^2.10.1",
-    "mobx": "^5.15.0",
-    "mobx-react": "^6.1.4",
-    "react": "^16.12.0",
-    "react-dom": "^16.12.0",
+    "mobx": "^5.15.4",
+    "mobx-react": "^6.2.2",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
     "reakit": "^1.0.0-beta.11",
-    "reshadow": "0.0.1-alpha.73",
-    "rxjs": "^6.5.4"
+    "reshadow": "0.0.1-alpha.75",
+    "rxjs": "^6.5.5"
   }
 }

webapp/packages/basic-connection-plugin/package.json

@@ -19,16 +19,15 @@
     "@material/ripple": "^4.0.0",
     "@material/theme": "^4.0.0",
     "@material/typography": "^4.0.0",
-    "go-di": "^1.5.2",
     "graphql": "^14.5.8",
     "graphql-request": "^1.8.2",
     "graphql-tag": "^2.10.1",
-    "mobx": "^5.15.0",
-    "mobx-react": "^6.1.4",
-    "react": "^16.12.0",
-    "react-dom": "^16.12.0",
+    "mobx": "^5.15.4",
+    "mobx-react": "^6.2.2",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
     "reakit": "^1.0.0-beta.11",
-    "reshadow": "0.0.1-alpha.73",
-    "rxjs": "^6.5.4"
+    "reshadow": "0.0.1-alpha.75",
+    "rxjs": "^6.5.5"
   }
 }

webapp/packages/basic-connection-plugin/src/ConnectionDialog/ConnectionDialog.tsx

@@ -12,7 +12,7 @@ import styled, { css } from 'reshadow';
 import { ErrorMessage, SubmittingForm, Loader } from '@dbeaver/core/blocks';
 import { useController } from '@dbeaver/core/di';
 import { CommonDialogWrapper, DialogComponent, DialogComponentProps } from '@dbeaver/core/dialogs';
-import { useLocale, useTranslate } from '@dbeaver/core/localization';
+import { useTranslate } from '@dbeaver/core/localization';
 import { useStyles } from '@dbeaver/core/theming';
 
 import { Connection } from './Connection';
@@ -43,7 +43,7 @@ export const ConnectionDialog: DialogComponent<null, null> = observer(
   function ConnectionDialog(props: DialogComponentProps<null, null>) {
     const controller = useController(ConnectionController, props.rejectDialog);
     const translate = useTranslate();
-    let title = useLocale('basicConnection_connectionDialog_newConnection');
+    let title = translate('basicConnection_connectionDialog_newConnection');
 
     if (controller.step === ConnectionStep.Connection && controller.dbSource?.name) {
       title = controller.dbSource.name;

webapp/packages/core/assets/locales/en.js

@@ -34,9 +34,11 @@ module.exports = {
   ui_stepper_back: 'Back',
   ui_processing_loading: 'Loading...',
   ui_processing_cancel: 'Cancel',
+  ui_processing_retry: 'Retry',
   ui_error_message: 'Error:',
   ui_errors_details: 'Details',
   ui_search: 'Search...',
+  ui_data_saving_error: 'Error when saving changes',
 
   app_root_session_expired_title: 'Session expired',
   app_root_session_expired_message: 'Session has been expired. Do you want to reload?',

webapp/packages/core/assets/locales/ru.js

@@ -33,9 +33,11 @@ module.exports = {
   ui_stepper_back: 'Назад',
   ui_processing_loading: 'Загрузка...',
   ui_processing_cancel: 'Отменить...',
+  ui_processing_retry: 'Повторить',
   ui_error_message: 'Ошибка:',
   ui_errors_details: 'Информация',
   ui_search: 'Поиск...',
+  ui_data_saving_error: 'Ошибка при сохранении изменений',
 
   app_root_session_expired_title: 'Сесстия истекла',
   app_root_session_expired_message: 'Сессия истекла. Хотите перезагрузить страницу?',

webapp/packages/core/assets/styles/_tabs.scss

@@ -48,7 +48,7 @@
     padding: 0 24px 0 12px;
     border-top: solid 2px transparent;
 
-    &:global([aria-selected]) {
+    &:global([aria-selected=true]) {
       font-weight: 500;
       cursor: auto;
       border-top-color: $color-negative;
@@ -58,7 +58,7 @@
       }
     }
 
-    &:not(:global([aria-selected='true'])) {
+    &:not(:global([aria-selected=true])) {
       background-color: transparent !important;
     }
   }

webapp/packages/core/assets/styles/_theme-ripple.scss

@@ -11,7 +11,7 @@
     @include mdc-states($color, $query: $query);
 
     &.theme-ripple-selectable {
-      &:global([aria-selected]) {
+      &:global([aria-selected=true]) {
         &::before {
           opacity: mdc-states-opacity($color, focus) + mdc-states-opacity($color, hover);
         }
@@ -23,7 +23,7 @@
     @include mdc-states($color, $query: $query);
 
     &.theme-ripple-selectable {
-      &:global([aria-selected]) {
+      &:global([aria-selected=true]) {
         &::before {
           opacity: mdc-states-opacity($color, focus) + mdc-states-opacity($color, hover);
         }
@@ -64,7 +64,7 @@
           @include mdc-theme-prop(color, text-primary-on-light, false);
         }
         
-        &:global([aria-selected]) {
+        &:global([aria-selected=true]) {
           @include mdc-theme-prop(background-color, surface, false);
           @include mdc-theme-prop(color, text-primary-on-light, false);
 
@@ -84,7 +84,7 @@
           @include mdc-theme-prop(color, text-primary-on-light, false);
         }
         
-        &:global([aria-selected]) {
+        &:global([aria-selected=true]) {
           @include mdc-theme-prop(background-color, surface, false);
           @include mdc-theme-prop(color, text-primary-on-light, false);
 
@@ -104,7 +104,7 @@
           @include mdc-theme-prop(color, text-primary-on-light, false);
         }
         
-        &:global([aria-selected]) {
+        &:global([aria-selected=true]) {
           @include mdc-theme-prop(background-color, surface, false);
           @include mdc-theme-prop(color, text-primary-on-light, false);
 

webapp/packages/core/package.json

@@ -18,25 +18,24 @@
   },
   "license": "Apache-2.0",
   "dependencies": {
-    "go-di": "^1.5.2",
     "graphql-request": "^1.8.2",
     "inversify": "^5.0.1",
     "react-sanitized-html": "^2.0.0",
     "reflect-metadata": "^0.1.13",
-    "sanitize-html": "^1.22.1",
-    "uuid": "^3.4.0"
+    "sanitize-html": "^1.23.0",
+    "uuid": "^7.0.3"
   },
   "peerDependencies": {
     "go-split": "^1.3.2",
     "graphql": "^14.5.8",
     "graphql-tag": "^2.10.1",
-    "mobx": "^5.15.0",
-    "mobx-react": "^6.1.4",
-    "react": "^16.12.0",
-    "react-dom": "^16.12.0",
+    "mobx": "^5.15.4",
+    "mobx-react": "^6.2.2",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
     "reakit": "^1.0.0-beta.11",
-    "reshadow": "0.0.1-alpha.73",
-    "rxjs": "^6.5.4"
+    "reshadow": "0.0.1-alpha.75",
+    "rxjs": "^6.5.5"
   },
   "devDependencies": {
     "@material/button": "^4.0.0",
@@ -45,7 +44,7 @@
     "@material/radio": "^4.0.0",
     "@material/theme": "^4.0.0",
     "@material/typography": "^4.0.0",
-    "@types/uuid": "^3.4.7",
+    "@types/uuid": "^7.0.2",
     "graphql-request": "^1.8.2"
   },
   "dbeaverPlugins": []

webapp/packages/core/src/app/Body.tsx

@@ -6,7 +6,6 @@
  * you may not use this file except in compliance with the License.
  */
 
-import { observer } from 'mobx-react';
 import styled, { css } from 'reshadow';
 
 import { DialogsPortal } from '@dbeaver/core/dialogs';
@@ -24,7 +23,7 @@ const bodyStyles = css`
     }
 `;
 
-export const Body = observer(function Body() {
+export function Body() {
   useTheme();
 
   return styled(useStyles(bodyStyles))(
@@ -35,4 +34,4 @@ export const Body = observer(function Body() {
       <Notifications />
     </container>
   );
-});
+}

webapp/packages/core/src/app/Main.tsx

@@ -6,7 +6,6 @@
  * you may not use this file except in compliance with the License.
  */
 
-import { observer } from 'mobx-react';
 import styled, { css } from 'reshadow';
 
 import {
@@ -43,7 +42,7 @@ const mainStyles = composes(
   `
 );
 
-export const Main = observer(function Main() {
+export function Main() {
   return styled(useStyles(mainStyles, splitStyles))(
     <space as="main">
       <Split sticky={30}>
@@ -57,4 +56,4 @@ export const Main = observer(function Main() {
       </Split>
     </space>
   );
-});
+}

webapp/packages/core/src/app/NavigationTree/NavigationTreeNode/NavigationNode/NavigationNode.tsx

@@ -6,7 +6,6 @@
  * you may not use this file except in compliance with the License.
  */
 
-import { observer } from 'mobx-react';
 import {
   MouseEvent, KeyboardEvent, useCallback, PropsWithChildren,
 } from 'react';
@@ -16,7 +15,6 @@ import { Icon, StaticImage, Loader } from '@dbeaver/core/blocks';
 import { useStyles } from '@dbeaver/core/theming';
 
 import { navigationNodeStyles } from './navigationNodeStyles';
-import { Placeholder } from './Placeholder/Placeholder';
 
 type NodeProps = PropsWithChildren<{
   id: string;
@@ -27,7 +25,6 @@ type NodeProps = PropsWithChildren<{
   isSelected: boolean;
   portal?: JSX.Element;
   isExpandable?: boolean;
-  placeholder?: JSX.Element;
   onExpand?: (id: string) => void;
   onDoubleClick?: (id: string) => void;
   onClick?: (id: string, isMultiple?: boolean) => void;
@@ -39,7 +36,7 @@ const KEYCODE = {
   DOWN: 40,
 };
 
-export const NavigationNode = observer(function NavigationNode(
+export function NavigationNode(
   props: NodeProps
 ) {
   const {
@@ -52,7 +49,6 @@ export const NavigationNode = observer(function NavigationNode(
     isSelected,
     portal,
     isExpandable,
-    placeholder,
     onExpand,
     onDoubleClick,
     onClick,
@@ -117,14 +113,12 @@ export const NavigationNode = observer(function NavigationNode(
             {!isLoaded && isExpanded && <Loader small />}
             {(isLoaded || !isExpanded) && <Icon name="arrow" viewBox="0 0 16 16" />}
           </arrow>
-          <icon as="div">
-            <StaticImage icon={icon} />
-          </icon>
+          <icon as="div"><StaticImage icon={icon} /></icon>
           <name as="div">{title}</name>
           <portal as="div">{portal}</portal>
         </control>
       </node>
-      <nested as="div">{children || placeholder || <Placeholder />}</nested>
+      <nested as="div">{children}</nested>
     </>
   );
-});
+}

webapp/packages/core/src/app/NavigationTree/NavigationTreeNode/NavigationNode/navigationNodeStyles.ts

@@ -46,7 +46,7 @@ export const navigationNodeStyles = composes(
         outline: none;
         
         &:hover > portal, 
-        &[aria-selected] > portal {
+        &[aria-selected=true] > portal {
           visibility: visible;
         }
 

webapp/packages/core/src/app/NavigationTree/NavigationTreeNode/NavigationNodeChildren/NavigationNodeChildren.tsx

@@ -6,35 +6,32 @@
  * you may not use this file except in compliance with the License.
  */
 
-import { IReactComponent, observer } from 'mobx-react';
-import React, { memo, PropsWithChildren } from 'react';
+import { observer } from 'mobx-react';
+import React, { PropsWithChildren } from 'react';
 
 import { useChildren } from '../../../shared/useChildren';
 
 type NavigationNodeChildrenProps = PropsWithChildren<{
   parentId: string;
-  component: IReactComponent<{id: string}>;
+  component: React.ElementType<{id: string}>;
 }>
 
-export const NavigationNodeChildren = memo(
-  observer(function NavigationNodeChildren({
-    parentId,
-    component,
-  }: NavigationNodeChildrenProps) {
-    const nodeChildren = useChildren(parentId);
+export const NavigationNodeChildren = observer(function NavigationNodeChildren({
+  parentId,
+  component,
+}: NavigationNodeChildrenProps) {
+  const nodeChildren = useChildren(parentId);
 
-    if (!nodeChildren?.isLoaded) {
-      return null;
-    }
+  if (!nodeChildren?.isLoaded) {
+    return null;
+  }
 
-    const NavigationNodeChild = component;
-    return (
-      <>
-        {nodeChildren.children.map(id => (
-          <NavigationNodeChild id={id} key={id} />
-        ))}
-      </>
-    );
-  }),
-  (prev, next) => prev.parentId === next.parentId
-);
+  const NavigationNodeChild = component;
+  return (
+    <>
+      {nodeChildren.children.map(id => (
+        <NavigationNodeChild id={id} key={id} />
+      ))}
+    </>
+  );
+});

webapp/packages/core/src/app/NavigationTree/NavigationTreeNode/NavigationTreeNode.tsx

@@ -7,16 +7,15 @@
  */
 
 import { observer } from 'mobx-react';
-import { PropsWithChildren } from 'react';
 
 import { NavigationNode } from './NavigationNode/NavigationNode';
 import { NavigationNodeChildren } from './NavigationNodeChildren/NavigationNodeChildren';
 import { TreeNodeMenu } from './TreeNodeMenu/TreeNodeMenu';
 import { useNavigationTree } from './useNavigationTree';
 
-type NavigationTreeNodeProps = PropsWithChildren<{
+type NavigationTreeNodeProps = {
   id: string;
-}>
+}
 
 export const NavigationTreeNode = observer(function NavigationTreeNodeFn({
   id,

webapp/packages/core/src/app/Notifications/NotificationsItem/ErrorDetailsDialog/ErrorDetailsDialog.tsx

@@ -12,7 +12,7 @@ import styled from 'reshadow';
 
 import { useClipboard, Button, SanitizedHTML } from '@dbeaver/core/blocks';
 import { CommonDialogWrapper, DialogComponent, DialogComponentProps } from '@dbeaver/core/dialogs';
-import { useLocale } from '@dbeaver/core/localization';
+import { useTranslate } from '@dbeaver/core/localization';
 import { useStyles } from '@dbeaver/core/theming';
 
 import { ErrorModel, IErrorInfo } from './ErrorModel';
@@ -45,7 +45,7 @@ export const ErrorDetailsDialog: DialogComponent<Error | string, null> = observe
       [props.payload]
     );
 
-    const title = useLocale('core_eventsLog_dbeaverErrorDetails');
+    const title = useTranslate('core_eventsLog_dbeaverErrorDetails');
 
     const [copy] = useClipboard();
     const copyHandler = useCallback(

webapp/packages/core/src/app/Notifications/NotificationsItem/Snackbar/Snackbar.tsx

@@ -6,7 +6,6 @@
  * you may not use this file except in compliance with the License.
  */
 
-import { observer } from 'mobx-react';
 import { useEffect, useState } from 'react';
 import { Button as ReakitButton } from 'reakit/Button';
 import styled, { use } from 'reshadow';
@@ -27,7 +26,7 @@ type SnackbarProps = {
   onShowDetails?: () => void;
 }
 
-export const Snackbar = observer(function Snackbar(props: SnackbarProps) {
+export function Snackbar(props: SnackbarProps) {
   const styles = useStyles(snackbarStyles);
   const [mounted, setMounted] = useState(false);
   const [closing, setClosing] = useState(false);
@@ -56,18 +55,10 @@ export const Snackbar = observer(function Snackbar(props: SnackbarProps) {
   }, []);
 
   return styled(styles)(
-    <notification
-      as="div"
-      {...use({
-        mounted,
-        closing,
-      })}
-    >
+    <notification as="div" {...use({ mounted, closing })} >
       <notification-header as="div">
         {type && <NotificationMark type={type} />}
-        <message as="div">
-          {text}
-        </message>
+        <message as="div">{text}</message>
         {!closeAfter && onClose && (
           <ReakitButton onClick={onClose}>
             <Icon name="cross" viewBox="0 0 16 16" />
@@ -90,4 +81,4 @@ export const Snackbar = observer(function Snackbar(props: SnackbarProps) {
       </notification-body>
     </notification>
   );
-});
+}

webapp/packages/core/src/app/shared/InlineEditor/EditorDialog.tsx

@@ -14,7 +14,7 @@ import styled, { css } from 'reshadow';
 
 import { Button } from '@dbeaver/core/blocks';
 import { CommonDialogWrapper, DialogComponent, DialogComponentProps } from '@dbeaver/core/dialogs';
-import { useLocale, useTranslate } from '@dbeaver/core/localization';
+import { useTranslate } from '@dbeaver/core/localization';
 import { useStyles } from '@dbeaver/core/theming';
 
 const styles = css`

webapp/packages/core/src/app/shared/ToolsPanel/LogViewTab/LogViewTab.tsx

@@ -53,7 +53,6 @@ export const LogViewTab = observer(function LogViewTab() {
   if (!controller.isActive) {
     return null;
   }
-  console.log(styles.type);
 
   return styled(useStyles(styles))(
     <wrapper as="div">

webapp/packages/core/src/blocks/Button.tsx

@@ -6,8 +6,6 @@
  * you may not use this file except in compliance with the License.
  */
 
-import { observer } from 'mobx-react';
-import { ButtonHTMLAttributes } from 'react';
 import styled, { css } from 'reshadow';
 
 import { useStyles, composes } from '@dbeaver/core/theming';
@@ -54,12 +52,12 @@ const buttonMod = {
   ),
 };
 
-type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
+type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
   mod?: (keyof typeof buttonMod)[];
 }
 
-export const Button = observer(function Button({ children, mod, ...rest }: ButtonProps) {
+export function Button({ children, mod, ...rest }: ButtonProps) {
   return styled(useStyles(buttonStyles, ...(mod || []).map(mod => buttonMod[mod])))(
     <button {...rest}><ripple as="div"/>{children}</button>
   );
-});
+}

webapp/packages/core/src/blocks/InputField.tsx

@@ -6,7 +6,6 @@
  * you may not use this file except in compliance with the License.
  */
 
-import { observer } from 'mobx-react';
 import styled, { css, use } from 'reshadow';
 
 import { useStyles } from '../theming';
@@ -42,7 +41,7 @@ type InputFieldProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChan
   onChange?(value: string): any;
 }
 
-export const InputField = observer(function InputField({
+export function InputField({
   children,
   className,
   mod,
@@ -56,4 +55,4 @@ export const InputField = observer(function InputField({
       <input onChange={e => onChange(e.target.value)} {...rest} {...use({ mod })} />
     </field>
   );
-});
+}

webapp/packages/core/src/blocks/Loader/Loader.tsx

@@ -6,13 +6,12 @@
  * you may not use this file except in compliance with the License.
  */
 
-import { observer } from 'mobx-react';
 import { useState, useEffect } from 'react';
 import styled, { use } from 'reshadow';
 
+import { Translate } from '@dbeaver/core/localization';
 import { useStyles } from '@dbeaver/core/theming';
 
-import { useTranslate } from '../../localization/useLocale';
 import { Button } from '../Button';
 import { loaderStyles, overlayStyles } from './loaderStyles';
 
@@ -36,42 +35,45 @@ const spinnerType = {
   secondary: '/icons/spinner.svg',
 };
 
-export const Loader = observer(
-  function Loader({
-    loading = true, cancelDisabled, overlay, secondary, small, className, onCancel,
-  }: LoaderProps) {
-    const translate = useTranslate();
-    const [isVisible, setVisible] = useState(loading);
-    const spinnerURL = (secondary || overlay) ? spinnerType.secondary : spinnerType.primary;
+export function Loader({
+  cancelDisabled,
+  overlay,
+  secondary,
+  small,
+  className,
+  loading = true,
+  onCancel,
+}: LoaderProps) {
+  const [isVisible, setVisible] = useState(loading);
+  const spinnerURL = (secondary || overlay) ? spinnerType.secondary : spinnerType.primary;
 
-    useEffect(() => {
-      if (!loading) {
-        setVisible(loading);
-        return;
-      }
-
-      const id = setTimeout(() => {
-        setVisible(loading);
-      }, 500);
-      return () => clearTimeout(id);
-    }, [loading]);
-
-    if (!isVisible) {
-      return null;
+  useEffect(() => {
+    if (!loading) {
+      setVisible(loading);
+      return;
     }
 
-    return styled(useStyles(loaderStyles, ...(overlay ? [overlayStyles] : [])))(
-      <loader as="div" className={className} {...use({ small })}>
-        <icon as="div"><img src={spinnerURL}/></icon>
-        <message as="div">{translate('ui_processing_loading')}</message>
-        {onCancel && (
-          <actions as='div'>
-            <Button type="button" mod={['unelevated']}
-              disabled={cancelDisabled}
-              onClick={onCancel}>{translate('ui_processing_cancel')}</Button>
-          </actions>
-        )}
-      </loader>
-    );
+    const id = setTimeout(() => {
+      setVisible(loading);
+    }, 500);
+    return () => clearTimeout(id);
+  }, [loading]);
+
+  if (!isVisible) {
+    return null;
   }
-);
+
+  return styled(useStyles(loaderStyles, ...(overlay ? [overlayStyles] : [])))(
+    <loader as="div" className={className} {...use({ small })}>
+      <icon as="div"><img src={spinnerURL}/></icon>
+      <message as="div"><Translate token='ui_processing_loading' /></message>
+      {onCancel && (
+        <actions as='div'>
+          <Button type="button" mod={['unelevated']}
+            disabled={cancelDisabled}
+            onClick={onCancel}><Translate token='ui_processing_cancel' /></Button>
+        </actions>
+      )}
+    </loader>
+  );
+}

webapp/packages/core/src/blocks/Radio.tsx

@@ -6,8 +6,6 @@
  * you may not use this file except in compliance with the License.
  */
 
-import { observer } from 'mobx-react';
-import { InputHTMLAttributes } from 'react';
 import styled, { css } from 'reshadow';
 
 import { useStyles, composes } from '@dbeaver/core/theming';
@@ -52,11 +50,11 @@ const radioMod = {
   ),
 };
 
-type RadioProps = InputHTMLAttributes<HTMLInputElement> & {
+type RadioProps = React.InputHTMLAttributes<HTMLInputElement> & {
   mod?: (keyof typeof radioMod)[];
 }
 
-export const Radio = observer(function Radio({
+export function Radio({
   mod,
   id,
   className,
@@ -76,4 +74,4 @@ export const Radio = observer(function Radio({
       <label htmlFor={id}>{children}</label>
     </field>
   );
-});
+}

webapp/packages/core/src/blocks/Split/SplitControls.tsx

@@ -7,7 +7,6 @@
  */
 
 import { SplitContext } from 'go-split';
-import { observer } from 'mobx-react';
 import {
   useCallback, useContext, useState, useEffect,
 } from 'react';
@@ -17,7 +16,7 @@ import { useStyles } from '@dbeaver/core/theming';
 
 import { buttonStyles } from './splitButtonStyles';
 
-export const SplitControls = observer(function SplitControls() {
+export function SplitControls() {
   const {
     split, mode, isResizing, setMode, setSize, isMainSecond, getMainSize,
   } = useContext(SplitContext);
@@ -84,4 +83,4 @@ export const SplitControls = observer(function SplitControls() {
       )}
     </container>
   );
-});
+}

webapp/packages/core/src/blocks/Tabs/Tab/Tab.tsx

@@ -6,7 +6,6 @@
  * you may not use this file except in compliance with the License.
  */
 
-import { observer } from 'mobx-react';
 import { useContext, useCallback, PropsWithChildren } from 'react';
 import { Tab as BaseTab } from 'reakit/Tab';
 import styled from 'reshadow';
@@ -23,7 +22,7 @@ type TabProps = PropsWithChildren<{
   onClose?: (tabId: string) => void;
 }>
 
-export const Tab = observer(function Tab({
+export function Tab({
   tabId,
   onOpen,
   onClose,
@@ -63,4 +62,4 @@ export const Tab = observer(function Tab({
       )}
     </BaseTab>
   );
-});
+}

webapp/packages/core/src/blocks/Tabs/Tab/TabIcon.tsx

@@ -6,7 +6,6 @@
  * you may not use this file except in compliance with the License.
  */
 
-import { observer } from 'mobx-react';
 import styled from 'reshadow';
 
 import { useStyles } from '@dbeaver/core/theming';
@@ -18,13 +17,10 @@ type TabIconProps = {
   className?: string;
 }
 
-export const TabIcon = observer(function TabIcon({
-  icon,
-  className,
-}: TabIconProps) {
+export function TabIcon({ icon, className }: TabIconProps) {
   return styled(useStyles())(
     <tab-icon as="div" className={className}>
       {icon ? <StaticImage icon={icon} /> : <placeholder as="div" />}
     </tab-icon>
   );
-});
+}

webapp/packages/core/src/blocks/Tabs/Tab/TabTitle.tsx

@@ -6,7 +6,6 @@
  * you may not use this file except in compliance with the License.
  */
 
-import { observer } from 'mobx-react';
 import styled from 'reshadow';
 
 import { useStyles } from '@dbeaver/core/theming';
@@ -16,13 +15,10 @@ type TabTitleProps = {
   className?: string;
 }
 
-export const TabTitle = observer(function TabTitle({
-  title,
-  className,
-}: TabTitleProps) {
+export function TabTitle({ title, className }: TabTitleProps) {
   return styled(useStyles())(
     <tab-title as="div" className={className}>
       {title || <placeholder as="div" />}
     </tab-title>
   );
-});
+}

webapp/packages/core/src/blocks/Tabs/TabsBox/TabsBox.tsx

@@ -6,7 +6,6 @@
  * you may not use this file except in compliance with the License.
  */
 
-import { observer } from 'mobx-react';
 import {
   useMemo, PropsWithChildren, ReactNode, useEffect,
 } from 'react';
@@ -24,7 +23,7 @@ type TabsBoxProps = PropsWithChildren<{
   style?: Style[];
 }>
 
-export const TabsBox = observer(function TabsBox({
+export function TabsBox({
   currentTabId,
   tabs,
   children,
@@ -54,4 +53,4 @@ export const TabsBox = observer(function TabsBox({
       </tabs-box>
     </TabsContext.Provider>
   );
-});
+}

webapp/packages/core/src/blocks/Tabs/TabsBox/TabsBoxFromArray.tsx

@@ -7,7 +7,6 @@
  */
 
 import { observer } from 'mobx-react';
-import { JSXElementConstructor } from 'react';
 import styled from 'reshadow';
 
 import { useStyles, Style } from '@dbeaver/core/theming';
@@ -23,8 +22,8 @@ export interface TabElementProps {
 type TabsBoxControllerProps ={
   currentTabId: string;
   tabIdList: string[];
-  tab: JSXElementConstructor<TabElementProps>;
-  panel: JSXElementConstructor<TabElementProps>;
+  tab: React.ElementType<TabElementProps>;
+  panel: React.ElementType<TabElementProps>;
   hideTabs?: boolean;
   onOpen: (tabId: string) => void;
   onClose?: (tabId: string) => void;

webapp/packages/core/src/blocks/Tabs/VerticalTabs/VerticalTabHeader.tsx

@@ -7,9 +7,6 @@
  */
 
 import { observer } from 'mobx-react';
-import {
-  HTMLAttributes,
-} from 'react';
 import styled, { css, use } from 'reshadow';
 
 import { composes, useStyles } from '@dbeaver/core/theming';
@@ -50,10 +47,10 @@ const styles = composes(
       background: transparent;
       color: inherit;
   
-      &:global([aria-selected]):before {
+      &:global([aria-selected=true]):before {
         display: block;
       }
-      &:not(:global([aria-selected])) {
+      &:not(:global([aria-selected=true])) {
         cursor: pointer;
         font-weight: normal;
       }
@@ -61,7 +58,7 @@ const styles = composes(
   `
 );
 
-type VerticalTabHeaderProps = HTMLAttributes<HTMLDivElement> & {
+type VerticalTabHeaderProps = React.HTMLAttributes<HTMLDivElement> & {
   tab: ITab;
 }
 

webapp/packages/core/src/blocks/Tabs/VerticalTabs/VerticalTabPanel.tsx

@@ -7,9 +7,6 @@
  */
 
 import { observer } from 'mobx-react';
-import {
-  HTMLAttributes,
-} from 'react';
 import styled, { css } from 'reshadow';
 
 import { composes, useStyles } from '@dbeaver/core/theming';
@@ -32,7 +29,7 @@ const styles = composes(
   `,
 );
 
-type VerticalTabPanelProps = HTMLAttributes<HTMLDivElement> & {
+type VerticalTabPanelProps = React.HTMLAttributes<HTMLDivElement> & {
   tab: ITab;
 }
 

webapp/packages/core/src/blocks/Tabs/VerticalTabs/VerticalTabs.tsx

@@ -7,9 +7,6 @@
  */
 
 import { observer } from 'mobx-react';
-import {
-  DOMAttributes,
-} from 'react';
 import { TabList, useTabState } from 'reakit/Tab';
 import styled, { css } from 'reshadow';
 
@@ -44,7 +41,7 @@ const tabStyles = composes(
   `
 );
 
-type VerticalTabsProps = DOMAttributes<HTMLDivElement> & {
+type VerticalTabsProps = React.DOMAttributes<HTMLDivElement> & {
   tabContainer: ITabContainer;
 };
 

webapp/packages/core/src/blocks/TextPlaceholder.tsx

@@ -6,8 +6,6 @@
  * you may not use this file except in compliance with the License.
  */
 
-import { observer } from 'mobx-react';
-import { PropsWithChildren } from 'react';
 import styled, { css } from 'reshadow';
 
 import { useStyles, composes } from '@dbeaver/core/theming';
@@ -34,7 +32,7 @@ const TextPlaceholderStyles = composes(
   `
 );
 
-export const TextPlaceholder = observer(function TextPlaceholder(props: PropsWithChildren<{}>) {
+export function TextPlaceholder(props: React.PropsWithChildren<{}>) {
   return styled(useStyles(TextPlaceholderStyles))(
     <div>
       <span>
@@ -42,4 +40,4 @@ export const TextPlaceholder = observer(function TextPlaceholder(props: PropsWit
       </span>
     </div>
   );
-});
+}

webapp/packages/core/src/di/go-di/goDiWrapper.ts

@@ -1,48 +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 {
-  IScopeService,
-  Scope,
-} from 'go-di';
-
-import { IServiceConstructor } from '../IApp';
-import { IDiWrapper } from '../inversifyWrapper';
-
-const scope = new Scope();
-
-export const goDiWrapper: IDiWrapper = {
-  injector: {
-    getServiceByClass<T>(ctor: IServiceConstructor<T>): T {
-      // todo correct implementation required
-      return scope.get<T>(ctor as unknown as IScopeService<T>);
-    },
-
-    getServiceByToken<T>(token: any): T {
-      // todo correct implementation required
-      return scope.get<T>(token as unknown as IScopeService<T>);
-    },
-
-    resolveServiceByClass<T>(ctor: IServiceConstructor<T>): T {
-      // todo implementation required
-      return {} as T;
-    },
-  },
-
-  collection: {
-    addServiceByClass<T>(ctor: IServiceConstructor<T>): void {
-      // todo correct implementation required
-      scope.attachFactory(ctor as unknown as IScopeService<T>, ctor as any, true);
-    },
-
-    addServiceByToken<T>(token: any, value: T): void {
-      // todo correct implementation required
-      scope.attach(token, value);
-    },
-  },
-};

webapp/packages/core/src/di/go-di/serviceLoggerMiddleware.ts

@@ -1,224 +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.
- */
-
-/* eslint-disable max-classes-per-file */
-import { GetService, IGetServiceValue, IServiceValue } from 'go-di';
-
-// eslint-disable-next-line symbol-description
-const BASE = Symbol();
-
-class GroupMessage {
-  title: string
-  value: any
-  source: any
-
-  constructor(title: string, value: any, source?: any) {
-    this.title = title;
-    this.value = value;
-    this.source = source;
-  }
-}
-
-class Group {
-  title?: string
-  source: any
-  before?: Group
-  buffer: ({ message: string; type: string } | GroupMessage | Group)[]
-
-  constructor(before: Group, title?: string, source?: any) {
-    this.title = title;
-    this.buffer = [];
-    this.before = before;
-    this.source = source;
-  }
-
-  log(value: any) {
-    if (!this.before) {
-      console.log(value);
-    } else {
-      this.buffer.push({ message: value, type: 'info' });
-    }
-  }
-
-  error(value: any) {
-    if (!this.before) {
-      console.error(value);
-    } else {
-      this.buffer.push({ message: value, type: 'error' });
-    }
-  }
-
-  logGroup(title: string, value: any) {
-    if (!this.before) {
-      printMessage(new GroupMessage(title, value));
-    } else {
-      this.buffer.push(new GroupMessage(title, value));
-    }
-  }
-
-  close() {
-    currentGroup = this.before as Group;
-    if (!currentGroup.before) {
-      printGroup(currentGroup);
-    }
-  }
-
-  discard() {
-    currentGroup = this.before as Group;
-  }
-}
-
-function openGroup(title?: string, source?: any) {
-  const group = new Group(currentGroup, title, source);
-
-  if (currentGroup) {
-    currentGroup.buffer.push(group);
-  }
-  currentGroup = group;
-
-  return group;
-}
-
-function printMessage({ title, value, source }: GroupMessage) {
-  console.groupCollapsed(title);
-  if (typeof source === 'function') {
-    console.groupCollapsed('Source');
-    console.log(source);
-    console.groupEnd();
-  }
-  console.log(value);
-  console.groupEnd();
-}
-
-function printGroup(group: Group) {
-  if (group.before) {
-    console.groupCollapsed(group.title);
-    if (typeof group.source === 'function') {
-      console.groupCollapsed('Source');
-      console.log(group.source);
-      console.groupEnd();
-    }
-  }
-  for (const message of group.buffer) {
-    if (message instanceof Group) {
-      printGroup(message);
-    } else if (message instanceof GroupMessage) {
-      printMessage(message);
-    } else if (message.type === 'info') {
-      console.log(message.message);
-    } else {
-      console.error(message.message);
-    }
-  }
-  // eslint-disable-next-line no-param-reassign
-  group.buffer = [];
-  if (group.before) {
-    console.groupEnd();
-  }
-}
-
-function filterArgs(f: any) {
-  return typeof f === 'object'
-    ? JSON.stringify(f, undefined, 2)
-    : filterFunction(f);
-}
-
-function filterFunction(f: any) {
-  return typeof f === 'function' ? 'ƒ' : f;
-}
-
-function proxyFunction<T>(
-  object: any,
-  func: any,
-  prefix: string,
-  name: string | number | symbol,
-) {
-  return (...args: any) => {
-    const scope = openGroup(
-      `${prefix}${name as string}(${args.map(filterArgs).join(', ')})`,
-      func,
-    );
-    const val = object ? object[name](...args) : func(...args);
-    if (val instanceof Promise) {
-      val
-        .then((v) => {
-          scope.log(filterFunction(v));
-          scope.close();
-        })
-        .catch((v) => {
-          scope.error(filterFunction(v));
-          scope.close();
-        });
-    } else {
-      scope.log(filterFunction(val));
-      scope.close();
-    }
-    return val;
-  };
-}
-
-function proxyService(value: any, serviceName: string) {
-  return new Proxy(
-    {
-      [BASE]: value,
-    } as any,
-    {
-      get(target, name) {
-        if (name === BASE) {
-          return target[name];
-        }
-        const source = target[BASE];
-
-        if (typeof source[name] === 'function') {
-          if (target[name] === undefined) {
-            // eslint-disable-next-line no-param-reassign
-            target[name] = proxyFunction(source, source[name], `${serviceName}.`, name);
-          }
-          return target[name];
-        }
-        currentGroup.logGroup(`${serviceName}.${name as string}`, source[name]);
-        return source[name];
-      },
-    },
-  );
-}
-
-let currentGroup: Group = undefined as any;
-openGroup();
-
-export function serviceLoggerMiddleware<T>(
-  service: IServiceValue<T>,
-  params: any[],
-  getValue: IGetServiceValue<T>,
-): GetService<T> {
-  const serviceName = service.getName();
-
-  const scope = openGroup(
-    `${serviceName}(${params.map(filterArgs).join(', ')})`,
-    service.service,
-  );
-
-  const value = getValue(service, params) as any;
-  scope.log(value[BASE] || value);
-  scope.close();
-
-  if (value[BASE] !== undefined) {
-    return value;
-  }
-
-  switch (typeof value) {
-    case 'object':
-      return proxyService(value, serviceName);
-    case 'function': {
-      const func = proxyFunction(undefined, value, '', serviceName) as any;
-      func[BASE] = value;
-      return func;
-    }
-  }
-  return value;
-}

webapp/packages/core/src/di/useService.ts

@@ -6,7 +6,7 @@
  * you may not use this file except in compliance with the License.
  */
 
-import { useContext } from 'react';
+import { useContext, useMemo } from 'react';
 
 import { appContext } from './AppContext';
 import { IServiceConstructor } from './IApp';
@@ -14,10 +14,10 @@ import { ValueToken } from './InjectionToken';
 
 export function useService<T>(ctor: IServiceConstructor<T>): T {
   const app = useContext(appContext);
-  return app.getServiceByClass(ctor);
+  return useMemo(() => app.getServiceByClass(ctor), [app, ctor]);
 }
 
 export function useServiceByToken<T>(token: ValueToken<T>): T {
   const app = useContext(appContext);
-  return app.getServiceByToken(token);
+  return useMemo(() => app.getServiceByToken(token), [app, token]);
 }

webapp/packages/core/src/dialogs/CommonDialog/CommonDialogWrapper.tsx

@@ -6,7 +6,6 @@
  * you may not use this file except in compliance with the License.
  */
 
-import { ReactNode } from 'react';
 import styled, { css, use } from 'reshadow';
 
 import { Icon } from '@dbeaver/core/blocks';
@@ -19,7 +18,7 @@ export type CommonDialogWrapperProps = {
   noBodyPadding?: boolean;
   footer?: JSX.Element | boolean;
   header?: JSX.Element | boolean;
-  children?: ReactNode;
+  children?: React.ReactNode;
 }
 
 const style = composes(
@@ -89,10 +88,16 @@ const style = composes(
 `
 );
 
-export const CommonDialogWrapper = (
-  props: CommonDialogWrapperProps
-) => {
-  const { title, onReject, children } = props;
+export function CommonDialogWrapper({
+  title,
+  header,
+  footer,
+  noBodyPadding,
+  className,
+  onReject,
+  children,
+}: CommonDialogWrapperProps) {
+
   return styled(useStyles(style))(
     <dialog>
       <header>
@@ -102,12 +107,12 @@ export const CommonDialogWrapper = (
             <Icon name="cross" viewBox="0 0 16 16" onClick={onReject} />
           </reject>
         </header-title>
-        {props.header}
+        {header}
       </header>
-      <dialog-body as="div" className={props.className} {...use({ noPadding: props.noBodyPadding })}>{children}</dialog-body>
+      <dialog-body as="div" className={className} {...use({ noPadding: noBodyPadding })}>{children}</dialog-body>
       <footer>
-        {props.footer}
+        {footer}
       </footer>
     </dialog>
   );
-};
+}

webapp/packages/core/src/dialogs/CommonDialog/DialogsPortal.tsx

@@ -54,7 +54,7 @@ type NestedDialogType = {
   visible: boolean;
 }
 
-const NestedDialog = (props: NestedDialogType) => {
+function NestedDialog(props: NestedDialogType) {
   const dialogState = useDialogState();
   const styles = useStyles(dialogStyles);
   dialogState.visible = props.visible;
@@ -77,4 +77,4 @@ const NestedDialog = (props: NestedDialogType) => {
       />
     </Dialog>
   );
-};
+}

webapp/packages/core/src/dialogs/Menu/MenuPanel/MenuPanelItem.tsx

@@ -6,12 +6,13 @@
  * you may not use this file except in compliance with the License.
  */
 
-import { observer } from 'mobx-react';
-import styled, { use } from 'reshadow';
+import { useObserver } from 'mobx-react';
+import styled from 'reshadow';
+
 
 import { Icon } from '@dbeaver/core/blocks';
 import { IMenuItem } from '@dbeaver/core/dialogs';
-import { useTranslate } from '@dbeaver/core/localization';
+import { Translate } from '@dbeaver/core/localization';
 import { useStyles, Style } from '@dbeaver/core/theming';
 
 import { menuPanelStyles } from './menuPanelStyles';
@@ -21,15 +22,18 @@ type MenuPanelItemProps = {
   style?: Style[];
 }
 
-export const MenuPanelItem = observer(function MenuPanelItem({ menuItem, style = [] }: MenuPanelItemProps) {
-  const translate = useTranslate();
+export function MenuPanelItem({ menuItem, style = [] }: MenuPanelItemProps) {
+  const { title, panel } = useObserver(() => ({ // TODO: provide title and panel via props
+    title: menuItem.title,
+    panel: menuItem.panel,
+  }));
 
   return styled(useStyles(menuPanelStyles, ...style))(
     <menu-panel-item as="div">
       <menu-item-text as="span">
-        {translate(menuItem.title)}
+        <Translate token={title} />
       </menu-item-text>
-      {menuItem.panel && <Icon name="arrow" viewBox="0 0 16 16" />}
+      {panel && <Icon name="arrow" viewBox="0 0 16 16" />}
     </menu-panel-item>
   );
-});
+}

webapp/packages/core/src/dialogs/Menu/MenuPanel/MenuTrigger.tsx

@@ -6,8 +6,10 @@
  * you may not use this file except in compliance with the License.
  */
 
-import { observer, Observer } from 'mobx-react';
-import React, { ButtonHTMLAttributes, Ref, useCallback } from 'react';
+import { observer, useObserver } from 'mobx-react';
+import {
+  forwardRef, Ref, useCallback
+} from 'react';
 import {
   MenuDisclosure,
   Menu, MenuItem, MenuStateReturn, useMenuState,
@@ -17,7 +19,7 @@ import styled, { use } from 'reshadow';
 import { useStyles, Style } from '@dbeaver/core/theming';
 
 import {
-  IMenuItem, IMenuPanel, MenuTriggerProps, MenuMod
+  IMenuItem, IMenuPanel, MenuTriggerProps
 } from '../IMenuPanel';
 import { MenuPanelItem } from './MenuPanelItem';
 import { menuPanelStyles } from './menuPanelStyles';
@@ -25,13 +27,12 @@ import { menuPanelStyles } from './menuPanelStyles';
 /**
  * MenuTrigger
  */
-export const MenuTrigger = observer(function MenuTrigger({
+export function MenuTrigger({
   panel,
   children,
   style = [],
   ...props
 }: MenuTriggerProps) {
-
   const menu = useMenuState();
 
   return styled(useStyles(menuPanelStyles, ...style))(
@@ -42,7 +43,7 @@ export const MenuTrigger = observer(function MenuTrigger({
       <MenuPanel panel={panel} menu={menu} style={style}/>
     </>
   );
-});
+}
 
 
 /**
@@ -74,7 +75,7 @@ const MenuPanel = observer(function MenuPanel({
  * MenuPanelElement
  */
 
-type MenuPanelElementProps = Omit<ButtonHTMLAttributes<any>, 'style'> & {
+type MenuPanelElementProps = Omit<React.ButtonHTMLAttributes<any>, 'style'> & {
   item: IMenuItem;
   menu: MenuStateReturn; // from reakit useMenuState
   style?: Style[];
@@ -123,31 +124,28 @@ const MenuPanelElement = observer(function MenuPanelElement({
  * MenuInnerTrigger
  */
 
-type MenuInnerTriggerProps = Omit<ButtonHTMLAttributes<any>, 'style'> & {
+type MenuInnerTriggerProps = Omit<React.ButtonHTMLAttributes<any>, 'style'> & {
   menuItem: IMenuItem;
   style?: Style[];
 }
 
-export const MenuInnerTrigger = React.forwardRef(function MenuInnerTrigger(
+export const MenuInnerTrigger = forwardRef(function MenuInnerTrigger(
   props: MenuInnerTriggerProps,
   ref: Ref<HTMLButtonElement>
 ) {
 
   const {
-    menuItem, style = [], ...other
+    menuItem, style = [], ...rest
   } = props;
   const menu = useMenuState();
+  const panel = useObserver(() => menuItem.panel);
 
-  return (
-    <Observer>
-      {() => styled(useStyles(menuPanelStyles, ...style))(
-        <>
-          <MenuDisclosure ref={ref} {...menu} {...other}>
-            <MenuPanelItem menuItem={menuItem} style={style}/>
-          </MenuDisclosure>
-          <MenuPanel panel={menuItem.panel!} menu={menu} style={style}/>
-        </>
-      )}
-    </Observer>
+  return styled(useStyles(menuPanelStyles, ...style))(
+    <>
+      <MenuDisclosure ref={ref} {...menu} {...rest}>
+        <MenuPanelItem menuItem={menuItem} style={style}/>
+      </MenuDisclosure>
+      <MenuPanel panel={panel!} menu={menu} style={style}/>
+    </>
   );
 });

webapp/packages/core/src/localization/Translate.tsx

@@ -0,0 +1,12 @@
+import { TLocalizationToken } from './TLocalizationToken';
+import { useTranslate } from './useTranslate';
+
+type TranslateProps = {
+  token: TLocalizationToken;
+}
+
+export function Translate({ token }: TranslateProps) {
+  const value = useTranslate(token);
+
+  return <>{value}</>;
+}

webapp/packages/core/src/localization/index.ts

@@ -1,4 +1,5 @@
 export * from './LocalizationService';
-export * from './useLocale';
+export * from './useTranslate';
 export * from './Locale';
 export * from './TLocalizationToken';
+export * from './Translate';

webapp/packages/core/src/localization/useTranslate.ts

@@ -6,16 +6,21 @@
  * you may not use this file except in compliance with the License.
  */
 
+import { useObserver } from 'mobx-react';
+
 import { useService } from '@dbeaver/core/di';
 
 import { LocalizationService } from './LocalizationService';
 import { TLocalizationToken } from './TLocalizationToken';
 
-export function useTranslate(): (token: TLocalizationToken) => string {
-  return useService(LocalizationService).translate;
-}
+export function useTranslate(): (token: TLocalizationToken) => string;
+export function useTranslate(token: TLocalizationToken): string;
+export function useTranslate(token?: TLocalizationToken): string | ((token: TLocalizationToken) => string) {
+  if (!token) {
+    return useService(LocalizationService).translate;
+  }
 
-export function useLocale<T>(selector: TLocalizationToken): string {
-  const translate = useTranslate();
-  return translate(selector);
+  const localizationService = useService(LocalizationService);
+
+  return useObserver(() => localizationService.translate(token));
 }

webapp/packages/core/src/root/SessionExpiredDialog.tsx

@@ -11,7 +11,7 @@ import { useCallback } from 'react';
 import styled, { css } from 'reshadow';
 
 import { Button } from '@dbeaver/core/blocks';
-import { CommonDialogWrapper, DialogComponent, DialogComponentProps } from '@dbeaver/core/dialogs';
+import { CommonDialogWrapper, DialogComponent } from '@dbeaver/core/dialogs';
 import { useTranslate } from '@dbeaver/core/localization';
 import { useStyles } from '@dbeaver/core/theming';
 
@@ -30,17 +30,12 @@ const styles = css`
   }
 `;
 
-export const SessionExpiredDialog: DialogComponent<null, null> = observer(function SessionExpiredDialog(
-  props: DialogComponentProps<null, null>
-) {
-
+export const SessionExpiredDialog: DialogComponent<null, null> = observer(function SessionExpiredDialog({
+  rejectDialog,
+}) {
   const translate = useTranslate();
   const title = translate('app_root_session_expired_title');
-
-  const reload = useCallback(
-    () => window.location.reload(),
-    []
-  );
+  const reload = useCallback(() => window.location.reload(), []);
 
   return styled(useStyles(styles))(
     <CommonDialogWrapper
@@ -56,7 +51,7 @@ export const SessionExpiredDialog: DialogComponent<null, null> = observer(functi
           </Button>
         </controls>
       )}
-      onReject={props.rejectDialog}
+      onReject={rejectDialog}
     >
       <dialog-content as="div">
         <div>{translate('app_root_session_expired_message')}</div>

webapp/packages/core/src/theming/useStyles.ts

@@ -6,6 +6,7 @@
  * you may not use this file except in compliance with the License.
  */
 
+import { useObserver } from 'mobx-react';
 import { useMemo, useState } from 'react';
 import { create } from 'reshadow';
 
@@ -19,7 +20,7 @@ export type ThemeSelector = (theme: string) => Promise<ClassCollection | Compose
 export type Style = ClassCollection | Composes | ThemeSelector
 
 /**
- * Must be observed from mobx
+ * Changes styles depending on theme
  *
  * @param componentStyles styles array
  */
@@ -31,7 +32,7 @@ export function useStyles(
 
   const [loadedStyles, setLoadedStyles] = useState<Array<ClassCollection | Composes>>([]);
   const themeService = useService(ThemeService);
-  const currentThemeId = themeService.currentThemeId;
+  const currentThemeId = useObserver(() => themeService.currentThemeId);
 
   useMemo(() => {
     Promise

webapp/packages/core/src/theming/useTheme.ts

@@ -6,6 +6,7 @@
  * you may not use this file except in compliance with the License.
  */
 
+import { useObserver } from 'mobx-react';
 import { useEffect } from 'react';
 
 import { useService } from '@dbeaver/core/di';
@@ -17,7 +18,7 @@ import { ThemeService } from './ThemeService';
  */
 export function useTheme() {
   const themeService = useService(ThemeService);
-  const className = themeService.currentTheme.className;
+  const className = useObserver(() => themeService.currentTheme.className);
 
   useEffect(() => {
     document.body.classList.add(className);

webapp/packages/core/src/utils/uuid.ts

@@ -6,8 +6,8 @@
  * you may not use this file except in compliance with the License.
  */
 
+import { v4 as uuidv4 } from 'uuid';
 import { V4Options } from 'uuid/interfaces';
-import uuidv4 from 'uuid/v4';
 
 export function uuid(options?: V4Options): string {
   return uuidv4(options);

webapp/packages/custom-connection-plugin/package.json

@@ -19,16 +19,15 @@
     "@material/ripple": "^4.0.0",
     "@material/theme": "^4.0.0",
     "@material/typography": "^4.0.0",
-    "go-di": "^1.5.2",
     "graphql": "^14.5.8",
     "graphql-request": "^1.8.2",
     "graphql-tag": "^2.10.1",
-    "mobx": "^5.15.0",
-    "mobx-react": "^6.1.4",
-    "react": "^16.12.0",
-    "react-dom": "^16.12.0",
+    "mobx": "^5.15.4",
+    "mobx-react": "^6.2.2",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
     "reakit": "^1.0.0-beta.11",
-    "reshadow": "0.0.1-alpha.73",
-    "rxjs": "^6.5.4"
+    "reshadow": "0.0.1-alpha.75",
+    "rxjs": "^6.5.5"
   }
 }

webapp/packages/custom-connection-plugin/src/CustomConnection/ConnectionFormDialog/DriverProperties/DriverPropertyValueSelector.tsx

@@ -6,8 +6,7 @@
  * you may not use this file except in compliance with the License.
  */
 
-import { observer } from 'mobx-react';
-import { useCallback, Children, useEffect } from 'react';
+import { useCallback, useEffect } from 'react';
 import {
   useMenuState,
   Menu,
@@ -64,7 +63,7 @@ type DriverPropertyValueSelectorProps = React.PropsWithChildren<{
   onSwitch(state: boolean): void;
 }>
 
-export const DriverPropertyValueSelector = observer(function DriverPropertyValueSelector({
+export function DriverPropertyValueSelector({
   propertyName,
   values,
   children,
@@ -95,4 +94,4 @@ export const DriverPropertyValueSelector = observer(function DriverPropertyValue
       </Portal>
     </>
   );
-});
+}

webapp/packages/custom-connection-plugin/src/CustomConnection/CustomConnectionDialog.tsx

@@ -10,7 +10,7 @@ import { observer } from 'mobx-react';
 
 import { useController } from '@dbeaver/core/di';
 import { DialogComponent, DialogComponentProps } from '@dbeaver/core/dialogs';
-import { useLocale } from '@dbeaver/core/localization';
+import { useTranslate } from '@dbeaver/core/localization';
 
 import { ConnectionFormDialog } from './ConnectionFormDialog/ConnectionFormDialog';
 import { CustomConnectionController, ConnectionStep } from './CustomConnectionController';
@@ -19,7 +19,7 @@ import { DriverSelectorDialog } from './DriverSelectorDialog/DriverSelectorDialo
 export const CustomConnectionDialog: DialogComponent<null, null> = observer(
   function CustomConnectionDialog(props: DialogComponentProps<null, null>) {
     const controller = useController(CustomConnectionController);
-    let title = useLocale('basicConnection_connectionDialog_newConnection');
+    let title = useTranslate('basicConnection_connectionDialog_newConnection');
 
     if (controller.step === ConnectionStep.Connection && controller.driver?.name) {
       title = controller.driver.name;

webapp/packages/data-viewer-plugin/package.json

@@ -22,12 +22,12 @@
     "graphql": "^14.5.8",
     "graphql-request": "^1.8.2",
     "graphql-tag": "^2.10.1",
-    "mobx": "^5.15.0",
-    "mobx-react": "^6.1.4",
-    "react": "^16.12.0",
-    "react-dom": "^16.12.0",
+    "mobx": "^5.15.4",
+    "mobx-react": "^6.2.2",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
     "reakit": "^1.0.0-beta.11",
-    "reshadow": "0.0.1-alpha.73",
-    "rxjs": "^6.5.4"
+    "reshadow": "0.0.1-alpha.75",
+    "rxjs": "^6.5.5"
   }
 }

webapp/packages/data-viewer-plugin/src/TableViewer/ErrorDialog.tsx

@@ -11,7 +11,8 @@ import { useCallback } from 'react';
 import styled, { css } from 'reshadow';
 
 import { Button, SanitizedHTML } from '@dbeaver/core/blocks';
-import { CommonDialogWrapper, DialogComponent, DialogComponentProps } from '@dbeaver/core/dialogs';
+import { CommonDialogWrapper, DialogComponent } from '@dbeaver/core/dialogs';
+import { useTranslate } from '@dbeaver/core/localization';
 import { useStyles } from '@dbeaver/core/theming';
 
 const styles = css`
@@ -41,27 +42,30 @@ export type ErrorDialogPayload = {
   onShowDetails?: () => void;
 }
 
-export const ErrorDialog: DialogComponent<ErrorDialogPayload, boolean> = observer(
-  function ErrorDialog({
-    rejectDialog, resolveDialog, payload,
-  }: DialogComponentProps<ErrorDialogPayload, boolean>) {
-    const handleRetry = useCallback(() => resolveDialog(true), [resolveDialog]);
+export const ErrorDialog: DialogComponent<ErrorDialogPayload, boolean> = observer(function ErrorDialog({
+  rejectDialog, resolveDialog, payload,
+}) {
+  const handleRetry = useCallback(() => resolveDialog(true), [resolveDialog]);
+  const translate = useTranslate();
 
-    return styled(useStyles(styles))(
-      <CommonDialogWrapper
-        title={'Error when saving changes'}
-        onReject={rejectDialog}
-        footer={(
-          <controls as="div">
-            {payload.onShowDetails && <Button type="button" mod={['outlined']} onClick={payload.onShowDetails}>Details</Button>}
-            <fill as="div"/>
-            <Button type="button" mod={['outlined']} onClick={rejectDialog}>Cancel</Button>
-            <Button type="button" mod={['unelevated']} onClick={handleRetry}>Retry</Button>
-          </controls>
-        )}
-      >
-        <message as="div"><SanitizedHTML html={payload.message}/></message>
-      </CommonDialogWrapper>
-    );
-  }
-);
+  return styled(useStyles(styles))(
+    <CommonDialogWrapper
+      title={translate('ui_data_saving_error')}
+      onReject={rejectDialog}
+      footer={(
+        <controls as="div">
+          {payload.onShowDetails && (
+            <Button type="button" mod={['outlined']} onClick={payload.onShowDetails}>
+              {translate('ui_errors_details')}
+            </Button>
+          )}
+          <fill as="div"/>
+          <Button type="button" mod={['outlined']} onClick={rejectDialog}>{translate('ui_processing_cancel')}</Button>
+          <Button type="button" mod={['unelevated']} onClick={handleRetry}>{translate('ui_processing_retry')}</Button>
+        </controls>
+      )}
+    >
+      <message as="div"><SanitizedHTML html={payload.message}/></message>
+    </CommonDialogWrapper>
+  );
+});

webapp/packages/data-viewer-plugin/src/TableViewer/TableFooter/TableFooter.tsx

@@ -6,22 +6,12 @@
  * you may not use this file except in compliance with the License.
  */
 
-import { observer } from 'mobx-react';
-import { useCallback, ChangeEvent, PropsWithChildren } from 'react';
+import { useCallback } from 'react';
 import styled, { css, use } from 'reshadow';
 
 import { Icon } from '@dbeaver/core/blocks';
 import { composes, useStyles } from '@dbeaver/core/theming';
 
-
-type TableFooterProps = PropsWithChildren<{
-  chunkSize: number;
-  requestStatusMessage: string;
-  queryDuration: number;
-  onRefresh: () => void;
-  onDataChange: (value: number) => void;
-}>
-
 const tableFooterStyles = composes(
   css`
     table-footer {
@@ -73,7 +63,15 @@ const tableFooterStyles = composes(
   `
 );
 
-export const TableFooter = observer(function TableFooter({
+type TableFooterProps = {
+  chunkSize: number;
+  requestStatusMessage: string;
+  queryDuration: number;
+  onRefresh: () => void;
+  onDataChange: (value: number) => void;
+}
+
+export function TableFooter({
   chunkSize,
   requestStatusMessage,
   queryDuration,
@@ -81,7 +79,7 @@ export const TableFooter = observer(function TableFooter({
   onDataChange,
 }: TableFooterProps) {
   const handleChange = useCallback(
-    (e: ChangeEvent<HTMLInputElement>) => onDataChange(parseInt(e.target.value, 10)),
+    (e: React.ChangeEvent<HTMLInputElement>) => onDataChange(parseInt(e.target.value, 10)),
     [onDataChange]
   );
 
@@ -102,4 +100,4 @@ export const TableFooter = observer(function TableFooter({
       )}
     </table-footer>
   );
-});
+}

webapp/packages/dbeaver/package.json

@@ -19,8 +19,8 @@
   },
   "license": "Apache-2.0",
   "dependencies": {
-    "@ag-grid-community/all-modules": "^22.1.0",
-    "@ag-grid-enterprise/all-modules": "^22.1.0",
+    "@ag-grid-community/all-modules": "^23.0.2",
+    "@ag-grid-enterprise/all-modules": "^23.0.2",
     "@dbeaver/ag-grid-plugin": "^0.1.0",
     "@dbeaver/basic-connection-plugin": "^0.1.0",
     "@dbeaver/custom-connection-plugin": "^0.1.0",
@@ -34,29 +34,26 @@
     "@material/ripple": "^4.0.0",
     "@material/theme": "^4.0.0",
     "@material/typography": "^4.0.0",
-    "ag-grid-community": "^22.1.0",
-    "ag-grid-enterprise": "^22.1.0",
-    "ag-grid-react": "^22.1.0",
-    "go-di": "^1.5.2",
+    "ag-grid-community": "^23.0.2",
+    "ag-grid-enterprise": "^23.0.2",
+    "ag-grid-react": "^23.0.3",
     "go-split": "^1.3.2",
     "graphql-request": "^1.8.2",
     "inversify": "^5.0.1",
-    "mobx": "^5.15.0",
-    "mobx-react": "^6.1.4",
-    "module-alias": "^2.2.1",
-    "next": "^9.1.3",
-    "next-compose-plugins": "^2.2.0",
+    "mobx": "^5.15.4",
+    "mobx-react": "^6.2.2",
+    "module-alias": "^2.2.2",
     "node-sass": "^4.13.0",
     "postcss-import": "^12.0.1",
-    "preact": "^10.1.0",
-    "preact-render-to-string": "^5.1.1",
-    "preact-ssr-prepass": "^1.0.0",
-    "react": "^16.12.0",
-    "react-dom": "^16.12.0",
+    "preact": "^10.4.0",
+    "preact-render-to-string": "^5.1.6",
+    "preact-ssr-prepass": "^1.0.1",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
     "reakit": "1.0.0-beta.11",
     "reflect-metadata": "^0.1.13",
-    "reshadow": "0.0.1-alpha.73",
-    "rxjs": "^6.5.4"
+    "reshadow": "0.0.1-alpha.75",
+    "rxjs": "^6.5.5"
   },
   "dbeaverPlugins": []
 }

webapp/packages/ddl-viewer-plugin/package.json

@@ -22,12 +22,12 @@
     "graphql": "^14.5.8",
     "graphql-request": "^1.8.2",
     "graphql-tag": "^2.10.1",
-    "mobx": "^5.15.0",
-    "mobx-react": "^6.1.4",
-    "react": "^16.12.0",
-    "react-dom": "^16.12.0",
+    "mobx": "^5.15.4",
+    "mobx-react": "^6.2.2",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
     "reakit": "^1.0.0-beta.11",
-    "reshadow": "0.0.1-alpha.73",
-    "rxjs": "^6.5.4"
+    "reshadow": "0.0.1-alpha.75",
+    "rxjs": "^6.5.5"
   }
 }

webapp/packages/object-viewer-plugin/package.json

@@ -21,12 +21,12 @@
     "graphql": "^14.5.8",
     "graphql-request": "^1.8.2",
     "graphql-tag": "^2.10.1",
-    "mobx": "^5.15.0",
-    "mobx-react": "^6.1.4",
-    "react": "^16.12.0",
-    "react-dom": "^16.12.0",
+    "mobx": "^5.15.4",
+    "mobx-react": "^6.2.2",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
     "reakit": "^1.0.0-beta.11",
-    "reshadow": "0.0.1-alpha.73",
-    "rxjs": "^6.5.4"
+    "reshadow": "0.0.1-alpha.75",
+    "rxjs": "^6.5.5"
   }
 }

webapp/packages/object-viewer-plugin/src/ObjectFolders.tsx

@@ -6,10 +6,6 @@
  * you may not use this file except in compliance with the License.
  */
 
-import { observer } from 'mobx-react';
-import {
-  PropsWithChildren,
-} from 'react';
 import styled, { css } from 'reshadow';
 
 import { VerticalTabs } from '@dbeaver/core/blocks';
@@ -26,11 +22,11 @@ const styles = css`
   }
 `;
 
-type ObjectFoldersProps = PropsWithChildren<{
+type ObjectFoldersProps = {
   objectId: string;
-}>
+}
 
-export const ObjectFolders = observer(function ObjectFolders({ objectId }: ObjectFoldersProps) {
+export function ObjectFolders({ objectId }: ObjectFoldersProps) {
   const controller = useController(ObjectFoldersController, objectId);
 
   return styled(useStyles(styles))(
@@ -38,4 +34,4 @@ export const ObjectFolders = observer(function ObjectFolders({ objectId }: Objec
       <VerticalTabs tabContainer={controller.getTabContainer()}/>
     </folders>
   );
-});
+}

webapp/packages/object-viewer-plugin/src/ObjectPropertyTable/Header.tsx

@@ -11,6 +11,13 @@ import styled, { css } from 'reshadow';
 import { ObjectPropertyInfo } from '@dbeaver/core/sdk';
 import { useStyles } from '@dbeaver/core/theming';
 
+const styles = css`
+  th:first-child {
+    width:16px;
+    border-right: none;
+  }
+`;
+
 type HeaderProps = {
   properties: Pick<
     ObjectPropertyInfo,
@@ -26,12 +33,7 @@ type HeaderProps = {
 
 export function Header({ properties }: HeaderProps) {
 
-  return styled(useStyles(css`
-    th:first-child {
-      width:16px;
-      border-right: none;
-    }
-  `))(
+  return styled(useStyles(styles))(
     <tr>
       <th></th>
       {properties.map(property => (

webapp/packages/object-viewer-plugin/src/ObjectPropertyTable/Item.tsx

@@ -6,6 +6,7 @@
  * you may not use this file except in compliance with the License.
  */
 
+import { observer } from 'mobx-react';
 import { useCallback } from 'react';
 import styled, { css, use } from 'reshadow';
 
@@ -16,7 +17,6 @@ import { useStyles } from '@dbeaver/core/theming';
 
 import { getValue } from '../tools';
 
-
 const itemStyles = css`
     icon {
       display: flex;
@@ -48,7 +48,7 @@ type ItemProps = {
   onClick: (objectId: string, isMultiple: boolean) => void;
 }
 
-export function Item({
+export const Item = observer(function Item({
   objectId, columns, isSelected, onClick,
 }: ItemProps) {
   const nodesManagerService = useService(NodesManagerService);
@@ -56,7 +56,8 @@ export function Item({
   const databaseObjectInfo = useDatabaseObjectInfo(objectId);
   const handleOpen = useCallback(() => nodesManagerService.navToNode(objectId), [objectId]);
   const handleClick = useCallback(
-    (e: React.MouseEvent<HTMLTableRowElement>) => onClick(objectId, e.ctrlKey), [objectId, onClick]
+    (e: React.MouseEvent<HTMLTableRowElement>) => onClick(objectId, e.ctrlKey),
+    [objectId, onClick]
   );
 
   if (!object || !databaseObjectInfo?.properties) {
@@ -86,8 +87,8 @@ export function Item({
         </icon>
       </td>
       {databaseObjectInfo.properties.map(property => (
-        <td key={property.id}>{getValue(property.value as any)}</td>
+        <td key={property.id}>{getValue(property.value)}</td>
       ))}
     </tr>
   );
-}
+});

webapp/packages/sql-editor/package.json

@@ -12,25 +12,24 @@
   },
   "license": "Apache-2.0",
   "dependencies": {
-    "codemirror": "^5.50.2",
-    "react-codemirror2": "^6.0.0"
+    "codemirror": "^5.52.2",
+    "react-codemirror2": "^7.1.0"
   },
   "devDependencies": {
-    "@types/codemirror": "^0.0.82"
+    "@types/codemirror": "^0.0.91"
   },
   "peerDependencies": {
     "@dbeaver/core": "^0.1.0",
     "@dbeaver/data-viewer-plugin": "^0.1.0",
-    "go-di": "^1.5.2",
     "graphql": "^14.5.8",
     "graphql-request": "^1.8.2",
     "graphql-tag": "^2.10.1",
-    "mobx": "^5.15.0",
-    "mobx-react": "^6.1.4",
-    "react": "^16.12.0",
-    "react-dom": "^16.12.0",
+    "mobx": "^5.15.4",
+    "mobx-react": "^6.2.2",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
     "reakit": "^1.0.0-beta.11",
-    "reshadow": "0.0.1-alpha.73",
-    "rxjs": "^6.5.4"
+    "reshadow": "0.0.1-alpha.75",
+    "rxjs": "^6.5.5"
   }
 }

webapp/packages/sql-editor/src/SqlEditorTab.tsx

@@ -6,8 +6,6 @@
  * you may not use this file except in compliance with the License.
  */
 
-import { observer } from 'mobx-react';
-import { PropsWithChildren } from 'react';
 import styled, { css } from 'reshadow';
 
 import {
@@ -18,10 +16,6 @@ import { useStyles } from '@dbeaver/core/theming';
 import { SqlEditor } from './SqlEditor';
 import { SqlResultTabs } from './SqlResultTabs/SqlResultTabs';
 
-type SqlEditorTabProps = PropsWithChildren<{
-  tabId: string;
-  handlerId: string;
-}>
 
 const viewerStyles = css`
   Pane {
@@ -33,7 +27,12 @@ const viewerStyles = css`
   }
 `;
 
-export const SqlEditorTab = observer(function SqlEditorTab({ tabId }: SqlEditorTabProps) {
+type SqlEditorTabProps = {
+  tabId: string;
+  handlerId: string;
+}
+
+export function SqlEditorTab({ tabId }: SqlEditorTabProps) {
   return styled(useStyles(splitStyles, splitHorizontalStyles, viewerStyles))(
     <Split split="horizontal" sticky={30}>
       <Pane>
@@ -45,4 +44,4 @@ export const SqlEditorTab = observer(function SqlEditorTab({ tabId }: SqlEditorT
       </Pane>
     </Split>
   );
-});
+}