Merge remote-tracking branch 'origin/devel' into devel

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

@@ -13,6 +13,7 @@ import type { ComponentStyle } from '@cloudbeaver/core-theming';
 
 import { IconOrImage } from './IconOrImage';
 import { Loader } from './Loader/Loader';
+import { useObjectRef } from './useObjectRef';
 import { useObservableRef } from './useObservableRef';
 import { useStyles } from './useStyles';
 
@@ -123,16 +124,12 @@ export const Button = observer<ButtonProps>(function Button({
   className,
   ...rest
 }) {
+  const handlersRef = useObjectRef({ onClick });
   const state = useObservableRef(
     () => ({
       loading: false,
-    }),
-    {
-      loading: observable.ref,
-    },
-    {
       click(e: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement | HTMLLinkElement | HTMLDivElement>) {
-        const returnValue = onClick?.(e);
+        const returnValue = handlersRef.onClick?.(e);
 
         if (returnValue instanceof Promise) {
           if (loader) {
@@ -143,7 +140,11 @@ export const Button = observer<ButtonProps>(function Button({
           }
         }
       },
+    }),
+    {
+      loading: observable.ref,
     },
+    false,
     ['click'],
   );
 

webapp/packages/core-blocks/src/Fill.m.css

@@ -0,0 +1,3 @@
+.fill {
+  flex: 1;
+}

webapp/packages/core-blocks/src/Fill.tsx

@@ -0,0 +1,19 @@
+/*
+ * CloudBeaver - Cloud Database Manager
+ * Copyright (C) 2020-2023 DBeaver Corp and others
+ *
+ * Licensed under the Apache License, Version 2.0.
+ * you may not use this file except in compliance with the License.
+ */
+import style from './Fill.m.css';
+import { s } from './s';
+import { useS } from './useS';
+
+interface Props {
+  className?: string;
+}
+
+export const Fill: React.FC<Props> = function Fill({ className }) {
+  const styles = useS(style);
+  return <div className={s(styles, { fill: true }, className)} />;
+};

webapp/packages/core-blocks/src/FolderExplorer/FolderExplorerPath.m.css

@@ -0,0 +1,5 @@
+.folderExplorerPath {
+    composes: theme-typography--caption from global;
+    display: flex;
+    flex-wrap: wrap;
+}

webapp/packages/core-blocks/src/FolderExplorer/FolderExplorerPath.tsx

@@ -7,10 +7,11 @@
  */
 import { observer } from 'mobx-react-lite';
 import { useContext } from 'react';
-import styled from 'reshadow';
 
+import { s } from '../s';
+import { useS } from '../useS';
 import { FolderExplorerContext } from './FolderExplorerContext';
-import { folderExplorerStyles } from './folderExplorerStyles';
+import style from './FolderExplorerPath.m.css';
 import { FolderName } from './FolderName';
 
 interface Props {
@@ -20,6 +21,7 @@ interface Props {
 }
 
 export const FolderExplorerPath = observer<Props>(function FolderExplorerPath({ getName, canSkip, className }) {
+  const styles = useS(style);
   const context = useContext(FolderExplorerContext);
 
   if (!context) {
@@ -60,5 +62,5 @@ export const FolderExplorerPath = observer<Props>(function FolderExplorerPath({
     }
   }
 
-  return styled(folderExplorerStyles)(<folder-explorer-path className={className}>{pathElements}</folder-explorer-path>);
+  return <div className={s(styles, { folderExplorerPath: true }, className)}>{pathElements}</div>;
 });

webapp/packages/core-blocks/src/FolderExplorer/FolderName.m.css

@@ -0,0 +1,30 @@
+.path {
+    composes: theme-typography--caption from global;
+    display: flex;
+    flex-wrap: wrap;
+}
+
+.pathElement {
+    display: flex;
+    align-items: center;
+
+    &:first-child {
+        & .pathElementArrow {
+            display: none;
+        }
+    }
+}
+
+.pathElementArrow {
+    width: 16px;
+    height: 16px;
+    transform: rotate(-90deg);
+    opacity: 0.5;
+}
+
+.pathElementName {
+    max-width: 150px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    padding: 0 4px;
+}

webapp/packages/core-blocks/src/FolderExplorer/FolderName.tsx

@@ -7,12 +7,13 @@
  */
 import { observer } from 'mobx-react-lite';
 import { useContext } from 'react';
-import styled from 'reshadow';
 
 import { Icon } from '../Icon';
 import { Link } from '../Link';
+import { s } from '../s';
+import { useS } from '../useS';
 import { FolderExplorerContext } from './FolderExplorerContext';
-import { folderExplorerStyles } from './folderExplorerStyles';
+import style from './FolderName.m.css';
 
 interface BaseProps {
   folder?: string;
@@ -36,6 +37,7 @@ interface ShortProps extends BaseProps {
 }
 
 export const FolderName = observer<FolderProps | ShortProps>(function FolderName({ folder, path, title, short, last, getName }) {
+  const styles = useS(style);
   const context = useContext(FolderExplorerContext);
 
   if (!context) {
@@ -57,14 +59,12 @@ export const FolderName = observer<FolderProps | ShortProps>(function FolderName
     path = path.slice(0, path.length - 1);
   }
 
-  return styled(folderExplorerStyles)(
-    <folder-explorer-path-element title={title || name}>
-      <folder-explorer-path-element-arrow>
+  return (
+    <div className={s(styles, { pathElement: true })} title={title || name}>
+      <div className={s(styles, { pathElementArrow: true })}>
         <Icon name="arrow" viewBox="0 0 16 16" />
-      </folder-explorer-path-element-arrow>
-      <folder-explorer-path-element-name>
-        {last ? name : <Link onClick={() => context.open(path, folder!)}>{name}</Link>}
-      </folder-explorer-path-element-name>
-    </folder-explorer-path-element>,
+      </div>
+      <div className={s(styles, { pathElementName: true })}>{last ? name : <Link onClick={() => context.open(path, folder!)}>{name}</Link>}</div>
+    </div>
   );
 });

webapp/packages/core-blocks/src/FolderExplorer/useFolderExplorer.ts

@@ -6,7 +6,7 @@
  * you may not use this file except in compliance with the License.
  */
 import { action, observable } from 'mobx';
-import { useContext, useMemo } from 'react';
+import { useContext, useEffect } from 'react';
 
 import { useObservableRef } from '../useObservableRef';
 import { useUserData } from '../useUserData';
@@ -26,15 +26,17 @@ export function useFolderExplorer(root: string, options: IFolderExplorerOptions
     data => typeof data === 'object' && typeof data.folder === 'string' && Array.isArray(data.path) && Array.isArray(data.fullPath),
   );
 
-  useMemo(
+  const saveState = options.saveState;
+
+  useEffect(
     action(() => {
-      if (!options.saveState) {
+      if (!saveState) {
         userState.folder = root;
         userState.fullPath = [root];
         userState.path = [];
       }
     }),
-    [userState],
+    [userState, saveState],
   );
 
   const data = useObservableRef<IFolderExplorerContext>(

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

@@ -16,6 +16,7 @@ import { CheckboxMarkup, CheckboxMod } from './CheckboxMarkup';
 import { CheckboxOnChangeEvent, useCheckboxState } from './useCheckboxState';
 
 export interface CheckboxBaseProps {
+  caption?: string;
   mod?: CheckboxMod[];
   ripple?: boolean;
   indeterminate?: boolean;

webapp/packages/core-blocks/src/FormControls/Checkboxes/CheckboxMarkup.tsx

@@ -47,6 +47,9 @@ const checkboxStyles = css`
     composes: theme-typography--body2 from global;
     cursor: pointer;
   }
+  checkbox-caption {
+    composes: theme-text-text-hint-on-light theme-typography--caption from global;
+  }
 `;
 
 const checkboxMod: Record<CheckboxMod, any> = {
@@ -92,6 +95,7 @@ const checkboxState = {
 
 interface ICheckboxMarkupProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'style'> {
   label?: string;
+  caption?: string;
   indeterminate?: boolean;
   ripple?: boolean;
   mod?: CheckboxMod[];
@@ -110,6 +114,7 @@ export const CheckboxMarkup: React.FC<ICheckboxMarkupProps> = function CheckboxM
   ripple = true,
   style,
   readOnly,
+  caption,
   ...rest
 }) {
   const styles = useS(CheckboxMarkupStyles);
@@ -144,6 +149,7 @@ export const CheckboxMarkup: React.FC<ICheckboxMarkupProps> = function CheckboxM
       {label && (id || rest.name) && (
         <checkbox-label as="label" htmlFor={id || rest.name}>
           {label}
+          {caption && <checkbox-caption>{caption}</checkbox-caption>}
         </checkbox-label>
       )}
     </checkbox-container>,

webapp/packages/core-blocks/src/FormControls/Checkboxes/FieldCheckbox.tsx

@@ -5,7 +5,7 @@
  * Licensed under the Apache License, Version 2.0.
  * you may not use this file except in compliance with the License.
  */
-import { getLayoutProps } from '../../Containers/filterLayoutFakeProps';
+import { filterLayoutFakeProps, getLayoutProps } from '../../Containers/filterLayoutFakeProps';
 import elementsSizeStyles from '../../Containers/shared/ElementsSize.m.css';
 import { s } from '../../s';
 import { useS } from '../../useS';
@@ -20,18 +20,21 @@ export const FieldCheckbox: CheckboxType = function FieldCheckbox({
   ...rest
 }: CheckboxBaseProps & (ICheckboxControlledProps | ICheckboxObjectProps<any>)) {
   const layoutProps = getLayoutProps(rest);
+  const checkboxProps = filterLayoutFakeProps(rest);
   const styles = useS(elementsSizeStyles, formControlStyles, fieldCheckboxStyles);
 
-  if (rest.autoHide && !isControlPresented(rest.name, rest.state)) {
+  if (checkboxProps.autoHide && !isControlPresented(checkboxProps.name, checkboxProps.state)) {
     return null;
   }
 
   return (
     <div data-testid="field" className={s(styles, { field: true, ...layoutProps }, className)}>
-      <Checkbox {...(rest as CheckboxBaseProps & ICheckboxControlledProps)} className={styles.checkbox} />
-      <label data-testid="field-label" htmlFor={rest.id || rest.name} title={rest.title} className={styles.fieldLabel}>
-        {children}
-      </label>
+      <Checkbox {...(checkboxProps as CheckboxBaseProps & ICheckboxControlledProps)} className={styles.checkbox} />
+      {children && (
+        <label data-testid="field-label" htmlFor={checkboxProps.id || checkboxProps.name} title={checkboxProps.title} className={styles.fieldLabel}>
+          {children}
+        </label>
+      )}
     </div>
   );
 };

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

@@ -12,7 +12,7 @@ import styled, { use } from 'reshadow';
 import type { ComponentStyle } from '@cloudbeaver/core-theming';
 import { isNotNullDefined } from '@cloudbeaver/core-utils';
 
-import { getLayoutProps } from '../Containers/filterLayoutFakeProps';
+import { filterLayoutFakeProps, getLayoutProps } from '../Containers/filterLayoutFakeProps';
 import type { ILayoutSizeProps } from '../Containers/ILayoutSizeProps';
 import elementsSizeStyles from '../Containers/shared/ElementsSize.m.css';
 import { Icon } from '../Icon';
@@ -100,6 +100,7 @@ export const InputField: InputFieldType = observer(
     const [passwordRevealed, setPasswordRevealed] = useState(false);
     const translate = useTranslate();
     const layoutProps = getLayoutProps(rest);
+    rest = filterLayoutFakeProps(rest);
     const propStyles = useStyles(style);
     const styles = useS(inputFieldStyle, formControlStyles, elementsSizeStyles);
     const context = useContext(FormContext);

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

@@ -13,7 +13,7 @@ import type { ComponentStyle } from '@cloudbeaver/core-theming';
 import { blobToData, bytesToSize } from '@cloudbeaver/core-utils';
 
 import { Button } from '../Button';
-import { getLayoutProps } from '../Containers/filterLayoutFakeProps';
+import { filterLayoutFakeProps, getLayoutProps } from '../Containers/filterLayoutFakeProps';
 import type { ILayoutSizeProps } from '../Containers/ILayoutSizeProps';
 import elementsSizeStyles from '../Containers/shared/ElementsSize.m.css';
 import { IconButton } from '../IconButton';
@@ -96,6 +96,7 @@ export const InputFileTextContent: InputFileTextContentType = observer(function
   const [error, setError] = useState<Error | null>(null);
 
   const layoutProps = getLayoutProps(rest);
+  rest = filterLayoutFakeProps(rest);
   const styles = useStyles(INPUT_FILE_FIELD_STYLES, baseFormControlStyles, style, error ? baseInvalidFormControlStyles : baseValidFormControlStyles);
   const sizeStyles = useS(elementsSizeStyles);
 

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

@@ -12,7 +12,7 @@ import styled, { css, use } from 'reshadow';
 import type { ComponentStyle } from '@cloudbeaver/core-theming';
 
 import { Button } from '../Button';
-import { getLayoutProps } from '../Containers/filterLayoutFakeProps';
+import { filterLayoutFakeProps, getLayoutProps } from '../Containers/filterLayoutFakeProps';
 import type { ILayoutSizeProps } from '../Containers/ILayoutSizeProps';
 import elementsSizeStyles from '../Containers/shared/ElementsSize.m.css';
 import { useTranslate } from '../localization/useTranslate';
@@ -110,6 +110,7 @@ export const InputFiles: InputFilesType = observer(
     refInherit: React.Ref<HTMLInputElement>,
   ) {
     const layoutProps = getLayoutProps(rest);
+    rest = filterLayoutFakeProps(rest);
     const ref = useRefInherit<HTMLInputElement>(refInherit);
     const [innerState, setInnerState] = useState<FileList | null>(null);
     const translate = useTranslate();

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

@@ -11,7 +11,7 @@ import styled, { css, use } from 'reshadow';
 
 import type { ComponentStyle } from '@cloudbeaver/core-theming';
 
-import { getLayoutProps } from '../Containers/filterLayoutFakeProps';
+import { filterLayoutFakeProps, getLayoutProps } from '../Containers/filterLayoutFakeProps';
 import type { ILayoutSizeProps } from '../Containers/ILayoutSizeProps';
 import elementsSizeStyles from '../Containers/shared/ElementsSize.m.css';
 import { s } from '../s';
@@ -91,6 +91,7 @@ export const Textarea: TextareaType = observer(function Textarea({
   ...rest
 }: ControlledProps | ObjectProps<any, any>) {
   const layoutProps = getLayoutProps(rest);
+  rest = filterLayoutFakeProps(rest);
   const sizeStyles = useS(elementsSizeStyles);
   const context = useContext(FormContext);