Merge pull request #4166 from RedisInsight/fe/bugfix/CR-220-do-not-reference-pub-sub

CR-220 do not reference pub sub

Author: pd-redis

redisinsight/ui/src/components/main-router/constants/defaultRoutes.ts

@@ -52,6 +52,7 @@ const INSTANCE_ROUTES: IRoute[] = [
     pageName: PageNames.pubSub,
     path: Pages.pubSub(':instanceId'),
     component: LAZY_LOAD ? LazyPubSubPage : PubSubPage,
+    featureFlag: FeatureFlags.envDependent
   },
   ...getRouteIncludedByEnv([{
     path: Pages.analytics(':instanceId'),

redisinsight/ui/src/components/onboarding-features/OnboardingFeatures.spec.tsx

@@ -9,7 +9,7 @@ import {
   appFeatureFlagsFeaturesSelector,
   appFeatureOnboardingSelector,
   setOnboardNextStep,
-  setOnboardPrevStep
+  setOnboardPrevStep,
 } from 'uiSrc/slices/app/features'
 import { keysDataSelector } from 'uiSrc/slices/browser/keys'
 import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'

redisinsight/ui/src/components/onboarding-tour/OnboardingTourWrapper.spec.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { render, screen } from 'uiSrc/utils/test-utils'
 
-import { appFeatureOnboardingSelector } from 'uiSrc/slices/app/features'
+import * as featureSlice from 'uiSrc/slices/app/features'
 import OnboardingTourWrapper from './OnboardingTourWrapper'
 
 const mockedOptions = {
@@ -12,14 +12,11 @@ const mockedOptions = {
   })
 }
 
-jest.mock('uiSrc/slices/app/features', () => ({
-  ...jest.requireActual('uiSrc/slices/app/features'),
-  appFeatureOnboardingSelector: jest.fn().mockReturnValue({
-    currentStep: 2,
-    isActive: true,
-    totalSteps: 10
-  })
-}))
+jest.spyOn(featureSlice, 'appFeatureOnboardingSelector').mockReturnValue({
+  currentStep: 2,
+  isActive: true,
+  totalSteps: 10
+})
 
 describe('OnboardingTourWrapper', () => {
   it('should render', () => {
@@ -33,7 +30,7 @@ describe('OnboardingTourWrapper', () => {
   })
 
   it('should not render tour with isActive = false', () => {
-    (appFeatureOnboardingSelector as jest.Mock).mockReturnValue({
+    (featureSlice.appFeatureOnboardingSelector as jest.Mock).mockReturnValue({
       currentStep: 2,
       isActive: false,
       totalSteps: 10
@@ -45,7 +42,7 @@ describe('OnboardingTourWrapper', () => {
   })
 
   it('should not render tour with isActive = true & different step', () => {
-    (appFeatureOnboardingSelector as jest.Mock).mockReturnValue({
+    (featureSlice.appFeatureOnboardingSelector as jest.Mock).mockReturnValue({
       currentStep: 3,
       isActive: true,
       totalSteps: 10

redisinsight/ui/src/components/pub-sub/UsePubSubLink/UsePubSubLink.spec.tsx

@@ -0,0 +1,49 @@
+import { cloneDeep, set } from 'lodash'
+import React from 'react'
+import { initialStateDefault, mockStore, render, screen } from 'uiSrc/utils/test-utils'
+import { FeatureFlags } from 'uiSrc/constants'
+import UsePubSubLink from './UsePubSubLink'
+
+const props = {
+  path: '/pub-sub',
+}
+
+describe('UsePubSubLink', () => {
+  it('should render', () => {
+    expect(render(<UsePubSubLink {...props} />)).toBeTruthy()
+  })
+
+  it('should show the link when envDependent.flag = true', () => {
+    render(<UsePubSubLink {...props} />)
+
+    expect(screen.getByTestId('user-pub-sub-link')).toBeInTheDocument()
+  })
+
+  it('should show feature dependent items when feature flag is on', async () => {
+    const initialStoreState = set(
+      cloneDeep(initialStateDefault),
+      `app.features.featureFlags.features.${FeatureFlags.envDependent}`,
+      { flag: true }
+    )
+
+    render(<UsePubSubLink {...props} />, {
+      store: mockStore(initialStoreState)
+    })
+    expect(screen.queryByTestId('user-pub-sub-link')).toBeInTheDocument()
+    expect(screen.queryByTestId('user-pub-sub-link-disabled')).not.toBeInTheDocument()
+  })
+
+  it('should hide feature dependent items when feature flag is off', async () => {
+    const initialStoreState = set(
+      cloneDeep(initialStateDefault),
+      `app.features.featureFlags.features.${FeatureFlags.envDependent}`,
+      { flag: false }
+    )
+
+    render(<UsePubSubLink {...props} />, {
+      store: mockStore(initialStoreState)
+    })
+    expect(screen.queryByTestId('user-pub-sub-link')).not.toBeInTheDocument()
+    expect(screen.queryByTestId('user-pub-sub-link-disabled')).toBeInTheDocument()
+  })
+})

redisinsight/ui/src/components/pub-sub/UsePubSubLink/UsePubSubLink.tsx

@@ -0,0 +1,32 @@
+import React from 'react'
+import { EuiLink, EuiTextColor } from '@elastic/eui'
+import { useSelector } from 'react-redux'
+import { FeatureFlags } from 'uiSrc/constants/featureFlags'
+import { getRouterLinkProps } from 'uiSrc/services'
+import { appFeatureFlagsFeaturesSelector } from 'uiSrc/slices/app/features'
+
+export interface Props {
+  path: string;
+}
+
+const UsePubSubLink = ({ path }: Props) => {
+  const { [FeatureFlags.envDependent]: envDependentFeature } = useSelector(appFeatureFlagsFeaturesSelector)
+  if (envDependentFeature?.flag === false) {
+    return (
+      <div className="cli-output-response-fail" data-testid="user-pub-sub-link-disabled">PubSub not supported
+        in this environment.
+      </div>
+    )
+  }
+  return (
+    <EuiTextColor color="danger" key={Date.now()} data-testid="user-pub-sub-link">
+      {'Use '}
+      <EuiLink {...getRouterLinkProps(path)} color="text" data-test-subj="pubsub-page-btn">
+        Pub/Sub
+      </EuiLink>
+      {' tool to subscribe to channels.'}
+    </EuiTextColor>
+  )
+}
+
+export default UsePubSubLink

redisinsight/ui/src/components/pub-sub/UsePubSubLink/index.ts

@@ -0,0 +1,3 @@
+import UsePubSubLink from './UsePubSubLink'
+
+export default UsePubSubLink

redisinsight/ui/src/components/query/query-card/QueryCardCommonResult/components/CommonErrorResponse/CommonErrorResponse.tsx

@@ -18,6 +18,7 @@ import { connectedInstanceSelector } from 'uiSrc/slices/instances/instances'
 
 import { showMonitor } from 'uiSrc/slices/cli/monitor'
 import UseProfilerLink from 'uiSrc/components/monitor/UseProfilerLink'
+import UsePubSubLink from 'uiSrc/components/pub-sub/UsePubSubLink'
 
 const CommonErrorResponse = (id: string, command = '', result?: any) => {
   const { instanceId = '' } = useParams<{ instanceId: string }>()
@@ -33,7 +34,7 @@ const CommonErrorResponse = (id: string, command = '', result?: any) => {
   }
   // Flow if SUBSCRIBE command was executed
   if (checkUnsupportedCommand([CommandSubscribe.toLowerCase()], commandLine)) {
-    return cliTexts.SUBSCRIBE_COMMAND(Pages.pubSub(instanceId))
+    return <UsePubSubLink path={Pages.pubSub(instanceId)} />
   }
   // Flow if PSUBSCRIBE command was executed
   if (checkUnsupportedCommand([CommandPSubscribe.toLowerCase()], commandLine)) {

redisinsight/ui/src/constants/cliOutput.tsx

@@ -2,6 +2,7 @@ import { EuiLink, EuiTextColor } from '@elastic/eui'
 import React, { Fragment } from 'react'
 import { getRouterLinkProps } from 'uiSrc/services'
 import { getDbIndex } from 'uiSrc/utils'
+import UsePubSubLink from 'uiSrc/components/pub-sub/UsePubSubLink'
 
 export const ClearCommand = 'clear'
 export const SelectCommand = 'select'
@@ -70,15 +71,6 @@ export const cliTexts = {
       {' to see the messages published to all channels in your database.'}
     </EuiTextColor>
   ),
-  SUBSCRIBE_COMMAND: (path: string = '') => (
-    <EuiTextColor color="danger" key={Date.now()}>
-      {'Use '}
-      <EuiLink {...getRouterLinkProps(path)} color="text" data-test-subj="pubsub-page-btn">
-        Pub/Sub
-      </EuiLink>
-      {' tool to subscribe to channels.'}
-    </EuiTextColor>
-  ),
   PSUBSCRIBE_COMMAND_CLI: (path: string = '') => (
     [
       cliTexts.PSUBSCRIBE_COMMAND(path),
@@ -87,7 +79,7 @@ export const cliTexts = {
   ),
   SUBSCRIBE_COMMAND_CLI: (path: string = '') => (
     [
-      cliTexts.SUBSCRIBE_COMMAND(path),
+      <UsePubSubLink path={path} />,
       '\n',
     ]
   ),

redisinsight/ui/src/utils/routerWithSubRoutes.tsx

@@ -3,7 +3,7 @@ import { Redirect, Route } from 'react-router-dom'
 import { useSelector } from 'react-redux'
 import { userSettingsSelector } from 'uiSrc/slices/user/user-settings'
 import { appFeatureFlagsFeaturesSelector } from 'uiSrc/slices/app/features'
-import { IRoute, FeatureFlags } from 'uiSrc/constants'
+import { IRoute, FeatureFlags, Pages } from 'uiSrc/constants'
 
 const PrivateRoute = (route: IRoute) => {
   const { path, exact, routes, featureFlag, redirect } = route
@@ -29,7 +29,7 @@ const PrivateRoute = (route: IRoute) => {
         }
 
         return haveToAcceptAgreements || feature?.flag === false
-          ? <Redirect to="/" />
+          ? <Redirect to={Pages.notFound} />
           : (
             // pass the sub-routes down to keep nesting
             // @ts-ignore