#RI-4750 - highlight cloud button

Author: rsergeenko

redisinsight/ui/src/constants/featuresHighlighting.tsx

@@ -12,11 +12,7 @@ interface BuildHighlightingFeature {
 }
 
 export const BUILD_FEATURES: Record<string, BuildHighlightingFeature> = {
-  [PageNames.triggeredFunctions]: {
-    type: 'tooltip',
-    title: 'Triggers and Functions',
-    content: 'Triggers and Functions can execute server-side functions triggered by events or data operations to decrease latency and react in real time to database events.',
-    page: PageNames.triggeredFunctions,
-    asPageFeature: true
+  cloudButton: {
+    type: 'plain'
   }
 } as const

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

@@ -9,7 +9,7 @@ import {
   EuiToolTip,
 } from '@elastic/eui'
 import { isEmpty } from 'lodash'
-import { useSelector } from 'react-redux'
+import { useDispatch, useSelector } from 'react-redux'
 import cx from 'classnames'
 import { FeatureFlagComponent, ImportDatabasesDialog, OAuthSsoHandlerDialog } from 'uiSrc/components'
 import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
@@ -24,6 +24,10 @@ import { instancesSelector } from 'uiSrc/slices/instances/instances'
 import { OAuthSocialSource } from 'uiSrc/slices/interfaces'
 import { FeatureFlags } from 'uiSrc/constants'
 import { ReactComponent as ConfettiIcon } from 'uiSrc/assets/img/oauth/confetti.svg'
+import HighlightedFeature from 'uiSrc/components/hightlighted-feature/HighlightedFeature'
+import { appFeatureHighlightingSelector, removeFeatureFromHighlighting } from 'uiSrc/slices/app/features'
+import { getHighlightingFeatures } from 'uiSrc/utils/highlighting'
+import { BUILD_FEATURES } from 'uiSrc/constants/featuresHighlighting'
 import SearchDatabasesList from '../SearchDatabasesList'
 
 import styles from './styles.module.scss'
@@ -41,10 +45,17 @@ const HomeHeader = ({ onAddInstance, direction, welcomePage = false }: Props) =>
   const { theme } = useContext(ThemeContext)
   const { data: instances } = useSelector(instancesSelector)
   const { loading, data } = useSelector(contentSelector)
+  const { features } = useSelector(appFeatureHighlightingSelector)
+  const { cloudButton: cloudButtonHighlighting } = getHighlightingFeatures(features)
+
   const [promoData, setPromoData] = useState<ContentCreateRedis>()
   const [guides, setGuides] = useState<IHelpGuide[]>([])
   const [isImportDialogOpen, setIsImportDialogOpen] = useState<boolean>(false)
 
+  const dispatch = useDispatch()
+
+  console.log(features)
+
   useEffect(() => {
     if (loading || !data || isEmpty(data)) {
       return
@@ -170,6 +181,8 @@ const HomeHeader = ({ onAddInstance, direction, welcomePage = false }: Props) =>
     </div>
   )
 
+  console.log(cloudButtonHighlighting)
+
   const CreateBtn = ({ content }: { content: ContentCreateRedis }) => {
     const { title, description, styles: stylesCss, links } = content
     // @ts-ignore
@@ -205,22 +218,28 @@ const HomeHeader = ({ onAddInstance, direction, welcomePage = false }: Props) =>
     )
     return (
       <FeatureFlagComponent name={FeatureFlags.cloudSso} otherwise={promoLink}>
-        <EuiToolTip
-          position="bottom"
-          anchorClassName={styles.cloudSsoPromoBtnAnchor}
-          content={(
-            <div className={styles.cloudSsoPromoTooltip}>
-              <EuiIcon type={ConfettiIcon} className={styles.cloudSsoPromoTooltipIcon} />
-              <div>
-                New!
-                <br />
-                Now you can create a free Redis Stack database in Redis Enterprise Cloud in a few clicks.
+        <HighlightedFeature
+          isHighlight={cloudButtonHighlighting}
+          type={BUILD_FEATURES?.cloudButton?.type}
+          onClick={() => dispatch(removeFeatureFromHighlighting('cloudButton'))}
+        >
+          <EuiToolTip
+            position="bottom"
+            anchorClassName={styles.cloudSsoPromoBtnAnchor}
+            content={(
+              <div className={styles.cloudSsoPromoTooltip}>
+                <EuiIcon type={ConfettiIcon} className={styles.cloudSsoPromoTooltipIcon} />
+                <div>
+                  New!
+                  <br />
+                  Now you can create a free Redis Stack database in Redis Enterprise Cloud in a few clicks.
+                </div>
               </div>
-            </div>
           )}
-        >
-          {promoLink}
-        </EuiToolTip>
+          >
+            {promoLink}
+          </EuiToolTip>
+        </HighlightedFeature>
       </FeatureFlagComponent>
     )
   }

redisinsight/ui/src/pages/home/components/HomeHeader/styles.module.scss

@@ -169,7 +169,7 @@
 .cloudSsoPromoBtnAnchor {
   position: relative;
   display: flex !important;
-  width: 260px;
+  max-width: 348px;
 }
 .cloudSsoPromoTooltip {
   display: flex;