From c7abcad034eec4cfe047622978923d39d8b3b38a Mon Sep 17 00:00:00 2001 From: Valentin Kirilov Date: Thu, 13 Nov 2025 15:09:49 +0200 Subject: [PATCH] refactor(ui): export the bulk actions status display - move out the main component outside of the styles file - added tests re #RI-7706 --- .../BulkActionsInfo.styles.tsx | 62 --------------- .../BulkActionsInfo/BulkActionsInfo.tsx | 3 +- .../BulkActionsStatusDisplay.spec.tsx | 79 +++++++++++++++++++ .../BulkActionsStatusDisplay.tsx | 71 +++++++++++++++++ .../BulkActionsStatusDisplay/index.ts | 3 + 5 files changed, 155 insertions(+), 63 deletions(-) create mode 100644 redisinsight/ui/src/pages/browser/components/bulk-actions/BulkActionsStatusDisplay/BulkActionsStatusDisplay.spec.tsx create mode 100644 redisinsight/ui/src/pages/browser/components/bulk-actions/BulkActionsStatusDisplay/BulkActionsStatusDisplay.tsx create mode 100644 redisinsight/ui/src/pages/browser/components/bulk-actions/BulkActionsStatusDisplay/index.ts diff --git a/redisinsight/ui/src/pages/browser/components/bulk-actions/BulkActionsInfo/BulkActionsInfo.styles.tsx b/redisinsight/ui/src/pages/browser/components/bulk-actions/BulkActionsInfo/BulkActionsInfo.styles.tsx index 7cee833298..fbf0b725a7 100644 --- a/redisinsight/ui/src/pages/browser/components/bulk-actions/BulkActionsInfo/BulkActionsInfo.styles.tsx +++ b/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 - scanned: Maybe -}) => { - if (!isUndefined(status) && !isProcessedBulkAction(status)) { - return ( - - In progress: - {` ${getApproximatePercentage(total, scanned)}`} - - } - data-testid="bulk-status-progress" - /> - ) - } - if (status === BulkActionsStatus.Aborted) { - return ( - Stopped: {getApproximatePercentage(total, scanned)}} - data-testid="bulk-status-stopped" - /> - ) - } - - if (status === BulkActionsStatus.Completed) { - return ( - - ) - } - if (status === BulkActionsStatus.Disconnected) { - return ( - - ) - } - return null -} diff --git a/redisinsight/ui/src/pages/browser/components/bulk-actions/BulkActionsInfo/BulkActionsInfo.tsx b/redisinsight/ui/src/pages/browser/components/bulk-actions/BulkActionsInfo/BulkActionsInfo.tsx index 0e6becc15b..5013cf57fe 100644 --- a/redisinsight/ui/src/pages/browser/components/bulk-actions/BulkActionsInfo/BulkActionsInfo.tsx +++ b/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' diff --git a/redisinsight/ui/src/pages/browser/components/bulk-actions/BulkActionsStatusDisplay/BulkActionsStatusDisplay.spec.tsx b/redisinsight/ui/src/pages/browser/components/bulk-actions/BulkActionsStatusDisplay/BulkActionsStatusDisplay.spec.tsx new file mode 100644 index 0000000000..f04dbc8474 --- /dev/null +++ b/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, +) => { + 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() +} + +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%') + }) +}) diff --git a/redisinsight/ui/src/pages/browser/components/bulk-actions/BulkActionsStatusDisplay/BulkActionsStatusDisplay.tsx b/redisinsight/ui/src/pages/browser/components/bulk-actions/BulkActionsStatusDisplay/BulkActionsStatusDisplay.tsx new file mode 100644 index 0000000000..b07e8f5706 --- /dev/null +++ b/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 + scanned: Maybe +} + +export const BulkActionsStatusDisplay = ({ + status, + total, + scanned, +}: BulkActionsStatusDisplayProps) => { + if (!isUndefined(status) && !isProcessedBulkAction(status)) { + return ( + + In progress: + {` ${getApproximatePercentage(total, scanned)}`} + + } + data-testid="bulk-status-progress" + /> + ) + } + + if (status === BulkActionsStatus.Aborted) { + return ( + Stopped: {getApproximatePercentage(total, scanned)}} + data-testid="bulk-status-stopped" + /> + ) + } + + if (status === BulkActionsStatus.Completed) { + return ( + + ) + } + + if (status === BulkActionsStatus.Disconnected) { + return ( + + ) + } + + return null +} + +export default BulkActionsStatusDisplay diff --git a/redisinsight/ui/src/pages/browser/components/bulk-actions/BulkActionsStatusDisplay/index.ts b/redisinsight/ui/src/pages/browser/components/bulk-actions/BulkActionsStatusDisplay/index.ts new file mode 100644 index 0000000000..f3ebd04099 --- /dev/null +++ b/redisinsight/ui/src/pages/browser/components/bulk-actions/BulkActionsStatusDisplay/index.ts @@ -0,0 +1,3 @@ +import BulkActionsStatusDisplay from './BulkActionsStatusDisplay' + +export default BulkActionsStatusDisplay