Many things! (#8)

* some fixes and also breadcrumbs

* need to wire up the headers, but it should all work

* better sidebar + headers

* README

README.md

@@ -1,5 +1,9 @@
 # aep-explorer
 
+AEP Explorer is a tool designed to create a resource-oriented UI based off an OpenAPI schema.
+
+The tool can be run online or deployed locally depending on CORS settings.
+
 # Running
 ```
 npm install

src/App.tsx

@@ -1,10 +1,10 @@
 import "./App.css";
 import { useState } from "react";
-import { StateContext } from "./state/StateContext";
+import { HeadersContext, StateContext } from "./state/StateContext";
 import { OpenAPI, ResourceSchema } from "./state/openapi";
 import SpecSpecifierPage from "./app/spec_specifier/page";
 import { createBrowserRouter, RouteObject, RouterProvider } from "react-router-dom";
-import Page from "./app/explorer/page";
+import Layout from "./app/explorer/page";
 import ResourceList from "./app/explorer/resource_list";
 import CreateForm from "./app/explorer/form";
 import InfoPage from "./app/explorer/info";
@@ -13,15 +13,15 @@ import UpdateForm from "./app/explorer/update_form";
 function createRoutes(resources: ResourceSchema[]): RouteObject[] {
   let routes = [{
     path: "/",
-    element: <Page />,
+    element: <Layout />,
     children: [
       {
         path: "/",
         element: <SpecSpecifierPage />,
       },
       {
         path: "/_explorer",
-        element: <Page />,
+        element: <div />,
       },
     ].concat(resources.map((resource) => {
       return [
@@ -44,16 +44,17 @@ function createRoutes(resources: ResourceSchema[]): RouteObject[] {
       ]
     }).flat(1))
   }];
-  console.log("my routes");
-  console.log(routes);
   return routes;
 }
 
 function App() {
   const [state, setState] = useState(new OpenAPI({}));
+  const [headers, setHeaders] = useState("");
   return (
-    <StateContext.Provider value={{ spec: state, setSpec: setState  }}>
-      <RouterProvider router={createBrowserRouter(createRoutes(state.resources()))} />
+    <StateContext.Provider value={{ spec: state, setSpec: setState}}>
+      <HeadersContext.Provider value={{ headers: headers, setHeaders: setHeaders}}>
+        <RouterProvider router={createBrowserRouter(createRoutes(state.resources()))} />
+      </HeadersContext.Provider>
     </StateContext.Provider>
   );
 }

src/app/explorer/form.tsx

@@ -5,6 +5,7 @@ import { useMemo, } from "react";
 import { useForm } from "react-hook-form";
 import { useNavigate } from "react-router-dom";
 import { toast } from "@/hooks/use-toast";
+import { useHeaders } from "@/state/StateContext";
 
 type CreateFormProps = {
     resource: ResourceSchema
@@ -14,10 +15,12 @@ export default function CreateForm(props: CreateFormProps) {
     const form = useForm();
     const navigate = useNavigate();
 
+    const {headers, setHeaders} = useHeaders();
+
     const onSubmit = ((value) => {
         // Value is the properly formed JSON body.
         // Just need to submit it and navigate back to the list page.
-        props.resource.create(value).then(() => {
+        props.resource.create(value, headers).then(() => {
             toast({description: `Created ${value.id}`});
             navigate(-1);
         })

src/app/explorer/page.tsx

@@ -1,16 +1,23 @@
 import { AppSidebar } from "@/components/app-sidebar";
+import AppBreadcrumb from "@/components/breadcrumb";
 import {} from "@/components/ui/breadcrumb";
-import { SidebarInset, SidebarProvider } from "@/components/ui/sidebar";
+import { SidebarInset, SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar";
 import { Toaster } from "@/components/ui/toaster";
 import { useSpec } from "@/state/StateContext";
+import { Separator } from "@radix-ui/react-separator";
 import { Outlet } from "react-router-dom";
 
-export default function Page() {
+export default function Layout() {
   const { spec, setSpec } = useSpec();
   return (
     <SidebarProvider>
       <AppSidebar />
       <SidebarInset>
+      <header className="flex h-16 shrink-0 items-center gap-2 border-b px-4">
+          <SidebarTrigger className="-ml-1" />
+          <Separator orientation="vertical" className="mr-2 h-4" />
+          <AppBreadcrumb />
+        </header>
         <Outlet />
         <div className="flex flex-1 flex-col gap-4 p-4 pt-0">
           <div className="grid auto-rows-min gap-4 md:grid-cols-3">

src/app/explorer/resource_list.tsx

@@ -7,7 +7,7 @@ import {
     TableRow,
 } from "@/components/ui/table";
 import { ColumnDef } from "@tanstack/react-table"
-import { useSpec } from "@/state/StateContext";
+import { useHeaders, useSpec } from "@/state/StateContext";
 import { useCallback, useEffect, useState } from "react";
 import { Link, useNavigate, useParams } from "react-router-dom";
 import { DataTable } from "@/components/ui/data-table";
@@ -83,6 +83,8 @@ export default function ResourceList(props: ResourceListProps) {
             resources: [],
         });
 
+    const {headers, setHeaders} = useHeaders();
+
     function deleteResource(r: object) {
         const result = state?.resources.find((result: ResourceInstance) => result.id === r.id);
         if(result) {
@@ -94,7 +96,7 @@ export default function ResourceList(props: ResourceListProps) {
     }
     const refreshList = useCallback(() => {
                 props.resource
-                .list()
+                .list(headers)
                 .then((resources) => {
                     if (resources) {
                         setState({

src/components/app-sidebar.tsx

@@ -5,12 +5,13 @@ import {
   SidebarGroup,
   SidebarGroupLabel,
   SidebarHeader,
+  SidebarInput,
   SidebarMenu,
   SidebarMenuButton,
   SidebarMenuItem,
   SidebarRail,
 } from "@/components/ui/sidebar";
-import { useSpec } from "@/state/StateContext";
+import { useHeaders, useSpec } from "@/state/StateContext";
 import { Link } from "react-router-dom";
 
 export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
@@ -34,8 +35,23 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
             ))}
           </SidebarMenu>
         </SidebarGroup>
+        <p>Headers</p>
+        <p>key:value, comma-deliniated</p>
+        <TextBoxComponent />
       </SidebarContent>
       <SidebarRail />
     </Sidebar>
   );
 }
+
+export function TextBoxComponent() {
+  const {headers, setHeaders} = useHeaders();
+
+  const handleTextChange = (event) => {
+    setHeaders(event.target.value);
+  };
+
+  return (
+    <SidebarInput type="text" value={headers!} onChange={handleTextChange} />
+  );
+}

src/components/breadcrumb.tsx

@@ -0,0 +1,27 @@
+import { useMatches } from "react-router-dom";
+import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from "./ui/breadcrumb"
+import { createRouteObjects } from "@/lib/utils";
+import { useSpec } from "@/state/StateContext";
+
+export default function AppBreadcrumb() {
+    const breadcrumbs = useMatches();
+    const {spec, setSpec} = useSpec();
+    console.log(breadcrumbs);
+    console.log(createRouteObjects(spec?.resources()));
+
+    let breadcrumb_elements = [];
+    for(const i of breadcrumbs) {
+        breadcrumb_elements.push(<BreadcrumbItem className="hidden md:block">
+                        <BreadcrumbPage>{i.pathname}</BreadcrumbPage>
+                    </BreadcrumbItem>);
+        breadcrumb_elements.push(<BreadcrumbSeparator className="hidden md:block" />);
+    }
+
+    return (
+    <Breadcrumb>
+        <BreadcrumbList>
+            {breadcrumb_elements}
+        </BreadcrumbList>
+    </Breadcrumb>
+    );
+}