update some issues caused by merge with main branch

Author: pd-redis

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

@@ -41,7 +41,7 @@ export const RiIcon = ({ type, size, ...props }: IconComponentProps) => {
     return (
       <img
         {...(props as ImgHTMLAttributes<HTMLImageElement>)}
-        alt={props.title ? props.title : ''}
+        alt={props.title ?? ''}
         src={type}
         className={cx(type, props.className)}
         style={props.style}

redisinsight/ui/src/pages/browser/components/bulk-actions/BulkActionsTabs/BulkActionsTabs.tsx

@@ -1,10 +1,8 @@
 import React, { useMemo } from 'react'
-import { EuiIcon } from '@elastic/eui'
 import { useSelector } from 'react-redux'
 
 import { BulkActionsType } from 'uiSrc/constants'
 import { selectedBulkActionsSelector } from 'uiSrc/slices/browser/bulkActions'
-import BulkUpload from 'uiSrc/assets/img/icons/bulk-upload.svg?react'
 
 import {
   getMatchType,
@@ -17,6 +15,7 @@ import { keysSelector } from 'uiSrc/slices/browser/keys'
 import Tabs, { TabInfo } from 'uiSrc/components/base/layout/tabs'
 
 import { Text } from 'uiSrc/components/base/text'
+import { RiIcon } from 'uiSrc/components/base/icons/RiIcon'
 import styles from './styles.module.scss'
 
 export interface Props {
@@ -58,7 +57,7 @@ const BulkActionsTabs = (props: Props) => {
         value: BulkActionsType.Delete,
         label: (
           <>
-            <EuiIcon type="trash" />
+            <RiIcon type="DeleteIcon" />
             <Text>Delete Keys</Text>
           </>
         ),
@@ -68,7 +67,7 @@ const BulkActionsTabs = (props: Props) => {
         value: BulkActionsType.Upload,
         label: (
           <>
-            <EuiIcon type={BulkUpload} />
+            <RiIcon type="BulkUploadIcon" />
             <Text>Upload Data</Text>
           </>
         ),

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

@@ -1,9 +1,8 @@
-import { EuiIcon } from '@elastic/eui'
-
 import styled from 'styled-components'
 import { ComponentProps } from 'react'
 import { ColorText } from 'uiSrc/components/base/text'
 import { RiSelect } from 'uiSrc/components/base/forms/select/RiSelect'
+import { IconComponentProps, RiIcon } from 'uiSrc/components/base/icons/RiIcon'
 
 type KeyDetailsSelectProps = ComponentProps<typeof RiSelect> & {
   $fullWidth?: boolean
@@ -38,12 +37,12 @@ const OptionText = styled(ColorText)`
   text-overflow: ellipsis;
 `
 
-const ControlsIcon = styled(EuiIcon)`
+const ControlsIcon = styled(RiIcon)<IconComponentProps>`
   position: relative;
-  margin-left: 3px;
   margin-top: 2px;
   width: 20px !important;
   height: 20px !important;
+  rotate: 90deg;
 
   :global(.insightsOpen) {
     @media only screen and (max-width: 1440px) {

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

@@ -1,4 +1,4 @@
-import React, { useContext, useEffect, useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import { EuiToolTip } from '@elastic/eui'
 import { useDispatch, useSelector } from 'react-redux'
 import { useParams } from 'react-router-dom'
@@ -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,
@@ -39,7 +37,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,7 +75,7 @@ const KeyDetailsHeaderFormatter = (props: Props) => {
                 <OptionText color="subdued">{text}</OptionText>
               ) : (
                 <ControlsIcon
-                  type={theme === Theme.Dark ? FormattersDark : FormattersLight}
+                  type="SwitchIcon"
                   data-testid={`key-value-formatter-option-selected-${value}`}
                 />
               )}