Add link to Bugzilla component query

package.json

@@ -24,6 +24,7 @@
   },
   "dependencies": {
     "@material-ui/core": "^3.5.1",
+    "@material-ui/icons": "^3.0.1",
     "@mozilla-frontend-infra/components": "^2.0.0",
     "prop-types": "^15",
     "react": "^16",

src/containers/BugzillaComponentSummary/index.jsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import OpenInNew from '@material-ui/icons/OpenInNew';
+import { withStyles } from '@material-ui/core/styles';
+import getBugzillaComponentLink from '../../utils/getBugzillaComponentLink';
+
+const styles = theme => ({
+  root: {
+    color: theme.palette.text.primary,
+  },
+  icon: {
+    margin: 0,
+    fontSize: '1rem',
+  },
+});
+
+const BugzillaComponentSummary = ({ classes, product, component }) => (
+  <div className={classes.root}>
+    <span>{`${product}::${component}`}</span>
+    <a href={getBugzillaComponentLink(product, component)} target="_blank" rel="noopener noreferrer">
+      <OpenInNew className={classes.icon} />
+    </a>
+  </div>
+);
+
+BugzillaComponentSummary.propTypes = {
+  classes: PropTypes.shape({}).isRequired,
+  product: PropTypes.string.isRequired,
+  component: PropTypes.string.isRequired,
+};
+
+export default withStyles(styles)(BugzillaComponentSummary);

src/containers/MainContainer/index.jsx

@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
+import BugzillaComponentSummary from '../BugzillaComponentSummary';
 import getAllReportees from '../../utils/getAllReportees';
 import getBugzillaOwners from '../../utils/getBugzillaOwners';
 
@@ -126,7 +127,11 @@ class MainContainer extends Component {
                   {reporteesComponents
                     .sort(sortByComponentName)
                     .map(({ product, component }) => (
-                      <div key={component}>{`${product}::${component}`}</div>
+                      <BugzillaComponentSummary
+                        key={`${product}::${component}`}
+                        product={product}
+                        component={component}
+                      />
                     ))}
                 </div>
                 )}

src/utils/getBugzillaComponentLink.js

@@ -0,0 +1,7 @@
+const getBugzillaComponentLink = (product, component) => (
+  'https://bugzilla.mozilla.org/buglist.cgi?f1=bug_severity&o1=notequals&v1=enhancement'
+  + `&f2=keywords&o2=notsubstring&v2=meta&f3=product&o3=equals&v3=${product}&f4=component`
+  + `&o4=equals&v4=${component}&f5=resolution&o5=isempty&limit=0`
+);
+
+export default getBugzillaComponentLink;

yarn.lock

@@ -735,6 +735,14 @@
     recompose "0.28.0 - 0.30.0"
     warning "^4.0.1"
 
+"@material-ui/icons@^3.0.1":
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/@material-ui/icons/-/icons-3.0.1.tgz#671fb3d04dcaf9351dbbd2bf82ae2ae72e3d93cd"
+  integrity sha512-1kNcxYiIT1x8iDPEAlgmKrfRTIV8UyK6fLVcZ9kMHIKGWft9I451V5mvSrbCjbf7MX1TbLWzZjph0aVCRf9MqQ==
+  dependencies:
+    "@babel/runtime" "7.0.0"
+    recompose "^0.29.0"
+
 "@material-ui/utils@^3.0.0-alpha.0":
   version "3.0.0-alpha.0"
   resolved "https://registry.yarnpkg.com/@material-ui/utils/-/utils-3.0.0-alpha.0.tgz#506fcaf531a9a8f58a73ff2d3dfaa36c0f238506"
@@ -7200,6 +7208,18 @@ recast@~0.11.12:
     react-lifecycles-compat "^3.0.2"
     symbol-observable "^1.0.4"
 
+recompose@^0.29.0:
+  version "0.29.0"
+  resolved "https://registry.yarnpkg.com/recompose/-/recompose-0.29.0.tgz#f1a4e20d5f24d6ef1440f83924e821de0b1bccef"
+  integrity sha512-J/qLXNU4W+AeHCDR70ajW8eMd1uroqZaECTj6qqDLPMILz3y0EzpYlvrnxKB9DnqcngWrtGwjXY9JeXaW9kS1A==
+  dependencies:
+    "@babel/runtime" "^7.0.0"
+    change-emitter "^0.1.2"
+    fbjs "^0.8.1"
+    hoist-non-react-statics "^2.3.1"
+    react-lifecycles-compat "^3.0.2"
+    symbol-observable "^1.0.4"
+
 redbox-react@^1.6.0:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/redbox-react/-/redbox-react-1.6.0.tgz#e753ac02595bc1bf695b3935889a4f5b1b5a21a1"