@authhero/react-admin 0.26.0 → 0.27.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @authhero/react-admin
 
+## 0.27.0
+
+### Minor Changes
+
+- 76510cd: Fixes for branding page and endpoint
+
 ## 0.26.0
 
 ### Minor Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@authhero/react-admin",
-  "version": "0.26.0",
+  "version": "0.27.0",
   "packageManager": "pnpm@10.20.0",
   "private": false,
   "repository": {

package/src/auth0DataProvider.ts

@@ -315,7 +315,29 @@ export default (
 
       // Handle singleton resources
       if (resource === "branding") {
-        return fetchSingleton(resource, () => managementClient.branding.get());
+        const branding = await managementClient.branding.get();
+        // Also fetch themes to include in branding data
+        const headers = createHeaders(tenantId);
+        let themes = null;
+        try {
+          const themesResponse = await httpClient(
+            `${apiUrl}/api/v2/branding/themes/default`,
+            { headers },
+          );
+          themes = themesResponse.json;
+        } catch (e) {
+          // Themes might not exist yet, that's ok
+        }
+        return {
+          data: [
+            {
+              ...branding,
+              themes,
+              id: resource,
+            },
+          ],
+          total: 1,
+        };
       }
 
       if (resource === "settings") {
@@ -534,9 +556,22 @@ export default (
       // Handle singleton resources
       if (resource === "branding") {
         const result = await managementClient.branding.get();
+        // Also fetch themes to include in branding data
+        const headers = createHeaders(tenantId);
+        let themes = null;
+        try {
+          const themesResponse = await httpClient(
+            `${apiUrl}/api/v2/branding/themes/default`,
+            { headers },
+          );
+          themes = themesResponse.json;
+        } catch (e) {
+          // Themes might not exist yet, that's ok
+        }
         return {
           data: {
             ...result,
+            themes,
             id: resource,
           },
         };
@@ -915,9 +950,12 @@ export default (
 
       // Special handling for branding to update theme data separately
       if (resource === "branding") {
-        // Update branding
+        // Extract themes from the payload - it's updated via a separate endpoint
+        const { themes, ...brandingData } = cleanParams.data;
+
+        // Update branding (without themes)
         const brandingResult = await managementClient.branding.update(
-          cleanParams.data,
+          brandingData,
         );
 
         // Update themes if provided
@@ -926,12 +964,17 @@ export default (
           ...brandingResult,
         };
 
-        if (cleanParams.data.themes) {
-          const themeUpdateResult = await (
-            managementClient.branding.themes as any
-          ).default.patch(cleanParams.data.themes);
-          result.themes =
-            (themeUpdateResult as any).response || themeUpdateResult;
+        if (themes) {
+          // Use HTTP directly since the SDK doesn't have this method
+          const themeResponse = await httpClient(
+            `${apiUrl}/api/v2/branding/themes/default`,
+            {
+              headers,
+              method: "PATCH",
+              body: JSON.stringify(themes),
+            },
+          );
+          result.themes = themeResponse.json;
         }
 
         return { data: result };

package/src/components/branding/edit.tsx

@@ -1,11 +1,4 @@
-import {
-  DateField,
-  Edit,
-  FieldTitle,
-  Labeled,
-  TextInput,
-  TabbedForm,
-} from "react-admin";
+import { Edit, TextInput, TabbedForm } from "react-admin";
 import { ColorInput } from "react-admin-color-picker";
 import { useInput, useRecordContext } from "react-admin";
 import { useState, useEffect } from "react";
@@ -13,6 +6,54 @@ import { Box } from "@mui/material";
 import { ThemesTab } from "./ThemesTab";
 import { BrandingPreview } from "./BrandingPreview";
 
+// Helper to recursively remove null values and empty objects from data
+// This is needed because react-admin sends null for empty form fields,
+// but the server schema expects fields to be omitted rather than null
+function cleanObject(obj: Record<string, unknown>): Record<string, unknown> {
+  const result: Record<string, unknown> = {};
+
+  for (const [key, value] of Object.entries(obj)) {
+    // Skip null and undefined values
+    if (value === null || value === undefined) {
+      continue;
+    }
+
+    // Recursively clean nested objects (but not arrays)
+    if (typeof value === "object" && !Array.isArray(value)) {
+      const cleaned = cleanObject(value as Record<string, unknown>);
+      // Only include non-empty objects
+      if (Object.keys(cleaned).length > 0) {
+        result[key] = cleaned;
+      }
+    } else {
+      result[key] = value;
+    }
+  }
+
+  return result;
+}
+
+// Transform function to clean up empty objects and null values before sending to server
+// The server schema has strict requirements:
+// - font.url is required if font object is present
+// - page_background must be an object or omitted, not null
+// - Many fields cannot be null, only omitted
+const transformBranding = (data: Record<string, unknown>) => {
+  // First, recursively clean all null values and empty objects
+  const result = cleanObject(data);
+
+  // Remove font object if url is not set (font.url is required if font exists)
+  if (
+    result.font &&
+    typeof result.font === "object" &&
+    !(result.font as Record<string, unknown>).url
+  ) {
+    delete result.font;
+  }
+
+  return result;
+};
+
 function PageBackgroundInput(props) {
   const { field } = useInput(props);
   const record = useRecordContext();
@@ -128,16 +169,6 @@ function BrandingFormContent() {
       {/* Form Section */}
       <Box sx={{ flex: "1 1 60%", minWidth: 0 }}>
         <TabbedForm>
-          <TabbedForm.Tab label="Info">
-            <TextInput source="id" />
-            <TextInput source="name" />
-            <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="Style">
             <ColorInput source="colors.primary" label="Primary Color" />
             <PageBackgroundInput source="colors.page_background" />
@@ -184,7 +215,7 @@ function BrandingFormContent() {
 
 export function BrandingEdit() {
   return (
-    <Edit>
+    <Edit transform={transformBranding}>
       <BrandingFormContent />
     </Edit>
   );