#RI-3927 - add recommendations tab highlighting

Author: rsergeenko

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

@@ -0,0 +1,44 @@
+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 HighlightedFeature from 'uiSrc/components/hightlighted-feature/HighlightedFeature'
+import { BUILD_FEATURES } from 'uiSrc/constants/featuresHighlighting'
+
+interface AnalyticsTabs {
+  id: AnalyticsViewTab
+  label: string | ReactNode
+}
+
+const DatabaseAnalyticsTab = () => {
+  const { recommendations: recommendationsHighlighting } = useSelector(appFeaturesToHighlightSelector) ?? {}
+
+  return (
+    <>
+      <HighlightedFeature
+        title={BUILD_FEATURES.recommendations?.title}
+        content={BUILD_FEATURES.recommendations?.content}
+        type={BUILD_FEATURES.recommendations?.type}
+        isHighlight={BUILD_FEATURES.recommendations && recommendationsHighlighting}
+        dotClassName="tab-highlighting-dot"
+      >
+        Database Analysis
+      </HighlightedFeature>
+    </>
+  )
+}
+
+export const analyticsViewTabs: AnalyticsTabs[] = [
+  {
+    id: AnalyticsViewTab.ClusterDetails,
+    label: 'Overview',
+  },
+  {
+    id: AnalyticsViewTab.DatabaseAnalysis,
+    label: <DatabaseAnalyticsTab />,
+  },
+  {
+    id: AnalyticsViewTab.SlowLog,
+    label: 'Slow Log',
+  },
+]

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

@@ -1,3 +1,4 @@
+import { isString } from 'lodash'
 import { EuiToolTip } from '@elastic/eui'
 import { ToolTipPositions } from '@elastic/eui/src/components/tool_tip/tool_tip'
 import cx from 'classnames'
