Merge pull request #38 from newrelic/cirne/pull-requests

Add a "Pull Requests" Tab

nerdlets/github-about/contributors.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import Github from './github';
+import humanizeDuration from 'humanize-duration';
 
 export default class Contributors extends React.PureComponent {
   static propTypes = {
@@ -135,17 +136,25 @@ export default class Contributors extends React.PureComponent {
               <th>Name</th>
               <th>Email</th>
               <th>Commits</th>
-              <th>Most Recent</th>
+              <th className="right">Most Recent</th>
             </tr>
           </thead>
           <tbody>
             {committers.map(committer => {
+              const duration =
+                new Date() - new Date(committer.mostRecentCommit);
+              const durationStr = humanizeDuration(duration, {
+                largest: 2,
+                units: ['y', 'mo', 'w', 'd', 'h', 'm'],
+                round: true
+              });
+
               return (
                 <tr key={committer.login}>
                   <td>{committer.name}</td>
                   <td>{committer.email}</td>
                   <td>{committer.commitCount}</td>
-                  <td>{committer.mostRecentCommit}</td>
+                  <td className="right">{durationStr} ago</td>
                 </tr>
               );
             })}

nerdlets/github-about/main.js

@@ -21,6 +21,7 @@ import Setup from './setup';
 import RepoPicker from './repo-picker';
 import Readme from './readme';
 import Contributors from './contributors';
+import PullRequests from './pull-requests';
 import Header from './header';
 
 import { formatGithubUrl } from '../shared/utils';
@@ -62,7 +63,17 @@ export default class GithubAbout extends React.PureComponent {
     };
   }
 
-  async componentDidMount() {
+  componentDidMount() {
+    this.load();
+  }
+
+  componentDidUpdate({ nerdletUrlState }) {
+    if (nerdletUrlState.entityGuid !== this.props.nerdletUrlState.entityGuid) {
+      this.load();
+    }
+  }
+
+  async load() {
     await this.fetchEntityData();
     await this._getGithubUrl();
     await this.checkGithubUrl();
@@ -260,6 +271,7 @@ export default class GithubAbout extends React.PureComponent {
         return 'repository';
       }
 
+      // return 'pull-requests'
       return visibleTab || 'readme';
     };
 
@@ -292,6 +304,20 @@ export default class GithubAbout extends React.PureComponent {
               userToken={userToken}
             />
           </TabsItem>
+          <TabsItem
+            value="pull-requests"
+            label="Pull Requests"
+            disabled={isDisabled}
+          >
+            <PullRequests
+              isSetup={isSetup}
+              githubUrl={githubUrl}
+              repoUrl={repoUrl}
+              owner={owner}
+              project={project}
+              userToken={userToken}
+            />
+          </TabsItem>
           <TabsItem value="repository" label="Repository" disabled={!isSetup}>
             <RepoPicker
               isSetup={isSetup}

nerdlets/github-about/pull-requests.js

@@ -0,0 +1,139 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Github from './github';
+import { Link } from 'nr1';
+import humanizeDuration from 'humanize-duration';
+
+export default class PullRequests extends React.PureComponent {
+  static propTypes = {
+    githubUrl: PropTypes.string,
+    isSetup: PropTypes.bool,
+    userToken: PropTypes.string,
+    project: PropTypes.string,
+    owner: PropTypes.string,
+    repoUrl: PropTypes.string
+  };
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      error: null
+    };
+  }
+
+  componentDidMount() {
+    this.load();
+  }
+
+  componentDidUpdate({ owner, project, isSetup }) {
+    if (
+      owner !== this.props.owner ||
+      project !== this.props.project ||
+      (!isSetup && this.props.isSetup)
+    ) {
+      this.load();
+    }
+  }
+
+  async load() {
+    this.setState({ pullRequests: null });
+    const { githubUrl, isSetup, owner, project, userToken } = this.props;
+
+    if (!isSetup) {
+      return;
+    }
+
+    const github = new Github({ userToken, githubUrl });
+    const path = `repos/${owner}/${project}/pulls`;
+
+    // Bad url
+    if (path.indexOf('//') > 0) {
+      const error = new Error(`Bad repository url: ${path}`);
+      this.setState({ error: error.message });
+      return;
+    }
+
+    let pullRequests = null;
+    try {
+      pullRequests = await github.get(path);
+      this.setState({ pullRequests });
+    } catch (e) {
+      const error =
+        pullRequests && pullRequests.message
+          ? pullRequests.message
+          : 'unknown error';
+      this.setState({ error });
+      console.error(e); // eslint-disable-line no-console
+    }
+  }
+
+  render() {
+    const { error, pullRequests } = this.state;
+
+    if (error) {
+      return (
+        <>
+          <h2>An error occurred:</h2>
+          <p>{error}</p>
+        </>
+      );
+    }
+
+    if (!pullRequests) {
+      return 'Loading Pull Requests...';
+    }
+
+    return (
+      <div style={{ paddingTop: '12px' }}>
+        <h2>Pull Requests</h2>
+        <table>
+          <thead>
+            <tr>
+              <th>Pull Request</th>
+              <th>Age</th>
+            </tr>
+          </thead>
+          <tbody>
+            {pullRequests.map(pr => (
+              <PullRequest key={pr.id} {...pr} />
+            ))}
+          </tbody>
+        </table>
+      </div>
+    );
+  }
+}
+
+function PullRequest({ html_url, title, created_at }) {
+  const duration = new Date() - new Date(created_at);
+  const durationStr = humanizeDuration(duration, {
+    largest: 2,
+    units: ['y', 'mo', 'w', 'd', 'h', 'm'],
+    round: true
+  });
+
+  let className = 'pr-green';
+  const DAY = 24 * 60 * 60 * 1000;
+  if (duration > 7 * DAY) className = 'pr-yellow';
+  if (duration > 14 * DAY) className = 'pr-red';
+
+  return (
+    <tr>
+      <td>
+        <Link to={html_url}>{title}</Link>
+      </td>
+      <td>
+        <div style={{ display: 'flex' }}>
+          <div className={`pr ${className}`} />
+          {durationStr}
+        </div>
+      </td>
+    </tr>
+  );
+}
+
+PullRequest.propTypes = {
+  html_url: PropTypes.string,
+  title: PropTypes.string,
+  created_at: PropTypes.string
+};

nerdlets/github-about/styles.scss

@@ -61,6 +61,29 @@ tr.active  {
 }
 
 
+.pr {
+  width: 12px;
+  height: 12px;
+  border-radius: 12px;
+  margin-right: 12px;
+  margin-top: 1px;
+  border: 3px solid;
+}
+
+.pr-red {
+  background-color: #f3d3d7;
+  border: 3px solid red;
+}
+.pr-yellow {
+  background-color: rgb(253, 222, 163);
+  border-color: orange;
+}
+.pr-green {
+  background-color: rgb(168, 243, 168);
+  border-color: green;
+}
+
+
 .container {
   width: 100%;
   min-height: 100%;
@@ -188,4 +211,8 @@ ul[class*=Tabs-navigation] {
 
 .gh-access-error-container {
   padding: 20px 32px 32px;
+}
+
+.right {
+  text-align: right;
 }

package.json

@@ -13,6 +13,7 @@
     "eslint-fix": "eslint nerdlets/ --fix"
   },
   "dependencies": {
+    "humanize-duration": "^3.22.0",
     "is-url": "^1.2.4",
     "lodash.get": "^4.4.2",
     "prop-types": "^15.6.2",