v2.6.1 – Bug fixes

public/index.html

@@ -75,6 +75,12 @@
       href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap"
     />
 
+    <style>
+      :root {
+        color-scheme: light dark;
+      }
+    </style>
+
     <title>Rowy</title>
 
     <meta name="title" content="Rowy – GCP as easy as ABC" />

src/assets/icons/index.ts

@@ -88,6 +88,12 @@ export { LanguageMarkdownOutline as Markdown };
 import { TableRow } from "mdi-material-ui";
 export { TableRow as Row };
 
+import { Table } from "mdi-material-ui";
+export { Table };
+
+import { Leaf } from "mdi-material-ui";
+export { Leaf };
+
 export * from "./AddRow";
 export * from "./AddRowTop";
 export * from "./ChevronDown";

src/atoms/tableScope/rowActions.ts

@@ -346,16 +346,6 @@ export const updateFieldAtom = atom(
       update[tableSettings.auditFieldUpdatedBy || "_updatedBy"] = auditValue;
     }
 
-    // Check for required fields
-    const requiredFields = ignoreRequiredFields
-      ? []
-      : tableColumnsOrdered
-          .filter((column) => column.config?.required)
-          .map((column) => column.key);
-    const missingRequiredFields = ignoreRequiredFields
-      ? []
-      : requiredFields.filter((field) => row[field] === undefined);
-
     // Apply field update
     if (!deleteField) {
       // Check for equality. If updated value is same as current, skip update
@@ -367,6 +357,17 @@ export const updateFieldAtom = atom(
       _set(update, fieldName, value);
     }
 
+    // Check for required fields
+    const newRowValues = updateRowData(cloneDeep(row), update);
+    const requiredFields = ignoreRequiredFields
+      ? []
+      : tableColumnsOrdered
+          .filter((column) => column.config?.required)
+          .map((column) => column.key);
+    const missingRequiredFields = ignoreRequiredFields
+      ? []
+      : requiredFields.filter((field) => newRowValues[field] === undefined);
+
     // If it’s a local row, update the row in rowsLocal
     if (isLocalRow) {
       set(tableRowsLocalAtom, {
@@ -379,12 +380,11 @@ export const updateFieldAtom = atom(
       // If it has no missingRequiredFields, also write to db
       // And write entire row to handle the case where it doesn’t exist in db yet
       if (missingRequiredFields.length === 0) {
-        const rowValues = updateRowData(cloneDeep(row), update);
-        if (deleteField) unset(rowValues, fieldName);
+        if (deleteField) unset(newRowValues, fieldName);
 
         await updateRowDb(
           row._rowy_ref.path,
-          omitRowyFields(rowValues),
+          omitRowyFields(newRowValues),
           deleteField ? [fieldName] : []
         );
       }

src/components/CodeEditor/CodeEditor.tsx

@@ -10,7 +10,7 @@ import { ResizeBottomRight } from "@src/assets/icons";
 import useMonacoCustomizations, {
   IUseMonacoCustomizationsProps,
 } from "./useMonacoCustomizations";
-import FullScreenButton from "./FullScreenButton";
+import FullScreenButton from "@src/components/FullScreenButton";
 import { spreadSx } from "@src/utils/ui";
 
 export interface ICodeEditorProps
@@ -73,6 +73,7 @@ export default function CodeEditor({
   return (
     <TrapFocus open={fullScreen}>
       <Box
+        component="div"
         sx={[boxSx, ...spreadSx(containerProps?.sx)]}
         style={fullScreen ? { height: "100%" } : {}}
       >

src/components/CodeEditor/DiffEditor.tsx

@@ -13,7 +13,7 @@ import { ResizeBottomRight } from "@src/assets/icons";
 import useMonacoCustomizations, {
   IUseMonacoCustomizationsProps,
 } from "./useMonacoCustomizations";
-import FullScreenButton from "./FullScreenButton";
+import FullScreenButton from "@src/components/FullScreenButton";
 import { spreadSx } from "@src/utils/ui";
 
 export interface IDiffEditorProps
@@ -64,6 +64,7 @@ export default function DiffEditor({
   return (
     <TrapFocus open={fullScreen}>
       <Box
+        component="div"
         sx={[boxSx, ...spreadSx(containerProps?.sx)]}
         style={fullScreen ? { height: "100%" } : {}}
       >

src/components/ColorPickerInput.tsx

@@ -0,0 +1,76 @@
+import { useState, useRef, MutableRefObject, useLayoutEffect } from "react";
+import { Box, useTheme } from "@mui/material";
+
+import { Color, ColorPicker } from "react-color-palette";
+
+const useResponsiveWidth = (): [
+  width: number,
+  setRef: MutableRefObject<HTMLElement | null>
+] => {
+  const ref = useRef(null);
+  const [width, setWidth] = useState(0);
+
+  useLayoutEffect(() => {
+    if (!ref || !ref.current) {
+      return;
+    }
+    const resizeObserver = new ResizeObserver((targets) => {
+      const { width: currentWidth } = targets[0].contentRect;
+      setWidth(currentWidth);
+    });
+
+    resizeObserver.observe(ref.current);
+
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, []);
+
+  return [width, ref];
+};
+
+export interface IColorPickerProps {
+  value: Color;
+  onChangeComplete: (color: Color) => void;
+  disabled?: boolean;
+}
+
+export default function ColorPickerInput({
+  value,
+  onChangeComplete,
+  disabled = false,
+}: IColorPickerProps) {
+  const [localValue, setLocalValue] = useState(value);
+  const [width, setRef] = useResponsiveWidth();
+  const theme = useTheme();
+
+  return (
+    <Box
+      ref={setRef}
+      sx={[
+        {
+          padding: theme.spacing(1.5),
+          paddingTop: theme.spacing(1),
+          transitionDuration: 0,
+          "& .rcp": {
+            border: "none",
+            "& .rcp-saturation": {
+              borderRadius: theme.spacing(0.5),
+            },
+            "& .rcp-body": {
+              boxSizing: "unset",
+            },
+          },
+        },
+      ]}
+    >
+      <ColorPicker
+        width={width}
+        height={150}
+        color={localValue}
+        onChange={(color) => setLocalValue(color)}
+        onChangeComplete={onChangeComplete}
+      />
+    </Box>
+  );
+}

src/components/ColumnMenu/ColumnMenu.tsx

@@ -124,8 +124,9 @@ export default function ColumnMenu() {
   };
 
   const localViewActions: IMenuContentsProps["menuItems"] = [
-    { type: "subheader" },
+    { type: "subheader", key: "subLocalView" },
     {
+      key: "sortDesc",
       label: "Sort: descending",
       activeLabel: "Remove sort: descending",
       icon: <ArrowDownwardIcon />,
@@ -139,6 +140,7 @@ export default function ColumnMenu() {
       disabled: column.type === FieldType.id,
     },
     {
+      key: "sortAsc",
       label: "Sort: ascending",
       activeLabel: "Remove sort: ascending",
       icon: <ArrowUpwardIcon />,
@@ -152,6 +154,7 @@ export default function ColumnMenu() {
       disabled: column.type === FieldType.id,
     },
     {
+      key: "hide",
       label: "Hide",
       icon: <VisibilityIcon />,
       onClick: () => {
@@ -168,6 +171,7 @@ export default function ColumnMenu() {
       disabled: !updateUserSettings,
     },
     {
+      key: "filter",
       label: "Filter…",
       icon: <FilterIcon />,
       onClick: () => {
@@ -187,9 +191,10 @@ export default function ColumnMenu() {
   ];
 
   const configActions: IMenuContentsProps["menuItems"] = [
-    { type: "subheader" },
+    { type: "subheader", key: "subActionsConfig" },
     {
       label: "Lock",
+      key: "lock",
       activeLabel: "Unlock",
       icon: <LockOpenIcon />,
       activeIcon: <LockIcon />,
@@ -204,6 +209,7 @@ export default function ColumnMenu() {
     },
     {
       label: "Disable resize",
+      key: "disableResize",
       activeLabel: "Enable resize",
       icon: <CellResizeIcon />,
       onClick: () => {
@@ -217,6 +223,7 @@ export default function ColumnMenu() {
     },
     {
       label: "Freeze",
+      key: "freeze",
       activeLabel: "Unfreeze",
       icon: <FreezeIcon />,
       activeIcon: <UnfreezeIcon />,
@@ -229,6 +236,7 @@ export default function ColumnMenu() {
     // { type: "subheader" },
     {
       label: "Rename…",
+      key: "rename",
       icon: <EditIcon />,
       onClick: () => {
         openColumnModal({ type: "name", columnKey: column.key });
@@ -237,6 +245,7 @@ export default function ColumnMenu() {
     },
     {
       label: `Edit type: ${getFieldProp("name", column.type)}…`,
+      key: "editType",
       // This is based on the cell type
       icon: getFieldProp("icon", column.type),
       onClick: () => {
@@ -246,6 +255,7 @@ export default function ColumnMenu() {
     },
     {
       label: `Column config…`,
+      key: "columConfig",
       icon: <SettingsIcon />,
       onClick: () => {
         openColumnModal({ type: "config", columnKey: column.key });
@@ -299,8 +309,9 @@ export default function ColumnMenu() {
     }
   };
   const derivativeActions: IMenuContentsProps["menuItems"] = [
-    { type: "subheader" },
+    { type: "subheader", key: "sub-derivative" },
     {
+      key: "evaluateAll",
       label: altPress ? "Evaluate all" : "Evaluate all…",
       icon: <EvalIcon />,
       onClick: altPress
@@ -323,9 +334,10 @@ export default function ColumnMenu() {
   ];
 
   const columnActions: IMenuContentsProps["menuItems"] = [
-    { type: "subheader" },
+    { type: "subheader", key: "subActions" },
     {
       label: "Insert to the left…",
+      key: "insertLeft",
       icon: <ColumnPlusBeforeIcon />,
       onClick: () => {
         openColumnModal({ type: "new", index: column.index - 1 });
@@ -334,6 +346,7 @@ export default function ColumnMenu() {
     },
     {
       label: "Insert to the right…",
+      key: "insertRight",
       icon: <ColumnPlusAfterIcon />,
       onClick: () => {
         openColumnModal({ type: "new", index: column.index + 1 });
@@ -342,6 +355,7 @@ export default function ColumnMenu() {
     },
     {
       label: `Delete column${altPress ? "" : "…"}`,
+      key: "delete",
       icon: <ColumnRemoveIcon />,
       onClick: altPress
         ? handleDeleteColumn

src/components/ColumnMenu/MenuContents.tsx

@@ -4,6 +4,7 @@ import { MenuItem, ListItemIcon, ListSubheader, Divider } from "@mui/material";
 
 export interface IMenuContentsProps {
   menuItems: {
+    key: string;
     type?: string;
     label?: string;
     activeLabel?: string;
@@ -36,6 +37,7 @@ export default function MenuContents({ menuItems }: IMenuContentsProps) {
         return (
           <MenuItem
             key={index}
+            id={`column-menu-item-${item.key}`}
             onClick={item.onClick}
             color={item.color}
             selected={item.active}