feat: sentry feedback form (#388)

src/components/Feedback.tsx

@@ -0,0 +1,95 @@
+import { ReactElement, useEffect, useState } from 'react'
+import * as Sentry from '@sentry/react'
+import { Link } from '@material-ui/core'
+import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
+import { MessageSquare } from 'react-feather'
+
+import config from '../config'
+import SideBarItem from './SideBarItem'
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    link: {
+      color: '#9f9f9f',
+      textDecoration: 'none',
+      '&:hover': {
+        textDecoration: 'none',
+
+        // https://github.com/mui-org/material-ui/issues/22543
+        '@media (hover: none)': {
+          textDecoration: 'none',
+        },
+      },
+    },
+
+    icon: {
+      height: theme.spacing(4),
+    },
+  }),
+)
+
+/**
+ * Parses Sentry DNS so it could be transformed into API call
+ * Sentry DNS like https://1asfasdf2312asdf3@o132123.ingest.sentry.io/13123123
+ */
+const SENTRY_PARSING_REGEX = /^https:\/\/(?<key>\w+)@(?<sub>\w+)\.ingest\.sentry\.io\/(?<path>\d+)$/gm
+
+async function isSentryReachable(): Promise<boolean> {
+  const key = config.SENTRY_KEY
+
+  if (!key) {
+    return false
+  }
+
+  const match = SENTRY_PARSING_REGEX.exec(key)
+
+  if (!match) {
+    return false
+  }
+
+  const url = `https://${match.groups?.sub}.ingest.sentry.io/api/${match.groups?.path}/envelope/?sentry_key=${match.groups?.key}`
+
+  try {
+    await fetch(url, { method: 'POST' })
+
+    // Since we got some reply (even though most probably with some error) that means Sentry is reachable ==> lets provide the Feedback form
+    return true
+  } catch (e) {
+    // If an error was thrown than the request was blocked by the browser so Sentry is not accessible to us
+    return false
+  }
+}
+
+function showFeedbackForm(): void {
+  const eventId = Sentry.captureMessage('User feedback')
+  Sentry.showReportDialog({
+    eventId,
+    title: 'Provide us feedback!',
+    subtitle: 'Share with us what you like and/or dislike.',
+    subtitle2: 'We will be very happy.',
+    labelComments: 'What is your impression about this app?',
+    labelSubmit: 'Send Feedback',
+  })
+}
+
+export default function Feedback(): ReactElement {
+  const [sentryEnabled, setSentryEnabled] = useState(false)
+  const classes = useStyles()
+
+  // Run this only on component mount to verify once that Sentry is reachable
+  useEffect(() => {
+    isSentryReachable().then(result => {
+      setSentryEnabled(result)
+    })
+  }, [])
+
+  if (sentryEnabled) {
+    return (
+      <Link onClick={showFeedbackForm} className={classes.link}>
+        <SideBarItem iconStart={<MessageSquare className={classes.icon} />} label={<span>Send feedback</span>} />
+      </Link>
+    )
+  }
+
+  return <></>
+}

src/components/SideBar.tsx

@@ -11,6 +11,7 @@ import { Context } from '../providers/Bee'
 import { ROUTES } from '../routes'
 import SideBarItem from './SideBarItem'
 import SideBarStatus from './SideBarStatus'
+import Feedback from './Feedback'
 
 const navBarItems = [
   {
@@ -60,6 +61,7 @@ const useStyles = makeStyles((theme: Theme) =>
     drawerPaper: {
       width: drawerWidth,
       backgroundColor: '#212121',
+      zIndex: 988,
     },
     logo: {
       marginLeft: theme.spacing(8),
@@ -131,9 +133,12 @@ export default function SideBar(): ReactElement {
           </List>
         </Grid>
         <Grid>
-          <Link to={ROUTES.STATUS} className={classes.link}>
-            <SideBarStatus path={ROUTES.STATUS} />
-          </Link>
+          <List>
+            <Link to={ROUTES.STATUS} className={classes.link}>
+              <SideBarStatus path={ROUTES.STATUS} />
+            </Link>
+            <Feedback />
+          </List>
         </Grid>
       </Grid>
     </Drawer>