feat(ddm): Use github feedback components

static/app/components/githubFeedbackButton.spec.tsx

@@ -0,0 +1,26 @@
+import {render, screen, userEvent} from 'sentry-test/reactTestingLibrary';
+
+import {GithubFeedbackButton} from 'sentry/components/githubFeedbackButton';
+
+describe('GithubFeedbackButton', function () {
+ it('renders', async function () {
+ render(
+ <GithubFeedbackButton href="https://example.com/my-test-url">
+ My button label
+ </GithubFeedbackButton>
+ );
+
+ const anchor = screen.getByRole<HTMLAnchorElement>('button', {
+ name: 'My button label',
+ });
+
+ // Renders a link with given href
+ expect(anchor).toBeInTheDocument();
+ expect(anchor.tagName).toBe('A');
+ expect(anchor.href).toBe('https://example.com/my-test-url');
+
+ // Renders tooltip
+ await userEvent.hover(anchor);
+ expect(await screen.findByText('Give us feedback on GitHub')).toBeInTheDocument();
+ });
+});

static/app/components/githubFeedbackButton.tsx

@@ -0,0 +1,16 @@
+import {LinkButton, LinkButtonProps} from 'sentry/components/button';
+import {Tooltip} from 'sentry/components/tooltip';
+import {IconGithub} from 'sentry/icons';
+import {t} from 'sentry/locale';
+
+type GithubFeedbackButtonProps = LinkButtonProps & {href: string};
+
+const title = t('Give us feedback on GitHub');
+
+export function GithubFeedbackButton(props: GithubFeedbackButtonProps) {
+ return (
+ <Tooltip title={title}>
+ <LinkButton size="sm" external icon={<IconGithub />} {...props} />
+ </Tooltip>
+ );
+}

static/app/components/githubFeedbackTooltip.spec.tsx

@@ -0,0 +1,27 @@
+import {render, screen, userEvent} from 'sentry-test/reactTestingLibrary';
+
+import {GithubFeedbackTooltip} from 'sentry/components/githubFeedbackTooltip';
+
+describe('GithubFeedbackTooltip', function () {
+ it('renders', async function () {
+ render(
+ <GithubFeedbackTooltip
+ title="My custom title text"
+ href="https://example.com/my-test-url"
+ >
+ <span data-test-id="anchor" />
+ </GithubFeedbackTooltip>
+ );
+
+ const anchor = screen.getByTestId('anchor');
+ await userEvent.hover(anchor);
+
+ // Renders custom title text
+ expect(await screen.findByText('My custom title text')).toBeInTheDocument();
+
+ // Renders link with given href
+ const link = screen.getByRole<HTMLAnchorElement>('link', {name: 'GitHub'});
+ expect(link).toBeInTheDocument();
+ expect(link.href).toBe('https://example.com/my-test-url');
+ });
+});

static/app/components/githubFeedbackTooltip.tsx

@@ -0,0 +1,56 @@
+import {Fragment} from 'react';
+import styled from '@emotion/styled';
+
+import ExternalLink from 'sentry/components/links/externalLink';
+import {Tooltip, TooltipProps} from 'sentry/components/tooltip';
+import {IconGithub} from 'sentry/icons';
+import {tct} from 'sentry/locale';
+import {space} from 'sentry/styles/space';
+
+type GithubFeedbackTooltipProps = TooltipProps & {
+ href: string;
+ title?: React.ReactNode;
+};
+
+export function GithubFeedbackTooltip({
+ href,
+ title,
+ ...props
+}: GithubFeedbackTooltipProps) {
+ return (
+ <Tooltip
+ isHoverable
+ title={
+ <Fragment>
+ {title}
+ <FeedbackLine hasTitle={!!title}>
+ {tct('Give us feedback on [githubLink]', {
+ githubLink: (
+ <GithubLink href={href}>
+ GitHub <IconGithub size="xs" />
+ </GithubLink>
+ ),
+ })}
+ </FeedbackLine>
+ </Fragment>
+ }
+ {...props}
+ />
+ );
+}
+
+const FeedbackLine = styled('div')<{hasTitle: boolean}>`
+ ${p => p.hasTitle && `padding-top: ${space(1)};`}
+`;
+
+const GithubLink = styled(ExternalLink)`
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ gap: ${space(0.5)};
+ line-height: 0px;
+
+ & > svg {
+ margin-top: -1px;
+ }
+`;

static/app/views/ddm/ddm.tsx

@@ -3,15 +3,16 @@ import styled from '@emotion/styled';
 import ButtonBar from 'sentry/components/buttonBar';
 import EnvironmentPageFilter from 'sentry/components/environmentPageFilter';
 import FeatureBadge from 'sentry/components/featureBadge';
-import {FeatureFeedback} from 'sentry/components/featureFeedback';
+import {GithubFeedbackButton} from 'sentry/components/githubFeedbackButton';
+import {GithubFeedbackTooltip} from 'sentry/components/githubFeedbackTooltip';
 import * as Layout from 'sentry/components/layouts/thirds';
 import {DatePageFilter} from 'sentry/components/organizations/datePageFilter';
 import PageFilterBar from 'sentry/components/organizations/pageFilterBar';
 import PageFiltersContainer from 'sentry/components/organizations/pageFilters/container';
 import {ProjectPageFilter} from 'sentry/components/organizations/projectPageFilter';
 import {PageHeadingQuestionTooltip} from 'sentry/components/pageHeadingQuestionTooltip';
 import SentryDocumentTitle from 'sentry/components/sentryDocumentTitle';
-import {t} from 'sentry/locale';
+import {t, tct} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 import useOrganization from 'sentry/utils/useOrganization';
 import {ScratchpadSelector} from 'sentry/views/ddm/metricScratchpad';
@@ -27,7 +28,15 @@ function DDM() {
  <Layout.Header>
  <Layout.HeaderContent>
  <Layout.Title>
- {t('DDM')}
+ <GithubFeedbackTooltip
+ href="https://github.com/getsentry/sentry/discussions/54956"
+ title={tct(
+ "[strong:Delightful Developer Metrics] is our new awesome feature that let's you easily explore your data.",
+ {strong: <strong />}
+ )}
+ >
+ <span>{t('DDM')}</span>
+ </GithubFeedbackTooltip>
  <PageHeadingQuestionTooltip
  docsUrl="https://docs.sentry.io"
  title={t('Delightful Developer Metrics.')}
@@ -37,7 +46,9 @@ function DDM() {
  </Layout.HeaderContent>
  <Layout.HeaderActions>
  <ButtonBar gap={1}>
- <FeatureFeedback featureName="DDM" buttonProps={{size: 'sm'}} />
+ <GithubFeedbackButton href="https://github.com/getsentry/sentry/discussions/54956">
+ Give Feedback
+ </GithubFeedbackButton>
  </ButtonBar>
  </Layout.HeaderActions>
  </Layout.Header>