Add GitHubEditLink component

This component links to the notebook in GitHub. Currently it assumes
we're referencing the "main" branch; to fix that we'd have to store the
default branch in Times Square to serve from its API.

.changeset/smart-pandas-deny.md

@@ -0,0 +1,5 @@
+---
+'squareone': minor
+---
+
+Times Square notebook pages show a link to the source notebook on GitHub.

apps/squareone/src/components/TimesSquareGitHubPagePanel/GitHubEditLink.js

@@ -0,0 +1,25 @@
+import styled from 'styled-components';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+
+export default function GitHubEditLink({ owner, repository, sourcePath }) {
+  if (!owner || !repository || !sourcePath) {
+    return null;
+  }
+
+  const editUrl = `https://github.com/${owner}/${repository}/blob/main/${sourcePath}`;
+
+  return (
+    <p>
+      <a href={editUrl}>
+        <StyledFontAwesomeIcon icon="fa-brands fa-github" />
+        {owner}/{repository}
+      </a>
+    </p>
+  );
+}
+
+const StyledFontAwesomeIcon = styled(FontAwesomeIcon)`
+  margin-right: 0.2em;
+  font-size: 1em;
+  color: ${(props) => props.color || 'inherit'};
+`;

apps/squareone/src/components/TimesSquareGitHubPagePanel/GitHubEditLink.stories.js

@@ -0,0 +1,31 @@
+import React from 'react';
+
+import GitHubEditLink from './GitHubEditLink';
+
+export default {
+  component: GitHubEditLink,
+  title: 'Components/TimesSquare/GitHubEditLink',
+  parameters: {
+    viewport: {
+      viewports: {
+        sidebar: {
+          name: 'Sidebar',
+          styles: {
+            width: '280px',
+            height: '900px',
+          },
+        },
+      },
+    },
+    defaultViewport: 'sidebar',
+  },
+};
+
+const Template = (args) => <GitHubEditLink {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  owner: 'lsst-sqre',
+  repository: 'times-square-demo',
+  sourcePath: 'demo.ipynb',
+};

apps/squareone/src/components/TimesSquareGitHubPagePanel/TimesSquareGitHubPagePanel.js

@@ -13,6 +13,7 @@ import Error from 'next/error';
 import useTimesSquarePage from '../../hooks/useTimesSquarePage';
 import TimesSquareParameters from '../TimesSquareParameters';
 import ExecStats from './ExecStats';
+import GitHubEditLink from './GitHubEditLink';
 
 export default function TimesSquareGitHubPagePanel({}) {
   const { publicRuntimeConfig } = getConfig();
@@ -37,6 +38,12 @@ export default function TimesSquareGitHubPagePanel({}) {
         {description && (
           <div dangerouslySetInnerHTML={{ __html: description.html }}></div>
         )}
+        <GitHubEditLink
+          owner={pageData.github.owner}
+          repository={pageData.github.repository}
+          sourcePath={pageData.github.sourcePath}
+        />
+
         <TimesSquareParameters />
 
         <ExecStats />

apps/squareone/src/hooks/useTimesSquarePage.js

@@ -9,12 +9,14 @@ function useTimesSquarePage() {
   const { tsPageUrl } = React.useContext(TimesSquareUrlParametersContext);
   const { data, error } = useSWR(tsPageUrl, fetcher);
 
-  const githubInfo = {
-    owner: data.github.owner ? data.github.owner : null,
-    repository: data.github.repository ? data.github.repository : null,
-    sourcePath: data.github.source_path ? data.github.source_path : null,
-    sidecarPath: data.github.sidecar_path ? data.github.sidecar_path : null,
-  };
+  const githubInfo = data
+    ? {
+        owner: data.github.owner ? data.github.owner : null,
+        repository: data.github.repository ? data.github.repository : null,
+        sourcePath: data.github.source_path ? data.github.source_path : null,
+        sidecarPath: data.github.sidecar_path ? data.github.sidecar_path : null,
+      }
+    : { owner: null, repository: null, sourcePath: null, sidecarPath: null };
 
   return {
     error: error,