Feature: Status Check Setting (#61)

### Summary

In this PR, a new setting has been introduced for the status check
feature. By default this setting will be turned off and there is a short
description that it may not be completely accurate. More details on why
it is labeled as an "experimental" feature is described in #59

### Changes
- Added a new hook along with extension methods to save and fetch the
configured setting from storage
- Hook is used in the <PRDisplay /> component and passed to each of the
<PullRequest /> components
- Updates in <PullRequest />  components to make use of the new setting

src/data/extension.ts

@@ -46,6 +46,8 @@ export interface Storage {
   headerClickBehavior?: HeaderClickBehavior;
   /** User setting to animate the expansion of a repo section or not */
   animatedExpandSetting?: boolean;
+  /** User setting to enable the status checks for each pull request */
+  statusChecksSetting?: boolean;
 }
 
 /**
@@ -265,3 +267,29 @@ export async function saveAnimatedExpandSetting(
   storage.animatedExpandSetting = animatedExpandSetting;
   await setStorage(storage);
 }
+
+/**
+ * Gets the user's current configuration for if they want to see status checks for each
+ * pull request
+ * @returns true if the user has set this configuration to be on, or false otherwise
+ */
+export async function getStatusChecksSetting(): Promise<boolean> {
+  const storage = await getStorage();
+  // default to false if not previously saved
+  if (storage.statusChecksSetting === undefined) {
+    storage.statusChecksSetting = false;
+  }
+  return storage.statusChecksSetting;
+}
+
+/**
+ * Saves the value that the user wants to set the pull request check status setting to
+ * @param statusChecksSetting {boolean} - the value of the animated expansion setting
+ */
+export async function saveStatusChecksSetting(
+  statusChecksSetting: boolean
+): Promise<void> {
+  const storage = await getStorage();
+  storage.statusChecksSetting = statusChecksSetting;
+  await setStorage(storage);
+}

src/popup/components/PRDisplay/RepoSection/PullRequest/index.tsx

@@ -24,11 +24,13 @@ interface PullRequestProps {
    * repo that this pull request is associated with
    */
   isJiraConfigured: boolean;
+  statusChecksSetting: boolean;
 }
 
 export default function PullRequest({
   pr,
   isJiraConfigured,
+  statusChecksSetting,
 }: PullRequestProps) {
   return (
     <Stack
@@ -49,17 +51,21 @@ export default function PullRequest({
           <Typography variant="caption" fontStyle="italic">
             {pr.username}
           </Typography>
-          <Box
-            onClick={() => {
-              createTab(pr.checksUrl).catch(() => {
-                console.error(`Failed to create tab with url ${pr.checksUrl}`);
-              });
-            }}
-          >
-            {pr.checksState === "SUCCESS" && <SuccessStatusChecksIcon />}
-            {pr.checksState === "FAILURE" && <FailedStatusChecksIcon />}
-            {pr.checksState === "PENDING" && <PendingStatusChecksIcon />}
-          </Box>
+          {statusChecksSetting && (
+            <Box
+              onClick={() => {
+                createTab(pr.checksUrl).catch(() => {
+                  console.error(
+                    `Failed to create tab with url ${pr.checksUrl}`
+                  );
+                });
+              }}
+            >
+              {pr.checksState === "SUCCESS" && <SuccessStatusChecksIcon />}
+              {pr.checksState === "FAILURE" && <FailedStatusChecksIcon />}
+              {pr.checksState === "PENDING" && <PendingStatusChecksIcon />}
+            </Box>
+          )}
         </Stack>
         <Typography
           variant="caption"

src/popup/components/PRDisplay/index.tsx

@@ -12,6 +12,7 @@ import {
   useGetAnimatedExpandSetting,
   useGetHeaderClickBehavior,
   useGetPullRequests,
+  useGetStatusChecksSetting,
   useSavedFilters,
 } from "../../hooks";
 
@@ -20,6 +21,7 @@ export default function PRDisplay() {
   const { loading, data, username, token } = useGetPullRequests();
   const [headerClickBehavior] = useGetHeaderClickBehavior();
   const [animatedExpandSetting] = useGetAnimatedExpandSetting();
+  const [statusChecksSetting] = useGetStatusChecksSetting();
 
   return (
     <Stack width="100%" bgcolor="whitesmoke" padding={1} spacing={1}>
@@ -85,6 +87,7 @@ export default function PRDisplay() {
                         key={pr.url}
                         pr={pr}
                         isJiraConfigured={repo.isJiraConfigured}
+                        statusChecksSetting={statusChecksSetting}
                       />
                     ))
                   : filtered.length === 0 && <NoPullRequest url={repo.url} />}

src/popup/components/Settings/StatusChecksSetting.tsx

@@ -0,0 +1,59 @@
+import Stack from "@mui/material/Stack";
+import Typography from "@mui/material/Typography";
+import CircularProgress from "@mui/material/CircularProgress";
+import Switch from "@mui/material/Switch";
+import React from "react";
+import { saveStatusChecksSetting } from "../../../data/extension";
+import { useGetStatusChecksSetting } from "../../hooks";
+import Card from "../Card/Card";
+
+export default function StatusChecksSettingCard() {
+  const [statusCheckSetting, setStatusCheckSetting, statusCheckLoading] =
+    useGetStatusChecksSetting();
+
+  return (
+    <Card sx={{ bgcolor: "white" }}>
+      <Stack
+        width="100%"
+        direction="row"
+        alignItems="center"
+        justifyContent="space-between"
+        paddingX={1}
+      >
+        <Typography variant="body2" textAlign="left">
+          Status Checks
+        </Typography>
+        {statusCheckLoading && (
+          <Stack sx={{ alignItems: "center", height: "42px" }}>
+            <CircularProgress />
+          </Stack>
+        )}
+        {!statusCheckLoading && (
+          <Switch
+            checked={statusCheckSetting}
+            onChange={(e) => {
+              setStatusCheckSetting(e.target.checked);
+              saveStatusChecksSetting(e.target.checked).catch((error: any) => {
+                console.error("Failed to set the status check setting", error);
+              });
+            }}
+            inputProps={{ "aria-label": "status-check-setting" }}
+          />
+        )}
+      </Stack>
+
+      <Stack padding={1}>
+        <Typography variant="caption">
+          Turn this on if you want to see the status checks for each pull
+          request
+        </Typography>
+        <br />
+        <Typography variant="caption">
+          This is an experimental feature and the status check reported may not
+          be completely accurate if third party / external tools are used for
+          status checks
+        </Typography>
+      </Stack>
+    </Card>
+  );
+}

src/popup/components/Settings/index.tsx

@@ -4,13 +4,15 @@ import ResetStorageSetting from "./ResetStorageSetting";
 import HeaderClickSetting from "./HeaderClickSetting";
 import AccessTokenSetting from "./AccessTokenSetting";
 import AnimatedExpandSettingCard from "./AnimatedExpandSettingCard";
+import StatusChecksSettingCard from "./StatusChecksSetting";
 
 export default function Settings() {
   return (
     <Stack width="100%" padding={1} spacing={1} bgcolor="whitesmoke">
       <AccessTokenSetting />
       <HeaderClickSetting />
       <AnimatedExpandSettingCard />
+      <StatusChecksSettingCard />
       <ResetStorageSetting />
     </Stack>
   );

src/popup/hooks.tsx

@@ -8,6 +8,7 @@ import {
   getHeaderClickBehavior,
   type HeaderClickBehavior,
   getAnimatedExpandSetting,
+  getStatusChecksSetting,
 } from "../data/extension";
 import GitHubClient, { type RepoData } from "../data";
 
@@ -152,3 +153,29 @@ export function useGetAnimatedExpandSetting() {
 
   return [animatedExpandSetting, setAnimatedExpandSetting, loading] as const;
 }
+
+/**
+ * A hook to fetch the user's configuration for the Status Checks Setting
+ * @returns Returns a loading state variable and the setting value
+ */
+export function useGetStatusChecksSetting() {
+  const [statusChecksSetting, setStatusChecksSetting] =
+    useState<boolean>(false);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    async function getSetting() {
+      const setting = await getStatusChecksSetting();
+      setStatusChecksSetting(setting);
+    }
+    getSetting()
+      .catch((e) => {
+        console.error("Failed to fetch status check setting", e);
+      })
+      .finally(() => {
+        setLoading(false);
+      });
+  }, []);
+
+  return [statusChecksSetting, setStatusChecksSetting, loading] as const;
+}