diff --git a/redisinsight/ui/src/assets/img/workbench/default_view_dark.svg b/redisinsight/ui/src/assets/img/workbench/default_view_dark.svg index eb83170e96..f7f7f2ab49 100644 --- a/redisinsight/ui/src/assets/img/workbench/default_view_dark.svg +++ b/redisinsight/ui/src/assets/img/workbench/default_view_dark.svg @@ -1,17 +1,4 @@ - - - - - - - - - - + + + diff --git a/redisinsight/ui/src/assets/img/workbench/default_view_light.svg b/redisinsight/ui/src/assets/img/workbench/default_view_light.svg index 743be20688..ea62a077b3 100644 --- a/redisinsight/ui/src/assets/img/workbench/default_view_light.svg +++ b/redisinsight/ui/src/assets/img/workbench/default_view_light.svg @@ -1,17 +1,4 @@ - - - - - - - - - - + + + diff --git a/redisinsight/ui/src/assets/img/workbench/table_view_icon_dark.svg b/redisinsight/ui/src/assets/img/workbench/table_view_icon_dark.svg index 55e24b4125..5831ce0e11 100644 --- a/redisinsight/ui/src/assets/img/workbench/table_view_icon_dark.svg +++ b/redisinsight/ui/src/assets/img/workbench/table_view_icon_dark.svg @@ -1,11 +1,6 @@ - - - - - - + + + + + diff --git a/redisinsight/ui/src/assets/img/workbench/table_view_icon_light.svg b/redisinsight/ui/src/assets/img/workbench/table_view_icon_light.svg index 2b92cfbe79..7a880c88f3 100644 --- a/redisinsight/ui/src/assets/img/workbench/table_view_icon_light.svg +++ b/redisinsight/ui/src/assets/img/workbench/table_view_icon_light.svg @@ -1,11 +1,6 @@ - - - - - - + + + + + diff --git a/redisinsight/ui/src/assets/img/workbench/text_view_dark.svg b/redisinsight/ui/src/assets/img/workbench/text_view_dark.svg new file mode 100644 index 0000000000..fbea15a54d --- /dev/null +++ b/redisinsight/ui/src/assets/img/workbench/text_view_dark.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/redisinsight/ui/src/assets/img/workbench/text_view_light.svg b/redisinsight/ui/src/assets/img/workbench/text_view_light.svg new file mode 100644 index 0000000000..8f8fa09e53 --- /dev/null +++ b/redisinsight/ui/src/assets/img/workbench/text_view_light.svg @@ -0,0 +1,4 @@ + + + + diff --git a/redisinsight/ui/src/components/query-card/QueryCardHeader/QueryCardHeader.tsx b/redisinsight/ui/src/components/query-card/QueryCardHeader/QueryCardHeader.tsx index 89ebc41045..814905bb19 100644 --- a/redisinsight/ui/src/components/query-card/QueryCardHeader/QueryCardHeader.tsx +++ b/redisinsight/ui/src/components/query-card/QueryCardHeader/QueryCardHeader.tsx @@ -13,6 +13,7 @@ import { } from '@elastic/eui' import { format } from 'date-fns' import { useParams } from 'react-router-dom' +import { findIndex } from 'lodash' import { Theme } from 'uiSrc/constants' import { getVisualizationsByCommand, truncateText, urlForAsset } from 'uiSrc/utils' @@ -20,6 +21,7 @@ import { ThemeContext } from 'uiSrc/contexts/themeContext' import { appPluginsSelector } from 'uiSrc/slices/app/plugins' import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry' import { getViewTypeOptions, WBQueryType } from 'uiSrc/pages/workbench/constants' +import { IPluginVisualization } from 'uiSrc/slices/interfaces' import DefaultPluginIconDark from 'uiSrc/assets/img/workbench/default_view_dark.svg' import DefaultPluginIconLight from 'uiSrc/assets/img/workbench/default_view_light.svg' @@ -116,7 +118,7 @@ const QueryCardHeader = (props: Props) => { ) || '' const pluginsOptions = getVisualizationsByCommand(query, visualizations) - .map((visualization: any) => ({ + .map((visualization: IPluginVisualization) => ({ id: visualization.uniqId, value: WBQueryType.Plugin, text: visualization.name, @@ -126,11 +128,12 @@ const QueryCardHeader = (props: Props) => { iconLight: (visualization.plugin.internal && visualization.iconLight) ? urlForAsset(visualization.plugin.baseUrl, visualization.iconLight) : DefaultPluginIconLight, + internal: visualization.plugin.internal })) - const options: EuiSuperSelectOption[] = getViewTypeOptions() + const options: any[] = getViewTypeOptions() options.push(...pluginsOptions) - const modifiedOptions = options.map((item) => { + const modifiedOptions: EuiSuperSelectOption[] = options.map((item) => { const { value, id, text, iconDark, iconLight } = item return { value: id ?? value, @@ -142,17 +145,35 @@ const QueryCardHeader = (props: Props) => { anchorClassName={styles.tooltipIcon} > ), - dropdownDisplay: truncateText(text, 20), + dropdownDisplay: ( +
+ + {truncateText(text, 20)} +
+ ), 'data-test-subj': `view-type-option-${value}-${id}`, } }) + const indexForSeparator = findIndex(pluginsOptions, (option) => !option.internal) + if (indexForSeparator > -1) { + modifiedOptions.splice(indexForSeparator + 1, 0, { + value: '', + disabled: true, + inputDisplay: () + }) + } + return (
{ onClick={onDropDownViewClick} > {isOpen && options.length > 1 && ( - onChangeView(value)} - data-testid="select-view-type" - /> +
+
+ onChangeView(value)} + data-testid="select-view-type" + /> +
+
)} diff --git a/redisinsight/ui/src/components/query-card/QueryCardHeader/styles.module.scss b/redisinsight/ui/src/components/query-card/QueryCardHeader/styles.module.scss index 5f620cea2c..702cc312ff 100644 --- a/redisinsight/ui/src/components/query-card/QueryCardHeader/styles.module.scss +++ b/redisinsight/ui/src/components/query-card/QueryCardHeader/styles.module.scss @@ -81,7 +81,7 @@ $marginIcon: 12px; .timeText, .summaryText { font: normal normal normal 12px/16px Graphik, sans-serif; letter-spacing: -0.12px; - color: var(--euiTextSubduedColor) !important; + color: var(--euiColorMediumShade) !important; min-width: 104px; text-align: left; } @@ -105,6 +105,59 @@ $marginIcon: 12px; flex: 1; } +.dropdownWrapper { + position: relative; + height: 40px; +} + +.dropdown { + width: 168px; + position: absolute; + z-index: 1; + + // move a little bit left to align with dropdown options icons + left: -21px; + + :global { + .euiFormControlLayout__childrenWrapper { + width: 46px; + position: relative; + // move right to align self + left: 21px; + } + } +} + +.dropdownOption { + display: flex; + align-items: center; + position: relative; + padding: 3px 0 3px 8px; + + span { + margin-left: 10px; + line-height: 20px; + overflow: hidden; + max-width: 100px; + } +} + +.iconDropdownOption { + width: 20px !important; + height: 20px !important; +} + +.dropdownOptionSeparator:after { + content: ''; + display: block; + height: 0; + width: 100%; + border-bottom: 1px solid var(--separatorDropdownColor); + opacity: 0.5; + position: absolute; + bottom: -8.5px; +} + .changeView:global(.euiSuperSelectControl) { border: none !important; background-color: inherit !important; @@ -123,11 +176,41 @@ $marginIcon: 12px; .changeViewItem { overflow-wrap: break-word; + :global { + .euiContextMenuItem__text { + overflow: visible; + } + .euiContextMenu__icon { + margin-right: 0; + } + } + &:global(.euiContextMenuItem-isDisabled) { + padding-top: 0; + padding-bottom: 0; + min-height: 12px !important; + cursor: auto !important; + &:hover { + background: transparent !important; + } + :global(.euiContextMenu__icon) { + height: 0; + } + } +} + +.separator { + height: 1px; + width: 100%; + background: var(--separatorDropdownColor); + display: block; + opacity: 0.5; } .buttonIcon { padding: 0 4px; width: 32px; + position: relative; + z-index: 2; } .container :global(.euiFlexItem).viewTypeIcon { diff --git a/redisinsight/ui/src/packages/redisearch/src/assets/table_view_icon_dark.svg b/redisinsight/ui/src/packages/redisearch/src/assets/table_view_icon_dark.svg index 55e24b4125..5831ce0e11 100644 --- a/redisinsight/ui/src/packages/redisearch/src/assets/table_view_icon_dark.svg +++ b/redisinsight/ui/src/packages/redisearch/src/assets/table_view_icon_dark.svg @@ -1,11 +1,6 @@ - - - - - - + + + + + diff --git a/redisinsight/ui/src/packages/redisearch/src/assets/table_view_icon_light.svg b/redisinsight/ui/src/packages/redisearch/src/assets/table_view_icon_light.svg index 2b92cfbe79..7a880c88f3 100644 --- a/redisinsight/ui/src/packages/redisearch/src/assets/table_view_icon_light.svg +++ b/redisinsight/ui/src/packages/redisearch/src/assets/table_view_icon_light.svg @@ -1,11 +1,6 @@ - - - - - - + + + + + diff --git a/redisinsight/ui/src/pages/workbench/constants.ts b/redisinsight/ui/src/pages/workbench/constants.ts index 4fd9e30b3b..efb03d0106 100644 --- a/redisinsight/ui/src/pages/workbench/constants.ts +++ b/redisinsight/ui/src/pages/workbench/constants.ts @@ -1,5 +1,7 @@ import RSNotAvailableLightImg from 'uiSrc/assets/img/workbench/RediSearchNotAvailableLight.jpg' import RSNotAvailableDarkImg from 'uiSrc/assets/img/workbench/RediSearchNotAvailableDark.jpg' +import TextViewIconDark from 'uiSrc/assets/img/workbench/text_view_dark.svg' +import TextViewIconLight from 'uiSrc/assets/img/workbench/text_view_light.svg' import { IModuleNotLoadedContent } from './components/module-not-loaded' export const WORKBENCH_HISTORY_WRAPPER_NAME = 'WORKBENCH' @@ -14,8 +16,8 @@ export const VIEW_TYPE_OPTIONS = [ { text: 'Text', value: WBQueryType.Text, - iconDark: 'visVega', - iconLight: 'visVega', + iconDark: TextViewIconDark, + iconLight: TextViewIconLight, }, ] diff --git a/redisinsight/ui/src/slices/interfaces/app.ts b/redisinsight/ui/src/slices/interfaces/app.ts index d7005b0dc9..2e56fe1338 100644 --- a/redisinsight/ui/src/slices/interfaces/app.ts +++ b/redisinsight/ui/src/slices/interfaces/app.ts @@ -77,6 +77,8 @@ export interface IPluginVisualization { activationMethod: string; matchCommands: string[]; default?: boolean; + iconDark?: string; + iconLight?: string; } export interface PluginsResponse { diff --git a/redisinsight/ui/src/styles/themes/dark_theme/_dark_theme.lazy.scss b/redisinsight/ui/src/styles/themes/dark_theme/_dark_theme.lazy.scss index ac4fb8cfad..2bb424c07e 100644 --- a/redisinsight/ui/src/styles/themes/dark_theme/_dark_theme.lazy.scss +++ b/redisinsight/ui/src/styles/themes/dark_theme/_dark_theme.lazy.scss @@ -91,6 +91,7 @@ --iconsDefaultHoverColor: #{$iconsDefaultHoverColor}; --separatorColor: #{$separatorColor}; + --separatorDropdownColor: #{$separatorDropdownColor}; --buttonSecondaryHoverColor: #{$buttonSecondaryHoverColor}; --buttonSecondaryTextColor: #{$buttonSecondaryTextColor}; diff --git a/redisinsight/ui/src/styles/themes/dark_theme/_theme_color.scss b/redisinsight/ui/src/styles/themes/dark_theme/_theme_color.scss index 123cd931f3..9530883b9a 100644 --- a/redisinsight/ui/src/styles/themes/dark_theme/_theme_color.scss +++ b/redisinsight/ui/src/styles/themes/dark_theme/_theme_color.scss @@ -52,6 +52,7 @@ $controlsLabelColor: #b5b6c0; $iconsDefaultColor: #b5b6c0; $iconsDefaultHoverColor: #DFE5EF; $separatorColor: #3D3D3D; +$separatorDropdownColor: #8B90A3; $buttonSecondaryHoverColor: #3e41a0; $buttonSecondaryTextColor: #ffffff; diff --git a/redisinsight/ui/src/styles/themes/light_theme/_light_theme.lazy.scss b/redisinsight/ui/src/styles/themes/light_theme/_light_theme.lazy.scss index b78da01e4c..31cddabc44 100644 --- a/redisinsight/ui/src/styles/themes/light_theme/_light_theme.lazy.scss +++ b/redisinsight/ui/src/styles/themes/light_theme/_light_theme.lazy.scss @@ -93,6 +93,7 @@ --iconsDefaultHoverColor: #{$iconsDefaultHoverColor}; --separatorColor: #{$separatorColor}; + --separatorDropdownColor: #{$separatorDropdownColor}; --buttonSecondaryHoverColor: #{$buttonSecondaryHoverColor}; --buttonSecondaryTextColor: #{$buttonSecondaryTextColor}; diff --git a/redisinsight/ui/src/styles/themes/light_theme/_theme_color.scss b/redisinsight/ui/src/styles/themes/light_theme/_theme_color.scss index 24273e75de..b05c5b48d2 100644 --- a/redisinsight/ui/src/styles/themes/light_theme/_theme_color.scss +++ b/redisinsight/ui/src/styles/themes/light_theme/_theme_color.scss @@ -50,6 +50,7 @@ $controlsLabelHoverColor: #173369; $iconsDefaultColor: #728BAF; $iconsDefaultHoverColor: #173369; $separatorColor: #C1CBD9; +$separatorDropdownColor: #8B90A3; $buttonSecondaryHoverColor: #3C56C7; $buttonSecondaryTextColor: #243DAC;