From 4c2d11551025bffefd0c18750843f34f6fd92ef8 Mon Sep 17 00:00:00 2001
From: Andrew Nguyen <phongnguyentuan20@gmail.com>
Date: Thu, 21 Oct 2021 00:20:29 -0400
Subject: [PATCH] show commits in Github sidebar

---
 src/web/src/components/Posts/Commits.tsx      | 75 +++++++++++++++++++
 src/web/src/components/Posts/GitHubInfo.tsx   |  9 ++-
 src/web/src/components/Posts/Issues.tsx       |  1 +
 src/web/src/components/Posts/PullRequests.tsx |  1 +
 4 files changed, 83 insertions(+), 3 deletions(-)
 create mode 100644 src/web/src/components/Posts/Commits.tsx

diff --git a/src/web/src/components/Posts/Commits.tsx b/src/web/src/components/Posts/Commits.tsx
new file mode 100644
index 0000000000..091d5d9a15
--- /dev/null
+++ b/src/web/src/components/Posts/Commits.tsx
@@ -0,0 +1,75 @@
+import { VscGitCommit } from 'react-icons/vsc';
+import { createStyles, makeStyles, Theme } from '@material-ui/core';
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    link: {
+      textDecoration: 'none',
+      color: theme.palette.text.primary,
+      '&:hover': {
+        textDecorationLine: 'underline',
+      },
+    },
+    GitHubInfo: {
+      lineHeight: '2rem',
+      fontSize: '1.2rem',
+    },
+    GitHubLinkTitle: {
+      fontSize: '1.4rem',
+      margin: 0,
+      paddingTop: '1rem',
+    },
+    icon: {
+      fontSize: '2rem',
+      marginRight: '1rem',
+      verticalAlign: 'text-bottom',
+    },
+    commits: {
+      display: 'flex',
+      flexWrap: 'wrap',
+      margin: 0,
+    },
+    commit: {
+      marginRight: '2rem',
+    },
+  })
+);
+
+const SHORT_SHA_LENGTH = 7;
+
+const getCommitNumber = (url: string, length?: number) =>
+  url.replace(/.+\/(commit|commits)\/(\w{40}).*/, '$2').substr(0, length);
+
+type Props = {
+  commitUrls: string[];
+};
+
+const Commits = ({ commitUrls }: Props) => {
+  const classes = useStyles();
+
+  return (
+    <div className={classes.GitHubInfo}>
+      <h2 className={classes.GitHubLinkTitle}>
+        <VscGitCommit className={classes.icon}></VscGitCommit>
+        {commitUrls.length === 1 ? 'Commit' : 'Commits'}
+      </h2>
+      <p className={classes.commits}>
+        {commitUrls.map((url) => (
+          <p key={url} className={classes.commit}>
+            <a
+              href={`https://github.com${url}`}
+              rel="bookmark"
+              target="_blank"
+              title={'Commit ' + getCommitNumber(url)}
+              className={classes.link}
+            >
+              {getCommitNumber(url, SHORT_SHA_LENGTH)}
+            </a>
+          </p>
+        ))}
+      </p>
+    </div>
+  );
+};
+
+export default Commits;
diff --git a/src/web/src/components/Posts/GitHubInfo.tsx b/src/web/src/components/Posts/GitHubInfo.tsx
index e8dd81e189..8c2c0324da 100644
--- a/src/web/src/components/Posts/GitHubInfo.tsx
+++ b/src/web/src/components/Posts/GitHubInfo.tsx
@@ -2,6 +2,7 @@ import { createStyles, makeStyles, Theme, ListSubheader } from '@material-ui/cor
 import Repos from './Repos';
 import Issues from './Issues';
 import PullRequests from './PullRequests';
+import Commits from './Commits';
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
@@ -37,11 +38,12 @@ const filterGitHubUrls = (urls: string[]) => {
     const { pathname } = url;
 
     // Match urls that start with /<user>/<repo>, and optionally end with /<anything-in-between>/<type>/<id>
+    // <id> can be number, or a mixed of 40 alphanumeric (commit id)
     // Ex: /Seneca-CDOT/telescope/pull/2367 ✅
     // Ex: /Seneca-CDOT/telescope ✅
-    // Ex: /Seneca-CDOT/telescope/pull/2367/commits/d3fag ✅
+    // Ex: /Seneca-CDOT/telescope/pull/2367/commits/d3fagd3fagd3fagd3fagd3fagd3fag4d41265748 ✅
     // Ex: /Seneca-CDOT/telescope/issues ✅
-    const matches = /^\/(?<user>[^\/]+)\/(?<repo>[^\/]+)((\/(.*))?\/(?<type>[^\/]+)\/(?<id>(\d+))\/?$)?/i.exec(
+    const matches = /^\/(?<user>[^\/]+)\/(?<repo>[^\/]+)((\/(.*))?\/(?<type>[^\/]+)\/(?<id>(\d+|\w{40}))\/?$)?/i.exec(
       pathname
     );
     if (matches?.groups === undefined) {
@@ -92,7 +94,7 @@ const parseGitHubUrl = (url: string): URL | null => {
 
 const GitHubInfo = ({ ghUrls }: Props) => {
   const classes = useStyles();
-  const { repos, issues, pullRequests } = filterGitHubUrls(ghUrls);
+  const { repos, issues, pullRequests, commits } = filterGitHubUrls(ghUrls);
 
   return (
     <ListSubheader className={classes.root}>
@@ -100,6 +102,7 @@ const GitHubInfo = ({ ghUrls }: Props) => {
         {!!repos.length && <Repos repoUrls={repos} />}
         {!!issues.length && <Issues issueUrls={issues} />}
         {!!pullRequests.length && <PullRequests prUrls={pullRequests} />}
+        {!!commits.length && <Commits commitUrls={commits} />}
       </div>
     </ListSubheader>
   );
diff --git a/src/web/src/components/Posts/Issues.tsx b/src/web/src/components/Posts/Issues.tsx
index 5a3942b834..6cc2022ad2 100644
--- a/src/web/src/components/Posts/Issues.tsx
+++ b/src/web/src/components/Posts/Issues.tsx
@@ -26,6 +26,7 @@ const useStyles = makeStyles((theme: Theme) =>
     },
     issues: {
       display: 'flex',
+      flexWrap: 'wrap',
       margin: 0,
     },
     issue: {
diff --git a/src/web/src/components/Posts/PullRequests.tsx b/src/web/src/components/Posts/PullRequests.tsx
index 6553213046..0b16e46a81 100644
--- a/src/web/src/components/Posts/PullRequests.tsx
+++ b/src/web/src/components/Posts/PullRequests.tsx
@@ -26,6 +26,7 @@ const useStyles = makeStyles((theme: Theme) =>
     },
     pullRequests: {
       display: 'flex',
+      flexWrap: 'wrap',
       margin: 0,
     },
     pullRequest: {