Fix popovers to be reachable and clickable (#1831)

The popover on the src/dst column in the top and tap tables disappeared
before a use could click on it.

Modify the popovers to be reachable, also reimplement them as activated
by mouse clicks rather than mouse over events, allowing the src/dst
column to be both clickable and provide an icon for popover.

Fixes #1784

Signed-off-by: Andrew Seigner <siggy@buoyant.io>

web/app/js/components/Popover.jsx

@@ -1,28 +1,24 @@
-/* eslint-disable jsx-a11y/mouse-events-have-key-events */
 import Popover from '@material-ui/core/Popover';
 import PropTypes from 'prop-types';
 import React from 'react';
 import { withStyles } from '@material-ui/core/styles';
 
 const styles = theme => ({
-  popover: {
-    pointerEvents: 'none',
-  },
   paper: {
     padding: theme.spacing.unit,
   },
 });
 
-class MouseOverPopover extends React.Component {
+class ClickablePopover extends React.Component {
   state = {
     anchorEl: null,
   };
 
-  handlePopoverOpen = event => {
+  handleClick = event => {
     this.setState({ anchorEl: event.currentTarget });
   };
 
-  handlePopoverClose = () => {
+  handleClose = () => {
     this.setState({ anchorEl: null });
   };
 
@@ -32,17 +28,17 @@ class MouseOverPopover extends React.Component {
     const open = Boolean(anchorEl);
 
     return (
-      <div>
-        <div
-          aria-owns={open ? 'mouse-over-popover' : null}
+      <React.Fragment>
+        <span
+          aria-owns={open ? 'clickable-popover' : null}
           aria-haspopup="true"
-          onMouseEnter={this.handlePopoverOpen}
-          onMouseLeave={this.handlePopoverClose}>
+          onClick={this.handleClick}
+          role="button"
+          tabIndex={0}>
           {baseContent}
-        </div>
+        </span>
         <Popover
-          id="mouse-over-popover"
-          className={classes.popover}
+          id="clickable-popover"
           classes={{
             paper: classes.paper,
           }}
@@ -56,19 +52,18 @@ class MouseOverPopover extends React.Component {
             vertical: 'top',
             horizontal: 'left',
           }}
-          onClose={this.handlePopoverClose}
-          disableRestoreFocus>
+          onClose={this.handleClose}>
           {popoverContent}
         </Popover>
-      </div>
+      </React.Fragment>
     );
   }
 }
 
-MouseOverPopover.propTypes = {
+ClickablePopover.propTypes = {
   baseContent: PropTypes.node.isRequired,
   classes: PropTypes.shape({}).isRequired,
   popoverContent: PropTypes.node.isRequired
 };
 
-export default withStyles(styles)(MouseOverPopover);
+export default withStyles(styles)(ClickablePopover);

web/app/js/components/util/TapUtils.jsx

@@ -1,6 +1,9 @@
 import { podOwnerLookup, toShortResourceName } from './Utils.js';
 
 import BaseTable from '../BaseTable.jsx';
+import Grid from '@material-ui/core/Grid';
+import { Link } from 'react-router-dom';
+import OpenInNewIcon from '@material-ui/icons/OpenInNew';
 import Popover from '../Popover.jsx';
 import PropTypes from 'prop-types';
 import React from 'react';
@@ -293,6 +296,7 @@ export const directionColumn = d => (
 );
 
 export const srcDstColumn = (d, resourceType, ResourceLink) => {
+
   let display = {};
   let labels = {};
 
@@ -304,16 +308,37 @@ export const srcDstColumn = (d, resourceType, ResourceLink) => {
     labels = d.destinationLabels;
   }
 
+  let link = (
+    !_.isEmpty(labels[resourceType]) ?
+      resourceShortLink(resourceType, labels, ResourceLink) :
+      display.str
+  );
+
+  const linkFn = e => {
+    e.preventDefault();
+  };
+
   let baseContent = (
-    <div className="src-dst-name">
-      { !_.isEmpty(labels[resourceType]) ? resourceShortLink(resourceType, labels, ResourceLink) : display.str }
-    </div>
+    <Link to="#" onClick={linkFn}>
+      <OpenInNewIcon fontSize="small" />
+    </Link>
   );
 
   return (
-    <Popover
-      popoverContent={(popoverResourceTable(d, ResourceLink))}
-      baseContent={baseContent} />
+    <Grid
+      container
+      direction="row"
+      alignItems="center"
+      spacing={8}>
+      <Grid item>
+        {link}
+      </Grid>
+      <Grid item>
+        <Popover
+          popoverContent={(popoverResourceTable(d, ResourceLink))}
+          baseContent={baseContent} />
+      </Grid>
+    </Grid>
   );
 };