feat: add surge links and loading state to test status table (#72)

* feat: add surge links and loading state to test status table

* update skeleton rows

Author: nicolethoen

src/app/TestStatusTable.tsx

@@ -1,14 +1,20 @@
 import React from "react";
 
 import {
+  Bullseye,
   Button,
+  EmptyState,
+  EmptyStateBody,
+  EmptyStateVariant,
   PageSection,
   Toolbar,
   ToolbarContent,
   ToolbarGroup,
   ToolbarItem,
 } from "@patternfly/react-core";
 import { Table, Thead, Tr, Th, Tbody, Td } from "@patternfly/react-table";
+import SkeletonTable from "@patternfly/react-component-groups/dist/cjs/SkeletonTable";
+import ExclamationCircleIcon from "@patternfly/react-icons/dist/dynamic/icons/exclamation-circle-icon";
 import { repoStatus } from "@/getters";
 import { useSession } from "next-auth/react";
 
@@ -21,13 +27,17 @@ export interface TestStatusItem extends Omit<repoStatus, "workflowStatus"> {
 
 export interface TestStatusTableProps {
   statusItems: TestStatusItem[];
+  isLoading: boolean;
+  hasError: boolean;
   refresh: () => Promise<void>;
   submit: () => Promise<void>;
   renewBumps: () => Promise<void>;
 }
 
 export const TestStatusTable: React.FunctionComponent<TestStatusTableProps> = ({
   statusItems,
+  isLoading,
+  hasError,
   refresh,
   submit,
   renewBumps,
@@ -102,7 +112,51 @@ export const TestStatusTable: React.FunctionComponent<TestStatusTableProps> = ({
     </Toolbar>
   ) : null;
 
-  const columns = ["Name", "Status", "Synced with upstream?"];
+  const columns = ["Name", "Status", "Synced with upstream?", "Preview"];
+
+  if (isLoading) {
+    return (
+      <PageSection isWidthLimited>
+        {toolbar}
+        <SkeletonTable rowsCount={statusItems.length || 8} columns={columns} />
+      </PageSection>
+    );
+  }
+
+  if (hasError) {
+    return (
+      <PageSection isWidthLimited>
+        {toolbar}
+        <Table aria-label="Testing status error">
+          <Thead>
+            <Tr>
+              {columns.map((column) => (
+                <Th key={column}>{column}</Th>
+              ))}
+            </Tr>
+          </Thead>
+          <Tbody>
+            <Tr>
+              <Td colSpan={columns.length}>
+                <Bullseye>
+                  <EmptyState
+                    icon={ExclamationCircleIcon}
+                    titleText="Unable to connect"
+                    headingLevel="h2"
+                    variant={EmptyStateVariant.sm}
+                  >
+                    <EmptyStateBody>
+                      There was an error retrieving data. Check your connection and reload the page.
+                    </EmptyStateBody>
+                  </EmptyState>
+                </Bullseye>
+              </Td>
+            </Tr>
+          </Tbody>
+        </Table>
+      </PageSection>
+    );
+  }
 
   return (
     <PageSection isWidthLimited>
@@ -116,17 +170,24 @@ export const TestStatusTable: React.FunctionComponent<TestStatusTableProps> = ({
           </Tr>
         </Thead>
         <Tbody>
-          {statusItems.map((item, rowIndex) => (
+          {statusItems.map((item) => (
             <Tr key={item.name}>
               <Td dataLabel={columns[0]} width={30}>
                 {<a href={item.upstreamOwnerLink} aria-label={`upstream repo ${item.name}`}>{item.name}</a>}
               </Td>
               <Td dataLabel={columns[1]} width={30}>
                 {<a href={item.bumpPRLink} aria-label={`dependency bump PR, status ${item.status}`}>{item.status}</a>}
               </Td>
-              <Td dataLabel={columns[1]} width={40}>
+              <Td dataLabel={columns[2]} width={30}>
                 {item.syncStatus.toString()}
               </Td>
+              <Td dataLabel={columns[3]} width={10}>
+                {item.previewUrl ? (
+                  <a href={item.previewUrl} aria-label={`preview for ${item.name}`}>Preview</a>
+                ) : (
+                  "-"
+                )}
+              </Td>
             </Tr>
           ))}
         </Tbody>

src/getters/getPreviewUrl.ts

@@ -0,0 +1,35 @@
+import octokit from "../octokit";
+
+export async function getPreviewUrl(
+  prNumber: number,
+  repo: string,
+  owner: string = "patternfly-extension-testing"
+): Promise<string> {
+  if (prNumber === 0) {
+    return "";
+  }
+
+  const res = await octokit
+    .request("GET /repos/{owner}/{repo}/issues/{issue_number}/comments", {
+      owner,
+      repo,
+      issue_number: prNumber,
+    })
+    .catch((err) => {
+      console.error(err);
+      return { status: err.status, data: [] };
+    });
+
+  if (res.status !== 200) {
+    return "";
+  }
+
+  for (const comment of res.data) {
+    const match = comment.body?.match(/https?:\/\/[^\s)]*\.surge\.sh[^\s)]*/);
+    if (match) {
+      return match[0];
+    }
+  }
+
+  return "";
+}

src/getters/getStatus.ts

@@ -4,13 +4,15 @@ import {
   getWorkflowResult,
   getSyncStatus,
   getUpstreamOwner,
+  getPreviewUrl,
 } from "./index";
 
 export interface repoStatus {
   workflowStatus: string;
   syncStatus: string;
   bumpPRLink: string;
   upstreamOwnerLink: string;
+  previewUrl: string;
 }
 
 export type Statuses = {
@@ -37,12 +39,14 @@ export async function getStatus(
 
     const syncStatus = await getSyncStatus(repo, "main", owner, upstreamOwner);
     const workflowStatus = await getWorkflowResult(bumpNumber, repo, owner);
+    const previewUrl = await getPreviewUrl(bumpNumber, repo, owner);
 
     return {
       workflowStatus,
       syncStatus,
       bumpPRLink,
       upstreamOwnerLink,
+      previewUrl,
     };
   });
 

src/getters/index.ts

@@ -4,3 +4,4 @@ export * from "./getWorkflowResult";
 export * from "./getStatus";
 export * from "./getSyncStatus";
 export * from "./getUpstreamOwner";
+export * from "./getPreviewUrl";

src/pages/api/status.ts

@@ -21,6 +21,7 @@ export default async function handler(
           syncStatus: "ERROR owner must be of type string if passed",
           bumpPRLink: "ERROR owner must be of type string if passed",
           upstreamOwnerLink: "ERROR owner must be of type string if passed",
+          previewUrl: "",
         },
       },
     });

src/pages/index.tsx

@@ -15,9 +15,18 @@ export default function Home() {
     repos: [],
     statuses: {},
   });
+  const [isLoading, setIsLoading] = useState(true);
+  const [hasError, setHasError] = useState(false);
 
-  const refresh = () =>
-    axios.get("/api/status").then((res) => setRepoStatuses(res.data));
+  const refresh = () => {
+    setIsLoading(true);
+    setHasError(false);
+    return axios
+      .get("/api/status")
+      .then((res) => setRepoStatuses(res.data))
+      .catch(() => setHasError(true))
+      .finally(() => setIsLoading(false));
+  };
 
   useEffect(() => {
     refresh();
@@ -63,6 +72,8 @@ export default function Home() {
             <Tab eventKey={0} title={<TabTitleText>Test Status</TabTitleText>}>
               <TestStatusTable
                 statusItems={statusItems}
+                isLoading={isLoading}
+                hasError={hasError}
                 refresh={refresh}
                 submit={syncRepos}
                 renewBumps={renewBumps}