Просмотр исходного кода

feat(feedback): Add an info tooltip to the top of the Feedback page (#61305)

<img width="591" alt="SCR-20231206-mepc"
src="https://github.com/getsentry/sentry/assets/187460/2cb0645c-b454-442c-aa59-b2089861087f">
Ryan Albrecht 1 год назад
Родитель
Сommit
5f2630af18

+ 28 - 16
static/app/components/feedback/oldFeedbackButton.tsx

@@ -1,5 +1,7 @@
 import {LinkButton} from 'sentry/components/button';
-import {t} from 'sentry/locale';
+import ExternalLink from 'sentry/components/links/externalLink';
+import {Tooltip} from 'sentry/components/tooltip';
+import {t, tct} from 'sentry/locale';
 import {useLocation} from 'sentry/utils/useLocation';
 import useOrganization from 'sentry/utils/useOrganization';
 import {normalizeUrl} from 'sentry/utils/withDomainRequired';
@@ -9,21 +11,31 @@ export default function OldFeedbackButton() {
   const organization = useOrganization();
 
   return (
-    <LinkButton
-      analyticsEventName="Clicked Go To Old User Feedback Button"
-      analyticsEventKey="feedback.index-old-ui-clicked"
-      size="sm"
-      priority="default"
-      to={{
-        pathname: normalizeUrl(`/organizations/${organization.slug}/user-feedback/`),
-        query: {
-          ...location.query,
-          query: undefined,
-          cursor: undefined,
-        },
-      }}
+    <Tooltip
+      title={tct('View [link:error-associated feedback reports].', {
+        link: (
+          <ExternalLink href="https://docs.sentry.io/product/user-feedback/#crash-report-modal" />
+        ),
+      })}
+      position="left"
+      isHoverable
     >
-      {t('Go to Old User Feedback')}
-    </LinkButton>
+      <LinkButton
+        analyticsEventName="Clicked Go To Old User Feedback Button"
+        analyticsEventKey="feedback.index-old-ui-clicked"
+        size="sm"
+        priority="default"
+        to={{
+          pathname: normalizeUrl(`/organizations/${organization.slug}/user-feedback/`),
+          query: {
+            ...location.query,
+            query: undefined,
+            cursor: undefined,
+          },
+        }}
+      >
+        {t('Go to Old User Feedback')}
+      </LinkButton>
+    </Tooltip>
   );
 }

+ 12 - 15
static/app/views/feedback/feedbackListPage.tsx

@@ -14,11 +14,10 @@ import {FeedbackQueryKeys} from 'sentry/components/feedback/useFeedbackQueryKeys
 import useHaveSelectedProjectsSetupFeedback from 'sentry/components/feedback/useHaveSelectedProjectsSetupFeedback';
 import FullViewport from 'sentry/components/layouts/fullViewport';
 import * as Layout from 'sentry/components/layouts/thirds';
-import ExternalLink from 'sentry/components/links/externalLink';
 import PageFiltersContainer from 'sentry/components/organizations/pageFilters/container';
+import {PageHeadingQuestionTooltip} from 'sentry/components/pageHeadingQuestionTooltip';
 import SentryDocumentTitle from 'sentry/components/sentryDocumentTitle';
-import {Tooltip} from 'sentry/components/tooltip';
-import {t, tct} from 'sentry/locale';
+import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 import useOrganization from 'sentry/utils/useOrganization';
 import FluidHeight from 'sentry/views/replays/detail/layout/fluidHeight';
@@ -38,20 +37,18 @@ export default function FeedbackListPage({}: Props) {
         <FeedbackQueryKeys organization={organization}>
           <Layout.Header>
             <Layout.HeaderContent>
-              <Layout.Title>{t('User Feedback')}</Layout.Title>
+              <Layout.Title>
+                {t('User Feedback')}
+                <PageHeadingQuestionTooltip
+                  title={t(
+                    'The User Feedback Widget allows users to submit feedback quickly and easily any time they encounter something that isn’t working as expected.'
+                  )}
+                  docsUrl="https://docs.sentry.io/product/user-feedback/"
+                />
+              </Layout.Title>
             </Layout.HeaderContent>
             <Layout.HeaderActions>
-              <Tooltip
-                title={tct('View [link:error-associated feedback reports].', {
-                  link: (
-                    <ExternalLink href="https://docs.sentry.io/product/user-feedback/" />
-                  ),
-                })}
-                position="left"
-                isHoverable
-              >
-                <OldFeedbackButton />
-              </Tooltip>
+              <OldFeedbackButton />
             </Layout.HeaderActions>
           </Layout.Header>
           <PageFiltersContainer>