[HackWeek 2023] feat: Experimental User Feedback: Feedback button and attaching screenshot

gatsby-browser.tsx

@@ -1,12 +1,33 @@
-import React from 'react';
+import React, {useEffect} from 'react';
 import {GatsbyBrowser} from 'gatsby';
 
+import {CodeContextProvider} from 'sentry-docs/components/codeContext';
+import {FeebdackWidget} from 'sentry-docs/components/feedbackWidget';
 import PageContext from 'sentry-docs/components/pageContext';
 
 export const wrapPageElement: GatsbyBrowser['wrapPageElement'] = ({
   element,
   props: {pageContext},
-}) => <PageContext.Provider value={pageContext}>{element}</PageContext.Provider>;
+}) => {
+  useEffect(() => {
+    const codeBlock = document.querySelector<HTMLDivElement>('.code-tabs-wrapper');
+    if (!codeBlock) {
+      return;
+    }
+    codeBlock.style.position = 'relative';
+    codeBlock.style.right = '-74px';
+  });
+  return (
+    <React.Fragment>
+      {/* FIXME: we're duplicating CodeContextProvider, which is not nice.
+      Ideally, FeedbackWidget is a child of the existing CodeContextProvider. */}
+      <CodeContextProvider>
+        <FeebdackWidget />
+      </CodeContextProvider>
+      <PageContext.Provider value={pageContext}>{element}</PageContext.Provider>
+    </React.Fragment>
+  );
+};
 
 // Disable prefetching altogether so our bw is not destroyed.
 // If this turns out to hurt performance significantly, we can

src/components/codeContext.tsx

@@ -18,6 +18,7 @@ type ProjectCodeKeywords = {
 };
 
 type UserCodeKeywords = {
+  EMAIL: string;
   ID: number;
   NAME: string;
 };
@@ -51,6 +52,7 @@ type ProjectApiResult = {
 
 type UserApiResult = {
   avatarUrl: string;
+  email: string;
   id: number;
   isAuthenticated: boolean;
   name: string;
@@ -131,7 +133,7 @@ export async function fetchCodeKeywords(): Promise<CodeKeywords> {
 
   const url =
     process.env.NODE_ENV === 'development'
-      ? 'http://dev.getsentry.net:8000/docs/api/user/'
+      ? 'http://dev.getsentry.net:8000/api/0/auth-details/'
       : 'https://sentry.io/docs/api/user/';
 
   const makeDefaults = () => {
@@ -185,6 +187,7 @@ export async function fetchCodeKeywords(): Promise<CodeKeywords> {
       ? {
           ID: user.id,
           NAME: user.name,
+          EMAIL: user.email,
         }
       : undefined,
   };

src/components/feedbackButton.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import styled from '@emotion/styled';
+
+const Button = styled.button`
+  position: fixed;
+  right: 0px;
+  bottom: 50%;
+  transform: translate(25%, 50%) rotate(-90deg);
+  background-color: #fff;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  color: #231c3d;
+  cursor: pointer;
+  font-size: 14px;
+  font-weight: 600;
+  padding: 6px 16px;
+  text-align: center;
+  text-decoration: none;
+  z-index: 9000;
+  &:hover {
+    background-color: #eee;
+  }
+  &:focus-visible {
+    outline: 1px solid #79628c;
+    background-color: #eee;
+  }
+`;
+
+export function FeebdackButton(props) {
+  return <Button {...props}>Feedback</Button>;
+}