add browser to feedback form (codesandbox#3723)

* add browser to feedback form

* use includes instead

Author: SaraVieira

packages/app/src/app/overmind/utils/pushToAirtable.ts

@@ -5,6 +5,7 @@ export default async ({
   username,
   email,
   version,
+  browser,
 }) => {
   const Airtable = await import(
     /* webpackChunkName: 'airtable' */ './setAirtable'
@@ -21,6 +22,7 @@ export default async ({
         email,
         url: window.location.pathname,
         version,
+        browser,
       },
       err => {
         if (err) {

packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Zeit/Deploys/Deploys.tsx

@@ -1,4 +1,4 @@
-import distanceInWordsToNow from 'date-fns/distance_in_words_to_now';
+import formatDistanceToNow from 'date-fns/formatDistanceToNow';
 import React, { FunctionComponent } from 'react';
 
 import { useOvermind } from 'app/overmind';
@@ -37,7 +37,7 @@ export const Deploys: FunctionComponent = () => {
               <Name>
                 {deploy.name}
 
-                <span>{`(${distanceInWordsToNow(deploy.created)} ago)`}</span>
+                <span>{`(${formatDistanceToNow(deploy.created)} ago)`}</span>
               </Name>
 
               <State state={deploy.state}>

packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Deployment/Zeit.tsx

@@ -10,7 +10,7 @@ import {
   ListItem,
   List,
 } from '@codesandbox/components';
-import distanceInWordsToNow from 'date-fns/distance_in_words_to_now';
+import formatDistanceToNow from 'date-fns/formatDistanceToNow';
 import { useOvermind } from 'app/overmind';
 import { ZeitIcon, VisitIcon, TrashIcon } from './icons';
 import { State } from './elements';
@@ -57,7 +57,7 @@ export const Zeit = () => {
                         {deploy.state.toString().toLowerCase()}
                       </State>
                       <Text variant="muted" marginLeft={2}>
-                        {`(${distanceInWordsToNow(deploy.created)} ago)`}
+                        {`(${formatDistanceToNow(deploy.created)} ago)`}
                       </Text>
                     </ListItem>
                     <ListAction

packages/app/src/app/pages/common/Modals/FeedbackModal/Feedback.tsx

@@ -17,7 +17,7 @@ import React, {
   FunctionComponent,
   useState,
 } from 'react';
-
+import { browser } from './getBrowser';
 import { Alert } from '../Common/Alert';
 
 type Props = {
@@ -56,6 +56,7 @@ const Feedback: FunctionComponent<Props> = ({ id, user }) => {
       username: (user || {}).username,
       email,
       version: VERSION,
+      browser: browser(),
     })
       .then(() => {
         setEmoji(null);

packages/app/src/app/pages/common/Modals/FeedbackModal/getBrowser.ts

@@ -0,0 +1,25 @@
+export const browser = () => {
+  const agent = window.navigator.userAgent.toLowerCase();
+  switch (true) {
+    case agent.includes('edge'):
+      return 'edge';
+    case agent.includes('edg'):
+      return 'chromium based edge (dev or canary)';
+    // @ts-ignore
+    case agent.includes('opr') && !!window.opr:
+      return 'opera';
+    // @ts-ignore
+    case agent.includes('chrome') && !!window.chrome:
+      return 'chrome';
+    case agent.includes('trident'):
+      return 'ie';
+    case agent.includes('firefox'):
+      return 'firefox';
+    case agent.includes('brave'):
+      return 'brave';
+    case agent.includes('safari'):
+      return 'safari';
+    default:
+      return 'other';
+  }
+};