@authhero/react-admin 0.15.0 → 0.16.0

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @authhero/react-admin
 
+## 0.16.0
+
+### Minor Changes
+
+- 17d73eb: Change name of organization flag and add OR support in lucence queries
+- e542773: Fixes for syncing resources servers and global roles
+
 ## 0.15.0
 
 ### Minor Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@authhero/react-admin",
-  "version": "0.15.0",
+  "version": "0.16.0",
   "private": false,
   "repository": {
     "type": "git",

package/src/App.spec.tsx

@@ -3,8 +3,8 @@ import { test, vi, expect } from "vitest";
 import { App } from "./App";
 
 // Mock all the react-admin components and dependencies
-vi.mock('react-admin', async (importOriginal) => {
-  const actual = await importOriginal() as any;
+vi.mock("react-admin", async (importOriginal) => {
+  const actual = (await importOriginal()) as any;
   return {
     ...actual,
     Admin: ({ children }: any) => <div data-testid="admin">{children}</div>,
@@ -13,24 +13,31 @@ vi.mock('react-admin', async (importOriginal) => {
   };
 });
 
-vi.mock('./dataProvider', () => ({
-  getDataproviderForTenant: () => Promise.resolve(() => Promise.resolve({ data: [] })),
+vi.mock("./dataProvider", () => ({
+  getDataproviderForTenant: () =>
+    Promise.resolve(() => Promise.resolve({ data: [] })),
   getDataprovider: () => Promise.resolve(() => Promise.resolve({ data: [] })),
 }));
 
-vi.mock('./authProvider', () => ({
+vi.mock("./authProvider", () => ({
   getAuthProvider: () => ({}),
 }));
 
-vi.mock('./utils/domainUtils', () => ({
-  getSelectedDomainFromStorage: () => ({ url: 'test.com', clientId: 'test' }),
+vi.mock("./utils/domainUtils", () => ({
+  getSelectedDomainFromStorage: () => ({ url: "test.com", clientId: "test" }),
   getDomainFromStorage: () => [],
   buildUrlWithProtocol: (url: string) => `https://${url}`,
 }));
 
-vi.mock('react-router-dom', () => ({
+vi.mock("react-router-dom", () => ({
   useNavigate: () => vi.fn(),
-  useLocation: () => ({ pathname: '/' }),
+  useLocation: () => ({ pathname: "/" }),
+}));
+
+// Mock color picker to avoid CSS import issues in tests
+vi.mock("react-admin-color-picker", () => ({
+  ColorInput: () => null,
+  ColorField: () => null,
 }));
 
 test.skip("should pass", async () => {
@@ -38,5 +45,5 @@ test.skip("should pass", async () => {
   render(<App tenantId="test" />);
 
   // Just check that something renders
-  expect(screen.getByTestId('admin')).toBeTruthy();
+  expect(screen.getByTestId("admin")).toBeTruthy();
 }, 10000);

package/src/components/roles/edit.tsx

@@ -268,6 +268,26 @@ const AddRolePermissionButton = () => {
                     </li>
                   )}
                 />
+                {!loadingPermissions && availablePermissions.length > 0 && (
+                  <Box sx={{ mt: 1, display: "flex", gap: 1 }}>
+                    <Button
+                      size="small"
+                      variant="outlined"
+                      onClick={() => setSelectedPermissions([...availablePermissions])}
+                      disabled={selectedPermissions.length === availablePermissions.length}
+                    >
+                      Select All ({availablePermissions.length})
+                    </Button>
+                    <Button
+                      size="small"
+                      variant="outlined"
+                      onClick={() => setSelectedPermissions([])}
+                      disabled={selectedPermissions.length === 0}
+                    >
+                      Clear Selection
+                    </Button>
+                  </Box>
+                )}
               </Box>
 
               {!loadingPermissions && availablePermissions.length === 0 && (

package/src/components/tenants/edit.tsx

@@ -1,4 +1,5 @@
 import {
+  BooleanInput,
   DateField,
   Edit,
   FieldTitle,
@@ -48,6 +49,13 @@ export function TenantsEdit() {
           <ColorInput source="secondary_color" label="Secondary Color" />
           <TextInput source="logo" label="Logo" />
         </TabbedForm.Tab>
+        <TabbedForm.Tab label="Settings">
+          <BooleanInput
+            source="flags.inherit_global_permissions_in_organizations"
+            label="Inherit Tenant Permissions in Organizations"
+            helperText="When enabled, tenant-level permissions will be inherited when users request organization-scoped tokens"
+          />
+        </TabbedForm.Tab>
       </TabbedForm>
     </Edit>
   );

package/src/components/users/edit.tsx

@@ -988,85 +988,105 @@ const UserRolesTable = ({
 
   return (
     <Box sx={{ mt: 2 }}>
-      <table style={{ width: "100%", borderCollapse: "collapse" }}>
-        <thead>
-          <tr style={{ backgroundColor: "#f5f5f5" }}>
-            <th
-              style={{
+      <Box component="table" sx={{ width: "100%", borderCollapse: "collapse" }}>
+        <Box component="thead" sx={{ bgcolor: "action.hover" }}>
+          <tr>
+            <Box
+              component="th"
+              sx={{
                 padding: "12px",
                 textAlign: "left",
-                borderBottom: "1px solid #ddd",
+                borderBottom: 1,
+                borderColor: "divider",
               }}
             >
               Role
-            </th>
-            <th
-              style={{
+            </Box>
+            <Box
+              component="th"
+              sx={{
                 padding: "12px",
                 textAlign: "left",
-                borderBottom: "1px solid #ddd",
+                borderBottom: 1,
+                borderColor: "divider",
               }}
             >
               Description
-            </th>
-            <th
-              style={{
+            </Box>
+            <Box
+              component="th"
+              sx={{
                 padding: "12px",
                 textAlign: "left",
-                borderBottom: "1px solid #ddd",
+                borderBottom: 1,
+                borderColor: "divider",
               }}
             >
               Organization
-            </th>
-            <th
-              style={{
+            </Box>
+            <Box
+              component="th"
+              sx={{
                 padding: "12px",
                 textAlign: "left",
-                borderBottom: "1px solid #ddd",
+                borderBottom: 1,
+                borderColor: "divider",
               }}
             >
               ID
-            </th>
-            <th
-              style={{
+            </Box>
+            <Box
+              component="th"
+              sx={{
                 padding: "12px",
                 textAlign: "left",
-                borderBottom: "1px solid #ddd",
+                borderBottom: 1,
+                borderColor: "divider",
               }}
             >
               Actions
-            </th>
+            </Box>
           </tr>
-        </thead>
+        </Box>
         <tbody>
           {roles.map((role) => (
-            <tr
+            <Box
+              component="tr"
               key={`${role.id}-${role.organization_id || "global"}`}
-              style={{ borderBottom: "1px solid #eee" }}
+              sx={{ borderBottom: 1, borderColor: "divider" }}
             >
-              <td style={{ padding: "12px" }}>{role.name}</td>
-              <td style={{ padding: "12px" }}>{role.description || "-"}</td>
-              <td style={{ padding: "12px" }}>
-                <span
-                  style={{
-                    color: role.role_context === "global" ? "#666" : "#1976d2",
+              <Box component="td" sx={{ padding: "12px" }}>
+                {role.name}
+              </Box>
+              <Box component="td" sx={{ padding: "12px" }}>
+                {role.description || "-"}
+              </Box>
+              <Box component="td" sx={{ padding: "12px" }}>
+                <Box
+                  component="span"
+                  sx={{
+                    color:
+                      role.role_context === "global"
+                        ? "text.secondary"
+                        : "primary.main",
                     fontStyle:
                       role.role_context === "global" ? "italic" : "normal",
                   }}
                 >
                   {role.organization_name}
-                </span>
-              </td>
-              <td
-                style={{
+                </Box>
+              </Box>
+              <Box
+                component="td"
+                sx={{
                   padding: "12px",
                   fontFamily: "monospace",
                   fontSize: "0.9em",
                 }}
               >
                 {role.id}
-              </td>
-              <td style={{ padding: "12px" }}>
+              </Box>
+              <Box component="td" sx={{ padding: "12px" }}>
                 <IconButton
                   onClick={() => handleRemoveRole(role)}
                   color="error"
@@ -1075,21 +1095,26 @@ const UserRolesTable = ({
                 >
                   <DeleteIcon />
                 </IconButton>
-              </td>
-            </tr>
+              </Box>
+            </Box>
           ))}
           {roles.length === 0 && (
             <tr>
-              <td
+              <Box
+                component="td"
                 colSpan={5}
-                style={{ padding: "24px", textAlign: "center", color: "#666" }}
+                sx={{
+                  padding: "24px",
+                  textAlign: "center",
+                  color: "text.secondary",
+                }}
               >
                 No roles assigned
-              </td>
+              </Box>
             </tr>
           )}
         </tbody>
-      </table>
+      </Box>
     </Box>
   );
 };

package/vite.config.ts

@@ -12,10 +12,11 @@ export default defineConfig({
     host: true,
   },
   base: "./",
-  // @ts-expect-error
+  // @ts-expect-error
   test: {
     environment: "jsdom", // Set JSDOM as the default test environment
     globals: true, // Make test globals available
+    css: true, // Enable CSS processing for tests
     env: {
       VITE_AUTH0_API_URL: "http://localhost:3000",
       VITE_AUTH0_DOMAIN: "test.auth0.com",
@@ -23,7 +24,15 @@ export default defineConfig({
     server: {
       deps: {
         // Workaround for React Admin ES module issues
-        inline: ["ra-ui-materialui", "ra-core", "react-admin", "@mui/material", "@mui/icons-material"],
+        inline: [
+          "ra-ui-materialui",
+          "ra-core",
+          "react-admin",
+          "@mui/material",
+          "@mui/icons-material",
+          "react-admin-color-picker",
+          "react-color",
+        ],
       },
     },
   },