Implement ExecStats for page panel

This shows the execution status, including the age of the execution and
execution duration if available.

It's also where we put the button to request a recomputation of an
existing page.

The component's data is populated by the TimesSquareHtmlEventsContext.
We show how to mock the context in Storybook to design different states.

apps/squareone/package.json

@@ -46,6 +46,7 @@
     "@reach/alert": "^0.17.0",
     "@reach/menu-button": "^0.17.0",
     "ajv": "^8.11.0",
+    "date-fns": "^3.6.0",
     "formik": "^2.2.9",
     "js-yaml": "^4.1.0",
     "next": "^12.2.4",

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

@@ -0,0 +1,54 @@
+/*
+ * ExecStats provides a summary of the execution status and timing of the
+ * notebook execution. It also provides a button to request the recomputation
+ * of the already-executed notebook.
+ */
+
+import React from 'react';
+import styled from 'styled-components';
+import { parseISO, formatDistanceToNow } from 'date-fns';
+
+import { TimesSquareHtmlEventsContext } from '../TimesSquareHtmlEventsProvider';
+import { GhostButton } from '../Button';
+
+export default function ExecStats({}) {
+  const htmlEvent = React.useContext(TimesSquareHtmlEventsContext);
+
+  if (htmlEvent.executionStatus == 'complete') {
+    const dateFinished = parseISO(htmlEvent.dateFinished);
+    return (
+      <StyledContainer>
+        <p>
+          Computed{' '}
+          <time
+            dateTime={htmlEvent.dateFinished}
+            title={htmlEvent.dateFinished}
+          >
+            {formatDistanceToNow(dateFinished, { addSuffix: true })}
+          </time>{' '}
+          in {htmlEvent.executionDuration} seconds.
+        </p>
+        <GhostButton onClick={() => console.log('Recompute')}>
+          Recompute
+        </GhostButton>
+      </StyledContainer>
+    );
+  }
+
+  if (htmlEvent.executionStatus == 'in_progress') {
+    return (
+      <StyledContainer>
+        <p>Computing…</p>
+      </StyledContainer>
+    );
+  }
+
+  return null;
+}
+
+const StyledContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  margin-top: 1rem;
+`;

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

@@ -0,0 +1,56 @@
+import React from 'react';
+
+import { TimesSquareHtmlEventsContext } from '../TimesSquareHtmlEventsProvider';
+import ExecStats from './ExecStats';
+
+export default {
+  component: ExecStats,
+  title: 'Components/TimesSquare/ExecStats',
+  parameters: {
+    viewport: {
+      viewports: {
+        sidebar: {
+          name: 'Sidebar',
+          styles: {
+            width: '280px',
+            height: '900px',
+          },
+        },
+      },
+    },
+    defaultViewport: 'sidebar',
+  },
+};
+
+const Template = (args) => (
+  <TimesSquareHtmlEventsContext.Provider value={args}>
+    <ExecStats />
+  </TimesSquareHtmlEventsContext.Provider>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  dateSubmitted: '2021-09-01T12:00:00Z',
+  dateStarted: '2021-09-01T12:00:01Z',
+  dateFinished: '2021-09-01T12:00:10Z',
+  executionStatus: 'complete',
+  executionDuration: 10.12,
+};
+
+export const InProgressNew = Template.bind({});
+InProgressNew.args = {
+  dateSubmitted: '2021-09-01T12:00:10Z',
+  dateStarted: null,
+  dateFinished: null,
+  executionStatus: 'in_progress',
+  executionDuration: null,
+};
+
+export const InProgressExisting = Template.bind({});
+InProgressExisting.args = {
+  dateSubmitted: '2021-09-01T12:00:00Z',
+  dateStarted: '2021-09-01T12:00:01Z',
+  dateFinished: '2021-09-01T12:00:10Z',
+  executionStatus: 'in_progress',
+  executionDuration: 10.12,
+};

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

@@ -12,14 +12,12 @@ import Error from 'next/error';
 
 import useTimesSquarePage from '../../hooks/useTimesSquarePage';
 import TimesSquareParameters from '../TimesSquareParameters';
-import { TimesSquareHtmlEventsContext } from '../TimesSquareHtmlEventsProvider';
+import ExecStats from './ExecStats';
 
 export default function TimesSquareGitHubPagePanel({}) {
   const { publicRuntimeConfig } = getConfig();
   const pageData = useTimesSquarePage();
 
-  const htmlEvent = React.useContext(TimesSquareHtmlEventsContext);
-
   if (pageData.loading) {
     return <p>Loading...</p>;
   }
@@ -40,15 +38,8 @@ export default function TimesSquareGitHubPagePanel({}) {
           <div dangerouslySetInnerHTML={{ __html: description.html }}></div>
         )}
         <TimesSquareParameters />
-        {htmlEvent.executionStatus != 'complete' && (
-          <p>{htmlEvent.executionStatus}</p>
-        )}
-        {htmlEvent.executionStatus == 'complete' && (
-          <>
-            <p>Computed {htmlEvent.dateFinished}</p>
-            <p>Executed in {htmlEvent.executionDuration} seconds</p>
-          </>
-        )}
+
+        <ExecStats />
       </div>
     </PagePanelContainer>
   );