From 358931d4dc74f65df3883b107b69490e2826da04 Mon Sep 17 00:00:00 2001 From: Naumov Alexey Date: Fri, 18 Mar 2022 19:02:38 +0300 Subject: [PATCH 1/2] feat(core-app): CB-1759 add query history --- .../core-app/src/AppScreen/RightArea.tsx | 14 ++-- webapp/packages/core-app/src/index.ts | 3 +- .../LogViewer/LogViewerBootstrap.ts | 15 +++- .../src/shared/ToolsPanel/ToolsPanel.tsx | 74 +++++++++++++++++++ .../shared/ToolsPanel/ToolsPanelService.ts | 19 +++++ .../packages/core-bootstrap/src/manifest.ts | 4 +- 6 files changed, 119 insertions(+), 10 deletions(-) create mode 100644 webapp/packages/core-app/src/shared/ToolsPanel/ToolsPanel.tsx create mode 100644 webapp/packages/core-app/src/shared/ToolsPanel/ToolsPanelService.ts diff --git a/webapp/packages/core-app/src/AppScreen/RightArea.tsx b/webapp/packages/core-app/src/AppScreen/RightArea.tsx index cfe17034dc..b46536f7ea 100644 --- a/webapp/packages/core-app/src/AppScreen/RightArea.tsx +++ b/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))( - + - {logViewerService.isActive && } + {!!activeTools.length && } - + diff --git a/webapp/packages/core-app/src/index.ts b/webapp/packages/core-app/src/index.ts index f3e0751f41..a34aefc5d4 100644 --- a/webapp/packages/core-app/src/index.ts +++ b/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'; \ No newline at end of file diff --git a/webapp/packages/core-app/src/shared/ToolsPanel/LogViewer/LogViewerBootstrap.ts b/webapp/packages/core-app/src/shared/ToolsPanel/LogViewer/LogViewerBootstrap.ts index 735e5165b7..0eef81d415 100644 --- a/webapp/packages/core-app/src/shared/ToolsPanel/LogViewer/LogViewerBootstrap.ts +++ b/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 { } diff --git a/webapp/packages/core-app/src/shared/ToolsPanel/ToolsPanel.tsx b/webapp/packages/core-app/src/shared/ToolsPanel/ToolsPanel.tsx new file mode 100644 index 0000000000..174f85215e --- /dev/null +++ b/webapp/packages/core-app/src/shared/ToolsPanel/ToolsPanel.tsx @@ -0,0 +1,74 @@ +/* + * 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-background-secondary 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(function ToolsPanel({ container }) { + const tabStyle = [BASE_TAB_STYLES, tabsStyles, UNDERLINE_TAB_STYLES]; + + return styled(useStyles(tabStyle, formStyles))( + + + + + + + + + + + + + ); +}); \ No newline at end of file diff --git a/webapp/packages/core-app/src/shared/ToolsPanel/ToolsPanelService.ts b/webapp/packages/core-app/src/shared/ToolsPanel/ToolsPanelService.ts new file mode 100644 index 0000000000..e83ea814be --- /dev/null +++ b/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(); + } +} \ No newline at end of file diff --git a/webapp/packages/core-bootstrap/src/manifest.ts b/webapp/packages/core-bootstrap/src/manifest.ts index 541996d962..e4601ed5f3 100644 --- a/webapp/packages/core-bootstrap/src/manifest.ts +++ b/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, From ecc01e7b4b42a3801f23d45c5a4856e3b171078e Mon Sep 17 00:00:00 2001 From: Naumov Alexey Date: Mon, 21 Mar 2022 12:56:34 +0300 Subject: [PATCH 2/2] feat(core-app): CB-1759 remove extra styles and components --- .../core-app/src/shared/ToolsPanel/ToolsPanel.tsx | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/webapp/packages/core-app/src/shared/ToolsPanel/ToolsPanel.tsx b/webapp/packages/core-app/src/shared/ToolsPanel/ToolsPanel.tsx index 174f85215e..6af14aa92f 100644 --- a/webapp/packages/core-app/src/shared/ToolsPanel/ToolsPanel.tsx +++ b/webapp/packages/core-app/src/shared/ToolsPanel/ToolsPanel.tsx @@ -41,7 +41,7 @@ const formStyles = css` overflow: auto; } content-box { - composes: theme-background-secondary theme-border-color-background from global; + composes: theme-border-color-background from global; position: relative; display: flex; flex: 1; @@ -60,11 +60,7 @@ export const ToolsPanel = observer(function ToolsPanel({ container }) { return styled(useStyles(tabStyle, formStyles))( - - - - - +