From 9b1abf66bf2891d28e48206e20eda8303535cc3e Mon Sep 17 00:00:00 2001
From: naumov <iamemptyhuh@gmail.com>
Date: Mon, 16 Oct 2023 15:23:26 +0200
Subject: [PATCH 1/3] CB-4038 add action icon button

---
 .../core-blocks/src/ActionIconButton.tsx      | 19 +++++++++++++++++
 .../packages/core-blocks/src/IconButton.tsx   | 10 ++++++---
 .../src/Menu/ACTION_ICON_BUTTON_STYLES.ts     | 21 -------------------
 webapp/packages/core-blocks/src/index.ts      |  3 +--
 .../FiltersTableItem.tsx                      |  6 +++---
 .../ElementsTreeTools/ElementsTreeTools.tsx   | 13 ++++++------
 6 files changed, 36 insertions(+), 36 deletions(-)
 create mode 100644 webapp/packages/core-blocks/src/ActionIconButton.tsx
 delete mode 100644 webapp/packages/core-blocks/src/Menu/ACTION_ICON_BUTTON_STYLES.ts

diff --git a/webapp/packages/core-blocks/src/ActionIconButton.tsx b/webapp/packages/core-blocks/src/ActionIconButton.tsx
new file mode 100644
index 0000000000..073ee9f1cb
--- /dev/null
+++ b/webapp/packages/core-blocks/src/ActionIconButton.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 { observer } from 'mobx-react-lite';
+
+import style from './ActionIconButton.m.css';
+import { IconButton, type IconButtonProps } from './IconButton';
+import { s } from './s';
+import { useS } from './useS';
+
+export const ActionIconButton: React.FC<IconButtonProps> = observer(function ActionIconButton(props) {
+  const styles = useS(style);
+
+  return <IconButton {...props} className={s(styles, { actionIconButton: true }, props.className)} />;
+});
diff --git a/webapp/packages/core-blocks/src/IconButton.tsx b/webapp/packages/core-blocks/src/IconButton.tsx
index 10f8b5f333..1158f6d740 100644
--- a/webapp/packages/core-blocks/src/IconButton.tsx
+++ b/webapp/packages/core-blocks/src/IconButton.tsx
@@ -5,17 +5,19 @@
  * Licensed under the Apache License, Version 2.0.
  * you may not use this file except in compliance with the License.
  */
+import { observer } from 'mobx-react-lite';
+import type React from 'react';
 import { Button, ButtonProps } from 'reakit/Button';
 import styled from 'reshadow';
 
 import type { ComponentStyle } from '@cloudbeaver/core-theming';
 
 import { Icon } from './Icon';
+import IconButtonStyles from './IconButton.m.css';
 import { s } from './s';
 import { StaticImage } from './StaticImage';
 import { useS } from './useS';
 import { useStyles } from './useStyles';
