RI-7541: Fix key details header (#5026)

* remove hard coded select container widths and heights
* align the arrows icon in the center
* leave just one formatter icon with currentColor set by the theme
* make the icon smaller

Author: dantovska

redisinsight/ui/src/assets/img/icons/formatter_dark.svg renamed to redisinsight/ui/src/assets/img/icons/formatter.svg

@@ -112,8 +112,7 @@ import RedisTimeSeriesDark from 'uiSrc/assets/img/modules/RedisTimeSeriesDark.sv
 import RedisTimeSeriesLight from 'uiSrc/assets/img/modules/RedisTimeSeriesLight.svg?react'
 import UnknownDark from 'uiSrc/assets/img/modules/UnknownDark.svg?react'
 import UnknownLight from 'uiSrc/assets/img/modules/UnknownLight.svg?react'
-import FormattersLight from 'uiSrc/assets/img/icons/formatter_light.svg?react'
-import FormattersDark from 'uiSrc/assets/img/icons/formatter_dark.svg?react'
+import FormatterSvg from 'uiSrc/assets/img/icons/formatter.svg?react'
 
 // Import options icons
 import ActiveActiveDark from 'uiSrc/assets/img/options/Active-ActiveDark.svg?react'
@@ -257,8 +256,7 @@ export const OutputDarkIcon = createIconComponent(OutputDarkSvg)
 export const OutputIconIcon = createIconComponent(OutputIconBaseSvg)
 
 // Modules icons
-export const FormattersLightIcon = createIconComponent(FormattersLight)
-export const FormattersDarkIcon = createIconComponent(FormattersDark)
+export const FormatterIcon = createIconComponent(FormatterSvg)
 export const RedisAIDarkIcon = createIconComponent(RedisAIDark)
 export const RedisAILightIcon = createIconComponent(RedisAILight)
 export const RedisBloomDarkIcon = createIconComponent(RedisBloomDark)

redisinsight/ui/src/assets/img/icons/formatter_light.svg

@@ -11,8 +11,7 @@ type KeyDetailsSelectProps = ComponentProps<typeof RiSelect> & {
 const KeyDetailsSelect = styled(RiSelect)<KeyDetailsSelectProps>`
   border: none !important;
   background-color: inherit !important;
-  color: var(--iconsDefaultColor) !important;
-  max-width: ${({ $fullWidth }) => ($fullWidth ? '100%' : '92px')};
+  max-width: 100%;
   padding-right: 18px;
   padding-left: 0;
   height: 28px;
@@ -41,8 +40,8 @@ const ControlsIcon = styled(RiIcon)`
   position: relative;
   margin-left: 3px;
   margin-top: 2px;
-  width: 20px !important;
-  height: 20px !important;
+  width: 17px !important;
+  height: 17px !important;
 
   :global(.insightsOpen) {
     @media only screen and (max-width: 1440px) {
@@ -56,11 +55,11 @@ const Container = styled.div<{
   className?: string
   children: React.ReactNode
 }>`
-  margin-right: 12px;
+  display: flex;
+  align-items: center;
   height: 30px;
   border-radius: 4px;
   transition: transform 0.3s ease;
-  width: 92px;
   overflow: hidden;
 
   &:hover {
@@ -76,15 +75,6 @@ const Container = styled.div<{
     height: 100%;
   }
 
-  .selectWrapper {
-    width: 142px;
-    position: absolute;
-
-    [class*='TriggerContainer'] {
-      width: 92px;
-    }
-  }
-
   &:not(.fullWidth) {
     width: 56px;
 

redisinsight/ui/src/components/base/icons/iconRegistry.tsx

@@ -7,9 +7,7 @@ import {
   KeyValueFormat,
   MIDDLE_SCREEN_RESOLUTION,
   TEXT_DISABLED_STRING_FORMATTING,
-  Theme,
 } from 'uiSrc/constants'
-import { ThemeContext } from 'uiSrc/contexts/themeContext'
 import {
   keysSelector,
   selectedKeyDataSelector,
@@ -40,7 +38,6 @@ const KeyDetailsHeaderFormatter = (props: Props) => {
   const { width } = props
 
   const { instanceId = '' } = useParams<{ instanceId: string }>()
-  const { theme } = useContext(ThemeContext)
   const { viewType } = useSelector(keysSelector)
   const { viewFormat } = useSelector(selectedKeySelector)
   const { type: keyType, length } = useSelector(selectedKeyDataSelector) ?? {}
@@ -78,11 +75,7 @@ const KeyDetailsHeaderFormatter = (props: Props) => {
                 <OptionText>{text}</OptionText>
               ) : (
                 <ControlsIcon
-                  type={
-                    theme === Theme.Dark
-                      ? 'FormattersDarkIcon'
-                      : 'FormattersLightIcon'
-                  }
+                  type="FormatterIcon"
                   data-testid={`key-value-formatter-option-selected-${value}`}
                 />
               )}

redisinsight/ui/src/pages/browser/modules/key-details-header/components/key-details-header-formatter/KeyDetailsHeaderFormatter.styles.tsx

@@ -1,9 +1,6 @@
 .container {
-  margin-right: 12px;
-  height: 30px;
   border-radius: 4px;
   transition: transform 0.3s ease;
-  width: 92px;
   overflow: hidden;
 
   &:hover {
@@ -14,25 +11,8 @@
     transform: translateY(1px);
   }
 
-  :global(.euiFormControlLayout) {
-    height: 100%;
-  }
-
-  .selectWrapper {
-    width: 142px;
-    position: absolute;
-
-    :global(.euiFormControlLayout__childrenWrapper) {
-      width: 92px;
-    }
-  }
-
   &:not(.fullWidth) {
     width: 46px;
-
-    :global(.euiFormControlLayout__childrenWrapper) {
-      width: 46px;
-    }
   }
 
   .optionText {
@@ -47,36 +27,11 @@
   }
 }
 
-.changeView:global(.euiSuperSelectControl) {
-  border: none !important;
-  background-color: inherit !important;
-  color: var(--iconsDefaultColor) !important;
-  min-width: 46px;
-  padding-right: 18px;
-  padding-left: 0;
-  height: 28px;
-
-  & ~ div {
-    right: 7px;
-    top: 4px;
-    svg {
-      width: 10px !important;
-      height: 10px !important;
-    }
-  }
-}
-
 .formatType {
   margin-top: 3px;
   margin-bottom: 3px;
   padding: 6px !important;
   min-height: 36px !important;
-
-  :global(.euiContextMenu__icon) {
-    height: 14px;
-    width: 14px;
-    margin-right: 6px;
-  }
 }
 
 .optionText {