RI-7065: Replace EUI Progress with custom Progress Bar Loader (#4663)

* create progress bar loader component
* replace EuiProgress with ProgressBarLoader
* apply the background color logic; this will be extracted and reused at a later point

Author: dantovska

redisinsight/ui/src/components/base/display/index.ts

@@ -1 +1,4 @@
-export { default as Loader } from './loader/Loader'
+import Loader from './loader/Loader'
+import ProgressBarLoader from './progress-bar/ProgressBarLoader'
+
+export { Loader, ProgressBarLoader }

redisinsight/ui/src/components/base/display/loader/Loader.tsx

@@ -22,9 +22,11 @@ const convertSizeToPx = (tShirtSize: string, space: Space) => {
   }
 }
 
-export default function Loader({ size, ...rest }: RedisLoaderProps) {
+const Loader = ({ size, ...rest }: RedisLoaderProps) => {
   const theme = useTheme()
   const { space } = theme.core
   const sizeInPx = size ? convertSizeToPx(size, space) : space.space100
   return <RedisLoader size={sizeInPx} {...rest} />
 }
+
+export default Loader

redisinsight/ui/src/components/base/display/progress-bar/ProgressBarLoader.tsx

@@ -0,0 +1,19 @@
+import React from 'react'
+import {
+  LoaderBar,
+  ProgressBarLoaderProps,
+  LoaderContainer,
+} from './progress-bar-loader.styles'
+
+const ProgressBarLoader = ({
+  className,
+  style,
+  color,
+  ...rest
+}: ProgressBarLoaderProps) => (
+  <LoaderContainer className={className} style={style} {...rest}>
+    <LoaderBar $color={color} />
+  </LoaderContainer>
+)
+
+export default ProgressBarLoader

redisinsight/ui/src/components/base/display/progress-bar/progress-bar-loader.styles.ts

@@ -0,0 +1,89 @@
+import { Theme, theme } from '@redis-ui/styles'
+import { ReactNode } from 'react'
+import styled, { css, keyframes } from 'styled-components'
+
+export type EuiColorNames =
+  | 'inherit'
+  | 'default'
+  | 'primary'
+  | 'danger'
+  | 'warning'
+  | 'success'
+
+interface LoaderBarProps {
+  color?: string
+}
+
+export type ColorType = EuiColorNames | (string & {})
+type ThemeColors = typeof theme.semantic.color
+
+export const getBarBackgroundColor = (
+  themeColors: ThemeColors,
+  color?: ColorType,
+) => {
+  if (!color) {
+    return themeColors.background.primary300
+  }
+
+  const barBackgroundColors: Record<ColorType, string> = {
+    inherit: 'inherit',
+    default: themeColors.background.primary300,
+    primary: themeColors.background.primary300,
+    danger: themeColors.background.danger600,
+    warning: themeColors.background.attention600,
+    success: themeColors.background.success600,
+  }
+
+  return barBackgroundColors[color] ?? color
+}
+
+export interface MapProps extends LoaderBarProps {
+  $color?: ColorType
+  theme: Theme
+}
+
+export const getColorBackgroundStyles = ({ $color, theme }: MapProps) => {
+  const colors = theme.semantic.color
+
+  const getColorValue = (color?: ColorType) =>
+    getBarBackgroundColor(colors, color)
+
+  return css`
+    background-color: ${getColorValue($color)};
+  `
+}
+
+const loading = keyframes`
+  0% {
+    transform: scaleX(1) translateX(-100%);
+  }
+  100% {
+    transform: scaleX(1) translateX(100%);
+  }
+`
+
+interface LoaderContainerProps {
+  children?: ReactNode
+  style?: React.CSSProperties
+  className?: string
+}
+
+export const LoaderContainer = styled.div<LoaderContainerProps>`
+  position: relative;
+  height: 3px;
+  overflow: hidden;
+  border-radius: 2px;
+`
+
+export const LoaderBar = styled.div<MapProps>`
+  ${({ $color, theme }) => getColorBackgroundStyles({ $color, theme })};
+
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  border-radius: 2px;
+
+  animation: ${loading} 1s ease-in-out infinite;
+`
+
+export type ProgressBarLoaderProps = LoaderContainerProps & LoaderBarProps

redisinsight/ui/src/components/base/layout/index.ts

@@ -4,6 +4,7 @@ import ResizableContainer from './resize/container/ResizableContainer'
 import ResizablePanel from './resize/panel/ResizablePanel'
 import ResizablePanelHandle from './resize/handle/ResizablePanelHandle'
 
+
 export * from './card'
 export {
   HorizontalRule,

redisinsight/ui/src/components/multi-search/MultiSearch.tsx

@@ -1,4 +1,4 @@
-import { EuiFieldText, EuiIcon, EuiProgress, keys } from '@elastic/eui'
+import { EuiFieldText, EuiIcon, keys } from '@elastic/eui'
 import cx from 'classnames'
 import React, { ChangeEvent, useEffect, useRef, useState } from 'react'
 
@@ -15,6 +15,7 @@ import {
   ActionIconButton,
   IconButton,
 } from 'uiSrc/components/base/forms/buttons'
+import { ProgressBarLoader } from 'uiSrc/components/base/display'
 import styles from './styles.module.scss'
 
 interface MultiSearchSuggestion {
@@ -204,11 +205,9 @@ const MultiSearch = (props: Props) => {
               data-testid="suggestions"
             >
               {suggestions?.loading && (
-                <EuiProgress
-                  color="primary"
-                  size="xs"
-                  position="absolute"
+                <ProgressBarLoader
                   data-testid="progress-suggestions"
+                  color="primary"
                 />
               )}
               <ul role="listbox">

redisinsight/ui/src/components/virtual-grid/VirtualGrid.tsx

@@ -2,14 +2,15 @@ import React, { useCallback, useEffect, useRef, useState } from 'react'
 import cx from 'classnames'
 import AutoSizer, { Size } from 'react-virtualized-auto-sizer'
 import { isObject, xor } from 'lodash'
-import { EuiProgress, EuiIcon } from '@elastic/eui'
+import { EuiIcon } from '@elastic/eui'
 import InfiniteLoader from 'react-window-infinite-loader'
 import { VariableSizeGrid as Grid, GridChildComponentProps } from 'react-window'
 
 import { Maybe, Nullable } from 'uiSrc/utils'
 import { SortOrder } from 'uiSrc/constants'
 import { SCAN_COUNT_DEFAULT } from 'uiSrc/constants/api'
 import { Text } from 'uiSrc/components/base/text'
+import { ProgressBarLoader } from 'uiSrc/components/base/display'
 import { IProps } from './interfaces'
 import { getColumnWidth, useInnerElementType } from './utils'
 
@@ -308,10 +309,8 @@ const VirtualGrid = (props: IProps) => {
       data-testid="virtual-grid-container"
     >
       {loading && !hideProgress && (
-        <EuiProgress
+        <ProgressBarLoader
           color="primary"
-          size="xs"
-          position="absolute"
           className={styles.progress}
           data-testid="progress-entry-list"
         />

redisinsight/ui/src/components/virtual-grid/styles.module.scss

@@ -78,10 +78,6 @@ $paddingCell: 12px;
   overflow-y: hidden !important;
 }
 
-.progress {
-  z-index: 2;
-}
-
 .container {
   position: relative;
   height: 100%;

redisinsight/ui/src/components/virtual-table/VirtualTable.tsx

@@ -1,4 +1,4 @@
-import { EuiIcon, EuiProgress } from '@elastic/eui'
+import { EuiIcon } from '@elastic/eui'
 import cx from 'classnames'
 import { findIndex, isNumber, sumBy, xor } from 'lodash'
 import React, { useCallback, useEffect, useRef, useState } from 'react'
@@ -21,7 +21,7 @@ import { isEqualBuffers, Maybe, Nullable } from 'uiSrc/utils'
 
 import { Text } from 'uiSrc/components/base/text'
 import { RIResizeObserver } from 'uiSrc/components/base/utils'
-
+import { ProgressBarLoader } from 'uiSrc/components/base/display'
 import {
   ColumnWidthSizes,
   IColumnSearchState,
@@ -599,12 +599,9 @@ const VirtualTable = (props: IProps) => {
           data-testid="virtual-table-container"
         >
           {loading && !hideProgress && (
-            <EuiProgress
+            <ProgressBarLoader
               color="primary"
-              size="xs"
-              position="absolute"
-              className={styles.progress}
-              data-testid="progress-key-list"
+              data-testid="progress-key-table"
             />
           )}
           <InfiniteLoader

redisinsight/ui/src/components/virtual-table/styles.module.scss

@@ -13,10 +13,6 @@ $footerHeight: 38px;
   overflow-y: hidden !important;
 }
 
-.progress {
-  z-index: 2;
-}
-
 .container {
   position: relative;
   height: 100%;