feat(list): allow selection of parent

src/app/explorer/info.tsx

@@ -5,7 +5,7 @@ import { Spinner } from "@/components/ui/spinner";
 import { ResourceInstance } from "@/state/fetch";
 import { ResourceSchema } from "@/state/openapi";
 import { useAppSelector } from "@/hooks/store";
-import { selectChildResources } from "@/state/store";
+import { selectChildResources, selectHeaders } from "@/state/store";
 import ResourceListPage from "./resource_list";
 import { CustomMethodComponent } from "@/components/custom_method";
 
@@ -33,21 +33,27 @@ export default function InfoPage(props: InfoPageProps) {
       : [],
   );
 
-  useEffect(() => {
-    // Set parent parameters from URL params, excluding resourceId
-    const parentParams = new Map<string, string>();
+  const headers = useAppSelector(selectHeaders);
+
+  const parentParams = useMemo(() => {
+    const parentMap = new Map<string, string>();
     for (const [key, value] of Object.entries(params)) {
       if (key !== "resourceId" && value) {
-        parentParams.set(key, value);
+        parentMap.set(key, value);
       }
     }
+    return parentMap;
+  }, [params]);
+
+  useEffect(() => {
+    // Set parent parameters on the resource for other uses
     props.resource.parents = parentParams;
 
     // Fetch the resource instance
     props.resource
-      .get(params["resourceId"]!)
+      .get(params["resourceId"] as string, parentParams, headers)
       .then((instance) => setState(instance));
-  }, [params, props.resource]);
+  }, [params, props.resource, parentParams, headers]);
 
   const properties = useMemo(() => {
     if (state?.properties) {

src/app/explorer/resource_list.tsx

@@ -1,5 +1,5 @@
-import { useCallback, useEffect, useState } from "react";
-import { useNavigate } from "react-router-dom";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { useNavigate, useParams } from "react-router-dom";
 import { Button } from "@/components/ui/button";
 import { Plus, RefreshCw } from "lucide-react";
 import { ResourceSchema } from "@/state/openapi";
@@ -18,21 +18,32 @@ type ResourceListProps = {
 
 export default function ResourceListPage(props: ResourceListProps) {
   const navigate = useNavigate();
+  const params = useParams();
   const [state, setState] = useState<ResourceListState>({
     resources: [],
   });
 
   const headers = useAppSelector(selectHeaders);
 
+  const parentParams = useMemo(() => {
+    const parentMap = new Map<string, string>();
+    for (const [key, value] of Object.entries(params)) {
+      if (key !== "resourceId" && value) {
+        parentMap.set(key, value);
+      }
+    }
+    return parentMap;
+  }, [params]);
+
   const refreshList = useCallback(() => {
-    props.resource.list(headers).then((resources) => {
+    props.resource.list(parentParams, headers).then((resources) => {
       if (resources) {
         setState({
           resources: resources,
         });
       }
     });
-  }, [props, headers]);
+  }, [props, headers, parentParams]);
 
   useEffect(() => {
     refreshList();
@@ -55,6 +66,7 @@ export default function ResourceListPage(props: ResourceListProps) {
               navigate(
                 props.resource.substituteUrlParameters(
                   props.resource.base_url(),
+                  parentParams,
                 ) + "/_create",
               )
             }
@@ -69,6 +81,7 @@ export default function ResourceListPage(props: ResourceListProps) {
       <ResourceListTable
         resource={props.resource}
         resources={state.resources}
+        parentParams={parentParams}
         onRefresh={refreshList}
       />
     </div>

src/app/explorer/update_form.tsx

@@ -32,9 +32,9 @@ export default function UpdatePage(props: UpdatePageProps) {
 
   useEffect(() => {
     props.schema
-      .get(resourceId!)
+      .get(resourceId as string, parentParams, headers)
       .then((instance) => setResourceInstance(instance));
-  }, [resourceId, props.schema]);
+  }, [resourceId, props.schema, parentParams, headers]);
 
   const handleSuccess = () => {
     toast({ description: `Updated ${resourceInstance?.properties["path"]}` });

src/components/error_boundary.tsx

@@ -13,7 +13,7 @@ import { Button } from "@/components/ui/button";
 
 interface ErrorDisplayProps {
   error: Error | unknown;
-  reset: () => void;
+  reset: (path?: string) => void;
 }
 
 export function ErrorDisplay({ error, reset }: ErrorDisplayProps) {
@@ -23,7 +23,7 @@ export function ErrorDisplay({ error, reset }: ErrorDisplayProps) {
     (typeof error === "string" ? error : "Something went wrong.");
   let title = "An error occurred";
   let description = errorMessage;
-  let action = <Button onClick={reset}>Go Home</Button>;
+  let action = <Button onClick={() => reset()}>Go Home</Button>;
 
   const handler = findErrorHandler(error);
   if (handler) {
@@ -71,9 +71,9 @@ export class ErrorBoundary extends Component<Props, State> {
     console.error("Uncaught error:", error, errorInfo);
   }
 
-  private handleClose = () => {
+  private handleClose = (path?: string) => {
     this.setState({ hasError: false, error: null });
-    window.location.href = "/";
+    window.location.href = path || "/";
   };
 
   public render() {
@@ -89,8 +89,8 @@ export function RouteErrorBoundary() {
   const error = useRouteError();
   const navigate = useNavigate();
 
-  const handleClose = () => {
-    navigate("/");
+  const handleClose = (path?: string) => {
+    navigate(path || "/");
   };
 
   return <ErrorDisplay error={error} reset={handleClose} />;

src/components/form/form.test.tsx

@@ -56,7 +56,7 @@ describe("Form", () => {
         if (additionalFieldsValues.id) {
           id = additionalFieldsValues.id as string;
         }
-        return resource.create(value, id, headers);
+        return resource.create(value, id, parentParams, headers);
       });
 
     return render(
@@ -194,6 +194,7 @@ describe("Form", () => {
           active: true,
         },
         undefined,
+        new Map(),
         "",
       );
     });
@@ -322,6 +323,7 @@ describe("Form", () => {
           requiredField: "Required Value",
         },
         undefined,
+        new Map(),
         "",
       );
     });
@@ -376,6 +378,7 @@ describe("Form", () => {
           requiredName: "Test Name",
         },
         undefined,
+        new Map(),
         "",
       );
     });
@@ -403,6 +406,7 @@ describe("Form", () => {
           requiredName: "Test Name",
         },
         undefined,
+        new Map(),
         "",
       );
     });
@@ -612,6 +616,7 @@ describe("Form", () => {
             },
           },
           undefined,
+          new Map(),
           "",
         );
       });
@@ -1078,6 +1083,7 @@ describe("Form", () => {
             age: 30,
           }),
           undefined,
+          new Map(),
           "",
         );
       });
@@ -1274,6 +1280,7 @@ describe("Form", () => {
             name: "Test Name",
           },
           undefined,
+          new Map(),
           "",
         );
       });
