From 288f15b420e33102733b03c7b458c40a5bcd455f Mon Sep 17 00:00:00 2001 From: MichaelSun48 Date: Thu, 22 May 2025 15:07:50 -0700 Subject: [PATCH 1/3] Create new style option for PowerFeatureHovercard --- .../components/powerFeatureHovercard.tsx | 37 ++++++++++++++++++- static/gsApp/registerHooks.tsx | 6 ++- 2 files changed, 40 insertions(+), 3 deletions(-) diff --git a/static/gsApp/components/powerFeatureHovercard.tsx b/static/gsApp/components/powerFeatureHovercard.tsx index 623d3ce7c62a13..a3afc5c145d676 100644 --- a/static/gsApp/components/powerFeatureHovercard.tsx +++ b/static/gsApp/components/powerFeatureHovercard.tsx @@ -4,6 +4,7 @@ import styled from '@emotion/styled'; import {Button} from 'sentry/components/core/button'; import {Hovercard} from 'sentry/components/hovercard'; import {t} from 'sentry/locale'; +import {space} from 'sentry/styles/space'; import type {Organization} from 'sentry/types/organization'; import withOrganization from 'sentry/utils/withOrganization'; @@ -46,6 +47,12 @@ type Props = { partial?: boolean; upsellDefaultSelection?: string; + + /** + * Replaces the default learn more button with a more subtle link text that + * opens the upsell modal. + */ + useLearnMoreLink?: boolean; }; class PowerFeatureHovercard extends Component { @@ -79,6 +86,7 @@ class PowerFeatureHovercard extends Component { partial, features, children, + useLearnMoreLink, } = this.props; const hoverBody = ( @@ -90,7 +98,18 @@ class PowerFeatureHovercard extends Component { planName = `Performance ${planName}`; } - return ( + return useLearnMoreLink ? ( + +
+ {partial + ? t('Better With %s Plan', planName) + : t('Requires %s Plan', planName)} +
+ + {t('Learn More')} + + + ) : ( {partial @@ -126,6 +145,20 @@ class PowerFeatureHovercard extends Component { } } +const LearnMoreLink = styled('a')` + color: ${p => p.theme.subText}; + text-decoration: underline; + + &:hover { + color: ${p => p.theme.subText}; + text-decoration: none; + } +`; + +const LearnMoreTextBody = styled('div')` + padding: ${space(1)}; +`; + const UpsellModalButton = styled(Button)` height: auto; border-radius: 0 ${p => p.theme.borderRadius} ${p => p.theme.borderRadius} 0; @@ -150,7 +183,7 @@ const StyledHovercard = styled(Hovercard)` } `; -const Text = styled('span')` +const Text = styled('div')` margin: 10px; font-size: 14px; white-space: pre; diff --git a/static/gsApp/registerHooks.tsx b/static/gsApp/registerHooks.tsx index 7627b367caf638..0736281f784ec2 100644 --- a/static/gsApp/registerHooks.tsx +++ b/static/gsApp/registerHooks.tsx @@ -351,7 +351,11 @@ const GETSENTRY_HOOKS: Partial = { ), 'feature-disabled:open-in-discover': p => , 'feature-disabled:issue-views': p => ( - + {typeof p.children === 'function' ? p.children(p) : p.children} ), From 09a346321b40b331076f70fc7149d65a9a492a85 Mon Sep 17 00:00:00 2001 From: MichaelSun48 Date: Sat, 24 May 2025 22:01:09 -0700 Subject: [PATCH 2/3] Apply linkstyles instead of anchor tag --- static/gsApp/components/powerFeatureHovercard.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/static/gsApp/components/powerFeatureHovercard.tsx b/static/gsApp/components/powerFeatureHovercard.tsx index a3afc5c145d676..67b0ff791b9d7d 100644 --- a/static/gsApp/components/powerFeatureHovercard.tsx +++ b/static/gsApp/components/powerFeatureHovercard.tsx @@ -3,6 +3,7 @@ import styled from '@emotion/styled'; import {Button} from 'sentry/components/core/button'; import {Hovercard} from 'sentry/components/hovercard'; +import {linkStyles} from 'sentry/components/links/link'; import {t} from 'sentry/locale'; import {space} from 'sentry/styles/space'; import type {Organization} from 'sentry/types/organization'; @@ -145,7 +146,9 @@ class PowerFeatureHovercard extends Component { } } -const LearnMoreLink = styled('a')` +const LearnMoreLink = styled('div')` + ${p => linkStyles({theme: p.theme})} + color: ${p => p.theme.subText}; text-decoration: underline; From bf371e5405cb21f1647d5b98b3bf1c7ed5523d29 Mon Sep 17 00:00:00 2001 From: MichaelSun48 Date: Sat, 24 May 2025 22:03:28 -0700 Subject: [PATCH 3/3] Make link default over button --- .../components/powerFeatureHovercard.tsx | 41 +------------------ 1 file changed, 1 insertion(+), 40 deletions(-) diff --git a/static/gsApp/components/powerFeatureHovercard.tsx b/static/gsApp/components/powerFeatureHovercard.tsx index 67b0ff791b9d7d..2adf0475663566 100644 --- a/static/gsApp/components/powerFeatureHovercard.tsx +++ b/static/gsApp/components/powerFeatureHovercard.tsx @@ -1,7 +1,6 @@ import {Component} from 'react'; import styled from '@emotion/styled'; -import {Button} from 'sentry/components/core/button'; import {Hovercard} from 'sentry/components/hovercard'; import {linkStyles} from 'sentry/components/links/link'; import {t} from 'sentry/locale'; @@ -87,7 +86,6 @@ class PowerFeatureHovercard extends Component { partial, features, children, - useLearnMoreLink, } = this.props; const hoverBody = ( @@ -99,7 +97,7 @@ class PowerFeatureHovercard extends Component { planName = `Performance ${planName}`; } - return useLearnMoreLink ? ( + return (
{partial @@ -110,22 +108,6 @@ class PowerFeatureHovercard extends Component { {t('Learn More')} - ) : ( - - - {partial - ? t('Better With %s Plan', planName) - : t('Requires %s Plan', planName)} - - - {t('Learn More')} - - ); }} @@ -162,21 +144,6 @@ const LearnMoreTextBody = styled('div')` padding: ${space(1)}; `; -const UpsellModalButton = styled(Button)` - height: auto; - border-radius: 0 ${p => p.theme.borderRadius} ${p => p.theme.borderRadius} 0; - white-space: pre; - margin-top: -1px; - margin-bottom: -1px; - margin-right: -1px; - box-shadow: none; -`; - -const HovercardBody = styled('div')` - display: flex; - justify-content: space-between; -`; - const StyledHovercard = styled(Hovercard)` width: auto; border-radius: ${p => p.theme.borderRadius}; @@ -186,12 +153,6 @@ const StyledHovercard = styled(Hovercard)` } `; -const Text = styled('div')` - margin: 10px; - font-size: 14px; - white-space: pre; -`; - export default withOrganization( withSubscription(PowerFeatureHovercard, {noLoader: true}) );