From edf5e5eed82768063a1f92e663ca348f7e56d9ab Mon Sep 17 00:00:00 2001
From: Wroud <wrouds@gmail.com>
Date: Mon, 5 Oct 2020 02:37:24 +0300
Subject: [PATCH] chore: linter improvements

---
 webapp/.eslintrc.js                           | 36 +++++++++++++++++++
 .../src/Administration/Administration.tsx     |  2 +-
 .../src/Administration/DrawerItem.tsx         | 16 +++++----
 .../AdministrationScreen.tsx                  |  2 +-
 .../ConfigurationWizardScreen.tsx             |  4 +--
 .../Pages/Finish/FinishPageDrawerItem.tsx     |  6 ++--
 .../ServerConfigurationDrawerItem.tsx         |  4 +--
 .../ServerConfigurationForm.tsx               |  4 +--
 .../Pages/Welcome/WelcomeDrawerItem.tsx       |  6 ++--
 .../Pages/Welcome/WelcomePage.tsx             |  6 ++--
 .../ConfigurationWizard/WizardStepper.tsx     |  2 +-
 .../packages/core-app/src/AppScreen/Main.tsx  |  2 +-
 .../core-app/src/AppScreen/RightArea.tsx      |  2 +-
 webapp/packages/core-app/src/Body.tsx         |  2 +-
 .../src/NavigationTree/NavigationTree.tsx     |  8 ++---
 .../NavigationNode/NavigationNode.tsx         |  2 +-
 .../NavigationNodeChildren.tsx                |  2 +-
 .../NavigationTreeNode/NavigationTreeNode.tsx |  3 +-
 .../ConnectionSelector/ConnectionSelector.tsx |  2 +-
 .../packages/core-app/src/TopNavBar/Logo.tsx  |  2 +-
 .../src/TopNavBar/MainMenu/MainMenu.tsx       |  2 +-
 .../src/TopNavBar/shared/TopMenuItem.tsx      |  8 +++--
 .../src/shared/InlineEditor/EditorDialog.tsx  |  4 +--
 .../src/shared/InlineEditor/InlineEditor.tsx  |  6 ++--
 .../NavigationTabsBar/NavigationTabsBar.tsx   |  4 +--
 .../NavigationTabsBar/Tabs/TabHandlerTab.tsx  |  2 +-
 .../LogEntry/LogEntryDetailsDialog.tsx        |  2 +-
 webapp/packages/core-blocks/src/Button.tsx    |  2 +-
 .../core-blocks/src/FormControls/Checkbox.tsx |  2 +-
 .../core-blocks/src/FormControls/Combobox.tsx |  2 +-
 .../src/FormControls/InputField.tsx           |  2 +-
 .../core-blocks/src/FormControls/Radio.tsx    |  6 ++--
 .../src/FormControls/ShadowInput.tsx          |  5 +--
 .../src/FormControls/SubmittingForm.tsx       |  2 +-
 .../core-blocks/src/FormControls/Switch.tsx   |  4 +--
 .../packages/core-blocks/src/IconOrImage.tsx  |  2 +-
 .../core-blocks/src/Icons/CheckCircle.tsx     |  4 +--
 .../core-blocks/src/Icons/Configuration.tsx   |  2 +-
 .../packages/core-blocks/src/Icons/Cross.tsx  |  2 +-
 .../packages/core-blocks/src/Icons/Frown.tsx  |  2 +-
 .../src/ItemList/ItemListSearch.tsx           |  2 +-
 .../core-blocks/src/ItemList/ListItem.tsx     |  2 +-
 .../core-blocks/src/Loader/Loader.tsx         | 10 ++++--
 .../ObjectPropertyInfoForm.tsx                |  4 +--
 .../src/PropertiesTable/PropertiesTable.tsx   |  4 +--
 .../src/PropertiesTable/PropertyItem.tsx      |  6 ++--
 .../src/SanitizedHTML/SanitizedHTML.tsx       |  2 +-
 .../packages/core-blocks/src/Split/Pane.tsx   |  2 +-
 .../packages/core-blocks/src/Split/Split.tsx  |  2 +-
 .../packages/core-blocks/src/StaticImage.tsx  |  2 +-
 .../core-blocks/src/Table/TableItem.tsx       |  2 +-
 .../core-blocks/src/Table/TableItemExpand.tsx |  2 +-
 .../core-blocks/src/Table/TableItemSelect.tsx |  2 +-
 .../packages/core-blocks/src/Tabs/Tab/Tab.tsx |  4 +--
 .../core-blocks/src/Tabs/TabsBox/TabsBox.tsx  |  2 +-
 .../src/Tabs/TabsBox/TabsBoxFromArray.tsx     |  4 +--
 .../Tabs/VerticalTabs/VerticalTabPanel.tsx    |  2 +-
 .../src/Tabs/VerticalTabs/VerticalTabs.tsx    |  2 +-
 .../ConnectionAccess/ConnectionAccess.tsx     | 14 ++++----
 .../ConnectionForm/ConnectionForm.tsx         |  5 ++-
 .../ConnectionForm/Options/Options.tsx        |  4 +--
 .../ConnectionForm/Options/ParametersForm.tsx |  2 +-
 .../Connections/ConnectionsAdministration.tsx |  4 +--
 .../Connections/ConnectionsDrawerItem.tsx     |  4 +--
 .../ConnectionsTable/Connection.tsx           |  4 +--
 .../ConnectionsTable/ConnectionEdit.tsx       |  2 +-
 .../ConnectionsTable/ConnectionsTable.tsx     | 10 +++---
 .../CreateConnection/CreateConnection.tsx     | 12 +++----
 .../CreateConnection/CustomConnection.tsx     |  4 +--
 .../Connections/CreateConnection/Database.tsx |  2 +-
 .../Connections/CreateConnection/Driver.tsx   |  2 +-
 .../CreateConnection/DriverList.tsx           |  4 +--
 .../DatabaseAuthDialog/DBAuthDialogFooter.tsx |  2 +-
 .../DatabaseAuthDialog/DatabaseAuthDialog.tsx |  4 +--
 webapp/packages/core-di/src/IApp.ts           |  2 +-
 webapp/packages/core-di/src/InjectionToken.ts |  4 ++-
 webapp/packages/core-di/src/PluginManifest.ts |  2 +-
 .../packages/core-di/src/entities/Entity.ts   |  6 ++--
 .../packages/core-di/src/inversifyWrapper.ts  |  5 ++-
 .../src/CommonDialog/ConfirmationDialog.tsx   | 10 +++---
 .../src/CommonDialog/DialogsPortal.tsx        |  2 +-
 .../src/Menu/MenuPanel/MenuTrigger.tsx        | 17 ++++-----
 82 files changed, 206 insertions(+), 155 deletions(-)

