Merge pull request #1725 from RedisInsight/fe/feature/RI-4174_remove-recommendations-highlighting

#RI-4174 - remove recommendations highlighting

Author: vlad-dargel

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

@@ -1,11 +1,6 @@
-import React, { ReactNode } from 'react'
-import { useSelector } from 'react-redux'
+import { ReactNode } from 'react'
 
 import { AnalyticsViewTab } from 'uiSrc/slices/interfaces/analytics'
-import { appFeatureHighlightingSelector } from 'uiSrc/slices/app/features'
-import HighlightedFeature from 'uiSrc/components/hightlighted-feature/HighlightedFeature'
-import { BUILD_FEATURES } from 'uiSrc/constants/featuresHighlighting'
-import { getHighlightingFeatures } from 'uiSrc/utils/highlighting'
 import { OnboardingTourOptions } from 'uiSrc/components/onboarding-tour'
 import { ONBOARDING_FEATURES } from 'uiSrc/components/onboarding-features'
 
@@ -15,26 +10,6 @@ interface AnalyticsTabs {
   onboard?: OnboardingTourOptions
 }
 
-const DatabaseAnalyticsTab = () => {
-  const { features } = useSelector(appFeatureHighlightingSelector)
-  const { recommendations: recommendationsHighlighting } = getHighlightingFeatures(features)
-
-  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"
-        wrapperClassName="inner-highlighting-wrapper"
-      >
-        Database Analysis
-      </HighlightedFeature>
-    </>
-  )
-}
-
 export const analyticsViewTabs: AnalyticsTabs[] = [
   {
     id: AnalyticsViewTab.ClusterDetails,
@@ -43,7 +18,7 @@ export const analyticsViewTabs: AnalyticsTabs[] = [
   },
   {
     id: AnalyticsViewTab.DatabaseAnalysis,
-    label: <DatabaseAnalyticsTab />,
+    label: 'Database Analysis',
     onboard: ONBOARDING_FEATURES.ANALYTICS_DATABASE_ANALYSIS
   },
   {

redisinsight/ui/src/constants/featuresHighlighting.tsx

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

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

@@ -1,15 +1,6 @@
 import React, { ReactNode } from 'react'
-import { useDispatch, useSelector } from 'react-redux'
 
 import { DatabaseAnalysisViewTab } from 'uiSrc/slices/interfaces/analytics'
-import {
-  appFeatureHighlightingSelector,
-  removeFeatureFromHighlighting
-} from 'uiSrc/slices/app/features'
-import { BUILD_FEATURES } from 'uiSrc/constants/featuresHighlighting'
-import HighlightedFeature from 'uiSrc/components/hightlighted-feature/HighlightedFeature'
-
-import { getHighlightingFeatures } from 'uiSrc/utils/highlighting'
 import { OnboardingTourOptions } from 'uiSrc/components/onboarding-tour'
 import { ONBOARDING_FEATURES } from 'uiSrc/components/onboarding-features'
 
@@ -23,25 +14,6 @@ interface DatabaseAnalysisTabs {
   onboard?: OnboardingTourOptions
 }
 
-const RecommendationsTab = ({ count }: { count?: number }) => {
-  const { features } = useSelector(appFeatureHighlightingSelector)
-  const { recommendations: recommendationsHighlighting } = getHighlightingFeatures(features)
-
-  const dispatch = useDispatch()
-
-  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[] = [
   {
     id: DatabaseAnalysisViewTab.DataSummary,
@@ -50,7 +22,7 @@ export const databaseAnalysisTabs: DatabaseAnalysisTabs[] = [
   },
   {
     id: DatabaseAnalysisViewTab.Recommendations,
-    name: (count) => <RecommendationsTab count={count} />,
+    name: (count?: number) => (count ? `Recommendations (${count})` : 'Recommendations'),
     content: <Recommendations />,
     onboard: ONBOARDING_FEATURES.ANALYTICS_RECOMMENDATIONS
   },