Merge pull request #674 from rowyio/rc

v2.5.0
rowyio · Apr 7, 2022 · fba88cd · fba88cd
2 parents e968898 + 888d9c9
commit fba88cd
Show file tree

Hide file tree

Showing 51 changed files with 1,294 additions and 232 deletions.
diff --git a/package.json b/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",

diff --git a/src/components/CodeEditor/index.tsx b/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"

diff --git a/src/components/CodeEditor/rowy.d.ts b/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.

diff --git a/src/components/ConfirmationDialog/Dialog.tsx b/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={() => {

diff --git a/src/components/ConfirmationDialog/props.ts b/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;
     }

diff --git a/src/components/Modal/FullScreenModal.tsx b/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>
+  );
+}
diff --git a/src/components/RenderedMarkdown.tsx b/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 }}
     />
   );
 }
diff --git a/src/components/SideDrawer/index.tsx b/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 });

diff --git a/src/components/Table/BulkActions/index.tsx b/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();
   };
 

diff --git a/src/components/Table/ColumnMenu/index.tsx b/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();
           },
         }),

diff --git a/src/components/Table/ContextMenu/index.tsx b/src/components/Table/ContextMenu/index.tsx
@@ -4,6 +4,7 @@ import { getFieldProp } from "@src/components/fields";
 import MenuContents from "./MenuContent";
 import DuplicateIcon from "@src/assets/icons/CopyCells";
 import DeleteIcon from "@mui/icons-material/DeleteOutlined";
+import LinkIcon from "@mui/icons-material/Link";
 
 import { useProjectContext } from "@src/contexts/ProjectContext";
 import { useContextMenuAtom } from "@src/atoms/ContextMenu";
@@ -47,8 +48,18 @@ export default function ContextMenu() {
   }
 
   const row = tableState?.rows[selectedCell!.rowIndex];
-  if (userRoles.includes("ADMIN") && row) {
+  if (row) {
     const rowActions = [
+      {
+        label: "Copy link to row",
+        icon: <LinkIcon />,
+        onClick: () => {
+          const rowRef = encodeURIComponent(row.ref.path);
+          navigator.clipboard.writeText(
+            window.location.href + `?rowRef=${rowRef}`
+          );
+        },
+      },
       {
         label: "Duplicate row",
         icon: <DuplicateIcon />,
@@ -76,7 +87,7 @@ export default function ContextMenu() {
             ),
             confirm: "Delete",
             confirmColor: "error",
-            handleConfirm: () => deleteRow?.(row.id),
+            handleConfirm: () => deleteRow?.(row.ref),
           });
           resetContextMenu();
         },

diff --git a/src/components/Table/formatters/FinalColumn.tsx b/src/components/Table/formatters/FinalColumn.tsx
@@ -9,6 +9,7 @@ import { useConfirmation } from "@src/components/ConfirmationDialog/Context";
 import { useAppContext } from "@src/contexts/AppContext";
 import { useProjectContext } from "@src/contexts/ProjectContext";
 import useKeyPress from "@src/hooks/useKeyPress";
+import { isCollectionGroup } from "@src/utils/fns";
 
 const useStyles = makeStyles((theme) =>
   createStyles({
@@ -34,29 +35,30 @@ export default function FinalColumn({ row }: FormatterProps<any, any>) {
   const altPress = useKeyPress("Alt");
 
   const handleDelete = () => {
-    if (deleteRow) deleteRow(row.id);
+    if (deleteRow) deleteRow(row.ref);
   };
 
   if (!userClaims?.roles.includes("ADMIN") && table?.readOnly === true)
     return null;
-
   return (
     <Stack direction="row" spacing={0.5}>
-      <Tooltip title="Duplicate row">
-        <IconButton
-          size="small"
-          color="inherit"
-          disabled={!addRow}
-          onClick={() => {
-            const { ref, ...clonedRow } = row;
-            addRow!(clonedRow, undefined, { type: "smaller" });
-          }}
-          aria-label="Duplicate row"
-          className="row-hover-iconButton"
-        >
-          <CopyCellsIcon />
-        </IconButton>
-      </Tooltip>
+      {!isCollectionGroup() && (
+        <Tooltip title="Duplicate row">
+          <IconButton
+            size="small"
+            color="inherit"
+            disabled={!addRow}
+            onClick={() => {
+              const { ref, ...clonedRow } = row;
+              addRow!(clonedRow, undefined, { type: "smaller" });
+            }}
+            aria-label="Duplicate row"
+            className="row-hover-iconButton"
+          >
+            <CopyCellsIcon />
+          </IconButton>
+        </Tooltip>
+      )}
 
       <Tooltip title={`Delete row${altPress ? "" : "…"}`}>
         <IconButton

diff --git a/src/components/TableHeader/Webhooks/Schemas/basic.tsx b/src/components/TableHeader/Webhooks/Schemas/basic.tsx
@@ -25,11 +25,17 @@ const requestType = [
 
 export const parserExtraLibs = [
   requestType,
-  `type Parser = (args:{req:WebHookRequest,db: FirebaseFirestore.Firestore,ref: FirebaseFirestore.CollectionReference}) => Promise<any>;`,
+  `type Parser = (args:{req:WebHookRequest,db: FirebaseFirestore.Firestore,ref: FirebaseFirestore.CollectionReference,res:{
+    send:(v:any)=>void
+    sendStatus:(status:number)=>void
+  }}) => Promise<any>;`,
 ];
 export const conditionExtraLibs = [
   requestType,
-  `type Condition = (args:{req:WebHookRequest,db: FirebaseFirestore.Firestore,ref: FirebaseFirestore.CollectionReference}) => Promise<any>;`,
+  `type Condition = (args:{req:WebHookRequest,db: FirebaseFirestore.Firestore,ref: FirebaseFirestore.CollectionReference,res:{
+    send:(v:any)=>void
+    sendStatus:(status:number)=>void
+  }}) => Promise<any>;`,
 ];
 
 const additionalVariables = [
@@ -57,7 +63,7 @@ export const webhookBasic = {
       // auditField
       const ${
         table.auditFieldCreatedBy ?? "_createdBy"
-      } = await rowy.getServiceAccountUser()
+      } = await rowy.metadata.serviceAccountUser()
       return {
         ...body,
         ${table.auditFieldCreatedBy ?? "_createdBy"}