add confirmation to delete column

src/components/Table/ColumnHeader.tsx

@@ -116,9 +116,8 @@ export default function DraggableHeaderRenderer<R>({
 }) {
   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<R>({
             <>
               Click to copy field key:
               <br />
-              <b>{column.key}</b>
+              <code style={{ padding: 0 }}>{column.key}</code>
             </>
           }
           enterDelay={1000}

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<any>(null);
   if (columnMenuRef)
@@ -250,12 +259,30 @@ export default function ColumnMenu() {
     //   color: "error" as "error",
     // },
     {
-      label: "Delete column",
+      label: "Delete column…",
       icon: <ColumnRemoveIcon />,
-      onClick: () => {
-        actions.remove(column.key);
-        handleClose();
-      },
+      onClick: () =>
+        requestConfirmation({
+          title: "Delete column?",
+          customBody: (
+            <>
+              <Typography>
+                Only the column configuration will be deleted. No data will be
+                deleted.
+              </Typography>
+              <ColumnHeader type={column.type} label={column.name} />
+              <Typography sx={{ mt: 1 }}>
+                Key: <code style={{ userSelect: "all" }}>{column.key}</code>
+              </Typography>
+            </>
+          ),
+          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: <span style={{ userSelect: "all" }}>{column.key}</span>
+                  Key: <code style={{ userSelect: "all" }}>{column.key}</code>
                 </>
               }
               primaryTypographyProps={{ variant: "subtitle2" }}

src/components/Table/formatters/FinalColumn.tsx

@@ -69,13 +69,25 @@ export default function FinalColumn({ row }: FormatterProps<any, any>) {
               ? handleDelete
               : () => {
                   requestConfirmation({
-                    title: "Delete Row?",
+                    title: "Delete row?",
+                    customBody: (
+                      <>
+                        Row path:
+                        <br />
+                        <code
+                          style={{ userSelect: "all", wordBreak: "break-all" }}
+                        >
+                          {row.ref.path}
+                        </code>
+                      </>
+                    ),
                     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": {

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) },
           },
         },
       },