RI-7056 replace eui health (#4593)

* Add Health.tsx
* Replace EuiHealth

Author: pd-redis

redisinsight/ui/src/components/base/layout/flex/flex.styles.ts

@@ -174,22 +174,24 @@ export type FlexProps = PropsWithChildren &
     full?: boolean
   }
 
-export const StyledFlex = styled.div<FlexProps>`
+export const StyledFlex = styled.div<
+  Omit<FlexProps, 'direction'> & { $direction?: (typeof dirValues)[number] }
+>`
   display: flex;
   align-items: stretch;
   flex-grow: 1;
   ${({ gap = 'none' }) => (gap ? flexGroupStyles.gapSizes[gap] : '')}
   ${({ align = 'stretch' }) => (align ? flexGroupStyles.align[align] : '')}
-  ${({ direction = 'row' }) =>
-    direction ? flexGroupStyles.direction[direction] : ''}
+  ${({ $direction = 'row' }) =>
+    $direction ? flexGroupStyles.direction[$direction] : ''}
   ${({ justify = 'start' }) =>
     justify ? flexGroupStyles.justify[justify] : ''}
   ${({ centered = false }) => (centered ? flexGroupStyles.centered : '')}
   ${({ responsive = false }) => (responsive ? flexGroupStyles.responsive : '')}
   ${({ wrap = false }) => (wrap ? flexGroupStyles.wrap : '')}