-import IconButtonStyles from './IconButton.m.css';
 
 interface Props {
   name: string;
@@ -24,7 +26,9 @@ interface Props {
   style?: ComponentStyle;
 }
 
-export function IconButton({ name, img, viewBox, style, className, ...rest }: Props & ButtonProps) {
+export type IconButtonProps = Props & ButtonProps;
+
+export const IconButton: React.FC<IconButtonProps> = observer(function IconButton({ name, img, viewBox, style, className, ...rest }) {
   const styles = useS(IconButtonStyles);
 
   return styled(useStyles(style))(
@@ -33,4 +37,4 @@ export function IconButton({ name, img, viewBox, style, className, ...rest }: Pr
       {!img && <Icon className={s(styles, { icon: true })} name={name} viewBox={viewBox} />}
     </Button>,
   );
-}
+});
diff --git a/webapp/packages/core-blocks/src/Menu/ACTION_ICON_BUTTON_STYLES.ts b/webapp/packages/core-blocks/src/Menu/ACTION_ICON_BUTTON_STYLES.ts
deleted file mode 100644
index 05180fdf80..0000000000
--- a/webapp/packages/core-blocks/src/Menu/ACTION_ICON_BUTTON_STYLES.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-/*
- * 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 { css } from 'reshadow';
-
-export const ACTION_ICON_BUTTON_STYLES = css`
-  IconButton {
-    composes: theme-form-element-radius theme-ripple from global;
-
-    padding: 4px !important;
-    margin: 2px !important;
-    width: 24px !important;
-    height: 24px !important;
-    overflow: hidden;
-    flex-shrink: 0;
-  }
-`;
diff --git a/webapp/packages/core-blocks/src/index.ts b/webapp/packages/core-blocks/src/index.ts
index 9918ccd680..dba7791f31 100644
--- a/webapp/packages/core-blocks/src/index.ts
+++ b/webapp/packages/core-blocks/src/index.ts
@@ -35,8 +35,6 @@ export * from './localization/useTranslate';
 export * from './ConnectionImageWithMask/ConnectionImageWithMask';
 export { default as ConnectionImageWithMaskSvgStyles } from './ConnectionImageWithMask/ConnectionImageWithMaskSvg.m.css';
 
-export * from './Menu/ACTION_ICON_BUTTON_STYLES';
-export { default as ActionIconButtonStyles } from './ActionIconButton.m.css';
 export * from './Menu/Menu';
 export { default as MenuStyles } from './Menu/Menu.m.css';
 export * from './Menu/MenuBarSmallItem';
@@ -182,6 +180,7 @@ export * from './ExceptionMessage';
 export { default as ExceptionMessageStyles } from './ExceptionMessage.m.css';
 export * from './getComputed';
 export * from './IconButton';
+export * from './ActionIconButton';
 export { default as IconButtonStyles } from './IconButton.m.css';
 export * from './IconOrImage';
 export * from './s';
diff --git a/webapp/packages/plugin-navigation-tree-filters/src/NavigationTreeFiltersDialog/FiltersTableItem.tsx b/webapp/packages/plugin-navigation-tree-filters/src/NavigationTreeFiltersDialog/FiltersTableItem.tsx
index c316e6b100..be6f80e702 100644
--- a/webapp/packages/plugin-navigation-tree-filters/src/NavigationTreeFiltersDialog/FiltersTableItem.tsx
+++ b/webapp/packages/plugin-navigation-tree-filters/src/NavigationTreeFiltersDialog/FiltersTableItem.tsx
@@ -7,7 +7,7 @@
  */
 import { observer } from 'mobx-react-lite';
 
-import { ActionIconButtonStyles, IconButton, s, TableColumnValue, TableItem, useS } from '@cloudbeaver/core-blocks';
+import { ActionIconButton, s, TableColumnValue, TableItem, useS } from '@cloudbeaver/core-blocks';
 
 import styles from './FiltersTableItem.m.css';
 
@@ -20,13 +20,13 @@ interface Props {
 }
 
 export const FiltersTableItem = observer<Props>(function FiltersTableItem({ id, name, disabled, className, onDelete }) {
-  const style = useS(ActionIconButtonStyles, styles);
+  const style = useS(styles);
 
   return (
     <TableItem className={s(style, { tableItem: true }, className)} item={id} title={name} disabled={disabled} selectDisabled={disabled}>
       <TableColumnValue>{name}</TableColumnValue>
       <TableColumnValue className={s(style, { deleteColumnCell: true })} flex>
-        <IconButton className={s(ActionIconButtonStyles, { actionIconButton: true })} name="cross-bold" onClick={() => onDelete(id)} />
+        <ActionIconButton name="cross-bold" onClick={() => onDelete(id)} />
       </TableColumnValue>
     </TableItem>
   );
diff --git a/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/ElementsTreeTools/ElementsTreeTools.tsx b/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/ElementsTreeTools/ElementsTreeTools.tsx
index aa5350864b..90099bae30 100644
--- a/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/ElementsTreeTools/ElementsTreeTools.tsx
+++ b/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/ElementsTreeTools/ElementsTreeTools.tsx
@@ -10,9 +10,8 @@ import React, { useState } from 'react';
 import styled from 'reshadow';
 
 import {
-  ActionIconButtonStyles,
+  ActionIconButton,
   Fill,
-  IconButton,
   IconButtonStyles,
   PlaceholderElement,
   s,
@@ -56,7 +55,7 @@ export const ElementsTreeTools = observer<React.PropsWithChildren<Props>>(functi
   const translate = useTranslate();
   const [opened, setOpen] = useState(false);
   const deprecatedStyles = useStyles(style);
-  const styles = useS(ElementsTreeToolsStyles, ElementsTreeToolsIconButtonStyles, ActionIconButtonStyles);
+  const styles = useS(ElementsTreeToolsStyles, ElementsTreeToolsIconButtonStyles);
 
   useCaptureViewContext(context => {
     context?.set(DATA_CONTEXT_NAV_TREE_ROOT, tree.baseRoot);
@@ -70,21 +69,21 @@ export const ElementsTreeTools = observer<React.PropsWithChildren<Props>>(functi
       <div className={s(styles, { tools: true })}>
         <div className={s(styles, { actions: true })}>
           {tree.settings?.configurable && (
-            <IconButton
+            <ActionIconButton
               name="/icons/settings_cog_sm.svg"
               title={translate('ui_settings')}
-              className={s(styles, { primary: true, actionIconButton: true, opened })}
+              className={s(styles, { primary: true, opened })}
               img
               onClick={() => setOpen(!opened)}
             />
           )}
           <Fill />
           <ElementsTreeToolsMenu tree={tree} />
-          <IconButton
+          <ActionIconButton
             name="/icons/refresh_sm.svg#root"
             title={translate('app_navigationTree_refresh')}
             disabled={loading}
-            className={s(styles, { primary: true, actionIconButton: true, loading })}
+            className={s(styles, { primary: true, loading })}
             img
             onClick={() => tree.refresh(root)}
           />

From 4ff1e43f70f7e40ccfaf1038479059c53de2a0c1 Mon Sep 17 00:00:00 2001
From: naumov <iamemptyhuh@gmail.com>
Date: Mon, 16 Oct 2023 16:37:43 +0200
Subject: [PATCH 2/3] CB-4038 update styles in image value panel

---
 .../ImageValue/ImageValuePresentation.tsx     | 27 +++----------------
 1 file changed, 4 insertions(+), 23 deletions(-)

diff --git a/webapp/packages/plugin-data-viewer/src/ValuePanelPresentation/ImageValue/ImageValuePresentation.tsx b/webapp/packages/plugin-data-viewer/src/ValuePanelPresentation/ImageValue/ImageValuePresentation.tsx
index f2d40524a8..fc1cee6b42 100644
--- a/webapp/packages/plugin-data-viewer/src/ValuePanelPresentation/ImageValue/ImageValuePresentation.tsx
+++ b/webapp/packages/plugin-data-viewer/src/ValuePanelPresentation/ImageValue/ImageValuePresentation.tsx
@@ -8,7 +8,7 @@
 import { action, computed, observable } from 'mobx';
 import { observer } from 'mobx-react-lite';
 
-import { ActionIconButtonStyles, Button, Container, Fill, IconButton, s, useObservableRef, useS, useTranslate } from '@cloudbeaver/core-blocks';
+import { ActionIconButton, Button, Container, Fill, s, useObservableRef, useS, useTranslate } from '@cloudbeaver/core-blocks';
 import { selectFiles } from '@cloudbeaver/core-browser';
 import { useService } from '@cloudbeaver/core-di';
 import { NotificationService } from '@cloudbeaver/core-events';
@@ -44,33 +44,14 @@ const Tools = observer<IToolsProps>(function Tools({ loading, stretch, onToggleS
   return (
     <Container gap dense keepSize>
       <Container keepSize flexStart center>
-        {onSave && (
-          <IconButton
-            title={translate('ui_download')}
-            className={ActionIconButtonStyles.actionIconButton}
-            name="/icons/export.svg"
-            disabled={loading}
-            img
-            onClick={onSave}
-          />
-        )}
-        {onUpload && (
-          <IconButton
-            title={translate('ui_upload')}
-            className={ActionIconButtonStyles.actionIconButton}
-            name="/icons/import.svg"
-            disabled={loading}
-            img
-            onClick={onUpload}
-          />
-        )}
+        {onSave && <ActionIconButton title={translate('ui_download')} name="/icons/export.svg" disabled={loading} img onClick={onSave} />}
+        {onUpload && <ActionIconButton title={translate('ui_upload')} name="/icons/import.svg" disabled={loading} img onClick={onUpload} />}
       </Container>
       <Fill />
       {onToggleStretch && (
         <Container keepSize flexEnd center>
-          <IconButton
+          <ActionIconButton
             title={translate(stretch ? 'data_viewer_presentation_value_image_original_size' : 'data_viewer_presentation_value_image_fit')}
-            className={ActionIconButtonStyles.actionIconButton}
             name={stretch ? 'img-original-size' : 'img-fit-size'}
             onClick={onToggleStretch}
           />

From ad543f94cb607093d768b3d44291f1f20f6231ca Mon Sep 17 00:00:00 2001
From: naumov <iamemptyhuh@gmail.com>
Date: Mon, 16 Oct 2023 16:40:00 +0200
Subject: [PATCH 3/3] CB-4038 keep default styles export

---
 webapp/packages/core-blocks/src/index.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/webapp/packages/core-blocks/src/index.ts b/webapp/packages/core-blocks/src/index.ts
index dba7791f31..f7f567b2b9 100644
--- a/webapp/packages/core-blocks/src/index.ts
+++ b/webapp/packages/core-blocks/src/index.ts
@@ -182,6 +182,7 @@ export * from './getComputed';
 export * from './IconButton';
 export * from './ActionIconButton';
 export { default as IconButtonStyles } from './IconButton.m.css';
+export { default as ActionIconButtonStyles } from './ActionIconButton.m.css';
 export * from './IconOrImage';
 export * from './s';
 export * from './SContext';