added a new settings card for the status checks

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/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;
+}