From 7a0037d94abca97c42dd3cfef3370602bffeec46 Mon Sep 17 00:00:00 2001 From: "Huy Tran (Harry)" Date: Mon, 29 Nov 2021 02:44:35 +1000 Subject: [PATCH] feat: add copy button for Device Identifier in Grower Details (#207) * fix: add copy button to grower detail > device identifier * fix: move copyButton and copyNotification to common components folder --- pull_request_template.md | 11 ++-- src/components/CaptureDetailDialog.js | 65 ++++------------------- src/components/GrowerDetail.js | 26 ++++++++- src/components/common/CopyButton.js | 28 ++++++++++ src/components/common/CopyNotification.js | 45 ++++++++++++++++ 5 files changed, 117 insertions(+), 58 deletions(-) create mode 100644 src/components/common/CopyButton.js create mode 100644 src/components/common/CopyNotification.js diff --git a/pull_request_template.md b/pull_request_template.md index 16ab4dc7e..4f06b44dd 100644 --- a/pull_request_template.md +++ b/pull_request_template.md @@ -1,15 +1,19 @@ ## Description -_[Add a description of the changes]_ + +_[Add a description of the changes]_ **Issue(s) addressed** + - Resolves #_[insert ID of the issue addressed]_ -**What kind of change(s) does this PR introduce?** +**What kind of change(s) does this PR introduce?** + - [ ] Enhancement - [ ] Bug fix - [ ] Refactor **Please check if the PR fulfills these requirements** + - [ ] The commit message follows our guidelines - [ ] Tests for the changes have been added (for bug fixes / features) - [ ] Docs have been added / updated (for bug fixes / features) @@ -21,6 +25,7 @@ _[Add a description of the changes]_ **What is the new behavior?** ## Breaking change -**Does this PR introduce a breaking change?** + +**Does this PR introduce a breaking change?** ## Other useful information diff --git a/src/components/CaptureDetailDialog.js b/src/components/CaptureDetailDialog.js index f008b33ae..7788f0237 100644 --- a/src/components/CaptureDetailDialog.js +++ b/src/components/CaptureDetailDialog.js @@ -7,17 +7,15 @@ import Grid from '@material-ui/core/Grid'; import Divider from '@material-ui/core/Divider'; import Chip from '@material-ui/core/Chip'; import IconButton from '@material-ui/core/IconButton'; -import Snackbar from '@material-ui/core/Snackbar'; import Drawer from '@material-ui/core/Drawer'; import Box from '@material-ui/core/Box'; import Close from '@material-ui/icons/Close'; - -import FileCopy from '@material-ui/icons/FileCopy'; -import CloseIcon from '@material-ui/icons/Close'; import OptimizedImage from './OptimizedImage'; import LinkToWebmap from './common/LinkToWebmap'; import { verificationStates } from '../common/variables'; import { CaptureDetailContext } from '../context/CaptureDetailContext'; +import CopyNotification from './common/CopyNotification'; +import { CopyButton } from './common/CopyButton'; const useStyles = makeStyles((theme) => ({ chipRoot: { @@ -47,9 +45,6 @@ const useStyles = makeStyles((theme) => ({ fontWeight: 700, fontSize: '0.8em', }, - copyButton: { - margin: theme.spacing(-2, 0), - }, subtitle: { ...theme.typography.button, fontSize: '0.8em', @@ -132,30 +127,6 @@ function CaptureDetailDialog(props) { setSnackbarOpen(true); } - function handleSnackbarClose(event, reason) { - if (reason === 'clickaway') { - return; - } - setSnackbarOpen(false); - } - - function CopyButton(props) { - const { value, label } = props; - - return ( - { - navigator.clipboard.writeText(value); - confirmCopy(label); - }} - > - - - ); - } - return ( @@ -207,7 +178,11 @@ function CaptureDetailDialog(props) { item.value || '---' )} {item.value && item.copy && ( - + )} @@ -267,28 +242,10 @@ function CaptureDetailDialog(props) { {getTokenStatus(capture.tokenId)} - - - - - - } + ); diff --git a/src/components/GrowerDetail.js b/src/components/GrowerDetail.js index ae948a21b..d0a8b46a4 100644 --- a/src/components/GrowerDetail.js +++ b/src/components/GrowerDetail.js @@ -19,6 +19,8 @@ import { GrowerContext } from '../context/GrowerContext'; import EditGrower from './EditGrower'; import OptimizedImage from './OptimizedImage'; import LinkToWebmap from './common/LinkToWebmap'; +import { CopyButton } from './common/CopyButton'; +import CopyNotification from './common/CopyNotification'; const GROWER_IMAGE_SIZE = 441; @@ -66,6 +68,8 @@ const GrowerDetail = (props) => { const [editDialogOpen, setEditDialogOpen] = useState(false); const [grower, setGrower] = useState({}); const [deviceIdentifiers, setDeviceIdentifiers] = useState([]); + const [snackbarOpen, setSnackbarOpen] = useState(false); + const [snackbarLabel, setSnackbarLabel] = useState(''); useEffect(() => { async function loadGrowerDetail() { @@ -126,6 +130,14 @@ const GrowerDetail = (props) => { function handleEditClose() { setEditDialogOpen(false); + setSnackbarOpen(false); + setSnackbarLabel(''); + } + + function confirmCopy(label) { + setSnackbarOpen(false); + setSnackbarLabel(label); + setSnackbarOpen(true); } return ( @@ -259,7 +271,14 @@ const GrowerDetail = (props) => { {deviceIdentifiers.map((device, i) => ( - {device.id} + + {device.id} + + ({device.os}) @@ -273,6 +292,11 @@ const GrowerDetail = (props) => { + ({ + copyButton: { + margin: theme.spacing(-2, 0), + }, +})); + +export function CopyButton(props) { + const { value, label, confirmCopy } = props; + const classes = useStyles(); + + return ( + { + navigator.clipboard.writeText(value); + confirmCopy(label); + }} + > + + + ); +} diff --git a/src/components/common/CopyNotification.js b/src/components/common/CopyNotification.js new file mode 100644 index 000000000..4c2d7affa --- /dev/null +++ b/src/components/common/CopyNotification.js @@ -0,0 +1,45 @@ +import React from 'react'; +import { Snackbar } from '@material-ui/core'; +import { IconButton } from '@material-ui/core'; +import CloseIcon from '@material-ui/icons/Close'; + +const CopyNotification = (props) => { + const { snackbarLabel, snackbarOpen, setSnackbarOpen } = props; + + function handleSnackbarClose(event, reason) { + if (reason === 'clickaway') { + return; + } + setSnackbarOpen(false); + } + + return ( + <> + + + + + + } + /> + + ); +}; + +export default CopyNotification;