PP-2254 Add intercom in live view

Summary:
we should have a help icon in the sidebar which opens up the messenger.
when the user runs into an error, we should have a link that opens up the intercom messenger.

Test Plan:
gifs:
{F103061}

{F103062}

{F103063}

Reviewers: zasgar, nick, nserrino, #engineering, vihang

Reviewed By: #engineering, vihang

Subscribers: vihang

Differential Revision: https://phab.corp.pixielabs.ai/D6729

GitOrigin-RevId: b7d733961824d061e34720b7ae1c39072fc4ec12

src/ui/src/common/errors-test.tsx

@@ -11,7 +11,7 @@ describe('<VizierErrorDetails/> test', () => {
       }
       />,
     );
-    expect(wrapper.find('div').text()).toBe('a well formated server error');
+    expect(wrapper.find('div').at(0).text()).toBe('a well formated server error');
   });
 
   it('renders a list of errors if the details is a list', () => {
@@ -21,7 +21,7 @@ describe('<VizierErrorDetails/> test', () => {
       }
       />,
     );
-    expect(wrapper.find('div').length).toBe(3);
+    expect(wrapper.find('div').length).toBe(4);
   });
 
   it('renders the message for other errors', () => {
@@ -31,6 +31,6 @@ describe('<VizierErrorDetails/> test', () => {
       }
       />,
     );
-    expect(wrapper.find('div').text()).toBe('generic error');
+    expect(wrapper.find('div').at(0).text()).toBe('generic error');
   });
 });

src/ui/src/common/errors.tsx

 import * as React from 'react';
 import { Status } from 'types/generated/vizier_pb';
 
+import Link from '@material-ui/core/Link';
 import { createStyles, makeStyles, Theme } from '@material-ui/core/styles';
 
 export type VizierQueryErrorType = 'script' | 'vis' | 'execution' | 'server';
@@ -57,6 +58,9 @@ const useStyles = makeStyles((theme: Theme) => createStyles({
     marginLeft: `-${theme.spacing(3.3)}px`,
     paddingBottom: theme.spacing(0.5),
   },
+  link: {
+    cursor: 'pointer',
+  },
 }));
 
 export const VizierErrorDetails = (props: { error: Error }) => {
@@ -64,17 +68,29 @@ export const VizierErrorDetails = (props: { error: Error }) => {
   const classes = useStyles();
   const { details } = error as VizierQueryError;
 
+  let errorDetails = null;
+
   if (typeof details === 'string') {
-    return <div className={classes.errorRow}>{details}</div>;
-  }
-  if (Array.isArray(details)) {
-    return (
+    errorDetails = <div className={classes.errorRow}>{details}</div>;
+  } else if (Array.isArray(details)) {
+    errorDetails = (
       <>
         {
           details.map((err, i) => <div key={i} className={classes.errorRow}>{err}</div>)
         }
       </>
     );
+  } else {
+    errorDetails = <div className={classes.errorRow}>{error.message}</div>;
   }
-  return <div className={classes.errorRow}>{error.message}</div>;
+  return (
+    <>
+      {errorDetails}
+      <div className={classes.errorRow}>
+        Need help?&nbsp;
+        <Link className={classes.link} id='intercom-trigger'>Chat with us</Link>
+        .
+      </div>
+    </>
+  );
 };

src/ui/src/containers/App/sidebar.tsx

@@ -8,6 +8,7 @@ import {
   createStyles, fade, WithStyles, withStyles, Theme,
 } from '@material-ui/core/styles';
 
+import HelpIcon from '@material-ui/icons/Help';
 import List from '@material-ui/core/List';
 import ListItem from '@material-ui/core/ListItem';
 import ListItemIcon from '@material-ui/core/ListItemIcon';
@@ -378,6 +379,12 @@ const SideBar = ({ classes }) => {
             link={`https://docs.${DOMAIN_NAME}`}
             text='Docs'
           />
+          <Tooltip title='Help'>
+            <ListItem button id='intercom-trigger' className={classes.listIcon}>
+              <ListItemIcon><HelpIcon className={classes.icon} /></ListItemIcon>
+              <ListItemText primary='Help' />
+            </ListItem>
+          </Tooltip>
           <ProfileItem classes={classes} data={data} />
         </List>
       </Drawer>

src/ui/src/pages/live/live.tsx

@@ -6,6 +6,7 @@ import PixieCommandIcon from 'components/icons/pixie-command';
 import { ClusterInstructions } from 'containers/App/deploy-instructions';
 import * as React from 'react';
 
+import Link from '@material-ui/core/Link';
 import IconButton from '@material-ui/core/IconButton';
 import { Alert, AlertTitle } from '@material-ui/lab';
 import {
@@ -158,12 +159,10 @@ const ClusterLoadingComponent = (props: ClusterLoadingProps) => {
       return (
         <div>
           <div>
-            If this issue continues, please send a message to the
-            <span> </span>
-            <a href='https://slackin.withpixie.ai/' target='_blank' rel='noreferrer'>community slack</a>
+            Need help?&nbsp;
+            <Link id='intercom-trigger'>Chat with us</Link>
             .
           </div>
-          <div>{`Include your cluster ID "${props.clusterUID}" in the message.`}</div>
         </div>
       );
     },