add DiffEditor to setup rules step

src/components/Setup/SetupItem.tsx

@@ -31,7 +31,7 @@ export default function SetupItem({
         <ArrowIcon aria-label="Item" color="primary" />
       )}
 
-      <Stack spacing={2} alignItems="flex-start">
+      <Stack spacing={2} alignItems="flex-start" style={{ flexGrow: 1 }}>
         <Typography variant="inherit">{title}</Typography>
 
         {children}

src/components/Setup/Step4Rules.tsx

@@ -7,13 +7,14 @@ import {
   Checkbox,
   Button,
   Link,
-  TextField,
+  Grid,
 } from "@mui/material";
 import LoadingButton from "@mui/lab/LoadingButton";
 import CopyIcon from "@src/assets/icons/Copy";
 import InlineOpenInNewIcon from "@src/components/InlineOpenInNewIcon";
 
 import SetupItem from "./SetupItem";
+import DiffEditor from "@src/components/CodeEditor/DiffEditor";
 
 import { name } from "@root/package.json";
 import { useAppContext } from "@src/contexts/AppContext";
@@ -21,7 +22,7 @@ import { CONFIG } from "@src/config/dbPaths";
 import { requiredRules, adminRules, utilFns } from "@src/config/firestoreRules";
 import { rowyRun } from "@src/utils/rowyRun";
 import { runRoutes } from "@src/constants/runRoutes";
