diff --git a/src/components/tables/CippTable.jsx b/src/components/tables/CippTable.jsx index 5effb0f2b538..35822ecf806a 100644 --- a/src/components/tables/CippTable.jsx +++ b/src/components/tables/CippTable.jsx @@ -25,7 +25,9 @@ import PropTypes from 'prop-types' import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' import { faCheck, + faClipboard, faColumns, + faCopy, faFileCsv, faFilePdf, faSearch, @@ -38,6 +40,7 @@ import { useLazyGenericGetRequestQuery, useLazyGenericPostRequestQuery } from 's import { ConfirmModal } from '../utilities/SharedModal' import { debounce } from 'lodash-es' import { useSearchParams } from 'react-router-dom' +import CopyToClipboard from 'react-copy-to-clipboard' const FilterComponent = ({ filterText, onFilter, onClear, filterlist, onFilterPreset }) => ( <> @@ -748,6 +751,12 @@ export default function CippTable({ filteredItems, ]) const tablePageSize = useSelector((state) => state.app.tablePageSize) + const [codeCopied, setCodeCopied] = useState(false) + + const onCodeCopied = () => { + setCodeCopied(true) + setTimeout(() => setCodeCopied(false), 2000) + } return (
@@ -777,6 +786,20 @@ export default function CippTable({ {message.data?.Metadata?.Heading} + onCodeCopied()}> + + {codeCopied ? ( + + ) : ( + + )} + + {results.map((line, i) => { return
  • {line}
  • })} @@ -790,7 +813,27 @@ export default function CippTable({ massResults.map((message, idx) => { const results = message.data?.Results const displayResults = Array.isArray(results) ? results.join(', ') : results - return
  • {displayResults}
  • + return ( + <> +
  • + {displayResults} + onCodeCopied()}> + + {codeCopied ? ( + + ) : ( + + )} + + +
  • + + ) })} {loopRunning && (