From 4c1f2c926adeb71292200366052998cba910a465 Mon Sep 17 00:00:00 2001
From: martin-stoyanov <martin.a.stoyanov@gmail.com>
Date: Sat, 6 Mar 2021 12:12:27 -0500
Subject: [PATCH] feat: use commit hash to link to commit

---
 .../ComponentCommits/BaseComponentCommits.tsx | 37 +++++++++++++++----
 1 file changed, 30 insertions(+), 7 deletions(-)

diff --git a/ui/blocks/src/ComponentCommits/BaseComponentCommits.tsx b/ui/blocks/src/ComponentCommits/BaseComponentCommits.tsx
index 6dff75693..c07113398 100644
--- a/ui/blocks/src/ComponentCommits/BaseComponentCommits.tsx
+++ b/ui/blocks/src/ComponentCommits/BaseComponentCommits.tsx
@@ -1,10 +1,15 @@
 /* eslint-disable react/display-name */
 /** @jsx jsx */
-import { FC, useMemo } from 'react';
+import { FC, Fragment, useMemo } from 'react';
 import { jsx } from 'theme-ui';
 import { Column } from 'react-table';
-import { Table, TableProps } from '@component-controls/components';
-import { useConfig } from '@component-controls/store';
+import { GitCommitIcon } from '@primer/octicons-react';
+import {
+  ExternalLink,
+  Table,
+  TableProps,
+} from '@component-controls/components';
+import { useConfig, usePackage } from '@component-controls/store';
 import { Commit, Component, dateToLocalString } from '@component-controls/core';
 import { GithubAvatar } from '@component-controls/components';
 
@@ -23,7 +28,11 @@ export const BaseComponentCommits: FC<BaseComponentCommitsProps> = ({
   const config = useConfig();
   const { tokens } = config;
 
-  console.log(component);
+  const componentPackage = usePackage(component?.package);
+  const baseGitURL = componentPackage?.repository?.issues?.replace(
+    'issues',
+    'commit',
+  );
 
   const columns = useMemo(
     () =>
@@ -66,12 +75,26 @@ export const BaseComponentCommits: FC<BaseComponentCommitsProps> = ({
           accessor: 'subject',
           Cell: ({
             row: {
-              original: { subject },
+              original: { subject, hash },
             },
-          }) => <p>{subject}</p>,
+          }) => (
+            <Fragment>
+              <span sx={{ mr: 1 }}>{subject}</span>
+              {baseGitURL && hash && (
+                <span>
+                  <ExternalLink
+                    href={`${baseGitURL}/${hash}`}
+                    aria-label="View commit on GitHub"
+                  >
+                    <GitCommitIcon size={16} />
+                  </ExternalLink>
+                </span>
+              )}
+            </Fragment>
+          ),
         },
       ] as Column<Commit>[],
-    [],
+    [baseGitURL, tokens?.githubAccessToken],
   );
 
   if (!component?.fileInfo?.commits) {