@authhero/react-admin 0.14.0 → 0.15.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @authhero/react-admin
 
+## 0.15.0
+
+### Minor Changes
+
+- aaf0aa0: Fix paging issue for scopes
+
 ## 0.14.0
 
 ### Minor Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@authhero/react-admin",
-  "version": "0.14.0",
+  "version": "0.15.0",
   "private": false,
   "repository": {
     "type": "git",
@@ -26,6 +26,7 @@
     "react-admin": "^5.8.0",
     "react-admin-color-picker": "^1.0.3",
     "react-dom": "^19.1.0",
+    "react-hook-form": "^7.69.0",
     "react-router-dom": "^7.6.0",
     "recharts": "^2.15.0"
   },

package/src/components/resource-servers/edit.tsx

@@ -2,8 +2,6 @@ import {
   Edit,
   TextInput,
   BooleanInput,
-  ArrayInput,
-  SimpleFormIterator,
   TextField,
   TabbedForm,
   required,
@@ -11,7 +9,11 @@ import {
   FormDataConsumer,
   useRecordContext,
 } from "react-admin";
-import { Stack, Alert } from "@mui/material";
+import { Stack, Alert, Pagination, Box, Typography, Button, IconButton, TextField as MuiTextField } from "@mui/material";
+import DeleteIcon from "@mui/icons-material/Delete";
+import AddIcon from "@mui/icons-material/Add";
+import { useState, useMemo, useCallback } from "react";
+import { useFormContext, useWatch } from "react-hook-form";
 
 function SystemEntityAlert() {
   const record = useRecordContext();
@@ -26,6 +28,131 @@ function SystemEntityAlert() {
   );
 }
 
+const SCOPES_PER_PAGE = 10;
+
+interface Scope {
+  value: string;
+  description?: string;
+}
+
+function PaginatedScopesInput({ disabled }: { disabled?: boolean }) {
+  const { setValue, getValues } = useFormContext();
+  const scopes: Scope[] = useWatch({ name: "scopes" }) || [];
+  const [page, setPage] = useState(1);
+
+  const totalPages = Math.max(1, Math.ceil(scopes.length / SCOPES_PER_PAGE));
+  
+  const paginatedScopes = useMemo(() => {
+    const start = (page - 1) * SCOPES_PER_PAGE;
+    const end = start + SCOPES_PER_PAGE;
+    return scopes.slice(start, end).map((scope, index) => ({
+      ...scope,
+      actualIndex: start + index,
+    }));
+  }, [scopes, page]);
+
+  const handlePageChange = (_event: React.ChangeEvent<unknown>, value: number) => {
+    setPage(value);
+  };
+
+  const handleAdd = useCallback(() => {
+    const currentScopes = getValues("scopes") || [];
+    setValue("scopes", [...currentScopes, { value: "", description: "" }], { shouldDirty: true });
+    // Navigate to the last page where the new item will be
+    const newTotalPages = Math.ceil((currentScopes.length + 1) / SCOPES_PER_PAGE);
+    setPage(newTotalPages);
+  }, [getValues, setValue]);
+
+  const handleRemove = useCallback((actualIndex: number) => {
+    const currentScopes = getValues("scopes") || [];
+    const newScopes = currentScopes.filter((_: Scope, i: number) => i !== actualIndex);
+    setValue("scopes", newScopes, { shouldDirty: true });
+    // Adjust page if we removed the last item on current page
+    const newTotalPages = Math.ceil(newScopes.length / SCOPES_PER_PAGE);
+    if (page > newTotalPages && newTotalPages > 0) {
+      setPage(newTotalPages);
+    }
+  }, [getValues, setValue, page]);
+
+  const handleScopeChange = useCallback((actualIndex: number, field: "value" | "description", newValue: string) => {
+    const currentScopes = getValues("scopes") || [];
+    const newScopes = [...currentScopes];
+    newScopes[actualIndex] = { ...newScopes[actualIndex], [field]: newValue };
+    setValue("scopes", newScopes, { shouldDirty: true });
+  }, [getValues, setValue]);
+
+  return (
+    <Box>
+      <Box sx={{ display: "flex", justifyContent: "space-between", alignItems: "center", mb: 2 }}>
+        <Typography variant="body2" color="text.secondary">
+          {scopes.length} scope{scopes.length !== 1 ? "s" : ""} total
+        </Typography>
+        {!disabled && (
+          <Button
+            startIcon={<AddIcon />}
+            onClick={handleAdd}
+            size="small"
+            variant="outlined"
+          >
+            Add Scope
+          </Button>
+        )}
+      </Box>
+
+      {paginatedScopes.map((scope) => (
+        <Stack
+          key={scope.actualIndex}
+          spacing={2}
+          direction="row"
+          sx={{ width: "100%", alignItems: "flex-start", mb: 2 }}
+        >
+          <MuiTextField
+            value={scope.value || ""}
+            onChange={(e) => handleScopeChange(scope.actualIndex, "value", e.target.value)}
+            label="Scope Name"
+            helperText="e.g., read:users, write:posts"
+            sx={{ flex: 1 }}
+            disabled={disabled}
+            size="small"
+            required
+          />
+          <MuiTextField
+            value={scope.description || ""}
+            onChange={(e) => handleScopeChange(scope.actualIndex, "description", e.target.value)}
+            label="Description"
+            helperText="What this scope allows"
+            sx={{ flex: 2 }}
+            disabled={disabled}
+            size="small"
+          />
+          {!disabled && (
+            <IconButton
+              onClick={() => handleRemove(scope.actualIndex)}
+              color="error"
+              sx={{ mt: 1 }}
+            >
+              <DeleteIcon />
+            </IconButton>
+          )}
+        </Stack>
+      ))}
+
+      {totalPages > 1 && (
+        <Box sx={{ display: "flex", justifyContent: "center", mt: 2 }}>
+          <Pagination
+            count={totalPages}
+            page={page}
+            onChange={handlePageChange}
+            color="primary"
+            showFirstButton
+            showLastButton
+          />
+        </Box>
+      )}
+    </Box>
+  );
+}
+
 function ResourceServerForm() {
   const record = useRecordContext();
   const isSystem = record?.is_system;
@@ -115,31 +242,7 @@ function ResourceServerForm() {
       </TabbedForm.Tab>
 
       <TabbedForm.Tab label="Scopes">
-        <ArrayInput source="scopes" label="" disabled={isSystem}>
-          <SimpleFormIterator disableAdd={isSystem} disableRemove={isSystem} disableReordering={isSystem}>
-            <Stack
-              spacing={2}
-              direction="row"
-              sx={{ width: "100%", alignItems: "flex-start" }}
-            >
-              <TextInput
-                source="value"
-                validate={[required()]}
-                label="Scope Name"
-                helperText="e.g., read:users, write:posts"
-                sx={{ flex: 1 }}
-                disabled={isSystem}
-              />
-              <TextInput
-                source="description"
-                label="Description"
-                helperText="What this scope allows"
-                sx={{ flex: 2 }}
-                disabled={isSystem}
-              />
-            </Stack>
-          </SimpleFormIterator>
-        </ArrayInput>
+        <PaginatedScopesInput disabled={isSystem} />
       </TabbedForm.Tab>
     </TabbedForm>
   );