#RI-3031 - subscribe/unsubscribe for Pub/Sub

redisinsight/ui/src/App.tsx

@@ -4,13 +4,12 @@ import { Provider, useSelector } from 'react-redux'
 import { EuiPage, EuiPageBody } from '@elastic/eui'
 
 import { appInfoSelector } from 'uiSrc/slices/app/info'
-import { BuildType } from 'uiSrc/constants/env'
 import { PagePlaceholder } from 'uiSrc/components'
 import Router from './Router'
 import store from './slices/store'
 import { Theme } from './constants'
 import { themeService } from './services'
-import { Config, MonitorConfig, NavigationMenu, Notifications, ShortcutsFlyout } from './components'
+import { Config, GlobalSubscriptions, NavigationMenu, Notifications, ShortcutsFlyout } from './components'
 import { ThemeProvider } from './contexts/themeContext'
 import MainComponent from './components/main/MainComponent'
 
@@ -33,15 +32,15 @@ const AppWrapper = ({ children }: { children?: ReactElement }) => (
   </Provider>
 )
 const App = () => {
-  const { loading: serverLoading, server } = useSelector(appInfoSelector)
+  const { loading: serverLoading } = useSelector(appInfoSelector)
   return (
     <div className="main-container">
       { serverLoading
         ? <PagePlaceholder />
         : (
           <EuiPage className="main">
-            <MonitorConfig />
-            <NavigationMenu buildType={server?.buildType as BuildType} />
+            <GlobalSubscriptions />
+            <NavigationMenu />
             <EuiPageBody component="main">
               <MainComponent />
             </EuiPageBody>

redisinsight/ui/src/components/global-subscriptions/GlobalSubscriptions.tsx

@@ -0,0 +1,11 @@
+import React from 'react'
+import { MonitorConfig, PubSubConfig } from 'uiSrc/components'
+
+const GlobalSubscriptions = () => (
+  <>
+    <MonitorConfig />
+    <PubSubConfig />
+  </>
+)
+
+export default GlobalSubscriptions

redisinsight/ui/src/components/global-subscriptions/index.ts

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

redisinsight/ui/src/components/index.ts

@@ -15,6 +15,8 @@ import { ConsentsSettings, ConsentsSettingsPopup } from './consents-settings'
 import KeyboardShortcut from './keyboard-shortcut/KeyboardShortcut'
 import ShortcutsFlyout from './shortcuts-flyout/ShortcutsFlyout'
 import MonitorConfig from './monitor-config'
+import PubSubConfig from './pub-sub-config'
+import GlobalSubscriptions from './global-subscriptions'
 import MonitorWrapper from './monitor'
 import PagePlaceholder from './page-placeholder'
 
@@ -36,6 +38,8 @@ export {
   AdvancedSettings,
   KeyboardShortcut,
   MonitorConfig,
+  PubSubConfig,
+  GlobalSubscriptions,
   MonitorWrapper,
   ShortcutsFlyout,
   PagePlaceholder,

redisinsight/ui/src/components/navigation-menu/NavigationMenu.spec.tsx

@@ -2,6 +2,7 @@ import { cloneDeep } from 'lodash'
 import React from 'react'
 import { BuildType } from 'uiSrc/constants/env'
 import { EXTERNAL_LINKS } from 'uiSrc/constants/links'
+import { appInfoSelector } from 'uiSrc/slices/app/info'
 import { cleanup, mockedStore, render, screen, fireEvent } from 'uiSrc/utils/test-utils'
 
 import NavigationMenu from './NavigationMenu'
@@ -13,27 +14,60 @@ beforeEach(() => {
   store.clearActions()
 })
 
+const mockAppInfoSelector = jest.requireActual('uiSrc/slices/app/info')
+
+jest.mock('uiSrc/slices/app/info', () => ({
+  ...jest.requireActual('uiSrc/slices/app/info'),
+  appInfoSelector: jest.fn().mockReturnValue({
+    server: {}
+  })
+}))
+
 describe('NavigationMenu', () => {
   describe('without connectedInstance', () => {
     it('should render', () => {
-      expect(render(<NavigationMenu buildType={BuildType.DockerOnPremise} />)).toBeTruthy()
+      (appInfoSelector as jest.Mock).mockImplementation(() => ({
+        ...mockAppInfoSelector,
+        server: {
+          buildType: BuildType.DockerOnPremise
+        }
+      }))
+      expect(render(<NavigationMenu />)).toBeTruthy()
     })
 
     it('shouldn\'t render private routes', () => {
-      render(<NavigationMenu buildType={BuildType.DockerOnPremise} />)
+      (appInfoSelector as jest.Mock).mockImplementation(() => ({
+        ...mockAppInfoSelector,
+        server: {
+          buildType: BuildType.DockerOnPremise
+        }
+      }))
+      render(<NavigationMenu />)
 
       expect(screen.queryByTestId('browser-page-btn"')).not.toBeInTheDocument()
       expect(screen.queryByTestId('workbench-page-btn')).not.toBeInTheDocument()
     })
 
     it('should render help menu', () => {
-      render(<NavigationMenu buildType={BuildType.RedisStack} />)
+      (appInfoSelector as jest.Mock).mockImplementation(() => ({
+        ...mockAppInfoSelector,
+        server: {
+          buildType: BuildType.RedisStack
+        }
+      }))
+      render(<NavigationMenu />)
 
       expect(screen.getByTestId('help-menu-button')).toBeTruthy()
     })
 
     it('should render help menu items with proper links', () => {
-      render(<NavigationMenu buildType={BuildType.RedisStack} />)
+      (appInfoSelector as jest.Mock).mockImplementation(() => ({
+        ...mockAppInfoSelector,
+        server: {
+          buildType: BuildType.RedisStack
+        }
+      }))
+      render(<NavigationMenu />)
 
       fireEvent.click(screen.getByTestId('help-menu-button'))
 
@@ -62,24 +96,48 @@ describe('NavigationMenu', () => {
     })
 
     it('should render', () => {
-      expect(render(<NavigationMenu buildType={BuildType.DockerOnPremise} />)).toBeTruthy()
+      (appInfoSelector as jest.Mock).mockImplementation(() => ({
+        ...mockAppInfoSelector,
+        server: {
+          buildType: BuildType.DockerOnPremise
+        }
+      }))
+      expect(render(<NavigationMenu />)).toBeTruthy()
     })
 
     it('should render private routes with instanceId', () => {
-      render(<NavigationMenu buildType={BuildType.DockerOnPremise} />)
+      (appInfoSelector as jest.Mock).mockImplementation(() => ({
+        ...mockAppInfoSelector,
+        server: {
+          buildType: BuildType.DockerOnPremise
+        }
+      }))
+      render(<NavigationMenu />)
 
       expect(screen.findByTestId('browser-page-btn')).toBeTruthy()
       expect(screen.findByTestId('workbench-page-btn')).toBeTruthy()
     })
 
     it('should render public routes', () => {
-      render(<NavigationMenu buildType={BuildType.DockerOnPremise} />)
+      (appInfoSelector as jest.Mock).mockImplementation(() => ({
+        ...mockAppInfoSelector,
+        server: {
+          buildType: BuildType.DockerOnPremise
+        }
+      }))
+      render(<NavigationMenu />)
 
       expect(screen.getByTestId('settings-page-btn')).toBeTruthy()
     })
 
     it('should render github btn with proper link', () => {
-      const { container } = render(<NavigationMenu buildType={BuildType.Electron} />)
+      (appInfoSelector as jest.Mock).mockImplementation(() => ({
+        ...mockAppInfoSelector,
+        server: {
+          buildType: BuildType.DockerOnPremise
+        }
+      }))
+      const { container } = render(<NavigationMenu />)
 
       const githubBtn = container.querySelector('[data-test-subj="github-repo-btn"]')
       expect(githubBtn).toBeTruthy()

redisinsight/ui/src/components/navigation-menu/NavigationMenu.tsx

@@ -22,7 +22,12 @@ import { PageNames, Pages } from 'uiSrc/constants'
 import { EXTERNAL_LINKS } from 'uiSrc/constants/links'
 import { getRouterLinkProps } from 'uiSrc/services'
 import { connectedInstanceSelector } from 'uiSrc/slices/instances/instances'
-import { appElectronInfoSelector, setReleaseNotesViewed, setShortcutsFlyoutState } from 'uiSrc/slices/app/info'
+import {
+  appElectronInfoSelector,
+  appInfoSelector,
+  setReleaseNotesViewed,
+  setShortcutsFlyoutState
+} from 'uiSrc/slices/app/info'
 import LogoSVG from 'uiSrc/assets/img/logo.svg'
 import SettingsSVG from 'uiSrc/assets/img/sidebar/settings.svg'
 import SettingsActiveSVG from 'uiSrc/assets/img/sidebar/settings_active.svg'
@@ -32,6 +37,8 @@ import WorkbenchSVG from 'uiSrc/assets/img/sidebar/workbench.svg'
 import WorkbenchActiveSVG from 'uiSrc/assets/img/sidebar/workbench_active.svg'
 import SlowLogSVG from 'uiSrc/assets/img/sidebar/slowlog.svg'
 import SlowLogActiveSVG from 'uiSrc/assets/img/sidebar/slowlog_active.svg'
+import PubSubSVG from 'uiSrc/assets/img/sidebar/pubsub.svg'
+import PubSubActiveSVG from 'uiSrc/assets/img/sidebar/pubsub_active.svg'
 import GithubSVG from 'uiSrc/assets/img/sidebar/github.svg'
 import Divider from 'uiSrc/components/divider/Divider'
 
@@ -54,11 +61,7 @@ interface INavigations {
   getIconType: () => string;
 }
 
-interface IProps {
-  buildType: BuildType
-}
-
-const NavigationMenu = ({ buildType }: IProps) => {
+const NavigationMenu = () => {
   const history = useHistory()
   const location = useLocation()
   const dispatch = useDispatch()
@@ -68,6 +71,7 @@ const NavigationMenu = ({ buildType }: IProps) => {
 
   const { id: connectedInstanceId = '' } = useSelector(connectedInstanceSelector)
   const { isReleaseNotesViewed } = useSelector(appElectronInfoSelector)
+  const { server } = useSelector(appInfoSelector)
 
   useEffect(() => {
     setActivePage(`/${last(location.pathname.split('/'))}`)
@@ -134,7 +138,7 @@ const NavigationMenu = ({ buildType }: IProps) => {
         return cx(styles.navigationButton, { [styles.active]: this.isActivePage })
       },
       getIconType() {
-        return this.isActivePage ? SlowLogActiveSVG : SlowLogSVG
+        return this.isActivePage ? PubSubActiveSVG : PubSubSVG
       },
     },
   ]
@@ -259,7 +263,7 @@ const NavigationMenu = ({ buildType }: IProps) => {
     <EuiPageSideBar aria-label="Main navigation" className={cx(styles.navigation, 'eui-yScroll')}>
       <div className={styles.container}>
         <EuiToolTip
-          content={buildType === BuildType.RedisStack ? 'Edit database' : 'My Redis databases'}
+          content={server?.buildType === BuildType.RedisStack ? 'Edit database' : 'My Redis databases'}
           position="right"
         >
           <span className={cx(styles.iconNavItem, styles.homeIcon)}>