feat(feedback): Change "Report a problem" link to open feedback modal

Changes the "Report a problem" link to open feedback modal (when Sentry SDK is loaded). Otherwise will preserve previous behavior of opening link to GH issue.
getsentry · Sep 19, 2023 · f59701c · f59701c
1 parent f84f57a
commit f59701c
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 6 deletions.
diff --git a/src/components/githubCta.tsx b/src/components/githubCta.tsx
@@ -1,5 +1,6 @@
-import React from 'react';
+import React, {Fragment} from 'react';
 
+import {FeedbackModal} from './feedback/feedbackModal';
 import {SmartLink} from './smartLink';
 
 type GitHubCTAProps = {
@@ -27,9 +28,26 @@ export function GitHubCTA({sourceInstanceName, relativePath}: GitHubCTAProps) {
             Contribute to Docs
           </SmartLink>{' '}
           &nbsp;&nbsp;|&nbsp;&nbsp;
-          <SmartLink to="https://github.com/getsentry/sentry-docs/issues/new/choose">
-            Report a problem
-          </SmartLink>{' '}
+          <FeedbackModal title="Report a Problem">
+            {({showModal}) => (
+              <Fragment>
+                <SmartLink
+                  to="https://github.com/getsentry/sentry-docs/issues/new/choose"
+                  onClick={e => {
+                    if (window.Sentry?.getCurrentHub?.()) {
+                      // Only Stop event propagation if Sentry SDK is loaded
+                      // (i.e. feedback is supported), otherwise will send you to github
+                      e.preventDefault();
+                      showModal();
+                      return false;
+                    }
+                  }}
+                >
+                  Report a problem
+                </SmartLink>{' '}
+              </Fragment>
+            )}
+          </FeedbackModal>
         </div>
       </small>
     </div>

diff --git a/src/components/smartLink.tsx b/src/components/smartLink.tsx
@@ -5,7 +5,7 @@ import {marketingUrlParams} from 'sentry-docs/utils';
 
 import {ExternalLink} from './externalLink';
 
-type Props = {
+interface Props extends Omit<React.ComponentProps<typeof Link>, 'to'> {
   activeClassName?: string;
   children?: React.ReactNode;
   className?: string;
@@ -15,7 +15,7 @@ type Props = {
   target?: string;
   title?: string;
   to?: string;
-};
+}
 
 export function SmartLink({
   to,