Listing entities

gui/rpk-gui/src/pages/firm/EntityRoutes.tsx

@@ -3,14 +3,26 @@ import React, { useContext } from "react";
 import { FirmContext } from "../../contexts/FirmContext";
 import List from "./base-page/List";
 
+type Entity = {
+  id: string,
+  label: string,
+  entity_data: { type: string },
+}
+
 export const EntityRoutes = () => {
-  const { currentFirm } = useContext(FirmContext);
 
   return (
-    <>
     <Routes>
-        <Route index element={ <List resource={`${currentFirm.instance}/${currentFirm.firm}/entities/`} /> } />
+      <Route index element={ <ListEntity /> } />
     </Routes>
-    </>
   );
 }
+
+const ListEntity = () => {
+  const { currentFirm } = useContext(FirmContext);
+  const columns = [
+    { field: "label", headerName: "Label", flex: 1 },
+    { field: "entity_data", headerName: "Type", flex: 1, valueFormatter: ({ type }: {type: string}) => type }
+  ];
+  return <List<Entity> resource={`firm/${currentFirm.instance}/${currentFirm.firm}/entities/`} columns={columns} />
+}

gui/rpk-gui/src/pages/firm/base-page/List.tsx

@@ -1,21 +1,28 @@
 import { UiSchema } from "@rjsf/utils";
-import { List as RefineList } from "@refinedev/mui";
-import { DataGrid } from "@mui/x-data-grid";
+import { List as RefineList, useDataGrid } from "@refinedev/mui";
+import { DataGrid, GridColDef, GridValidRowModel } from "@mui/x-data-grid";
+import React from "react";
 
-type ListProps = {
+type ListProps<T extends GridValidRowModel> = {
   resource: string,
+  columns: GridColDef<T>[],
   schemaName?: string,
   uiSchema?: UiSchema,
 }
 
-const List = (props: ListProps) => {
-  const { schemaName, resource, uiSchema } = props;
+const List = <T extends GridValidRowModel>(props: ListProps<T>) => {
+  const { schemaName, resource, uiSchema, columns } = props;
+  const { dataGridProps } = useDataGrid<T>({resource: resource});
 
+  const cols = React.useMemo<GridColDef<T>[]>(
+    () => columns,
+    [],
+  );
   return (
     <RefineList
-      resource={resource}
+      canCreate={true}
       >
-      <DataGrid columns={} />
+      <DataGrid {...dataGridProps} columns={cols} />
     </RefineList>
   )
 }

gui/rpk-gui/src/pages/firm/index.tsx

@@ -1,4 +1,4 @@
-import {Route, Routes} from "react-router";
+import { Route, Routes, Link } from "react-router";
 import React, { useContext } from "react";
 import { FirmContext, FirmContextProvider } from "../../contexts/FirmContext";
 import { Header } from "../../components";
@@ -38,7 +38,13 @@ const FirmHome = () => {
   }
 
   return (
+    <>
       <h1>This is la firme {currentFirm.instance} / {currentFirm.firm}</h1>
+      <ul>
+        <li><Link to="entities">Entitées</Link></li>
+      </ul>
+    </>
+
   );
 }