Merge branch 'devel' of https://github.com/dbeaver/cloudbeaver into devel

webapp/packages/core-app/src/AppScreen/RightArea.tsx

@@ -26,8 +26,8 @@ import { useStyles } from '@cloudbeaver/core-theming';
 import { OptionsPanelService } from '@cloudbeaver/core-ui';
 
 import { NavigationTabsBar } from '../shared/NavigationTabs/NavigationTabsBar';
-import { LogViewer } from '../shared/ToolsPanel/LogViewer/LogViewer';
-import { LogViewerService } from '../shared/ToolsPanel/LogViewer/LogViewerService';
+import { ToolsPanel } from '../shared/ToolsPanel/ToolsPanel';
+import { ToolsPanelService } from '../shared/ToolsPanel/ToolsPanelService';
 
 const styles = css`
     Pane {
@@ -45,26 +45,28 @@ const styles = css`
   `;
 
 export const RightArea = observer(function RightArea() {
-  const logViewerService = useService(LogViewerService);
+  const toolsPanelService = useService(ToolsPanelService);
   const optionsPanelService = useService(OptionsPanelService);
   const OptionsPanel = optionsPanelService.getPanelComponent();
 
+  const activeTools = toolsPanelService.tabsContainer.getDisplayed();
+
   return styled(useStyles(styles, splitStyles, splitHorizontalStyles, slideBoxStyles))(
     <SlideBox open={optionsPanelService.active}>
       <SlideElement>
         <ErrorBoundary remount><OptionsPanel /></ErrorBoundary>
       </SlideElement>
       <SlideElement>
-        <Split sticky={30} split="horizontal" mode={logViewerService.isActive ? undefined : 'minimize'} keepRatio>
+        <Split sticky={30} split="horizontal" mode={activeTools.length ? undefined : 'minimize'} keepRatio>
           <Pane>
             <ErrorBoundary remount>
               <NavigationTabsBar />
             </ErrorBoundary>
           </Pane>
-          {logViewerService.isActive && <ResizerControls />}
+          {!!activeTools.length && <ResizerControls />}
           <Pane main>
             <ErrorBoundary remount>
-              <LogViewer />
+              <ToolsPanel container={toolsPanelService.tabsContainer} />
             </ErrorBoundary>
           </Pane>
         </Split>

webapp/packages/core-app/src/index.ts

@@ -31,6 +31,7 @@ export * from './shared/SqlGenerators/SqlGeneratorsBootstrap';
 export * from './shared/NavigationTabs/TabNavigationContext';
 export * from './shared/ToolsPanel/LogViewer/LogViewerBootstrap';
 export * from './shared/ToolsPanel/LogViewer/LogViewerService';
+export * from './shared/ToolsPanel/ToolsPanelService';
 
 export * from './shared/SessionExpireDialog/SessionExpiredDialogService';
 export * from './shared/SessionExpireWarningDialog/SessionExpireWarningDialogService';
@@ -80,4 +81,4 @@ export * from './shared/NodesManager/EntityTypes';
 // tab entity
 export * from './shared/TabEntity/TabContainerEntity';
 export * from './shared/TabEntity/TabEntity';
-export * from './shared/TabEntity/TabToken';
+export * from './shared/TabEntity/TabToken';

webapp/packages/core-app/src/shared/ToolsPanel/LogViewer/LogViewerBootstrap.ts

@@ -9,13 +9,16 @@
 import { Bootstrap, injectable } from '@cloudbeaver/core-di';
 
 import { EMainMenu, MainMenuService } from '../../../TopNavBar/MainMenu/MainMenuService';
+import { ToolsPanelService } from '../ToolsPanelService';
+import { LogViewer } from './LogViewer';
 import { LogViewerService } from './LogViewerService';
 
 @injectable()
 export class LogViewerBootstrap extends Bootstrap {
   constructor(
-    private mainMenuService: MainMenuService,
-    private logViewerService: LogViewerService
+    private readonly mainMenuService: MainMenuService,
+    private readonly toolsPanelService: ToolsPanelService,
+    private readonly logViewerService: LogViewerService
   ) {
     super();
   }
@@ -32,6 +35,14 @@ export class LogViewerBootstrap extends Bootstrap {
         onClick: () => this.logViewerService.toggle(),
       }
     );
+
+    this.toolsPanelService.tabsContainer.add({
+      key: 'log-viewer-tab',
+      order: 0,
+      name: 'app_shared_toolsMenu_logViewer',
+      isHidden: () => !this.logViewerService.isActive,
+      panel: () => LogViewer,
+    });
   }
 
   load(): void { }

webapp/packages/core-app/src/shared/ToolsPanel/ToolsPanel.tsx

@@ -0,0 +1,70 @@
+/*
+ * CloudBeaver - Cloud Database Manager
+ * Copyright (C) 2020-2022 DBeaver Corp and others
+ *
+ * Licensed under the Apache License, Version 2.0.
+ * you may not use this file except in compliance with the License.
+ */
+
+import { observer } from 'mobx-react-lite';
+import styled, { css } from 'reshadow';
+
+import { useStyles } from '@cloudbeaver/core-theming';
+import { BASE_TAB_STYLES, TabList, TabPanelList, TabsContainer, TabsState, UNDERLINE_TAB_STYLES } from '@cloudbeaver/core-ui';
+
+const tabsStyles = css`
+  TabList {
+    display: flex;
+    position: relative;
+    flex-shrink: 0;
+    align-items: center;
+  }
+  Tab {
+    height: 46px!important;
+    text-transform: uppercase;
+    font-weight: 500 !important;
+  }
+  TabPanel {
+    display: flex;
+    flex-direction: column;
+  }
+`;
+
+const formStyles = css`
+  box {
+    composes: theme-background-secondary theme-text-on-secondary from global;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    height: 100%;
+    overflow: auto;
+  }
+  content-box {
+    composes: theme-border-color-background from global;
+    position: relative;
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    overflow: auto;
+  }
+`;
+
+interface Props {
+  container: TabsContainer;
+}
+
+export const ToolsPanel = observer<Props>(function ToolsPanel({ container }) {
+  const tabStyle = [BASE_TAB_STYLES, tabsStyles, UNDERLINE_TAB_STYLES];
+
+  return styled(useStyles(tabStyle, formStyles))(
+    <TabsState container={container} lazy>
+      <box>
+        <TabList style={tabStyle} />
+        <content-box>
+          <TabPanelList style={tabStyle} />
+        </content-box>
+      </box>
+    </TabsState>
+  );
+});

webapp/packages/core-app/src/shared/ToolsPanel/ToolsPanelService.ts

@@ -0,0 +1,19 @@
+/*
+ * CloudBeaver - Cloud Database Manager
+ * Copyright (C) 2020-2022 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 { injectable } from '@cloudbeaver/core-di';
+import { TabsContainer } from '@cloudbeaver/core-ui';
+
+@injectable()
+export class ToolsPanelService {
+  readonly tabsContainer: TabsContainer;
+
+  constructor() {
+    this.tabsContainer = new TabsContainer();
+  }
+}

webapp/packages/core-bootstrap/src/manifest.ts

@@ -41,7 +41,8 @@ import {
   SessionExpiredDialogService,
   SessionExpireWarningDialogService,
   ConnectionSchemaManagerBootstrap,
-  NavigationTreeBootstrap
+  NavigationTreeBootstrap,
+  ToolsPanelService
 } from '@cloudbeaver/core-app';
 import { coreAuthenticationManifest } from '@cloudbeaver/core-authentication';
 import { BlocksLocaleService } from '@cloudbeaver/core-blocks';
@@ -119,6 +120,7 @@ export const coreManifests: PluginManifest[] = [
       SettingsService,
       ThemeSettingsService,
       ThemeService,
+      ToolsPanelService,
     ],
   },
   coreSDKManifest,