Merge pull request #2593 from RedisInsight/fe/feature/RI-4944_browser_navigation

#RI-4944 - rework browser navigation

Author: vlad-dargel

redisinsight/ui/src/components/database-overview/DatabaseOverview.tsx

@@ -1,30 +1,19 @@
-import React, { useContext, useEffect, useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import cx from 'classnames'
-import { EuiFlexGroup, EuiFlexItem, EuiIcon, EuiText, EuiToolTip } from '@elastic/eui'
+import { EuiFlexGroup, EuiFlexItem, EuiIcon, EuiToolTip } from '@elastic/eui'
 import MoreInfoPopover from 'uiSrc/components/database-overview/components/MoreInfoPopover'
-import { Theme } from 'uiSrc/constants'
-import { ThemeContext } from 'uiSrc/contexts/themeContext'
 import { sortModulesByName } from 'uiSrc/utils/modules'
 
-import RediStackDark from 'uiSrc/assets/img/modules/redistack/RediStackDark.svg'
-import RediStackDarkMin from 'uiSrc/assets/img/modules/redistack/RediStackDark-min.svg'
-import RediStackLight from 'uiSrc/assets/img/modules/redistack/RediStackLight.svg'
-import RediStackLightMin from 'uiSrc/assets/img/modules/redistack/RediStackLight-min.svg'
-import RediStackLightLogo from 'uiSrc/assets/img/modules/redistack/RedisStackLogoLight.svg'
-import RediStackDarkLogo from 'uiSrc/assets/img/modules/redistack/RedisStackLogoDark.svg'
-
 import { AdditionalRedisModule } from 'apiSrc/modules/database/models/additional.redis.module'
 import { getResolutionLimits } from './utils/resolutionHelper'
 import { IMetric } from './components/OverviewMetrics'
-import DatabaseListModules from '../database-list-modules/DatabaseListModules'
 
 import styles from './styles.module.scss'
 
 interface Props {
   windowDimensions: number
   metrics?: Array<IMetric>
   modules?: Array<AdditionalRedisModule>
-  isRediStack?: boolean
 }
 
 interface IState<T> {
@@ -33,11 +22,9 @@ interface IState<T> {
 }
 
 const DatabaseOverview = (props: Props) => {
-  const { metrics: metricsProps = [], modules: modulesProps = [], windowDimensions, isRediStack } = props
+  const { metrics: metricsProps = [], modules: modulesProps = [], windowDimensions } = props
   const [metrics, setMetrics] = useState<IState<IMetric>>({ visible: [], hidden: [] })
-  const [modules, setModules] = useState<IState<AdditionalRedisModule>>({ visible: [], hidden: [] })
-
-  const { theme } = useContext(ThemeContext)
+  const [modules, setModules] = useState<AdditionalRedisModule[]>([])
 
   useEffect(() => {
     const resolutionLimits = getResolutionLimits(
@@ -61,25 +48,9 @@ const DatabaseOverview = (props: Props) => {
     setMetrics(metricsState)
 
     const sortedModules = sortModulesByName(modulesProps)
-    setModules({
-      visible: sortedModules.slice(0, resolutionLimits.modules),
-      hidden: sortedModules.slice(resolutionLimits.modules)
-    })
+    setModules(sortedModules)
   }, [windowDimensions, metricsProps, modulesProps])
 
-  const RediStackLogo = (
-    <div className={styles.RediStackLogoWrapper} data-testid="redis-stack-logo">
-      <EuiIcon
-        type={theme === Theme.Dark ? RediStackDark : RediStackLight}
-        className={styles.redistackIcon}
-      />
-      <EuiIcon
-        type={theme === Theme.Dark ? RediStackDarkMin : RediStackLightMin}
-        className={styles.redistackLogoIcon}
-      />
-    </div>
-  )
-
   const getTooltipContent = (metric: IMetric) => {
     if (!metric.children?.length) {
       return (
@@ -127,7 +98,6 @@ const DatabaseOverview = (props: Props) => {
             'flex-row',
             styles.itemContainer,
             styles.overview,
-            { [styles.noModules]: !modules.visible?.length, [styles.RediStack]: isRediStack }
           )}
           >
             <EuiFlexGroup gutterSize="none" responsive={false}>
@@ -172,32 +142,11 @@ const DatabaseOverview = (props: Props) => {
             'flex-row',
             styles.itemContainer,
             styles.modules,
-            { [styles.noModules]: !modules.visible?.length, [styles.RediStack]: isRediStack }
           )}
         >
-          {isRediStack && (
-            <DatabaseListModules
-              content={isRediStack ? RediStackLogo : undefined}
-              modules={modulesProps}
-              tooltipTitle={isRediStack ? (
-                <>
-                  <EuiIcon
-                    type={theme === Theme.Dark ? RediStackDarkLogo : RediStackLightLogo}
-                    className={styles.tooltipLogo}
-                    data-testid="tooltip-redis-stack-icon"
-                  />
-                  <EuiText color="subdued" style={{ marginTop: 4, marginBottom: -4 }}>Includes</EuiText>
-                </>
-              ) : undefined}
-              withoutStyles
-            />
-          )}
-          {(!isRediStack && !!modules.visible?.length) && (
-            <DatabaseListModules dark inCircle modules={modules.visible} />
-          )}
           <MoreInfoPopover
             metrics={metrics.hidden}
-            modules={isRediStack ? [...modules.hidden, ...modules.visible] : modules.hidden}
+            modules={modules}
           />
         </div>
       </EuiFlexItem>

redisinsight/ui/src/components/database-overview/DatabaseOverviewWrapper.tsx

@@ -17,7 +17,7 @@ interface IProps { windowDimensions: number }
 const DatabaseOverviewWrapper = ({ windowDimensions } :IProps) => {
   let interval: NodeJS.Timeout
   const { theme } = useContext(ThemeContext)
-  const { id: connectedInstanceId = '', modules = [], isRediStack, db } = useSelector(connectedInstanceSelector)
+  const { id: connectedInstanceId = '', modules = [], db } = useSelector(connectedInstanceSelector)
   const overview = useSelector(connectedInstanceOverviewSelector)
 
   const dispatch = useDispatch()
@@ -40,7 +40,6 @@ const DatabaseOverviewWrapper = ({ windowDimensions } :IProps) => {
       modules={modules}
       metrics={getOverviewMetrics({ theme, items: overview, db })}
       windowDimensions={windowDimensions}
-      isRediStack={isRediStack}
     />
   )
 }

redisinsight/ui/src/components/database-overview/components/MoreInfoPopover/MoreInfoPopover.tsx

@@ -102,7 +102,11 @@ const MoreInfoPopover = ({ metrics, modules }: IProps) => {
           <h4 className={styles.mi_fieldName}>Modules</h4>
           {
             modules?.map(({ name = '', semanticVersion = '', version = '' }) => (
-              <div key={name} className={cx(styles.mi_moduleName)}>
+              <div
+                key={name}
+                className={cx(styles.mi_moduleName)}
+                data-testid={`${truncateText(getModule(name)?.name || DATABASE_LIST_MODULES_TEXT[name] || name, 50)}`}
+              >
                 {`${truncateText(getModule(name)?.name || DATABASE_LIST_MODULES_TEXT[name] || name, 50)} `}
                 {!!(semanticVersion || version) && (
                   <span className={styles.mi_version}>

redisinsight/ui/src/components/database-overview/styles.module.scss

@@ -19,38 +19,21 @@
   margin-left: 6px;
 }
 
-.overview {
-  &.noModules,
-  &.RediStack {
-    .overviewItem {
-      &:last-child {
-        border-right: 1px solid var(--separatorColor);
-      }
-    }
-  }
-}
-
 .modules {
   padding-left: 0;
   padding-right: 0;
 }
 
-.noModules {
-  //
-}
-
 .overviewItem {
   padding: 6px 20px;
   min-width: 116px;
   color: var(--euiTextSubduedColor);
+  border-right: 1px solid var(--separatorColor);
 
   @media only screen and (max-width: 1024px) {
     padding: 6px 10px;
     min-width: 96px;
   }
-  &:not(:last-child) {
-    border-right: 1px solid var(--separatorColor);
-  }
 
   @media only screen and (max-width: 1124px) {
     border-right: 1px solid var(--separatorColor);

redisinsight/ui/src/components/instance-header/InstanceHeader.spec.tsx

@@ -1,5 +1,6 @@
 import { cloneDeep } from 'lodash'
 import React from 'react'
+import reactRouterDom from 'react-router-dom'
 import { instance, mock } from 'ts-mockito'
 import { cleanup, mockedStore, render, screen, fireEvent } from 'uiSrc/utils/test-utils'
 import {
@@ -47,6 +48,13 @@ jest.mock('uiSrc/slices/app/context', () => ({
   })
 }))
 
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useHistory: () => ({
+    push: jest.fn,
+  }),
+}))
+
 describe('InstanceHeader', () => {
   it('should render', () => {
     expect(render(<InstanceHeader {...instance(mockedProps)} />)).toBeTruthy()
@@ -114,4 +122,16 @@ describe('InstanceHeader', () => {
 
     expect(screen.getByTestId('change-index-btn')).toBeDisabled()
   })
+
+  it('should call history push with proper path', () => {
+    const pushMock = jest.fn()
+    reactRouterDom.useHistory = jest.fn().mockReturnValue({ push: pushMock })
+
+    render(<InstanceHeader {...instance(mockedProps)} />)
+
+    fireEvent.click(screen.getByTestId('my-redis-db-btn'))
+
+    expect(pushMock).toHaveBeenCalledTimes(1)
+    expect(pushMock).toHaveBeenCalledWith('/')
+  })
 })

redisinsight/ui/src/components/instance-header/InstanceHeader.tsx

@@ -4,12 +4,12 @@ import { useHistory } from 'react-router-dom'
 import cx from 'classnames'
 import {
   EuiButtonEmpty,
-  EuiButtonIcon,
   EuiFieldNumber,
   EuiFlexGroup,
   EuiFlexItem,
   EuiIcon,
-  EuiToolTip
+  EuiToolTip,
+  EuiText,
 } from '@elastic/eui'
 
 import { Pages } from 'uiSrc/constants'
@@ -114,20 +114,23 @@ const InstanceHeader = ({ onChangeDbIndex }: Props) => {
                 position="bottom"
                 content={server?.buildType === BuildType.RedisStack ? 'Edit database' : 'My Redis databases'}
               >
-                <EuiButtonIcon
-                  display="empty"
-                  size="s"
-                  iconSize="l"
-                  iconType="sortLeft"
+                <EuiText
+                  className={styles.breadCrumbLink}
                   aria-label={server?.buildType === BuildType.RedisStack ? 'Edit database' : 'My Redis databases'}
-                  data-testid="my-redis-db-icon"
+                  data-testid="my-redis-db-btn"
                   onClick={goHome}
-                />
+                  onKeyDown={goHome}
+                >
+                  Databases
+                </EuiText>
               </EuiToolTip>
             </div>
             <div style={{ flex: 1, overflow: 'hidden' }}>
               <div style={{ maxWidth: '100%' }}>
                 <EuiFlexGroup gutterSize="none" alignItems="center" responsive={false}>
+                  <EuiFlexItem grow={false}>
+                    <EuiText className={styles.divider}>&#62;</EuiText>
+                  </EuiFlexItem>
                   <EuiFlexItem style={{ overflow: 'hidden' }}>
                     <b className={styles.dbName}>{name}</b>
                   </EuiFlexItem>

redisinsight/ui/src/components/instance-header/styles.module.scss

@@ -10,8 +10,18 @@
 
   & > div {
     display: flex;
-    &:not(:last-of-type) {
-      margin-right: 12px;
+  }
+
+  .breadCrumbLink {
+    color: var(--euiColorPrimary) !important;
+    font-size: 14px !important;
+    line-height: 20px;
+    font-weight: 400;
+    cursor: pointer;
+    text-decoration: underline;
+
+    &:hover {
+      text-decoration: none;
     }
   }
 }
@@ -37,9 +47,9 @@
 .dbName {
   display: inline-block !important;
   overflow: hidden;
-  font-size: 16px;
+  font-size: 14px;
   line-height: 20px;
-  font-weight: 500;
+  font-weight: 400;
   text-overflow: ellipsis;
   max-width: 100%;
   white-space: nowrap;
@@ -61,3 +71,11 @@
   width: 60px !important;
 }
 
+.divider {
+  color: var(--euiTextSubduedColor);
+  font-size: 14px;
+  line-height: 20px;
+  font-weight: 400;
+  margin: 0 8px;
+}
+