-import { useConfirmation } from "@src/components/ConfirmationDialog";
+// import { useConfirmation } from "@src/components/ConfirmationDialog";
 
 export default function Step4Rules({
   rowyRunUrl,
@@ -29,7 +30,7 @@ export default function Step4Rules({
   setCompletion,
 }: ISetupStepBodyProps) {
   const { projectId, getAuthToken } = useAppContext();
-  const { requestConfirmation } = useConfirmation();
+  // const { requestConfirmation } = useConfirmation();
 
   const [hasRules, setHasRules] = useState(completion.rules);
   const [adminRule, setAdminRule] = useState(true);
@@ -97,18 +98,20 @@ export default function Step4Rules({
     }
   };
 
-  const handleSkip = () => {
-    requestConfirmation({
-      title: "Skip rules",
-      body: "This might prevent you or other users in your project from accessing firestore data on Rowy",
-      confirm: "Skip",
-      cancel: "cancel",
-      handleConfirm: async () => {
-        setCompletion((c) => ({ ...c, rules: true }));
-        setHasRules(true);
-      },
-    });
-  };
+  const [showManualMode, setShowManualMode] = useState(false);
+
+  // const handleSkip = () => {
+  //   requestConfirmation({
+  //     title: "Skip rules",
+  //     body: "This might prevent you or other users in your project from accessing firestore data on Rowy",
+  //     confirm: "Skip",
+  //     cancel: "cancel",
+  //     handleConfirm: async () => {
+  //       setCompletion((c) => ({ ...c, rules: true }));
+  //       setHasRules(true);
+  //     },
+  //   });
+  // };
 
   return (
     <>
@@ -138,89 +141,21 @@ export default function Step4Rules({
               label="Allow admins to read and write all documents"
               sx={{ "&&": { ml: -11 / 8, mb: -11 / 8 }, width: "100%" }}
             />
-
-            <Typography
-              variant="body2"
-              component="pre"
-              sx={{
-                width: { sm: "100%", md: 840 - 72 - 32 },
-                height: 136,
-                resize: "both",
-                overflow: "auto",
-
-                "& .comment": { color: "info.dark" },
-              }}
-              dangerouslySetInnerHTML={{
-                __html: rules.replace(
-                  /(\/\/.*$)/gm,
-                  `<span class="comment">$1</span>`
-                ),
-              }}
+            <DiffEditor
+              original={currentRules}
+              modified={newRules}
+              containerProps={{ sx: { width: "100%" } }}
+              minHeight={400}
+              // options={{ renderValidationDecorations: "off" }}
             />
-
-            <Button
-              startIcon={<CopyIcon />}
-              onClick={() => navigator.clipboard.writeText(rules)}
+            <Typography
+              variant="inherit"
+              color={
+                rulesStatus !== "LOADING" && rulesStatus ? "error" : undefined
+              }
             >
-              Copy to clipboard
-            </Button>
-          </>
-        )}
-      </SetupItem>
-
-      {!hasRules && (
-        <SetupItem
-          status="incomplete"
-          title={
-            <>
-              You can add these rules{" "}
-              <Link
-                href={`https://console.firebase.google.com/project/${
-                  projectId || "_"
-                }/firestore/rules`}
-                target="_blank"
-                rel="noopener noreferrer"
-              >
-                in the Firebase Console
-                <InlineOpenInNewIcon />
-              </Link>{" "}
-              or directly below:
-            </>
-          }
-        >
-          <TextField
-            id="new-rules"
-            label="New rules"
-            value={newRules}
-            onChange={(e) => setNewRules(e.target.value)}
-            multiline
-            rows={5}
-            fullWidth
-            sx={{
-              "& .MuiInputBase-input": {
-                fontFamily: "mono",
-                letterSpacing: 0,
-                resize: "vertical",
-              },
-            }}
-          />
-
-          <Typography
-            variant="inherit"
-            color={
-              rulesStatus !== "LOADING" && rulesStatus ? "error" : undefined
-            }
-          >
-            Please check the generated rules first.
-          </Typography>
-
-          <div
-            style={{
-              display: "flex",
-              justifyContent: "space-between",
-            }}
-          >
-            {" "}
+              Please verify the new rules first.
+            </Typography>
             <LoadingButton
               variant="contained"
               color="primary"
@@ -229,13 +164,73 @@ export default function Step4Rules({
             >
               Set Firestore Rules
             </LoadingButton>
-            <Button onClick={handleSkip}>Skip</Button>
+            {rulesStatus !== "LOADING" && typeof rulesStatus === "string" && (
+              <Typography variant="caption" color="error">
+                {rulesStatus}
+              </Typography>
+            )}
+            {!showManualMode && (
+              <Link
+                component="button"
+                variant="body2"
+                onClick={() => setShowManualMode(true)}
+              >
+                Alternatively, add these rules in the Firebase Console
+              </Link>
+            )}
+          </>
+        )}
+      </SetupItem>
+
+      {!hasRules && showManualMode && (
+        <SetupItem
+          status="incomplete"
+          title="Alternatively, you can add these rules in the Firebase Console."
+        >
+          <Typography
+            variant="caption"
+            component="pre"
+            sx={{
+              width: "100%",
+              height: 400,
+              resize: "both",
+              overflow: "auto",
+
+              "& .comment": { color: "info.dark" },
+            }}
+            dangerouslySetInnerHTML={{
+              __html: rules.replace(
+                /(\/\/.*$)/gm,
+                `<span class="comment">$1</span>`
+              ),
+            }}
+          />
+
+          <div>
+            <Grid container spacing={1}>
+              <Grid item>
+                <Button
+                  startIcon={<CopyIcon />}
+                  onClick={() => navigator.clipboard.writeText(rules)}
+                >
+                  Copy to clipboard
+                </Button>
+              </Grid>
+
+              <Grid item>
+                <Button
+                  href={`https://console.firebase.google.com/project/${
+                    projectId || "_"
+                  }/firestore/rules`}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  Firebase Console
+                  <InlineOpenInNewIcon />
+                </Button>
+              </Grid>
+            </Grid>
           </div>
-          {rulesStatus !== "LOADING" && typeof rulesStatus === "string" && (
-            <Typography variant="caption" color="error">
-              {rulesStatus}
-            </Typography>
-          )}
         </SetupItem>
       )}
     </>

src/pages/Setup.tsx

@@ -60,6 +60,8 @@ export interface ISetupStepBodyProps {
   rowyRunUrl: string;
 }
 
+const BASE_WIDTH = 1024;
+
 const checkAllSteps = async (
   rowyRunUrl: string,
   currentUser: firebase.default.User | null | undefined,
@@ -256,7 +258,7 @@ export default function SetupPage() {
             alpha(theme.palette.background.paper, 0.5),
           backdropFilter: "blur(20px) saturate(150%)",
 
-          maxWidth: 840,
+          maxWidth: BASE_WIDTH,
           width: (theme) => `calc(100vw - ${theme.spacing(2)})`,
           maxHeight: (theme) =>
             `calc(${
@@ -264,7 +266,7 @@ export default function SetupPage() {
             } - ${theme.spacing(
               2
             )} - env(safe-area-inset-top) - env(safe-area-inset-bottom))`,
-          height: 840 * 0.75,
+          height: BASE_WIDTH * 0.75,
           resize: "both",
 
           p: 0,