RI-7731: Adjust RDI: General info - update text (#5204)

* Fix General info data and component structure for responsiveness

* add unit tests for the component

* create and use factory for pipeline status data

Author: dantovska

redisinsight/ui/src/mocks/factories/rdi/RdiPipelineStatus.factory.ts

@@ -0,0 +1,29 @@
+import { Factory } from 'fishery'
+import { faker } from '@faker-js/faker'
+
+import {
+  IRdiPipelineStatus,
+  PipelineState,
+  PipelineStatus,
+} from 'uiSrc/slices/interfaces'
+
+export const rdiPipelineStatusFactory = Factory.define<IRdiPipelineStatus>(
+  () => ({
+    rdiVersion: faker.system.semver(),
+    address: `${faker.internet.ip()}:${faker.internet.port()}`,
+    runStatus: faker.helpers.arrayElement([
+      PipelineStatus.Validating,
+      PipelineStatus.Starting,
+      PipelineStatus.Stopping,
+      PipelineStatus.Resetting,
+      PipelineStatus.Ready,
+      PipelineStatus.NotReady,
+      PipelineStatus.Stopped,
+    ]),
+    syncMode: faker.helpers.arrayElement([
+      PipelineState.CDC,
+      PipelineState.InitialSync,
+      PipelineState.NotRunning,
+    ]),
+  }),
+)

redisinsight/ui/src/pages/rdi/statistics/status/Status.spec.tsx

@@ -0,0 +1,60 @@
+import React from 'react'
+
+import { render, screen } from 'uiSrc/utils/test-utils'
+import { rdiPipelineStatusFactory } from 'uiSrc/mocks/factories/rdi/RdiPipelineStatus.factory'
+import Status from './Status'
+
+const mockedProps = rdiPipelineStatusFactory.build()
+
+describe('Status', () => {
+  it('should render', () => {
+    const { container } = render(<Status data={mockedProps} />)
+    expect(container).toBeInTheDocument()
+  })
+
+  it('should render the title correctly', () => {
+    render(<Status data={mockedProps} />)
+    expect(screen.getByText('General info')).toBeInTheDocument()
+  })
+
+  it('should render all status labels correctly', () => {
+    render(<Status data={mockedProps} />)
+
+    expect(screen.getByText('RDI version')).toBeInTheDocument()
+    expect(screen.getByText('RDI database address')).toBeInTheDocument()
+    expect(screen.getByText('Run status')).toBeInTheDocument()
+    expect(screen.getByText('Sync mode')).toBeInTheDocument()
+  })
+
+  it('should render with different data values', () => {
+    const customProps = rdiPipelineStatusFactory.build({
+      rdiVersion: '2.0.0',
+      address: 'localhost:6380',
+      runStatus: 'stopped',
+      syncMode: 'initial-sync',
+    })
+
+    render(<Status data={customProps} />)
+
+    expect(screen.getByText('2.0.0')).toBeInTheDocument()
+    expect(screen.getByText('localhost:6380')).toBeInTheDocument()
+    expect(screen.getByText('stopped')).toBeInTheDocument()
+    expect(screen.getByText('initial-sync')).toBeInTheDocument()
+  })
+
+  it('should handle empty string values', () => {
+    const emptyProps = rdiPipelineStatusFactory.build({
+      rdiVersion: '',
+      address: '',
+      runStatus: '',
+      syncMode: '',
+    })
+
+    render(<Status data={emptyProps} />)
+
+    expect(screen.getByText('RDI version')).toBeInTheDocument()
+    expect(screen.getByText('RDI database address')).toBeInTheDocument()
+    expect(screen.getByText('Run status')).toBeInTheDocument()
+    expect(screen.getByText('Sync mode')).toBeInTheDocument()
+  })
+})

redisinsight/ui/src/pages/rdi/statistics/status/Status.tsx

@@ -8,16 +8,14 @@ import { StyledPanel } from 'uiSrc/pages/rdi/statistics/status/styles'
 import { Text, Title } from 'uiSrc/components/base/text'
 
 const StatusItem = ({ label, value }: { label: string; value: string }) => (
-  <FlexItem grow>
-    <Row gap="m" responsive>
-      <FlexItem grow>
-        <Text>{label}</Text>
-      </FlexItem>
-      <FlexItem grow>
-        <Text color="primary">{value}</Text>
-      </FlexItem>
-    </Row>
-  </FlexItem>
+  <Row gap="m" responsive>
+    <FlexItem grow>
+      <Text>{label}</Text>
+    </FlexItem>
+    <FlexItem grow>
+      <Text color="primary">{value}</Text>
+    </FlexItem>
+  </Row>
 )
 
 interface Props {
@@ -34,13 +32,13 @@ const Status = ({ data }: Props) => {
           General info
         </Title>
         <Row gap="m" responsive>
-          <StatusItem label="RDI DB Version" value={rdiVersion} />
+          <StatusItem label="RDI version" value={rdiVersion} />
           <VerticalDivider />
-          <StatusItem label="Address" value={address} />
+          <StatusItem label="RDI database address" value={address} />
           <VerticalDivider />
           <StatusItem label="Run status" value={runStatus} />
           <VerticalDivider />
-          <StatusItem label="Sync Mode" value={syncMode} />
+          <StatusItem label="Sync mode" value={syncMode} />
         </Row>
       </Col>
     </StyledPanel>