Merge pull request #962 from gchq/bugfix/BAI-1067-add-copy-button-to-…

…docker-commands Bugfix/bai 1067 add copy button to docker commands
gchq · Dec 20, 2023 · 570b784 · 570b784
2 parents e4609d4 + ad6c0ec
commit 570b784
Showing 1 changed file with 10 additions and 12 deletions.
diff --git a/frontend/src/model/beta/registry/CodeLine.tsx b/frontend/src/model/beta/registry/CodeLine.tsx
@@ -1,5 +1,6 @@
+import { ContentCopy } from '@mui/icons-material'
 import CodeIcon from '@mui/icons-material/Code'
-import { Box, Stack, Tooltip, Typography } from '@mui/material'
+import { Box, IconButton, Stack, Tooltip, Typography } from '@mui/material'
 import { useTheme } from '@mui/material/styles'
 import { ReactElement } from 'react'
 import useNotification from 'src/common/Snackbar'
@@ -19,26 +20,23 @@ export default function CodeLine({ line, icon = <CodeIcon /> }: CodeLineProps) {
   }
 
   return (
-    <Tooltip title='Copy to clipboard' arrow>
+    <Stack direction='row' spacing={1}>
       <Box
-        sx={{ backgroundColor: theme.palette.container.main, p: 1, borderRadius: 2, cursor: 'pointer' }}
+        sx={{ backgroundColor: theme.palette.container.main, p: 1, borderRadius: 2, width: '100%' }}
         component='div'
         role='button'
         tabIndex={0}
-        onClick={() => {
-          handleButtonClick()
-        }}
-        onKeyDown={(e) => {
-          if (e.key === 'Enter' || e.key === 'Spacebar' || e.key === ' ') {
-            handleButtonClick()
-          }
-        }}
       >
         <Stack direction='row' spacing={2} alignItems='center'>
           {icon}
           <Typography>{line}</Typography>
         </Stack>
       </Box>
-    </Tooltip>
+      <Tooltip title='Copy to clipboard' arrow>
+        <IconButton onClick={() => handleButtonClick()} aria-label='Copy text to clipboard'>
+          <ContentCopy />
+        </IconButton>
+      </Tooltip>
+    </Stack>
   )
 }