chore: misc improvements

webapp/packages/core-administration/src/Administration/Administration.tsx

@@ -65,16 +65,16 @@ const administrationStyles = composes(
   `
 );
 
-type Props = {
+type Props = React.PropsWithChildren<{
   configurationWizard: boolean;
   activeItem: string | null;
   activeItemSub: string | null;
   activeItemSubParam: string | null;
   onItemSelect(name: string): void;
-}
+}>
 
 export const Administration = observer(function Administration({
-  configurationWizard, activeItem, activeItemSub, activeItemSubParam, onItemSelect,
+  configurationWizard, activeItem, activeItemSub, activeItemSubParam, onItemSelect, children,
 }: Props) {
   const controller = useController(AdministrationController);
   const items = controller.getItems(configurationWizard);
@@ -96,6 +96,7 @@ export const Administration = observer(function Administration({
           </TabList>
         </drawer>
         <content as='div'>
+          {children}
           <ItemContent
             activeItemName={activeItem}
             activeItemSub={activeItemSub}

webapp/packages/core-administration/src/AdministrationItem/AdministrationItemService.ts

@@ -23,11 +23,10 @@ export class AdministrationItemService {
   getDefaultItem(configurationWizard: boolean) {
     const items = this.items.filter(filterConfigurationWizard(configurationWizard));
 
-    console.log(configurationWizard, items);
-
     if (items.length === 0) {
       return null;
     }
+
     return items.sort(orderAdministrationItems)[0].name;
   }
 
@@ -53,7 +52,7 @@ export class AdministrationItemService {
   }
 
   create(options: IAdministrationItemOptions) {
-    const type = options.type === undefined ? AdministrationItemType.Administration : options.type;
+    const type = options.type ?? AdministrationItemType.Administration;
 
     if (this.items.some(item => item.name === options.name && (
       item.type === type

webapp/packages/core-blocks/src/FormControls/Checkbox.tsx

@@ -6,6 +6,8 @@
  * 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';
 
 import { useStyles } from '@cloudbeaver/core-theming';
@@ -28,38 +30,73 @@ const styles = css`
   }
 `;
 
-type Props = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'type' | 'value'> & {
+type BaseProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'type' | 'value' | 'checked'> & {
   value?: string;
   checkboxLabel: string;
   mod?: 'surface';
-  onChange?(value: boolean): any;
 }
 
-export function Checkbox({
-  name,
-  value,
-  checkboxLabel,
-  children,
-  className,
-  mod,
-  onChange = () => {},
-  ...rest
-}: Props) {
+type ControlledProps = BaseProps & {
+  checked?: boolean;
+  onChange?(value: boolean, name?: string): any;
+
+  state?: never;
+}
+
+type ObjectProps<TKey extends keyof TState, TState> = BaseProps & {
+  name: TKey;
+  state: TState;
+  onChange?(value: boolean, name: TKey): any;
+
+  checked?: never;
+}
+
+type CheckboxType = {
+  (props: ControlledProps): JSX.Element;
+  <TKey extends keyof TState, TState>(props: ObjectProps<TKey, TState>): JSX.Element;
+}
+
+export const Checkbox: CheckboxType = observer(function Checkbox(
+  props: ControlledProps | ObjectProps<any, any>
+) {
+  const {
+    name,
+    value,
+    state,
+    checkboxLabel,
+    children,
+    className,
+    mod,
+    onChange,
+    ...rest
+  } = props;
+
+  const handleChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
+    if (state) {
+      state[name] = event.target.checked;
+    }
+    if (onChange) {
+      onChange(event.target.checked, name);
+    }
+  }, [state, name, onChange]);
+
+  const checked = state ? state[name] : props.checked;
 
   return styled(useStyles(baseFormControlStyles, styles))(
     <field as="div" className={className}>
       <field-label as="div">{children}</field-label>
       <checkbox as='div'>
         <input
+          {...rest}
           name={name}
           id={value || name}
           type='checkbox'
-          onChange={e => onChange(e.target.checked)}
-          {...rest}
+          onChange={handleChange}
+          checked={checked}
           {...use({ mod })}
         />
         <label htmlFor={value || name}>{checkboxLabel}</label>
       </checkbox>
     </field>
   );
-}
+});

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

@@ -6,29 +6,73 @@
  * you may not use this file except in compliance with the License.
  */
 
+import { observer } from 'mobx-react';
+import { useCallback } from 'react';
 import styled, { use } from 'reshadow';
 
 import { useStyles } from '@cloudbeaver/core-theming';
 
 import { baseFormControlStyles } from './baseFormControlStyles';
 
-type Props = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange'> & {
+type BaseProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'name' | 'value'> & {
   mod?: 'surface';
-  onChange?(value: string): any;
 }
 
-export function InputField({
-  children,
-  className,
-  mod,
-  onChange = () => {},
-  ...rest
-}: Props) {
+type ControlledProps = BaseProps & {
+  name?: string;
+  value?: string;
+  onChange?(value: string, name?: string): any;
+
+  state?: never;
+}
+
+type ObjectProps<TKey extends keyof TState, TState> = BaseProps & {
+  name: TKey;
+  state: TState;
+  onChange?(value: string, name: TKey): any;
+
+  value?: never;
+}
+
+type InputFieldType = {
+  (props: ControlledProps): JSX.Element;
+  <TKey extends keyof TState, TState>(props: ObjectProps<TKey, TState>): JSX.Element;
+}
+
+export const InputField: InputFieldType = observer(function InputField(
+  props: ControlledProps | ObjectProps<any, any>
+) {
+  const {
+    name,
+    state,
+    children,
+    className,
+    mod,
+    onChange,
+    ...rest
+  } = props;
+
+  const handleChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
+    if (state) {
+      state[name] = event.target.value;
+    }
+    if (onChange) {
+      onChange(event.target.value, name);
+    }
+  }, [state, name, onChange]);
+
+  const value = state ? state[name] : props.value;
 
   return styled(useStyles(baseFormControlStyles))(
     <field as="div" className={className}>
       <field-label as='label'>{children}</field-label>
-      <input onChange={e => onChange(e.target.value)} {...rest} {...use({ mod })} />
+      <input
+        {...rest}
+        onChange={handleChange}
+        name={name}
+        value={value}
+        {...use({ mod })}
+      />
     </field>
   );
-}
+});

webapp/packages/core-routing/src/RouterService.ts

@@ -8,12 +8,14 @@
 
 import { observable } from 'mobx';
 import createRouter, {
-  Router, SubscribeFn, SubscribeState
+  State, Router, SubscribeFn, SubscribeState
 } from 'router5';
 import browserPlugin from 'router5-plugin-browser';
 
 import { injectable } from '@cloudbeaver/core-di';
 
+export type RouterState = State;
+
 @injectable()
 export class RouterService {