diff --git a/webapp/packages/core-administration/src/Administration/AdministrationTools/AdministrationTools.tsx b/webapp/packages/core-administration/src/Administration/AdministrationTools/AdministrationTools.tsx deleted file mode 100644 index 095aa7b751..0000000000 --- a/webapp/packages/core-administration/src/Administration/AdministrationTools/AdministrationTools.tsx +++ /dev/null @@ -1,21 +0,0 @@ -/* - * CloudBeaver - Cloud Database Manager - * Copyright (C) 2020-2021 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 styled from 'reshadow'; - -interface Props { - className?: string; -} - -export const AdministrationTools: React.FC = function AdministrationTools({ children, className }) { - return styled()( - - {children} - - ); -}; diff --git a/webapp/packages/core-administration/src/Administration/AdministrationTools/AdministrationToolsStyles.ts b/webapp/packages/core-administration/src/AdministrationToolsPanelStyles.ts similarity index 60% rename from webapp/packages/core-administration/src/Administration/AdministrationTools/AdministrationToolsStyles.ts rename to webapp/packages/core-administration/src/AdministrationToolsPanelStyles.ts index 9d8524d7e4..adc1b87d58 100644 --- a/webapp/packages/core-administration/src/Administration/AdministrationTools/AdministrationToolsStyles.ts +++ b/webapp/packages/core-administration/src/AdministrationToolsPanelStyles.ts @@ -11,26 +11,15 @@ import { css } from 'reshadow'; import { composes } from '@cloudbeaver/core-theming'; -export const ADMINISTRATION_TOOLS_STYLES = composes( +export const ADMINISTRATION_TOOLS_PANEL_STYLES = composes( css` - AdministrationTools { + ToolsPanel { composes: theme-background-surface theme-text-on-surface theme-border-color-background from global; } `, css` - AdministrationTools { - padding: 0 16px; - display: flex; - flex-shrink: 0; - align-items: center; + ToolsPanel { border-bottom: solid 1px; - height: 48px; - - & IconButton { - height: 32px; - width: 32px; - margin-right: 16px; - } } ` ); diff --git a/webapp/packages/core-administration/src/index.ts b/webapp/packages/core-administration/src/index.ts index bdac796b81..87d36baa22 100644 --- a/webapp/packages/core-administration/src/index.ts +++ b/webapp/packages/core-administration/src/index.ts @@ -1,5 +1,3 @@ -export * from './Administration/AdministrationTools/AdministrationTools'; -export * from './Administration/AdministrationTools/AdministrationToolsStyles'; export * from './AdministrationItem/AdministrationItemService'; export * from './AdministrationItem/IAdministrationItem'; export * from './AdministrationScreen/AdministrationScreenService'; @@ -9,6 +7,7 @@ export * from './AdministrationScreen/ConfigurationWizard/ConfigurationWizardSer export * from './AdministrationScreen/ConfigurationWizard/WizardTopAppBar/WizardTopAppBarService'; export * from './AdministrationScreen/ConfigurationWizard/ConfigurationWizardService'; export * from './AdministrationScreen/ConfigurationWizard/WizardTopAppBar/WizardTopAppBarService'; +export * from './AdministrationToolsPanelStyles'; export * from './AdministrationLocaleService'; export * from './EAdminPermission'; diff --git a/webapp/packages/core-app/public/icons/icons.svg b/webapp/packages/core-app/public/icons/icons.svg index 2767d5998b..cfa9e11531 100644 --- a/webapp/packages/core-app/public/icons/icons.svg +++ b/webapp/packages/core-app/public/icons/icons.svg @@ -77,28 +77,20 @@ - - - - - - + + - - - - - - + + - - + + - - + + @@ -130,10 +122,8 @@ - - - - + + diff --git a/webapp/packages/core-blocks/src/ToolsPanel/ToolsAction.tsx b/webapp/packages/core-blocks/src/ToolsPanel/ToolsAction.tsx new file mode 100644 index 0000000000..2dc7767082 --- /dev/null +++ b/webapp/packages/core-blocks/src/ToolsPanel/ToolsAction.tsx @@ -0,0 +1,59 @@ +/* + * CloudBeaver - Cloud Database Manager + * Copyright (C) 2020-2021 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 type { ButtonHTMLAttributes } from 'react'; +import styled, { css } from 'reshadow'; + +import { composes, useStyles } from '@cloudbeaver/core-theming'; + +import { IconOrImage } from '../IconOrImage'; + +const styles = composes( + css` + button { + composes: theme-ripple from global; + } + `, + css` + button { + padding: 0 16px; + display: flex; + align-items: center; + cursor: pointer; + background: transparent; + outline: none; + color: inherit; + } + IconOrImage { + display: block; + width: 24px; + } + button-label { + display: block; + text-transform: uppercase; + font-weight: 700; + } + IconOrImage + button-label { + padding-left: 8px + } + ` +); + +interface Props extends ButtonHTMLAttributes { + icon?: string; + viewBox?: string; +} + +export const ToolsAction: React.FC = function ToolsAction({ icon, viewBox, children, ...rest }) { + return styled(useStyles(styles))( + + ); +}; diff --git a/webapp/packages/core-blocks/src/ToolsPanel/ToolsPanel.tsx b/webapp/packages/core-blocks/src/ToolsPanel/ToolsPanel.tsx new file mode 100644 index 0000000000..082b78dccc --- /dev/null +++ b/webapp/packages/core-blocks/src/ToolsPanel/ToolsPanel.tsx @@ -0,0 +1,30 @@ +/* + * CloudBeaver - Cloud Database Manager + * Copyright (C) 2020-2021 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 styled, { css } from 'reshadow'; + +import { useStyles } from '@cloudbeaver/core-theming'; + +const styles = css` + container { + height: 48px; + display: flex; + } +`; + +interface Props { + className?: string; +} + +export const ToolsPanel: React.FC = function ToolsPanel({ className, children }) { + return styled(useStyles(styles))( + + {children} + + ); +}; diff --git a/webapp/packages/core-blocks/src/index.ts b/webapp/packages/core-blocks/src/index.ts index e2cbae0663..ec0d824959 100644 --- a/webapp/packages/core-blocks/src/index.ts +++ b/webapp/packages/core-blocks/src/index.ts @@ -30,6 +30,8 @@ export * from './Tree/TreeNode/TreeNodeSelect'; export * from './Tree/TreeNode/TreeNodeFilter'; export * from './Tree/TreeNode/TreeNodeStyles'; export * from './Button'; +export * from './ToolsPanel/ToolsAction'; +export * from './ToolsPanel/ToolsPanel'; export * from './FormControls/Checkboxes/Checkbox'; export * from './FormControls/Checkboxes/FieldCheckbox'; export * from './FormControls/Checkboxes/FieldCheckboxNew'; diff --git a/webapp/packages/core-connections/src/Administration/Connections/ConnectionsAdministration.tsx b/webapp/packages/core-connections/src/Administration/Connections/ConnectionsAdministration.tsx index 420b4a49ba..73df19ff45 100644 --- a/webapp/packages/core-connections/src/Administration/Connections/ConnectionsAdministration.tsx +++ b/webapp/packages/core-connections/src/Administration/Connections/ConnectionsAdministration.tsx @@ -9,10 +9,10 @@ import { observer } from 'mobx-react-lite'; import styled, { css, use } from 'reshadow'; -import { AdministrationTools, AdministrationItemContentProps, ADMINISTRATION_TOOLS_STYLES } from '@cloudbeaver/core-administration'; -import { Loader, IconButton, useMapResource } from '@cloudbeaver/core-blocks'; +import { AdministrationItemContentProps, ADMINISTRATION_TOOLS_PANEL_STYLES } from '@cloudbeaver/core-administration'; +import { Loader, useMapResource, ToolsAction, ToolsPanel } from '@cloudbeaver/core-blocks'; import { useController, useService } from '@cloudbeaver/core-di'; -import { Translate } from '@cloudbeaver/core-localization'; +import { Translate, useTranslate } from '@cloudbeaver/core-localization'; import { useStyles, composes } from '@cloudbeaver/core-theming'; import { ConnectionsResource } from '../ConnectionsResource'; @@ -38,6 +38,7 @@ const styles = composes( } layout-grid { + overflow: auto; width: 100%; flex: 1; } @@ -51,10 +52,6 @@ const styles = composes( border: solid 1px; } - AdministrationTools { - border: none; - } - actions { padding: 0 12px; padding-right: 24px; @@ -74,35 +71,62 @@ export const ConnectionsAdministration: React.FC }) { const service = useService(CreateConnectionService); const controller = useController(ConnectionsAdministrationController); + const translate = useTranslate(); useMapResource(ConnectionsResource, ConnectionsResource.keyAll); - return styled(useStyles(styles, ADMINISTRATION_TOOLS_STYLES))( - - - - {configurationWizard && ( - -

-

- - )} - - - - - - {sub && ( - - )} - - - - - + return styled(useStyles(styles, ADMINISTRATION_TOOLS_PANEL_STYLES))( + <> + + + {translate('ui_add')} + + + {translate('ui_refresh')} + + + {translate('ui_delete')} + + + + + + {configurationWizard && ( + +

+

+ + )} + {sub && ( + + )} + + + + + + ); }); diff --git a/webapp/packages/core-connections/src/Administration/Connections/ConnectionsAdministrationController.ts b/webapp/packages/core-connections/src/Administration/Connections/ConnectionsAdministrationController.ts index a94de61e9b..1ac1aa56f5 100644 --- a/webapp/packages/core-connections/src/Administration/Connections/ConnectionsAdministrationController.ts +++ b/webapp/packages/core-connections/src/Administration/Connections/ConnectionsAdministrationController.ts @@ -47,8 +47,9 @@ export class ConnectionsAdministrationController { this.isProcessing = true; try { await this.connectionsResource.refreshAll(); + this.notificationService.logSuccess({ title: 'connections_administration_tools_refresh_success' }); } catch (exception) { - this.notificationService.logException(exception, 'Connections update failed'); + this.notificationService.logException(exception, 'connections_administration_tools_refresh_fail'); } finally { this.isProcessing = false; } diff --git a/webapp/packages/core-connections/src/locales/en.ts b/webapp/packages/core-connections/src/locales/en.ts index 6d7232d7ce..1617093513 100644 --- a/webapp/packages/core-connections/src/locales/en.ts +++ b/webapp/packages/core-connections/src/locales/en.ts @@ -11,6 +11,11 @@ export default [ ['connections_administration_configuration_wizard_title', 'Add database connections'], ['connections_administration_configuration_wizard_message', 'Here you can create database connections manually or using a database server search.\nYou can skip this step and configure the connections later.'], ['connections_administration_connection_no_information', 'No information available'], + ['connections_administration_tools_add_tooltip', 'Add new connection'], + ['connections_administration_tools_refresh_tooltip', 'Refresh connection list'], + ['connections_administration_tools_delete_tooltip', 'Delete selected connections'], + ['connections_administration_tools_refresh_success', 'Connection list was refreshed'], + ['connections_administration_tools_refresh_fail', 'Connection list refresh failed'], ['connections_database_authentication', 'Database Authentication'], ['connections_connection_edit_not_own_deny', 'This connection was created by administrator. It cannot be updated.'], ['connections_connection_connect', 'Connect'], diff --git a/webapp/packages/core-connections/src/locales/ru.ts b/webapp/packages/core-connections/src/locales/ru.ts index 4a772b878c..e2515d3826 100644 --- a/webapp/packages/core-connections/src/locales/ru.ts +++ b/webapp/packages/core-connections/src/locales/ru.ts @@ -10,6 +10,11 @@ export default [ ['connections_administration_configuration_wizard_step_description', 'Подключения к базам'], ['connections_administration_configuration_wizard_message', 'Here you can create database connections manually or using a database server search.\nYou can skip this step and configure the connections later.'], ['connections_administration_connection_no_information', 'Нет доступной информации'], + ['connections_administration_tools_add_tooltip', 'Добавить новое подключение'], + ['connections_administration_tools_refresh_tooltip', 'Обновить список подключений'], + ['connections_administration_tools_delete_tooltip', 'Удалить выбранные подключения'], + ['connections_administration_tools_refresh_success', 'Список подключений обновлен'], + ['connections_administration_tools_refresh_fail', 'Не удалось обновить список подключений'], ['connections_connection_connect', 'Подключиться'], ['connections_connection_create_custom', 'Настроить'], ['connections_connection_create_search_database', 'Найти'], diff --git a/webapp/packages/core-localization/src/locales/en.ts b/webapp/packages/core-localization/src/locales/en.ts index 14093fb2a8..61691e047a 100644 --- a/webapp/packages/core-localization/src/locales/en.ts +++ b/webapp/packages/core-localization/src/locales/en.ts @@ -19,6 +19,8 @@ export const defaultENLocale = [ ['ui_errors_details', 'Details'], ['ui_search', 'Search...'], ['ui_delete', 'Delete'], + ['ui_add', 'Add'], + ['ui_refresh', 'Refresh'], ['ui_data_saving_error', 'Save error'], ['ui_data_delete_confirmation', 'Delete confirmation'], ['ui_no_matches_placeholder', 'Your search returned no matches.'], diff --git a/webapp/packages/core-localization/src/locales/ru.ts b/webapp/packages/core-localization/src/locales/ru.ts index 52288ed97e..5ad7af55af 100644 --- a/webapp/packages/core-localization/src/locales/ru.ts +++ b/webapp/packages/core-localization/src/locales/ru.ts @@ -17,6 +17,8 @@ export const defaultRULocale = [ ['ui_errors_details', 'Информация'], ['ui_search', 'Поиск...'], ['ui_delete', 'Удалить'], + ['ui_add', 'Добавить'], + ['ui_refresh', 'Обновить'], ['ui_data_saving_error', 'Ошибка при сохранении изменений'], ['ui_no_matches_placeholder', 'По вашему запросу ничего не найдено.'], ['ui_data_delete_confirmation', 'Подтвердите удаление'], diff --git a/webapp/packages/plugin-administration/src/ConfigurationWizard/ServerConfiguration/ServerConfigurationPage.tsx b/webapp/packages/plugin-administration/src/ConfigurationWizard/ServerConfiguration/ServerConfigurationPage.tsx index 6da79805ed..458313479f 100644 --- a/webapp/packages/plugin-administration/src/ConfigurationWizard/ServerConfiguration/ServerConfigurationPage.tsx +++ b/webapp/packages/plugin-administration/src/ConfigurationWizard/ServerConfiguration/ServerConfigurationPage.tsx @@ -9,8 +9,8 @@ import { observer } from 'mobx-react-lite'; import styled, { css } from 'reshadow'; -import { AdministrationItemContentComponent, AdministrationTools, ADMINISTRATION_TOOLS_STYLES, ConfigurationWizardService } from '@cloudbeaver/core-administration'; -import { BASE_CONTAINERS_STYLES, ColoredContainer, Container, Group, GroupItem, GroupTitle, IconButton, Loader, Placeholder, SubmittingForm, useFocus, useFormValidator } from '@cloudbeaver/core-blocks'; +import { AdministrationItemContentComponent, ADMINISTRATION_TOOLS_PANEL_STYLES, ConfigurationWizardService } from '@cloudbeaver/core-administration'; +import { BASE_CONTAINERS_STYLES, ColoredContainer, Container, Group, GroupItem, GroupTitle, ToolsAction, Loader, Placeholder, SubmittingForm, useFocus, useFormValidator, ToolsPanel } from '@cloudbeaver/core-blocks'; import { useService } from '@cloudbeaver/core-di'; import { CommonDialogService, ConfirmationDialog, DialogueStateResult } from '@cloudbeaver/core-dialogs'; import { useTranslate } from '@cloudbeaver/core-localization'; @@ -41,7 +41,7 @@ export const ServerConfigurationPage: AdministrationItemContentComponent = obser configurationWizard, }) { const translate = useTranslate(); - const style = useStyles(styles, ADMINISTRATION_TOOLS_STYLES, BASE_CONTAINERS_STYLES); + const style = useStyles(styles, ADMINISTRATION_TOOLS_PANEL_STYLES, BASE_CONTAINERS_STYLES); const [focusedRef] = useFocus({ focusFirstChild: true }); const service = useService(ServerConfigurationService); const serverConfigResource = useService(ServerConfigResource); @@ -83,10 +83,26 @@ export const ServerConfigurationPage: AdministrationItemContentComponent = obser return styled(style)( {!configurationWizard && ( - - - - + + + {translate('ui_processing_save')} + + + {translate('ui_processing_cancel')} + + )} {configurationWizard && ( @@ -99,7 +115,6 @@ export const ServerConfigurationPage: AdministrationItemContentComponent = obser )} - {() => styled(style)( diff --git a/webapp/packages/plugin-administration/src/locales/en.ts b/webapp/packages/plugin-administration/src/locales/en.ts index 89eca1736d..cf6e0effdf 100644 --- a/webapp/packages/plugin-administration/src/locales/en.ts +++ b/webapp/packages/plugin-administration/src/locales/en.ts @@ -13,6 +13,9 @@ export default [ ['administration_configuration_wizard_configuration_title', 'You can configure the main server parameters here.'], ['administration_configuration_wizard_configuration_message', 'Administrator is a super user who can configure server, set databases connections, manage other users and much more. Please, remember the entered password. It is not possible to recover administrator password automatically.'], + ['administration_configuration_tools_save_tooltip', 'Save configuration'], + ['administration_configuration_tools_cancel_tooltip', 'Reset changes'], + ['administration_configuration_wizard_configuration_server_info', 'Server Information'], ['administration_configuration_wizard_configuration_server_name', 'Server Name'], ['administration_configuration_wizard_configuration_server_info_unsaved_title', 'Unsaved settings'], diff --git a/webapp/packages/plugin-administration/src/locales/ru.ts b/webapp/packages/plugin-administration/src/locales/ru.ts index b96c71e0e8..c1e74068be 100644 --- a/webapp/packages/plugin-administration/src/locales/ru.ts +++ b/webapp/packages/plugin-administration/src/locales/ru.ts @@ -10,6 +10,9 @@ export default [ ['administration_configuration_wizard_configuration_server_session_lifetime', 'Время сессии'], ['administration_configuration_wizard_configuration_server_session_lifetime_description', 'В случае бездействия пользователя на протяжении указанного количества минут, его сессия будет закрыта.'], + ['administration_configuration_tools_save_tooltip', 'Сохранить конфигурацию'], + ['administration_configuration_tools_cancel_tooltip', 'Отменить изменения'], + ['administration_configuration_wizard_configuration_plugins', 'Настройки'], ['administration_configuration_wizard_configuration_custom_connections', 'Разрешить пользовательские подключения'], ['administration_configuration_wizard_configuration_custom_connections_description', 'Позволяет пользователям создавать собственные подключения. Иначе, любые подключения могут быть добавлены только со страницы администрирования'], diff --git a/webapp/packages/plugin-authentication/src/Administration/Users/UsersAdministration.tsx b/webapp/packages/plugin-authentication/src/Administration/Users/UsersAdministration.tsx index 5ffdc31acc..9bfd7bd3d5 100644 --- a/webapp/packages/plugin-authentication/src/Administration/Users/UsersAdministration.tsx +++ b/webapp/packages/plugin-authentication/src/Administration/Users/UsersAdministration.tsx @@ -9,9 +9,10 @@ import { observer } from 'mobx-react-lite'; import styled, { css, use } from 'reshadow'; -import { AdministrationTools, AdministrationItemContentProps, ADMINISTRATION_TOOLS_STYLES } from '@cloudbeaver/core-administration'; -import { Loader, IconButton } from '@cloudbeaver/core-blocks'; +import { AdministrationItemContentProps, ADMINISTRATION_TOOLS_PANEL_STYLES } from '@cloudbeaver/core-administration'; +import { Loader, ToolsAction, ToolsPanel } from '@cloudbeaver/core-blocks'; import { useController, useService } from '@cloudbeaver/core-di'; +import { useTranslate } from '@cloudbeaver/core-localization'; import { useStyles, composes } from '@cloudbeaver/core-theming'; import { CreateUser } from './CreateUser'; @@ -32,9 +33,11 @@ const styles = composes( css` layout-grid { width: 100%; + overflow: auto; + flex: 1; } - layout-grid, layout-grid-inner { + layout-grid-inner { min-height: 100%; } @@ -43,10 +46,6 @@ const styles = composes( border: solid 1px; } - AdministrationTools { - border: none; - } - Loader { height: 100%; } @@ -56,26 +55,50 @@ const styles = composes( export const UsersAdministration = observer(function UsersAdministration({ sub, }: AdministrationItemContentProps) { + const translate = useTranslate(); const service = useService(CreateUserService); const controller = useController(UsersAdministrationController); + const isLocalProviderAvailable = controller.isLocalProviderAvailable; - return styled(useStyles(styles, ADMINISTRATION_TOOLS_STYLES))( - - - - {controller.isProvidersLoading - ? - : ( + return styled(useStyles(styles, ADMINISTRATION_TOOLS_PANEL_STYLES))( + <> + + {isLocalProviderAvailable && ( + + {translate('ui_add')} + + )} + + {translate('ui_refresh')} + + {isLocalProviderAvailable && ( + + {translate('ui_delete')} + + )} + + + + + {controller.isProvidersLoading ? : ( <> - - {controller.isLocalProviderAvailable && ( - <> - - - - )} - - {sub && service.user && ( )} @@ -88,8 +111,9 @@ export const UsersAdministration = observer(function UsersAdministration({ )} - - - + + + + ); }); diff --git a/webapp/packages/plugin-authentication/src/Administration/Users/UsersAdministrationController.ts b/webapp/packages/plugin-authentication/src/Administration/Users/UsersAdministrationController.ts index 9b5b04f7aa..a23eca6acb 100644 --- a/webapp/packages/plugin-authentication/src/Administration/Users/UsersAdministrationController.ts +++ b/webapp/packages/plugin-authentication/src/Administration/Users/UsersAdministrationController.ts @@ -71,6 +71,7 @@ export class UsersAdministrationController implements IInitializableController { update = async () => { try { await this.usersResource.refreshAll(); + this.notificationService.logSuccess({ title: 'authentication_administration_tools_refresh_success' }); } catch (exception) { if (!this.error.catch(exception)) { this.notificationService.logException(exception, 'Users update failed'); diff --git a/webapp/packages/plugin-authentication/src/locales/en.ts b/webapp/packages/plugin-authentication/src/locales/en.ts index e38e2ece04..f782ffef1f 100644 --- a/webapp/packages/plugin-authentication/src/locales/en.ts +++ b/webapp/packages/plugin-authentication/src/locales/en.ts @@ -17,6 +17,10 @@ export default [ ['authentication_administration_user_origin_empty', 'No available details'], ['authentication_administration_user_info', 'Info'], ['authentication_administration_item', 'Users'], + ['authentication_administration_tools_add_tooltip', 'Add new user'], + ['authentication_administration_tools_refresh_tooltip', 'Refresh user list'], + ['authentication_administration_tools_delete_tooltip', 'Delete selected users'], + ['authentication_administration_tools_refresh_success', 'User list was refreshed'], ['authentication_administration_user_updated', 'User updated'], ['authentication_administration_user_created', 'User was created successfully'], ['authentication_user_name', 'User name'], diff --git a/webapp/packages/plugin-authentication/src/locales/ru.ts b/webapp/packages/plugin-authentication/src/locales/ru.ts index 23a97c0d97..5675bad6a8 100644 --- a/webapp/packages/plugin-authentication/src/locales/ru.ts +++ b/webapp/packages/plugin-authentication/src/locales/ru.ts @@ -15,6 +15,10 @@ export default [ ['authentication_administration_user_origin_empty', 'Дополнительная информация не доступна'], ['authentication_administration_user_info', 'Общее'], ['authentication_administration_item', 'Пользователи'], + ['authentication_administration_tools_add_tooltip', 'Добавить нового пользователя'], + ['authentication_administration_tools_refresh_tooltip', 'Обновить список пользователей'], + ['authentication_administration_tools_delete_tooltip', 'Удалить выбранных пользователей'], + ['authentication_administration_tools_refresh_success', 'Список пользователей обновлен'], ['authentication_administration_user_updated', 'User updated'], ['authentication_administration_user_created', 'Пользователь создан успешно'], ['authentication_user_name', 'Имя'], diff --git a/webapp/packages/plugin-data-viewer/src/TableViewer/TableFooter/TableFooter.tsx b/webapp/packages/plugin-data-viewer/src/TableViewer/TableFooter/TableFooter.tsx index 07522a1ae0..f1f7e0031d 100644 --- a/webapp/packages/plugin-data-viewer/src/TableViewer/TableFooter/TableFooter.tsx +++ b/webapp/packages/plugin-data-viewer/src/TableViewer/TableFooter/TableFooter.tsx @@ -10,7 +10,7 @@ import { observer } from 'mobx-react-lite'; import { useCallback, useRef } from 'react'; import styled, { css, use } from 'reshadow'; -import { IconButton, SubmittingForm } from '@cloudbeaver/core-blocks'; +import { IconButton, SubmittingForm, ToolsPanel } from '@cloudbeaver/core-blocks'; import { composes, useStyles } from '@cloudbeaver/core-theming'; import type { IDatabaseDataModel } from '../../DatabaseDataModel/IDatabaseDataModel'; @@ -23,11 +23,9 @@ const tableFooterStyles = composes( } `, css` - table-footer { - height: 40px; - flex: 0 0 auto; - display: flex; + ToolsPanel { align-items: center; + flex: 0 0 auto; } count input, count placeholder { @@ -89,8 +87,8 @@ export const TableFooter = observer(function TableFooter({ ); return styled(useStyles(tableFooterStyles))( - - + + model.refresh()} /> - + )} - + ); }); diff --git a/webapp/packages/plugin-data-viewer/src/TableViewer/TableFooter/TableFooterMenu/TableFooterMenu.tsx b/webapp/packages/plugin-data-viewer/src/TableViewer/TableFooter/TableFooterMenu/TableFooterMenu.tsx index 022b9dcd90..430eaaaf66 100644 --- a/webapp/packages/plugin-data-viewer/src/TableViewer/TableFooter/TableFooterMenu/TableFooterMenu.tsx +++ b/webapp/packages/plugin-data-viewer/src/TableViewer/TableFooter/TableFooterMenu/TableFooterMenu.tsx @@ -20,10 +20,6 @@ const styles = css` display: flex; height: 100%; } - TableFooterMenuItem { - text-transform: uppercase; - font-weight: 700; - } `; interface TableFooterMenuProps { @@ -40,7 +36,7 @@ export const TableFooterMenu = observer(function TableFooterMenu({ const mainMenuService = useService(TableFooterMenuService); return styled(styles)( - + {mainMenuService.constructMenuWithContext(model, resultIndex).map((topItem, i) => ( ))} diff --git a/webapp/packages/plugin-data-viewer/src/TableViewer/TableFooter/TableFooterMenu/TableFooterMenuItem.tsx b/webapp/packages/plugin-data-viewer/src/TableViewer/TableFooter/TableFooterMenu/TableFooterMenuItem.tsx index f4fa84cf31..23846e0c63 100644 --- a/webapp/packages/plugin-data-viewer/src/TableViewer/TableFooter/TableFooterMenu/TableFooterMenuItem.tsx +++ b/webapp/packages/plugin-data-viewer/src/TableViewer/TableFooter/TableFooterMenu/TableFooterMenuItem.tsx @@ -8,10 +8,9 @@ import { observer } from 'mobx-react-lite'; import type { ButtonHTMLAttributes } from 'react'; -import { Button } from 'reakit'; import styled, { css } from 'reshadow'; -import { IconOrImage } from '@cloudbeaver/core-blocks'; +import { IconOrImage, ToolsAction } from '@cloudbeaver/core-blocks'; import { IMenuItem, MenuTrigger } from '@cloudbeaver/core-dialogs'; import { useTranslate } from '@cloudbeaver/core-localization'; import { composes, useStyles } from '@cloudbeaver/core-theming'; @@ -25,25 +24,18 @@ export const tableFooterMenuStyles = composes( Menu { composes: theme-text-on-surface from global; } - Button { - composes: theme-text-on-secondary from global; - } - MenuTrigger, Button { + MenuTrigger { composes: theme-ripple from global; } `, css` - MenuTrigger, Button { + MenuTrigger { height: 100%; padding: 0 16px; display: flex; align-items: center; cursor: pointer; } - Button { - background: transparent; - outline: none; - } menu-trigger-icon IconOrImage { display: block; width: 24px; @@ -65,37 +57,33 @@ export const TableFooterMenuItem = observer(function TableFooterMenuItem({ const styles = useStyles(tableFooterMenuStyles); if (!menuItem.panel) { - return styled(styles)( - + >{translate(menuItem.title)} + ); } return styled(styles)( {menuItem.icon && ( - + )} - {menuItem.title && {translate(menuItem.title)}} + {menuItem.title && {translate(menuItem.title)}} ); });