add button tooltip, also export json

interface/src/project/Devices.tsx

@@ -36,7 +36,11 @@ import {
   List,
   ListItem,
   ListItemText,
-  Typography
+  Tooltip,
+  type TooltipProps,
+  Typography,
+  styled,
+  tooltipClasses
 } from '@mui/material';
 
 import { useRowSelect } from '@table-library/react-table-library/select';
@@ -234,6 +238,20 @@ const Devices: FC = () => {
     }
   ]);
 
+  const ButtonTooltip = styled(({ className, ...props }: TooltipProps) => (
+    <Tooltip {...props} arrow classes={{ popper: className }} />
+  ))(({ theme }) => ({
+    [`& .${tooltipClasses.arrow}`]: {
+      color: theme.palette.success.main
+    },
+    [`& .${tooltipClasses.tooltip}`]: {
+      backgroundColor: theme.palette.success.main,
+      color: 'rgba(0, 0, 0, 0.87)',
+      boxShadow: theme.shadows[1],
+      fontSize: 10
+    }
+  }));
+
   const getSortIcon = (state: State, sortKey: unknown) => {
     if (state.sortKey === sortKey && state.reverse) {
       return <KeyboardArrowDownOutlinedIcon />;
@@ -399,15 +417,24 @@ const Devices: FC = () => {
         '\r\n'
     );
 
-    const csvFile = new Blob([csvData], { type: 'text/csv;charset:utf-8' });
+    const downloadBlob = (blob: Blob) => {
       const downloadLink = document.createElement('a');
       downloadLink.download = filename;
-    downloadLink.href = window.URL.createObjectURL(csvFile);
+      downloadLink.href = window.URL.createObjectURL(blob);
       document.body.appendChild(downloadLink);
       downloadLink.click();
       document.body.removeChild(downloadLink);
     };
 
+    downloadBlob(
+      new Blob([JSON.stringify(deviceData, null, 2)], {
+        type: 'text;charset:utf-8'
+      })
+    );
+
+    downloadBlob(new Blob([csvData], { type: 'text/csv;charset:utf-8' }));
+  };
+
   useEffect(() => {
     const timer = setInterval(() => refreshData(), 60000);
     return () => {
@@ -608,11 +635,11 @@ const Devices: FC = () => {
           backgroundColor: 'black',
           position: 'absolute',
           left: () => leftOffset(),
-          right: 16,
+          right: 0,
           bottom: 0,
-          top: 128,
+          top: 64,
           zIndex: 'modal',
-          maxHeight: () => size[1] - 189,
+          maxHeight: () => size[1] - 126,
           border: '1px solid #177ac9'
         }}
       >
@@ -631,26 +658,33 @@ const Devices: FC = () => {
                 coreData.devices[deviceIndex].e +
                 ' ' +
                 LL.ENTITIES(shown_data.length)}
+              <ButtonTooltip title="Info">
                 <IconButton onClick={() => setShowDeviceInfo(true)}>
                   <InfoOutlinedIcon
                     color="primary"
                     sx={{ fontSize: 18, verticalAlign: 'middle' }}
                   />
                 </IconButton>
+              </ButtonTooltip>
               {me.admin && (
+                <ButtonTooltip title={LL.CUSTOMIZATIONS()}>
                   <IconButton onClick={customize}>
                     <FormatListNumberedIcon
                       color="primary"
                       sx={{ fontSize: 18, verticalAlign: 'middle' }}
                     />
                   </IconButton>
+                </ButtonTooltip>
               )}
+              <ButtonTooltip title={LL.EXPORT()}>
                 <IconButton onClick={handleDownloadCsv}>
                   <DownloadIcon
                     color="primary"
                     sx={{ fontSize: 18, verticalAlign: 'middle' }}
                   />
                 </IconButton>
+              </ButtonTooltip>
+              <ButtonTooltip title="Favorites">
                 <IconButton onClick={() => setOnlyFav(!onlyFav)}>
                   {onlyFav ? (
                     <StarIcon
@@ -664,20 +698,25 @@ const Devices: FC = () => {
                     />
                   )}
                 </IconButton>
+              </ButtonTooltip>
+              <ButtonTooltip title={LL.REFRESH()}>
                 <IconButton onClick={refreshData}>
                   <RefreshIcon
                     color="primary"
                     sx={{ fontSize: 18, verticalAlign: 'middle' }}
                   />
                 </IconButton>
+              </ButtonTooltip>
             </Typography>
             <Grid item zeroMinWidth justifyContent="flex-end">
+              <ButtonTooltip title={LL.CANCEL()}>
                 <IconButton onClick={resetDeviceSelect}>
                   <HighlightOffIcon
                     color="primary"
                     sx={{ fontSize: 18, verticalAlign: 'middle' }}
                   />
                 </IconButton>
+              </ButtonTooltip>
             </Grid>
           </Grid>
         </Box>