Merge pull request #356 from dbeaver/feat/new-menu-buttons

feat(core-app): CB-889 changed icons from administation tools bar to …

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

@@ -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<Props> = function AdministrationTools({ children, className }) {
-  return styled()(
-    <administration-tools as='div' className={className}>
-      {children}
-    </administration-tools>
-  );
-};

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;
-      }
     }
   `
 );

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';
 

webapp/packages/core-app/public/icons/icons.svg

@@ -77,28 +77,20 @@
     </g>
   </symbol>
 
-  <symbol id="add" width="28" height="28" viewBox="0 0 28 28">
-    <g fill="none" fill-rule="evenodd">
-      <path d="M0 0L36 0 36 36 0 36z" transform="translate(-4 -4)"/>
-      <path fill-rule="nonzero" stroke="currentColor" stroke-width="2" d="M28.5 5.5h-21c-1.107 0-2 .896-2 2v21c0 1.104.893 2 2 2h21c1.107 0 2-.896 2-2v-21c0-1.104-.893-2-2-2z" transform="translate(-4 -4)"/>
-      <path fill="currentColor" fill-rule="nonzero" d="M22.297 12.293L18 16.59 13.703 12.293 12.293 13.703 16.59 18 12.293 22.297 13.703 23.707 18 19.41 22.297 23.707 23.707 22.297 19.41 18 23.707 13.703z" transform="translate(-4 -4) rotate(-45 18 18)"/>
-    </g>
+  <symbol id='add' width="24" height="24" viewBox="0 0 24 24">
+   <path fill-rule="evenodd" clip-rule="evenodd" d="M13 5H11V11H5V13H11V19H13V13H19V11H13V5Z" fill="currentColor"/>
   </symbol>
 
-  <symbol id="trash" width="28" height="28" viewBox="0 0 28 28">
-    <g fill="none" fill-rule="evenodd">
-      <path d="M0 0L36 0 36 36 0 36z" transform="translate(-4 -4)"/>
-      <path fill-rule="nonzero" stroke="currentColor" stroke-width="2" d="M28.5 5.5h-21c-1.107 0-2 .896-2 2v21c0 1.104.893 2 2 2h21c1.107 0 2-.896 2-2v-21c0-1.104-.893-2-2-2z" transform="translate(-4 -4)"/>
-      <path fill="currentColor" fill-rule="nonzero" d="M12 25.071v-12h12v12c0 1.1-.9 2-2 2h-8c-1.1 0-2-.9-2-2zm2-10v10h8v-10h-8zm7.5-5H25v2H11v-2h3.5l1-1h5l1 1z" transform="translate(-4 -4)"/>
-    </g>
+  <symbol id="trash" width="24" height="24" viewBox="0 0 24 24">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M8 3H16V4H19V6H5V4H8V3ZM8 9H16V18H8L8 9ZM6 18V7H18V18C18 19.1046 17.1046 20 16 20H8C6.89543 20 6 19.1046 6 18Z" fill="currentColor"/>
   </symbol>
 
-  <symbol id="admin-cancel" width="28" height="28" viewBox="0 0 28 28">
-    <path fill="currentColor" fill-rule="evenodd" clip-rule="evenodd" d="M3.5 0.5C1.83974 0.5 0.5 1.84469 0.5 3.5V24.5C0.5 26.1553 1.83974 27.5 3.5 27.5H24.5C26.1603 27.5 27.5 26.1553 27.5 24.5V3.5C27.5 1.84469 26.1603 0.5 24.5 0.5H3.5ZM2.5 3.5C2.5 2.94731 2.94626 2.5 3.5 2.5H24.5C25.0537 2.5 25.5 2.94731 25.5 3.5V24.5C25.5 25.0527 25.0537 25.5 24.5 25.5H3.5C2.94626 25.5 2.5 25.0527 2.5 24.5V3.5ZM7.64974 9.05025L9.06396 7.63604L14.0137 12.5858L18.9635 7.63604L20.3777 9.05025L15.4279 14L20.3777 18.9497L18.9635 20.364L14.0137 15.4142L9.06396 20.364L7.64974 18.9497L12.5995 14L7.64974 9.05025Z"/>
+  <symbol id="admin-cancel" width="24" height="24" viewBox="0 0 24 24">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M18.257 7.25701L16.6928 5.69276L12 10.3855L7.30727 5.69273L5.74302 7.25698L10.4358 11.9497L5.74301 16.6425L7.30726 18.2067L12 13.514L16.6928 18.2067L18.257 16.6425L13.5643 11.9497L18.257 7.25701Z" fill="currentColor"/>
   </symbol>
 
-  <symbol id="admin-save" width="28" height="28" viewBox="0 0 28 28">
-    <path fill="currentColor" fill-rule="evenodd" clip-rule="evenodd" d="M3.5.5c-1.66 0-3 1.345-3 3v21c0 1.655 1.34 3 3 3h21c1.66 0 3-1.345 3-3v-21c0-1.655-1.34-3-3-3h-21zm-1 3c0-.553.446-1 1-1h21c.554 0 1 .447 1 1v21c0 .553-.446 1-1 1h-21c-.554 0-1-.447-1-1v-21zm15.87 3H6.5v15h15V10.277L18.37 6.5zm-1.87 13h-5v-4h5v4zm2-6v6h1v-8.502L17.43 8.5H15.5v2h-4v-2h-3v11h1v-6h9z"/>
+  <symbol id="admin-save" width="24" height="24" viewBox="0 0 24 24">
+   <path fill-rule="evenodd" clip-rule="evenodd" d="M4 18V7V5H6H9H14H16V5.00015L16.5 5.00015L20 8.58579V9.50015V10.5861L20 10.5861V20H19H18H16H8H6H4V18ZM15.5858 7L14 7V9H9V7L6 7V18H8V12H16V18H18V9.41418L15.5858 7ZM14 18H10V14H14V18Z" fill="currentColor"/>
   </symbol>
 
   <symbol id="angle" viewBox="0 0 15 8">
@@ -130,10 +122,8 @@
     <path fill-rule="evenodd" clip-rule="evenodd" d="M3.1 8C3.1 5.62518 5.02518 3.7 7.4 3.7C9.41287 3.7 11.1027 5.08306 11.5711 6.95071L10.5663 6.33373C10.2368 6.13143 9.80579 6.23451 9.60349 6.56395C9.40119 6.8934 9.50427 7.32446 9.83371 7.52676L12.8405 9.37309L14.6868 6.36629C14.8891 6.03684 14.7861 5.60578 14.4566 5.40348C14.1272 5.20118 13.6961 5.30426 13.4938 5.63371L12.9191 6.56971C12.2845 4.11395 10.0541 2.3 7.4 2.3C4.25198 2.3 1.7 4.85198 1.7 8C1.7 11.148 4.25198 13.7 7.4 13.7C9.08822 13.7 10.6057 12.9652 11.6484 11.8002C11.9063 11.5121 11.8818 11.0696 11.5937 10.8117C11.3056 10.5539 10.8631 10.5784 10.6053 10.8665C9.81689 11.7473 8.67345 12.3 7.4 12.3C5.02518 12.3 3.1 10.3748 3.1 8Z"></path>
   </symbol>
 
-  <symbol id="refresh-outline" viewBox="0 0 28 28">
-    <g clip-path="url(#clip0)">
-      <path fill="currentColor" fill-rule="evenodd" clip-rule="evenodd" d="M0.5 3.5C0.5 1.84469 1.83974 0.5 3.5 0.5H24.5C26.1603 0.5 27.5 1.84469 27.5 3.5V24.5C27.5 26.1553 26.1603 27.5 24.5 27.5H3.5C1.83974 27.5 0.5 26.1553 0.5 24.5V3.5ZM3.5 2.5C2.94626 2.5 2.5 2.94731 2.5 3.5V24.5C2.5 25.0527 2.94626 25.5 3.5 25.5H24.5C25.0537 25.5 25.5 25.0527 25.5 24.5V3.5C25.5 2.94731 25.0537 2.5 24.5 2.5H3.5ZM16.2923 12.193C16.5813 11.7224 17.1971 11.5751 17.6677 11.8641L18.5184 12.3865C17.8472 10.4168 15.9813 9 13.7845 9C11.023 9 8.78445 11.2386 8.78445 14C8.78445 16.7614 11.023 19 13.7845 19C15.2652 19 16.5946 18.3576 17.5115 17.3331C17.8799 16.9216 18.5121 16.8865 18.9236 17.2549C19.3351 17.6232 19.3701 18.2554 19.0018 18.6669C17.7215 20.0974 15.8577 21 13.7845 21C9.91846 21 6.78445 17.866 6.78445 14C6.78445 10.134 9.91846 7 13.7845 7C16.9153 7 19.5661 9.05542 20.461 11.8905L20.9607 11.0767C21.2497 10.6061 21.8655 10.4588 22.3361 10.7478C22.8068 11.0368 22.954 11.6526 22.665 12.1233L20.3657 15.8678L16.6212 13.5684C16.1505 13.2794 16.0033 12.6636 16.2923 12.193Z"/>
-    </g>
+  <symbol id="refresh" viewBox="0 0 24 24">
+   <path fill-rule="evenodd" clip-rule="evenodd" d="M5.71118 12C5.71118 9.08355 8.06427 6.7193 10.9669 6.7193C13.4272 6.7193 15.4926 8.41779 16.0651 10.7114L14.837 9.9537C14.4343 9.70527 13.9075 9.83186 13.6602 10.2364C13.4129 10.641 13.5389 11.1704 13.9416 11.4188L17.6167 13.6863L19.8734 9.99369C20.1206 9.5891 19.9947 9.05973 19.592 8.81129C19.1894 8.56285 18.6625 8.68944 18.4152 9.09403L17.7128 10.2435C16.9371 7.22766 14.211 5 10.9669 5C7.11921 5 4 8.13401 4 12C4 15.866 7.11921 19 10.9669 19C13.0304 19 14.8852 18.0976 16.1596 16.6669C16.4748 16.3131 16.4449 15.7697 16.0928 15.453C15.7406 15.1364 15.1998 15.1665 14.8847 15.5203C13.921 16.6019 12.5234 17.2807 10.9669 17.2807C8.06427 17.2807 5.71118 14.9164 5.71118 12Z" fill="currentColor"/>
   </symbol>
 
   <symbol id="apply" viewBox="0 0 12 10">

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<any> {
+  icon?: string;
+  viewBox?: string;
+}
+
+export const ToolsAction: React.FC<Props> = function ToolsAction({ icon, viewBox, children, ...rest }) {
+  return styled(useStyles(styles))(
+    <button {...rest}>
+      {icon && <IconOrImage icon={icon} viewBox={viewBox} />}
+      {children && <button-label>{children}</button-label>}
+    </button>
+  );
+};

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<Props> = function ToolsPanel({ className, children }) {
+  return styled(useStyles(styles))(
+    <container className={className}>
+      {children}
+    </container>
+  );
+};

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';

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<AdministrationItemContentProps>
 }) {
   const service = useService(CreateConnectionService);
   const controller = useController(ConnectionsAdministrationController);
+  const translate = useTranslate();
 
   useMapResource(ConnectionsResource, ConnectionsResource.keyAll);
 
-  return styled(useStyles(styles, ADMINISTRATION_TOOLS_STYLES))(
-    <layout-grid as="div">
-      <layout-grid-inner as="div">
-        <layout-grid-cell as='div' {...use({ span: 12 })}>
-          {configurationWizard && (
-            <message-box as='div'>
-              <h3><Translate token='connections_administration_configuration_wizard_title' /></h3>
-              <p><Translate token='connections_administration_configuration_wizard_message' /></p>
-            </message-box>
-          )}
-          <AdministrationTools>
-            <IconButton name="add" viewBox="0 0 28 28" disabled={!!sub || controller.isProcessing} onClick={service.create} />
-            <IconButton name="trash" viewBox="0 0 28 28" disabled={!controller.itemsSelected || controller.isProcessing} onClick={controller.delete} />
-            <IconButton name="refresh-outline" viewBox="0 0 16 16" disabled={controller.isProcessing} onClick={controller.update} />
-          </AdministrationTools>
-          {sub && (
-            <CreateConnection method={param} configurationWizard={configurationWizard} />
-          )}
-          <ConnectionsTable
-            connections={controller.connections}
-            selectedItems={controller.selectedItems}
-            expandedItems={controller.expandedItems}
-          />
-          <Loader loading={controller.isProcessing} overlay />
-        </layout-grid-cell>
-      </layout-grid-inner>
-    </layout-grid>
+  return styled(useStyles(styles, ADMINISTRATION_TOOLS_PANEL_STYLES))(
+    <>
+      <ToolsPanel>
+        <ToolsAction
+          title={translate('connections_administration_tools_add_tooltip')}
+          icon='add'
+          viewBox="0 0 24 24"
+          disabled={!!sub || controller.isProcessing}
+          onClick={service.create}
+        >
+          {translate('ui_add')}
+        </ToolsAction>
+        <ToolsAction
+          title={translate('connections_administration_tools_refresh_tooltip')}
+          icon="refresh"
+          viewBox="0 0 24 24"
+          disabled={controller.isProcessing}
+          onClick={controller.update}
+        >
+          {translate('ui_refresh')}
+        </ToolsAction>
+        <ToolsAction
+          title={translate('connections_administration_tools_delete_tooltip')}
+          icon="trash"
+          viewBox="0 0 24 24"
+          disabled={!controller.itemsSelected || controller.isProcessing}
+          onClick={controller.delete}
+        >
+          {translate('ui_delete')}
+        </ToolsAction>
+      </ToolsPanel>
+      <layout-grid>
+        <layout-grid-inner>
+          <layout-grid-cell {...use({ span: 12 })}>
+            {configurationWizard && (
+              <message-box>
+                <h3><Translate token='connections_administration_configuration_wizard_title' /></h3>
+                <p><Translate token='connections_administration_configuration_wizard_message' /></p>
+              </message-box>
+            )}
+            {sub && (
+              <CreateConnection method={param} configurationWizard={configurationWizard} />
+            )}
+            <ConnectionsTable
+              connections={controller.connections}
+              selectedItems={controller.selectedItems}
+              expandedItems={controller.expandedItems}
+            />
+            <Loader loading={controller.isProcessing} overlay />
+          </layout-grid-cell>
+        </layout-grid-inner>
+      </layout-grid>
+    </>
   );
 });

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;
     }

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'],

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', 'Найти'],

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.'],

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', 'Подтвердите удаление'],

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<HTMLFormElement>({ focusFirstChild: true });
   const service = useService(ServerConfigurationService);
   const serverConfigResource = useService(ServerConfigResource);
@@ -83,10 +83,26 @@ export const ServerConfigurationPage: AdministrationItemContentComponent = obser
   return styled(style)(
     <SubmittingForm ref={focusedRef} name='server_config' onSubmit={save} onChange={handleChange}>
       {!configurationWizard && (
-        <AdministrationTools>
-          <IconButton name="admin-save" viewBox="0 0 28 28" disabled={!changed} onClick={save} />
-          <IconButton name="admin-cancel" viewBox="0 0 28 28" disabled={!changed} onClick={reset} />
-        </AdministrationTools>
+        <ToolsPanel>
+          <ToolsAction
+            title={translate('administration_configuration_tools_save_tooltip')}
+            icon="admin-save"
+            viewBox="0 0 24 24"
+            disabled={!changed}
+            onClick={save}
+          >
+            {translate('ui_processing_save')}
+          </ToolsAction>
+          <ToolsAction
+            title={translate('administration_configuration_tools_cancel_tooltip')}
+            icon="admin-cancel"
+            viewBox="0 0 24 24"
+            disabled={!changed}
+            onClick={reset}
+          >
+            {translate('ui_processing_cancel')}
+          </ToolsAction>
+        </ToolsPanel>
       )}
       <ColoredContainer wrap gap overflow parent>
         {configurationWizard && (
@@ -99,7 +115,6 @@ export const ServerConfigurationPage: AdministrationItemContentComponent = obser
             </GroupItem>
           </Group>
         )}
-
         <Loader state={service}>
           {() => styled(style)(
             <Container wrap gap>

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'],

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', 'Позволяет пользователям создавать собственные подключения. Иначе, любые подключения могут быть добавлены только со страницы администрирования'],

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))(
-    <layout-grid as="div">
-      <layout-grid-inner as="div">
-        <layout-grid-cell as='div' {...use({ span: 12 })}>
-          {controller.isProvidersLoading
-            ? <Loader />
-            : (
+  return styled(useStyles(styles, ADMINISTRATION_TOOLS_PANEL_STYLES))(
+    <>
+      <ToolsPanel>
+        {isLocalProviderAvailable && (
+          <ToolsAction
+            title={translate('authentication_administration_tools_add_tooltip')}
+            icon="add"
+            viewBox="0 0 24 24"
+            disabled={sub && !!service.user}
+            onClick={service.create}
+          >
+            {translate('ui_add')}
+          </ToolsAction>
+        )}
+        <ToolsAction
+          title={translate('authentication_administration_tools_refresh_tooltip')}
+          icon="refresh"
+          viewBox="0 0 24 24"
+          onClick={controller.update}
+        >
+          {translate('ui_refresh')}
+        </ToolsAction>
+        {isLocalProviderAvailable && (
+          <ToolsAction
+            title={translate('authentication_administration_tools_delete_tooltip')}
+            icon="trash"
+            viewBox="0 0 24 24"
+            disabled={!controller.itemsSelected}
+            onClick={controller.delete}
+          >
+            {translate('ui_delete')}
+          </ToolsAction>
+        )}
+      </ToolsPanel>
+      <layout-grid>
+        <layout-grid-inner>
+          <layout-grid-cell {...use({ span: 12 })}>
+            {controller.isProvidersLoading ? <Loader /> : (
               <>
-                <AdministrationTools>
-                  {controller.isLocalProviderAvailable && (
-                    <>
-                      <IconButton name="add" viewBox="0 0 28 28" disabled={sub && !!service.user} onClick={service.create} />
-                      <IconButton name="trash" viewBox="0 0 28 28" disabled={!controller.itemsSelected} onClick={controller.delete} />
-                    </>
-                  )}
-                  <IconButton name="refresh-outline" viewBox="0 0 28 28" onClick={controller.update} />
-                </AdministrationTools>
                 {sub && service.user && (
                   <CreateUser user={service.user} onCancel={service.cancelCreate} />
                 )}
@@ -88,8 +111,9 @@ export const UsersAdministration = observer(function UsersAdministration({
                 <Loader loading={controller.isLoading} overlay />
               </>
             )}
-        </layout-grid-cell>
-      </layout-grid-inner>
-    </layout-grid>
+          </layout-grid-cell>
+        </layout-grid-inner>
+      </layout-grid>
+    </>
   );
 });

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');

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'],

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', 'Имя'],

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))(
-    <table-footer as="div">
-      <reload as="div">
+    <ToolsPanel>
+      <reload>
         <IconButton
           type="button"
           name='reload'
@@ -99,7 +97,7 @@ export const TableFooter = observer(function TableFooter({
           onClick={() => model.refresh()}
         />
       </reload>
-      <count as="div">
+      <count>
         <SubmittingForm onSubmit={handleChange}>
           <input
             ref={ref}
@@ -117,6 +115,6 @@ export const TableFooter = observer(function TableFooter({
           {model.source.requestInfo.requestMessage} - {model.source.requestInfo.requestDuration}ms
         </time>
       )}
-    </table-footer>
+    </ToolsPanel>
   );
 });

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)(
-    <menu-wrapper as="div" className={className}>
+    <menu-wrapper className={className}>
       {mainMenuService.constructMenuWithContext(model, resultIndex).map((topItem, i) => (
         <TableFooterMenuItem key={i} menuItem={topItem} />
       ))}

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)(
-      <Button
-        as="button"
+    return (
+      <ToolsAction
         {...props}
-        disabled={menuItem.isDisabled}
         title={translate(menuItem.tooltip)}
+        icon={menuItem.icon}
+        viewBox="0 0 32 32"
+        disabled={menuItem.isDisabled}
         onClick={() => menuItem.onClick?.()}
-      >
-        {menuItem.icon && (
-          <menu-trigger-icon as="div">
-            <IconOrImage icon={menuItem.icon} viewBox="0 0 32 32" />
-          </menu-trigger-icon>
-        )}
-        {menuItem.title && <menu-trigger-title as="div">{translate(menuItem.title)}</menu-trigger-title>}
-      </Button>
+      >{translate(menuItem.title)}
+      </ToolsAction>
     );
   }
 
   return styled(styles)(
     <MenuTrigger
       {...props}
+      title={translate(menuItem.tooltip)}
       panel={menuItem.panel}
       disabled={menuItem.isDisabled}
       style={[tableFooterMenuStyles]}
     >
       {menuItem.icon && (
-        <menu-trigger-icon as="div">
+        <menu-trigger-icon>
           <IconOrImage icon={menuItem.icon} viewBox="0 0 32 32" />
         </menu-trigger-icon>
       )}
-      {menuItem.title && <menu-trigger-title as="div">{translate(menuItem.title)}</menu-trigger-title>}
+      {menuItem.title && <menu-trigger-title>{translate(menuItem.title)}</menu-trigger-title>}
     </MenuTrigger>
   );
 });