Skip to content

chore(issue-views): Create new style option for PowerFeatureHovercard #92168

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

chore(issue-views): Create new style option for PowerFeatureHovercard #92168

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
37 changes: 35 additions & 2 deletions static/gsApp/components/powerFeatureHovercard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down Expand Up @@ -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;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we need to make this an option? Probably better to keep it consistent and change all tooltips to use the link

};

class PowerFeatureHovercard extends Component<Props> {
Expand Down Expand Up @@ -79,6 +86,7 @@ class PowerFeatureHovercard extends Component<Props> {
partial,
features,
children,
useLearnMoreLink,
} = this.props;

const hoverBody = (
Expand All @@ -90,7 +98,18 @@ class PowerFeatureHovercard extends Component<Props> {
planName = `Performance ${planName}`;
}

return (
return useLearnMoreLink ? (
<LearnMoreTextBody data-test-id="power-hovercard">
<div>
{partial
? t('Better With %s Plan', planName)
: t('Requires %s Plan', planName)}
</div>
<LearnMoreLink onClick={this.handleClick} data-test-id="power-learn-more">
Copy link
Member

@malwilley malwilley May 22, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Shouldn't use an anchor tag without an href. You can make a button look like a link by importing linkStyles

{t('Learn More')}
</LearnMoreLink>
</LearnMoreTextBody>
) : (
<HovercardBody data-test-id="power-hovercard">
<Text>
{partial
Expand Down Expand Up @@ -126,6 +145,20 @@ class PowerFeatureHovercard extends Component<Props> {
}
}

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;
Expand All @@ -150,7 +183,7 @@ const StyledHovercard = styled(Hovercard)`
}
`;

const Text = styled('span')`
const Text = styled('div')`
margin: 10px;
font-size: 14px;
white-space: pre;
Expand Down
6 changes: 5 additions & 1 deletion static/gsApp/registerHooks.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -351,7 +351,11 @@ const GETSENTRY_HOOKS: Partial<Hooks> = {
),
'feature-disabled:open-in-discover': p => <OpenInDiscoverBtn {...p} />,
'feature-disabled:issue-views': p => (
<PowerFeatureHovercard features={['organizations:issue-views']} id="issue-views">
<PowerFeatureHovercard
features={['organizations:issue-views']}
id="issue-views"
useLearnMoreLink
>
{typeof p.children === 'function' ? p.children(p) : p.children}
</PowerFeatureHovercard>
),
Expand Down
Loading