@@ -1342,6 +1349,7 @@ describe("Form", () => {
             name: "Test Name",
           },
           "my-resource-id",
+          new Map(),
           "",
         );
       });
@@ -1373,6 +1381,7 @@ describe("Form", () => {
             name: "Test Name",
           },
           undefined,
+          new Map(),
           "",
         );
       });

src/components/form/form.tsx

@@ -347,7 +347,7 @@ export default function CreateForm(props: { resource: ResourceSchema }) {
         if (additionalFieldsValues.id) {
           id = additionalFieldsValues.id as string;
         }
-        return props.resource.create(value, id, headers);
+        return props.resource.create(value, id, parentParams, headers);
       }}
       additionalFields={
         props.resource.supportsUserSettableCreate

src/components/resource_list.tsx

@@ -24,6 +24,7 @@ import { ErrorBoundary } from "@/components/error_boundary";
 type ResourceListTableProps = {
   resource: ResourceSchema;
   resources: ResourceInstance[];
+  parentParams: Map<string, string>;
   onRefresh: () => void;
 };
 
@@ -39,6 +40,7 @@ type ColumnDef = {
 export function ResourceListTable({
   resource,
   resources,
+  parentParams,
   onRefresh,
 }: ResourceListTableProps) {
   const navigate = useNavigate();
@@ -151,8 +153,10 @@ export function ResourceListTable({
           <Button
             onClick={() =>
               navigate(
-                resource.substituteUrlParameters(resource.base_url()) +
-                  "/_create",
+                resource.substituteUrlParameters(
+                  resource.base_url(),
+                  parentParams,
+                ) + "/_create",
               )
             }
           >