added bin history, fixed some column stuff in the DiffHistory

src/bin/BinHistory.tsx

@@ -1,14 +1,14 @@
-import { Box, Card, Typography } from "@material-ui/core";
+import { Box, Card, Typography, Theme } from "@mui/material";
-import { createStyles, makeStyles, Theme } from "@material-ui/core/styles";
+import { createStyles, makeStyles } from "@mui/styles";
-import { MatchParams } from "navigation/Routes";
+//import { MatchParams } from "navigation/Routes";
 import DiffHistory, { ListResult, Record } from "common/DiffHistory";
 import { useSnackbar, useMobile } from "hooks";
 import { useBinAPI } from "providers";
 import { Bin } from "models";
 import { TranslateKey, TranslateValue } from "pbHelpers/Bin";
 import { pond } from "protobuf-ts/pond";
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
-import { useParams } from "react-router";
+//import { useParams } from "react-router";
 import { or } from "utils/types";
 
 const useStyles = makeStyles((theme: Theme) =>
@@ -29,16 +29,17 @@ const useStyles = makeStyles((theme: Theme) =>
 );
 
 interface Props {
-  binID?: string;
+  binID: string;
   drawer?: boolean;
 }
 
 export default function BinHistory(props: Props) {
-  const params = useParams<MatchParams>();
+  //const params = useParams<MatchParams>();
+  const {binID, drawer} = props
   const classes = useStyles();
   const { openSnack } = useSnackbar();
   const binAPI = useBinAPI();
-  const binID = props.binID ?? params.binID;
+  //const binID = props.binID ?? params.binID;
   const [bin, setBin] = useState(Bin.any({ settings: { binId: binID } }));
   const binName = bin.name();
   const isMobile = useMobile();
@@ -92,7 +93,7 @@ export default function BinHistory(props: Props) {
   };
 
   return (
-    <Card className={isMobile || props.drawer ? classes.gutterMobile : classes.gutter}>
+    <Card className={isMobile || drawer ? classes.gutterMobile : classes.gutter}>
       <Typography variant="subtitle2" color="textPrimary" className={classes.title}>
         {binName} History
       </Typography>
@@ -103,10 +104,10 @@ export default function BinHistory(props: Props) {
           list={list}
           translateKey={translateKey}
           translateValue={translateValue}
-          cellStyle={{ margin: "0px", padding: "0.5rem" }}
+          cellStyle={{ margin: "0px", padding: 1 }}
           showTitle={false}
           headerStyle={{ margin: "0px" }}
-          drawer={props.drawer}
+          drawer={drawer}
         />
       </Box>
     </Card>

src/common/DiffHistory.tsx

@@ -8,7 +8,8 @@ import {
   ListItemIcon, 
   Chip, 
   Avatar, 
-  Grid2 as Grid 
+  Grid2 as Grid, 
+  SxProps
 } from "@mui/material";
 import { Add, ChangeHistory, Remove, Face, Sync } from "@mui/icons-material";
 import { amber, red, blue, green } from "@mui/material/colors";
@@ -258,7 +259,7 @@ interface Props {
   translateKey: (key: keyof any, type?: pond.ObjectType) => string;
   translateValue: (key: keyof any, obj: any, type?: pond.ObjectType) => string;
   headerStyle?: React.CSSProperties;
-  cellStyle?: React.CSSProperties | ((data: RowData[], rowData: RowData) => React.CSSProperties);
+  cellStyle?: SxProps<Theme>;
   noPaging?: boolean;
   sortingEnabled?: boolean;
   filteringEnabled?: boolean;
@@ -391,6 +392,7 @@ export default function DiffHistory(props: Props) {
   const columns = (): Column<RowData>[] => {
     return [{
       title: "Time",
+      cellStyle: cellStyle,
       render: (row: RowData) => (
         <div style={isMobile || drawer ? { minWidth: "4rem" } : {}}>
           {moment(row.timestamp).calendar()}
@@ -402,16 +404,17 @@ export default function DiffHistory(props: Props) {
     },
     {
       title: "Object Type",
+      cellStyle: cellStyle,
       render: row => {
         if (row.type) {
-          return (<div>ObjectDescriber(row.type).name</div>)
+          return (<div>{ObjectDescriber(row.type).name}</div>)
         }
         return <div></div>
       }
     },
     {
       title: "User",
-      // cellStyle: cellStyle,
+      cellStyle: cellStyle,
       // field: "user",
       render: row => {
         const profile = getProfile(row.user);
@@ -435,11 +438,12 @@ export default function DiffHistory(props: Props) {
     },
     {
       title: "Status",
-      render: row => <div>row.status</div>
+      cellStyle: cellStyle,
+      render: row => <div>{row.status}</div>
     },
     {
       title: "Summary",
-      // cellStyle: cellStyle,
+      cellStyle: cellStyle,
       // hidden: isMobile || drawer,
       render: row => (
         <Summary
@@ -467,7 +471,7 @@ export default function DiffHistory(props: Props) {
 
   return (
     <ResponsiveTable<RowData>
-      title={name + " History"}
+      title={showTitle ? name + " History" : undefined}
       rows={data} 
       columns={columns()}
       total={0} 

src/pages/Bin.tsx

@@ -542,7 +542,7 @@ export default function Bin(props: Props) {
             </Box>
           </TabPanelMine>
           <TabPanelMine value={value} index={1}>
-            {/* <BinHistory drawer={drawer} binID={binID} /> */}
+            <BinHistory drawer={drawer} binID={binID} />
           </TabPanelMine>
         </React.Fragment>
       );