PLU-817: [TILES-ATOMIC-INCREMENT-1] allowing copying of row id in til…

…es (#817)

### TL;DR
Added ability to copy row IDs from the context menu in the table view

![image.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/ycT2Xb5nBEjN2kf2gy95/97f1d9c5-c030-4a21-9eae-8492981e80a5.png)

### What changed?
- Added a "Copy row ID" option to the context menu when a single row is selected
- Displays a toast notification when a row ID is copied
- Renamed internal state variable from `rowIdsToDelete` to `rowIdsSelected` for better clarity
- Added BiCopy icon from react-icons library

### How to test?
1. Navigate to tile
2. Right-click on a single row
3. Click "Copy row ID" from the context menu
4. Verify that:
   - A success toast appears
   - The row ID is copied to your clipboard
   - The option only appears when a single row is selected

### Why make this change?
To improve user experience by making it easier to copy row IDs, which can be used in the "Update single row" step. This eliminates the need for Find single row if the user knows which row to update. This is mainly use for counters.

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<string[]>([])
+  const [rowIdsSelected, setRowIdsSelected] = useState<string[]>([])
+  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 (
     <ContextMenuContext.Provider
       value={{
@@ -90,7 +105,17 @@ export const ContextMenuContextProvider = ({
               left={position[0]}
               top={position[1]}
             />
-            <MenuList m={0}>
+            <MenuList m={0} gap={1} display="flex" flexDir="column">
+              {rowsSelected.length <= 1 && (
+                <MenuItem
+                  icon={<Icon as={BiCopy} boxSize={5} />}
+                  display="flex"
+                  alignItems="center"
+                  onClick={() => onRowIdCopy(rowIdsSelected[0])}
+                >
+                  Copy row ID
+                </MenuItem>
+              )}
               <MenuItem
                 icon={<Icon as={BiTrash} boxSize={5} />}
                 color="interaction.critical.default"
@@ -106,7 +131,7 @@ export const ContextMenuContextProvider = ({
         <DeleteRowsModal
           removeRows={removeRows}
           onClose={() => setIsDeleteModalOpen(false)}
-          rowIdsToDelete={rowIdsToDelete}
+          rowIdsToDelete={rowIdsSelected}
         />
       )}
     </ContextMenuContext.Provider>