add User field

www/src/components/SideDrawer/Form/utils.ts

@@ -26,7 +26,7 @@ export const useFieldStyles = makeStyles((theme) =>
         theme.palette.type === "light"
           ? "rgba(0, 0, 0, 0.09)"
           : "rgba(255, 255, 255, 0.09)",
-      padding: theme.spacing(9 / 8, 1, 9 / 8, 1.5),
+      padding: theme.spacing(1, 1, 1, 1.5),
 
       width: "100%",
       minHeight: 56,

www/src/components/Table/ColumnHeader.tsx

@@ -17,7 +17,8 @@ import {
 import SortDescIcon from "@material-ui/icons/ArrowDownward";
 import DropdownIcon from "@material-ui/icons/ArrowDropDownCircle";
 
-import { getFieldIcon, FieldType } from "constants/fields";
+import { FieldType } from "constants/fields";
+import { getFieldProp } from "components/fields";
 import { useFiretableContext } from "contexts/FiretableContext";
 import { FiretableOrderBy } from "hooks/useFiretable";
 
@@ -203,7 +204,7 @@ export default function DraggableHeaderRenderer<R>({
             navigator.clipboard.writeText(column.key as string);
           }}
         >
-          {getFieldIcon((column as any).type)}
+          {getFieldProp("icon", (column as any).type)}
         </Grid>
       </Tooltip>
 

www/src/components/fields/Id/index.tsx

@@ -2,7 +2,7 @@ import React, { lazy } from "react";
 import { IFieldConfig, FieldType } from "components/fields/types";
 import withCustomCell from "components/Table/withCustomCell";
 
-import IdIcon from "@material-ui/icons/CheckBox";
+import IdIcon from "assets/icons/Id";
 import BasicCell from "../_BasicCell/BasicCellNull";
 import NullEditor from "components/Table/editors/NullEditor";
 

www/src/components/fields/User/SideDrawerField.tsx

@@ -0,0 +1,68 @@
+import React from "react";
+import clsx from "clsx";
+import { Controller } from "react-hook-form";
+import { ISideDrawerFieldProps } from "../types";
+
+import {
+  createStyles,
+  makeStyles,
+  Grid,
+  Typography,
+  Avatar,
+} from "@material-ui/core";
+import { useFieldStyles } from "components/SideDrawer/Form/utils";
+
+import { format } from "date-fns";
+import { DATE_TIME_FORMAT } from "constants/dates";
+
+const useStyles = makeStyles((theme) =>
+  createStyles({
+    labelContainer: { cursor: "default" },
+
+    avatar: {
+      width: 32,
+      height: 32,
+      marginRight: theme.spacing(1.5),
+    },
+  })
+);
+
+export default function Id({ control, column }: ISideDrawerFieldProps) {
+  const classes = useStyles();
+  const fieldClasses = useFieldStyles();
+
+  return (
+    <Controller
+      control={control}
+      name={column.key}
+      render={({ value }) => {
+        if (!value || !value.displayName || !value.timestamp)
+          return <div className={fieldClasses.root} />;
+
+        return (
+          <Grid
+            container
+            alignItems="center"
+            className={clsx(fieldClasses.root, classes.labelContainer)}
+          >
+            <Grid item>
+              <Avatar
+                alt="Avatar"
+                src={value.photoURL}
+                className={classes.avatar}
+              />
+            </Grid>
+            <Grid item>
+              <Typography variant="body2">
+                {value.displayName} ({value.email})
+              </Typography>
+              <Typography variant="body2" color="textSecondary">
+                {format(value.timestamp.toDate(), DATE_TIME_FORMAT)}
+              </Typography>
+            </Grid>
+          </Grid>
+        );
+      }}
+    />
+  );
+}

www/src/components/fields/User/TableCell.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+import { ICustomCellProps } from "../types";
+
+import { Tooltip, Chip, Avatar } from "@material-ui/core";
+
+import { format } from "date-fns";
+import { DATE_TIME_FORMAT } from "constants/dates";
+
+export default function Id({ value }: ICustomCellProps) {
+  if (!value || !value.displayName || !value.timestamp) return null;
+
+  return (
+    <Tooltip title={format(value.timestamp.toDate(), DATE_TIME_FORMAT)}>
+      <Chip
+        avatar={<Avatar alt="Avatar" src={value.photoURL} />}
+        label={value.displayName}
+      />
+    </Tooltip>
+  );
+}

www/src/components/fields/User/index.tsx

@@ -0,0 +1,28 @@
+import React, { lazy } from "react";
+import { IFieldConfig, FieldType } from "components/fields/types";
+import withCustomCell from "components/Table/withCustomCell";
+
+import UserIcon from "@material-ui/icons/Person";
+import BasicCell from "../_BasicCell/BasicCellNull";
+import NullEditor from "components/Table/editors/NullEditor";
+
+const TableCell = lazy(
+  () => import("./TableCell" /* webpackChunkName: "TableCell-User" */)
+);
+const SideDrawerField = lazy(
+  () =>
+    import("./SideDrawerField" /* webpackChunkName: "SideDrawerField-User" */)
+);
+
+export const config: IFieldConfig = {
+  type: FieldType.user,
+  name: "User",
+  dataType:
+    "{ displayName: string, email: string, emailVerified: boolean, isAnonymous: boolean, photoURL: string, timestamp: firebase.firestore.Timestamp, uid: string }",
+  icon: <UserIcon />,
+  description: "Displays the _ft_updatedBy field for editing history.",
+  TableCell: withCustomCell(TableCell, BasicCell),
+  TableEditor: NullEditor,
+  SideDrawerField,
+};
+export default config;

www/src/components/fields/index.tsx

@@ -11,6 +11,7 @@ import DateTime from "./DateTime";
 import Duration from "./Duration";
 import SubTable from "./SubTable";
 import Action from "./Action";
+import User from "./User";
 import Id from "./Id";
 
 // Export field configs in order for FieldsDropdown
@@ -51,7 +52,7 @@ export const FIELDS: IFieldConfig[] = [
   // TODO: derivative,
   // TODO: aggregate,
   // FIRETABLE
-  // TODO: user,
+  User,
   Id,
 ];