From 21dc48acd2a39ab5a9c4a0c5dbb3d18a0f7e007c Mon Sep 17 00:00:00 2001 From: naumov Date: Tue, 24 Oct 2023 14:32:17 +0200 Subject: [PATCH 1/4] CB-4005 add wrap mode --- .../src/ISqlEditorTabState.ts | 1 + .../OutputLogs/ACTION_LOGS_WRAP_MODE.ts | 13 +++++++ .../OutputLogs/OUTPUT_LOGS_FILTER_MENU.ts | 2 +- .../OutputLogs/OUTPUT_LOGS_MENU.ts | 10 +++++ .../OutputLogs/OutputLogTypesFilterMenu.m.css | 5 --- ...TypesFilterMenu.tsx => OutputLogsMenu.tsx} | 12 +++--- .../OutputLogs/OutputLogsPanel.tsx | 15 ++++--- .../OutputLogs/OutputLogsService.ts | 2 +- .../OutputLogs/OutputLogsToolbar.tsx | 4 +- .../OutputLogs/OutputMenuBootstrap.ts | 39 ++++++++++++++++++- .../plugin-sql-editor/src/locales/en.ts | 1 + .../plugin-sql-editor/src/locales/it.ts | 1 + .../plugin-sql-editor/src/locales/ru.ts | 1 + .../plugin-sql-editor/src/locales/zh.ts | 1 + 14 files changed, 85 insertions(+), 22 deletions(-) create mode 100644 webapp/packages/plugin-sql-editor/src/SqlResultTabs/OutputLogs/ACTION_LOGS_WRAP_MODE.ts create mode 100644 webapp/packages/plugin-sql-editor/src/SqlResultTabs/OutputLogs/OUTPUT_LOGS_MENU.ts rename webapp/packages/plugin-sql-editor/src/SqlResultTabs/OutputLogs/{OutputLogTypesFilterMenu.tsx => OutputLogsMenu.tsx} (75%) diff --git a/webapp/packages/plugin-sql-editor/src/ISqlEditorTabState.ts b/webapp/packages/plugin-sql-editor/src/ISqlEditorTabState.ts index a117d81396..eeb9bf3ef7 100644 --- a/webapp/packages/plugin-sql-editor/src/ISqlEditorTabState.ts +++ b/webapp/packages/plugin-sql-editor/src/ISqlEditorTabState.ts @@ -44,6 +44,7 @@ export interface IExecutionPlanTab { export interface IOutputLogsTab extends ISqlEditorResultTab { selectedLogTypes: IOutputLogType[]; + wrapMode: boolean; } export interface ISqlEditorTabState { diff --git a/webapp/packages/plugin-sql-editor/src/SqlResultTabs/OutputLogs/ACTION_LOGS_WRAP_MODE.ts b/webapp/packages/plugin-sql-editor/src/SqlResultTabs/OutputLogs/ACTION_LOGS_WRAP_MODE.ts new file mode 100644 index 0000000000..90fce5d74d --- /dev/null +++ b/webapp/packages/plugin-sql-editor/src/SqlResultTabs/OutputLogs/ACTION_LOGS_WRAP_MODE.ts @@ -0,0 +1,13 @@ +/* + * CloudBeaver - Cloud Database Manager + * Copyright (C) 2020-2023 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 { createAction } from '@cloudbeaver/core-view'; + +export const ACTION_LOGS_WRAP_MODE = createAction('logs-wrap-mode', { + label: 'sql_editor_output_logs_wrap_mode', + tooltip: 'sql_editor_output_logs_wrap_mode', +}); diff --git a/webapp/packages/plugin-sql-editor/src/SqlResultTabs/OutputLogs/OUTPUT_LOGS_FILTER_MENU.ts b/webapp/packages/plugin-sql-editor/src/SqlResultTabs/OutputLogs/OUTPUT_LOGS_FILTER_MENU.ts index e1f53931bd..8607589760 100644 --- a/webapp/packages/plugin-sql-editor/src/SqlResultTabs/OutputLogs/OUTPUT_LOGS_FILTER_MENU.ts +++ b/webapp/packages/plugin-sql-editor/src/SqlResultTabs/OutputLogs/OUTPUT_LOGS_FILTER_MENU.ts @@ -7,4 +7,4 @@ */ import { createMenu } from '@cloudbeaver/core-view'; -export const OUTPUT_LOGS_FILTER_MENU = createMenu('output_logs_filter_menu', 'Output Logs'); +export const OUTPUT_LOGS_FILTER_MENU = createMenu('output_logs_filter_menu', 'Filter', 'filter'); diff --git a/webapp/packages/plugin-sql-editor/src/SqlResultTabs/OutputLogs/OUTPUT_LOGS_MENU.ts b/webapp/packages/plugin-sql-editor/src/SqlResultTabs/OutputLogs/OUTPUT_LOGS_MENU.ts new file mode 100644 index 0000000000..ccc63a6def --- /dev/null +++ b/webapp/packages/plugin-sql-editor/src/SqlResultTabs/OutputLogs/OUTPUT_LOGS_MENU.ts @@ -0,0 +1,10 @@ +/* + * CloudBeaver - Cloud Database Manager + * Copyright (C) 2020-2023 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 { createMenu } from '@cloudbeaver/core-view'; + +export const OUTPUT_LOGS_MENU = createMenu('output_logs_menu', 'Output Logs'); diff --git a/webapp/packages/plugin-sql-editor/src/SqlResultTabs/OutputLogs/OutputLogTypesFilterMenu.m.css b/webapp/packages/plugin-sql-editor/src/SqlResultTabs/OutputLogs/OutputLogTypesFilterMenu.m.css index 83bd17790b..9f86fd050b 100644 --- a/webapp/packages/plugin-sql-editor/src/SqlResultTabs/OutputLogs/OutputLogTypesFilterMenu.m.css +++ b/webapp/packages/plugin-sql-editor/src/SqlResultTabs/OutputLogs/OutputLogTypesFilterMenu.m.css @@ -6,9 +6,4 @@ box-sizing: border-box; align-items: center; justify-content: center; - - & .icon { - width: 16px; - height: 100%; - } } diff --git a/webapp/packages/plugin-sql-editor/src/SqlResultTabs/OutputLogs/OutputLogTypesFilterMenu.tsx b/webapp/packages/plugin-sql-editor/src/SqlResultTabs/OutputLogs/OutputLogsMenu.tsx similarity index 75% rename from webapp/packages/plugin-sql-editor/src/SqlResultTabs/OutputLogs/OutputLogTypesFilterMenu.tsx rename to webapp/packages/plugin-sql-editor/src/SqlResultTabs/OutputLogs/OutputLogsMenu.tsx index 9b31a9b4c8..61b963ade3 100644 --- a/webapp/packages/plugin-sql-editor/src/SqlResultTabs/OutputLogs/OutputLogTypesFilterMenu.tsx +++ b/webapp/packages/plugin-sql-editor/src/SqlResultTabs/OutputLogs/OutputLogsMenu.tsx @@ -8,23 +8,23 @@ import { observer } from 'mobx-react-lite'; import React, { useEffect } from 'react'; -import { Icon, s, useS } from '@cloudbeaver/core-blocks'; +import { ActionIconButton, s, useS } from '@cloudbeaver/core-blocks'; import { ContextMenu } from '@cloudbeaver/core-ui'; import { useMenu } from '@cloudbeaver/core-view'; import { DATA_CONTEXT_SQL_EDITOR_STATE } from '../../DATA_CONTEXT_SQL_EDITOR_STATE'; import type { ISqlEditorTabState } from '../../ISqlEditorTabState'; -import { OUTPUT_LOGS_FILTER_MENU } from './OUTPUT_LOGS_FILTER_MENU'; +import { OUTPUT_LOGS_MENU } from './OUTPUT_LOGS_MENU'; import style from './OutputLogTypesFilterMenu.m.css'; interface Props { sqlEditorTabState: ISqlEditorTabState; } -export const OutputLogsFilterMenu = observer(function OutputLogTypesFilterMenu({ sqlEditorTabState }) { +export const OutputLogsFilterMenu = observer(function OutputLogsFilterMenu({ sqlEditorTabState }) { const styles = useS(style); const menu = useMenu({ - menu: OUTPUT_LOGS_FILTER_MENU, + menu: OUTPUT_LOGS_MENU, }); useEffect(() => { @@ -32,8 +32,8 @@ export const OutputLogsFilterMenu = observer(function OutputLogTypesFilte }, []); return ( - - + + ); }); diff --git a/webapp/packages/plugin-sql-editor/src/SqlResultTabs/OutputLogs/OutputLogsPanel.tsx b/webapp/packages/plugin-sql-editor/src/SqlResultTabs/OutputLogs/OutputLogsPanel.tsx index 246fad90eb..1a5688d6a7 100644 --- a/webapp/packages/plugin-sql-editor/src/SqlResultTabs/OutputLogs/OutputLogsPanel.tsx +++ b/webapp/packages/plugin-sql-editor/src/SqlResultTabs/OutputLogs/OutputLogsPanel.tsx @@ -7,7 +7,7 @@ */ import { observer } from 'mobx-react-lite'; -import { Container, Group, s, useResource, useS } from '@cloudbeaver/core-blocks'; +import { Container, useResource } from '@cloudbeaver/core-blocks'; import { useService } from '@cloudbeaver/core-di'; import { EditorLoader } from '@cloudbeaver/plugin-codemirror6'; @@ -27,13 +27,16 @@ export const OutputLogsPanel = observer(function SqlOutputLogsPanel({ sql const outputLogs = outputLogsService.getOutputLogs(data, sqlEditorTabState); const state = useOutputLogsPanelState(outputLogs, sqlEditorTabState); + const wrapMode = sqlEditorTabState.outputLogsTab?.wrapMode; return ( - - - - {data && } - + + + {data && ( + + + + )} ); }); diff --git a/webapp/packages/plugin-sql-editor/src/SqlResultTabs/OutputLogs/OutputLogsService.ts b/webapp/packages/plugin-sql-editor/src/SqlResultTabs/OutputLogs/OutputLogsService.ts index f518517bf7..1b40f8db84 100644 --- a/webapp/packages/plugin-sql-editor/src/SqlResultTabs/OutputLogs/OutputLogsService.ts +++ b/webapp/packages/plugin-sql-editor/src/SqlResultTabs/OutputLogs/OutputLogsService.ts @@ -42,7 +42,7 @@ export class OutputLogsService { order, }; - state.outputLogsTab = { ...tab, selectedLogTypes: [...OUTPUT_LOG_TYPES] }; + state.outputLogsTab = { ...tab, selectedLogTypes: [...OUTPUT_LOG_TYPES], wrapMode: true }; state.tabs.push({ ...tab }); } diff --git a/webapp/packages/plugin-sql-editor/src/SqlResultTabs/OutputLogs/OutputLogsToolbar.tsx b/webapp/packages/plugin-sql-editor/src/SqlResultTabs/OutputLogs/OutputLogsToolbar.tsx index 8f6002dd87..268788721c 100644 --- a/webapp/packages/plugin-sql-editor/src/SqlResultTabs/OutputLogs/OutputLogsToolbar.tsx +++ b/webapp/packages/plugin-sql-editor/src/SqlResultTabs/OutputLogs/OutputLogsToolbar.tsx @@ -11,8 +11,8 @@ import React from 'react'; import { Container, Icon, InputField, s, useS, useTranslate } from '@cloudbeaver/core-blocks'; import type { ISqlEditorTabState } from '../../ISqlEditorTabState'; +import { OutputLogsFilterMenu } from './OutputLogsMenu'; import style from './OutputLogsToolbar.m.css'; -import { OutputLogsFilterMenu } from './OutputLogTypesFilterMenu'; import type { SqlOutputLogsPanelState } from './useOutputLogsPanelState'; interface Props { @@ -20,7 +20,7 @@ interface Props { sqlEditorTabState: ISqlEditorTabState; } -export const OutputLogsToolbar = observer(function SqlOutputLogsToolbar({ state, sqlEditorTabState }) { +export const OutputLogsToolbar = observer(function OutputLogsToolbar({ state, sqlEditorTabState }) { const styles = useS(style); const translate = useTranslate(); diff --git a/webapp/packages/plugin-sql-editor/src/SqlResultTabs/OutputLogs/OutputMenuBootstrap.ts b/webapp/packages/plugin-sql-editor/src/SqlResultTabs/OutputLogs/OutputMenuBootstrap.ts index c23292cd31..0e717f988c 100644 --- a/webapp/packages/plugin-sql-editor/src/SqlResultTabs/OutputLogs/OutputMenuBootstrap.ts +++ b/webapp/packages/plugin-sql-editor/src/SqlResultTabs/OutputLogs/OutputMenuBootstrap.ts @@ -6,7 +6,7 @@ * you may not use this file except in compliance with the License. */ import { Bootstrap, injectable } from '@cloudbeaver/core-di'; -import { ActionService, KeyBindingService, MenuCheckboxItem, MenuService } from '@cloudbeaver/core-view'; +import { ActionService, DATA_CONTEXT_MENU, KeyBindingService, MenuCheckboxItem, MenuService } from '@cloudbeaver/core-view'; import { ACTION_SQL_EDITOR_SHOW_OUTPUT } from '../../actions/ACTION_SQL_EDITOR_SHOW_OUTPUT'; import { KEY_BINDING_SQL_EDITOR_SHOW_OUTPUT } from '../../actions/bindings/KEY_BINDING_SQL_EDITOR_SHOW_OUTPUT'; @@ -14,9 +14,11 @@ import { DATA_CONTEXT_SQL_EDITOR_STATE } from '../../DATA_CONTEXT_SQL_EDITOR_STA import { ESqlDataSourceFeatures } from '../../SqlDataSource/ESqlDataSourceFeatures'; import { SqlDataSourceService } from '../../SqlDataSource/SqlDataSourceService'; import { SQL_EDITOR_ACTIONS_MENU } from '../../SqlEditor/SQL_EDITOR_ACTIONS_MENU'; +import { ACTION_LOGS_WRAP_MODE } from './ACTION_LOGS_WRAP_MODE'; import { ACTION_SHOW_OUTPUT_LOGS } from './ACTION_SHOW_OUTPUT_LOGS'; import { OUTPUT_LOG_TYPES } from './IOutputLogTypes'; import { OUTPUT_LOGS_FILTER_MENU } from './OUTPUT_LOGS_FILTER_MENU'; +import { OUTPUT_LOGS_MENU } from './OUTPUT_LOGS_MENU'; import { OutputLogsService } from './OutputLogsService'; @injectable() @@ -32,6 +34,13 @@ export class OutputMenuBootstrap extends Bootstrap { } register(): void | Promise { + this.menuService.addCreator({ + isApplicable: context => context.get(DATA_CONTEXT_MENU) === OUTPUT_LOGS_MENU, + getItems(context, items) { + return [...items, ACTION_LOGS_WRAP_MODE, OUTPUT_LOGS_FILTER_MENU]; + }, + }); + this.menuService.addCreator({ menus: [OUTPUT_LOGS_FILTER_MENU], getItems: context => { @@ -74,6 +83,34 @@ export class OutputMenuBootstrap extends Bootstrap { }, }); + this.actionService.addHandler({ + id: 'plugin-sql-editor-output-logs-handler', + isActionApplicable(context, action) { + const state = context.tryGet(DATA_CONTEXT_SQL_EDITOR_STATE); + + if (!state?.outputLogsTab) { + return false; + } + + return [ACTION_LOGS_WRAP_MODE].includes(action); + }, + handler: context => { + const state = context.get(DATA_CONTEXT_SQL_EDITOR_STATE); + + if (state.outputLogsTab) { + state.outputLogsTab.wrapMode = !state.outputLogsTab.wrapMode; + } + }, + getActionInfo: (_, action) => ({ + ...action.info, + type: 'checkbox', + }), + isChecked: context => { + const state = context.get(DATA_CONTEXT_SQL_EDITOR_STATE); + return state.outputLogsTab?.wrapMode === true; + }, + }); + this.registerOutputLogsAction(); } diff --git a/webapp/packages/plugin-sql-editor/src/locales/en.ts b/webapp/packages/plugin-sql-editor/src/locales/en.ts index 54308fd446..6188f2c387 100644 --- a/webapp/packages/plugin-sql-editor/src/locales/en.ts +++ b/webapp/packages/plugin-sql-editor/src/locales/en.ts @@ -10,6 +10,7 @@ export default [ ['sql_editor_output_logs_button_tooltip', 'Show server output (Shift + Ctrl + O)'], ['sql_editor_output_logs_tab_title', 'Output'], ['sql_editor_output_logs_input_placeholder', 'Enter a part of a message to search for here'], + ['sql_editor_output_logs_wrap_mode', 'Wrap mode'], ['sql_editor_sql_execution_button_tooltip', 'Execute SQL Statement (Ctrl + Enter)'], ['sql_editor_sql_execution_new_tab_button_tooltip', 'Execute SQL Statement in new tab (Ctrl + \\)(Shift + Ctrl + Enter)'], ['sql_editor_sql_execution_script_button_tooltip', 'Execute SQL Script (Alt + X)'], diff --git a/webapp/packages/plugin-sql-editor/src/locales/it.ts b/webapp/packages/plugin-sql-editor/src/locales/it.ts index 8071d17e7e..86bd014eec 100644 --- a/webapp/packages/plugin-sql-editor/src/locales/it.ts +++ b/webapp/packages/plugin-sql-editor/src/locales/it.ts @@ -10,6 +10,7 @@ export default [ ['sql_editor_output_logs_button_tooltip', 'Show server output (Shift + Ctrl + O)'], ['sql_editor_output_logs_tab_title', 'Output'], ['sql_editor_output_logs_input_placeholder', 'Enter a part of a message to search for here'], + ['sql_editor_output_logs_wrap_mode', 'Wrap mode'], ['sql_editor_sql_execution_button_tooltip', "Esegui l'istruzione SQL (Ctrl + Enter)"], ['sql_editor_sql_execution_new_tab_button_tooltip', "Esegui l'istruzione SQL in una nuova tab (Ctrl + \\)(Shift + Ctrl + Enter)"], ['sql_editor_sql_execution_script_button_tooltip', 'Esegui lo script SQL (Alt + X)'], diff --git a/webapp/packages/plugin-sql-editor/src/locales/ru.ts b/webapp/packages/plugin-sql-editor/src/locales/ru.ts index f639337962..988660cdde 100644 --- a/webapp/packages/plugin-sql-editor/src/locales/ru.ts +++ b/webapp/packages/plugin-sql-editor/src/locales/ru.ts @@ -10,6 +10,7 @@ export default [ ['sql_editor_output_logs_button_tooltip', 'Показать вывод сервера (Shift + Ctrl + O)'], ['sql_editor_output_logs_tab_title', 'Вывод логов'], ['sql_editor_output_logs_input_placeholder', 'Введите часть сообщения для поиска'], + ['sql_editor_output_logs_wrap_mode', 'Перенос строк'], ['sql_editor_sql_execution_button_tooltip', 'Выполнить SQL Выражение (Ctrl + Enter)'], ['sql_editor_sql_execution_new_tab_button_tooltip', 'Выполнить SQL Выражение в новой вкладке (Ctrl + \\)(Shift + Ctrl + Enter)'], ['sql_editor_sql_execution_script_button_tooltip', 'Исполнить SQL Скрипт (Alt + X)'], diff --git a/webapp/packages/plugin-sql-editor/src/locales/zh.ts b/webapp/packages/plugin-sql-editor/src/locales/zh.ts index 3c6d9ac298..840c8b6cee 100644 --- a/webapp/packages/plugin-sql-editor/src/locales/zh.ts +++ b/webapp/packages/plugin-sql-editor/src/locales/zh.ts @@ -10,6 +10,7 @@ export default [ ['sql_editor_output_logs_button_tooltip', 'Show server output (Shift + Ctrl + O)'], ['sql_editor_output_logs_tab_title', 'Output'], ['sql_editor_output_logs_input_placeholder', 'Enter a part of a message to search for here'], + ['sql_editor_output_logs_wrap_mode', 'Wrap mode'], ['sql_editor_sql_execution_button_tooltip', '执行SQL语句（Ctrl + Enter）'], ['sql_editor_sql_execution_new_tab_button_tooltip', '在新选项卡中执行SQL语句（Ctrl + \\）（Shift + Ctrl + Enter）'], ['sql_editor_sql_execution_script_button_tooltip', '执行SQL脚本（Alt + X）'], From a6b97a8d909292ed9f262e378f7213ffb8015181 Mon Sep 17 00:00:00 2001 From: naumov Date: Mon, 30 Oct 2023 17:05:43 +0100 Subject: [PATCH 2/4] CB-4005 save wrap state in user settings --- .../src/ContextMenu/MenuBar/MenuBarItem.tsx | 22 +++----- .../src/ISqlEditorTabState.ts | 1 - .../OutputLogs/ACTION_SHOW_OUTPUT_LOGS.ts | 7 +++ .../OutputLogs/IOutputLogTypes.ts | 7 +++ .../OutputLogs/OUTPUT_LOGS_FILTER_MENU.ts | 2 +- ...P_MODE.ts => OUTPUT_LOGS_SETTINGS_MENU.ts} | 7 +-- .../OutputLogs/OutputLogTypesFilterMenu.m.css | 9 --- .../OutputLogs/OutputLogsMenu.tsx | 25 ++++++--- .../OutputLogs/OutputLogsMenuItem.m.css | 3 + .../OutputLogs/OutputLogsPanel.tsx | 9 ++- .../OutputLogs/OutputLogsService.ts | 25 ++++++++- .../OutputLogs/OutputLogsToolbar.tsx | 4 +- .../OutputLogs/OutputMenuBootstrap.ts | 55 ++++++++++--------- 13 files changed, 105 insertions(+), 71 deletions(-) rename webapp/packages/plugin-sql-editor/src/SqlResultTabs/OutputLogs/{ACTION_LOGS_WRAP_MODE.ts => OUTPUT_LOGS_SETTINGS_MENU.ts} (50%) delete mode 100644 webapp/packages/plugin-sql-editor/src/SqlResultTabs/OutputLogs/OutputLogTypesFilterMenu.m.css create mode 100644 webapp/packages/plugin-sql-editor/src/SqlResultTabs/OutputLogs/OutputLogsMenuItem.m.css diff --git a/webapp/packages/core-ui/src/ContextMenu/MenuBar/MenuBarItem.tsx b/webapp/packages/core-ui/src/ContextMenu/MenuBar/MenuBarItem.tsx index f3b2b7c472..fc869bb06e 100644 --- a/webapp/packages/core-ui/src/ContextMenu/MenuBar/MenuBarItem.tsx +++ b/webapp/packages/core-ui/src/ContextMenu/MenuBar/MenuBarItem.tsx @@ -35,29 +35,23 @@ export const MenuBarItem = observer( const title = translate(rest.title); return (