RI-7839: standardize loader behavior in pipeline and analytics pages (#5319)

remove multiple loaders on pipeline page, unified the looks of the loader on pipeline and statistics page

References: #RI-7839

Author: pd-redis

redisinsight/ui/src/pages/rdi/instance/components/header/components/buttons/deploy-pipeline-button/DeployPipelineButton.tsx

@@ -23,7 +23,7 @@ import { Modal } from 'uiSrc/components/base/display/modal'
 import { UploadWarningBanner } from 'uiSrc/components/upload-warning/styles'
 
 export interface Props {
-  loading: boolean
+  loading?: boolean
   disabled: boolean
   onReset: () => void
 }

redisinsight/ui/src/pages/rdi/instance/components/header/components/pipeline-actions/PipelineActions.tsx

@@ -2,6 +2,7 @@ import React, { useCallback, useEffect } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 import { useParams } from 'react-router-dom'
 
+import styled from 'styled-components'
 import {
   getPipelineStatusAction,
   rdiPipelineActionSelector,
@@ -23,13 +24,12 @@ import {
 } from 'uiSrc/slices/interfaces'
 
 import { FlexItem, Row } from 'uiSrc/components/base/layout/flex'
+import { Theme } from 'uiSrc/components/base/theme/types'
 import DeployPipelineButton from '../buttons/deploy-pipeline-button'
 import ResetPipelineButton from '../buttons/reset-pipeline-button'
 import RdiConfigFileActionMenu from '../rdi-config-file-action-menu'
 import StopPipelineButton from '../buttons/stop-pipeline-button'
 import StartPipelineButton from '../buttons/start-pipeline-button/StartPipelineButton'
-import styled from 'styled-components'
-import { Theme } from 'uiSrc/components/base/theme/types'
 
 const VerticalDelimiter = styled(FlexItem)`
   border: ${({ theme }: { theme: Theme }) => theme.components.appBar.separator};
@@ -183,11 +183,7 @@ const PipelineActions = ({ collectorStatus, pipelineStatus }: Props) => {
         ) : null}
       </FlexItem>
       <FlexItem>
-        <DeployPipelineButton
-          loading={deployLoading}
-          disabled={disabled}
-          onReset={resetPipeline}
-        />
+        <DeployPipelineButton disabled={disabled} onReset={resetPipeline} />
       </FlexItem>
       <FlexItem>
         <RdiConfigFileActionMenu />

redisinsight/ui/src/pages/rdi/pipeline-management/components/navigation/Navigation.tsx

@@ -5,8 +5,8 @@ import { useHistory, useLocation, useParams } from 'react-router-dom'
 import { Nullable } from 'uiSrc/utils'
 import { PageNames, Pages } from 'uiSrc/constants'
 import { Title } from 'uiSrc/components/base/text'
-import { Loader } from 'uiSrc/components/base/display'
 import { Col } from 'uiSrc/components/base/layout/flex'
+import { LoadingContent } from 'uiSrc/components/base'
 import { RdiPipelineTabs } from 'uiSrc/slices/interfaces/rdi'
 import { rdiPipelineSelector } from 'uiSrc/slices/rdi/pipeline'
 
@@ -55,7 +55,7 @@ const Navigation = () => {
         Pipeline management
       </Title>
 
-      {loading && <Loader size="xl" />}
+      {loading && <LoadingContent lines={4} />}
 
       {!loading && (
         <>

redisinsight/ui/src/pages/rdi/pipeline-management/pages/config/Config.spec.tsx

@@ -239,7 +239,7 @@ describe('Config', () => {
     expect(screen.getByTestId('rdi-config-loading')).toBeInTheDocument()
   })
 
-  it('should render loader on btn', () => {
+  it('should not render loader on btn for pipeline loading', () => {
     const rdiPipelineSelectorMock = jest.fn().mockReturnValue({
       loading: true,
     })
@@ -251,10 +251,11 @@ describe('Config', () => {
 
     // check is btn has loader
     const child = getByTestId('rdi-test-connection-btn')
-    expect(child.querySelector('svg')).toBeTruthy()
+    const icon = child.querySelector('svg')
+    expect(icon).not.toBeInTheDocument()
   })
 
-  it('should render loader on btn', () => {
+  it('should render loader on btn when testing connection', () => {
     const rdiTestConnectionsSelectorMock = jest.fn().mockReturnValue({
       loading: true,
     })

redisinsight/ui/src/pages/rdi/pipeline-management/pages/config/Config.tsx

@@ -202,7 +202,8 @@ const Config = () => {
           <Row grow={false} justify="end">
             <PrimaryButton
               onClick={testConnections}
-              loading={testingConnections || pipelineLoading}
+              loading={testingConnections}
+              disabled={pipelineLoading}
               aria-labelledby="test target connections"
               data-testid="rdi-test-connection-btn"
             >

redisinsight/ui/src/pages/rdi/statistics/StatisticsPage.spec.tsx

@@ -108,7 +108,7 @@ jest.mock('uiSrc/slices/rdi/statistics', () => ({
     loading: false,
     results: {
       status: 'success',
-      data: CONNECTIONS_DATA
+      data: CONNECTIONS_DATA,
     },
   }),
 }))
@@ -151,7 +151,7 @@ describe('StatisticsPage', () => {
       loading: false,
       results: {
         status: null,
-        data: CONNECTIONS_DATA
+        data: CONNECTIONS_DATA,
       },
     })
     render(<StatisticsPage />)
@@ -170,12 +170,14 @@ describe('StatisticsPage', () => {
     expect(screen.getByTestId('empty-pipeline')).toBeInTheDocument()
   })
 
-    it('renders statistics sections when status is success and data exists', () => {
+  it('renders statistics sections when status is success and data exists', async () => {
     render(<StatisticsPage />)
 
     // Check that statistics sections are rendered instead of empty state
     expect(screen.queryByTestId('empty-pipeline')).not.toBeInTheDocument()
-    expect(screen.getByTestId('processing-performance-info-refresh-btn')).toBeInTheDocument()
+    expect(
+      await screen.findByTestId('processing-performance-info-refresh-btn'),
+    ).toBeInTheDocument()
   })
 
   it('should call proper telemetry on page view', () => {
@@ -189,11 +191,11 @@ describe('StatisticsPage', () => {
     })
   })
 
-  it('should call proper telemetry event when refresh is clicked for processing performance section', () => {
+  it('should call proper telemetry event when refresh is clicked for processing performance section', async () => {
     render(<StatisticsPage />)
 
     fireEvent.click(
-      screen.getByTestId('processing-performance-info-refresh-btn'),
+      await screen.findByTestId('processing-performance-info-refresh-btn'),
     )
 
     expect(sendEventTelemetry).toBeCalledWith({
@@ -238,7 +240,9 @@ describe('StatisticsPage', () => {
 
     const testid = 'processing-performance-info'
 
-    await userEvent.click(screen.getByTestId(`${testid}-auto-refresh-config-btn`))
+    await userEvent.click(
+      await screen.findByTestId(`${testid}-auto-refresh-config-btn`),
+    )
     await waitForRiPopoverVisible()
     await userEvent.click(screen.getByTestId(`${testid}-auto-refresh-switch`)) // disabled
 
@@ -258,7 +262,9 @@ describe('StatisticsPage', () => {
 
     const testid = 'processing-performance-info'
 
-    await userEvent.click(screen.getByTestId(`${testid}-auto-refresh-config-btn`))
+    await userEvent.click(
+      await screen.findByTestId(`${testid}-auto-refresh-config-btn`),
+    )
     await waitForRiPopoverVisible()
     await userEvent.click(screen.getByTestId(`${testid}-auto-refresh-switch`)) // disabled
     await userEvent.click(screen.getByTestId(`${testid}-auto-refresh-switch`)) // enabled

redisinsight/ui/src/pages/rdi/statistics/StatisticsPage.styles.ts

@@ -0,0 +1,14 @@
+import styled from 'styled-components'
+import { Col } from 'uiSrc/components/base/layout/flex'
+
+export const Container = styled(Col)`
+  overflow: auto;
+  position: relative;
+`
+export const ContentWrapper = styled(Col)`
+  padding: ${({ theme }) => theme.core.space.space200};
+`
+
+export const LoadingState = styled(Col)`
+  z-index: 2;
+`

redisinsight/ui/src/pages/rdi/statistics/StatisticsPage.tsx

@@ -19,18 +19,17 @@ import { formatLongName, Nullable, setTitle } from 'uiSrc/utils'
 import { setLastPageContext } from 'uiSrc/slices/app/context'
 import { PageNames } from 'uiSrc/constants'
 import { Loader } from 'uiSrc/components/base/display'
-import { IRdiStatistics, RdiPipelineStatus } from 'uiSrc/slices/interfaces'
+import { type IRdiStatistics, RdiPipelineStatus } from 'uiSrc/slices/interfaces'
 
+import { FlexItem, Row } from 'uiSrc/components/base/layout/flex'
+import { AutoRefresh } from 'uiSrc/components'
 import Clients from './clients'
 import DataStreams from './data-streams'
 import Empty from './empty'
 import ProcessingPerformance from './processing-performance'
 import Status from './status'
 import TargetConnections from './target-connections'
-
-import styles from './styles.module.scss'
-import { Col, FlexItem, Row } from 'uiSrc/components/base/layout/flex'
-import { AutoRefresh } from 'uiSrc/components'
+import * as S from './StatisticsPage.styles'
 
 const shouldShowStatistics = (data: Nullable<IRdiStatistics>) =>
   data?.status === RdiPipelineStatus.Success && !!data?.data
@@ -123,60 +122,61 @@ const StatisticsPage = () => {
 
   const { data: statisticsData } = statisticsResults
 
-
   return (
-    <div className={styles.pageContainer}>
-      <Col gap="xxl" style={{ padding: 16 }}>
+    <S.Container>
+      <S.ContentWrapper gap="xxl">
         {pageLoading && (
-          <div className={styles.cover}>
+          <S.LoadingState centered>
             <Loader size="xl" />
-          </div>
+          </S.LoadingState>
         )}
         {!shouldShowStatistics(statisticsResults) ? (
           // TODO add loader
           <Empty rdiInstanceId={rdiInstanceId} />
         ) : (
-          <>
-            <Row justify="end">
-              <FlexItem>
-                <AutoRefresh
-                  postfix="processing-performance-info"
-                  displayText
-                  loading={isStatisticsLoading}
-                  lastRefreshTime={lastRefreshTime}
-                  enableAutoRefreshDefault
-                  testid="processing-performance-info"
-                  onRefresh={() => {
-                    setLastRefreshTime(Date.now())
-                    onRefresh('processing_performance')
-                  }}
-                  onRefreshClicked={() =>
-                    onRefreshClicked('processing_performance')
-                  }
-                  onEnableAutoRefresh={(
-                    enableAutoRefresh: boolean,
-                    refreshRate: string,
-                  ) =>
-                    onChangeAutoRefresh(
-                      'processing_performance',
-                      enableAutoRefresh,
-                      refreshRate,
-                    )
-                  }
-                />
-              </FlexItem>
-            </Row>
-            <Status data={statisticsData.rdiPipelineStatus} />
-            <ProcessingPerformance
-              data={statisticsData.processingPerformance}
-            />
-            <TargetConnections data={statisticsData.connections} />
-            <DataStreams data={statisticsData.dataStreams} />
-            <Clients data={statisticsData.clients} />
-          </>
+          !pageLoading && (
+            <>
+              <Row justify="end">
+                <FlexItem>
+                  <AutoRefresh
+                    postfix="processing-performance-info"
+                    displayText
+                    loading={isStatisticsLoading}
+                    lastRefreshTime={lastRefreshTime}
+                    enableAutoRefreshDefault
+                    testid="processing-performance-info"
+                    onRefresh={() => {
+                      setLastRefreshTime(Date.now())
+                      onRefresh('processing_performance')
+                    }}
+                    onRefreshClicked={() =>
+                      onRefreshClicked('processing_performance')
+                    }
+                    onEnableAutoRefresh={(
+                      enableAutoRefresh: boolean,
+                      refreshRate: string,
+                    ) =>
+                      onChangeAutoRefresh(
+                        'processing_performance',
+                        enableAutoRefresh,
+                        refreshRate,
+                      )
+                    }
+                  />
+                </FlexItem>
+              </Row>
+              <Status data={statisticsData.rdiPipelineStatus} />
+              <ProcessingPerformance
+                data={statisticsData.processingPerformance}
+              />
+              <TargetConnections data={statisticsData.connections} />
+              <DataStreams data={statisticsData.dataStreams} />
+              <Clients data={statisticsData.clients} />
+            </>
+          )
         )}
-      </Col>
-    </div>
+      </S.ContentWrapper>
+    </S.Container>
   )
 }