add print to pdf functionality for node test results

nym-wallet/package.json

@@ -45,6 +45,7 @@
     "react-error-boundary": "^3.1.3",
     "react-hook-form": "^7.14.2",
     "react-router-dom": "6",
+    "react-to-print": "^2.14.7",
     "semver": "^6.3.0",
     "string-to-color": "^2.2.2",
     "use-clipboard-copy": "^0.2.0",

nym-wallet/src/components/TestMyNode/Results/index.tsx

@@ -1,10 +1,11 @@
-import React from 'react';
+import React, { useRef } from 'react';
 import { ArrowForward, CheckCircleOutline, Description, Download } from '@mui/icons-material';
 import { Box, Button, Card, Chip, CircularProgress, Divider, Grid, Stack, Typography } from '@mui/material';
 import format from 'date-fns/format';
 import { ResultsCard } from '../components/ResultsCard';
 import { ResultsCardDetail } from '../components/ResultsCardDetail';
 import { NodePath } from 'src/svg-icons/node-path';
+import { useReactToPrint } from 'react-to-print';
 
 export type Layer = '1' | '2' | '3' | 'gateway';
 
@@ -76,27 +77,33 @@ export const Results = ({
   packetsSent: string;
   packetsReceived: string;
   layer: '1' | '2' | '3' | 'gateway';
-}) => (
-  <>
-    <Stack direction="row" justifyContent="space-between" alignItems="center" sx={{ mb: 1 }}>
-      <Box display="flex" gap={1}>
-        <Typography fontWeight="bold" component="span">
-          Test date
-        </Typography>
-        <Typography>{format(new Date(), 'dd/MM/yyyy HH:mm')}</Typography>
-      </Box>
-      <Button startIcon={<Download />}>Save to PDF</Button>
-    </Stack>
-    <Grid container spacing={2}>
-      <Grid item md={5}>
-        <NodeSpeed Mbps={150.01} performance="good" />
+}) => {
+  const ref = useRef(null);
+  const handleSaveToPdf = useReactToPrint({ documentTitle: 'Test results', content: () => ref.current });
+  return (
+    <>
+      <Stack direction="row" justifyContent="space-between" alignItems="center" sx={{ mb: 1 }}>
+        <Box display="flex" gap={1}>
+          <Typography fontWeight="bold" component="span">
+            Test date
+          </Typography>
+          <Typography>{format(new Date(), 'dd/MM/yyyy HH:mm')}</Typography>
+        </Box>
+        <Button onClick={handleSaveToPdf} startIcon={<Download />}>
+          Save to PDF
+        </Button>
+      </Stack>
+      <Grid container spacing={2} ref={ref}>
+        <Grid item md={5}>
+          <NodeSpeed Mbps={150.01} performance="good" />
+        </Grid>
+        <Grid item container direction="column" md={7}>
+          <Stack spacing={2}>
+            <Packets sent={packetsSent} received={packetsReceived} />
+            <Path layer={layer} />
+          </Stack>
+        </Grid>
       </Grid>
-      <Grid item container direction="column" md={7}>
-        <Stack spacing={2}>
-          <Packets sent={packetsSent} received={packetsReceived} />
-          <Path layer={layer} />
-        </Stack>
-      </Grid>
-    </Grid>
-  </>
-);
+    </>
+  );
+};

nym-wallet/src/pages/bonding/node-settings/index.tsx

@@ -14,7 +14,7 @@ import { AppContext, urls } from 'src/context/main';
 import { NodeGeneralSettings } from './general-settings';
 import { UnbondModal } from '../../../components/Bonding/modals/UnbondModal';
 import { nodeSettingsNav } from './node-settings.constant';
-import { TestNode } from 'src/pages/test-my-node';
+import { TestNode } from 'src/pages/bonding/node-settings/test-my-node';
 
 export const NodeSettings = () => {
   const [confirmationDetails, setConfirmationDetails] = useState<ConfirmationDetailProps>();

nym-wallet/src/pages/index.ts

@@ -5,4 +5,3 @@ export * from './bonding';
 export * from './delegation';
 export * from './internal-docs';
 export * from './unbond';
-export * from './test-my-node';

nym-wallet/src/routes/app.tsx

@@ -3,16 +3,7 @@ import { Send } from 'src/components/Send';
 import { ApplicationLayout } from 'src/layouts';
 import { Terminal } from 'src/pages/terminal';
 import { Receive } from '../components/Receive';
-import {
-  Admin,
-  Balance,
-  BondingPage,
-  DelegationPage,
-  InternalDocs,
-  NodeSettingsPage,
-  TestNode,
-  Unbond,
-} from '../pages';
+import { Admin, Balance, BondingPage, DelegationPage, InternalDocs, NodeSettingsPage, Unbond } from '../pages';
 
 export const AppRoutes = () => (
   <ApplicationLayout>