refactor(ui): export the bulk actions status display (#5185)

Author: valkirilov

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

@@ -2,12 +2,6 @@ import styled from 'styled-components'
 import React from 'react'
 import { ColorText, Text } from 'uiSrc/components/base/text'
 import { Theme } from 'uiSrc/components/base/theme/types'
-import { getApproximatePercentage, Maybe } from 'uiSrc/utils'
-import { isUndefined } from 'lodash'
-import { isProcessedBulkAction } from 'uiSrc/pages/browser/components/bulk-actions/utils'
-import { Banner } from 'uiSrc/components/base/display'
-import { BulkActionsStatus } from 'uiSrc/constants'
-import { Props } from './BulkActionsInfo'
 
 export const BulkActionsInfoFilter = styled.div<{
   className?: string
@@ -33,8 +27,6 @@ export const BulkActionsInfoSearch = styled(ColorText).attrs({
   word-break: break-all;
 `
 
-export const BulkActionsProgress = styled(Banner)``
-
 export const BulkActionsProgressLine = styled.div<{
   children?: React.ReactNode
 }>`
@@ -57,57 +49,3 @@ export const BulkActionsContainer = styled.div<{ children: React.ReactNode }>`
   display: flex;
   flex-direction: column;
 `
-
-export const BulkActionsStatusDisplay = ({
-  status,
-  total,
-  scanned,
-}: {
-  status: Props['status']
-  total: Maybe<number>
-  scanned: Maybe<number>
-}) => {
-  if (!isUndefined(status) && !isProcessedBulkAction(status)) {
-    return (
-      <BulkActionsProgress
-        message={
-          <>
-            In progress:
-            <ColorText size="XS">{` ${getApproximatePercentage(total, scanned)}`}</ColorText>
-          </>
-        }
-        data-testid="bulk-status-progress"
-      />
-    )
-  }
-  if (status === BulkActionsStatus.Aborted) {
-    return (
-      <BulkActionsProgress
-        variant="danger"
-        message={<>Stopped: {getApproximatePercentage(total, scanned)}</>}
-        data-testid="bulk-status-stopped"
-      />
-    )
-  }
-
-  if (status === BulkActionsStatus.Completed) {
-    return (
-      <BulkActionsProgress
-        showIcon
-        variant="success"
-        message="Action completed"
-        data-testid="bulk-status-completed"
-      />
-    )
-  }
-  if (status === BulkActionsStatus.Disconnected) {
-    return (
-      <BulkActionsProgress
-        variant="danger"
-        message={`Connection Lost: ${getApproximatePercentage(total, scanned)}`}
-        data-testid="bulk-status-disconnected"
-      />
-    )
-  }
-  return null
-}

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

@@ -6,12 +6,13 @@ import { BulkActionsStatus, KeyTypes, RedisDataType } from 'uiSrc/constants'
 import GroupBadge from 'uiSrc/components/group-badge/GroupBadge'
 import { Col, Row } from 'uiSrc/components/base/layout/flex'
 import { Text } from 'uiSrc/components/base/text'
+
+import BulkActionsStatusDisplay from '../BulkActionsStatusDisplay'
 import {
   BulkActionsContainer,
   BulkActionsInfoFilter,
   BulkActionsInfoSearch,
   BulkActionsProgressLine,
-  BulkActionsStatusDisplay,
   BulkActionsTitle,
 } from './BulkActionsInfo.styles'
 

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

@@ -0,0 +1,79 @@
+import React from 'react'
+import { render, screen } from 'uiSrc/utils/test-utils'
+import BulkActionsStatusDisplay, {
+  BulkActionsStatusDisplayProps,
+} from './BulkActionsStatusDisplay'
+import { faker } from '@faker-js/faker/locale/af_ZA'
+import { BulkActionsStatus } from 'uiSrc/constants'
+
+const renderBulkActionsStatusDisplay = (
+  props?: Partial<BulkActionsStatusDisplayProps>,
+) => {
+  const defaultProps: BulkActionsStatusDisplayProps = {
+    status: faker.helpers.enumValue(BulkActionsStatus),
+    total: faker.number.int({ min: 0, max: 1000 }),
+    scanned: faker.number.int({ min: 0, max: 1000 }),
+  }
+
+  return render(<BulkActionsStatusDisplay {...defaultProps} {...props} />)
+}
+
+describe('BulkActionsStatusDisplay', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  it('should render banner when status is in progress', () => {
+    const props: BulkActionsStatusDisplayProps = {
+      status: BulkActionsStatus.Running,
+      total: 200,
+      scanned: 50,
+    }
+
+    renderBulkActionsStatusDisplay(props)
+
+    const banner = screen.getByTestId('bulk-status-progress')
+
+    expect(banner).toBeInTheDocument()
+    expect(banner).toHaveTextContent('In progress: 25%')
+  })
+
+  it('should render banner when status is in Aborted', () => {
+    const props: BulkActionsStatusDisplayProps = {
+      status: BulkActionsStatus.Aborted,
+      total: 100,
+      scanned: 30,
+    }
+
+    renderBulkActionsStatusDisplay(props)
+
+    const banner = screen.getByTestId('bulk-status-stopped')
+
+    expect(banner).toBeInTheDocument()
+    expect(banner).toHaveTextContent('Stopped: 30%')
+  })
+
+  it('should render banner when status is Completed', () => {
+    renderBulkActionsStatusDisplay({ status: BulkActionsStatus.Completed })
+
+    const banner = screen.getByTestId('bulk-status-completed')
+
+    expect(banner).toBeInTheDocument()
+    expect(banner).toHaveTextContent('Action completed')
+  })
+
+  it('should render banner when status is Disconnected', () => {
+    const props: BulkActionsStatusDisplayProps = {
+      status: BulkActionsStatus.Disconnected,
+      total: 100,
+      scanned: 50,
+    }
+
+    renderBulkActionsStatusDisplay(props)
+
+    const banner = screen.getByTestId('bulk-status-disconnected')
+
+    expect(banner).toBeInTheDocument()
+    expect(banner).toHaveTextContent('Connection Lost: 50%')
+  })
+})

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

@@ -0,0 +1,71 @@
+import React from 'react'
+import { isUndefined } from 'lodash'
+
+import { BulkActionsStatus } from 'uiSrc/constants'
+import { getApproximatePercentage, Maybe } from 'uiSrc/utils'
+import { ColorText } from 'uiSrc/components/base/text'
+
+import { isProcessedBulkAction } from '../utils'
+import { Props } from '../BulkActionsInfo/BulkActionsInfo'
+import { Banner } from 'uiSrc/components/base/display'
+
+export interface BulkActionsStatusDisplayProps {
+  status: Props['status']
+  total: Maybe<number>
+  scanned: Maybe<number>
+}
+
+export const BulkActionsStatusDisplay = ({
+  status,
+  total,
+  scanned,
+}: BulkActionsStatusDisplayProps) => {
+  if (!isUndefined(status) && !isProcessedBulkAction(status)) {
+    return (
+      <Banner
+        message={
+          <>
+            In progress:
+            <ColorText size="XS">{` ${getApproximatePercentage(total, scanned)}`}</ColorText>
+          </>
+        }
+        data-testid="bulk-status-progress"
+      />
+    )
+  }
+
+  if (status === BulkActionsStatus.Aborted) {
+    return (
+      <Banner
+        variant="danger"
+        message={<>Stopped: {getApproximatePercentage(total, scanned)}</>}
+        data-testid="bulk-status-stopped"
+      />
+    )
+  }
+
+  if (status === BulkActionsStatus.Completed) {
+    return (
+      <Banner
+        showIcon
+        variant="success"
+        message="Action completed"
+        data-testid="bulk-status-completed"
+      />
+    )
+  }
+
+  if (status === BulkActionsStatus.Disconnected) {
+    return (
+      <Banner
+        variant="danger"
+        message={`Connection Lost: ${getApproximatePercentage(total, scanned)}`}
+        data-testid="bulk-status-disconnected"
+      />
+    )
+  }
+
+  return null
+}
+
+export default BulkActionsStatusDisplay

redisinsight/ui/src/pages/browser/components/bulk-actions/BulkActionsStatusDisplay/index.ts

@@ -0,0 +1,3 @@
+import BulkActionsStatusDisplay from './BulkActionsStatusDisplay'
+
+export default BulkActionsStatusDisplay