-  ${({ full = false, direction = 'row' }) =>
+  ${({ full = false, $direction = 'row' }) =>
     full
-      ? direction === 'row' || direction === 'rowReverse'
+      ? $direction === 'row' || $direction === 'rowReverse'
         ? 'width: 100%' // if it is row make it full width
         : 'height: 100%;' // else, make it full height
       : ''}

redisinsight/ui/src/components/base/layout/flex/flex.tsx

@@ -39,10 +39,15 @@ export const Grid = ({ children, className, ...rest }: GridProps) => {
  *   </FlexItem>
  * </FlexGroup>
  */
-export const FlexGroup = ({ children, className, ...rest }: FlexProps) => {
+export const FlexGroup = ({
+  children,
+  className,
+  direction,
+  ...rest
+}: FlexProps) => {
   const classes = classNames('RI-flex-group', className)
   return (
-    <StyledFlex {...rest} className={classes}>
+    <StyledFlex {...rest} className={classes} $direction={direction}>
       {children}
     </StyledFlex>
   )

redisinsight/ui/src/components/base/text/Health.tsx

@@ -0,0 +1,25 @@
+import React from 'react'
+import { Typography } from '@redis-ui/components'
+import styled from 'styled-components'
+import { Row } from 'uiSrc/components/base/layout/flex'
+
+type BodyProps = React.ComponentProps<typeof Typography.Body>
+type ColorType = BodyProps['color'] | (string & {})
+export type HealthProps = Omit<BodyProps, 'color'> & {
+  color?: ColorType
+}
+const Indicator = styled.div<{
+  $color: ColorType
+}>`
+  width: 0.8rem;
+  height: 0.8rem;
+  border-radius: 50%;
+  background-color: ${({ $color }) => $color || 'inherit'};
+`
+
+export const Health = ({ color, size = 'S', ...rest }: HealthProps) => (
+  <Row align="center" gap="m" justify="start">
+    <Indicator $color={color} />
+    <Typography.Body {...rest} component="div" size={size} />
+  </Row>
+)

redisinsight/ui/src/pages/browser/components/add-key/AddKey.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 import cx from 'classnames'
-import { EuiHealth, EuiTitle, EuiToolTip, EuiButtonIcon } from '@elastic/eui'
+import { EuiTitle, EuiToolTip, EuiButtonIcon } from '@elastic/eui'
 import Divider from 'uiSrc/components/divider/Divider'
 import { KeyTypes } from 'uiSrc/constants'
 import HelpTexts from 'uiSrc/constants/help-texts'
@@ -21,6 +21,7 @@ import { isContainJSONModule, Maybe, stringToBuffer } from 'uiSrc/utils'
 import { RedisResponseBuffer } from 'uiSrc/slices/interfaces'
 
 import { Col, FlexItem, Row } from 'uiSrc/components/base/layout/flex'
+import { Health } from 'uiSrc/components/base/text/Health'
 import { ADD_KEY_TYPE_OPTIONS } from './constants/key-type-options'
 import AddKeyHash from './AddKeyHash'
 import AddKeyZset from './AddKeyZset'
@@ -61,13 +62,13 @@ const AddKey = (props: Props) => {
     return {
       value,
       inputDisplay: (
-        <EuiHealth
+        <Health
           color={color}
           style={{ lineHeight: 'inherit' }}
           data-test-subj={value}
         >
           {text}
-        </EuiHealth>
+        </Health>
       ),
     }
   })

redisinsight/ui/src/pages/browser/components/create-redisearch-index/CreateRedisearchIndex.tsx

@@ -3,7 +3,6 @@ import {
   EuiComboBox,
   EuiFieldText,
   EuiFormFieldset,
-  EuiHealth,
   EuiLink,
   EuiPanel,
   EuiPopover,
@@ -34,6 +33,7 @@ import {
   SecondaryButton,
 } from 'uiSrc/components/base/forms/buttons'
 import { FormField } from 'uiSrc/components/base/forms/FormField'
+import { Health } from 'uiSrc/components/base/text/Health'
 import { CreateRedisearchIndexDto } from 'apiSrc/modules/browser/redisearch/dto'
 
 import { KEY_TYPE_OPTIONS, RedisearchIndexKeyType } from './constants'
@@ -50,13 +50,13 @@ const keyTypeOptions = KEY_TYPE_OPTIONS.map((item) => {
   return {
     value,
     inputDisplay: (
-      <EuiHealth
+      <Health
         color={color}
         style={{ lineHeight: 'inherit' }}
         data-test-subj={value}
       >
         {text}
-      </EuiHealth>
+      </Health>
     ),
   }
 })

redisinsight/ui/src/pages/browser/components/filter-key-type/FilterKeyType.tsx

@@ -1,5 +1,4 @@
 import {
-  EuiHealth,
   EuiModal,
   EuiModalBody,
   EuiSuperSelect,
@@ -29,6 +28,7 @@ import { resetBrowserTree } from 'uiSrc/slices/app/context'
 import { appFeatureFlagsFeaturesSelector } from 'uiSrc/slices/app/features'
 import { AdditionalRedisModule } from 'uiSrc/slices/interfaces'
 import { OutsideClickDetector } from 'uiSrc/components/base/utils'
+import { Health } from 'uiSrc/components/base/text/Health'
 import { FILTER_KEY_TYPE_OPTIONS } from './constants'
 
 import styles from './styles.module.scss'
@@ -79,14 +79,14 @@ const FilterKeyType = ({ modules }: Props) => {
       return {
         value,
         inputDisplay: (
-          <EuiHealth color={color} className={styles.dropdownDisplay}>
+          <Health color={color} className={styles.dropdownDisplay}>
             {text}
-          </EuiHealth>
+          </Health>
         ),
         dropdownDisplay: (
-          <EuiHealth color={color} className={styles.dropdownDisplay}>
+          <Health color={color} className={styles.dropdownDisplay}>
             {text}
-          </EuiHealth>
+          </Health>
         ),
         'data-test-subj': `filter-option-type-${value}`,
       }

redisinsight/ui/src/pages/browser/components/filter-key-type/styles.module.scss

@@ -129,12 +129,3 @@
 .dropdownOption {
   padding-left: 6px;
 }
-
-.dropdownDisplay {
-  :global {
-    .euiFlexGroup {
-      margin: 0;
-      line-height: 1;
-    }
-  }
-}