Merge pull request #1593 from RedisInsight/fe/bugfix/RI-4014

#RI-4014 - fix re-rendering, fix highlighting if no count, fix click space for tab highlighting

Author: rsergeenko

redisinsight/ui/src/components/analytics-tabs/constants.tsx

@@ -1,17 +1,20 @@
 import React, { ReactNode } from 'react'
-import { AnalyticsViewTab } from 'uiSrc/slices/interfaces/analytics'
 import { useSelector } from 'react-redux'
-import { appFeaturesToHighlightSelector } from 'uiSrc/slices/app/features-highlighting'
+
+import { AnalyticsViewTab } from 'uiSrc/slices/interfaces/analytics'
+import { appFeatureHighlightingSelector } from 'uiSrc/slices/app/features-highlighting'
 import HighlightedFeature from 'uiSrc/components/hightlighted-feature/HighlightedFeature'
 import { BUILD_FEATURES } from 'uiSrc/constants/featuresHighlighting'
+import { getHighlightingFeatures } from 'uiSrc/utils/highlighting'
 
 interface AnalyticsTabs {
   id: AnalyticsViewTab
   label: string | ReactNode
 }
 
 const DatabaseAnalyticsTab = () => {
-  const { recommendations: recommendationsHighlighting } = useSelector(appFeaturesToHighlightSelector) ?? {}
+  const { features } = useSelector(appFeatureHighlightingSelector)
+  const { recommendations: recommendationsHighlighting } = getHighlightingFeatures(features)
 
   return (
     <>
@@ -21,6 +24,7 @@ const DatabaseAnalyticsTab = () => {
         type={BUILD_FEATURES.recommendations?.type}
         isHighlight={BUILD_FEATURES.recommendations && recommendationsHighlighting}
         dotClassName="tab-highlighting-dot"
+        wrapperClassName="inner-highlighting-wrapper"
       >
         Database Analysis
       </HighlightedFeature>

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

@@ -10,7 +10,7 @@ import { ThemeContext } from 'uiSrc/contexts/themeContext'
 
 import { getOverviewMetrics } from './components/OverviewMetrics'
 
-const TIMEOUT_TO_GET_INFO = process.env.NODE_ENV !== 'development' ? 5000 : 10000000
+const TIMEOUT_TO_GET_INFO = process.env.NODE_ENV !== 'development' ? 5000 : 60_000
 
 interface IProps { windowDimensions: number }
 

redisinsight/ui/src/pages/databaseAnalysis/components/data-nav-tabs/constants.tsx

@@ -2,10 +2,14 @@ import React, { ReactNode } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 
 import { DatabaseAnalysisViewTab } from 'uiSrc/slices/interfaces/analytics'
-import { appFeaturesToHighlightSelector, removeFeatureFromHighlighting } from 'uiSrc/slices/app/features-highlighting'
+import {
+  appFeatureHighlightingSelector,
+  removeFeatureFromHighlighting
+} from 'uiSrc/slices/app/features-highlighting'
 import { BUILD_FEATURES } from 'uiSrc/constants/featuresHighlighting'
 import HighlightedFeature from 'uiSrc/components/hightlighted-feature/HighlightedFeature'
 
+import { getHighlightingFeatures } from 'uiSrc/utils/highlighting'
 import Recommendations from '../recommendations-view'
 import AnalysisDataView from '../analysis-data-view'
 
@@ -16,22 +20,22 @@ interface DatabaseAnalysisTabs {
 }
 
 const RecommendationsTab = ({ count }: { count?: number }) => {
-  const { recommendations: recommendationsHighlighting } = useSelector(appFeaturesToHighlightSelector) ?? {}
+  const { features } = useSelector(appFeatureHighlightingSelector)
+  const { recommendations: recommendationsHighlighting } = getHighlightingFeatures(features)
 
   const dispatch = useDispatch()
 
-  return count ? (
-    <>
-      <HighlightedFeature
-        type="plain"
-        isHighlight={BUILD_FEATURES.recommendations && recommendationsHighlighting}
-        onClick={() => dispatch(removeFeatureFromHighlighting('recommendations'))}
-        dotClassName="tab-highlighting-dot"
-      >
-        <>Recommendations ({count})</>
-      </HighlightedFeature>
-    </>
-  ) : (<>Recommendations</>)
+  return (
+    <HighlightedFeature
+      type="plain"
+      isHighlight={BUILD_FEATURES.recommendations && recommendationsHighlighting}
+      onClick={() => dispatch(removeFeatureFromHighlighting('recommendations'))}
+      dotClassName="tab-highlighting-dot"
+      wrapperClassName="inner-highlighting-wrapper"
+    >
+      {count ? <>Recommendations ({count})</> : <>Recommendations</>}
+    </HighlightedFeature>
+  )
 }
 
 export const databaseAnalysisTabs: DatabaseAnalysisTabs[] = [

redisinsight/ui/src/slices/app/features-highlighting.ts

@@ -44,9 +44,6 @@ export const {
 } = appFeaturesHighlightingSlice.actions
 
 export const appFeatureHighlightingSelector = (state: RootState) => state.app.featuresHighlighting
-export const appFeaturesToHighlightSelector = (state: RootState): { [key: string]: boolean } =>
-  state.app.featuresHighlighting.features
-    .reduce((prev, next) => ({ ...prev, [next]: true }), {})
 export const appFeaturePagesHighlightingSelector = (state: RootState) => state.app.featuresHighlighting.pages
 
 export default appFeaturesHighlightingSlice.reducer

redisinsight/ui/src/styles/components/_tabs.scss

@@ -67,6 +67,16 @@
     }
   }
 
+  .inner-highlighting-wrapper {
+    margin: -8px -12px;
+    padding: 8px 12px;
+
+    .tab-highlighting-dot {
+      top: 2px;
+      right: 2px;
+    }
+  }
+
   .tab-highlighting-dot {
     top: -6px;
     right: -12px;

redisinsight/ui/src/utils/highlighting.ts

@@ -17,3 +17,6 @@ export const getPagesForFeatures = (features: string[] = []) => {
 
   return result
 }
+
+export const getHighlightingFeatures = (features: string[]): { [key: string]: boolean } => features
+  .reduce((prev, next) => ({ ...prev, [next]: true }), {})

redisinsight/ui/src/utils/tests/highlighting.spec.ts

@@ -1,4 +1,4 @@
-import { getPagesForFeatures } from 'uiSrc/utils/highlighting'
+import { getHighlightingFeatures, getPagesForFeatures } from 'uiSrc/utils/highlighting'
 import { MOCKED_HIGHLIGHTING_FEATURES } from 'uiSrc/utils/test-utils'
 
 describe('getPagesForFeatures', () => {
@@ -10,3 +10,11 @@ describe('getPagesForFeatures', () => {
     expect(getPagesForFeatures(MOCKED_HIGHLIGHTING_FEATURES)).toEqual({ browser: MOCKED_HIGHLIGHTING_FEATURES })
   })
 })
+
+describe('getPagesForFeatures', () => {
+  it('should return proper pages for features', () => {
+    expect(getHighlightingFeatures([])).toEqual({})
+    expect(getHighlightingFeatures(['feature1'])).toEqual({ feature1: true })
+    expect(getHighlightingFeatures(['f1', 'f2'])).toEqual({ f1: true, f2: true })
+  })
+})