Add Download Button

- Add download button on ViewConfigurationModal.tsx
- Add download logic on ViewConfigurationModal.tsx

Signed-off-by: Sebastian Rubina <[email protected]>

Author: SebastianRubina

src/pages/Device/ViewConfigurationModal.tsx

@@ -16,7 +16,7 @@ import {
   useDisclosure,
 } from '@chakra-ui/react';
 import { JsonViewer } from '@textea/json-viewer';
-import { Barcode } from '@phosphor-icons/react';
+import { Barcode, DownloadSimple } from '@phosphor-icons/react';
 import { useTranslation } from 'react-i18next';
 import { Modal } from 'components/Modals/Modal';
 import { useGetDevice } from 'hooks/Network/Devices';
@@ -35,6 +35,17 @@ const ViewConfigurationModal = ({ serialNumber }: { serialNumber: string }) => {
     }
   }, [getDevice.data?.configuration]);
 
+  const handleDownload = () => {
+    const jsonString = JSON.stringify(getDevice.data?.configuration ?? {}, null, 2);
+    const blob = new Blob([jsonString], { type: 'application/json' });
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement('a');
+    link.href = url;
+    link.download = `${serialNumber}-configuration.json`;
+    link.click();
+    URL.revokeObjectURL(url);
+  };
+
   const handleOpenClick = () => {
     getDevice.refetch();
     onOpen();
@@ -58,6 +69,14 @@ const ViewConfigurationModal = ({ serialNumber }: { serialNumber: string }) => {
             <Button onClick={onCopy} size="md" colorScheme="teal">
               {hasCopied ? `${t('common.copied')}!` : t('common.copy')}
             </Button>
+            <Tooltip label={t('common.download')} hasArrow>
+              <IconButton
+                aria-label={t('common.download')}
+                icon={<DownloadSimple size={20} />}
+                onClick={handleDownload}
+                colorScheme="blue"
+              />
+            </Tooltip>
             <RefreshButton onClick={getDevice.refetch} isFetching={getDevice.isFetching} />
           </>
         }