@authhero/react-admin 0.15.0 → 0.17.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @authhero/react-admin
 
+## 0.17.0
+
+### Minor Changes
+
+- c8c83e3: Add a admin:organizations permission to hande organizations in the control_plane
+
+## 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.17.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/settings/edit.tsx

@@ -9,9 +9,32 @@ import {
 } from "react-admin";
 import { Stack } from "@mui/material";
 
+// Recursively remove null/undefined values from an object
+function removeNullValues(obj: Record<string, unknown>): Record<string, unknown> {
+  const result: Record<string, unknown> = {};
+  for (const [key, value] of Object.entries(obj)) {
+    if (value === null || value === undefined) {
+      continue;
+    }
+    if (typeof value === "object" && !Array.isArray(value)) {
+      const cleaned = removeNullValues(value as Record<string, unknown>);
+      if (Object.keys(cleaned).length > 0) {
+        result[key] = cleaned;
+      }
+    } else {
+      result[key] = value;
+    }
+  }
+  return result;
+}
+
 export function SettingsEdit() {
+  const transform = (data: Record<string, unknown>) => {
+    return removeNullValues(data);
+  };
+
   return (
-    <Edit>
+    <Edit transform={transform}>
       <TabbedForm>
         <TabbedForm.Tab label="General">
           <Stack spacing={2}>
@@ -215,6 +238,11 @@ export function SettingsEdit() {
               source="flags.mfa_show_factor_list_on_enrollment"
               label="MFA Show Factor List on Enrollment"
             />
+            <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"
+            />
           </Stack>
         </TabbedForm.Tab>
 

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",
+        ],
       },
     },
   },

package/src/components/TenantsAppBar.tsx

@@ -1,21 +0,0 @@
-// Create a custom AppBar specifically for TenantsApp
-import { AppBar as ReactAdminAppBar, TitlePortal } from "react-admin";
-import { Box } from "@mui/material";
-
-interface TenantsAppBarProps {
-  domainSelectorButton?: React.ReactNode;
-  [key: string]: any;
-}
-
-export function TenantsAppBar(props: TenantsAppBarProps) {
-  const { domainSelectorButton, ...rest } = props;
-  
-  return (
-    <ReactAdminAppBar {...rest}>
-      <TitlePortal />
-      <Box sx={{ display: "flex", alignItems: "center", flex: 1, justifyContent: "flex-end" }}>
-        {domainSelectorButton}
-      </Box>
-    </ReactAdminAppBar>
-  );
-}

package/src/components/tenants/edit.tsx

@@ -1,54 +0,0 @@
-import {
-  DateField,
-  Edit,
-  FieldTitle,
-  Labeled,
-  SelectInput,
-  TabbedForm,
-  TextInput,
-} from "react-admin";
-import { ColorInput } from "react-admin-color-picker";
-
-export function TenantsEdit() {
-  return (
-    <Edit>
-      <TabbedForm>
-        <TabbedForm.Tab label="Info">
-          <TextInput source="id" />
-          <TextInput source="name" />
-          <TextInput source="audience" label="Audience" />
-          <TextInput source="support_url" label="Support Url" />
-          <Labeled label={<FieldTitle source="created_at" />}>
-            <DateField source="created_at" showTime={true} />
-          </Labeled>
-          <Labeled label={<FieldTitle source="updated_at" />}>
-            <DateField source="updated_at" showTime={true} />
-          </Labeled>
-        </TabbedForm.Tab>
-        <TabbedForm.Tab label="Communication">
-          <TextInput source="sender_email" />
-          <TextInput source="sender_name" />
-        </TabbedForm.Tab>
-        <TabbedForm.Tab label="Style">
-          <SelectInput
-            source="language"
-            label="Languages"
-            choices={[
-              { id: "en", name: "English" },
-              { id: "nb", name: "Norwegian" },
-              { id: "sv", name: "Swedish" },
-              { id: "it", name: "Italian" },
-              { id: "pl", name: "Polish" },
-              { id: "da", name: "Danish" },
-              { id: "cs", name: "Czech" },
-              { id: "fi", name: "Finnish" },
-            ]}
-          />
-          <ColorInput source="primary_color" label="Primary Color" />
-          <ColorInput source="secondary_color" label="Secondary Color" />
-          <TextInput source="logo" label="Logo" />
-        </TabbedForm.Tab>
-      </TabbedForm>
-    </Edit>
-  );
-}

