new react-openapi

react-openapi/src/components/ResourceDetail.tsx

@@ -7,6 +7,8 @@ import {
   Paper,
   Grid,
   CircularProgress,
+  Tabs,
+  Tab,
 } from "@mui/material";
 import ArrowBackIcon from "@mui/icons-material/ArrowBack";
 import EditIcon from "@mui/icons-material/Edit";
@@ -14,12 +16,18 @@ import type { ResourceConfig } from "../types";
 import { useResource } from "../context/useResource";
 import { useAppContext } from "../context/AppContext";
 import { DetailFieldRenderer, applyDisplayFormat } from "./fields";
+import { SseStreamView } from "./SseStreamView";
 
 interface ResourceDetailProps {
   resource: ResourceConfig;
   basePath: string;
 }
 
+function TabPanel({ children, value, index }: { children: React.ReactNode; value: number; index: number }) {
+  if (value !== index) return null;
+  return <Box sx={{ pt: 3 }}>{children}</Box>;
+}
+
 export function ResourceDetail({ resource, basePath }: ResourceDetailProps) {
   const navigate = useNavigate();
   const { id } = useParams();
@@ -27,6 +35,7 @@ export function ResourceDetail({ resource, basePath }: ResourceDetailProps) {
   const { resources: allResources } = useAppContext();
   const [data, setData] = useState<any>(null);
   const [loading, setLoading] = useState(true);
+  const [tabIndex, setTabIndex] = useState(0);
 
   useEffect(() => {
     if (id) {
@@ -57,6 +66,16 @@ export function ResourceDetail({ resource, basePath }: ResourceDetailProps) {
 
   const visibleFields = resource.orderedFields.filter((f) => !f.hidden?.detail);
 
+  const tabs = [{ label: "Details", key: "details" }];
+  if (resource.subResources) {
+    for (const subName of resource.subResources) {
+      const sub = allResources.find((r) => r.name === subName);
+      if (sub) {
+        tabs.push({ label: sub.displayName, key: subName });
+      }
+    }
+  }
+
   return (
     <Box>
       <Box sx={{ display: "flex", alignItems: "center", gap: 1, mb: 3 }}>
@@ -85,25 +104,47 @@ export function ResourceDetail({ resource, basePath }: ResourceDetailProps) {
         )}
       </Box>
 
-      <Paper variant="outlined" sx={{ p: 3 }}>
-        <Grid container spacing={2}>
-          {visibleFields.map((field) => {
-            let value = data[field.name];
-            let fmt = resource.displayFormat;
-            if (field.fk && typeof value === "object") {
-              const targetRes = allResources.find((r) => r.name === field.fk!.resource);
-              fmt = targetRes!.displayFormat;
-            } else if (field.refSchema && !field.fk && typeof value === "object") {
-              fmt = field.inlineDisplayFormat ?? resource.displayFormat;
-            }
-            return (
-              <Grid size={12} key={field.name}>
-                <DetailFieldRenderer field={field} value={value} displayFormat={fmt} />
-              </Grid>
-            );
-          })}
-        </Grid>
-      </Paper>
+      {tabs.length > 1 && (
+        <Tabs value={tabIndex} onChange={(_, v) => setTabIndex(v)} sx={{ mb: 1 }}>
+          {tabs.map((t) => (
+            <Tab key={t.key} label={t.label} />
+          ))}
+        </Tabs>
+      )}
+
+      <TabPanel value={tabIndex} index={0}>
+        <Paper variant="outlined" sx={{ p: 3 }}>
+          <Grid container spacing={2}>
+            {visibleFields.map((field) => {
+              let value = data[field.name];
+              let fmt = resource.displayFormat;
+              if (field.fk && typeof value === "object") {
+                const targetRes = allResources.find((r) => r.name === field.fk!.resource);
+                fmt = targetRes!.displayFormat;
+              } else if (field.refSchema && !field.fk && typeof value === "object") {
+                fmt = field.inlineDisplayFormat ?? resource.displayFormat;
+              }
+              return (
+                <Grid item xs={12} sm={6} md={4} key={field.name}>
+                  <DetailFieldRenderer field={field} value={value} displayFormat={fmt} basePath={basePath} />
+                </Grid>
+              );
+            })}
+          </Grid>
+        </Paper>
+      </TabPanel>
+
+      {tabs.slice(1).map((t, i) => {
+        const sub = allResources.find((r) => r.name === t.key)!;
+        const pathParam = sub.parent?.pathParam ?? "id";
+        return (
+          <TabPanel key={t.key} value={tabIndex} index={i + 1}>
+            {sub.streaming ? (
+              <SseStreamView resource={sub} pathParams={{ [pathParam]: Number(id!) }} />
+            ) : null}
+          </TabPanel>
+        );
+      })}
     </Box>
   );
 }