From e6ce62a166ddb3afd57d63c8c6bc77bd8fc3c5a7 Mon Sep 17 00:00:00 2001 From: Vishesh 'ironeagle' Bangotra Date: Thu, 4 Jun 2026 17:23:44 +0000 Subject: [PATCH] openapi-spec-reader (#10) ### Summary of Changes: 1. **Spec-Driven Enums**: - Updated `openapi_loader.ts` to collect all standalone enum schemas (e.g., `FetchRequestStatus`) into the `AppConfig.enums` map. - Implemented `mergeProperties` and `oneOf`/`anyOf` resolution in `openapi_loader.ts` to ensure complex schemas like `FetchRequest` (using `allOf`) and `source` (using `oneOf`) are correctly parsed. 2. **Customizable Labeling**: - Added `enumOption` (template-based) and `enumLabels` (mapping-based) to the config and field types. - Implemented `resolveTemplate` in `utils/options.ts` to handle placeholders like `'{name} {number}'` or plain field names. 3. **UI Integration**: - **`FormField.tsx`**: Updated relation and enum selects to use `getFieldOptions()` for correct key/value pairs and labels. Added value normalization to extract keys from API objects. - **`EnhancedTable.tsx`**: Updated `valueOptions` to use key/value pairs for `singleSelect` and updated `FieldRenderer` to show the human-readable label for enums. - **`FilterBar.tsx`**: Updated `extractOptions` to use spec-driven labels for enum filters. - **`ResourceView.tsx`**: Centralized filter matching logic into a `getDisplayString` helper, ensuring filter comparisons use the same templates as the UI labels. 4. **App Fixes**: - `FetchRequests.tsx` and `FetchRequestDetail.tsx` now derive status and format options from the OpenAPI spec via `useConfig()` instead of using hardcoded arrays. Reviewed-on: https://git.aetoskia.com/apps/khata-ui/pulls/10 Co-authored-by: Vishesh 'ironeagle' Bangotra Co-committed-by: Vishesh 'ironeagle' Bangotra --- react-openapi/components/EnhancedTable.tsx | 23 ++++-- react-openapi/components/FilterBar.tsx | 15 ++-- react-openapi/components/ResourceView.tsx | 43 +++++------ react-openapi/components/fields/FormField.tsx | 46 ++++++------ react-openapi/types/config.ts | 16 +++- react-openapi/types/overrides.ts | 10 ++- react-openapi/utils/openapi_loader.ts | 75 ++++++++++++++++--- react-openapi/utils/options.ts | 33 ++++++++ src/FetchRequests.tsx | 4 +- src/openapi-config.ts | 12 +++ 10 files changed, 199 insertions(+), 78 deletions(-) create mode 100644 react-openapi/utils/options.ts diff --git a/react-openapi/components/EnhancedTable.tsx b/react-openapi/components/EnhancedTable.tsx index 10dc971..067e3a2 100644 --- a/react-openapi/components/EnhancedTable.tsx +++ b/react-openapi/components/EnhancedTable.tsx @@ -31,6 +31,7 @@ import VisibilityIcon from '@mui/icons-material/Visibility'; import MoreVertIcon from '@mui/icons-material/MoreVert'; import { useNavigate } from 'react-router-dom'; import { ResourceConfig } from '../types/config'; +import { getFieldOptions, toGridValueOptions, resolveTemplate } from '../utils/options'; interface EnhancedTableProps { config: ResourceConfig; @@ -95,9 +96,8 @@ export default function EnhancedTable({ }; } - if (muiType === 'singleSelect' && field.options) { - // @ts-ignore - col.valueOptions = field.options; + if (muiType === 'singleSelect') { + col.valueOptions = toGridValueOptions(getFieldOptions(field)); } return col; @@ -274,8 +274,9 @@ function MobileCardRow({ row, config, onDelete, onNavigate, navigate }: any) { ); } -function getFormattedDisplayValue(item: any, displayField?: string | string[]) { +function getFormattedDisplayValue(item: any, displayField?: string | string[], enumValue?: string) { if (!item) return ""; + if (enumValue) return resolveTemplate(enumValue, item); if (!displayField) return item.name || item.title || item.label || item.id || JSON.stringify(item); if (Array.isArray(displayField)) { @@ -297,7 +298,7 @@ function FieldRenderer({ params, field, fieldKey, config, onNavigate, navigate, // 1. Single Relation if (field.relation && value && !Array.isArray(value)) { const relationId = typeof value === 'object' ? (value.id || value._id || value.pk) : value; - const displayValue = getFormattedDisplayValue(value, field.displayField); + const displayValue = getFormattedDisplayValue(value, field.displayField, field.enumOption?.value); return ( getFormattedDisplayValue(item, field.displayField)).join(', '); + const enumValue = field.enumOption?.value; + const tooltipTitle = value.map((item) => getFormattedDisplayValue(item, field.displayField, enumValue)).join(', '); return ( @@ -324,7 +326,7 @@ function FieldRenderer({ params, field, fieldKey, config, onNavigate, navigate, {value.map((item, idx) => ( o.key === value); + return opt?.value ?? value; + } + if (isPk && !isMobile) { return ( (); - if (field.options) return field.options; + if (field.type === 'enum') { + return getFieldOptions(field).map(o => o.value); + } if (!data) return []; const pull = (item: any): string | null => { @@ -118,18 +121,18 @@ function extractOptions( if (typeof item === "string") return item; if (typeof item !== "object") return String(item); + if (field.enumOption?.value) return resolveTemplate(field.enumOption.value, item); + const df = field.displayField; - if (!df) { debugger; return null; } + if (!df) return null; if (Array.isArray(df)) { const parts = df.map((k) => item[k]).filter((v) => v != null); if (parts.length > 0) return parts.join(" "); - } else { - const v = item[df]; - if (v != null) return String(v); } + const v = item[df]; + if (v != null) return String(v); - debugger; return null; }; diff --git a/react-openapi/components/ResourceView.tsx b/react-openapi/components/ResourceView.tsx index d75b439..f03885b 100644 --- a/react-openapi/components/ResourceView.tsx +++ b/react-openapi/components/ResourceView.tsx @@ -3,6 +3,7 @@ import { Box, Paper, CircularProgress } from '@mui/material'; import { ResourceConfig } from '../types/config'; import type { ResourceField } from '../types/config'; import { useResource } from '../hooks/useResource'; +import { resolveTemplate } from '../utils/options'; import GenericForm from './GenericForm'; import EnhancedTable from './EnhancedTable'; import FilterBar from './FilterBar'; @@ -15,11 +16,16 @@ interface ResourceViewProps { import { GridPaginationModel } from '@mui/x-data-grid'; -function getFilterDisplayFields(field: ResourceField): string[] { - if (!field.displayField) return []; - return (Array.isArray(field.displayField) ? field.displayField : [field.displayField]).filter( - (df): df is string => !!df - ); +function getDisplayString(item: any, field: ResourceField): string { + if (item == null || typeof item !== 'object') return String(item ?? ''); + if (field.enumOption?.value) return resolveTemplate(field.enumOption.value, item); + const df = field.displayField; + if (!df) return item.name ?? item.title ?? item.label ?? item.id ?? JSON.stringify(item); + if (Array.isArray(df)) { + const parts = df.map((k: string) => item[k]).filter((v: any) => v != null); + return parts.length > 0 ? parts.join(' ') : ''; + } + return String(item[df] ?? ''); } function applyClientFilters( @@ -59,18 +65,12 @@ function applyClientFilters( if (Array.isArray(filterValue)) { if (field.type === "array" && Array.isArray(itemValue)) { - return itemValue.some((el: any) => { - if (el != null && typeof el === "object") { - const dispFields = getFilterDisplayFields(field); - return dispFields.some((df) => filterValue.includes(String(el[df]))); - } - return filterValue.includes(String(el)); - }); + return itemValue.some((el: any) => + filterValue.includes(getDisplayString(el, field)) + ); } if (itemValue && typeof itemValue === "object") { - const dispFields = getFilterDisplayFields(field); - const itemDisplay = dispFields.map((df) => itemValue[df]).filter((v) => v != null).join(" "); - return filterValue.includes(itemDisplay); + return filterValue.includes(getDisplayString(itemValue, field)); } return filterValue.includes(String(itemValue)); } @@ -82,18 +82,13 @@ function applyClientFilters( } if (field.type === "array" && Array.isArray(itemValue)) { - return itemValue.some((el: any) => { - if (el != null && typeof el === "object") { - const dispFields = getFilterDisplayFields(field); - return dispFields.some((df) => String(el[df]) === String(filterValue)); - } - return String(el) === String(filterValue); - }); + return itemValue.some((el: any) => + getDisplayString(el, field) === String(filterValue) + ); } if (itemValue && typeof itemValue === "object") { - const dispFields = getFilterDisplayFields(field); - return dispFields.some((df) => String(itemValue[df]) === String(filterValue)); + return getDisplayString(itemValue, field) === String(filterValue); } return String(itemValue) === String(filterValue); diff --git a/react-openapi/components/fields/FormField.tsx b/react-openapi/components/fields/FormField.tsx index 114c88f..b1915b6 100644 --- a/react-openapi/components/fields/FormField.tsx +++ b/react-openapi/components/fields/FormField.tsx @@ -12,6 +12,7 @@ import { Divider, } from '@mui/material'; import { ResourceField } from '../../types/config'; +import { getFieldOptions } from '../../utils/options'; import ImageUploadField from './ImageUploadField'; interface FormFieldProps { @@ -73,40 +74,40 @@ export default function FormField({ if (field.relation && relationDataMap[field.relation]) { const relationData = relationDataMap[field.relation].data; const isArrayRelation = field.type === 'array'; - - // Determine how to display the related item - const getOptionLabel = (option: any) => { - if (!option) return ""; - if (field.displayField && option[field.displayField]) return option[field.displayField]; - // Standard naming fields - return option.name || option.title || option.label || option.id || JSON.stringify(option); - }; + const options = getFieldOptions(field, relationData); + const keyField = field.enumOption?.key ?? 'id'; - const getOptionValue = (option: any) => { - // Return the whole object to maintain identity - return option; - }; + // Normalize value: API returns whole objects on GET, but form uses key strings + const normalizedValue = (() => { + if (isArrayRelation && Array.isArray(value)) { + return value.map((v: any) => (v != null && typeof v === 'object' ? String(v[keyField] ?? '') : String(v))); + } + if (value != null && typeof value === 'object') { + return String(value[keyField] ?? ''); + } + return value ?? (isArrayRelation ? [] : ""); + })(); return ( {label} @@ -148,7 +149,8 @@ export default function FormField({ } // 5. Enum Handling - if (field.type === 'enum' && field.options) { + if (field.type === 'enum') { + const options = getFieldOptions(field); return ( {label} @@ -158,9 +160,9 @@ export default function FormField({ onChange={(e) => onChange(e.target.value)} disabled={disabled} > - {field.options.map((opt: string) => ( - - {opt} + {options.map((opt) => ( + + {opt.value} ))} diff --git a/react-openapi/types/config.ts b/react-openapi/types/config.ts index 43be512..347ab7e 100644 --- a/react-openapi/types/config.ts +++ b/react-openapi/types/config.ts @@ -10,6 +10,16 @@ export type FieldType = | 'object' | 'array'; +export interface SelectOption { + key: string; + value: string; +} + +export interface EnumOption { + key: string; + value: string; +} + export interface ResourceField { type: FieldType; label: string; @@ -19,8 +29,10 @@ export interface ResourceField { schema?: Record; displayField?: string | string[]; formatter?: (value: any) => string; - relation?: string; // Name of the target resource + relation?: string; filterType?: "autocomplete" | "multiselect" | "number-range" | "date-range"; + enumOption?: EnumOption; + enumLabels?: Record; } export type ResourceMode = "server" | "client"; @@ -38,12 +50,14 @@ export interface ResourceConfig { mode?: ResourceMode; fields?: string[]; }; + enumOption?: EnumOption; } export interface AppConfig { baseUrl: string; authBaseUrl: string; resources: ResourceConfig[]; + enums: Record; profile?: { resource: string; extraFields?: Record; diff --git a/react-openapi/types/overrides.ts b/react-openapi/types/overrides.ts index 6200308..89267be 100644 --- a/react-openapi/types/overrides.ts +++ b/react-openapi/types/overrides.ts @@ -1,13 +1,14 @@ -/** - * This file contains application-specific overrides and configuration - * for the generic Admin Panel. - */ +export interface EnumOption { + key: string; + value: string; +} export interface FieldOverride { displayField?: string | string[]; display?: boolean; formatter?: (value: any) => string; filterType?: "autocomplete" | "multiselect" | "number-range" | "date-range"; + enumLabels?: Record; } export interface ResourceOverride { @@ -18,4 +19,5 @@ export interface ResourceOverride { mode?: "server" | "client"; fields?: string[]; }; + enumOption?: EnumOption; } diff --git a/react-openapi/utils/openapi_loader.ts b/react-openapi/utils/openapi_loader.ts index ac472f4..355c5f6 100644 --- a/react-openapi/utils/openapi_loader.ts +++ b/react-openapi/utils/openapi_loader.ts @@ -36,6 +36,26 @@ function mapOpenApiType(prop: any): FieldType { /** * Recursively converts OpenAPI schemas to ResourceField map */ +function mergeProperties(schema: any): { properties: Record; required: string[] } { + let properties: Record = {}; + let required: string[] = []; + + if (schema.allOf) { + for (const sub of schema.allOf) { + const merged = mergeProperties(sub); + properties = { ...properties, ...merged.properties }; + required = [...required, ...merged.required]; + } + } + if (schema.properties) { + properties = { ...properties, ...schema.properties }; + } + if (schema.required) { + required = [...required, ...schema.required]; + } + return { properties, required }; +} + function parseSchemaFields( schema: any, resourceName: string, @@ -43,12 +63,19 @@ function parseSchemaFields( configuration: Record = {} ): Record { const fields: Record = {}; - const properties = schema.properties || {}; - const required = schema.required || []; + const { properties, required } = mergeProperties(schema); const overrides = configuration[resourceName]?.fields || {}; for (const [key, prop] of Object.entries(properties) as [string, any]) { - const type = mapOpenApiType(prop); + // Resolve oneOf/anyOf by merging all branch properties + let resolvedProp = prop; + if (prop.oneOf || prop.anyOf) { + const branches = prop.oneOf || prop.anyOf; + const merged = mergeProperties({ allOf: branches }); + resolvedProp = { ...prop, type: 'object', properties: merged.properties, required: merged.required }; + } + + const type = mapOpenApiType(resolvedProp); const override = overrides[key]; // Explicitly skip 'id' as it's the primary key and handled elsewhere @@ -57,12 +84,12 @@ function parseSchemaFields( fields[key] = { type, label: - prop.title || + resolvedProp.title || key.charAt(0).toUpperCase() + key.slice(1).replace(/_/g, " "), required: required.includes(key), - options: prop.enum, + options: resolvedProp.enum, readOnly: - prop.readOnly || + resolvedProp.readOnly || key === "created_at" || key === "updated_at", ...override, @@ -71,20 +98,35 @@ function parseSchemaFields( // STRICT RELATION DETECTION // A field is a relation ONLY if its schema object (or items schema) // exactly matches a schema that is defined as a resource. - let targetSchema = prop; - if (type === "array" && prop.items) { - targetSchema = prop.items; + let targetSchema = resolvedProp; + if (type === "array" && resolvedProp.items) { + targetSchema = resolvedProp.items; } // Check if this schema object is registered as a resource const relation = schemaToResourceMap.get(targetSchema); if (relation) { fields[key].relation = relation; + + // Propagate enumOption from target resource config, or derive from target schema + const explicitEnumOption = configuration[relation]?.enumOption; + if (explicitEnumOption) { + fields[key].enumOption = explicitEnumOption; + } else { + const targetProps = targetSchema.properties || {}; + const valueField = Object.entries(targetProps).find( + ([name, p]: [string, any]) => name !== 'id' && p.type === 'string' + )?.[0]; + fields[key].enumOption = { + key: 'id', + value: valueField ?? 'id', + }; + } } // Recursively parse nested objects (only if not a relation) - if (fields[key].type === "object" && prop.properties && !relation) { - fields[key].schema = parseSchemaFields(prop, resourceName, schemaToResourceMap, configuration); + if (fields[key].type === "object" && resolvedProp.properties && !relation) { + fields[key].schema = parseSchemaFields(resolvedProp, resourceName, schemaToResourceMap, configuration); } } @@ -172,6 +214,16 @@ export async function loadConfigFromOpenApi(baseUrl: string, configuration: Reco }); } + // Collect standalone enum schemas (e.g. FetchRequestStatus, AccountType, etc.) + const enums: Record = {}; + if (api.components?.schemas) { + for (const [name, schema] of Object.entries(api.components.schemas) as [string, any]) { + if (schema.enum) { + enums[name] = schema.enum; + } + } + } + // @ts-ignore const serverBaseUrl = import.meta.env.VITE_API_BASE_URL || (api.servers?.[0]?.url ?? "") // @ts-ignore @@ -180,6 +232,7 @@ export async function loadConfigFromOpenApi(baseUrl: string, configuration: Reco baseUrl: serverBaseUrl, authBaseUrl: authBaseUrl, resources, + enums, profile: profileConfiguration, }; } diff --git a/react-openapi/utils/options.ts b/react-openapi/utils/options.ts new file mode 100644 index 0000000..13ab92a --- /dev/null +++ b/react-openapi/utils/options.ts @@ -0,0 +1,33 @@ +import { ResourceField, SelectOption } from "../types/config"; + +export function resolveTemplate(template: string, item: any): string { + if (/\{(\w+)\}/.test(template)) { + return template.replace(/\{(\w+)\}/g, (_, field: string) => String(item[field] ?? '')); + } + return String(item[template] ?? ''); +} + +export function getFieldOptions(field: ResourceField, relationData?: any[]): SelectOption[] { + if (field.type === 'enum') { + return (field.options ?? []).map(opt => ({ + key: opt, + value: field.enumLabels?.[opt] ?? opt, + })); + } + + if (field.relation) { + const data = relationData ?? []; + const enumOption = field.enumOption ?? { key: 'id', value: 'name' }; + + return data.map(item => ({ + key: String(item[enumOption.key] ?? ''), + value: resolveTemplate(enumOption.value, item), + })); + } + + return []; +} + +export function toGridValueOptions(options: SelectOption[]): { value: string; label: string }[] { + return options.map(opt => ({ value: opt.key, label: opt.value })); +} diff --git a/src/FetchRequests.tsx b/src/FetchRequests.tsx index 83b492a..2abfc6f 100644 --- a/src/FetchRequests.tsx +++ b/src/FetchRequests.tsx @@ -129,7 +129,7 @@ export default function FetchRequests() { const config = useConfig(); const fetchRes = config?.resources.find((r: any) => r.name === "fetch-requests"); - const formatOptions: string[] = (fetchRes?.fields?.source?.schema?.format?.options as string[]) ?? ["axis", "icici"]; + const formatOptions: string[] = fetchRes?.fields?.source?.schema?.format?.options as string[] ?? []; const createMutation = useCreateFetchRequest(); const updateMutation = useUpdateFetchRequest(); @@ -345,7 +345,7 @@ export default function FetchRequests() { input={} renderValue={(selected) => (selected as string[]).join(", ")} > - {["pending", "processing", "paused", "raw_expenses_done", "enriched_done", "completed", "failed"].map((s) => ( + {(config?.enums?.FetchRequestStatus ?? []).map((s: string) => ( {s.replace(/_/g, " ")} ))} diff --git a/src/openapi-config.ts b/src/openapi-config.ts index 638c9c4..ef1a95f 100644 --- a/src/openapi-config.ts +++ b/src/openapi-config.ts @@ -50,6 +50,18 @@ export const configuration: Record = { } }, }, + accounts: { + enumOption: { + key: 'id', + value: '{name} - XXXX{number}' + } + }, + tags: { + enumOption: { + key: 'id', + value: '{icon} {name}' + } + }, }; export const profileConfiguration = {