package/src/components/themes/edit.tsx

@@ -1,200 +0,0 @@
-import {
-  Edit,
-  TextInput,
-  NumberInput,
-  BooleanInput,
-  SelectInput,
-  SimpleForm,
-} from "react-admin";
-import { ColorInput } from "react-admin-color-picker";
-
-export function ThemesEdit() {
-  return (
-    <Edit>
-      <SimpleForm>
-        <TextInput source="displayName" label="Display Name" />
-
-        {/* Colors Section */}
-        <h3 style={{ marginTop: 24, marginBottom: 16 }}>Colors</h3>
-        <ColorInput source="colors.primary_button" label="Primary Button" />
-        <ColorInput
-          source="colors.primary_button_label"
-          label="Primary Button Label"
-        />
-        <ColorInput
-          source="colors.secondary_button_border"
-          label="Secondary Button Border"
-        />
-        <ColorInput
-          source="colors.secondary_button_label"
-          label="Secondary Button Label"
-        />
-        <ColorInput source="colors.base_focus_color" label="Base Focus Color" />
-        <ColorInput source="colors.base_hover_color" label="Base Hover Color" />
-        <ColorInput source="colors.body_text" label="Body Text" />
-        <SelectInput
-          source="colors.captcha_widget_theme"
-          label="Captcha Widget Theme"
-          choices={[{ id: "auto", name: "Auto" }]}
-        />
-        <ColorInput source="colors.error" label="Error" />
-        <ColorInput source="colors.header" label="Header" />
-        <ColorInput source="colors.icons" label="Icons" />
-        <ColorInput source="colors.input_background" label="Input Background" />
-        <ColorInput source="colors.input_border" label="Input Border" />
-        <ColorInput
-          source="colors.input_filled_text"
-          label="Input Filled Text"
-        />
-        <ColorInput
-          source="colors.input_labels_placeholders"
-          label="Input Labels/Placeholders"
-        />
-        <ColorInput
-          source="colors.links_focused_components"
-          label="Links/Focused Components"
-        />
-        <ColorInput source="colors.success" label="Success" />
-        <ColorInput
-          source="colors.widget_background"
-          label="Widget Background"
-        />
-        <ColorInput source="colors.widget_border" label="Widget Border" />
-
-        {/* Borders Section */}
-        <h3 style={{ marginTop: 24, marginBottom: 16 }}>Borders</h3>
-        <NumberInput
-          source="borders.button_border_radius"
-          label="Button Border Radius"
-        />
-        <NumberInput
-          source="borders.button_border_weight"
-          label="Button Border Weight"
-        />
-        <SelectInput
-          source="borders.buttons_style"
-          label="Buttons Style"
-          choices={[
-            { id: "pill", name: "Pill" },
-            { id: "rounded", name: "Rounded" },
-            { id: "sharp", name: "Sharp" },
-          ]}
-        />
-        <NumberInput
-          source="borders.input_border_radius"
-          label="Input Border Radius"
-        />
-        <NumberInput
-          source="borders.input_border_weight"
-          label="Input Border Weight"
-        />
-        <SelectInput
-          source="borders.inputs_style"
-          label="Inputs Style"
-          choices={[
-            { id: "pill", name: "Pill" },
-            { id: "rounded", name: "Rounded" },
-            { id: "sharp", name: "Sharp" },
-          ]}
-        />
-        <BooleanInput
-          source="borders.show_widget_shadow"
-          label="Show Widget Shadow"
-        />
-        <NumberInput
-          source="borders.widget_border_weight"
-          label="Widget Border Weight"
-        />
-        <NumberInput
-          source="borders.widget_corner_radius"
-          label="Widget Corner Radius"
-        />
-
-        {/* Fonts Section */}
-        <h3 style={{ marginTop: 24, marginBottom: 16 }}>Fonts</h3>
-        <TextInput source="fonts.font_url" label="Font URL" fullWidth />
-        <NumberInput
-          source="fonts.reference_text_size"
-          label="Reference Text Size"
-        />
-
-        <h4 style={{ marginTop: 16, marginBottom: 8 }}>Body Text</h4>
-        <BooleanInput source="fonts.body_text.bold" label="Bold" />
-        <NumberInput source="fonts.body_text.size" label="Size" />
-
-        <h4 style={{ marginTop: 16, marginBottom: 8 }}>Button Text</h4>
-        <BooleanInput source="fonts.buttons_text.bold" label="Bold" />
-        <NumberInput source="fonts.buttons_text.size" label="Size" />
-
-        <h4 style={{ marginTop: 16, marginBottom: 8 }}>Input Labels</h4>
-        <BooleanInput source="fonts.input_labels.bold" label="Bold" />
-        <NumberInput source="fonts.input_labels.size" label="Size" />
-
-        <h4 style={{ marginTop: 16, marginBottom: 8 }}>Links</h4>
-        <BooleanInput source="fonts.links.bold" label="Bold" />
-        <NumberInput source="fonts.links.size" label="Size" />
-        <SelectInput
-          source="fonts.links_style"
-          label="Links Style"
-          choices={[
-            { id: "normal", name: "Normal" },
-            { id: "underlined", name: "Underlined" },
-          ]}
-        />
-
-        <h4 style={{ marginTop: 16, marginBottom: 8 }}>Subtitle</h4>
-        <BooleanInput source="fonts.subtitle.bold" label="Bold" />
-        <NumberInput source="fonts.subtitle.size" label="Size" />
-
-        <h4 style={{ marginTop: 16, marginBottom: 8 }}>Title</h4>
-        <BooleanInput source="fonts.title.bold" label="Bold" />
-        <NumberInput source="fonts.title.size" label="Size" />
-
-        {/* Page Background Section */}
-        <h3 style={{ marginTop: 24, marginBottom: 16 }}>Page Background</h3>
-        <ColorInput
-          source="page_background.background_color"
-          label="Background Color"
-        />
-        <TextInput
-          source="page_background.background_image_url"
-          label="Background Image URL"
-          fullWidth
-        />
-        <SelectInput
-          source="page_background.page_layout"
-          label="Page Layout"
-          choices={[{ id: "center", name: "Center" }]}
-        />
-
-        {/* Widget Section */}
-        <h3 style={{ marginTop: 24, marginBottom: 16 }}>Widget</h3>
-        <SelectInput
-          source="widget.header_text_alignment"
-          label="Header Text Alignment"
-          choices={[{ id: "center", name: "Center" }]}
-        />
-        <NumberInput source="widget.logo_height" label="Logo Height" />
-        <SelectInput
-          source="widget.logo_position"
-          label="Logo Position"
-          choices={[
-            { id: "center", name: "Center" },
-            { id: "left", name: "Left" },
-            { id: "none", name: "None" },
-            { id: "right", name: "Right" },
-          ]}
-        />
-        <TextInput source="widget.logo_url" label="Logo URL" fullWidth />
-        <SelectInput
-          source="widget.social_buttons_layout"
-          label="Social Buttons Layout"
-          choices={[
-            { id: "bottom", name: "Bottom" },
-            { id: "top", name: "Top" },
-          ]}
-        />
-      </SimpleForm>
-    </Edit>
-  );
-}

package/src/components/themes/index.ts

@@ -1,2 +0,0 @@
-export { ThemesEdit } from "./edit";
-export { ThemesList } from "./list";

package/src/components/themes/list.tsx

@@ -1,12 +0,0 @@
-import { List, Datagrid, TextField } from "react-admin";
-
-export function ThemesList() {
-  return (
-    <List>
-      <Datagrid>
-        <TextField source="displayName" />
-        <TextField source="themeId" />
-      </Datagrid>
-    </List>
-  );
-}