Merge pull request #674 from rowyio/rc

v2.5.0

Author: shamsmosowi

package.json

@@ -1,6 +1,6 @@
 {
   "name": "rowy",
-  "version": "2.4.0",
+  "version": "2.5.0",
   "homepage": "https://rowy.io",
   "repository": {
     "type": "git",
@@ -15,10 +15,10 @@
     "@hookform/resolvers": "^2.8.5",
     "@mdi/js": "^6.5.95",
     "@monaco-editor/react": "^4.3.1",
-    "@mui/icons-material": "^5.4.4",
-    "@mui/lab": "^5.0.0-alpha.71",
-    "@mui/material": "^5.4.4",
-    "@mui/styles": "^5.4.4",
+    "@mui/icons-material": "^5.5.1",
+    "@mui/lab": "^5.0.0-alpha.73",
+    "@mui/material": "^5.5.1",
+    "@mui/styles": "^5.5.1",
     "@rowy/form-builder": "^0.5.3",
     "@rowy/multiselect": "^0.2.3",
     "@tinymce/tinymce-react": "^3.12.6",

src/components/CodeEditor/index.tsx

@@ -38,7 +38,7 @@ export default function CodeEditor({
   extraLibs,
   diagnosticsOptions,
   onUnmount,
-
+  defaultLanguage = "javascript",
   ...props
 }: ICodeEditorProps) {
   const theme = useTheme();
@@ -77,7 +77,7 @@ export default function CodeEditor({
         style={fullScreen ? { height: "100%" } : {}}
       >
         <Editor
-          defaultLanguage="javascript"
+          defaultLanguage={defaultLanguage}
           value={initialEditorValue}
           loading={<CircularProgressOptical size={20} sx={{ m: 2 }} />}
           className="editor"

src/components/CodeEditor/rowy.d.ts

@@ -48,7 +48,10 @@ interface Rowy {
     /**
      * Get an existing secret from the secret manager.
      */
-    get: (name: SecretNames, version?: string) => Promise<string | undefined>;
+    get: (
+      name: SecretNames,
+      version?: string
+    ) => Promise<string | any | undefined>;
   };
   /**
    * Gives access to the Cloud Storage.

src/components/ConfirmationDialog/Dialog.tsx

@@ -21,6 +21,7 @@ export default function Confirmation({
   confirm,
   confirmationCommand,
   handleConfirm,
+  handleCancel,
   confirmColor,
   open,
   handleClose,
@@ -60,7 +61,14 @@ export default function Confirmation({
 
       <DialogActions>
         {!hideCancel && (
-          <Button onClick={handleClose}>{cancel ?? "Cancel"}</Button>
+          <Button
+            onClick={() => {
+              if (handleCancel) handleCancel();
+              handleClose();
+            }}
+          >
+            {cancel ?? "Cancel"}
+          </Button>
         )}
         <Button
           onClick={() => {

src/components/ConfirmationDialog/props.ts

@@ -8,6 +8,7 @@ export type confirmationProps =
       confirm?: string | JSX.Element;
       confirmationCommand?: string;
       handleConfirm: () => void;
+      handleCancel?: () => void;
       open?: Boolean;
       confirmColor?: string;
     }

src/components/Modal/FullScreenModal.tsx

@@ -0,0 +1,110 @@
+import { ReactNode, useState } from "react";
+
+import {
+  Dialog,
+  DialogProps,
+  Slide,
+  IconButton,
+  Container,
+} from "@mui/material";
+import CloseIcon from "@mui/icons-material/Close";
+
+import ScrollableDialogContent, {
+  IScrollableDialogContentProps,
+} from "./ScrollableDialogContent";
+
+export interface IFullScreenModalProps
+  extends Partial<Omit<DialogProps, "title">> {
+  onClose: (setOpen: React.Dispatch<React.SetStateAction<boolean>>) => void;
+  disableBackdropClick?: boolean;
+  disableEscapeKeyDown?: boolean;
+
+  "aria-labelledby": DialogProps["aria-labelledby"];
+  header?: ReactNode;
+  children?: ReactNode;
+  footer?: ReactNode;
+
+  hideCloseButton?: boolean;
+  ScrollableDialogContentProps?: Partial<IScrollableDialogContentProps>;
+}
+
+export default function FullScreenModal({
+  onClose,
+  disableBackdropClick,
+  disableEscapeKeyDown,
+  header,
+  children,
+  footer,
+  hideCloseButton,
+  ScrollableDialogContentProps,
+  ...props
+}: IFullScreenModalProps) {
+  const [open, setOpen] = useState(true);
+  const handleClose: NonNullable<DialogProps["onClose"]> = (_, reason) => {
+    if (
+      (disableBackdropClick && reason === "backdropClick") ||
+      (disableEscapeKeyDown && reason === "escapeKeyDown")
+    ) {
+      setEmphasizeCloseButton(true);
+      return;
+    }
+
+    setOpen(false);
+    setEmphasizeCloseButton(false);
+    setTimeout(() => onClose(setOpen), 300);
+  };
+
+  const [emphasizeCloseButton, setEmphasizeCloseButton] = useState(false);
+
+  return (
+    <Dialog
+      fullScreen
+      open={open}
+      onClose={handleClose}
+      TransitionComponent={Slide}
+      TransitionProps={{ direction: "up" } as any}
+      {...props}
+    >
+      <Container
+        sx={{
+          display: "flex",
+          flexDirection: "column",
+          height: "100%",
+          pt: { xs: "var(--dialog-spacing)", xl: 6 },
+        }}
+      >
+        {!hideCloseButton && (
+          <IconButton
+            onClick={handleClose as any}
+            aria-label="Close"
+            sx={{
+              position: "absolute",
+              top: (theme) => theme.spacing(1),
+              right: (theme) => theme.spacing(1),
+
+              bgcolor: emphasizeCloseButton ? "error.main" : undefined,
+              color: emphasizeCloseButton ? "error.contrastText" : undefined,
+              "&:hover": emphasizeCloseButton
+                ? { bgcolor: "error.dark" }
+                : undefined,
+            }}
+            className="dialog-close"
+          >
+            <CloseIcon />
+          </IconButton>
+        )}
+
+        {header}
+
+        <ScrollableDialogContent
+          style={{ padding: 0 }}
+          {...ScrollableDialogContentProps}
+        >
+          {children}
+        </ScrollableDialogContent>
+
+        {footer}
+      </Container>
+    </Dialog>
+  );
+}

src/components/RenderedMarkdown.tsx

@@ -9,7 +9,9 @@ const components = {
   a: (props) => <Link color="inherit" {...props} />,
   p: Typography,
   // eslint-disable-next-line jsx-a11y/alt-text
-  img: (props) => <img style={{ maxWidth: "100%" }} {...props} />,
+  img: (props) => (
+    <img style={{ maxWidth: "100%", borderRadius: 4 }} {...props} />
+  ),
 };
 
 const restrictionPresets = {
@@ -31,7 +33,7 @@ export default function RenderedMarkdown({
       unwrapDisallowed
       linkTarget="_blank"
       remarkPlugins={remarkPlugins}
-      components={components}
+      components={{ ...components, ...props.components }}
     />
   );
 }

src/components/SideDrawer/index.tsx

@@ -38,13 +38,10 @@ export default function SideDrawer() {
 
   const handleNavigate = (direction: "up" | "down") => () => {
     if (!tableState?.rows) return;
-
     let row = cell!.row;
     if (direction === "up" && row > 0) row -= 1;
     if (direction === "down" && row < tableState.rows.length - 1) row += 1;
-
     setCell!((cell) => ({ column: cell!.column, row }));
-
     const idx = tableState?.columns[cell!.column]?.index;
     dataGridRef?.current?.selectCell({ rowIdx: row, idx }, false);
   };
@@ -68,13 +65,6 @@ export default function SideDrawer() {
 
   useEffect(() => {
     if (cell && tableState?.rows[cell.row]) {
-      window.history.pushState(
-        "",
-        `${tableState?.config.id}`,
-        `${window.location.pathname}?rowRef=${encodeURIComponent(
-          tableState?.rows[cell.row].ref.path
-        )}`
-      );
       if (urlDocState.doc) {
         urlDocState.unsubscribe();
         dispatchUrlDoc({ path: "", doc: null });

src/components/Table/BulkActions/index.tsx

@@ -143,7 +143,7 @@ export default function BulkActions({ selectedRows, columns, clearSelection }) {
     clearSelection();
   };
   const handleDelete = () => {
-    deleteRow!(selectedRows.map((row) => row.ref.id));
+    deleteRow!(selectedRows.map((row) => row.ref));
     clearSelection();
   };
 

src/components/Table/ColumnMenu/index.tsx

@@ -37,6 +37,7 @@ import { getFieldProp } from "@src/components/fields";
 import { Column } from "react-data-grid";
 import { PopoverProps } from "@mui/material";
 import { useConfirmation } from "@src/components/ConfirmationDialog";
+import { analytics } from "@src/analytics";
 
 const INITIAL_MODAL = { type: "", data: {} };
 
@@ -288,8 +289,9 @@ export default function ColumnMenu() {
           ),
           confirm: "Delete",
           confirmColor: "error",
-          handleConfirm: () => {
+          handleConfirm: async () => {
             actions.remove(column.key);
+            await analytics.logEvent("delete_column", { type: column.type });
             handleClose();
           },
         }),