extract logic in hook

Author: pawelangelow

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

@@ -7,16 +7,16 @@ import ConfigurationCard, { ConfigurationCardProps } from './ConfigurationCard'
 
 const mockedProps = mock<ConfigurationCardProps>()
 
-const mockUseSelector = jest.fn()
-jest.mock('react-redux', () => ({
-  ...jest.requireActual('react-redux'),
-  useSelector: () => mockUseSelector(),
+const mockUseConfigurationState = jest.fn()
+jest.mock('./hooks/useConfigurationState', () => ({
+  useConfigurationState: () => mockUseConfigurationState(),
 }))
 
 describe('ConfigurationCard', () => {
   beforeEach(() => {
-    mockUseSelector.mockReturnValue({
-      changes: {},
+    mockUseConfigurationState.mockReturnValue({
+      hasChanges: false,
+      isValid: true,
       configValidationErrors: [],
     })
   })
@@ -65,8 +65,9 @@ describe('ConfigurationCard', () => {
 
   describe('Changes indicator', () => {
     it('should not show changes indicator when no changes', () => {
-      mockUseSelector.mockReturnValue({
-        changes: {},
+      mockUseConfigurationState.mockReturnValue({
+        hasChanges: false,
+        isValid: true,
         configValidationErrors: [],
       })
 
@@ -78,8 +79,9 @@ describe('ConfigurationCard', () => {
     })
 
     it('should show changes indicator when config has changes', () => {
-      mockUseSelector.mockReturnValue({
-        changes: { config: 'modified' },
+      mockUseConfigurationState.mockReturnValue({
+        hasChanges: true,
+        isValid: true,
         configValidationErrors: [],
       })
 
@@ -93,8 +95,9 @@ describe('ConfigurationCard', () => {
 
   describe('Validation errors', () => {
     it('should not show error icon when config is valid', () => {
-      mockUseSelector.mockReturnValue({
-        changes: {},
+      mockUseConfigurationState.mockReturnValue({
+        hasChanges: false,
+        isValid: true,
         configValidationErrors: [],
       })
 
@@ -106,8 +109,9 @@ describe('ConfigurationCard', () => {
     })
 
     it('should show error icon when config has validation errors', () => {
-      mockUseSelector.mockReturnValue({
-        changes: {},
+      mockUseConfigurationState.mockReturnValue({
+        hasChanges: false,
+        isValid: false,
         configValidationErrors: [
           'Invalid configuration',
           'Missing required field',
@@ -122,8 +126,9 @@ describe('ConfigurationCard', () => {
     })
 
     it('should handle single validation error', () => {
-      mockUseSelector.mockReturnValue({
-        changes: {},
+      mockUseConfigurationState.mockReturnValue({
+        hasChanges: false,
+        isValid: false,
         configValidationErrors: ['Single error'],
       })
 
@@ -136,8 +141,9 @@ describe('ConfigurationCard', () => {
   })
 
   it('should show both changes indicator and error icon when config has changes and errors', () => {
-    mockUseSelector.mockReturnValue({
-      changes: { config: 'modified' },
+    mockUseConfigurationState.mockReturnValue({
+      hasChanges: true,
+      isValid: false,
       configValidationErrors: ['Invalid configuration'],
     })
 

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

@@ -1,13 +1,12 @@
 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 { useConfigurationState } from './hooks'
 
 import BaseCard, { BaseCardProps } from './BaseCard'
 import ValidationErrorsList from '../../validation-errors-list/ValidationErrorsList'
@@ -23,15 +22,13 @@ const ConfigurationCard = ({
   onSelect,
   isSelected,
 }: ConfigurationCardProps) => {
-  const { changes, configValidationErrors } = useSelector(rdiPipelineSelector)
+  const { hasChanges, isValid, configValidationErrors } =
+    useConfigurationState()
 
   const handleClick = () => {
     onSelect(RdiPipelineTabs.Config)
   }
 
-  const hasChanges = !!changes.config
-  const isValid = configValidationErrors.length === 0
-
   return (
     <BaseCard
       title="Configuration"

redisinsight/ui/src/pages/rdi/pipeline-management/components/navigation/cards/hooks/index.ts

@@ -0,0 +1 @@
+export * from './useConfigurationState'

redisinsight/ui/src/pages/rdi/pipeline-management/components/navigation/cards/hooks/useConfigurationState.spec.ts

@@ -0,0 +1,141 @@
+import { renderHook } from 'uiSrc/utils/test-utils'
+import { rdiPipelineSelector } from 'uiSrc/slices/rdi/pipeline'
+import { useConfigurationState } from './useConfigurationState'
+
+jest.mock('uiSrc/slices/rdi/pipeline', () => ({
+  ...jest.requireActual('uiSrc/slices/rdi/pipeline'),
+  rdiPipelineSelector: jest.fn(),
+}))
+
+const mockRdiPipelineSelector = rdiPipelineSelector as jest.MockedFunction<
+  typeof rdiPipelineSelector
+>
+
+describe('useConfigurationState', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  it('should return correct state when no changes and no validation errors', () => {
+    mockRdiPipelineSelector.mockReturnValue({
+      changes: {},
+      configValidationErrors: [],
+    } as any)
+
+    const { result } = renderHook(() => useConfigurationState())
+
+    expect(result.current).toEqual({
+      hasChanges: false,
+      isValid: true,
+      configValidationErrors: [],
+    })
+  })
+
+  it('should return hasChanges as true when config has changes', () => {
+    mockRdiPipelineSelector.mockReturnValue({
+      changes: { config: 'modified' },
+      configValidationErrors: [],
+    } as any)
+
+    const { result } = renderHook(() => useConfigurationState())
+
+    expect(result.current).toEqual({
+      hasChanges: true,
+      isValid: true,
+      configValidationErrors: [],
+    })
+  })
+
+  it('should return isValid as false when config has validation errors', () => {
+    mockRdiPipelineSelector.mockReturnValue({
+      changes: {},
+      configValidationErrors: [
+        'Invalid configuration',
+        'Missing required field',
+      ],
+    } as any)
+
+    const { result } = renderHook(() => useConfigurationState())
+
+    expect(result.current).toEqual({
+      hasChanges: false,
+      isValid: false,
+      configValidationErrors: [
+        'Invalid configuration',
+        'Missing required field',
+      ],
+    })
+  })
+
+  it('should handle both changes and validation errors', () => {
+    mockRdiPipelineSelector.mockReturnValue({
+      changes: { config: 'added' },
+      configValidationErrors: ['Configuration error'],
+    } as any)
+
+    const { result } = renderHook(() => useConfigurationState())
+
+    expect(result.current).toEqual({
+      hasChanges: true,
+      isValid: false,
+      configValidationErrors: ['Configuration error'],
+    })
+  })
+
+  it('should handle empty validation errors array', () => {
+    mockRdiPipelineSelector.mockReturnValue({
+      changes: {},
+      configValidationErrors: [],
+    } as any)
+
+    const { result } = renderHook(() => useConfigurationState())
+
+    expect(result.current.isValid).toBe(true)
+  })
+
+  it('should handle single validation error', () => {
+    mockRdiPipelineSelector.mockReturnValue({
+      changes: {},
+      configValidationErrors: ['Single error'],
+    } as any)
+
+    const { result } = renderHook(() => useConfigurationState())
+
+    expect(result.current).toEqual({
+      hasChanges: false,
+      isValid: false,
+      configValidationErrors: ['Single error'],
+    })
+  })
+
+  it('should handle multiple validation errors', () => {
+    const errors = ['Error 1', 'Error 2', 'Error 3']
+    mockRdiPipelineSelector.mockReturnValue({
+      changes: {},
+      configValidationErrors: errors,
+    } as any)
+
+    const { result } = renderHook(() => useConfigurationState())
+
+    expect(result.current).toEqual({
+      hasChanges: false,
+      isValid: false,
+      configValidationErrors: errors,
+    })
+  })
+
+  it('should handle changes in other files without affecting config state', () => {
+    mockRdiPipelineSelector.mockReturnValue({
+      changes: {
+        job1: 'modified',
+        job2: 'added',
+        // no config changes
+      },
+      configValidationErrors: [],
+    } as any)
+
+    const { result } = renderHook(() => useConfigurationState())
+
+    expect(result.current.hasChanges).toBe(false)
+  })
+})

redisinsight/ui/src/pages/rdi/pipeline-management/components/navigation/cards/hooks/useConfigurationState.ts

@@ -0,0 +1,21 @@
+import { useSelector } from 'react-redux'
+import { rdiPipelineSelector } from 'uiSrc/slices/rdi/pipeline'
+
+export interface ConfigurationState {
+  hasChanges: boolean
+  isValid: boolean
+  configValidationErrors: string[]
+}
+
+export const useConfigurationState = (): ConfigurationState => {
+  const { changes, configValidationErrors } = useSelector(rdiPipelineSelector)
+
+  const hasChanges = !!changes.config
+  const isValid = configValidationErrors.length === 0
+
+  return {
+    hasChanges,
+    isValid,
+    configValidationErrors,
+  }
+}