Fe/feature/ri 7687 rdi page pipeline header (#5128)

* RI-7687: use tabs for navigation in RDI (poc)

* RI-7687: add tests and remove navigation from the left bar

* RI-7687: rework pipeline header

* RI-7687: rework pipeline header - fix tests

Author: ArtemHoruzhenko

redisinsight/ui/src/pages/rdi/instance/components/header/RdiPipelineHeader.tsx

@@ -11,7 +11,16 @@ import { FlexItem, Row } from 'uiSrc/components/base/layout/flex'
 import CurrentPipelineStatus from './components/current-pipeline-status'
 
 import PipelineActions from './components/pipeline-actions'
-import styles from './styles.module.scss'
+import styled from 'styled-components'
+import { Theme } from 'uiSrc/components/base/theme/types'
+
+const StyledRdiPipelineHeader = styled(Row)`
+  padding: 0 16px;
+  border-bottom: 4px solid
+    ${({ theme }: { theme: Theme }) =>
+      theme.components.tabs.variants.default.tabsLine.color};
+  height: 58px;
+`
 
 const RdiPipelineHeader = () => {
   const [headerLoading, setHeaderLoading] = useState(true)
@@ -50,11 +59,7 @@ const RdiPipelineHeader = () => {
     : undefined
 
   return (
-    <Row
-      className={styles.wrapper}
-      align="center"
-      justify="between"
-    >
+    <StyledRdiPipelineHeader align="center" justify="between">
       <FlexItem grow>
         <CurrentPipelineStatus
           pipelineState={pipelineState}
@@ -66,7 +71,7 @@ const RdiPipelineHeader = () => {
         collectorStatus={collectorStatus}
         pipelineStatus={pipelineStatus}
       />
-    </Row>
+    </StyledRdiPipelineHeader>
   )
 }
 

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

@@ -117,14 +117,13 @@ const DeployPipelineButton = ({ loading, disabled, onReset }: Props) => {
         }}
         button={
           <PrimaryButton
-            size="s"
             onClick={handleClickDeploy}
             icon={RiRocketIcon}
             disabled={disabled}
             loading={loading}
             data-testid="deploy-rdi-pipeline"
           >
-            Deploy Pipeline
+            Deploy
           </PrimaryButton>
         }
       >

redisinsight/ui/src/pages/rdi/instance/components/header/components/buttons/reset-pipeline-button/ResetPipelineButton.spec.tsx

@@ -1,6 +1,12 @@
 import React from 'react'
 
-import { fireEvent, render, screen, waitFor } from 'uiSrc/utils/test-utils'
+import {
+  fireEvent,
+  render,
+  screen,
+  userEvent,
+  waitFor,
+} from 'uiSrc/utils/test-utils'
 import ResetPipelineButton, { PipelineButtonProps } from './ResetPipelineButton'
 
 const mockedProps: PipelineButtonProps = {
@@ -46,7 +52,7 @@ describe('ResetPipelineButton', () => {
     const onClick = jest.fn()
     render(<ResetPipelineButton {...mockedProps} loading onClick={onClick} />)
 
-    fireEvent.click(screen.getByTestId('reset-pipeline-btn'))
+    userEvent.click(screen.getByTestId('reset-pipeline-btn'))
     expect(onClick).not.toHaveBeenCalled()
   })
 })

redisinsight/ui/src/pages/rdi/instance/components/header/components/buttons/reset-pipeline-button/ResetPipelineButton.tsx

@@ -1,10 +1,10 @@
 import React from 'react'
 
-import { RiResetIcon } from 'uiSrc/components/base/icons'
 import { Spacer } from 'uiSrc/components/base/layout/spacer'
-import { SecondaryButton } from 'uiSrc/components/base/forms/buttons'
 import { RiTooltip } from 'uiSrc/components'
 import styles from '../styles.module.scss'
+import { Button, TextButton } from '@redis-ui/components'
+import { ResetIcon } from '@redis-ui/icons'
 
 export interface PipelineButtonProps {
   onClick: () => void
@@ -35,17 +35,15 @@ const ResetPipelineButton = ({
     }
     anchorClassName={disabled || loading ? styles.disabled : styles.tooltip}
   >
-    <SecondaryButton
+    <TextButton
       aria-label="Reset pipeline button"
-      size="s"
-      icon={RiResetIcon}
       data-testid="reset-pipeline-btn"
       onClick={onClick}
       disabled={disabled}
-      loading={loading}
     >
-      Reset Pipeline
-    </SecondaryButton>
+      <Button.Icon icon={ResetIcon} />
+      Reset
+    </TextButton>
   </RiTooltip>
 )
 

redisinsight/ui/src/pages/rdi/instance/components/header/components/buttons/start-pipeline-button/StartPipelineButton.tsx

@@ -17,14 +17,13 @@ const StartPipelineButton = ({
   >
     <SecondaryButton
       aria-label="Start running pipeline"
-      size="s"
       icon={PlayFilledIcon}
       data-testid="start-pipeline-btn"
       disabled={disabled}
       loading={loading}
       onClick={onClick}
     >
-      Start Pipeline
+      Start
     </SecondaryButton>
   </RiTooltip>
 )

redisinsight/ui/src/pages/rdi/instance/components/header/components/buttons/stop-pipeline-button/StopPipelineButton.tsx

@@ -17,14 +17,13 @@ const StopPipelineButton = ({
   >
     <SecondaryButton
       aria-label="Stop running pipeline"
-      size="s"
       loading={loading}
       disabled={disabled}
       icon={RiStopIcon}
       data-testid="stop-pipeline-btn"
       onClick={onClick}
     >
-      Stop Pipeline
+      Stop
     </SecondaryButton>
   </RiTooltip>
 )

redisinsight/ui/src/pages/rdi/instance/components/header/components/current-pipeline-status/CurrentPipelineStatus.tsx

@@ -6,7 +6,8 @@ import { IconProps } from 'uiSrc/components/base/icons'
 import { Title } from 'uiSrc/components/base/text/Title'
 import { Loader } from 'uiSrc/components/base/display'
 import { RiTooltip } from 'uiSrc/components'
-import styles from './styles.module.scss'
+import { FlexItem, Row } from 'uiSrc/components/base/layout/flex'
+import { Text } from 'uiSrc/components/base/text'
 
 export interface Props {
   pipelineState?: PipelineState
@@ -57,22 +58,30 @@ const CurrentPipelineStatus = ({
   const errorTooltipContent = statusError && formatLongName(statusError)
 
   return (
-    <div className={styles.stateWrapper}>
-      <Title size="XS">Pipeline State:</Title>
-      {headerLoading ? (
-        <Loader size="m" style={{ marginLeft: '8px' }} />
-      ) : (
-        <RiTooltip
-          content={errorTooltipContent}
-          anchorClassName={statusError && styles.tooltip}
-        >
-          <div className={styles.stateBadge} data-testid="pipeline-state-badge">
-            <RiIcon type={stateInfo.icon} color={stateInfo.iconColor} />
-            <span>{stateInfo.label}</span>
-          </div>
-        </RiTooltip>
-      )}
-    </div>
+    <Row align="center" gap="m">
+      <FlexItem>
+        <Title size="XS">Pipeline state:</Title>
+      </FlexItem>
+      <FlexItem>
+        {headerLoading ? (
+          <Loader size="m" style={{ marginLeft: '8px' }} />
+        ) : (
+          <RiTooltip
+            content={errorTooltipContent}
+            anchorClassName={statusError}
+          >
+            <Row data-testid="pipeline-state-badge" gap="s">
+              <RiIcon
+                type={stateInfo.icon}
+                color={stateInfo.iconColor}
+                size="m"
+              />
+              <Text size="s">{stateInfo.label}</Text>
+            </Row>
+          </RiTooltip>
+        )}
+      </FlexItem>
+    </Row>
   )
 }
 

redisinsight/ui/src/pages/rdi/instance/components/header/components/current-pipeline-status/styles.module.scss

@@ -71,7 +71,7 @@ describe('PipelineActions', () => {
         collectorStatus={CollectorStatus.Ready}
       />,
     )
-    expect(screen.getByText('Stop Pipeline')).toBeInTheDocument()
+    expect(screen.getByText('Stop')).toBeInTheDocument()
   })
 
   it('should display startBtn if collectorStatus is not ready', () => {
@@ -81,7 +81,7 @@ describe('PipelineActions', () => {
         collectorStatus={CollectorStatus.NotReady}
       />,
     )
-    expect(screen.getByText('Start Pipeline')).toBeInTheDocument()
+    expect(screen.getByText('Start')).toBeInTheDocument()
   })
 
   it('should display startBtn if collectorStatus is not ready', () => {
@@ -91,7 +91,7 @@ describe('PipelineActions', () => {
         collectorStatus={CollectorStatus.NotReady}
       />,
     )
-    expect(screen.getByText('Start Pipeline')).toBeInTheDocument()
+    expect(screen.getByText('Start')).toBeInTheDocument()
   })
 
   it('should validate pipeline when schema, config, or jobs change', () => {
@@ -211,9 +211,15 @@ describe('PipelineActions', () => {
 
   describe('validation with new schema parameters', () => {
     it('should pass monacoJobsSchema and jobNameSchema to validatePipeline when available', () => {
-      const mockMonacoJobsSchema = { type: 'object', properties: { task: { type: 'string' } } }
-      const mockJobNameSchema = { type: 'string', pattern: '^[a-zA-Z][a-zA-Z0-9_]*$' }
-      
+      const mockMonacoJobsSchema = {
+        type: 'object',
+        properties: { task: { type: 'string' } },
+      }
+      const mockJobNameSchema = {
+        type: 'string',
+        pattern: '^[a-zA-Z][a-zA-Z0-9_]*$',
+      }
+
       ;(validatePipeline as jest.Mock).mockReturnValue({
         result: true,
         configValidationErrors: [],
@@ -268,7 +274,7 @@ describe('PipelineActions', () => {
     it('should include monacoJobsSchema and jobNameSchema in dependency array for validation effect', () => {
       // This test verifies that the useEffect dependency array includes the new schema parameters
       // by checking that different schema values trigger different validatePipeline calls
-      
+
       ;(validatePipeline as jest.Mock).mockReturnValue({
         result: true,
         configValidationErrors: [],
@@ -279,7 +285,10 @@ describe('PipelineActions', () => {
       ;(rdiPipelineSelector as jest.Mock).mockReturnValueOnce({
         loading: false,
         schema: 'test-schema',
-        monacoJobsSchema: { type: 'object', properties: { task: { type: 'string' } } },
+        monacoJobsSchema: {
+          type: 'object',
+          properties: { task: { type: 'string' } },
+        },
         jobNameSchema: { type: 'string', pattern: '^[a-zA-Z]+$' },
         config: 'test-config',
         jobs: 'test-jobs',
@@ -290,7 +299,10 @@ describe('PipelineActions', () => {
       // Verify that validatePipeline was called with all the correct parameters including schemas
       expect(validatePipeline).toHaveBeenCalledWith({
         schema: 'test-schema',
-        monacoJobsSchema: { type: 'object', properties: { task: { type: 'string' } } },
+        monacoJobsSchema: {
+          type: 'object',
+          properties: { task: { type: 'string' } },
+        },
         jobNameSchema: { type: 'string', pattern: '^[a-zA-Z]+$' },
         config: 'test-config',
         jobs: 'test-jobs',

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

@@ -28,6 +28,14 @@ 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};
+  align-self: stretch;
+`
 
 export interface Props {
   collectorStatus?: CollectorStatus
@@ -149,14 +157,15 @@ const PipelineActions = ({ collectorStatus, pipelineStatus }: Props) => {
   const disabled = deployLoading || actionLoading
 
   return (
-    <Row gap="m" justify="end" align="center">
+    <Row gap="l" justify="end" align="center">
       <FlexItem>
         <ResetPipelineButton
           onClick={onReset}
           disabled={disabled}
           loading={isLoadingBtn(PipelineAction.Reset)}
         />
       </FlexItem>
+      <VerticalDelimiter />
       <FlexItem>
         {collectorStatus === CollectorStatus.Ready ? (
           <StopPipelineButton
@@ -179,7 +188,7 @@ const PipelineActions = ({ collectorStatus, pipelineStatus }: Props) => {
           onReset={resetPipeline}
         />
       </FlexItem>
-      <FlexItem style={{ margin: 0 }}>
+      <FlexItem>
         <RdiConfigFileActionMenu />
       </FlexItem>
     </Row>