v2.6.1 – Bug fixes (#743)

* Bump ejs from 3.1.6 to 3.1.8 Bumps [ejs](https://github.com/mde/ejs) from 3.1.6 to 3.1.8. - [Release notes](https://github.com/mde/ejs/releases) - [Changelog](https://github.com/mde/ejs/blob/main/CHANGELOG.md) - [Commits](mde/ejs@v3.1.6...v3.1.8) --- updated-dependencies: - dependency-name: ejs dependency-type: indirect ... Signed-off-by: dependabot[bot] <support@github.com> * Bump minimist from 1.2.5 to 1.2.6 Bumps [minimist](https://github.com/substack/minimist) from 1.2.5 to 1.2.6. - [Release notes](https://github.com/substack/minimist/releases) - [Commits](https://github.com/substack/minimist/compare/1.2.5...1.2.6) --- updated-dependencies: - dependency-name: minimist dependency-type: indirect ... Signed-off-by: dependabot[bot] <support@github.com> * Bump tmpl from 1.0.4 to 1.0.5 Bumps [tmpl](https://github.com/daaku/nodejs-tmpl) from 1.0.4 to 1.0.5. - [Release notes](https://github.com/daaku/nodejs-tmpl/releases) - [Commits](https://github.com/daaku/nodejs-tmpl/commits/v1.0.5) --- updated-dependencies: - dependency-name: tmpl dependency-type: indirect ... Signed-off-by: dependabot[bot] <support@github.com> * Bump protobufjs from 6.11.2 to 6.11.3 Bumps [protobufjs](https://github.com/protobufjs/protobuf.js) from 6.11.2 to 6.11.3. - [Release notes](https://github.com/protobufjs/protobuf.js/releases) - [Changelog](https://github.com/protobufjs/protobuf.js/blob/v6.11.3/CHANGELOG.md) - [Commits](protobufjs/protobuf.js@v6.11.2...v6.11.3) --- updated-dependencies: - dependency-name: protobufjs dependency-type: indirect ... Signed-off-by: dependabot[bot] <support@github.com> * fix(rich-text-editor): fix dark mode ui appearance (#696) * fix(rich-text-editor): fix dark mode ui appearance * Update src/components/RichTextEditor.tsx Co-authored-by: Sidney Alcantara <sidney@sidney.me> * Update src/components/RichTextEditor.tsx Co-authored-by: Sidney Alcantara <sidney@sidney.me> * Update src/components/RichTextEditor.tsx Co-authored-by: Sidney Alcantara <sidney@sidney.me> * Update src/components/RichTextEditor.tsx Co-authored-by: Sidney Alcantara <sidney@sidney.me> * Update src/components/RichTextEditor.tsx Co-authored-by: Sidney Alcantara <sidney@sidney.me> * Update src/components/RichTextEditor.tsx Co-authored-by: Sidney Alcantara <sidney@sidney.me> * Update src/components/RichTextEditor.tsx Co-authored-by: Sidney Alcantara <sidney@sidney.me> * Update src/theme/RichTextEditorDarkCSS.tsx Co-authored-by: Sidney Alcantara <sidney@sidney.me> * Update src/theme/RichTextEditorLightCSS.tsx Co-authored-by: Sidney Alcantara <sidney@sidney.me> * fix(rich-text-editor): add stylings to dropdown * fix(rich-text-editor): add toolbar stylings * fix(rich-text-editor): reset hover&focus bg Co-authored-by: Sidney Alcantara <sidney@sidney.me> * update date & time filter operators for clarity * Action field: prevent selecting self as required field (fixes ROWY-551) * Date & Time: only show date for date filters * move fullScreenButton to be shared, remove md settings * bundle-analyzer * Leaf icon: use mdi-material-ui * Feat: Percentage field color customization (#692) * feat(percentage-c11n): convert to table cell * feat(percentage-c11n): add logic to default configs * feat(percentage-c11n): add color picker to settings * feat(percentage-c11n): change default colors * feat(percentage-c11n): fix button text color * feat(percentage-c11n): add labels to settings * feat(percentage-c11n): add preview section * feat(percentage-c11n): fix cache issues with debouncing * feat(percentage-c11n): add width responsiveness to color picker * feat(percentage-c11n): fix responsiveness issues * feat(percentage-c11n): add checkbox, refactor a little * feat(percentage-c11n): convert data type to array * feat(percentage-c11n): refactor config states * feat(percentage-c11n): fix defaults * feat(percentage-c11n): add basic cell without bg * feat(percentage-c11n): remove collapse * feat(percentage-c11n): refactor checkStates * feat(percentage-c11n): add grid layout * feat(percentage-c11n): chore conventions * feat(percentage-c11n): add default theme color to sidedrawer * remove redundant fragment Co-authored-by: Sidney Alcantara <sidney@sidney.me> * fix text color in preview Co-authored-by: Sidney Alcantara <sidney@sidney.me> * fix: change state to derived state Co-authored-by: Sidney Alcantara <sidney@sidney.me> * fix: review suggestions * fix: remove redundant change call Co-authored-by: Sidney Alcantara <sidney@sidney.me> * fix(percentage-c11n): remove redundant dependencies Co-authored-by: Shams <shams.mosowi@gmail.com> Co-authored-by: Sidney Alcantara <sidney@sidney.me> * extend callable timeout to over 9minutes * fix timeout value * fix page loading with white screen while system is in dark mode * Revert "bundle-analyzer" This reverts commit dd214b9. * fix nav items not accessible with Tab * Percentage: don’t display if value null or undefined * fix NavDrawer causing compile to fail * show text field if collections array is empy * column ids * row ID * fix create table showing empty dropdown for collections * fix row not writing to db once all required fields are written Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Han Tuerker <46192266+htuerker@users.noreply.github.com> Co-authored-by: shamsmosowi <shams.mosowi@gmail.com>
rowyio · Aug 10, 2022 · a35afa9 · a35afa9
1 parent e4e19f3
commit a35afa9
Show file tree

Hide file tree

Showing 35 changed files with 682 additions and 252 deletions.
diff --git a/public/index.html b/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" />

diff --git a/src/assets/icons/Leaf.tsx b/src/assets/icons/Leaf.tsx
diff --git a/src/assets/icons/index.ts b/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";

diff --git a/src/atoms/tableScope/rowActions.ts b/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] : []
         );
       }

diff --git a/src/components/CodeEditor/CodeEditor.tsx b/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%" } : {}}
       >

diff --git a/src/components/CodeEditor/DiffEditor.tsx b/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%" } : {}}
       >

diff --git a/src/components/ColorPickerInput.tsx b/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>
+  );
+}
diff --git a/src/components/ColumnMenu/ColumnMenu.tsx b/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

diff --git a/src/components/ColumnMenu/MenuContents.tsx b/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}

diff --git a/...omponents/CodeEditor/FullScreenButton.tsx → src/components/FullScreenButton.tsx b/...omponents/CodeEditor/FullScreenButton.tsx → src/components/FullScreenButton.tsx