Merge pull request #84 from lsst-sqre/tickets/DM-35816

DM-35816: Add page for viewing PR-preview pages

CHANGELOG.rst

@@ -2,6 +2,12 @@
 Change log
 ##########
 
+0.8.0
+=====
+
+- New pages for Times Square to preview pages in GitHub pull requests at ``/times-square/github-pr/:owner/:repo:/:commit`` paths.
+- Initial integration with Storybook for designing and documenting components within Squareone.
+
 0.7.1 (2022-06-26)
 ==================
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "squareone",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "private": true,
   "scripts": {
     "dev": "next dev -p 3000",

src/components/TimesSquareGitHubNav/Page.js

@@ -13,7 +13,7 @@ function Page({ title, path, current }) {
   return (
     <Wrapper current={current}>
       <StyledFontAwesomeIcon icon="file" />
-      <Link href={`/times-square/github/${path}`}>{title}</Link>
+      <Link href={path}>{title}</Link>
     </Wrapper>
   );
 }

src/components/TimesSquareGitHubNav/TimesSquareGitHubNav.js

@@ -6,13 +6,11 @@
  */
 
 import styled from 'styled-components';
-import getConfig from 'next/config';
 
 import Directory from './Directory';
 import Page from './Page';
-import useGitHubContentsListing from './useGitHubContentsListing';
 
-function generateChildren(contents, currentPath, props) {
+function generateChildren(contents, currentPath, pathRoot, { ...props }) {
   return contents.map((item) => {
     if (item.node_type != 'page') {
       return (
@@ -21,14 +19,14 @@ function generateChildren(contents, currentPath, props) {
           key={item.path}
           current={currentPath ? currentPath.startsWith(item.path) : false}
         >
-          {generateChildren(item.contents, currentPath, { ...props })}
+          {generateChildren(item.contents, currentPath, pathRoot, { ...props })}
         </Directory>
       );
     } else {
       return (
         <Page
           title={item.title}
-          path={item.path}
+          path={`${pathRoot}/${item.path}`}
           key={item.path}
           current={currentPath ? currentPath.startsWith(item.path) : false}
         />
@@ -37,28 +35,18 @@ function generateChildren(contents, currentPath, props) {
   });
 }
 
-export default function TimesSquareGitHubNav({ pagePath }) {
-  const { publicRuntimeConfig } = getConfig();
-  const { timesSquareUrl } = publicRuntimeConfig;
-  const githubContents = useGitHubContentsListing(timesSquareUrl);
-
-  const children = generateChildren(githubContents.contents, pagePath, {});
-
-  if (githubContents) {
-    return (
-      <NavWrapper>
-        <SectionTitle>Rubin’s boards</SectionTitle>
-        <ContentsWrapper>{children}</ContentsWrapper>
-      </NavWrapper>
-    );
-  } else {
-    return (
-      <NavWrapper>
-        <SectionTitle>Rubin’s boards</SectionTitle>
-        <p>Loading...</p>
-      </NavWrapper>
-    );
-  }
+export default function TimesSquareGitHubNav({
+  pagePath,
+  contentNodes,
+  pagePathRoot,
+}) {
+  const children = generateChildren(contentNodes, pagePath, pagePathRoot, {});
+
+  return (
+    <NavWrapper>
+      <ContentsWrapper>{children}</ContentsWrapper>
+    </NavWrapper>
+  );
 }
 
 // FIXME these mostly come from Comeau's example
@@ -72,11 +60,3 @@ const ContentsWrapper = styled.div`
 `;
 
 const NavWrapper = styled.nav``;
-
-const SectionTitle = styled.p`
-  font-size: 1rem;
-  margin-bottom: 1rem;
-  font-weight: bold;
-  text-transform: uppercase;
-  color: var(--rsd-component-text-headline-color);
-`;