A Person's detailed view should show the metrics for each component

Previously we were only listing the components without keeping the
metrics.

src/components/BugzillaComponents/index.jsx

@@ -37,7 +37,8 @@ const BugzillaComponents = ({
       <table>
         <thead>
           <tr>
-            <th colSpan="2" />
+            <th />
+            {onComponentDetails && <th />}
             {Object.values(METRICS).map(({ label }) => (
               <th key={label} className={classes.metricLabel}>{label}</th>
             ))}
@@ -82,7 +83,11 @@ const BugzillaComponents = ({
 BugzillaComponents.propTypes = {
   classes: PropTypes.shape({}).isRequired,
   bugzillaComponents: PropTypes.shape({}).isRequired,
-  onComponentDetails: PropTypes.func.isRequired,
+  onComponentDetails: PropTypes.func,
+};
+
+BugzillaComponents.defaultProps = {
+  onComponentDetails: undefined,
 };
 
 export default withStyles(styles)(BugzillaComponents);

src/components/PersonDetails/index.jsx

@@ -1,23 +1,35 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import DetailView from '../DetailView';
+import BugzillaComponents from '../BugzillaComponents';
 
-const PersonDetails = ({ person, components, onGoBack }) => (
-  <DetailView title={person.cn} onGoBack={onGoBack}>
-    <div>
-      <h3>Components owned</h3>
-      {components.map(({ product, component }) => (
-        <div key={`${product}::${component}`}>
-          <span>{`${product}::${component}`}</span>
-        </div>
-      ))}
-    </div>
-  </DetailView>
-);
+class PersonDetails extends React.Component {
+  render() {
+    const { person, bugzillaComponents, onGoBack } = this.props;
+
+    const components = Object.values(bugzillaComponents)
+      .reduce((result, bzComponent) => {
+        const { bugzillaEmail, product, component } = bzComponent;
+        if (bugzillaEmail === person.bugzillaEmail) {
+          // eslint-disable-next-line no-param-reassign
+          result[`${product}::${component}`] = bzComponent;
+        }
+        return result;
+      }, {});
+
+    return (
+      <DetailView title={person.cn} onGoBack={onGoBack}>
+        <BugzillaComponents
+          bugzillaComponents={components}
+        />
+      </DetailView>
+    );
+  }
+}
 
 PersonDetails.propTypes = {
   person: PropTypes.shape({}).isRequired,
-  components: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
+  bugzillaComponents: PropTypes.shape({}).isRequired,
   onGoBack: PropTypes.func.isRequired,
 };
 

src/containers/MainContainer/index.jsx

@@ -114,21 +114,17 @@ class MainContainer extends Component {
       const component = event.target.parentElement.getAttribute('component');
       this.setState(prevState => ({
         showComponent: prevState.bugzillaComponents[`${product}::${component}`],
+        showPerson: undefined,
       }));
     }
 
     handleShowPersonDetails(event) {
       event.preventDefault();
       const ldapEmail = event.target.parentElement.getAttribute('value');
-      const { bugzillaComponents, partialOrg } = this.state;
-      const person = partialOrg[ldapEmail];
-      const components = Object.values(bugzillaComponents)
-        .filter(comp => comp.bugzillaEmail === person.bugzillaEmail);
+      const { partialOrg } = this.state;
       this.setState({
-        showPerson: {
-          person,
-          components,
-        },
+        showComponent: undefined,
+        showPerson: partialOrg[ldapEmail],
       });
     }
 
@@ -155,7 +151,8 @@ class MainContainer extends Component {
           )}
           {showPerson && (
             <PersonDetails
-              {...showPerson}
+              person={showPerson}
+              bugzillaComponents={bugzillaComponents}
               onGoBack={this.handleComponentBackToMenu}
             />
           )}

test/components/PersonDetails.test.jsx

@@ -6,13 +6,11 @@ import bugzillaComponents from '../mocks/bugzillaComponents';
 
 it('renders the details for an individual contributor', () => {
   const person = partialOrg['someone@mozilla.com'];
-  const components = Object.values(bugzillaComponents).filter(comp => (
-    comp.bugzillaEmail === person.bugzillaEmail));
   const tree = renderer
     .create((
       <PersonDetails
         person={person}
-        components={components}
+        bugzillaComponents={bugzillaComponents}
         onGoBack={() => null}
       />
     ))
@@ -22,13 +20,11 @@ it('renders the details for an individual contributor', () => {
 
 it('renders the details for a manager', () => {
   const person = partialOrg['manager@mozilla.com'];
-  const components = Object.values(bugzillaComponents).filter(comp => (
-    comp.bugzillaEmail === person.bugzillaEmail));
   const tree = renderer
     .create((
       <PersonDetails
         person={person}
-        components={components}
+        bugzillaComponents={bugzillaComponents}
         onGoBack={() => null}
       />
     ))

test/components/__snapshots__/MainView.test.jsx.snap

@@ -95,9 +95,8 @@ exports[`renders Manager who has reportees 1`] = `
       <table>
         <thead>
           <tr>
-            <th
-              colSpan="2"
-            />
+            <th />
+            <th />
             <th
               className="BugzillaComponents-metricLabel-18"
             >
@@ -355,9 +354,8 @@ exports[`renders Someone with no reportees 1`] = `
       <table>
         <thead>
           <tr>
-            <th
-              colSpan="2"
-            />
+            <th />
+            <th />
             <th
               className="BugzillaComponents-metricLabel-18"
             >

test/components/__snapshots__/PersonDetails.test.jsx.snap

@@ -33,11 +33,6 @@ exports[`renders the details for a manager 1`] = `
     >
       Manager
     </h2>
-    <div>
-      <h3>
-        Components owned
-      </h3>
-    </div>
   </div>
 </div>
 `;
@@ -75,11 +70,6 @@ exports[`renders the details for an individual contributor 1`] = `
     >
       Someone
     </h2>
-    <div>
-      <h3>
-        Components owned
-      </h3>
-    </div>
   </div>
 </div>
 `;