@@ -8,7 +9,7 @@ import styles from './styles.modules.scss'
 
 export interface Props {
   isHighlight?: boolean
-  children: React.ReactElement<any, any>
+  children: React.ReactElement<any, any> | string
   title?: string | React.ReactElement
   content?: string | React.ReactElement
   type?: FeaturesHighlightingType
@@ -36,7 +37,7 @@ const HighlightedFeature = (props: Props) => {
     dataTestPostfix = ''
   } = props
 
-  const innerContent = hideFirstChild ? children.props.children : children
+  const innerContent = hideFirstChild && !isString(children) ? children.props.children : children
 
   const DotHighlighting = () => (
     <>

redisinsight/ui/src/components/hightlighted-feature/HighlightedFeature.tsx

@@ -207,8 +207,8 @@ $sideBarWidth: 60px;
 }
 
 .highlightDot {
-  top: 12px !important;
-  right: 12px !important;
+  top: 11px !important;
+  right: 11px !important;
 
   &.activePage {
     background-color: #465282 !important;

redisinsight/ui/src/components/navigation-menu/styles.module.scss

@@ -1,4 +1,5 @@
 import React from 'react'
+import { PageNames } from 'uiSrc/constants/pages'
 
 export type FeaturesHighlightingType = 'plain' | 'tooltip' | 'popover'
 
@@ -9,9 +10,10 @@ interface BuildHighlightingFeature {
   page?: string
 }
 export const BUILD_FEATURES: { [key: string]: BuildHighlightingFeature } = {
-  importDatabases: {
+  recommendations: {
     type: 'tooltip',
-    title: 'Import Database Connections',
-    content: 'Import your database connections from other Redis UIs'
+    title: 'Database Recommendations',
+    content: 'Run database analysis to get recommendations for optimizing your database.',
+    page: PageNames.analytics
   }
 }

redisinsight/ui/src/constants/featuresHighlighting.tsx

@@ -1,14 +1,39 @@
 import React, { ReactNode } from 'react'
+import { useDispatch, useSelector } from 'react-redux'
+
 import { DatabaseAnalysisViewTab } from 'uiSrc/slices/interfaces/analytics'
-import AnalysisDataView from '../analysis-data-view'
+import { appFeaturesToHighlightSelector, removeFeatureFromHighlighting } from 'uiSrc/slices/app/features-highlighting'
+import { BUILD_FEATURES } from 'uiSrc/constants/featuresHighlighting'
+import HighlightedFeature from 'uiSrc/components/hightlighted-feature/HighlightedFeature'
+
 import Recommendations from '../recommendations-view'
+import AnalysisDataView from '../analysis-data-view'
 
 interface DatabaseAnalysisTabs {
   id: DatabaseAnalysisViewTab,
-  name: (count?: number) => string,
+  name: (count?: number) => string | ReactNode,
   content: ReactNode
 }
 
+const RecommendationsTab = ({ count }: { count?: number }) => {
+  const { recommendations: recommendationsHighlighting } = useSelector(appFeaturesToHighlightSelector) ?? {}
+
+  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</>)
+}
+
 export const databaseAnalysisTabs: DatabaseAnalysisTabs[] = [
   {
     id: DatabaseAnalysisViewTab.DataSummary,
@@ -17,7 +42,7 @@ export const databaseAnalysisTabs: DatabaseAnalysisTabs[] = [
   },
   {
     id: DatabaseAnalysisViewTab.Recommendations,
-    name: (count?: number) => (count ? `Recommendations (${count})` : 'Recommendations'),
+    name: (count) => <RecommendationsTab count={count} />,
     content: <Recommendations />
   },
 ]

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

@@ -9,15 +9,9 @@ import {
   EuiToolTip,
 } from '@elastic/eui'
 import { isEmpty } from 'lodash'
-import { useDispatch, useSelector } from 'react-redux'
+import { useSelector } from 'react-redux'
 import cx from 'classnames'
 import { ImportDatabasesDialog } from 'uiSrc/components'
-import HighlightedFeature from 'uiSrc/components/hightlighted-feature/HighlightedFeature'
-import { BUILD_FEATURES } from 'uiSrc/constants/featuresHighlighting'
-import {
-  appFeaturesToHighlightSelector,
-  removeFeatureFromHighlighting
-} from 'uiSrc/slices/app/features-highlighting'
 import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
 import HelpLinksMenu from 'uiSrc/pages/home/components/HelpLinksMenu'
 import PromoLink from 'uiSrc/components/promo-link/PromoLink'
@@ -48,10 +42,6 @@ const HomeHeader = ({ onAddInstance, direction, welcomePage = false }: Props) =>
   const [guides, setGuides] = useState<IHelpGuide[]>([])
   const [isImportDialogOpen, setIsImportDialogOpen] = useState<boolean>(false)
 
-  const { importDatabases: importDatabasesHighlighting } = useSelector(appFeaturesToHighlightSelector) ?? {}
-
-  const dispatch = useDispatch()
-
   useEffect(() => {
     if (loading || !data || isEmpty(data)) {
       return
@@ -126,30 +116,20 @@ const HomeHeader = ({ onAddInstance, direction, welcomePage = false }: Props) =>
   )
 
   const ImportDatabasesBtn = () => (
-    <HighlightedFeature
-      title={BUILD_FEATURES.importDatabases?.title}
-      content={BUILD_FEATURES.importDatabases?.content}
-      type={BUILD_FEATURES.importDatabases?.type}
-      isHighlight={BUILD_FEATURES.importDatabases && importDatabasesHighlighting}
-      onClick={() => dispatch(removeFeatureFromHighlighting('importDatabases'))}
-      transformOnHover
-      hideFirstChild
+    <EuiToolTip
+      content="Import Database Connections"
     >
-      <EuiToolTip
-        content="Import Database Connections"
+      <EuiButton
+        fill
+        color="secondary"
+        onClick={handleClickImportDbBtn}
+        className={styles.importDatabasesBtn}
+        size="m"
+        data-testid="import-dbs-btn"
       >
-        <EuiButton
-          fill
-          color="secondary"
-          onClick={handleClickImportDbBtn}
-          className={styles.importDatabasesBtn}
-          size="m"
-          data-testid="import-dbs-btn"
-        >
-          <EuiIcon type="importAction" />
-        </EuiButton>
-      </EuiToolTip>
-    </HighlightedFeature>
+        <EuiIcon type="importAction" />
+      </EuiButton>
+    </EuiToolTip>
   )
 
   const Guides = () => (

redisinsight/ui/src/pages/home/components/HomeHeader/HomeHeader.tsx

@@ -49,7 +49,7 @@
 .tabs-active-borders {
   .euiTab {
     border-radius: 0;
-    padding: 8px 12px !important;
+    padding: 0 !important;
     border-bottom: 1px solid var(--separatorColor);
     color: var(--euiTextSubduedColor) !important;
 
@@ -63,9 +63,15 @@
       font-size: 13px !important;
       line-height: 18px !important;
       font-weight: 500 !important;
+      padding: 8px 12px;
     }
   }
 
+  .tab-highlighting-dot {
+    top: -6px;
+    right: -12px;
+  }
+
   .euiTab + .euiTab {
     margin-left: 0 !important;