diff --git a/packages/frontend/src/pages/Tile/contexts/ContextMenuContext.tsx b/packages/frontend/src/pages/Tile/contexts/ContextMenuContext.tsx index fae6d81c1..eadbd6f9e 100644 --- a/packages/frontend/src/pages/Tile/contexts/ContextMenuContext.tsx +++ b/packages/frontend/src/pages/Tile/contexts/ContextMenuContext.tsx @@ -5,7 +5,7 @@ import { useContext, useState, } from 'react' -import { BiTrash } from 'react-icons/bi' +import { BiCopy, BiTrash } from 'react-icons/bi' import { Icon, Menu, @@ -14,6 +14,7 @@ import { MenuList, Portal, } from '@chakra-ui/react' +import { useToast } from '@opengovsg/design-system-react' import DeleteRowsModal from '../components/TableFooter/DeleteRowsModal' @@ -46,7 +47,13 @@ export const ContextMenuContextProvider = ({ children, }: ContextMenuContextProviderProps) => { const [position, setPosition] = useState<[number, number] | null>(null) - const [rowIdsToDelete, setRowIdsToDelete] = useState([]) + const [rowIdsSelected, setRowIdsSelected] = useState([]) + const toast = useToast({ + title: 'Row ID copied to clipboard', + description: 'You can use this in the Update single row step', + status: 'success', + isClosable: true, + }) const rowsSelected = Object.keys(rowSelection) @@ -57,14 +64,22 @@ export const ContextMenuContextProvider = ({ setPosition(pos) if (!rowsSelected.includes(rowId)) { clearRowSelection() - setRowIdsToDelete([rowId]) + setRowIdsSelected([rowId]) } else { - setRowIdsToDelete(rowsSelected) + setRowIdsSelected(rowsSelected) } }, [clearRowSelection, rowsSelected], ) + const onRowIdCopy = useCallback( + (rowId: string) => { + navigator.clipboard.writeText(rowId) + toast() + }, + [toast], + ) + return ( - + + {rowsSelected.length <= 1 && ( + } + display="flex" + alignItems="center" + onClick={() => onRowIdCopy(rowIdsSelected[0])} + > + Copy row ID + + )} } color="interaction.critical.default" @@ -106,7 +131,7 @@ export const ContextMenuContextProvider = ({ setIsDeleteModalOpen(false)} - rowIdsToDelete={rowIdsToDelete} + rowIdsToDelete={rowIdsSelected} /> )}