Merge pull request #2941 from RedisInsight/fe/feature/RI-5196-highlighting

#RI-5196- add highlighting for explore panel

Author: mariasergeenko

redisinsight/ui/src/components/insights-trigger/InsightsTrigger.spec.tsx

@@ -8,6 +8,7 @@ import { recommendationsSelector, resetRecommendationsHighlighting } from 'uiSrc
 import { InsightsPanelTabs } from 'uiSrc/slices/interfaces/insights'
 import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
 import { Pages } from 'uiSrc/constants'
+import { removeFeatureFromHighlighting } from 'uiSrc/slices/app/features'
 import InsightsTrigger from './InsightsTrigger'
 
 let store: typeof mockedStore
@@ -49,7 +50,7 @@ describe('InsightsTrigger', () => {
 
     fireEvent.click(screen.getByTestId('insights-trigger'))
 
-    expect(store.getActions()).toEqual([toggleInsightsPanel()])
+    expect(store.getActions()).toEqual([toggleInsightsPanel(), removeFeatureFromHighlighting('insights')])
   })
 
   it('should call proper actions after click on the button when there are any recommendations', () => {
@@ -63,7 +64,8 @@ describe('InsightsTrigger', () => {
     expect(store.getActions()).toEqual([
       resetRecommendationsHighlighting(),
       changeSelectedTab(InsightsPanelTabs.Recommendations),
-      toggleInsightsPanel()
+      toggleInsightsPanel(),
+      removeFeatureFromHighlighting('insights')
     ])
   })
 

redisinsight/ui/src/components/insights-trigger/InsightsTrigger.tsx

@@ -12,13 +12,20 @@ import { recommendationsSelector, resetRecommendationsHighlighting } from 'uiSrc
 import { InsightsPanelTabs } from 'uiSrc/slices/interfaces/insights'
 import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
 import { connectedInstanceSelector } from 'uiSrc/slices/instances/instances'
+import HighlightedFeature from 'uiSrc/components/hightlighted-feature/HighlightedFeature'
+import { BUILD_FEATURES } from 'uiSrc/constants/featuresHighlighting'
+import { appFeatureHighlightingSelector, removeFeatureFromHighlighting } from 'uiSrc/slices/app/features'
+import { getHighlightingFeatures } from 'uiSrc/utils/highlighting'
 import styles from './styles.module.scss'
 
 const InsightsTrigger = () => {
   const { isOpen: isInsigtsOpen, tabSelected } = useSelector(insightsPanelSelector)
   const { isHighlighted, } = useSelector(recommendationsSelector)
   const { provider } = useSelector(connectedInstanceSelector)
 
+  const { features } = useSelector(appFeatureHighlightingSelector)
+  const { insights: insightsHighlighting } = getHighlightingFeatures(features)
+
   const dispatch = useDispatch()
   const { pathname, search } = useLocation()
   const { instanceId } = useParams<{ instanceId: string }>()
@@ -54,37 +61,45 @@ const InsightsTrigger = () => {
         source: 'overview'
       },
     })
+
+    dispatch(removeFeatureFromHighlighting('insights'))
   }
 
   return (
     <div
       className={cx(styles.container, { [styles.isOpen]: isInsigtsOpen })}
     >
-      <EuiToolTip
-        title={isHighlighted ? undefined : 'Insights'}
-        content={isHighlighted
-          ? 'New tips are available'
-          : 'Open interactive tutorials to learn more about Redis or Redis Stack capabilities, or use tips to improve your database.'}
+      <HighlightedFeature
+        isHighlight={insightsHighlighting && !isHighlighted}
+        hideFirstChild={!isHighlighted}
+        {...(BUILD_FEATURES.insights || {})}
       >
-        <EuiButton
-          fill
-          size="s"
-          color="secondary"
-          className={styles.btn}
-          role="button"
-          iconType={TriggerIcon}
-          onClick={handleClickTrigger}
-          data-testid="insights-trigger"
+        <EuiToolTip
+          title={isHighlighted ? undefined : 'Insights'}
+          content={isHighlighted
+            ? 'New tips are available'
+            : 'Open interactive tutorials to learn more about Redis or Redis Stack capabilities, or use tips to improve your database.'}
         >
-          <EuiText className={cx(
-            styles.triggerText,
-          )}
+          <EuiButton
+            fill
+            size="s"
+            color="secondary"
+            className={styles.btn}
+            role="button"
+            iconType={TriggerIcon}
+            onClick={handleClickTrigger}
+            data-testid="insights-trigger"
           >
-            Insights
-          </EuiText>
-          {isHighlighted && (<span className={styles.highlighting} />)}
-        </EuiButton>
-      </EuiToolTip>
+            <EuiText className={cx(
+              styles.triggerText,
+            )}
+            >
+              Insights
+            </EuiText>
+            {isHighlighted && (<span className={styles.highlighting} />)}
+          </EuiButton>
+        </EuiToolTip>
+      </HighlightedFeature>
     </div>
   )
 }

redisinsight/ui/src/constants/featuresHighlighting.tsx

@@ -12,5 +12,9 @@ interface BuildHighlightingFeature {
 }
 
 export const BUILD_FEATURES: Record<string, BuildHighlightingFeature> = {
-
+  insights: {
+    type: 'tooltip',
+    title: 'Try Redis Tutorials',
+    content: 'Try our interactive Tutorials to learn how Redis can solve your use cases.',
+  }
 } as const