MULTI schema handling

react-openapi/src/components/ResourceDetail.tsx

@@ -85,7 +85,7 @@ export function ResourceDetail({ resource, basePath }: ResourceDetailProps) {
               fmt = field.inlineDisplayFormat ?? resource.displayFormat;
             }
             return (
-              <Grid item xs={12} sm={6} md={4} key={field.name}>
+              <Grid size={12} key={field.name}>
                 <DetailFieldRenderer field={field} value={value} displayFormat={fmt} />
               </Grid>
             );

react-openapi/src/components/ResourceForm.tsx

@@ -106,7 +106,7 @@ export function ResourceForm({ resource, basePath, mode }: ResourceFormProps) {
       }
 
       const opts = items.map((item: any) => ({
-        value: item[targetRes.primaryKey],
+        value: resolvePk(item, targetRes.primaryKey),
         label: applyFormat(item, targetRes.displayFormat),
       }));
       console.log(`[loadFkOptions] computed ${opts.length} options for field "${fieldName}"`, opts.slice(0, 3));
@@ -139,9 +139,9 @@ export function ResourceForm({ resource, basePath, mode }: ResourceFormProps) {
             const targetRes = allResources.find((r) => r.name === rel.config.resource);
             if (targetRes) {
               if (Array.isArray(val)) {
-                resolved[rel.fieldName] = val.map((item: any) => item[targetRes.primaryKey]);
+                resolved[rel.fieldName] = val.map((item: any) => resolvePk(item, targetRes.primaryKey));
               } else if (typeof val === "object") {
-                resolved[rel.fieldName] = val[targetRes.primaryKey];
+                resolved[rel.fieldName] = resolvePk(val, targetRes.primaryKey);
               }
             }
             if (!rel.config.prefetch) {
@@ -237,7 +237,7 @@ export function ResourceForm({ resource, basePath, mode }: ResourceFormProps) {
             {resource.orderedFields
               .filter((f) => !(f.name === resource.primaryKey && mode === "edit"))
               .map((field) => (
-                <Grid item xs={12} sm={6} md={4} key={field.name}>
+                <Grid size={12} key={field.name}>
                   <FormFieldRenderer
                     field={field}
                     value={formData[field.name]}
@@ -281,6 +281,11 @@ export function ResourceForm({ resource, basePath, mode }: ResourceFormProps) {
   );
 }
 
+function resolvePk(item: any, pk: string): any {
+  const v = item?.[pk];
+  return v != null ? v : item?.[`_${pk}`];
+}
+
 function applyFormat(obj: any, format: string): string {
   if (!obj || typeof obj !== "object") return String(obj ?? "");
   return format.replace(/\{(\w+)\}/g, (_, key) => String(obj[key] ?? ""));

react-openapi/src/components/ResourceList.tsx

@@ -387,7 +387,7 @@ export function ResourceList({ resource, basePath }: ResourceListProps) {
           {detailRow && (
             <Grid container spacing={2} sx={{ mt: 0.5 }}>
               {visibleColumns.map((col) => (
-                <Grid key={col.name} item xs={12} sm={6}>
+                <Grid key={col.name} size={{ xs: 12, sm: 6 }}>
                   <DetailFieldRenderer
                     field={col}
                     value={detailRow[col.name]}

react-openapi/src/components/fields/ListCellRenderer.tsx

@@ -62,5 +62,9 @@ export function ListCellRenderer({ field, value, displayFormat }: ListCellProps)
     return <Chip label={value ? "Yes" : "No"} size="small" color={value ? "success" : "default"} />;
   }
 
+  if (typeof value === "object") {
+    return <Typography variant="body2">{applyDisplayFormat(value, displayFormat ?? "")}</Typography>;
+  }
+
   return <Typography variant="body2">{String(value)}</Typography>;
 }

react-openapi/src/context/AppProvider.tsx

@@ -27,7 +27,7 @@ export function AppProvider({ specConfiguration, children }: AppProviderProps) {
 
         const spec = await loadSpec(specConfiguration.specUrl);
 
-        const allMessages = validateSpec(spec);
+        const allMessages = validateSpec(spec, specConfiguration);
 
         const errs = allMessages.filter((m) => m.type === "error");
         const warns = allMessages.filter((m) => m.type === "warning");

react-openapi/src/context/useResource.tsx

@@ -50,7 +50,7 @@ interface UseResourceReturn {
   resource: ResourceConfig;
   components: Record<string, React.FC<FilterComponentProps>>;
   list: (params?: Record<string, any>) => Promise<ParsedListResponse>;
-  get: (id: string | number) => Promise<any>;
+  get: (id: string | number, params?: Record<string, any>) => Promise<any>;
   create: (data: any) => Promise<any>;
   update: (id: string | number, data: any) => Promise<any>;
   remove: (id: string | number) => Promise<void>;
@@ -366,20 +366,11 @@ export function useResource(resourceName: string): UseResourceReturn {
 
   const [state, setState] = useState<ResourceState>({ loading: false, error: null });
 
-  if (!resource) {
-    const noop = async () => { throw new Error(`Resource "${resourceName}" not found yet`); };
-    return {
-      resource: null as unknown as ResourceConfig,
-      components: {},
-      list: noop,
-      get: noop,
-      create: noop,
-      update: noop,
-      remove: noop,
-      loading: false,
-      error: null,
-    };
-  }
+  const rPath = resource?.path;
+  const rPagination = resource?.pagination;
+  const rUpdateMethod = resource?.updateMethod;
+  const rStreaming = resource?.streaming;
+  const rFields = resource?.fields;
 
   const setLoading = useCallback((loading: boolean) => {
     setState((s) => ({ ...s, loading }));
@@ -391,22 +382,26 @@ export function useResource(resourceName: string): UseResourceReturn {
 
   const list = useCallback(
     async (params?: Record<string, any>): Promise<ParsedListResponse> => {
+      if (!rPath) return { items: [] };
       setLoading(true);
       setError(null);
       try {
         const api = getApi();
-        const res = await api.get(resource.path, { params });
+        const res = await api.get(rPath, { params });
         const data = res.data;
 
-        if (resource.pagination) {
+        if (rPagination) {
+          if (Array.isArray(data)) {
+            return { items: data };
+          }
           if (!data || typeof data !== "object" || !Array.isArray(data.items)) {
-            throw new Error(`Expected paginated response { total, items } from ${resource.path}`);
+            throw new Error(`Expected paginated response { total, items } from ${rPath}`);
           }
           return { items: data.items, total: data.total ?? data.items.length };
         }
 
         if (!Array.isArray(data)) {
-          throw new Error(`Expected array response from ${resource.path}`);
+          throw new Error(`Expected array response from ${rPath}`);
         }
         return { items: data };
       } catch (e: any) {
@@ -417,16 +412,17 @@ export function useResource(resourceName: string): UseResourceReturn {
         setLoading(false);
       }
     },
-    [resource.path, resource.pagination, setLoading, setError]
+    [rPath, rPagination, setLoading, setError]
   );
 
   const get = useCallback(
-    async (id: string | number): Promise<any> => {
+    async (id: string | number, params?: Record<string, any>): Promise<any> => {
+      if (!rPath) throw new Error(`Resource "${resourceName}" not found yet`);
       setLoading(true);
       setError(null);
       try {
         const api = getApi();
-        const res = await api.get(`${resource.path}/${id}`);
+        const res = await api.get(`${rPath}/${id}`, { params });
         return res.data;
       } catch (e: any) {
         setError(parseError(e));
@@ -435,16 +431,17 @@ export function useResource(resourceName: string): UseResourceReturn {
         setLoading(false);
       }
     },
-    [resource.path, setLoading, setError]
+    [rPath, setLoading, setError]
   );
 
   const create = useCallback(
     async (data: any): Promise<any> => {
+      if (!rPath) throw new Error(`Resource "${resourceName}" not found yet`);
       setLoading(true);
       setError(null);
       try {
         const api = getApi();
-        const res = await api.post(resource.path, data);
+        const res = await api.post(rPath, data);
         return res.data;
       } catch (e: any) {
         setError(parseError(e));
@@ -453,17 +450,18 @@ export function useResource(resourceName: string): UseResourceReturn {
         setLoading(false);
       }
     },
-    [resource.path, setLoading, setError]
+    [rPath, setLoading, setError]
   );
 
   const update = useCallback(
     async (id: string | number, data: any): Promise<any> => {
+      if (!rPath) throw new Error(`Resource "${resourceName}" not found yet`);
       setLoading(true);
       setError(null);
       try {
         const api = getApi();
-        const method = resource.updateMethod ?? "put";
-        const res = await (method === "patch" ? api.patch : api.put)(`${resource.path}/${id}`, data);
+        const method = rUpdateMethod ?? "put";
+        const res = await (method === "patch" ? api.patch : api.put)(`${rPath}/${id}`, data);
         return res.data;
       } catch (e: any) {
         setError(parseError(e));
@@ -472,16 +470,17 @@ export function useResource(resourceName: string): UseResourceReturn {
         setLoading(false);
       }
     },
-    [resource.path, resource.updateMethod, setLoading, setError]
+    [rPath, rUpdateMethod, setLoading, setError]
   );
 
   const remove = useCallback(
     async (id: string | number): Promise<void> => {
+      if (!rPath) throw new Error(`Resource "${resourceName}" not found yet`);
       setLoading(true);
       setError(null);
       try {
         const api = getApi();
-        await api.delete(`${resource.path}/${id}`);
+        await api.delete(`${rPath}/${id}`);
       } catch (e: any) {
         setError(parseError(e));
         throw e;
@@ -489,17 +488,17 @@ export function useResource(resourceName: string): UseResourceReturn {
         setLoading(false);
       }
     },
-    [resource.path, setLoading, setError]
+    [rPath, setLoading, setError]
   );
 
   const stream = useCallback(
     (handlers: StreamHandlers): StreamSubscription => {
-      if (!resource.streaming) {
+      if (!rPath || !rStreaming) {
         throw new Error(`Resource "${resourceName}" does not support streaming`);
       }
       const api = getApi();
       const baseUrl = (api.defaults.baseURL ?? "").replace(/\/+$/, "");
-      const url = baseUrl + resource.path;
+      const url = baseUrl + rPath;
       const es = new EventSource(url);
 
       es.onopen = () => handlers.onOpen?.();
@@ -517,19 +516,35 @@ export function useResource(resourceName: string): UseResourceReturn {
 
       return { close: () => es.close() };
     },
-    [resource.path, resource.streaming, resourceName]
+    [rPath, rStreaming, resourceName]
   );
 
   const components = useMemo(
     () => {
       const map: Record<string, React.FC<FilterComponentProps>> = {};
-      for (const field of resource.fields) {
+      if (!rFields) return map;
+      for (const field of rFields) {
         map[field.name] = buildFilterComponent(field, resourceName);
       }
       return map;
     },
-    [resource.fields, resourceName]
+    [rFields, resourceName]
   );
 
-  return { resource, components, list, get, create, update, remove, stream: resource.streaming ? stream : undefined, loading: state.loading, error: state.error };
+  if (!resource) {
+    return {
+      resource: null as unknown as ResourceConfig,
+      components,
+      list,
+      get,
+      create,
+      update,
+      remove,
+      stream: undefined,
+      loading: false,
+      error: null,
+    };
+  }
+
+  return { resource, components, list, get, create, update, remove, stream: rStreaming ? stream : undefined, loading: state.loading, error: state.error };
 }

react-openapi/src/hooks/useApi.ts

@@ -1,4 +1,5 @@
 import axios, { AxiosInstance } from "axios";
+import { tokenStore } from "../../../react-auth/token";
 
 let apiClient: AxiosInstance | null = null;
 
@@ -26,7 +27,6 @@ export function initApi(baseUrl: string, getToken?: () => string | null): AxiosI
       if (error.response?.status === 401 && getToken) {
         const currentToken = getToken();
         if (currentToken) {
-          const tokenStore = { clear: () => localStorage.removeItem("token") };
           tokenStore.clear();
         }
       }

react-openapi/src/spec-validator.ts

@@ -1,6 +1,6 @@
-import type { OpenApiSpec, ValidationMessage } from "./types";
+import type { OpenApiSpec, ValidationMessage, SpecConfiguration } from "./types";
 
-export function validateSpec(spec: OpenApiSpec): ValidationMessage[] {
+export function validateSpec(spec: OpenApiSpec, specConfig?: SpecConfiguration): ValidationMessage[] {
   const messages: ValidationMessage[] = [];
   const schemas = (spec.components?.schemas ?? {}) as Record<string, any>;
   const paths = spec.paths ?? {};
@@ -13,7 +13,7 @@ export function validateSpec(spec: OpenApiSpec): ValidationMessage[] {
     messages.push({ type: "error", message: "Missing 'info.title'" });
   }
 
-  if (!spec.servers?.[0]?.url) {
+  if (!spec.servers?.[0]?.url && !specConfig?.baseApiUrl) {
     messages.push({ type: "warning", message: "No 'servers[0].url' defined — provide 'baseApiUrl' in specConfiguration" });
   }
 

react-openapi/src/transformers/field-config.ts

@@ -13,12 +13,15 @@ export function extractFields(schemaName: string, schema: any, schemas: Record<s
     .map(([name, prop]: [string, any]) => {
       const isDirectRef = !!prop.$ref;
       const isItemsRef = prop.type === "array" && !!prop.items?.$ref;
-      const isRef = isDirectRef || isItemsRef;
+      const isOneOf = !!prop.oneOf;
+      const isRef = isDirectRef || isItemsRef || isOneOf;
 
       const refSchemaName = isDirectRef
         ? resolveRef(prop.$ref)
         : isItemsRef
         ? resolveRef(prop.items.$ref)
+        : isOneOf && prop.oneOf[0]?.$ref
+        ? resolveRef(prop.oneOf[0].$ref)
         : undefined;
 
       const refSchema = refSchemaName ? schemas[refSchemaName] : undefined;
@@ -31,7 +34,7 @@ export function extractFields(schemaName: string, schema: any, schemas: Record<s
         name,
         label: prop["x-label"],
         description: prop["x-description"] ?? prop["x-label"] ?? name,
-        type: isRef && refSchema ? "object" : (prop.type ?? "string"),
+        type: isRef && refSchema ? "object" : isOneOf ? "object" : (prop.type ?? "string"),
         format: prop.format,
         order: prop["x-order"],
         hidden: prop["x-hidden"] ?? {},

src/RequireAuth.tsx

@@ -0,0 +1,26 @@
+import * as React from "react";
+import { useNavigate } from "react-router-dom";
+import { useAuth, AuthPage } from "../react-auth";
+
+export function RequireAuth({ children }: { children: React.ReactNode }) {
+  const { currentUser, loading, error, login, register } = useAuth();
+  const navigate = useNavigate();
+  const [mode, setMode] = React.useState<"login" | "register">("login");
+
+  if (currentUser) {
+    return <>{children}</>;
+  }
+
+  return (
+    <AuthPage
+      mode={mode}
+      onBack={() => navigate("/")}
+      onSwitchMode={() => setMode(mode === "login" ? "register" : "login")}
+      login={login}
+      register={register}
+      loading={loading}
+      error={error}
+      currentUser={currentUser}
+    />
+  );
+}

src/features/report/useReport.ts

@@ -12,9 +12,11 @@ export interface ReportParams {
 export function useReport(params: ReportParams) {
   const { get } = useResource("reports");
 
+  const { snapshot_id, ...queryParams } = params;
+
   return useQuery({
     queryKey: ["reports", "read", params],
     queryFn: () =>
-      get(params.snapshot_id ? params.snapshot_id : "latest"),
+      get(snapshot_id ?? "latest", queryParams),
   });
 }

src/main.jsx

@@ -16,6 +16,7 @@ import Dashboard from './Dashboard';
 import FetchRequests from './FetchRequests';
 import FetchRequestDetail from './FetchRequestDetail';
 import ReportSnapshots from './ReportSnapshots';
+import { RequireAuth } from './RequireAuth';
 import { AppProvider, Admin } from '../react-openapi';
 import { Buffer } from 'buffer';
 import process from 'process';
@@ -64,7 +65,7 @@ root.render(
                   path={path}
                   element={
                     path.startsWith("/admin") ? (
-                      <Component basePath="/admin" />
+                      <RequireAuth><Component basePath="/admin" /></RequireAuth>
                     ) : (
                       <Component />
                     )