#RI-2067 - differentiate default and custom plugins

Author: Roman.Sergeenko

redisinsight/ui/src/assets/img/workbench/default_view_dark.svg

@@ -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/assets/img/workbench/default_view_light.svg

@@ -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 {