feat: add raw settings (#1)

.gitignore

@@ -21,4 +21,6 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
-.env
+.env
+
+parsed-summary.txt

package.json

@@ -16,6 +16,7 @@
     "@types/node": "^16.18.91",
     "@types/react": "^18.2.71",
     "@types/react-dom": "^18.2.22",
+    "@uiw/react-json-view": "^2.0.0-alpha.27",
     "lz-string": "^1.5.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -37,7 +38,12 @@
     ],
     "rules": {
       "no-unused-vars": "warn",
-      "max-len": ["warn", { "code": 250 }]
+      "max-len": [
+        "warn",
+        {
+          "code": 250
+        }
+      ]
     }
   },
   "browserslist": {

scripts/update.coverage.js

@@ -36,8 +36,6 @@ repositories.forEach((repo) => {
   const updatedCoverage = Object.keys(total).reduce((acc, key) => {
     const current = total[key].pct;
     const previous = storedCoverage?.[key] || 0;
-
-    console.warn("storedCoverage", storedCoverage);
     const diff = current - previous;
 
     if (acc.current === undefined) {
@@ -51,7 +49,6 @@ repositories.forEach((repo) => {
     }
 
     acc.current[key] = current;
-    acc.previous[key] = previous;
     acc.diff[key] = diff;
     acc.changed = diff !== 0 && previous !== 0;
 
@@ -63,4 +60,7 @@ repositories.forEach((repo) => {
 });
 
 console.warn("parsedSummary", parsedSummary);
-fs.writeFileSync(parsedSummaryPath, lz.compressToBase64(JSON.stringify(parsedSummary)));
+fs.writeFileSync(
+  parsedSummaryPath,
+  lz.compressToBase64(JSON.stringify(parsedSummary))
+);

src/App.tsx

@@ -11,7 +11,8 @@ export const ConfigContext = React.createContext<{
   octokit: GitService | null;
   repositorySettings: Record<string, boolean>;
   handleRepositorySelect: (repository: string, selected: boolean) => void;
-}>({ octokit: null, repositorySettings: {}, handleRepositorySelect: () => {}});
+  saveRawSettings: (settings: Record<string, boolean> | undefined) => void;
+}>({ octokit: null, repositorySettings: {}, handleRepositorySelect: () => { }, saveRawSettings: () => { } });
 
 
 function App() {
@@ -84,6 +85,13 @@ function App() {
     []
   );
 
+  const saveRawSettings = React.useCallback((settings: Record<string, boolean> | undefined) => {
+    if (!settings) return;
+
+    setRepositorySettings(settings);
+    localStorage.setItem("REPOSITORY_CONFIG", JSON.stringify(settings));
+  }, []);
+
   React.useEffect(() => {
     const repositoryConfig = JSON.parse(
       localStorage.getItem("REPOSITORY_CONFIG") ?? "{}"
@@ -94,7 +102,7 @@ function App() {
   return (
     <>
       <ConfigContext.Provider
-        value={{ octokit, repositorySettings, handleRepositorySelect,}}
+        value={{ octokit, repositorySettings, handleRepositorySelect, saveRawSettings }}
       >
         <AppBar
           position="static"

src/SettingsDrawer.tsx

@@ -1,9 +1,10 @@
-import { Drawer, List, Typography } from "@mui/material";
+import { Box, Drawer, List, Switch, Typography } from "@mui/material";
 import React from "react";
 import { Organization } from "./models/Organization";
 import { ConfigContext } from "./App";
 import { RepoSettingAccordion } from "./components/RepoSettingAccordion";
 import { useQuery } from "@tanstack/react-query";
+import { ExportSettings } from "./components/ExportSettings";
 
 export type SettingsDrawerProps = {
   opened: boolean;
@@ -25,20 +26,36 @@ export const SettingsDrawer: React.FC<SettingsDrawerProps> = ({
     enabled: !!octokit,
   });
 
+  const [showRawSettings, setShowRawSettings] = React.useState(false);
+
   const orgList = React.useMemo(() => orgs.map((org) => (
     <RepoSettingAccordion key={org.id} org={org} type="org" />
   )), [orgs]);
 
+  const handleClose = React.useCallback(() => {
+    setShowRawSettings(false);
+    onClose();
+  }, [onClose]);
+
   return (
-    <Drawer anchor="left" open={opened} onClose={() => onClose()}>
-      <Typography variant="h5" sx={{ m:3 }}>
-        Organizations: 
-      </Typography>
-      <List sx={{ mr: 2, gap: 2 }}>
-        <RepoSettingAccordion type="user" />
-        <RepoSettingAccordion type="starred" />
-        {orgList}
-      </List>
+    <Drawer anchor="left" open={opened} onClose={handleClose}>
+      <Box sx={{ display: 'flex', alignItems: 'center', mr: 2 }}>
+        <Typography variant="h5" sx={{ m: 3, mr: 'auto' }}>
+          Organizations:
+        </Typography>
+        <Typography variant="body1" sx={{ m: 3 }}>
+          Show Raw Settings
+        </Typography>
+        <Switch onChange={() => setShowRawSettings((prev) => !prev)} />
+      </Box>
+      <Box sx={{ minWidth: 600, mr: 2, gap: 2 }}>
+        <ExportSettings isOpen={showRawSettings} />
+        <List sx={{ mr: 2, gap: 2, display: showRawSettings ? 'none' : 'block' }}>
+          <RepoSettingAccordion type="user" />
+          <RepoSettingAccordion type="starred" />
+          {orgList}
+        </List>
+      </Box>
     </Drawer>
   );
 };

src/components/ExportSettings.tsx

@@ -0,0 +1,101 @@
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+import JsonViewEditor from '@uiw/react-json-view/editor';
+import React, { useEffect, useMemo } from 'react';
+import { githubLightTheme } from '@uiw/react-json-view/githubLight';
+import { IconButton, TextField } from '@mui/material';
+import EditIcon from '@mui/icons-material/Edit';
+import SaveIcon from '@mui/icons-material/Save';
+import { ConfigContext } from '../App';
+
+export type ExportSettingsProps = {
+  isOpen: boolean;
+}
+
+export const ExportSettings: React.FC<ExportSettingsProps> = ({ isOpen }) => {
+  const [inputSettings, setInputSettings] = React.useState<string>('');
+  const [error, setError] = React.useState<string>('');
+  const [isEditing, setIsEditing] = React.useState<boolean>(false);
+  const [isValidJson, setIsValidJson] = React.useState<boolean>(true);
+  const { repositorySettings, saveRawSettings } = React.useContext(ConfigContext);
+
+  const rows = useMemo(() => {
+    const settingsKeysCount = Object.keys(repositorySettings).length;
+    return settingsKeysCount > 0 ? settingsKeysCount + 2 : 4;
+  }, [repositorySettings]);
+
+  useEffect(() => {
+    setInputSettings(JSON.stringify(repositorySettings, null, 2));
+  }, [repositorySettings]);
+
+  useEffect(() => {
+    if (isOpen) return;
+
+    setIsEditing(false);
+    setIsValidJson(true);
+    setError('');
+    setInputSettings(JSON.stringify(repositorySettings, null, 2));
+  }, [isOpen, repositorySettings]);
+
+  const regexKey = /^[A-Za-z0-9\-]+\/[A-Za-z0-9\.\-_]+$/;
+
+  const validateJson = (input: string) => {
+    try {
+      const parsedJson = JSON.parse(input);
+
+      for (let key in parsedJson) {
+        if (!regexKey.test(key) || typeof parsedJson[key] !== 'boolean') {
+          throw new Error(`Invalid key or value. Key: "${key}", Value: ${parsedJson[key]}`);
+        }
+      }
+
+      setIsValidJson(true);
+      setError('');
+    } catch (error: any) {
+      setIsValidJson(false);
+      setError(error.message);
+    }
+  };
+
+  const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const value = e.target.value;
+    setInputSettings(value);
+    validateJson(value);
+  }
+
+  const onSave = () => {
+    if (!isValidJson) return;
+
+    try {
+      const parsedJson = JSON.parse(inputSettings) as Record<string, boolean>;
+      saveRawSettings(parsedJson);
+      setIsEditing(false);
+      setError('');
+    } catch (error: any) {
+      setError(error.message);
+    }
+  };
+
+  const onClick = () => {
+    if (isEditing) { onSave(); }
+    else { setIsEditing((prev) => !prev); }
+  };
+
+  if (!isOpen) return null;
+
+  return (
+    <Box component="form" noValidate autoComplete="off" sx={{ mr: 1, mb: 2 }}>
+      <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
+        <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', widows: '100%' }}>
+          <Typography variant="body1">RAW Settings</Typography>
+          <IconButton aria-label="close" onClick={onClick} disabled={!!error}>{isEditing ? <SaveIcon /> : <EditIcon />}</IconButton>
+        </Box>
+        {error && <Typography color="error" sx={{ mb: 1 }}>{error}</Typography>}
+      </Box>
+      {isEditing
+        ? <TextField error={!isValidJson} label="JSON" value={inputSettings} fullWidth multiline rows={rows} onChange={onChange} sx={{ fontSize: 13, fontFamily: '-apple-system, "system-ui", "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif' }} />
+        : <JsonViewEditor editable={true} value={repositorySettings} style={githubLightTheme} displayDataTypes={false} />
+      }
+    </Box>
+  );
+};

src/components/PullRequestChecks.tsx

@@ -40,10 +40,12 @@ export const PullRequestChecks: React.FC<PullRequestChecksProps> = ({
   });
 
   const allChecksPassed = React.useMemo(
-    () => checks.every((check) => check.conclusion === "success"),
+    () => checks.every((check) => check.conclusion === "success" || check.conclusion === "skipped"),
     [checks]
   );
 
+  if (checks.length > 0 && checks.some(({ conclusion }) => conclusion !== 'success')) console.warn("checks", checks);
+
   return (
     <>
       <Typography