#RI-4982 - remove highlighting

Author: rsergeenko

redisinsight/ui/src/constants/featuresHighlighting.tsx

@@ -12,7 +12,5 @@ interface BuildHighlightingFeature {
 }
 
 export const BUILD_FEATURES: Record<string, BuildHighlightingFeature> = {
-  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 { useDispatch, useSelector } from 'react-redux'
+import { useSelector } from 'react-redux'
 import cx from 'classnames'
 import { FeatureFlagComponent, ImportDatabasesDialog, OAuthSsoHandlerDialog } from 'uiSrc/components'
 import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
@@ -25,10 +25,7 @@ import { OAuthSocialSource } from 'uiSrc/slices/interfaces'
 import { FeatureFlags } from 'uiSrc/constants'
 import { ReactComponent as ConfettiIcon } from 'uiSrc/assets/img/oauth/confetti.svg'
 import { getContentByFeature } from 'uiSrc/utils/content'
-import HighlightedFeature from 'uiSrc/components/hightlighted-feature/HighlightedFeature'
-import { appFeatureFlagsFeaturesSelector, appFeatureHighlightingSelector, removeFeatureFromHighlighting } from 'uiSrc/slices/app/features'
-import { getHighlightingFeatures } from 'uiSrc/utils/highlighting'
-import { BUILD_FEATURES } from 'uiSrc/constants/featuresHighlighting'
+import { appFeatureFlagsFeaturesSelector } from 'uiSrc/slices/app/features'
 import SearchDatabasesList from '../SearchDatabasesList'
 
 import styles from './styles.module.scss'
@@ -46,15 +43,11 @@ const HomeHeader = ({ onAddInstance, direction }: Props) => {
   const { data: instances } = useSelector(instancesSelector)
   const featureFlags = useSelector(appFeatureFlagsFeaturesSelector)
   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()
-
   useEffect(() => {
     if (loading || !data || isEmpty(data)) {
       return
@@ -183,7 +176,7 @@ const HomeHeader = ({ onAddInstance, direction }: Props) => {
     const { title, description, styles: stylesCss, links } = content
     // @ts-ignore
     const linkStyles = stylesCss ? stylesCss[theme] : {}
-    const promoLink = (
+    return (
       <OAuthSsoHandlerDialog>
         {(ssoCloudHandlerClick, isSSOEnabled) => (
           <PromoLink
@@ -209,32 +202,6 @@ const HomeHeader = ({ onAddInstance, direction }: Props) => {
         )}
       </OAuthSsoHandlerDialog>
     )
-    return (
-      <FeatureFlagComponent name={FeatureFlags.cloudSso} otherwise={promoLink}>
-        <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>
-          )}
-          >
-            {promoLink}
-          </EuiToolTip>
-        </HighlightedFeature>
-      </FeatureFlagComponent>
-    )
   }
 
   return (

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

@@ -138,11 +138,6 @@
   }
 }
 
-.cloudSsoPromoBtnAnchor {
-  position: relative;
-  display: flex !important;
-  max-width: 348px;
-}
 .cloudSsoPromoTooltip {
   display: flex;
   flex-direction: row;