diff --git a/webapp/.eslintrc.js b/webapp/.eslintrc.js
index 792fc51705..23c6e97778 100644
--- a/webapp/.eslintrc.js
+++ b/webapp/.eslintrc.js
@@ -18,14 +18,17 @@ module.exports = {
     'import/parsers': {
       '@typescript-eslint/parser': ['.ts', '.tsx'],
     },
+
     'import/resolver': {
       typescript: {
         alwaysTryTypes: true,
       },
     },
+
     typescript: {
       directory: './',
     },
+
     react: {
       createClass: 'createReactClass',
       pragma: 'React',
@@ -42,6 +45,39 @@ module.exports = {
     'react/display-name': 'off',
     'react/jsx-no-literals': 'off',
     'react/react-in-jsx-scope': 'off',
+    'react/jsx-max-props-per-line': [1, { "when": "multiline" }],
+    'react/jsx-closing-bracket-location': 'error',
+    'react/jsx-closing-tag-location': 'error',
+    'react/jsx-tag-spacing': ['error', {
+      "closingSlash": "never",
+      "beforeSelfClosing": "always",
+      "afterOpening": "never",
+      "beforeClosing": "never"
+    }],
+    'react/jsx-boolean-value': 'error',
+    'react/jsx-wrap-multilines': ['error', {
+      "declaration": "parens-new-line",
+      "assignment": "parens-new-line",
+      "return": "parens-new-line",
+      "arrow": "parens-new-line",
+      "condition": "parens-new-line",
+      "logical": "parens-new-line",
+      "prop": "parens-new-line"
+    }],
+    'react/self-closing-comp': ["error"],
+    'react/jsx-sort-props': ['error', {
+      "callbacksLast": true,
+      "shorthandLast": true,
+      "ignoreCase": true,
+      "noSortAlphabetically": true,
+      "reservedFirst": true,
+    }],
+    'react/destructuring-assignment': ['error'],
+    'react/jsx-curly-brace-presence': ['error', "never"],
+    'react/jsx-curly-newline': ['error'],
+    'react/jsx-curly-spacing': ['error', { "when": "never", "children": true }],
+    'react/jsx-equals-spacing': ['error', 'never'],
+    'react/jsx-first-prop-new-line': ['warn', 'multiline'],
     'brace-style': 'off', // prefer 1tbs or stroustrup styles, avoid allman style
     'operator-linebreak': 'warn',
     'consistent-return': 'off',
diff --git a/webapp/packages/core-administration/src/Administration/Administration.tsx b/webapp/packages/core-administration/src/Administration/Administration.tsx
index 6b5013bd1a..386e728595 100644
--- a/webapp/packages/core-administration/src/Administration/Administration.tsx
+++ b/webapp/packages/core-administration/src/Administration/Administration.tsx
@@ -88,9 +88,9 @@ export const Administration = observer(function Administration({
               <DrawerItem
                 key={item.name}
                 item={item}
-                onSelect={onItemSelect}
                 configurationWizard={configurationWizard}
                 style={[verticalTabStyles, tabsStyles]}
+                onSelect={onItemSelect}
               />
             ))}
           </TabList>
diff --git a/webapp/packages/core-administration/src/Administration/DrawerItem.tsx b/webapp/packages/core-administration/src/Administration/DrawerItem.tsx
index 73871c441f..21f195a152 100644
--- a/webapp/packages/core-administration/src/Administration/DrawerItem.tsx
+++ b/webapp/packages/core-administration/src/Administration/DrawerItem.tsx
@@ -21,11 +21,13 @@ export const DrawerItem = observer(function DrawerItem({
 
   const disabled = configurationWizard && !configurationWizardService.isStepAvailable(item.name);
 
-  return <Component
-    item={item}
-    onSelect={onSelect}
-    configurationWizard={configurationWizard}
-    style={style}
-    disabled={disabled}
-  />;
+  return (
+    <Component
+      item={item}
+      configurationWizard={configurationWizard}
+      style={style}
+      disabled={disabled}
+      onSelect={onSelect}
+    />
+  );
 });
diff --git a/webapp/packages/core-administration/src/AdministrationScreen/AdministrationScreen.tsx b/webapp/packages/core-administration/src/AdministrationScreen/AdministrationScreen.tsx
index 0a8341076a..a916bad7b6 100644
--- a/webapp/packages/core-administration/src/AdministrationScreen/AdministrationScreen.tsx
+++ b/webapp/packages/core-administration/src/AdministrationScreen/AdministrationScreen.tsx
@@ -21,7 +21,7 @@ import { AdministrationTopAppBar } from './AdministrationTopAppBar/Administratio
 export const AdministrationScreen = observer(function AdministrationScreen() {
   const administrationScreenService = useService(AdministrationScreenService);
   if (!usePermission(EAdminPermission.admin)) {
-    return <Translate token='root_permission_denied'/>;
+    return <Translate token='root_permission_denied' />;
   }
 
   const handleSelect = useCallback(
diff --git a/webapp/packages/core-administration/src/AdministrationScreen/ConfigurationWizard/ConfigurationWizardScreen.tsx b/webapp/packages/core-administration/src/AdministrationScreen/ConfigurationWizard/ConfigurationWizardScreen.tsx
index 9766b3b8f6..83da8fbb7d 100644
--- a/webapp/packages/core-administration/src/AdministrationScreen/ConfigurationWizard/ConfigurationWizardScreen.tsx
+++ b/webapp/packages/core-administration/src/AdministrationScreen/ConfigurationWizard/ConfigurationWizardScreen.tsx
@@ -24,7 +24,7 @@ export const ConfigurationWizardScreen = observer(function ConfigurationWizardSc
   const administrationItemService = useService(AdministrationItemService);
   const administrationScreenService = useService(AdministrationScreenService);
   if (!usePermission(EAdminPermission.admin)) {
-    return <Translate token='root_permission_denied'/>;
+    return <Translate token='root_permission_denied' />;
   }
 
   const handleSelect = useCallback(
@@ -39,10 +39,10 @@ export const ConfigurationWizardScreen = observer(function ConfigurationWizardSc
     <>
       <WizardTopAppBar />
       <Administration
-        configurationWizard={true}
         activeItem={administrationScreenService.activeItem}
         activeItemSub={administrationScreenService.activeItemSub}
         activeItemSubParam={administrationScreenService.activeItemSubParam}
+        configurationWizard
         onItemSelect={handleSelect}
       >
         <WizardStepper />
diff --git a/webapp/packages/core-administration/src/AdministrationScreen/ConfigurationWizard/Pages/Finish/FinishPageDrawerItem.tsx b/webapp/packages/core-administration/src/AdministrationScreen/ConfigurationWizard/Pages/Finish/FinishPageDrawerItem.tsx
index 1b8f49fe40..31b4fc3be8 100644
--- a/webapp/packages/core-administration/src/AdministrationScreen/ConfigurationWizard/Pages/Finish/FinishPageDrawerItem.tsx
+++ b/webapp/packages/core-administration/src/AdministrationScreen/ConfigurationWizard/Pages/Finish/FinishPageDrawerItem.tsx
@@ -25,12 +25,12 @@ export const FinishPageDrawerItem = observer(function FinishPageDrawerItem({
   return styled(useStyles(...style))(
     <Tab
       tabId={item.name}
-      onOpen={() => onSelect(item.name)}
       disabled={disabled
         || (item.configurationWizardOptions?.isDisabled && item.configurationWizardOptions.isDisabled())}
+      onOpen={() => onSelect(item.name)}
     >
-      <TabIcon icon='/icons/confirmation.svg' viewBox='0 0 16 16'/>
-      <TabTitle><Translate token='administration_configuration_wizard_finish'/></TabTitle>
+      <TabIcon icon='/icons/confirmation.svg' viewBox='0 0 16 16' />
+      <TabTitle><Translate token='administration_configuration_wizard_finish' /></TabTitle>
     </Tab>
   );
 });
diff --git a/webapp/packages/core-administration/src/AdministrationScreen/ConfigurationWizard/Pages/ServerConfiguration/ServerConfigurationDrawerItem.tsx b/webapp/packages/core-administration/src/AdministrationScreen/ConfigurationWizard/Pages/ServerConfiguration/ServerConfigurationDrawerItem.tsx
index a3dceb7a41..63af1ae1b3 100644
--- a/webapp/packages/core-administration/src/AdministrationScreen/ConfigurationWizard/Pages/ServerConfiguration/ServerConfigurationDrawerItem.tsx
+++ b/webapp/packages/core-administration/src/AdministrationScreen/ConfigurationWizard/Pages/ServerConfiguration/ServerConfigurationDrawerItem.tsx
@@ -18,9 +18,9 @@ export function ServerConfigurationDrawerItem({
   item, onSelect, style, disabled,
 }: AdministrationItemDrawerProps) {
   return styled(useStyles(...style))(
-    <Tab tabId={item.name} onOpen={() => onSelect(item.name)} disabled={disabled}>
+    <Tab tabId={item.name} disabled={disabled} onOpen={() => onSelect(item.name)}>
       <TabIcon icon='/icons/cog-outline.svg' />
-      <TabTitle><Translate token='administration_configuration_wizard_configuration'/></TabTitle>
+      <TabTitle><Translate token='administration_configuration_wizard_configuration' /></TabTitle>
     </Tab>
   );
 }
diff --git a/webapp/packages/core-administration/src/AdministrationScreen/ConfigurationWizard/Pages/ServerConfiguration/ServerConfigurationForm.tsx b/webapp/packages/core-administration/src/AdministrationScreen/ConfigurationWizard/Pages/ServerConfiguration/ServerConfigurationForm.tsx
index 23c4995242..29228a173a 100644
--- a/webapp/packages/core-administration/src/AdministrationScreen/ConfigurationWizard/Pages/ServerConfiguration/ServerConfigurationForm.tsx
+++ b/webapp/packages/core-administration/src/AdministrationScreen/ConfigurationWizard/Pages/ServerConfiguration/ServerConfigurationForm.tsx
@@ -70,7 +70,7 @@ export const ServerConfigurationForm = observer(function ServerConfigurationForm
   }, [service]);
 
   return styled(useStyles(formStyles, boxStyles))(
-    <SubmittingForm onSubmit={onSave} name='server_config' ref={focusedRef}>
+    <SubmittingForm ref={focusedRef} name='server_config' onSubmit={onSave}>
       <box as="div">
         <box-element as='div'>
           <group as="div">
@@ -135,9 +135,9 @@ export const ServerConfigurationForm = observer(function ServerConfigurationForm
               name="authenticationEnabled"
               state={serverConfig}
               description={translate('administration_configuration_wizard_configuration_authentication_description')}
-              onChange={onChange}
               mod={['primary']}
               long
+              onChange={onChange}
             >
               {translate('administration_configuration_wizard_configuration_authentication')}
             </Switch>
diff --git a/webapp/packages/core-administration/src/AdministrationScreen/ConfigurationWizard/Pages/Welcome/WelcomeDrawerItem.tsx b/webapp/packages/core-administration/src/AdministrationScreen/ConfigurationWizard/Pages/Welcome/WelcomeDrawerItem.tsx
index ea177acf35..df64b42109 100644
--- a/webapp/packages/core-administration/src/AdministrationScreen/ConfigurationWizard/Pages/Welcome/WelcomeDrawerItem.tsx
+++ b/webapp/packages/core-administration/src/AdministrationScreen/ConfigurationWizard/Pages/Welcome/WelcomeDrawerItem.tsx
@@ -18,9 +18,9 @@ export function WelcomeDrawerItem({
   item, onSelect, style, disabled,
 }: AdministrationItemDrawerProps) {
   return styled(useStyles(...style))(
-    <Tab tabId={item.name} onOpen={() => onSelect(item.name)} disabled={disabled}>
-      <TabIcon icon='/icons/welcome_bold.svg' viewBox='0 0 16 16'/>
-      <TabTitle><Translate token='administration_configuration_wizard_welcome'/></TabTitle>
+    <Tab tabId={item.name} disabled={disabled} onOpen={() => onSelect(item.name)}>
+      <TabIcon icon='/icons/welcome_bold.svg' viewBox='0 0 16 16' />
+      <TabTitle><Translate token='administration_configuration_wizard_welcome' /></TabTitle>
     </Tab>
   );
 }
diff --git a/webapp/packages/core-administration/src/AdministrationScreen/ConfigurationWizard/Pages/Welcome/WelcomePage.tsx b/webapp/packages/core-administration/src/AdministrationScreen/ConfigurationWizard/Pages/Welcome/WelcomePage.tsx
index d8ab1c3ab5..c161b8791e 100644
--- a/webapp/packages/core-administration/src/AdministrationScreen/ConfigurationWizard/Pages/Welcome/WelcomePage.tsx
+++ b/webapp/packages/core-administration/src/AdministrationScreen/ConfigurationWizard/Pages/Welcome/WelcomePage.tsx
@@ -52,9 +52,9 @@ export function WelcomePage() {
     <layout-grid as="div">
       <layout-grid-inner as="div">
         <layout-grid-cell as='div' {...use({ span: 12 })}>
-          <h3><Translate token='administration_configuration_wizard_welcome_title'/></h3>
-          <p><Translate token='administration_configuration_wizard_welcome_message'/></p>
-          <note as='div'><Translate token='administration_configuration_wizard_welcome_note'/></note>
+          <h3><Translate token='administration_configuration_wizard_welcome_title' /></h3>
+          <p><Translate token='administration_configuration_wizard_welcome_message' /></p>
+          <note as='div'><Translate token='administration_configuration_wizard_welcome_note' /></note>
         </layout-grid-cell>
       </layout-grid-inner>
     </layout-grid>
diff --git a/webapp/packages/core-administration/src/AdministrationScreen/ConfigurationWizard/WizardStepper.tsx b/webapp/packages/core-administration/src/AdministrationScreen/ConfigurationWizard/WizardStepper.tsx
index fc42b83bbb..c139df892c 100644
--- a/webapp/packages/core-administration/src/AdministrationScreen/ConfigurationWizard/WizardStepper.tsx
+++ b/webapp/packages/core-administration/src/AdministrationScreen/ConfigurationWizard/WizardStepper.tsx
@@ -70,8 +70,8 @@ export const WizardStepper = observer(function WizardStepper() {
         <Button
           type="button"
           mod={['outlined']}
-          onClick={() => service.back()}
           disabled={service.currentStepIndex === 0}
+          onClick={() => service.back()}
         >
           {translate('ui_stepper_back')}
         </Button>
diff --git a/webapp/packages/core-app/src/AppScreen/Main.tsx b/webapp/packages/core-app/src/AppScreen/Main.tsx
index 8e71148270..a4f4554ddc 100644
--- a/webapp/packages/core-app/src/AppScreen/Main.tsx
+++ b/webapp/packages/core-app/src/AppScreen/Main.tsx
@@ -46,7 +46,7 @@ export function Main() {
   return styled(useStyles(mainStyles, splitStyles))(
     <space as="main">
       <Split sticky={30}>
-        <Pane main={true}>
+        <Pane main>
           <NavigationTree />
         </Pane>
         <ResizerControls />
diff --git a/webapp/packages/core-app/src/AppScreen/RightArea.tsx b/webapp/packages/core-app/src/AppScreen/RightArea.tsx
index 2363eb5969..ba158aa6f9 100644
--- a/webapp/packages/core-app/src/AppScreen/RightArea.tsx
+++ b/webapp/packages/core-app/src/AppScreen/RightArea.tsx
@@ -46,7 +46,7 @@ export const RightArea = observer(function RightArea() {
         <NavigationTabsBar />
       </Pane>
       {controller.isActive && <ResizerControls />}
-      <Pane main={true}>
+      <Pane main>
         <LogViewTab />
       </Pane>
     </Split>
diff --git a/webapp/packages/core-app/src/Body.tsx b/webapp/packages/core-app/src/Body.tsx
index 9d7eb46a7f..ffdae7df5b 100644
--- a/webapp/packages/core-app/src/Body.tsx
+++ b/webapp/packages/core-app/src/Body.tsx
@@ -37,7 +37,7 @@ export const Body = observer(function Body() {
   });
 
   return styled(useStyles(bodyStyles))(
-    <theme as="div" ref={ref}>
+    <theme ref={ref} as="div">
       {Screen && <Screen />}
       <DialogsPortal />
       <Notifications />
diff --git a/webapp/packages/core-app/src/NavigationTree/NavigationTree.tsx b/webapp/packages/core-app/src/NavigationTree/NavigationTree.tsx
index 18a25f5aad..48c8a99f15 100644
--- a/webapp/packages/core-app/src/NavigationTree/NavigationTree.tsx
+++ b/webapp/packages/core-app/src/NavigationTree/NavigationTree.tsx
@@ -59,7 +59,7 @@ export const NavigationTree = observer(function NavigationTree() {
     if (nodeChildren.isLoading) {
       return styled(navigationTreeStyles)(
         <center as="div">
-          <tree as="div"><Loader/></tree>
+          <tree as="div"><Loader /></tree>
         </center>
       );
     }
@@ -68,7 +68,7 @@ export const NavigationTree = observer(function NavigationTree() {
       <center as="div">
         <tree as="div">
           <message as="div">
-            No connections.<br/>
+            No connections.<br />
             Use the top menu to setup connection to your database.
           </message>
         </tree>
@@ -77,9 +77,9 @@ export const NavigationTree = observer(function NavigationTree() {
   }
 
   return styled(navigationTreeStyles)(
-    <tree as="div" tabIndex={0} ref={ref}>
+    <tree ref={ref} as="div" tabIndex={0}>
       {nodeChildren.children.map(id => (
-        <NavigationTreeNode key={id} id={id} parentId={ROOT_NODE_PATH}/>
+        <NavigationTreeNode key={id} id={id} parentId={ROOT_NODE_PATH} />
       ))}
     </tree>
   );
diff --git a/webapp/packages/core-app/src/NavigationTree/NavigationTreeNode/NavigationNode/NavigationNode.tsx b/webapp/packages/core-app/src/NavigationTree/NavigationTreeNode/NavigationNode/NavigationNode.tsx
index 310d361b55..5f3b6a161f 100644
--- a/webapp/packages/core-app/src/NavigationTree/NavigationTreeNode/NavigationNode/NavigationNode.tsx
+++ b/webapp/packages/core-app/src/NavigationTree/NavigationTreeNode/NavigationNode/NavigationNode.tsx
@@ -75,10 +75,10 @@ export const NavigationNode = observer(function NavigationNode({
         <control
           tabIndex={0}
           aria-selected={controller.isSelected}
+          as="div"
           onClick={handleSelect}
           onKeyDown={handleEnter}
           onDoubleClick={controller.handleDoubleClick}
-          as="div"
         >
           <arrow as="div" hidden={!controller.isExpandable} onClick={handleExpand}>
             {controller.isLoading && <Loader small />}
diff --git a/webapp/packages/core-app/src/NavigationTree/NavigationTreeNode/NavigationNodeChildren.tsx b/webapp/packages/core-app/src/NavigationTree/NavigationTreeNode/NavigationNodeChildren.tsx
index 30c6396598..f16d4c286a 100644
--- a/webapp/packages/core-app/src/NavigationTree/NavigationTreeNode/NavigationNodeChildren.tsx
+++ b/webapp/packages/core-app/src/NavigationTree/NavigationTreeNode/NavigationNodeChildren.tsx
@@ -33,7 +33,7 @@ export const NavigationNodeChildren = observer(function NavigationNodeChildren({
   return (
     <>
       {children.map(id => (
-        <NavigationNodeChild id={id} parentId={parentId} key={id} />
+        <NavigationNodeChild key={id} id={id} parentId={parentId} />
       ))}
     </>
   );
diff --git a/webapp/packages/core-app/src/NavigationTree/NavigationTreeNode/NavigationTreeNode.tsx b/webapp/packages/core-app/src/NavigationTree/NavigationTreeNode/NavigationTreeNode.tsx
index 7f7cbe6162..1fd94db2d5 100644
--- a/webapp/packages/core-app/src/NavigationTree/NavigationTreeNode/NavigationTreeNode.tsx
+++ b/webapp/packages/core-app/src/NavigationTree/NavigationTreeNode/NavigationTreeNode.tsx
@@ -33,7 +33,8 @@ export const NavigationTreeNode = observer(function NavigationTreeNodeFn({
     <NavigationNode node={node} isLoaded={isLoaded} isLoading={isLoading} isOutdated={isOutdated}>
       <NavigationNodeChildren
         parentId={id}
-        component={NavigationTreeNode} />
+        component={NavigationTreeNode}
+      />
     </NavigationNode>
   );
 });
diff --git a/webapp/packages/core-app/src/TopNavBar/ConnectionSchemaManager/ConnectionSelector/ConnectionSelector.tsx b/webapp/packages/core-app/src/TopNavBar/ConnectionSchemaManager/ConnectionSelector/ConnectionSelector.tsx
index 2d572d4028..0db125c8e9 100644
--- a/webapp/packages/core-app/src/TopNavBar/ConnectionSchemaManager/ConnectionSelector/ConnectionSelector.tsx
+++ b/webapp/packages/core-app/src/TopNavBar/ConnectionSchemaManager/ConnectionSelector/ConnectionSelector.tsx
@@ -53,7 +53,7 @@ export const ConnectionSelector = observer(function ConnectionSelector() {
 
   return styled(useStyles(style))(
     <connection-selector as="div" {...use({ isVisible: controller.isConnectionSelectorVisible })}>
-      <ConnectionMenu menuItem={controller.connectionMenu} style={[menuStyles, connectionMenu]}/>
+      <ConnectionMenu menuItem={controller.connectionMenu} style={[menuStyles, connectionMenu]} />
       {controller.isObjectContainerSelectorVisible && (
         <SchemaOrCatalogMenu
           menuItem={controller.objectContainerMenu}
diff --git a/webapp/packages/core-app/src/TopNavBar/Logo.tsx b/webapp/packages/core-app/src/TopNavBar/Logo.tsx
index c40053b3c5..307c2e52ea 100644
--- a/webapp/packages/core-app/src/TopNavBar/Logo.tsx
+++ b/webapp/packages/core-app/src/TopNavBar/Logo.tsx
@@ -21,5 +21,5 @@ export const Logo = observer(function Logo() {
 
   const title = `Frontend: ${version}\nBackend: ${serverService.config.data?.version}`;
 
-  return <AppLogo title={title} onClick={() => screenService.navigateToRoot()}/>;
+  return <AppLogo title={title} onClick={() => screenService.navigateToRoot()} />;
 });
diff --git a/webapp/packages/core-app/src/TopNavBar/MainMenu/MainMenu.tsx b/webapp/packages/core-app/src/TopNavBar/MainMenu/MainMenu.tsx
index 40bbb1fabf..949eab1aae 100644
--- a/webapp/packages/core-app/src/TopNavBar/MainMenu/MainMenu.tsx
+++ b/webapp/packages/core-app/src/TopNavBar/MainMenu/MainMenu.tsx
@@ -33,7 +33,7 @@ export const MainMenu = observer(function MainMenu() {
   return styled(styles)(
     <menu-wrapper as="div">
       {mainMenuService.getMainMenu().map((topItem, i) => (
-        <TopMenuItem key={i} menuItem={topItem}/>
+        <TopMenuItem key={i} menuItem={topItem} />
       ))}
     </menu-wrapper>
   );
diff --git a/webapp/packages/core-app/src/TopNavBar/shared/TopMenuItem.tsx b/webapp/packages/core-app/src/TopNavBar/shared/TopMenuItem.tsx
index 9fdcc77bc9..13898b5e96 100644
--- a/webapp/packages/core-app/src/TopNavBar/shared/TopMenuItem.tsx
+++ b/webapp/packages/core-app/src/TopNavBar/shared/TopMenuItem.tsx
@@ -56,9 +56,11 @@ export const TopMenuItem = observer(function TopMenuItem({ menuItem, style = [],
   if (!menuItem.panel) {
     return styled(useStyles(buttonStyle))(
       <Button
-        as="button" {...props}
+        as="button"
+        {...props}
         disabled={menuItem.isDisabled}
-        onClick={() => menuItem.onClick && menuItem.onClick()}>
+        onClick={() => menuItem.onClick && menuItem.onClick()}
+      >
         <div>{translate(menuItem.title)}</div>
       </Button>
     );
@@ -70,7 +72,7 @@ export const TopMenuItem = observer(function TopMenuItem({ menuItem, style = [],
       panel={menuItem.panel}
       disabled={menuItem.isDisabled}
       style={[...style, topMenuStyles]}
-      placement={'bottom-end'}
+      placement="bottom-end"
     >
       {menuItem.icon && (
         <menu-trigger-icon as="div">
diff --git a/webapp/packages/core-app/src/shared/InlineEditor/EditorDialog.tsx b/webapp/packages/core-app/src/shared/InlineEditor/EditorDialog.tsx
index c14a12a37d..302bc515e4 100644
--- a/webapp/packages/core-app/src/shared/InlineEditor/EditorDialog.tsx
+++ b/webapp/packages/core-app/src/shared/InlineEditor/EditorDialog.tsx
@@ -51,7 +51,6 @@ export const EditorDialog: DialogComponent<string, string> = observer(
     return styled(useStyles(styles))(
       <CommonDialogWrapper
         title={translate('app_shared_inlineEditor_dialog_title')}
-        onReject={props.rejectDialog}
         footer={(
           <controls as="div">
             <Button type="button" mod={['unelevated']} onClick={handleApply}>
@@ -62,8 +61,9 @@ export const EditorDialog: DialogComponent<string, string> = observer(
             </Button>
           </controls>
         )}
+        onReject={props.rejectDialog}
       >
-        <textarea value={value} onChange={handleChange} ref={textareaRef}/>
+        <textarea ref={textareaRef} value={value} onChange={handleChange} />
       </CommonDialogWrapper>
     );
   }
diff --git a/webapp/packages/core-app/src/shared/InlineEditor/InlineEditor.tsx b/webapp/packages/core-app/src/shared/InlineEditor/InlineEditor.tsx
index 6f3ca63a5d..96fb2fea6b 100644
--- a/webapp/packages/core-app/src/shared/InlineEditor/InlineEditor.tsx
+++ b/webapp/packages/core-app/src/shared/InlineEditor/InlineEditor.tsx
@@ -96,15 +96,15 @@ export const InlineEditor = observer(function InlineEditor({
     <editor as="div" className={className}>
       <editor-container as="div">
         <input
+          ref={inputRef}
           name={name}
           type={type}
           value={value}
           tabIndex={tabIndex}
-          onChange={handleChange}
-          onKeyDown={handleKeyDown}
-          ref={inputRef}
           placeholder={placeholder}
           autoComplete="off"
+          onChange={handleChange}
+          onKeyDown={handleKeyDown}
         />
       </editor-container>
       <editor-actions as="div" {...use({ position: controlsPosition })}>
diff --git a/webapp/packages/core-app/src/shared/NavigationTabs/NavigationTabsBar/NavigationTabsBar.tsx b/webapp/packages/core-app/src/shared/NavigationTabs/NavigationTabsBar/NavigationTabsBar.tsx
index 1435b95a9c..c010a04911 100644
--- a/webapp/packages/core-app/src/shared/NavigationTabs/NavigationTabsBar/NavigationTabsBar.tsx
+++ b/webapp/packages/core-app/src/shared/NavigationTabs/NavigationTabsBar/NavigationTabsBar.tsx
@@ -58,13 +58,13 @@ export const NavigationTabsBar = observer(function NavigationTabsBar() {
 
   return styled(style)(
     <TabsBox
+      ref={ref}
       currentTabId={navigation.currentTabId}
       tabs={navigation.tabIdList.map(tabId => (
-        <TabHandlerTab key={tabId} tabId={tabId} onSelect={handleSelect} onClose={handleClose} style={stylesArray}/>
+        <TabHandlerTab key={tabId} tabId={tabId} style={stylesArray} onSelect={handleSelect} onClose={handleClose} />
       ))}
       style={stylesArray}
       tabIndex={0}
-      ref={ref}
     >
       {navigation.tabIdList.map(tabId => (
         <TabPanel key={tabId} tabId={tabId}>
diff --git a/webapp/packages/core-app/src/shared/NavigationTabs/NavigationTabsBar/Tabs/TabHandlerTab.tsx b/webapp/packages/core-app/src/shared/NavigationTabs/NavigationTabsBar/Tabs/TabHandlerTab.tsx
index 1966f88652..c82ba5af6c 100644
--- a/webapp/packages/core-app/src/shared/NavigationTabs/NavigationTabsBar/Tabs/TabHandlerTab.tsx
+++ b/webapp/packages/core-app/src/shared/NavigationTabs/NavigationTabsBar/Tabs/TabHandlerTab.tsx
@@ -27,5 +27,5 @@ export const TabHandlerTab = observer(function TabHandlerTab({
   const handler = useTabHandler(tab.handlerId);
 
   const TabHandlerTab = handler.getTabComponent();
-  return <TabHandlerTab tab={tab} handler={handler} onSelect={onSelect} onClose={onClose} style={style} />;
+  return <TabHandlerTab tab={tab} handler={handler} style={style} onSelect={onSelect} onClose={onClose} />;
 });
diff --git a/webapp/packages/core-app/src/shared/ToolsPanel/LogViewTab/LogEntry/LogEntryDetailsDialog.tsx b/webapp/packages/core-app/src/shared/ToolsPanel/LogViewTab/LogEntry/LogEntryDetailsDialog.tsx
index e2ee88be36..5f25b6b329 100644
--- a/webapp/packages/core-app/src/shared/ToolsPanel/LogViewTab/LogEntry/LogEntryDetailsDialog.tsx
+++ b/webapp/packages/core-app/src/shared/ToolsPanel/LogViewTab/LogEntry/LogEntryDetailsDialog.tsx
@@ -39,7 +39,7 @@ export const LogEntryDetailsDialog: DialogComponent<ILogEntry, null> = observer(
         <message as="div">
           {props.payload.message}
         </message>
-        <textarea value={props.payload.stackTrace} readOnly/>
+        <textarea value={props.payload.stackTrace} readOnly />
       </CommonDialogWrapper>
     );
   }
diff --git a/webapp/packages/core-blocks/src/Button.tsx b/webapp/packages/core-blocks/src/Button.tsx
index 6498f0c772..95954dad09 100644
--- a/webapp/packages/core-blocks/src/Button.tsx
+++ b/webapp/packages/core-blocks/src/Button.tsx
@@ -75,6 +75,6 @@ export function Button({
 }: ButtonProps) {
   const Button = tag;
   return styled(useStyles(buttonStyles, ...(mod || []).map(mod => buttonMod[mod])))(
-    <Button {...rest}><ripple as="div"/>{children}</Button>
+    <Button {...rest}><ripple as="div" />{children}</Button>
   );
 }
diff --git a/webapp/packages/core-blocks/src/FormControls/Checkbox.tsx b/webapp/packages/core-blocks/src/FormControls/Checkbox.tsx
index 3204b15448..02f5c770b0 100644
--- a/webapp/packages/core-blocks/src/FormControls/Checkbox.tsx
+++ b/webapp/packages/core-blocks/src/FormControls/Checkbox.tsx
@@ -96,8 +96,8 @@ export const Checkbox: CheckboxType = observer(function Checkbox({
           name={name}
           id={value || name}
           type='checkbox'
-          onChange={handleChange}
           checked={checked}
+          onChange={handleChange}
           {...use({ mod })}
         />
         <label htmlFor={value || name}>{checkboxLabel}</label>
diff --git a/webapp/packages/core-blocks/src/FormControls/Combobox.tsx b/webapp/packages/core-blocks/src/FormControls/Combobox.tsx
index 36bcf8a562..5dd332f886 100644
--- a/webapp/packages/core-blocks/src/FormControls/Combobox.tsx
+++ b/webapp/packages/core-blocks/src/FormControls/Combobox.tsx
@@ -210,9 +210,9 @@ export const Combobox: ComboboxType = observer(function Combobox({
         <input
           ref={ref}
           name={name}
-          onChange={handleChange}
           value={selectedItem ? valueSelector(selectedItem) : searchValue}
           readOnly={!!selectedItem || readOnly}
+          onChange={handleChange}
           {...use({ mod })}
           {...rest}
         />
diff --git a/webapp/packages/core-blocks/src/FormControls/InputField.tsx b/webapp/packages/core-blocks/src/FormControls/InputField.tsx
index 767ebc2542..b874c22121 100644
--- a/webapp/packages/core-blocks/src/FormControls/InputField.tsx
+++ b/webapp/packages/core-blocks/src/FormControls/InputField.tsx
@@ -74,9 +74,9 @@ export const InputField: InputFieldType = observer(function InputField({
       <field-label as='label'>{children} {required && '*'}</field-label>
       <input
         {...rest}
-        onChange={handleChange}
         name={name}
         value={value}
+        onChange={handleChange}
         {...use({ mod })}
         required={required}
       />
diff --git a/webapp/packages/core-blocks/src/FormControls/Radio.tsx b/webapp/packages/core-blocks/src/FormControls/Radio.tsx
index 41bbedda1b..fa659178d6 100644
--- a/webapp/packages/core-blocks/src/FormControls/Radio.tsx
+++ b/webapp/packages/core-blocks/src/FormControls/Radio.tsx
@@ -144,10 +144,10 @@ export const Radio: RadioType = observer(function Radio({
           onChange={handleChange}
         />
         <radio-background as="div">
-          <radio-outer-circle as="div"/>
-          <radio-inner-circle as="div"/>
+          <radio-outer-circle as="div" />
+          <radio-inner-circle as="div" />
         </radio-background>
-        <radio-ripple as="div"/>
+        <radio-ripple as="div" />
       </radio>
       <label htmlFor={id}>{children}</label>
     </field>
diff --git a/webapp/packages/core-blocks/src/FormControls/ShadowInput.tsx b/webapp/packages/core-blocks/src/FormControls/ShadowInput.tsx
index fa8aa29561..cb06487f92 100644
--- a/webapp/packages/core-blocks/src/FormControls/ShadowInput.tsx
+++ b/webapp/packages/core-blocks/src/FormControls/ShadowInput.tsx
@@ -21,9 +21,10 @@ export const ShadowInput = React.forwardRef(function ShadowInput({
 }: ShadowInputProps, ref: React.Ref<HTMLInputElement>) {
   return (
     <input
+      ref={ref}
       value={children}
       onChange={e => onChange && onChange(e.target.value)}
-      ref={ref}
-      {...rest}/>
+      {...rest}
+    />
   );
 });
diff --git a/webapp/packages/core-blocks/src/FormControls/SubmittingForm.tsx b/webapp/packages/core-blocks/src/FormControls/SubmittingForm.tsx
index 0a26d69d43..4d2b3fd5b9 100644
--- a/webapp/packages/core-blocks/src/FormControls/SubmittingForm.tsx
+++ b/webapp/packages/core-blocks/src/FormControls/SubmittingForm.tsx
@@ -33,7 +33,7 @@ export const SubmittingForm = forwardRef<HTMLFormElement, FormDetailedProps>(fun
   const context = useMemo(() => ({ onChange }), [onChange]);
 
   return (
-    <form {...rest} onSubmit={handleSubmit} ref={ref}>
+    <form {...rest} ref={ref} onSubmit={handleSubmit}>
       <FormContext.Provider value={context}>
         {children}
       </FormContext.Provider>
diff --git a/webapp/packages/core-blocks/src/FormControls/Switch.tsx b/webapp/packages/core-blocks/src/FormControls/Switch.tsx
index 1a5203fc0d..4ce2823b0a 100644
--- a/webapp/packages/core-blocks/src/FormControls/Switch.tsx
+++ b/webapp/packages/core-blocks/src/FormControls/Switch.tsx
@@ -139,7 +139,7 @@ export const Switch: SwitchType = observer(function Switch({
       <field-label as="div">{children}</field-label>
       <switch-control as='div'>
         <switch-control-track as='div' />
-        <switch-control-underlay as='div' >
+        <switch-control-underlay as='div'>
           <switch-control-thumb as='div' />
           <switch-input
             as='input'
@@ -147,10 +147,10 @@ export const Switch: SwitchType = observer(function Switch({
             type="checkbox"
             id={id}
             role="switch"
-            onChange={handleChange}
             aria-checked={checked}
             checked={checked}
             disabled={disabled}
+            onChange={handleChange}
           />
         </switch-control-underlay>
       </switch-control>
diff --git a/webapp/packages/core-blocks/src/IconOrImage.tsx b/webapp/packages/core-blocks/src/IconOrImage.tsx
index b4def4e121..c6762435a4 100644
--- a/webapp/packages/core-blocks/src/IconOrImage.tsx
+++ b/webapp/packages/core-blocks/src/IconOrImage.tsx
@@ -25,7 +25,7 @@ export const IconOrImage = function IconOrImage({ icon, className, viewBox }: Ic
   );
 
   if (isStaticIcon) {
-    return <StaticImage icon={icon} className={className}/>;
+    return <StaticImage icon={icon} className={className} />;
   }
 
   return <Icon name={icon} className={className} viewBox={viewBox || '0 0 32 32'} />;
diff --git a/webapp/packages/core-blocks/src/Icons/CheckCircle.tsx b/webapp/packages/core-blocks/src/Icons/CheckCircle.tsx
index b6ece21c29..1984990056 100644
--- a/webapp/packages/core-blocks/src/Icons/CheckCircle.tsx
+++ b/webapp/packages/core-blocks/src/Icons/CheckCircle.tsx
@@ -20,8 +20,8 @@ export function CheckCircle(props: SVGAttributes<any>) {
       focusable="false"
       {...props}
     >
-      <path d="M699 353h-46.9c-10.2 0-19.9 4.9-25.9 13.3L469 584.3l-71.2-98.8c-6-8.3-15.6-13.3-25.9-13.3H325c-6.5 0-10.3 7.4-6.5 12.7l124.6 172.8a31.8 31.8 0 0 0 51.7 0l210.6-292c3.9-5.3.1-12.7-6.4-12.7z"></path>
-      <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path>
+      <path d="M699 353h-46.9c-10.2 0-19.9 4.9-25.9 13.3L469 584.3l-71.2-98.8c-6-8.3-15.6-13.3-25.9-13.3H325c-6.5 0-10.3 7.4-6.5 12.7l124.6 172.8a31.8 31.8 0 0 0 51.7 0l210.6-292c3.9-5.3.1-12.7-6.4-12.7z" />
+      <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" />
     </svg>
   );
 }
diff --git a/webapp/packages/core-blocks/src/Icons/Configuration.tsx b/webapp/packages/core-blocks/src/Icons/Configuration.tsx
index 4b88ef945d..424c46a8d6 100644
--- a/webapp/packages/core-blocks/src/Icons/Configuration.tsx
+++ b/webapp/packages/core-blocks/src/Icons/Configuration.tsx
@@ -22,7 +22,7 @@ export function Configuration(props: SVGAttributes<any>) {
         d="M14.5931,9.7513 C17.4881,9.7513 19.8431,12.1063 19.8431,15.0013 C19.8431,17.8963 17.4881,20.2513 14.5931,20.2513 C11.6981,20.2513 9.3431,17.8963 9.3431,15.0013 C9.3431,12.1063 11.6981,9.7513 14.5931,9.7513 L14.5931,9.7513 Z M3.4481,13.5313 C3.3891,14.0113 3.3441,14.5063 3.3441,15.0013 C3.3441,15.4963 3.3891,15.9913 3.4481,16.4713 L0.2841,18.9453 C-0.0009,19.1703 -0.0759,19.5753 0.1041,19.9053 L3.1041,25.0953 C3.2841,25.4253 3.6891,25.5453 4.0191,25.4253 L7.7531,23.9253 C8.5331,24.5253 9.3731,25.0203 10.2881,25.3953 L10.8581,29.3703 C10.9031,29.7303 11.2181,30.0003 11.5931,30.0003 L17.5931,30.0003 C17.9681,30.0003 18.2821,29.7303 18.3271,29.3703 L18.8981,25.3953 C19.8131,25.0203 20.6531,24.5103 21.4331,23.9253 L25.1671,25.4253 C25.5121,25.5603 25.9031,25.4253 26.0821,25.0953 L29.0821,19.9053 C29.2621,19.5753 29.1871,19.1703 28.9031,18.9453 L25.7381,16.4713 C25.7971,15.9913 25.8421,15.5113 25.8421,15.0013 C25.8421,14.4913 25.7971,14.0113 25.7381,13.5313 L28.9031,11.0563 C29.1871,10.8313 29.2621,10.4263 29.0821,10.0963 L26.0821,4.9063 C25.9031,4.5763 25.4971,4.4563 25.1671,4.5763 L21.4331,6.0763 C20.6531,5.4763 19.8131,4.9813 18.8981,4.6063 L18.3271,0.6313 C18.2821,0.2723 17.9681,0.0013 17.5931,0.0013 L11.5931,0.0013 C11.2181,0.0013 10.9031,0.2723 10.8581,0.6313 L10.2881,4.6063 C9.3731,4.9813 8.5331,5.4913 7.7531,6.0763 L4.0191,4.5763 C3.6741,4.4413 3.2841,4.5763 3.1041,4.9063 L0.1041,10.0963 C-0.0909,10.4263 -0.0009,10.8313 0.2841,11.0563 L3.4481,13.5313 Z"
         fill="#338ECC"
         className="icon-fill"
-      ></path>
+      />
     </svg>
   );
 }
diff --git a/webapp/packages/core-blocks/src/Icons/Cross.tsx b/webapp/packages/core-blocks/src/Icons/Cross.tsx
index 5c49301958..735cab59c4 100644
--- a/webapp/packages/core-blocks/src/Icons/Cross.tsx
+++ b/webapp/packages/core-blocks/src/Icons/Cross.tsx
@@ -20,7 +20,7 @@ export function Cross(props: SVGAttributes<any>) {
       focusable="false"
       {...props}
     >
-      <path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path>
+      <path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z" />
     </svg>
   );
 }
diff --git a/webapp/packages/core-blocks/src/Icons/Frown.tsx b/webapp/packages/core-blocks/src/Icons/Frown.tsx
index d1335fd7b2..ef51b36d0d 100644
--- a/webapp/packages/core-blocks/src/Icons/Frown.tsx
+++ b/webapp/packages/core-blocks/src/Icons/Frown.tsx
@@ -20,7 +20,7 @@ export function Frown(props: SVGAttributes<any>) {
       focusable="false"
       {...props}
     >
-      <path d="M288 421a48 48 0 1 0 96 0 48 48 0 1 0-96 0zm352 0a48 48 0 1 0 96 0 48 48 0 1 0-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 0 1 248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 0 1 249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 0 1 775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 0 1 775 775zM512 533c-85.5 0-155.6 67.3-160 151.6a8 8 0 0 0 8 8.4h48.1c4.2 0 7.8-3.2 8.1-7.4C420 636.1 461.5 597 512 597s92.1 39.1 95.8 88.6c.3 4.2 3.9 7.4 8.1 7.4H664a8 8 0 0 0 8-8.4C667.6 600.3 597.5 533 512 533z"></path>
+      <path d="M288 421a48 48 0 1 0 96 0 48 48 0 1 0-96 0zm352 0a48 48 0 1 0 96 0 48 48 0 1 0-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 0 1 248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 0 1 249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 0 1 775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 0 1 775 775zM512 533c-85.5 0-155.6 67.3-160 151.6a8 8 0 0 0 8 8.4h48.1c4.2 0 7.8-3.2 8.1-7.4C420 636.1 461.5 597 512 597s92.1 39.1 95.8 88.6c.3 4.2 3.9 7.4 8.1 7.4H664a8 8 0 0 0 8-8.4C667.6 600.3 597.5 533 512 533z" />
     </svg>
   );
 }
diff --git a/webapp/packages/core-blocks/src/ItemList/ItemListSearch.tsx b/webapp/packages/core-blocks/src/ItemList/ItemListSearch.tsx
index d12daf4cda..8071a142f9 100644
--- a/webapp/packages/core-blocks/src/ItemList/ItemListSearch.tsx
+++ b/webapp/packages/core-blocks/src/ItemList/ItemListSearch.tsx
@@ -64,9 +64,9 @@ export function ItemListSearch({
         name='search'
         placeholder={translate(placeholder || 'ui_search')}
         value={value ?? search}
-        onChange={changeHandler}
         autoComplete="off"
         disabled={disabled}
+        onChange={changeHandler}
         {...use({ mod: 'surface' })}
       />
       <search-button as='div' onClick={searchHandler}><ListSearchButton name='search' /></search-button>
diff --git a/webapp/packages/core-blocks/src/ItemList/ListItem.tsx b/webapp/packages/core-blocks/src/ItemList/ListItem.tsx
index a4903e9904..05ab7231cb 100644
--- a/webapp/packages/core-blocks/src/ItemList/ListItem.tsx
+++ b/webapp/packages/core-blocks/src/ItemList/ListItem.tsx
@@ -26,7 +26,7 @@ export function ListItem({
   const styles = useContext(Styles);
 
   return styled(useStyles(...styles))(
-    <list-item as="div" onClick={onClick} className={className}>
+    <list-item as="div" className={className} onClick={onClick}>
       {children}
     </list-item>
   );
diff --git a/webapp/packages/core-blocks/src/Loader/Loader.tsx b/webapp/packages/core-blocks/src/Loader/Loader.tsx
index 67c17c9a04..f1f285b9f1 100644
--- a/webapp/packages/core-blocks/src/Loader/Loader.tsx
+++ b/webapp/packages/core-blocks/src/Loader/Loader.tsx
@@ -69,13 +69,17 @@ export function Loader({
 
   return styled(style)(
     <loader as="div" className={className} {...use({ small })}>
-      <icon as="div"><img src={spinnerURL}/></icon>
+      <icon as="div"><img src={spinnerURL} /></icon>
       {!hideMessage && <message as="div"><Translate token='ui_processing_loading' /></message>}
       {onCancel && (
         <actions as='div'>
-          <Button type="button" mod={['unelevated']}
+          <Button
+            type="button"
+            mod={['unelevated']}
             disabled={cancelDisabled}
-            onClick={onCancel}><Translate token='ui_processing_cancel' /></Button>
+            onClick={onCancel}
+          ><Translate token='ui_processing_cancel' />
+          </Button>
         </actions>
       )}
     </loader>
diff --git a/webapp/packages/core-blocks/src/ObjectPropertyInfoForm/ObjectPropertyInfoForm.tsx b/webapp/packages/core-blocks/src/ObjectPropertyInfoForm/ObjectPropertyInfoForm.tsx
index b9177ee18b..b2ae61f5a2 100644
--- a/webapp/packages/core-blocks/src/ObjectPropertyInfoForm/ObjectPropertyInfoForm.tsx
+++ b/webapp/packages/core-blocks/src/ObjectPropertyInfoForm/ObjectPropertyInfoForm.tsx
@@ -55,15 +55,15 @@ export const ObjectPropertyInfoForm = observer(function ObjectPropertyInfoForm({
   return styled(style)(
     <form-body as='div' className={className}>
       {properties.map(property => (
-        <group as="div" key={property.id}>
+        <group key={property.id} as="div">
           <InputField
             type={property.features.includes('password') ? 'password' : 'text'}
             name={property.id!}
             state={credentials}
-            onFocus={handleFocus}
             disabled={disabled}
             autoComplete={RESERVED_KEYWORDS.includes(autofillToken) ? autofillToken : `${autofillToken} ${property.id}`}
             mod='surface'
+            onFocus={handleFocus}
           >
             {property.displayName}
           </InputField>
diff --git a/webapp/packages/core-blocks/src/PropertiesTable/PropertiesTable.tsx b/webapp/packages/core-blocks/src/PropertiesTable/PropertiesTable.tsx
index 5fce925b32..fb09ef5815 100644
--- a/webapp/packages/core-blocks/src/PropertiesTable/PropertiesTable.tsx
+++ b/webapp/packages/core-blocks/src/PropertiesTable/PropertiesTable.tsx
@@ -105,7 +105,7 @@ export const PropertiesTable = observer(function PropertiesTable({
           {translate('block_properties_table_value')}
         </properties-header-value>
         <properties-header-right as="div">
-          {onAdd && <Button type='button' mod={['outlined']} onClick={() => onAdd()}>{translate('block_properties_table_add')}</Button> }
+          {onAdd && <Button type='button' mod={['outlined']} onClick={() => onAdd()}>{translate('block_properties_table_add')}</Button>}
         </properties-header-right>
       </properties-header>
       <properties-list as="div">
@@ -114,10 +114,10 @@ export const PropertiesTable = observer(function PropertiesTable({
             key={property.id}
             property={property}
             value={state[property.key]}
+            error={!isKeyUnique(property.key)}
             onNameChange={changeName}
             onValueChange={changeValue}
             onRemove={removeProperty}
-            error={!isKeyUnique(property.key)}
           />
         ))}
       </properties-list>
diff --git a/webapp/packages/core-blocks/src/PropertiesTable/PropertyItem.tsx b/webapp/packages/core-blocks/src/PropertiesTable/PropertyItem.tsx
index d4251ee281..ba57cf97c7 100644
--- a/webapp/packages/core-blocks/src/PropertiesTable/PropertyItem.tsx
+++ b/webapp/packages/core-blocks/src/PropertiesTable/PropertyItem.tsx
@@ -143,12 +143,12 @@ export const PropertyItem = observer(function PropertyItem({
     <property-item as="div">
       <property-name as='div' title={property.description} {...use({ error })}>
         <ShadowInput
+          ref={keyInputRef}
           type='text'
           name={property.id}
-          onChange={handleKeyChange}
-          ref={keyInputRef}
           readOnly={!isKeyEditable}
           autoComplete='none'
+          onChange={handleKeyChange}
         >
           {property.displayName || property.key}
         </ShadowInput>
@@ -157,8 +157,8 @@ export const PropertyItem = observer(function PropertyItem({
         <ShadowInput
           type='text'
           name={`${property.id}_value`}
-          onChange={handleValueChange}
           autoComplete='none'
+          onChange={handleValueChange}
           {...use({ focus, edited })}
         >
           {value !== undefined ? value : property.defaultValue}
diff --git a/webapp/packages/core-blocks/src/SanitizedHTML/SanitizedHTML.tsx b/webapp/packages/core-blocks/src/SanitizedHTML/SanitizedHTML.tsx
index e25d852413..25de48da8d 100644
--- a/webapp/packages/core-blocks/src/SanitizedHTML/SanitizedHTML.tsx
+++ b/webapp/packages/core-blocks/src/SanitizedHTML/SanitizedHTML.tsx
@@ -20,5 +20,5 @@ const allowedTags = ['h2', 'h3', 'h4', 'h5', 'h6', 'blockquote', 'p', 'a', 'ul',
 const nonTextTags = ['title', 'style', 'script', 'textarea', 'noscript'];
 
 export function SanitizedHTML({ html }: SanitizedHTMLProps) {
-  return (<Sanitized html={html} allowedTags={allowedTags} nonTextTags={nonTextTags}/>);
+  return (<Sanitized html={html} allowedTags={allowedTags} nonTextTags={nonTextTags} />);
 }
diff --git a/webapp/packages/core-blocks/src/Split/Pane.tsx b/webapp/packages/core-blocks/src/Split/Pane.tsx
index b6573b2b1c..47063a3e35 100644
--- a/webapp/packages/core-blocks/src/Split/Pane.tsx
+++ b/webapp/packages/core-blocks/src/Split/Pane.tsx
@@ -9,5 +9,5 @@
 import { Pane as BasePane, PaneProps } from 'go-split';
 
 export function Pane(props: PaneProps) {
-  return <BasePane {...props}/>;
+  return <BasePane {...props} />;
 }
diff --git a/webapp/packages/core-blocks/src/Split/Split.tsx b/webapp/packages/core-blocks/src/Split/Split.tsx
index 098794b36e..565915c949 100644
--- a/webapp/packages/core-blocks/src/Split/Split.tsx
+++ b/webapp/packages/core-blocks/src/Split/Split.tsx
@@ -9,5 +9,5 @@
 import { SplitProps, Split as BaseSplit } from 'go-split';
 
 export function Split(props: SplitProps) {
-  return <BaseSplit {...props}/>;
+  return <BaseSplit {...props} />;
 }
diff --git a/webapp/packages/core-blocks/src/StaticImage.tsx b/webapp/packages/core-blocks/src/StaticImage.tsx
index 8ebebc80d1..be14843be0 100644
--- a/webapp/packages/core-blocks/src/StaticImage.tsx
+++ b/webapp/packages/core-blocks/src/StaticImage.tsx
@@ -29,5 +29,5 @@ export function StaticImage({
 
   const url = icon[0] === '/' ? icon : `${staticEndpoint}/images/${icon}`;
 
-  return <img className={className} src={url} title={title} onClick={onClick}/>;
+  return <img className={className} src={url} title={title} onClick={onClick} />;
 }
diff --git a/webapp/packages/core-blocks/src/Table/TableItem.tsx b/webapp/packages/core-blocks/src/Table/TableItem.tsx
index c6ff0d8571..10acd99286 100644
--- a/webapp/packages/core-blocks/src/Table/TableItem.tsx
+++ b/webapp/packages/core-blocks/src/Table/TableItem.tsx
@@ -79,9 +79,9 @@ export const TableItem = observer(function TableItem({
   return styled(styles)(
     <TableItemContext.Provider value={itemContext}>
       <tr
+        className={className}
         onClick={handleClick}
         onDoubleClick={handleDoubleClick}
-        className={className}
         {...use({ selected: isSelected, expanded: isExpanded })}
       >
         {children}
diff --git a/webapp/packages/core-blocks/src/Table/TableItemExpand.tsx b/webapp/packages/core-blocks/src/Table/TableItemExpand.tsx
index 7eb9f1c71d..d058e56b68 100644
--- a/webapp/packages/core-blocks/src/Table/TableItemExpand.tsx
+++ b/webapp/packages/core-blocks/src/Table/TableItemExpand.tsx
@@ -51,7 +51,7 @@ export const TableItemExpand = observer(function TableItemExpand({
 
   return styled(styles)(
     <table-item-expand-box as='div' className={className} onClick={handleClick}>
-      <Icon name="angle" viewBox="0 0 15 8" {...use({ expanded: context.isExpanded() })}/>
+      <Icon name="angle" viewBox="0 0 15 8" {...use({ expanded: context.isExpanded() })} />
     </table-item-expand-box>
   );
 });
diff --git a/webapp/packages/core-blocks/src/Table/TableItemSelect.tsx b/webapp/packages/core-blocks/src/Table/TableItemSelect.tsx
index b6005d5b8c..8acde30295 100644
--- a/webapp/packages/core-blocks/src/Table/TableItemSelect.tsx
+++ b/webapp/packages/core-blocks/src/Table/TableItemSelect.tsx
@@ -38,6 +38,6 @@ export const TableItemSelect = observer(function TableItemSelect({ checked, disa
   }
 
   return styled(styles)(
-    <input type='checkbox' checked={checked || context.isSelected()} onClick={handleClick} className={className} disabled={context.selectDisabled || disabled}/>
+    <input type='checkbox' checked={checked || context.isSelected()} className={className} disabled={context.selectDisabled || disabled} onClick={handleClick} />
   );
 });
diff --git a/webapp/packages/core-blocks/src/Tabs/Tab/Tab.tsx b/webapp/packages/core-blocks/src/Tabs/Tab/Tab.tsx
index 392839d71d..3dd1c2ec90 100644
--- a/webapp/packages/core-blocks/src/Tabs/Tab/Tab.tsx
+++ b/webapp/packages/core-blocks/src/Tabs/Tab/Tab.tsx
@@ -61,14 +61,14 @@ export function Tab({
           {...state.state}
           id={tabId}
           className={className}
-          onClick={handleOpen}
           disabled={disabled}
+          onClick={handleOpen}
         >
           <tab-container as='div'>
             {children}
             {onClose && (
               <tab-action as="div" onClick={handleClose}>
-                <Icon name="cross-bold" viewBox="0 0 7 8"/>
+                <Icon name="cross-bold" viewBox="0 0 7 8" />
               </tab-action>
             )}
           </tab-container>
diff --git a/webapp/packages/core-blocks/src/Tabs/TabsBox/TabsBox.tsx b/webapp/packages/core-blocks/src/Tabs/TabsBox/TabsBox.tsx
index 2a6051e622..e9cb8b04f5 100644
--- a/webapp/packages/core-blocks/src/Tabs/TabsBox/TabsBox.tsx
+++ b/webapp/packages/core-blocks/src/Tabs/TabsBox/TabsBox.tsx
@@ -32,7 +32,7 @@ export const TabsBox = forwardRef<HTMLDivElement, TabsBoxProps>(function TabsBox
 
   return styled(useStyles(...style))(
     <TabsState currentTabId={currentTabId}>
-      <tabs-box as="div" className={className} ref={ref} tabIndex={tabIndex}>
+      <tabs-box ref={ref} as="div" className={className} tabIndex={tabIndex}>
         {tabs && (
           <tabs as="div">
             {tabs}
diff --git a/webapp/packages/core-blocks/src/Tabs/TabsBox/TabsBoxFromArray.tsx b/webapp/packages/core-blocks/src/Tabs/TabsBox/TabsBoxFromArray.tsx
index 954aae2405..62d0452112 100644
--- a/webapp/packages/core-blocks/src/Tabs/TabsBox/TabsBoxFromArray.tsx
+++ b/webapp/packages/core-blocks/src/Tabs/TabsBox/TabsBoxFromArray.tsx
@@ -47,7 +47,7 @@ export const TabsBoxFromArray = observer(function TabsBoxFromArray({
       currentTabId={currentTabId}
       tabs={!hideTabs && tabIdList.map(tabId => (
         <Tab key={tabId} tabId={tabId} onOpen={onOpen} onClose={onClose}>
-          <TabData tabId={tabId}/>
+          <TabData tabId={tabId} />
         </Tab>
       ))}
       className={className}
@@ -55,7 +55,7 @@ export const TabsBoxFromArray = observer(function TabsBoxFromArray({
     >
       {tabIdList?.map(tabId => (
         <TabPanel key={tabId} tabId={tabId}>
-          <PanelData tabId={tabId}/>
+          <PanelData tabId={tabId} />
         </TabPanel>
       ))}
     </TabsBox>
diff --git a/webapp/packages/core-blocks/src/Tabs/VerticalTabs/VerticalTabPanel.tsx b/webapp/packages/core-blocks/src/Tabs/VerticalTabs/VerticalTabPanel.tsx
index fc38934bed..50bac73b0f 100644
--- a/webapp/packages/core-blocks/src/Tabs/VerticalTabs/VerticalTabPanel.tsx
+++ b/webapp/packages/core-blocks/src/Tabs/VerticalTabs/VerticalTabPanel.tsx
@@ -25,7 +25,7 @@ export const VerticalTabPanel = observer(function VerticalTabPanel({ tab, style
 
   return styled(useStyles(verticalTabStyles, ...style))(
     <TabPanel tabId={tab.tabId}>
-      <Panel/>
+      <Panel />
     </TabPanel>
   );
 });
diff --git a/webapp/packages/core-blocks/src/Tabs/VerticalTabs/VerticalTabs.tsx b/webapp/packages/core-blocks/src/Tabs/VerticalTabs/VerticalTabs.tsx
index dfe51df1c3..b3161e31aa 100644
--- a/webapp/packages/core-blocks/src/Tabs/VerticalTabs/VerticalTabs.tsx
+++ b/webapp/packages/core-blocks/src/Tabs/VerticalTabs/VerticalTabs.tsx
@@ -34,7 +34,7 @@ export const VerticalTabs = observer(function VerticalTabs({ tabContainer, style
           ))}
         </TabList>
         {tabContainer.tabs.map(tab => (
-          <VerticalTabPanel key={tab.tabId} tab={tab} style={style}/>
+          <VerticalTabPanel key={tab.tabId} tab={tab} style={style} />
         ))}
       </vertical-tabs>
     </TabsState>
diff --git a/webapp/packages/core-connections/src/Administration/Connections/ConnectionForm/ConnectionAccess/ConnectionAccess.tsx b/webapp/packages/core-connections/src/Administration/Connections/ConnectionForm/ConnectionAccess/ConnectionAccess.tsx
index 84260e818c..4663e68312 100644
--- a/webapp/packages/core-connections/src/Administration/Connections/ConnectionForm/ConnectionAccess/ConnectionAccess.tsx
+++ b/webapp/packages/core-connections/src/Administration/Connections/ConnectionForm/ConnectionAccess/ConnectionAccess.tsx
@@ -70,29 +70,29 @@ export const ConnectionAccess = observer(function ConnectionAccess({
 
   return styled(style)(
     <box as='div'>
-      <Table selectedItems={controller.selectedSubjects} onSelect={handleSelect} className={className}>
+      <Table selectedItems={controller.selectedSubjects} className={className} onSelect={handleSelect}>
         <TableHeader>
-          <TableColumnHeader min/>
+          <TableColumnHeader min />
           <TableColumnHeader>{translate('connections_connection_name')}</TableColumnHeader>
-          <TableColumnHeader></TableColumnHeader>
+          <TableColumnHeader />
         </TableHeader>
         <TableBody>
           {controller.roles.map(role => (
             <TableItem key={role.roleId} item={role.roleId} selectDisabled={disabled}>
               <TableColumnValue centerContent flex>
-                <TableItemSelect disabled={disabled}/>
+                <TableItemSelect disabled={disabled} />
               </TableColumnValue>
               <TableColumnValue>{role.roleName}</TableColumnValue>
-              <TableColumnValue></TableColumnValue>
+              <TableColumnValue />
             </TableItem>
           ))}
           {controller.users.map(user => (
             <TableItem key={user.userId} item={user.userId} selectDisabled={disabled}>
               <TableColumnValue centerContent flex>
-                <TableItemSelect disabled={disabled}/>
+                <TableItemSelect disabled={disabled} />
               </TableColumnValue>
               <TableColumnValue>{user.userId}</TableColumnValue>
-              <TableColumnValue></TableColumnValue>
+              <TableColumnValue />
             </TableItem>
           ))}
         </TableBody>
diff --git a/webapp/packages/core-connections/src/Administration/Connections/ConnectionForm/ConnectionForm.tsx b/webapp/packages/core-connections/src/Administration/Connections/ConnectionForm/ConnectionForm.tsx
index 16f2ae03b7..b95516a944 100644
--- a/webapp/packages/core-connections/src/Administration/Connections/ConnectionForm/ConnectionForm.tsx
+++ b/webapp/packages/core-connections/src/Administration/Connections/ConnectionForm/ConnectionForm.tsx
@@ -139,7 +139,7 @@ export const ConnectionForm = observer(function ConnectionForm({
     <TabsState selectedId='options'>
       <box as='div'>
         <TabList>
-          <Tab tabId='options' >
+          <Tab tabId='options'>
             <TabTitle>{translate('customConnection_options')}</TabTitle>
           </Tab>
           <Tab tabId='driver_properties' disabled={!controller.driver}>
@@ -215,8 +215,7 @@ export const ConnectionForm = observer(function ConnectionForm({
                   }}
                 </TabPanel>
               </>
-            )
-          }
+            )}
           {controller.error.responseMessage && (
             <ErrorMessage
               text={controller.error.responseMessage}
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 e70971d3a5..2126021d5d 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
@@ -94,10 +94,10 @@ export const Options = observer(function Options({
               items={controller.drivers}
               keySelector={driver => driver.id}
               valueSelector={driver => driver?.name ?? ''}
-              onSelect={controller.onSelectDriver}
               readOnly={model.editing || controller.drivers.length < 2}
-              mod={'surface'}
+              mod="surface"
               disabled={disabled}
+              onSelect={controller.onSelectDriver}
             >
               {translate('connections_connection_driver')}
             </Combobox>
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 c2a73ce15c..899caa949f 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
@@ -37,7 +37,7 @@ export const ParametersForm = observer(function ParametersForm({
 
   return styled(useStyles(formStyles, styles))(
     <>
-      { !embedded && (
+      {!embedded && (
         <layout-grid-inner as="div">
           <layout-grid-cell as='div' {...use({ 'span-tablet': 12, 'span-desktop': 7 })}>
             <InputField
diff --git a/webapp/packages/core-connections/src/Administration/Connections/ConnectionsAdministration.tsx b/webapp/packages/core-connections/src/Administration/Connections/ConnectionsAdministration.tsx
index 1602bc0e94..5c8fd957d8 100644
--- a/webapp/packages/core-connections/src/Administration/Connections/ConnectionsAdministration.tsx
+++ b/webapp/packages/core-connections/src/Administration/Connections/ConnectionsAdministration.tsx
@@ -86,7 +86,7 @@ export const ConnectionsAdministration = observer(function ConnectionsAdministra
         <layout-grid-cell as='div' {...use({ span: 12 })}>
           {configurationWizard && (
             <message-box as='div'>
-              <p><Translate token='connections_administration_configuration_wizard_message'/></p>
+              <p><Translate token='connections_administration_configuration_wizard_message' /></p>
             </message-box>
           )}
           <AdministrationTools>
@@ -107,7 +107,7 @@ export const ConnectionsAdministration = observer(function ConnectionsAdministra
             selectedItems={controller.selectedItems}
             expandedItems={controller.expandedItems}
           />
-          {controller.isLoading && <Loader overlay/>}
+          {controller.isLoading && <Loader overlay />}
         </layout-grid-cell>
       </layout-grid-inner>
     </layout-grid>
diff --git a/webapp/packages/core-connections/src/Administration/Connections/ConnectionsDrawerItem.tsx b/webapp/packages/core-connections/src/Administration/Connections/ConnectionsDrawerItem.tsx
index afe74616cf..2185218194 100644
--- a/webapp/packages/core-connections/src/Administration/Connections/ConnectionsDrawerItem.tsx
+++ b/webapp/packages/core-connections/src/Administration/Connections/ConnectionsDrawerItem.tsx
@@ -17,9 +17,9 @@ export function ConnectionsDrawerItem({
   item, onSelect, style, disabled, configurationWizard,
 }: AdministrationItemDrawerProps) {
   return styled(useStyles(...style))(
-    <Tab tabId={item.name} onOpen={() => onSelect(item.name)} disabled={disabled}>
+    <Tab tabId={item.name} disabled={disabled} onOpen={() => onSelect(item.name)}>
       <TabIcon icon='/icons/connection.svg' />
-      <TabTitle><Translate token={configurationWizard ? 'connections_administration_configuration_wizard_step_title' : 'connections_administration_item'}/></TabTitle>
+      <TabTitle><Translate token={configurationWizard ? 'connections_administration_configuration_wizard_step_title' : 'connections_administration_item'} /></TabTitle>
     </Tab>
   );
 }
diff --git a/webapp/packages/core-connections/src/Administration/Connections/ConnectionsTable/Connection.tsx b/webapp/packages/core-connections/src/Administration/Connections/ConnectionsTable/Connection.tsx
index 3cba614b73..44b8e5e892 100644
--- a/webapp/packages/core-connections/src/Administration/Connections/ConnectionsTable/Connection.tsx
+++ b/webapp/packages/core-connections/src/Administration/Connections/ConnectionsTable/Connection.tsx
@@ -56,8 +56,8 @@ export const Connection = observer(function Connection({ connection }: Props) {
       </TableColumnValue>
       <TableColumnValue expand>{connection.name}</TableColumnValue>
       <TableColumnValue>{connection.host}{connection.host && connection.port && `:${connection.port}`}</TableColumnValue>
-      <TableColumnValue><input type="checkbox" checked={connection.template} disabled/></TableColumnValue>
-      <TableColumnValue/>
+      <TableColumnValue><input type="checkbox" checked={connection.template} disabled /></TableColumnValue>
+      <TableColumnValue />
     </TableItem>
   );
 });
diff --git a/webapp/packages/core-connections/src/Administration/Connections/ConnectionsTable/ConnectionEdit.tsx b/webapp/packages/core-connections/src/Administration/Connections/ConnectionsTable/ConnectionEdit.tsx
index 2f946cd0a4..7c7fea0a42 100644
--- a/webapp/packages/core-connections/src/Administration/Connections/ConnectionsTable/ConnectionEdit.tsx
+++ b/webapp/packages/core-connections/src/Administration/Connections/ConnectionsTable/ConnectionEdit.tsx
@@ -50,7 +50,7 @@ export const ConnectionEdit = observer(function ConnectionEdit({
   return styled(useStyles(styles))(
     <box as='div'>
       {controller.connection && (
-        <ConnectionForm model={controller as IConnectionFormModel} onBack={collapse} onCancel={collapse}/>
+        <ConnectionForm model={controller as IConnectionFormModel} onBack={collapse} onCancel={collapse} />
       )}
     </box>
   );
diff --git a/webapp/packages/core-connections/src/Administration/Connections/ConnectionsTable/ConnectionsTable.tsx b/webapp/packages/core-connections/src/Administration/Connections/ConnectionsTable/ConnectionsTable.tsx
index b857fdde6f..a1307ff0af 100644
--- a/webapp/packages/core-connections/src/Administration/Connections/ConnectionsTable/ConnectionsTable.tsx
+++ b/webapp/packages/core-connections/src/Administration/Connections/ConnectionsTable/ConnectionsTable.tsx
@@ -53,16 +53,16 @@ export const ConnectionsTable = observer(function ConnectionsTable({
   return styled(useStyles(styles))(
     <Table selectedItems={selectedItems} expandedItems={expandedItems} {...use({ size: 'big' })}>
       <TableHeader>
-        <TableColumnHeader min/>
-        <TableColumnHeader min/>
-        <TableColumnHeader min/>
+        <TableColumnHeader min />
+        <TableColumnHeader min />
+        <TableColumnHeader min />
         <TableColumnHeader>{translate('connections_connection_name')}</TableColumnHeader>
         <TableColumnHeader>{translate('connections_connection_address')}</TableColumnHeader>
         <TableColumnHeader>{translate('connections_connection_template')}</TableColumnHeader>
-        <TableColumnHeader></TableColumnHeader>
+        <TableColumnHeader />
       </TableHeader>
       <TableBody>
-        {connections.map(connection => <Connection key={connection.id} connection={connection}/>)}
+        {connections.map(connection => <Connection key={connection.id} connection={connection} />)}
       </TableBody>
     </Table>
   );
diff --git a/webapp/packages/core-connections/src/Administration/Connections/CreateConnection/CreateConnection.tsx b/webapp/packages/core-connections/src/Administration/Connections/CreateConnection/CreateConnection.tsx
index 7ef26c558f..f0e43c79bb 100644
--- a/webapp/packages/core-connections/src/Administration/Connections/CreateConnection/CreateConnection.tsx
+++ b/webapp/packages/core-connections/src/Administration/Connections/CreateConnection/CreateConnection.tsx
@@ -174,7 +174,7 @@ export const CreateConnection = observer(function CreateConnection({
     return styled(style)(
       <connection-create as='div'>
         <title-bar as='div'>
-          <back-button as='div'><Icon name="angle" viewBox="0 0 15 8" onClick={controller.back}/></back-button>
+          <back-button as='div'><Icon name="angle" viewBox="0 0 15 8" onClick={controller.back} /></back-button>
           {controller.driver?.icon && <StaticImage icon={controller.driver.icon} />}
           {controller.driver?.name ?? translate('connections_administration_connection_create')}
           <fill as="div" />
@@ -183,12 +183,12 @@ export const CreateConnection = observer(function CreateConnection({
         <connection-create-content as='div'>
           <ConnectionForm
             model={controller as IConnectionFormModel}
+            configurationWizard={configurationWizard}
             onBack={controller.back}
             onCancel={handleConnectionCancel}
-            configurationWizard={configurationWizard}
           />
         </connection-create-content>
-        <connection-create-footer as='div'/>
+        <connection-create-footer as='div' />
       </connection-create>
     );
   }
@@ -211,7 +211,7 @@ export const CreateConnection = observer(function CreateConnection({
         </TabList>
       </TabsState>
       <connection-create-content as='div'>
-        {method === 'driver' && <CustomConnection onSelect={controller.onDriverSelect}/>}
+        {method === 'driver' && <CustomConnection onSelect={controller.onDriverSelect} />}
         {method === 'search-database' && (
           <SearchDatabase
             databases={controller.databases}
@@ -222,9 +222,9 @@ export const CreateConnection = observer(function CreateConnection({
             onChange={controller.onSearchChange}
           />
         )}
-        {controller.isProcessing && <Loader overlay/>}
+        {controller.isProcessing && <Loader overlay />}
       </connection-create-content>
-      <connection-create-footer as='div'/>
+      <connection-create-footer as='div' />
     </connection-create>
   );
 });
diff --git a/webapp/packages/core-connections/src/Administration/Connections/CreateConnection/CustomConnection.tsx b/webapp/packages/core-connections/src/Administration/Connections/CreateConnection/CustomConnection.tsx
index 5053883557..d0cb2b16eb 100644
--- a/webapp/packages/core-connections/src/Administration/Connections/CreateConnection/CustomConnection.tsx
+++ b/webapp/packages/core-connections/src/Administration/Connections/CreateConnection/CustomConnection.tsx
@@ -35,8 +35,8 @@ export const CustomConnection = observer(function CustomConnection({
   )), [dbDriverResource.data]);
 
   if (loading) {
-    return <Loader className={className}/>;
+    return <Loader className={className} />;
   }
 
-  return <DriverList drivers={drivers.get()} onSelect={onSelect} className={className}/>;
+  return <DriverList drivers={drivers.get()} className={className} onSelect={onSelect} />;
 });
diff --git a/webapp/packages/core-connections/src/Administration/Connections/CreateConnection/Database.tsx b/webapp/packages/core-connections/src/Administration/Connections/CreateConnection/Database.tsx
index 659348b1b6..14932a57bc 100644
--- a/webapp/packages/core-connections/src/Administration/Connections/CreateConnection/Database.tsx
+++ b/webapp/packages/core-connections/src/Administration/Connections/CreateConnection/Database.tsx
@@ -72,7 +72,7 @@ export const Database = observer(function Database({ database, onSelect }: Props
   return styled(useStyles(styles))(
     <ListItem onClick={select}>
       <ListItemIcon>
-        {orderedDrivers.map(driverId => <StaticImage key={driverId} icon={drivers.get(driverId)?.icon}/>)}
+        {orderedDrivers.map(driverId => <StaticImage key={driverId} icon={drivers.get(driverId)?.icon} />)}
       </ListItemIcon>
       <ListItemName>{database.host}:{database.port}</ListItemName>
     </ListItem>
diff --git a/webapp/packages/core-connections/src/Administration/Connections/CreateConnection/Driver.tsx b/webapp/packages/core-connections/src/Administration/Connections/CreateConnection/Driver.tsx
index 773abdcc7e..0cdefd5727 100644
--- a/webapp/packages/core-connections/src/Administration/Connections/CreateConnection/Driver.tsx
+++ b/webapp/packages/core-connections/src/Administration/Connections/CreateConnection/Driver.tsx
@@ -34,7 +34,7 @@ export const Driver = observer(function Driver({ driver, onSelect }: Props) {
 
   return styled(styles)(
     <ListItem onClick={select}>
-      <ListItemIcon><StaticImage icon={driver.icon}/></ListItemIcon>
+      <ListItemIcon><StaticImage icon={driver.icon} /></ListItemIcon>
       <ListItemName>{driver.name}</ListItemName>
       <ListItemDescription title={driver.description}>{driver.description}</ListItemDescription>
     </ListItem>
diff --git a/webapp/packages/core-connections/src/Administration/Connections/CreateConnection/DriverList.tsx b/webapp/packages/core-connections/src/Administration/Connections/CreateConnection/DriverList.tsx
index a8dda916e2..55bc669c2a 100644
--- a/webapp/packages/core-connections/src/Administration/Connections/CreateConnection/DriverList.tsx
+++ b/webapp/packages/core-connections/src/Administration/Connections/CreateConnection/DriverList.tsx
@@ -33,8 +33,8 @@ export const DriverList = observer(function DriverList({ drivers, className, onS
 
   return (
     <ItemList className={className}>
-      <ItemListSearch value={search} onChange={setSearch} placeholder={translate('connections_driver_search_placeholder')} />
-      {filteredDrivers.map(driver => <Driver key={driver.id} driver={driver} onSelect={onSelect}/>)}
+      <ItemListSearch value={search} placeholder={translate('connections_driver_search_placeholder')} onChange={setSearch} />
+      {filteredDrivers.map(driver => <Driver key={driver.id} driver={driver} onSelect={onSelect} />)}
     </ItemList>
   );
 });
diff --git a/webapp/packages/core-connections/src/DatabaseAuthDialog/DBAuthDialogFooter.tsx b/webapp/packages/core-connections/src/DatabaseAuthDialog/DBAuthDialogFooter.tsx
index 69c0c964e9..58e6ffc25b 100644
--- a/webapp/packages/core-connections/src/DatabaseAuthDialog/DBAuthDialogFooter.tsx
+++ b/webapp/packages/core-connections/src/DatabaseAuthDialog/DBAuthDialogFooter.tsx
@@ -39,8 +39,8 @@ export const DBAuthDialogFooter = observer(function DBAuthDialogFooter({
       <Button
         type="button"
         mod={['unelevated']}
-        onClick={onLogin}
         disabled={isAuthenticating}
+        onClick={onLogin}
       >
         {translate('authentication_login')}
       </Button>
diff --git a/webapp/packages/core-connections/src/DatabaseAuthDialog/DatabaseAuthDialog.tsx b/webapp/packages/core-connections/src/DatabaseAuthDialog/DatabaseAuthDialog.tsx
index 1971a787c4..117a78c2e6 100644
--- a/webapp/packages/core-connections/src/DatabaseAuthDialog/DatabaseAuthDialog.tsx
+++ b/webapp/packages/core-connections/src/DatabaseAuthDialog/DatabaseAuthDialog.tsx
@@ -69,19 +69,19 @@ export const DatabaseAuthDialog = observer(function DatabaseAuthDialog({
     <CommonDialogWrapper
       title={connection.connectionInfo?.name}
       icon={driver?.icon}
-      noBodyPadding
       footer={(
         <DBAuthDialogFooter
           isAuthenticating={controller.isAuthenticating}
           onLogin={controller.login}
         />
       )}
+      noBodyPadding
       onReject={options?.persistent ? undefined : rejectDialog}
     >
       {(!connection.isLoaded() || connection.isLoading())
         ? <Loader />
         : (
-          <SubmittingForm onSubmit={controller.login} ref={focusedRef}>
+          <SubmittingForm ref={focusedRef} onSubmit={controller.login}>
             <ObjectPropertyInfoForm
               autofillToken={`section-${connection.connectionInfo?.id || ''} section-auth`}
               properties={connection.connectionInfo?.authProperties}
diff --git a/webapp/packages/core-di/src/IApp.ts b/webapp/packages/core-di/src/IApp.ts
index 13a75267d9..90dc54c882 100644
--- a/webapp/packages/core-di/src/IApp.ts
+++ b/webapp/packages/core-di/src/IApp.ts
@@ -10,7 +10,7 @@ import { ValueToken } from './InjectionToken';
 import { ITypedConstructor } from './ITypedConstructor';
 
 export interface IServiceCollection {
-  addServiceByToken<T extends object>(token: any, value: T): void;
+  addServiceByToken<T extends Record<string, any>>(token: any, value: T): void;
   addServiceByClass(ctor: IServiceConstructor<any>): void;
 }
 
diff --git a/webapp/packages/core-di/src/InjectionToken.ts b/webapp/packages/core-di/src/InjectionToken.ts
index 5dc4480900..daa1f07d39 100644
--- a/webapp/packages/core-di/src/InjectionToken.ts
+++ b/webapp/packages/core-di/src/InjectionToken.ts
@@ -18,7 +18,9 @@ export type ValueToken<T> = () => T;
  */
 export type InjectionToken<T> = ITypedConstructor<T> | ValueToken<T>;
 
-export function createValueToken<T extends object>(obj: string | ITypedConstructor<T> | T): ValueToken<T> {
+export function createValueToken<T extends Record<string, any>>(
+  obj: string | ITypedConstructor<T> | T
+): ValueToken<T> {
 
   // just fake function to keep type T
   const token = () => null as unknown as T;
diff --git a/webapp/packages/core-di/src/PluginManifest.ts b/webapp/packages/core-di/src/PluginManifest.ts
index 46263a149b..07be4ef3aa 100644
--- a/webapp/packages/core-di/src/PluginManifest.ts
+++ b/webapp/packages/core-di/src/PluginManifest.ts
@@ -13,7 +13,7 @@ import {
 export interface PluginManifest {
   info: {
     name: string;
-    defaultSettings?: object;
+    defaultSettings?: Record<string, any>;
   };
 
   /**
diff --git a/webapp/packages/core-di/src/entities/Entity.ts b/webapp/packages/core-di/src/entities/Entity.ts
index 746df4e9df..e7a65ecc80 100644
--- a/webapp/packages/core-di/src/entities/Entity.ts
+++ b/webapp/packages/core-di/src/entities/Entity.ts
@@ -101,8 +101,8 @@ export class Entity {
   }
 
   protected addMixin(ctor: ITypedConstructor<any>): void;
-  protected addMixin<T extends object>(token: InjectionToken<T>, value: T): void;
-  protected addMixin<T extends object>(ctorOrToken: InjectionToken<T>, value?: T): void {
+  protected addMixin<T extends Record<string, any>>(token: InjectionToken<T>, value: T): void;
+  protected addMixin<T extends Record<string, any>>(ctorOrToken: InjectionToken<T>, value?: T): void {
     this.mixins.push(ctorOrToken as InjectionToken<any>);
     if (value !== undefined) {
       this.container.addServiceByToken(ctorOrToken, value);
@@ -117,7 +117,7 @@ export class Entity {
 
 }
 
-export type MixinProvider<T extends object> = ITypedConstructor<T> | {
+export type MixinProvider<T extends Record<string, any>> = ITypedConstructor<T> | {
   token: InjectionToken<T>;
   value: T;
 };
diff --git a/webapp/packages/core-di/src/inversifyWrapper.ts b/webapp/packages/core-di/src/inversifyWrapper.ts
index 26ce50d528..bff4395493 100644
--- a/webapp/packages/core-di/src/inversifyWrapper.ts
+++ b/webapp/packages/core-di/src/inversifyWrapper.ts
@@ -36,7 +36,10 @@ export const inversifyWrapper: IDiWrapper = {
       mainContainer.addServiceByClass(Ctor);
     },
 
-    addServiceByToken<T extends object>(token: ValueToken<T> | IServiceConstructor<T>, value: T): void {
+    addServiceByToken<T extends Record<string, unknown>>(
+      token: ValueToken<T> | IServiceConstructor<T>,
+      value: T
+    ): void {
       mainContainer.addServiceByToken(token, value);
     },
   },
diff --git a/webapp/packages/core-dialogs/src/CommonDialog/ConfirmationDialog.tsx b/webapp/packages/core-dialogs/src/CommonDialog/ConfirmationDialog.tsx
index 630879b298..345df8b731 100644
--- a/webapp/packages/core-dialogs/src/CommonDialog/ConfirmationDialog.tsx
+++ b/webapp/packages/core-dialogs/src/CommonDialog/ConfirmationDialog.tsx
@@ -45,28 +45,28 @@ export function ConfirmationDialog({
     <dialog className={className}>
       <header>
         <header-title as="div">
-          <h1><Translate token={payload.title}/></h1>
+          <h1><Translate token={payload.title} /></h1>
           <reject as="div">
             <Icon name="cross" viewBox="0 0 16 16" onClick={handleReject} />
           </reject>
         </header-title>
       </header>
-      <dialog-body as="div"><Translate token={payload.message}/></dialog-body>
+      <dialog-body as="div"><Translate token={payload.message} /></dialog-body>
       <footer>
         <Button
           type="button"
           mod={['outlined']}
           onClick={handleReject}
         >
-          <Translate token='ui_processing_cancel'/>
+          <Translate token='ui_processing_cancel' />
         </Button>
-        <fill as="div"/>
+        <fill as="div" />
         <Button
           type="button"
           mod={['unelevated']}
           onClick={handleResolve}
         >
-          <Translate token='ui_processing_ok'/>
+          <Translate token='ui_processing_ok' />
         </Button>
       </footer>
     </dialog>
diff --git a/webapp/packages/core-dialogs/src/CommonDialog/DialogsPortal.tsx b/webapp/packages/core-dialogs/src/CommonDialog/DialogsPortal.tsx
index c64af5499b..50a6fc884d 100644
--- a/webapp/packages/core-dialogs/src/CommonDialog/DialogsPortal.tsx
+++ b/webapp/packages/core-dialogs/src/CommonDialog/DialogsPortal.tsx
@@ -86,7 +86,7 @@ function NestedDialog({
   return styled(styles)(
     <>
       <DialogBackdrop {...dialogState}>
-        <Dialog {...dialogState} >
+        <Dialog {...dialogState}>
           <DialogComponent
             payload={dialog.payload}
             options={dialog.options}
diff --git a/webapp/packages/core-dialogs/src/Menu/MenuPanel/MenuTrigger.tsx b/webapp/packages/core-dialogs/src/Menu/MenuPanel/MenuTrigger.tsx
index 159b539ad2..c4f9d23d71 100644
--- a/webapp/packages/core-dialogs/src/Menu/MenuPanel/MenuTrigger.tsx
+++ b/webapp/packages/core-dialogs/src/Menu/MenuPanel/MenuTrigger.tsx
@@ -44,7 +44,7 @@ export function MenuTrigger({
           {children}
         </box>
       </MenuButton>
-      <MenuPanel panel={panel} menu={menu} style={style}/>
+      <MenuPanel panel={panel} menu={menu} style={style} />
     </>
   );
 }
@@ -103,12 +103,12 @@ const MenuPanelElement = observer(function MenuPanelElement({
         {...menu}
         {...use({ hidden: item.isHidden })}
         aria-label={item.id}
-        onClick={onClick}
         disabled={item.isDisabled}
         menuItem={item}
         style={style}
-        {...{ as: MenuInnerTrigger }}>
-      </MenuItem>
+        onClick={onClick}
+        {...{ as: MenuInnerTrigger }}
+      />
     );
   }
 
@@ -117,9 +117,10 @@ const MenuPanelElement = observer(function MenuPanelElement({
       {...menu}
       {...use({ hidden: item.isHidden })}
       aria-label={item.id}
+      disabled={item.isDisabled}
       onClick={onClick}
-      disabled={item.isDisabled}>
-      <MenuPanelItem menuItem={item} style={style}/>
+    >
+      <MenuPanelItem menuItem={item} style={style} />
     </MenuItem>
   );
 });
@@ -148,10 +149,10 @@ export const MenuInnerTrigger = forwardRef(function MenuInnerTrigger(
     <>
       <MenuButton ref={ref} {...menu} {...rest}>
         <box as='div'>
-          <MenuPanelItem menuItem={menuItem} style={style}/>
+          <MenuPanelItem menuItem={menuItem} style={style} />
         </box>
       </MenuButton>
-      <MenuPanel panel={panel!} menu={menu} style={style}/>
+      <MenuPanel panel={panel!} menu={menu} style={style} />
     </>
   );
 });