Add scope support

admin/src/components/scope/Rules.tsx

@@ -0,0 +1,55 @@
+import { gql, useQuery } from "@apollo/client";
+import {
+  CircularProgress,
+  createStyles,
+  List,
+  makeStyles,
+  Theme,
+} from "@material-ui/core";
+import { Alert } from "@material-ui/lab";
+import React from "react";
+import RuleListItem from "./RuleListItem";
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    rulesList: {
+      backgroundColor: theme.palette.background.paper,
+    },
+  })
+);
+
+export const SCOPE = gql`
+  query Scope {
+    scope {
+      url
+    }
+  }
+`;
+
+function Rules(): JSX.Element {
+  const classes = useStyles();
+  const { loading, error, data } = useQuery(SCOPE);
+
+  return (
+    <div>
+      {loading && <CircularProgress />}
+      {error && (
+        <Alert severity="error">Error fetching scope: {error.message}</Alert>
+      )}
+      {data?.scope.length > 0 && (
+        <List className={classes.rulesList}>
+          {data.scope.map((rule, index) => (
+            <RuleListItem
+              key={index}
+              rule={rule}
+              scope={data.scope}
+              index={index}
+            />
+          ))}
+        </List>
+      )}
+    </div>
+  );
+}
+
+export default Rules;