From 2adb0af63bb1a69e59f68a33a1a31bdf30899bb2 Mon Sep 17 00:00:00 2001
From: Jonathan Sick <jsick@lsst.org>
Date: Thu, 11 Apr 2024 18:39:25 -0400
Subject: [PATCH] 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               |  5 +++
 .../GitHubEditLink.js                         | 25 +++++++++++++++
 .../GitHubEditLink.stories.js                 | 31 +++++++++++++++++++
 .../TimesSquareGitHubPagePanel.js             |  7 +++++
 .../squareone/src/hooks/useTimesSquarePage.js | 14 +++++----
 5 files changed, 76 insertions(+), 6 deletions(-)
 create mode 100644 .changeset/smart-pandas-deny.md
 create mode 100644 apps/squareone/src/components/TimesSquareGitHubPagePanel/GitHubEditLink.js
 create mode 100644 apps/squareone/src/components/TimesSquareGitHubPagePanel/GitHubEditLink.stories.js

diff --git a/.changeset/smart-pandas-deny.md b/.changeset/smart-pandas-deny.md
new file mode 100644
index 00000000..e3a0e9dd
--- /dev/null
+++ b/.changeset/smart-pandas-deny.md
@@ -0,0 +1,5 @@
+---
+'squareone': minor
+---
+
+Times Square notebook pages show a link to the source notebook on GitHub.
diff --git a/apps/squareone/src/components/TimesSquareGitHubPagePanel/GitHubEditLink.js b/apps/squareone/src/components/TimesSquareGitHubPagePanel/GitHubEditLink.js
new file mode 100644
index 00000000..0e980bd6
--- /dev/null
+++ b/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'};
+`;
diff --git a/apps/squareone/src/components/TimesSquareGitHubPagePanel/GitHubEditLink.stories.js b/apps/squareone/src/components/TimesSquareGitHubPagePanel/GitHubEditLink.stories.js
new file mode 100644
index 00000000..079b475d
--- /dev/null
+++ b/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',
+};
diff --git a/apps/squareone/src/components/TimesSquareGitHubPagePanel/TimesSquareGitHubPagePanel.js b/apps/squareone/src/components/TimesSquareGitHubPagePanel/TimesSquareGitHubPagePanel.js
index d8ec2a6e..d7722093 100644
--- a/apps/squareone/src/components/TimesSquareGitHubPagePanel/TimesSquareGitHubPagePanel.js
+++ b/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 />
diff --git a/apps/squareone/src/hooks/useTimesSquarePage.js b/apps/squareone/src/hooks/useTimesSquarePage.js
index 82ea2e35..79aba8ae 100644
--- a/apps/squareone/src/hooks/useTimesSquarePage.js
+++ b/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,