#RI-2067 - differentiate default and custom plugins

redisinsight/ui/src/components/query-card/QueryCardHeader/QueryCardHeader.tsx

@@ -13,13 +13,15 @@ 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'
 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<string>[] = getViewTypeOptions()
+  const options: any[] = getViewTypeOptions()
   options.push(...pluginsOptions)
-  const modifiedOptions = options.map((item) => {
+  const modifiedOptions: EuiSuperSelectOption<any>[] = 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}
           >
             <EuiIcon
+              className={styles.iconDropdownOption}
               type={theme === Theme.Dark ? iconDark : iconLight}
               data-testid={`view-type-selected-${value}-${id}`}
             />
           </EuiToolTip>
         </div>
       ),
-      dropdownDisplay: truncateText(text, 20),
+      dropdownDisplay: (
+        <div className={cx(styles.dropdownOption)}>
+          <EuiIcon
+            className={styles.iconDropdownOption}
+            type={theme === Theme.Dark ? iconDark : iconLight}
+          />
+          <span>{truncateText(text, 20)}</span>
+        </div>
+      ),
       '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: (<span className={styles.separator} />)
+    })
+  }
+
   return (
     <div
       onClick={toggleOpen}
@@ -194,14 +215,18 @@ const QueryCardHeader = (props: Props) => {
           onClick={onDropDownViewClick}
         >
           {isOpen && options.length > 1 && (
-            <EuiSuperSelect
-              options={modifiedOptions}
-              itemClassName={cx('withColorDefinition', styles.changeViewItem)}
-              className={cx(styles.changeView)}
-              valueOfSelected={selectedValue}
-              onChange={(value: string) => onChangeView(value)}
-              data-testid="select-view-type"
-            />
+            <div className={styles.dropdownWrapper}>
+              <div className={styles.dropdown}>
+                <EuiSuperSelect
+                  options={modifiedOptions}
+                  itemClassName={cx(styles.changeViewItem)}
+                  className={cx(styles.changeView)}
+                  valueOfSelected={selectedValue}
+                  onChange={(value: string) => onChangeView(value)}
+                  data-testid="select-view-type"
+                />
+              </div>
+            </div>
           )}
         </EuiFlexItem>
         <EuiFlexItem grow={false} className={styles.buttonIcon} onClick={onDropDownViewClick}>

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 {

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

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 {

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

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;

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