implement this

Author: pawelangelow

redisinsight/ui/src/pages/rdi/pipeline-management/components/navigation/cards/ConfigurationCard.spec.tsx

@@ -7,7 +7,20 @@ import ConfigurationCard, { ConfigurationCardProps } from './ConfigurationCard'
 
 const mockedProps = mock<ConfigurationCardProps>()
 
+const mockUseSelector = jest.fn()
+jest.mock('react-redux', () => ({
+  ...jest.requireActual('react-redux'),
+  useSelector: () => mockUseSelector(),
+}))
+
 describe('ConfigurationCard', () => {
+  beforeEach(() => {
+    mockUseSelector.mockReturnValue({
+      changes: {},
+      configValidationErrors: [],
+    })
+  })
+
   it('should render with correct title', () => {
     render(<ConfigurationCard {...instance(mockedProps)} />)
 
@@ -49,4 +62,92 @@ describe('ConfigurationCard', () => {
     expect(card).toHaveAttribute('tabIndex', '0')
     expect(card).toHaveAttribute('role', 'button')
   })
+
+  describe('Changes indicator', () => {
+    it('should not show changes indicator when no changes', () => {
+      mockUseSelector.mockReturnValue({
+        changes: {},
+        configValidationErrors: [],
+      })
+
+      render(<ConfigurationCard {...instance(mockedProps)} />)
+
+      expect(
+        screen.queryByTestId('updated-configuration-highlight'),
+      ).not.toBeInTheDocument()
+    })
+
+    it('should show changes indicator when config has changes', () => {
+      mockUseSelector.mockReturnValue({
+        changes: { config: 'modified' },
+        configValidationErrors: [],
+      })
+
+      render(<ConfigurationCard {...instance(mockedProps)} />)
+
+      expect(
+        screen.getByTestId('updated-configuration-highlight'),
+      ).toBeInTheDocument()
+    })
+  })
+
+  describe('Validation errors', () => {
+    it('should not show error icon when config is valid', () => {
+      mockUseSelector.mockReturnValue({
+        changes: {},
+        configValidationErrors: [],
+      })
+
+      render(<ConfigurationCard {...instance(mockedProps)} />)
+
+      expect(
+        screen.queryByTestId('rdi-pipeline-nav__error-configuration'),
+      ).not.toBeInTheDocument()
+    })
+
+    it('should show error icon when config has validation errors', () => {
+      mockUseSelector.mockReturnValue({
+        changes: {},
+        configValidationErrors: [
+          'Invalid configuration',
+          'Missing required field',
+        ],
+      })
+
+      render(<ConfigurationCard {...instance(mockedProps)} />)
+
+      expect(
+        screen.getByTestId('rdi-pipeline-nav__error-configuration'),
+      ).toBeInTheDocument()
+    })
+
+    it('should handle single validation error', () => {
+      mockUseSelector.mockReturnValue({
+        changes: {},
+        configValidationErrors: ['Single error'],
+      })
+
+      render(<ConfigurationCard {...instance(mockedProps)} />)
+
+      expect(
+        screen.getByTestId('rdi-pipeline-nav__error-configuration'),
+      ).toBeInTheDocument()
+    })
+  })
+
+  it('should show both changes indicator and error icon when config has changes and errors', () => {
+    mockUseSelector.mockReturnValue({
+      changes: { config: 'modified' },
+      configValidationErrors: ['Invalid configuration'],
+    })
+
+    render(<ConfigurationCard {...instance(mockedProps)} />)
+
+    expect(
+      screen.getByTestId('updated-configuration-highlight'),
+    ).toBeInTheDocument()
+    expect(
+      screen.getByTestId('rdi-pipeline-nav__error-configuration'),
+    ).toBeInTheDocument()
+  })
 })

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

@@ -1,6 +1,16 @@
 import React from 'react'
 import { RdiPipelineTabs } from 'uiSrc/slices/interfaces'
+import { useSelector } from 'react-redux'
+
+import { rdiPipelineSelector } from 'uiSrc/slices/rdi/pipeline'
+import { RiTooltip } from 'uiSrc/components'
+import { Indicator } from 'uiSrc/components/base/text/text.styles'
+import { Row } from 'uiSrc/components/base/layout/flex'
+import { Text } from 'uiSrc/components/base/text'
+import { Icon, ToastNotificationIcon } from 'uiSrc/components/base/icons'
+
 import BaseCard, { BaseCardProps } from './BaseCard'
+import ValidationErrorsList from '../../validation-errors-list/ValidationErrorsList'
 
 export type ConfigurationCardProps = Omit<
   BaseCardProps,
@@ -13,10 +23,15 @@ const ConfigurationCard = ({
   onSelect,
   isSelected,
 }: ConfigurationCardProps) => {
+  const { changes, configValidationErrors } = useSelector(rdiPipelineSelector)
+
   const handleClick = () => {
     onSelect(RdiPipelineTabs.Config)
   }
 
+  const hasChanges = !!changes.config
+  const isValid = configValidationErrors.length === 0
+
   return (
     <BaseCard
       title="Configuration"
@@ -25,7 +40,39 @@ const ConfigurationCard = ({
       onClick={handleClick}
       data-testid={`rdi-nav-btn-${RdiPipelineTabs.Config}`}
     >
-      Configuration file
+      <Row gap="s" align="center">
+        {!hasChanges && <Indicator $color="transparent" />}
+
+        {hasChanges && (
+          <RiTooltip
+            content="This file contains undeployed changes."
+            position="top"
+          >
+            <Indicator
+              $color="informative"
+              data-testid={`updated-configuration-highlight`}
+            />
+          </RiTooltip>
+        )}
+
+        <Text>Configuration file</Text>
+
+        {!isValid && (
+          <RiTooltip
+            position="right"
+            content={
+              <ValidationErrorsList validationErrors={configValidationErrors} />
+            }
+          >
+            <Icon
+              icon={ToastNotificationIcon}
+              color="danger500"
+              size="M"
+              data-testid={`rdi-pipeline-nav__error-configuration`}
+            />
+          </RiTooltip>
+        )}
+      </Row>
     </BaseCard>
   )
 }