From c7fd4c66b42190ebaab785d048618e47869e02bd Mon Sep 17 00:00:00 2001
From: Billy Vong <billyvg@users.noreply.github.com>
Date: Wed, 20 Sep 2023 13:07:18 -0400
Subject: [PATCH] feat(feedback): Change "Report a problem" link to open
 feedback modal (#7878)

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.
---
 src/components/githubCta.tsx | 28 ++++++++++++++++++++++++----
 src/components/smartLink.tsx |  5 +++--
 2 files changed, 27 insertions(+), 6 deletions(-)

diff --git a/src/components/githubCta.tsx b/src/components/githubCta.tsx
index fd30a99cb3555..adc0ec6ed1ac7 100644
--- 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,28 @@ 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?.()) {
+                      return true;
+                    }
+
+                    // 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
index edd5e9387c86f..f1924fffae318 100644
--- a/src/components/smartLink.tsx
+++ b/src/components/smartLink.tsx
@@ -5,17 +5,18 @@ import {marketingUrlParams} from 'sentry-docs/utils';
 
 import {ExternalLink} from './externalLink';
 
-type Props = {
+interface Props {
   activeClassName?: string;
   children?: React.ReactNode;
   className?: string;
   href?: string;
   isActive?: boolean;
+  onClick?: (e: React.MouseEvent) => void;
   remote?: boolean;
   target?: string;
   title?: string;
   to?: string;
-};
+}
 
 export function SmartLink({
   to,