From 3e3ac53865e82b91115227507baa00a4df5b5326 Mon Sep 17 00:00:00 2001 From: Naumov Alexey Date: Mon, 26 Apr 2021 18:01:48 +0300 Subject: [PATCH 1/5] feat(core-app): CB-889 changed icons from administation tools bar to labeled icon buttons --- .../AdministrationToolsStyles.ts | 9 +- .../packages/core-app/public/icons/icons.svg | 30 ++---- .../core-blocks/src/LabeledIconButton.tsx | 60 ++++++++++++ webapp/packages/core-blocks/src/index.ts | 1 + .../Connections/ConnectionsAdministration.tsx | 86 ++++++++++------- .../ConnectionsAdministrationController.ts | 5 +- .../core-connections/src/locales/en.ts | 5 + .../core-connections/src/locales/ru.ts | 5 + .../core-localization/src/locales/en.ts | 2 + .../core-localization/src/locales/ru.ts | 2 + .../core-utils/src/RequireAtLeastOne.ts | 16 ++++ webapp/packages/core-utils/src/index.ts | 1 + .../ServerConfigurationPage.tsx | 20 +++- .../plugin-administration/src/locales/en.ts | 3 + .../plugin-administration/src/locales/ru.ts | 3 + .../Users/UsersAdministration.tsx | 95 ++++++++++++------- .../Users/UsersAdministrationController.ts | 3 +- .../plugin-authentication/src/locales/en.ts | 4 + .../plugin-authentication/src/locales/ru.ts | 4 + .../TableFooterMenu/TableFooterMenuItem.tsx | 39 ++------ 20 files changed, 262 insertions(+), 131 deletions(-) create mode 100644 webapp/packages/core-blocks/src/LabeledIconButton.tsx create mode 100644 webapp/packages/core-utils/src/RequireAtLeastOne.ts diff --git a/webapp/packages/core-administration/src/Administration/AdministrationTools/AdministrationToolsStyles.ts b/webapp/packages/core-administration/src/Administration/AdministrationTools/AdministrationToolsStyles.ts index 9d8524d7e4..559d31f29b 100644 --- a/webapp/packages/core-administration/src/Administration/AdministrationTools/AdministrationToolsStyles.ts +++ b/webapp/packages/core-administration/src/Administration/AdministrationTools/AdministrationToolsStyles.ts @@ -19,17 +19,14 @@ export const ADMINISTRATION_TOOLS_STYLES = composes( `, css` AdministrationTools { - padding: 0 16px; display: flex; flex-shrink: 0; align-items: center; border-bottom: solid 1px; height: 48px; - - & IconButton { - height: 32px; - width: 32px; - margin-right: 16px; + & LabeledIconButton { + font-weight: 600; + font-size: 15px; } } ` diff --git a/webapp/packages/core-app/public/icons/icons.svg b/webapp/packages/core-app/public/icons/icons.svg index ba0ebf32e9..c58ec2480f 100644 --- a/webapp/packages/core-app/public/icons/icons.svg +++ b/webapp/packages/core-app/public/icons/icons.svg @@ -73,28 +73,20 @@ - - - - - - + + - - - - - - + + - - + + - - + + @@ -126,10 +118,8 @@ - - - - + + diff --git a/webapp/packages/core-blocks/src/LabeledIconButton.tsx b/webapp/packages/core-blocks/src/LabeledIconButton.tsx new file mode 100644 index 0000000000..9a36a4aa0c --- /dev/null +++ b/webapp/packages/core-blocks/src/LabeledIconButton.tsx @@ -0,0 +1,60 @@ +/* + * 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 type { RequireAtLeastOne } from '@cloudbeaver/core-utils'; + +import { Button } from './Button'; +import { IconOrImage } from './IconOrImage'; + +const styles = composes( + css` + Button { + composes: theme-ripple from global; + } + `, + css` + Button { + height: 100%; + 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; + padding-left: 8px + } + ` +); + +interface Props extends ButtonHTMLAttributes { + label?: string; + icon?: string; + viewBox?: string; +} + +export const LabeledIconButton: React.FC> = function LabeledIconButton({ label, icon, viewBox, ...rest }) { + return styled(useStyles(styles))( + + ); +}; diff --git a/webapp/packages/core-blocks/src/index.ts b/webapp/packages/core-blocks/src/index.ts index e2cbae0663..591df58648 100644 --- a/webapp/packages/core-blocks/src/index.ts +++ b/webapp/packages/core-blocks/src/index.ts @@ -30,6 +30,7 @@ export * from './Tree/TreeNode/TreeNodeSelect'; export * from './Tree/TreeNode/TreeNodeFilter'; export * from './Tree/TreeNode/TreeNodeStyles'; export * from './Button'; +export * from './LabeledIconButton'; 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..672ee52915 100644 --- a/webapp/packages/core-connections/src/Administration/Connections/ConnectionsAdministration.tsx +++ b/webapp/packages/core-connections/src/Administration/Connections/ConnectionsAdministration.tsx @@ -10,9 +10,9 @@ 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 { Loader, useMapResource, LabeledIconButton } 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,60 @@ 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 && ( - - )} - - - - - + <> + + + + + + + + + {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..55c34bf6e8 100644 --- a/webapp/packages/core-connections/src/Administration/Connections/ConnectionsAdministrationController.ts +++ b/webapp/packages/core-connections/src/Administration/Connections/ConnectionsAdministrationController.ts @@ -10,7 +10,7 @@ import { observable, computed, makeObservable } from 'mobx'; import { injectable } from '@cloudbeaver/core-di'; import { CommonDialogService, ConfirmationDialog, DialogueStateResult } from '@cloudbeaver/core-dialogs'; -import { NotificationService } from '@cloudbeaver/core-events'; +import { ENotificationType, NotificationService } from '@cloudbeaver/core-events'; import { resourceKeyList } from '@cloudbeaver/core-sdk'; import { DatabaseConnection, compareConnections, ConnectionsResource } from '../ConnectionsResource'; @@ -47,8 +47,9 @@ export class ConnectionsAdministrationController { this.isProcessing = true; try { await this.connectionsResource.refreshAll(); + this.notificationService.notify({ title: 'connections_administration_tools_refresh_success' }, ENotificationType.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..8cfe6ea16f 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 connections'], + ['connections_administration_tools_delete_tooltip', 'Delete selected connections'], + ['connections_administration_tools_refresh_success', 'Connections were refreshed'], + ['connections_administration_tools_refresh_fail', 'Connections 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..affc54598a 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/core-utils/src/RequireAtLeastOne.ts b/webapp/packages/core-utils/src/RequireAtLeastOne.ts new file mode 100644 index 0000000000..aec2f73f3b --- /dev/null +++ b/webapp/packages/core-utils/src/RequireAtLeastOne.ts @@ -0,0 +1,16 @@ +/* + * 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. + */ + +/** + * A generalizable way to require at least one of a set of properties. + */ +export type RequireAtLeastOne = + Pick> + & { + [K in Keys]-?: Required> & Partial>> + }[Keys]; diff --git a/webapp/packages/core-utils/src/index.ts b/webapp/packages/core-utils/src/index.ts index ae34073384..a6d4705050 100644 --- a/webapp/packages/core-utils/src/index.ts +++ b/webapp/packages/core-utils/src/index.ts @@ -12,6 +12,7 @@ export * from './md5'; export * from './TextTools'; export * from './copyToClipboard'; export * from './declensionOfNumber'; +export * from './RequireAtLeastOne'; export * from './Promises/CancellablePromise'; export * from './Promises/Deferred'; diff --git a/webapp/packages/plugin-administration/src/ConfigurationWizard/ServerConfiguration/ServerConfigurationPage.tsx b/webapp/packages/plugin-administration/src/ConfigurationWizard/ServerConfiguration/ServerConfigurationPage.tsx index 6da79805ed..e8fd1b7a9d 100644 --- a/webapp/packages/plugin-administration/src/ConfigurationWizard/ServerConfiguration/ServerConfigurationPage.tsx +++ b/webapp/packages/plugin-administration/src/ConfigurationWizard/ServerConfiguration/ServerConfigurationPage.tsx @@ -10,7 +10,7 @@ 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 { BASE_CONTAINERS_STYLES, ColoredContainer, Container, Group, GroupItem, GroupTitle, LabeledIconButton, Loader, Placeholder, SubmittingForm, useFocus, useFormValidator } from '@cloudbeaver/core-blocks'; import { useService } from '@cloudbeaver/core-di'; import { CommonDialogService, ConfirmationDialog, DialogueStateResult } from '@cloudbeaver/core-dialogs'; import { useTranslate } from '@cloudbeaver/core-localization'; @@ -84,8 +84,22 @@ export const ServerConfigurationPage: AdministrationItemContentComponent = obser {!configurationWizard && ( - - + + )} diff --git a/webapp/packages/plugin-administration/src/locales/en.ts b/webapp/packages/plugin-administration/src/locales/en.ts index 89eca1736d..16d81a0746 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', 'Cancel 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..481a614b70 100644 --- a/webapp/packages/plugin-authentication/src/Administration/Users/UsersAdministration.tsx +++ b/webapp/packages/plugin-authentication/src/Administration/Users/UsersAdministration.tsx @@ -10,8 +10,9 @@ 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 { Loader, LabeledIconButton } 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,40 +55,64 @@ 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 - ? - : ( - <> - - {controller.isLocalProviderAvailable && ( - <> - - - + <> + + {isLocalProviderAvailable && ( + + )} + + {isLocalProviderAvailable && ( + + )} + + + + + {controller.isProvidersLoading + ? + : ( + <> + {sub && service.user && ( + )} - - - {sub && service.user && ( - - )} - - - - )} - - - + + + + )} + + + + ); }); diff --git a/webapp/packages/plugin-authentication/src/Administration/Users/UsersAdministrationController.ts b/webapp/packages/plugin-authentication/src/Administration/Users/UsersAdministrationController.ts index 9b5b04f7aa..90c424caf9 100644 --- a/webapp/packages/plugin-authentication/src/Administration/Users/UsersAdministrationController.ts +++ b/webapp/packages/plugin-authentication/src/Administration/Users/UsersAdministrationController.ts @@ -11,7 +11,7 @@ import { observable, computed, makeObservable } from 'mobx'; import { AdminUser, AuthProvidersResource, AUTH_PROVIDER_LOCAL_ID, UsersResource } from '@cloudbeaver/core-authentication'; import { injectable, IInitializableController } from '@cloudbeaver/core-di'; import { CommonDialogService, ConfirmationDialog, DialogueStateResult } from '@cloudbeaver/core-dialogs'; -import { NotificationService } from '@cloudbeaver/core-events'; +import { ENotificationType, NotificationService } from '@cloudbeaver/core-events'; import { ErrorDetailsDialog } from '@cloudbeaver/core-notifications'; import { GQLErrorCatcher, resourceKeyList } from '@cloudbeaver/core-sdk'; @@ -71,6 +71,7 @@ export class UsersAdministrationController implements IInitializableController { update = async () => { try { await this.usersResource.refreshAll(); + this.notificationService.notify({ title: 'authentication_administration_tools_refresh_success' }, ENotificationType.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..0c9b19f2a4 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/TableFooterMenu/TableFooterMenuItem.tsx b/webapp/packages/plugin-data-viewer/src/TableViewer/TableFooter/TableFooterMenu/TableFooterMenuItem.tsx index f4fa84cf31..a1c2e613b9 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, LabeledIconButton } 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,8 @@ export const tableFooterMenuStyles = composes( Menu { composes: theme-text-on-surface from global; } - Button { - composes: theme-text-on-secondary from global; - } - MenuTrigger, Button { - composes: theme-ripple from global; - } `, css` - MenuTrigger, Button { - 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,21 +47,16 @@ export const TableFooterMenuItem = observer(function TableFooterMenuItem({ const styles = useStyles(tableFooterMenuStyles); if (!menuItem.panel) { - return styled(styles)( - + /> ); } From 8c19e1a69ef8f4c63c51f8148d6a998d3a59c9ad Mon Sep 17 00:00:00 2001 From: Naumov Alexey Date: Tue, 27 Apr 2021 18:46:26 +0300 Subject: [PATCH 2/5] feat(core-app): CB-889 ToolsPanel instead of AdministrationTools --- .../AdministrationTools.tsx | 21 ------------- ...s.ts => AdministrationToolsPanelStyles.ts} | 14 ++------- .../packages/core-administration/src/index.ts | 3 +- .../packages/core-app/public/icons/icons.svg | 4 +-- .../ToolsAction.tsx} | 16 +++++----- .../core-blocks/src/ToolsPanel/ToolsPanel.tsx | 30 +++++++++++++++++++ webapp/packages/core-blocks/src/index.ts | 3 +- .../Connections/ConnectionsAdministration.tsx | 29 +++++++++--------- .../ConnectionsAdministrationController.ts | 2 +- .../core-connections/src/locales/en.ts | 6 ++-- .../core-connections/src/locales/ru.ts | 4 +-- .../ServerConfigurationPage.tsx | 22 +++++++------- .../plugin-administration/src/locales/en.ts | 2 +- .../Users/UsersAdministration.tsx | 28 ++++++++--------- .../Users/UsersAdministrationController.ts | 2 +- .../plugin-authentication/src/locales/ru.ts | 2 +- .../TableViewer/TableFooter/TableFooter.tsx | 11 +++---- .../TableFooterMenu/TableFooterMenu.tsx | 4 --- .../TableFooterMenu/TableFooterMenuItem.tsx | 18 ++++++++--- 19 files changed, 113 insertions(+), 108 deletions(-) delete mode 100644 webapp/packages/core-administration/src/Administration/AdministrationTools/AdministrationTools.tsx rename webapp/packages/core-administration/src/{Administration/AdministrationTools/AdministrationToolsStyles.ts => AdministrationToolsPanelStyles.ts} (63%) rename webapp/packages/core-blocks/src/{LabeledIconButton.tsx => ToolsPanel/ToolsAction.tsx} (72%) create mode 100644 webapp/packages/core-blocks/src/ToolsPanel/ToolsPanel.tsx 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 63% rename from webapp/packages/core-administration/src/Administration/AdministrationTools/AdministrationToolsStyles.ts rename to webapp/packages/core-administration/src/AdministrationToolsPanelStyles.ts index 559d31f29b..adc1b87d58 100644 --- a/webapp/packages/core-administration/src/Administration/AdministrationTools/AdministrationToolsStyles.ts +++ b/webapp/packages/core-administration/src/AdministrationToolsPanelStyles.ts @@ -11,23 +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 { - display: flex; - flex-shrink: 0; - align-items: center; + ToolsPanel { border-bottom: solid 1px; - height: 48px; - & LabeledIconButton { - font-weight: 600; - font-size: 15px; - } } ` ); 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 c58ec2480f..9b51024bb5 100644 --- a/webapp/packages/core-app/public/icons/icons.svg +++ b/webapp/packages/core-app/public/icons/icons.svg @@ -82,7 +82,7 @@ - + @@ -119,7 +119,7 @@ - + diff --git a/webapp/packages/core-blocks/src/LabeledIconButton.tsx b/webapp/packages/core-blocks/src/ToolsPanel/ToolsAction.tsx similarity index 72% rename from webapp/packages/core-blocks/src/LabeledIconButton.tsx rename to webapp/packages/core-blocks/src/ToolsPanel/ToolsAction.tsx index 9a36a4aa0c..224048d1d1 100644 --- a/webapp/packages/core-blocks/src/LabeledIconButton.tsx +++ b/webapp/packages/core-blocks/src/ToolsPanel/ToolsAction.tsx @@ -10,10 +10,9 @@ import type { ButtonHTMLAttributes } from 'react'; import styled, { css } from 'reshadow'; import { composes, useStyles } from '@cloudbeaver/core-theming'; -import type { RequireAtLeastOne } from '@cloudbeaver/core-utils'; -import { Button } from './Button'; -import { IconOrImage } from './IconOrImage'; +import { Button } from '../Button'; +import { IconOrImage } from '../IconOrImage'; const styles = composes( css` @@ -23,7 +22,6 @@ const styles = composes( `, css` Button { - height: 100%; padding: 0 16px; display: flex; align-items: center; @@ -32,29 +30,31 @@ const styles = composes( outline: none; color: inherit; } - IconOrImage { + 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 { - label?: string; icon?: string; viewBox?: string; } -export const LabeledIconButton: React.FC> = function LabeledIconButton({ label, icon, viewBox, ...rest }) { +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..f002604dae --- /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 591df58648..ec0d824959 100644 --- a/webapp/packages/core-blocks/src/index.ts +++ b/webapp/packages/core-blocks/src/index.ts @@ -30,7 +30,8 @@ export * from './Tree/TreeNode/TreeNodeSelect'; export * from './Tree/TreeNode/TreeNodeFilter'; export * from './Tree/TreeNode/TreeNodeStyles'; export * from './Button'; -export * from './LabeledIconButton'; +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 672ee52915..16a188af59 100644 --- a/webapp/packages/core-connections/src/Administration/Connections/ConnectionsAdministration.tsx +++ b/webapp/packages/core-connections/src/Administration/Connections/ConnectionsAdministration.tsx @@ -9,8 +9,8 @@ import { observer } from 'mobx-react-lite'; import styled, { css, use } from 'reshadow'; -import { AdministrationTools, AdministrationItemContentProps, ADMINISTRATION_TOOLS_STYLES } from '@cloudbeaver/core-administration'; -import { Loader, useMapResource, LabeledIconButton } 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, useTranslate } from '@cloudbeaver/core-localization'; import { useStyles, composes } from '@cloudbeaver/core-theming'; @@ -75,34 +75,35 @@ export const ConnectionsAdministration: React.FC useMapResource(ConnectionsResource, ConnectionsResource.keyAll); - return styled(useStyles(styles, ADMINISTRATION_TOOLS_STYLES))( + return styled(useStyles(styles, ADMINISTRATION_TOOLS_PANEL_STYLES))( <> - - + - {translate('ui_add')} + + - {translate('ui_refresh')} + + - + > + {translate('ui_delete')} + + diff --git a/webapp/packages/core-connections/src/Administration/Connections/ConnectionsAdministrationController.ts b/webapp/packages/core-connections/src/Administration/Connections/ConnectionsAdministrationController.ts index 55c34bf6e8..f5983493e9 100644 --- a/webapp/packages/core-connections/src/Administration/Connections/ConnectionsAdministrationController.ts +++ b/webapp/packages/core-connections/src/Administration/Connections/ConnectionsAdministrationController.ts @@ -47,7 +47,7 @@ export class ConnectionsAdministrationController { this.isProcessing = true; try { await this.connectionsResource.refreshAll(); - this.notificationService.notify({ title: 'connections_administration_tools_refresh_success' }, ENotificationType.Success); + this.notificationService.logSuccess({ title: 'connections_administration_tools_refresh_success' }); } catch (exception) { this.notificationService.logException(exception, 'connections_administration_tools_refresh_fail'); } finally { diff --git a/webapp/packages/core-connections/src/locales/en.ts b/webapp/packages/core-connections/src/locales/en.ts index 8cfe6ea16f..1617093513 100644 --- a/webapp/packages/core-connections/src/locales/en.ts +++ b/webapp/packages/core-connections/src/locales/en.ts @@ -12,10 +12,10 @@ export default [ ['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 connections'], + ['connections_administration_tools_refresh_tooltip', 'Refresh connection list'], ['connections_administration_tools_delete_tooltip', 'Delete selected connections'], - ['connections_administration_tools_refresh_success', 'Connections were refreshed'], - ['connections_administration_tools_refresh_fail', 'Connections refresh failed'], + ['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 affc54598a..d66109c641 100644 --- a/webapp/packages/core-connections/src/locales/ru.ts +++ b/webapp/packages/core-connections/src/locales/ru.ts @@ -11,10 +11,10 @@ export default [ ['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_refresh_tooltip', 'Обновить список подключений'], ['connections_administration_tools_delete_tooltip', 'Удалить выбранные подключения'], ['connections_administration_tools_refresh_success', 'Подключения обновлены'], - ['connections_administration_tools_refresh_fail', 'Не удалось обновить подключения'], + ['connections_administration_tools_refresh_fail', 'Не удалось обновить список подключений'], ['connections_connection_connect', 'Подключиться'], ['connections_connection_create_custom', 'Настроить'], ['connections_connection_create_search_database', 'Найти'], diff --git a/webapp/packages/plugin-administration/src/ConfigurationWizard/ServerConfiguration/ServerConfigurationPage.tsx b/webapp/packages/plugin-administration/src/ConfigurationWizard/ServerConfiguration/ServerConfigurationPage.tsx index e8fd1b7a9d..b66f37d420 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, LabeledIconButton, 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,24 +83,24 @@ export const ServerConfigurationPage: AdministrationItemContentComponent = obser return styled(style)( {!configurationWizard && ( - - + - {translate('ui_processing_save')} + + - + >{translate('ui_processing_cancel')} + + )} {configurationWizard && ( diff --git a/webapp/packages/plugin-administration/src/locales/en.ts b/webapp/packages/plugin-administration/src/locales/en.ts index 16d81a0746..cf6e0effdf 100644 --- a/webapp/packages/plugin-administration/src/locales/en.ts +++ b/webapp/packages/plugin-administration/src/locales/en.ts @@ -14,7 +14,7 @@ export default [ ['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', 'Cancel changes'], + ['administration_configuration_tools_cancel_tooltip', 'Reset changes'], ['administration_configuration_wizard_configuration_server_info', 'Server Information'], ['administration_configuration_wizard_configuration_server_name', 'Server Name'], diff --git a/webapp/packages/plugin-authentication/src/Administration/Users/UsersAdministration.tsx b/webapp/packages/plugin-authentication/src/Administration/Users/UsersAdministration.tsx index 481a614b70..4b13c22d02 100644 --- a/webapp/packages/plugin-authentication/src/Administration/Users/UsersAdministration.tsx +++ b/webapp/packages/plugin-authentication/src/Administration/Users/UsersAdministration.tsx @@ -9,8 +9,8 @@ import { observer } from 'mobx-react-lite'; import styled, { css, use } from 'reshadow'; -import { AdministrationTools, AdministrationItemContentProps, ADMINISTRATION_TOOLS_STYLES } from '@cloudbeaver/core-administration'; -import { Loader, LabeledIconButton } 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'; @@ -60,37 +60,37 @@ export const UsersAdministration = observer(function UsersAdministration({ const controller = useController(UsersAdministrationController); const isLocalProviderAvailable = controller.isLocalProviderAvailable; - return styled(useStyles(styles, ADMINISTRATION_TOOLS_STYLES))( + return styled(useStyles(styles, ADMINISTRATION_TOOLS_PANEL_STYLES))( <> - + {isLocalProviderAvailable && ( - + >{translate('ui_add')} + )} - + >{translate('ui_refresh')} + {isLocalProviderAvailable && ( - + >{translate('ui_delete')} + )} - + diff --git a/webapp/packages/plugin-authentication/src/Administration/Users/UsersAdministrationController.ts b/webapp/packages/plugin-authentication/src/Administration/Users/UsersAdministrationController.ts index 90c424caf9..f93d50145b 100644 --- a/webapp/packages/plugin-authentication/src/Administration/Users/UsersAdministrationController.ts +++ b/webapp/packages/plugin-authentication/src/Administration/Users/UsersAdministrationController.ts @@ -71,7 +71,7 @@ export class UsersAdministrationController implements IInitializableController { update = async () => { try { await this.usersResource.refreshAll(); - this.notificationService.notify({ title: 'authentication_administration_tools_refresh_success' }, ENotificationType.Success); + 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/ru.ts b/webapp/packages/plugin-authentication/src/locales/ru.ts index 0c9b19f2a4..5675bad6a8 100644 --- a/webapp/packages/plugin-authentication/src/locales/ru.ts +++ b/webapp/packages/plugin-authentication/src/locales/ru.ts @@ -16,7 +16,7 @@ export default [ ['authentication_administration_user_info', 'Общее'], ['authentication_administration_item', 'Пользователи'], ['authentication_administration_tools_add_tooltip', 'Добавить нового пользователя'], - ['authentication_administration_tools_refresh_tooltip', 'Обновить лист пользователей'], + ['authentication_administration_tools_refresh_tooltip', 'Обновить список пользователей'], ['authentication_administration_tools_delete_tooltip', 'Удалить выбранных пользователей'], ['authentication_administration_tools_refresh_success', 'Список пользователей обновлен'], ['authentication_administration_user_updated', 'User updated'], 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..83cc7ea80a 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,10 +23,7 @@ const tableFooterStyles = composes( } `, css` - table-footer { - height: 40px; - flex: 0 0 auto; - display: flex; + ToolsPanel { align-items: center; } count input, @@ -89,7 +86,7 @@ export const TableFooter = observer(function TableFooter({ ); return styled(useStyles(tableFooterStyles))( - + )} - + ); }); 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..01c6710bb0 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 { 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 a1c2e613b9..45a19b03d5 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 @@ -10,7 +10,7 @@ import { observer } from 'mobx-react-lite'; import type { ButtonHTMLAttributes } from 'react'; import styled, { css } from 'reshadow'; -import { IconOrImage, LabeledIconButton } 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'; @@ -24,8 +24,18 @@ export const tableFooterMenuStyles = composes( Menu { composes: theme-text-on-surface from global; } + MenuTrigger { + composes: theme-ripple from global; + } `, css` + MenuTrigger { + height: 100%; + padding: 0 16px; + display: flex; + align-items: center; + cursor: pointer; + } menu-trigger-icon IconOrImage { display: block; width: 24px; @@ -48,15 +58,15 @@ export const TableFooterMenuItem = observer(function TableFooterMenuItem({ if (!menuItem.panel) { return ( - menuItem.onClick?.()} - /> + >{translate(menuItem.title)} + ); } From 7380270f404a20919db30cc6d42450eba9740011 Mon Sep 17 00:00:00 2001 From: Naumov Alexey Date: Tue, 27 Apr 2021 18:54:48 +0300 Subject: [PATCH 3/5] feat(core-app): CB-889 imports --- .../ConnectionsAdministrationController.ts | 2 +- .../packages/core-utils/src/RequireAtLeastOne.ts | 16 ---------------- webapp/packages/core-utils/src/index.ts | 1 - .../Users/UsersAdministrationController.ts | 2 +- 4 files changed, 2 insertions(+), 19 deletions(-) delete mode 100644 webapp/packages/core-utils/src/RequireAtLeastOne.ts diff --git a/webapp/packages/core-connections/src/Administration/Connections/ConnectionsAdministrationController.ts b/webapp/packages/core-connections/src/Administration/Connections/ConnectionsAdministrationController.ts index f5983493e9..1ac1aa56f5 100644 --- a/webapp/packages/core-connections/src/Administration/Connections/ConnectionsAdministrationController.ts +++ b/webapp/packages/core-connections/src/Administration/Connections/ConnectionsAdministrationController.ts @@ -10,7 +10,7 @@ import { observable, computed, makeObservable } from 'mobx'; import { injectable } from '@cloudbeaver/core-di'; import { CommonDialogService, ConfirmationDialog, DialogueStateResult } from '@cloudbeaver/core-dialogs'; -import { ENotificationType, NotificationService } from '@cloudbeaver/core-events'; +import { NotificationService } from '@cloudbeaver/core-events'; import { resourceKeyList } from '@cloudbeaver/core-sdk'; import { DatabaseConnection, compareConnections, ConnectionsResource } from '../ConnectionsResource'; diff --git a/webapp/packages/core-utils/src/RequireAtLeastOne.ts b/webapp/packages/core-utils/src/RequireAtLeastOne.ts deleted file mode 100644 index aec2f73f3b..0000000000 --- a/webapp/packages/core-utils/src/RequireAtLeastOne.ts +++ /dev/null @@ -1,16 +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. - */ - -/** - * A generalizable way to require at least one of a set of properties. - */ -export type RequireAtLeastOne = - Pick> - & { - [K in Keys]-?: Required> & Partial>> - }[Keys]; diff --git a/webapp/packages/core-utils/src/index.ts b/webapp/packages/core-utils/src/index.ts index a6d4705050..ae34073384 100644 --- a/webapp/packages/core-utils/src/index.ts +++ b/webapp/packages/core-utils/src/index.ts @@ -12,7 +12,6 @@ export * from './md5'; export * from './TextTools'; export * from './copyToClipboard'; export * from './declensionOfNumber'; -export * from './RequireAtLeastOne'; export * from './Promises/CancellablePromise'; export * from './Promises/Deferred'; diff --git a/webapp/packages/plugin-authentication/src/Administration/Users/UsersAdministrationController.ts b/webapp/packages/plugin-authentication/src/Administration/Users/UsersAdministrationController.ts index f93d50145b..a23eca6acb 100644 --- a/webapp/packages/plugin-authentication/src/Administration/Users/UsersAdministrationController.ts +++ b/webapp/packages/plugin-authentication/src/Administration/Users/UsersAdministrationController.ts @@ -11,7 +11,7 @@ import { observable, computed, makeObservable } from 'mobx'; import { AdminUser, AuthProvidersResource, AUTH_PROVIDER_LOCAL_ID, UsersResource } from '@cloudbeaver/core-authentication'; import { injectable, IInitializableController } from '@cloudbeaver/core-di'; import { CommonDialogService, ConfirmationDialog, DialogueStateResult } from '@cloudbeaver/core-dialogs'; -import { ENotificationType, NotificationService } from '@cloudbeaver/core-events'; +import { NotificationService } from '@cloudbeaver/core-events'; import { ErrorDetailsDialog } from '@cloudbeaver/core-notifications'; import { GQLErrorCatcher, resourceKeyList } from '@cloudbeaver/core-sdk'; From 9b0bf172738c05b1a11eb28c24e61355b5e9b03d Mon Sep 17 00:00:00 2001 From: Naumov Alexey Date: Tue, 27 Apr 2021 21:52:11 +0300 Subject: [PATCH 4/5] feat(core-app): CB-889 remover as='div' --- .../src/ToolsPanel/ToolsAction.tsx | 11 +++-- .../core-blocks/src/ToolsPanel/ToolsPanel.tsx | 2 +- .../Connections/ConnectionsAdministration.tsx | 15 ++++--- .../core-connections/src/locales/ru.ts | 2 +- .../ServerConfigurationPage.tsx | 7 +-- .../Users/UsersAdministration.tsx | 45 ++++++++++--------- .../TableViewer/TableFooter/TableFooter.tsx | 4 +- .../TableFooterMenu/TableFooterMenu.tsx | 2 +- .../TableFooterMenu/TableFooterMenuItem.tsx | 4 +- 9 files changed, 47 insertions(+), 45 deletions(-) diff --git a/webapp/packages/core-blocks/src/ToolsPanel/ToolsAction.tsx b/webapp/packages/core-blocks/src/ToolsPanel/ToolsAction.tsx index 224048d1d1..2dc7767082 100644 --- a/webapp/packages/core-blocks/src/ToolsPanel/ToolsAction.tsx +++ b/webapp/packages/core-blocks/src/ToolsPanel/ToolsAction.tsx @@ -11,17 +11,16 @@ import styled, { css } from 'reshadow'; import { composes, useStyles } from '@cloudbeaver/core-theming'; -import { Button } from '../Button'; import { IconOrImage } from '../IconOrImage'; const styles = composes( css` - Button { + button { composes: theme-ripple from global; } `, css` - Button { + button { padding: 0 16px; display: flex; align-items: center; @@ -52,9 +51,9 @@ interface Props extends ButtonHTMLAttributes { export const ToolsAction: React.FC = function ToolsAction({ icon, viewBox, children, ...rest }) { return styled(useStyles(styles))( - + {children && {children}} + ); }; diff --git a/webapp/packages/core-blocks/src/ToolsPanel/ToolsPanel.tsx b/webapp/packages/core-blocks/src/ToolsPanel/ToolsPanel.tsx index f002604dae..082b78dccc 100644 --- a/webapp/packages/core-blocks/src/ToolsPanel/ToolsPanel.tsx +++ b/webapp/packages/core-blocks/src/ToolsPanel/ToolsPanel.tsx @@ -23,7 +23,7 @@ interface Props { export const ToolsPanel: React.FC = function ToolsPanel({ className, children }) { return styled(useStyles(styles))( - + {children} ); diff --git a/webapp/packages/core-connections/src/Administration/Connections/ConnectionsAdministration.tsx b/webapp/packages/core-connections/src/Administration/Connections/ConnectionsAdministration.tsx index 16a188af59..73df19ff45 100644 --- a/webapp/packages/core-connections/src/Administration/Connections/ConnectionsAdministration.tsx +++ b/webapp/packages/core-connections/src/Administration/Connections/ConnectionsAdministration.tsx @@ -84,7 +84,8 @@ export const ConnectionsAdministration: React.FC viewBox="0 0 24 24" disabled={!!sub || controller.isProcessing} onClick={service.create} - >{translate('ui_add')} + > + {translate('ui_add')} viewBox="0 0 24 24" disabled={controller.isProcessing} onClick={controller.update} - >{translate('ui_refresh')} + > + {translate('ui_refresh')} {translate('ui_delete')} - - - + + + {configurationWizard && ( - +

)} - {sub && ( )} diff --git a/webapp/packages/core-connections/src/locales/ru.ts b/webapp/packages/core-connections/src/locales/ru.ts index d66109c641..e2515d3826 100644 --- a/webapp/packages/core-connections/src/locales/ru.ts +++ b/webapp/packages/core-connections/src/locales/ru.ts @@ -13,7 +13,7 @@ export default [ ['connections_administration_tools_add_tooltip', 'Добавить новое подключение'], ['connections_administration_tools_refresh_tooltip', 'Обновить список подключений'], ['connections_administration_tools_delete_tooltip', 'Удалить выбранные подключения'], - ['connections_administration_tools_refresh_success', 'Подключения обновлены'], + ['connections_administration_tools_refresh_success', 'Список подключений обновлен'], ['connections_administration_tools_refresh_fail', 'Не удалось обновить список подключений'], ['connections_connection_connect', 'Подключиться'], ['connections_connection_create_custom', 'Настроить'], diff --git a/webapp/packages/plugin-administration/src/ConfigurationWizard/ServerConfiguration/ServerConfigurationPage.tsx b/webapp/packages/plugin-administration/src/ConfigurationWizard/ServerConfiguration/ServerConfigurationPage.tsx index b66f37d420..458313479f 100644 --- a/webapp/packages/plugin-administration/src/ConfigurationWizard/ServerConfiguration/ServerConfigurationPage.tsx +++ b/webapp/packages/plugin-administration/src/ConfigurationWizard/ServerConfiguration/ServerConfigurationPage.tsx @@ -90,7 +90,8 @@ export const ServerConfigurationPage: AdministrationItemContentComponent = obser viewBox="0 0 24 24" disabled={!changed} onClick={save} - >{translate('ui_processing_save')} + > + {translate('ui_processing_save')} {translate('ui_processing_cancel')} + > + {translate('ui_processing_cancel')} )} @@ -113,7 +115,6 @@ export const ServerConfigurationPage: AdministrationItemContentComponent = obser )} - {() => styled(style)( diff --git a/webapp/packages/plugin-authentication/src/Administration/Users/UsersAdministration.tsx b/webapp/packages/plugin-authentication/src/Administration/Users/UsersAdministration.tsx index 4b13c22d02..9bfd7bd3d5 100644 --- a/webapp/packages/plugin-authentication/src/Administration/Users/UsersAdministration.tsx +++ b/webapp/packages/plugin-authentication/src/Administration/Users/UsersAdministration.tsx @@ -70,7 +70,8 @@ export const UsersAdministration = observer(function UsersAdministration({ viewBox="0 0 24 24" disabled={sub && !!service.user} onClick={service.create} - >{translate('ui_add')} + > + {translate('ui_add')} )} {translate('ui_refresh')} + > + {translate('ui_refresh')} {isLocalProviderAvailable && ( {translate('ui_delete')} + > + {translate('ui_delete')} )} - - - - {controller.isProvidersLoading - ? - : ( - <> - {sub && service.user && ( - - )} - - - - )} + + + + {controller.isProvidersLoading ? : ( + <> + {sub && service.user && ( + + )} + + + + )} 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 83cc7ea80a..1369a1162b 100644 --- a/webapp/packages/plugin-data-viewer/src/TableViewer/TableFooter/TableFooter.tsx +++ b/webapp/packages/plugin-data-viewer/src/TableViewer/TableFooter/TableFooter.tsx @@ -87,7 +87,7 @@ export const TableFooter = observer(function TableFooter({ return styled(useStyles(tableFooterStyles))( - + model.refresh()} /> - + + {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 45a19b03d5..2fbc663fbd 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 @@ -78,11 +78,11 @@ export const TableFooterMenuItem = observer(function TableFooterMenuItem({ style={[tableFooterMenuStyles]} > {menuItem.icon && ( - + )} - {menuItem.title && {translate(menuItem.title)}} + {menuItem.title && {translate(menuItem.title)}} ); }); From 5107dc09eafa77ccca95b4aa3bdc9127da448c0f Mon Sep 17 00:00:00 2001 From: Naumov Alexey Date: Wed, 28 Apr 2021 12:39:42 +0300 Subject: [PATCH 5/5] feat(core-app): CB-889 add tooltip to MenuTrigger --- .../src/TableViewer/TableFooter/TableFooter.tsx | 1 + .../TableFooter/TableFooterMenu/TableFooterMenuItem.tsx | 1 + 2 files changed, 2 insertions(+) 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 1369a1162b..f1f7e0031d 100644 --- a/webapp/packages/plugin-data-viewer/src/TableViewer/TableFooter/TableFooter.tsx +++ b/webapp/packages/plugin-data-viewer/src/TableViewer/TableFooter/TableFooter.tsx @@ -25,6 +25,7 @@ const tableFooterStyles = composes( css` ToolsPanel { align-items: center; + flex: 0 0 auto; } count input, count placeholder { 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 2fbc663fbd..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 @@ -73,6 +73,7 @@ export const TableFooterMenuItem = observer(function TableFooterMenuItem({ return styled(styles)(