RI-6879: cluster page force standalone

pd-redis · web-flow · commit 77a2511de8b9 · 2025-03-11T16:39:17.000+02:00
ensure cluster analysis page does not show when cluster node is accessed as standalone
diff --git a/redisinsight/ui/src/components/analytics-tabs/AnalyticsTabs.tsx b/redisinsight/ui/src/components/analytics-tabs/AnalyticsTabs.tsx
@@ -6,17 +6,17 @@ import { useParams, useHistory } from 'react-router-dom'
 import { Pages } from 'uiSrc/constants'
 import { AnalyticsViewTab } from 'uiSrc/slices/interfaces/analytics'
 import { analyticsSettingsSelector, setAnalyticsViewTab } from 'uiSrc/slices/analytics/settings'
-import { connectedInstanceSelector } from 'uiSrc/slices/instances/instances'
 import { ConnectionType } from 'uiSrc/slices/interfaces'
 
 import { appFeatureOnboardingSelector, setOnboardNextStep } from 'uiSrc/slices/app/features'
 import { renderOnboardingTourWithChild } from 'uiSrc/utils/onboarding'
 import { OnboardingSteps } from 'uiSrc/constants/onboarding'
+import { useConnectionType } from 'uiSrc/components/hooks/useConnectionType'
 import { analyticsViewTabs } from './constants'
 
 const AnalyticsTabs = () => {
   const { viewTab } = useSelector(analyticsSettingsSelector)
-  const { connectionType } = useSelector(connectedInstanceSelector)
+  const connectionType = useConnectionType()
   const { currentStep } = useSelector(appFeatureOnboardingSelector)
   const history = useHistory()
 
diff --git a/redisinsight/ui/src/components/hooks/useConnectionType.spec.ts b/redisinsight/ui/src/components/hooks/useConnectionType.spec.ts
@@ -0,0 +1,93 @@
+import { cloneDeep } from 'lodash'
+import { ConnectionType, Instance } from 'uiSrc/slices/interfaces'
+import { cleanup, mockedStore, renderHook } from 'uiSrc/utils/test-utils'
+import { connectedInstanceSelector } from 'uiSrc/slices/instances/instances'
+import { useConnectionType } from 'uiSrc/components/hooks/useConnectionType'
+
+jest.mock('uiSrc/slices/instances/instances', () => ({
+  ...jest.requireActual('uiSrc/slices/instances/instances'),
+  connectedInstanceSelector: jest.fn().mockReturnValue({
+    connectedInstance: {},
+  }),
+}))
+
+let store: typeof mockedStore
+type ConnType = 'cluster' | 'standalone' | 'sentinel'
+let instances: Record<ConnType, Instance>
+beforeEach(() => {
+  cleanup()
+  store = cloneDeep(mockedStore)
+  store.clearActions()
+
+  instances = {
+    standalone: {
+      id: 'e37cc441-a4f2-402c-8bdb-fc2413cbbaff',
+      host: 'localhost',
+      port: 6379,
+      name: 'localhost',
+      connectionType: ConnectionType.Standalone,
+      modules: [],
+      version: '6.2.6',
+    },
+    cluster: {
+      id: 'a0db1bc8-a353-4c43-a856-b72f4811d2d4',
+      host: 'localhost',
+      port: 12000,
+      name: 'oea123123',
+      connectionType: ConnectionType.Cluster,
+      modules: [],
+      version: '6.2.6',
+    },
+    sentinel: {
+      id: 'b83a3932-e95f-4f09-9d8a-55079f400186',
+      version: '6.2.6',
+      host: 'localhost',
+      port: 5005,
+      connectionType: ConnectionType.Sentinel,
+      modules: [],
+    },
+  }
+})
+
+describe('useConnectionType', () => {
+  it.each([[ConnectionType.Cluster, 'cluster' as ConnType], [ConnectionType.Standalone, 'standalone' as ConnType], [ConnectionType.Sentinel, 'sentinel' as ConnType]])(
+    'should return %i when forceStandalone is undefined',
+    async (expected, type) => {
+      const instance = { ...instances[type] };
+      (connectedInstanceSelector as jest.Mock).mockReturnValue(instance)
+
+      const { result } = renderHook(useConnectionType)
+      const connectionType = result.current
+      expect(connectionType).toEqual(expected)
+    },
+  )
+
+  it.each([[ConnectionType.Cluster, 'cluster' as ConnType], [ConnectionType.Standalone, 'standalone' as ConnType], [ConnectionType.Sentinel, 'sentinel' as ConnType]])(
+    'should return %i when forceStandalone is false',
+    async (expected, type) => {
+      const instance = {
+        ...instances[type],
+        forceStandalone: false,
+      };
+      (connectedInstanceSelector as jest.Mock).mockReturnValue(instance)
+
+      const { result } = renderHook(useConnectionType)
+      const connectionType = result.current
+      expect(connectionType).toEqual(expected)
+    },
+  )
+  it.each([[ConnectionType.Standalone, 'cluster' as ConnType], [ConnectionType.Standalone, 'standalone' as ConnType], [ConnectionType.Sentinel, 'sentinel' as ConnType]])(
+    'should return STANDALONE ',
+    async (expected, type) => {
+      const instance = {
+        ...instances[type],
+        forceStandalone: true,
+      };
+      (connectedInstanceSelector as jest.Mock).mockReturnValue(instance)
+
+      const { result } = renderHook(useConnectionType)
+      const connectionType = result.current
+      expect(connectionType).toEqual(expected)
+    },
+  )
+})
diff --git a/redisinsight/ui/src/components/hooks/useConnectionType.ts b/redisinsight/ui/src/components/hooks/useConnectionType.ts
@@ -0,0 +1,12 @@
+import { useSelector } from 'react-redux'
+import { ConnectionType } from 'uiSrc/slices/interfaces'
+import { connectedInstanceSelector } from 'uiSrc/slices/instances/instances'
+
+export const useConnectionType = () => {
+  const { connectionType, forceStandalone } = useSelector(connectedInstanceSelector)
+
+  if (forceStandalone && connectionType !== ConnectionType.Sentinel) {
+    return ConnectionType.Standalone
+  }
+  return connectionType
+}
diff --git a/redisinsight/ui/src/pages/analytics/AnalyticsPage.tsx b/redisinsight/ui/src/pages/analytics/AnalyticsPage.tsx
@@ -3,8 +3,8 @@ import { useDispatch, useSelector } from 'react-redux'
 import { useHistory, useParams, useLocation } from 'react-router-dom'
 import { Pages } from 'uiSrc/constants'
 import { appContextAnalytics, setLastAnalyticsPage } from 'uiSrc/slices/app/context'
-import { connectedInstanceSelector } from 'uiSrc/slices/instances/instances'
 import { ConnectionType } from 'uiSrc/slices/interfaces'
+import { useConnectionType } from 'uiSrc/components/hooks/useConnectionType'
 
 import AnalyticsPageRouter from './AnalyticsPageRouter'
 
@@ -18,9 +18,8 @@ const AnalyticsPage = ({ routes = [] }: Props) => {
   const history = useHistory()
   const { instanceId } = useParams<{ instanceId: string }>()
   const { pathname } = useLocation()
-  const { connectionType } = useSelector(connectedInstanceSelector)
+  const connectionType = useConnectionType()
   const { lastViewedPage } = useSelector(appContextAnalytics)
-
   const pathnameRef = useRef<string>('')
 
   const dispatch = useDispatch()
diff --git a/redisinsight/ui/src/pages/pub-sub/components/messages-list/MessagesList/MessagesList.tsx b/redisinsight/ui/src/pages/pub-sub/components/messages-list/MessagesList/MessagesList.tsx
@@ -11,8 +11,8 @@ import styles from './styles.module.scss'
 
 export interface Props {
   items: IMessage[]
-  width: number
-  height: number
+  width?: number
+  height?: number
 }
 
 const PROTRUDING_OFFSET = 2
diff --git a/redisinsight/ui/src/pages/pub-sub/components/messages-list/MessagesListWrapper.tsx b/redisinsight/ui/src/pages/pub-sub/components/messages-list/MessagesListWrapper.tsx
@@ -1,19 +1,20 @@
-import React, { useState, useEffect } from 'react'
+import React, { useEffect, useState } from 'react'
 import { useSelector } from 'react-redux'
 import AutoSizer from 'react-virtualized-auto-sizer'
 
-import { connectedInstanceSelector, connectedInstanceOverviewSelector } from 'uiSrc/slices/instances/instances'
+import { connectedInstanceOverviewSelector } from 'uiSrc/slices/instances/instances'
 import { pubSubSelector } from 'uiSrc/slices/pubsub/pubsub'
 import { isVersionHigherOrEquals } from 'uiSrc/utils'
 import { CommandsVersions } from 'uiSrc/constants/commandsVersions'
+import { useConnectionType } from 'uiSrc/components/hooks/useConnectionType'
 import EmptyMessagesList from './EmptyMessagesList'
 import MessagesList from './MessagesList'
 
 import styles from './MessagesList/styles.module.scss'
 
 const MessagesListWrapper = () => {
   const { messages = [], isSubscribed } = useSelector(pubSubSelector)
-  const { connectionType } = useSelector(connectedInstanceSelector)
+  const connectionType = useConnectionType()
   const { version } = useSelector(connectedInstanceOverviewSelector)
 
   const [isSpublishNotSupported, setIsSpublishNotSupported] = useState<boolean>(true)
diff --git a/redisinsight/ui/src/pages/pub-sub/components/publish-message/PublishMessage.tsx b/redisinsight/ui/src/pages/pub-sub/components/publish-message/PublishMessage.tsx
@@ -6,25 +6,25 @@ import {
   EuiFlexItem,
   EuiForm,
   EuiFormRow,
-  EuiIcon
+  EuiIcon,
 } from '@elastic/eui'
 import cx from 'classnames'
 import React, { ChangeEvent, FormEvent, useEffect, useRef, useState } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 import { useParams } from 'react-router-dom'
 import { appContextPubSub, setPubSubFieldsContext } from 'uiSrc/slices/app/context'
-import { connectedInstanceSelector } from 'uiSrc/slices/instances/instances'
 import { ConnectionType } from 'uiSrc/slices/interfaces'
 import { publishMessageAction } from 'uiSrc/slices/pubsub/pubsub'
 import UserIcon from 'uiSrc/assets/img/icons/user.svg?react'
+import { useConnectionType } from 'uiSrc/components/hooks/useConnectionType'
 
 import styles from './styles.module.scss'
 
 const HIDE_BADGE_TIMER = 3000
 
 const PublishMessage = () => {
   const { channel: channelContext, message: messageContext } = useSelector(appContextPubSub)
-  const { connectionType } = useSelector(connectedInstanceSelector)
+  const connectionType = useConnectionType()
 
   const [channel, setChannel] = useState<string>(channelContext)
   const [message, setMessage] = useState<string>(messageContext)
diff --git a/redisinsight/ui/src/pages/slow-log/components/SlowLogConfig/SlowLogConfig.tsx b/redisinsight/ui/src/pages/slow-log/components/SlowLogConfig/SlowLogConfig.tsx
@@ -17,16 +17,16 @@ import {
   DEFAULT_SLOWLOG_DURATION_UNIT,
   DEFAULT_SLOWLOG_MAX_LEN,
   DEFAULT_SLOWLOG_SLOWER_THAN,
-  DurationUnits,
   DURATION_UNITS,
+  DurationUnits,
   MINUS_ONE,
 } from 'uiSrc/constants'
 import { appContextDbConfig } from 'uiSrc/slices/app/context'
 import { ConnectionType } from 'uiSrc/slices/interfaces'
 import { patchSlowLogConfigAction, slowLogConfigSelector, slowLogSelector } from 'uiSrc/slices/analytics/slowlog'
 import { errorValidateNegativeInteger, validateNumber } from 'uiSrc/utils'
-import { connectedInstanceSelector } from 'uiSrc/slices/instances/instances'
 import { numberWithSpaces } from 'uiSrc/utils/numbers'
+import { useConnectionType } from 'uiSrc/components/hooks/useConnectionType'
 import { convertNumberByUnits } from '../../utils'
 import styles from './styles.module.scss'
 
@@ -38,7 +38,7 @@ export interface Props {
 const SlowLogConfig = ({ closePopover, onRefresh }: Props) => {
   const options = DURATION_UNITS
   const { instanceId } = useParams<{ instanceId: string }>()
-  const { connectionType } = useSelector(connectedInstanceSelector)
+  const connectionType = useConnectionType()
   const { loading } = useSelector(slowLogSelector)
   const { slowLogDurationUnit } = useSelector(appContextDbConfig)
   const {
diff --git a/redisinsight/ui/src/utils/test-utils.tsx b/redisinsight/ui/src/utils/test-utils.tsx
@@ -5,7 +5,7 @@ import { Provider } from 'react-redux'
 import thunk from 'redux-thunk'
 import { BrowserRouter } from 'react-router-dom'
 import configureMockStore from 'redux-mock-store'
-import { render as rtlRender, waitFor } from '@testing-library/react'
+import { render as rtlRender, renderHook as rtlRenderHook, waitFor } from '@testing-library/react'
 
 import { RootState, store as rootStore } from 'uiSrc/slices/store'
 import { initialState as initialStateInstances } from 'uiSrc/slices/instances/instances'
@@ -169,6 +169,19 @@ const render = (
   return rtlRender(ui, { wrapper, ...renderOptions })
 }
 
+const renderHook = (
+  hook: (initialProps: unknown) => unknown,
+  { initialState, store = mockedStore, withRouter, ...renderOptions }: Options = initialStateDefault
+) => {
+  const Wrapper = ({ children }: { children: JSX.Element }) => (
+    <Provider store={store}>{children}</Provider>
+  )
+
+  const wrapper = !withRouter ? Wrapper : BrowserRouter
+
+  return rtlRenderHook(hook, { wrapper, ...renderOptions })
+}
+
 // for render components WithRouter
 const renderWithRouter = (ui: JSX.Element, { route = '/' } = {}) => {
   window.history.pushState({}, 'Test page', route)
@@ -345,6 +358,7 @@ export * from '@testing-library/react'
 export {
   initialStateDefault,
   render,
+  renderHook,
   renderWithRouter,
   clearStoreActions,
   waitForEuiToolTipVisible,

Original file line number	Diff line number	Diff line change
`@@ -11,8 +11,8 @@ import styles from './styles.module.scss'`
`11`	`11`
`12`	`12`	`export interface Props {`
`13`	`13`	`items: IMessage[]`
`14`		`- width: number`
`15`		`- height: number`
	`14`	`+ width?: number`
	`15`	`+ height?: number`
`16`	`16`	`}`
`17`	`17`
`18`	`18`	`const PROTRUDING_OFFSET = 2`