Merge pull request #1246 from iamanishroy/ui-bug-fixes

UI improvements and fixes [ROWY-1117, ROWY-1110, ROWY-925, ROWY-1034]

src/components/Table/TableCell/TableCell.tsx

@@ -185,14 +185,21 @@ export const TableCell = memo(function TableCell({
       }}
       onContextMenu={(e) => {
         e.preventDefault();
-        setSelectedCell({
-          arrayIndex: row.original._rowy_ref.arrayTableData?.index,
-          path: row.original._rowy_ref.path,
-          columnKey: cell.column.id,
-          focusInside: false,
+        let isEditorCell = false;
+
+        setSelectedCell((prev) => {
+          isEditorCell = prev?.focusInside === true;
+          return {
+            arrayIndex: row.original._rowy_ref.arrayTableData?.index,
+            path: row.original._rowy_ref.path,
+            columnKey: cell.column.id,
+            focusInside: false,
+          };
         });
         (e.target as HTMLDivElement).focus();
-        setContextMenuTarget(e.target as HTMLElement);
+        if (!isEditorCell) {
+          setContextMenuTarget(e.target as HTMLElement);
+        }
       }}
     >
       {renderedValidationTooltip}

src/components/fields/Action/ActionFab.tsx

@@ -204,6 +204,7 @@ export default function ActionFab({
       }
       size="small"
       sx={{
+        zIndex: 1,
         "&:not(.MuiFab-primary):not(.MuiFab-secondary):not(.Mui-disabled)": {
           bgcolor: (theme) =>
             theme.palette.mode === "dark"

src/components/fields/Array/DisplayCell.tsx

@@ -1,5 +1,7 @@
 import { useTheme } from "@mui/material";
 import { IDisplayCellProps } from "@src/components/fields/types";
+import { isArray } from "lodash-es";
+import { SupportedTypes, detectType } from "./SideDrawerField/SupportedTypes";
 
 export default function Array({ value }: IDisplayCellProps) {
   const theme = useTheme();
@@ -7,6 +9,14 @@ export default function Array({ value }: IDisplayCellProps) {
   if (!value) {
     return null;
   }
+  if (isArray(value)) {
+    value = value.map((item: any) => {
+      let itemType = detectType(item);
+      let converter = SupportedTypes[itemType].humanize;
+      if (!converter) return item;
+      return converter(item);
+    });
+  }
 
   return (
     <div

src/components/fields/Array/SideDrawerField/SupportedTypes.ts

@@ -28,18 +28,21 @@ export const SupportedTypes = {
     initialValue: 0,
     dataType: "common",
     instance: Object,
+    humanize: undefined,
   },
   [FieldType.shortText]: {
     Sidebar: ShortTextValueSidebar,
     initialValue: "",
     dataType: "common",
     instance: Object,
+    humanize: undefined,
   },
   [FieldType.checkbox]: {
     Sidebar: CheckBoxValueSidebar,
     initialValue: false,
     dataType: "common",
     instance: Object,
+    humanize: undefined,
   },
   [FieldType.json]: {
     Sidebar: JsonValueSidebar,
@@ -51,24 +54,34 @@ export const SupportedTypes = {
     ],
     dataType: "common",
     instance: Object,
+    humanize: undefined,
   },
   [FieldType.geoPoint]: {
     Sidebar: GeoPointValueSidebar,
     initialValue: new GeoPoint(0, 0),
     dataType: "firestore-type",
     instance: GeoPoint,
+    humanize: (value: GeoPoint) => {
+      return `${value.latitude}, ${value.longitude}`;
+    },
   },
   [FieldType.dateTime]: {
     Sidebar: DateTimeValueSidebar,
     initialValue: Timestamp.now(),
     dataType: "firestore-type",
     instance: Timestamp,
+    humanize: (value: Timestamp) => {
+      return value.toDate().toLocaleString();
+    },
   },
   [FieldType.reference]: {
     Sidebar: ReferenceValueSidebar,
     initialValue: null,
     dataType: "firestore-type",
     instance: DocumentReference,
+    humanize: (value: DocumentReference) => {
+      return value.path;
+    },
   },
 };
 

src/components/fields/Json/SideDrawerField.tsx

@@ -83,7 +83,7 @@ export default function Json({
         sx={{
           minHeight: 32,
           mt: -32 / 8,
-          ".MuiPopover-root &": { mt: 0 }, // Don’t have margins in popover cell
+          ".MuiPopover-root & , .MuiDialog-root &": { mt: 0 }, // Don’t have margins in popover cell and dialog
 
           "& .MuiTabs-flexContainer": {
             justifyContent: "flex-end",