diff --git a/src/components/Table/ColumnHeader.tsx b/src/components/Table/ColumnHeader.tsx index 3e3de1ec..cc9ce9e9 100644 --- a/src/components/Table/ColumnHeader.tsx +++ b/src/components/Table/ColumnHeader.tsx @@ -116,9 +116,8 @@ export default function DraggableHeaderRenderer({ }) { const classes = useStyles(); - const {userClaims}=useAppContext() - const { tableState, tableActions, columnMenuRef } = - useProjectContext(); + const { userClaims } = useAppContext(); + const { tableState, tableActions, columnMenuRef } = useProjectContext(); const [{ isDragging }, drag] = useDrag({ item: { key: column.key, type: "COLUMN_DRAG" }, collect: (monitor) => ({ @@ -187,7 +186,7 @@ export default function DraggableHeaderRenderer({ <> Click to copy field key:
- {column.key} + {column.key} } enterDelay={1000} diff --git a/src/components/Table/ColumnMenu/index.tsx b/src/components/Table/ColumnMenu/index.tsx index 42f00224..3cdd0e01 100644 --- a/src/components/Table/ColumnMenu/index.tsx +++ b/src/components/Table/ColumnMenu/index.tsx @@ -1,10 +1,16 @@ import React, { useState, useEffect } from "react"; -import { Menu, ListItem, ListItemIcon, ListItemText } from "@mui/material"; +import { + Menu, + ListItem, + ListItemIcon, + ListItemText, + Typography, +} from "@mui/material"; import LockOpenIcon from "@mui/icons-material/LockOpen"; import LockIcon from "@mui/icons-material/LockOutlined"; -import VisibilityOffIcon from "@mui/icons-material/VisibilityOffOutlined"; -import VisibilityIcon from "@mui/icons-material/VisibilityOutlined"; +// import VisibilityOffIcon from "@mui/icons-material/VisibilityOffOutlined"; +// import VisibilityIcon from "@mui/icons-material/VisibilityOutlined"; import FreezeIcon from "assets/icons/Freeze"; import UnfreezeIcon from "assets/icons/Unfreeze"; import CellResizeIcon from "assets/icons/CellResize"; @@ -22,6 +28,7 @@ import NameChange from "./NameChange"; import NewColumn from "./NewColumn"; import TypeChange from "./TypeChange"; import FieldSettings from "./FieldSettings"; +import ColumnHeader from "components/Wizards/Column"; import { useProjectContext } from "contexts/ProjectContext"; import { FieldType } from "constants/fields"; @@ -29,6 +36,7 @@ import { getFieldProp } from "components/fields"; import { Column } from "react-data-grid"; import { PopoverProps } from "@mui/material"; +import { useConfirmation } from "components/ConfirmationDialog"; const INITIAL_MODAL = { type: "", data: {} }; @@ -65,6 +73,7 @@ export interface IMenuModalProps { export default function ColumnMenu() { const [modal, setModal] = useState(INITIAL_MODAL); const { tableState, tableActions, columnMenuRef } = useProjectContext(); + const { requestConfirmation } = useConfirmation(); const [selectedColumnHeader, setSelectedColumnHeader] = useState(null); if (columnMenuRef) @@ -250,12 +259,30 @@ export default function ColumnMenu() { // color: "error" as "error", // }, { - label: "Delete column", + label: "Delete column…", icon: , - onClick: () => { - actions.remove(column.key); - handleClose(); - }, + onClick: () => + requestConfirmation({ + title: "Delete column?", + customBody: ( + <> + + Only the column configuration will be deleted. No data will be + deleted. + + + + Key: {column.key} + + + ), + confirm: "Delete", + confirmColor: "error", + handleConfirm: () => { + actions.remove(column.key); + handleClose(); + }, + }), color: "error" as "error", }, ]; @@ -293,7 +320,7 @@ export default function ColumnMenu() { primary={column.name as string} secondary={ <> - Key: {column.key} + Key: {column.key} } primaryTypographyProps={{ variant: "subtitle2" }} diff --git a/src/components/Table/formatters/FinalColumn.tsx b/src/components/Table/formatters/FinalColumn.tsx index 3074cc27..38f782d7 100644 --- a/src/components/Table/formatters/FinalColumn.tsx +++ b/src/components/Table/formatters/FinalColumn.tsx @@ -69,13 +69,25 @@ export default function FinalColumn({ row }: FormatterProps) { ? handleDelete : () => { requestConfirmation({ - title: "Delete Row?", + title: "Delete row?", + customBody: ( + <> + Row path: +
+ + {row.ref.path} + + + ), confirm: "Delete", + confirmColor: "error", handleConfirm: handleDelete, }); } } - aria-label="Delete row…" + aria-label={`Delete Row${altPress ? "" : "…"}`} className="row-hover-iconButton" sx={{ ".rdg-row:hover &.row-hover-iconButton": { diff --git a/src/theme/components.tsx b/src/theme/components.tsx index e00f499a..7c651b2d 100644 --- a/src/theme/components.tsx +++ b/src/theme/components.tsx @@ -184,8 +184,8 @@ export const components = (theme: Theme): ThemeOptions => { "& .MuiButton-root": { minWidth: 100 }, }, spacing: { - padding: theme.spacing(2, 1), - [theme.breakpoints.down("sm")]: { padding: theme.spacing(1.5, 1) }, + padding: theme.spacing(2), + [theme.breakpoints.down("sm")]: { padding: theme.spacing(1.5) }, }, }, },