From 09186591b4f99ed9927dd4bebc56f49d4fc13a59 Mon Sep 17 00:00:00 2001
From: Macgregor Aubertin-Young
 <108430771+mauberti-bc@users.noreply.github.com>
Date: Wed, 18 Sep 2024 17:27:40 -0700
Subject: [PATCH] Move device keys button & add info banner (#1369)

Move device keys button & add info banner
---
 app/src/components/alert/AlertBar.tsx         |  2 +-
 .../device-keys/TelemetryDeviceKeysButton.tsx | 16 ++++++++----
 .../device-keys/TelemetryDeviceKeysDialog.tsx | 25 ++++++++++++-------
 .../telemetry/list/SurveyDeploymentList.tsx   |  3 ---
 .../table/TelemetryTableContainer.tsx         |  2 ++
 5 files changed, 30 insertions(+), 18 deletions(-)

diff --git a/app/src/components/alert/AlertBar.tsx b/app/src/components/alert/AlertBar.tsx
index 3db43456ed..ff7d46472f 100644
--- a/app/src/components/alert/AlertBar.tsx
+++ b/app/src/components/alert/AlertBar.tsx
@@ -7,7 +7,7 @@ interface IAlertBarProps {
   severity: 'error' | 'warning' | 'info' | 'success';
   variant: 'filled' | 'outlined' | 'standard';
   title: string;
-  text: string;
+  text: string | JSX.Element;
 }
 
 const AlertBar: React.FC<IAlertBarProps> = (props) => {
diff --git a/app/src/features/surveys/telemetry/device-keys/TelemetryDeviceKeysButton.tsx b/app/src/features/surveys/telemetry/device-keys/TelemetryDeviceKeysButton.tsx
index 556fa99888..a2c54ff8cf 100644
--- a/app/src/features/surveys/telemetry/device-keys/TelemetryDeviceKeysButton.tsx
+++ b/app/src/features/surveys/telemetry/device-keys/TelemetryDeviceKeysButton.tsx
@@ -1,6 +1,6 @@
-import { mdiKeyWireless } from '@mdi/js';
+import { mdiKeyVariant } from '@mdi/js';
 import Icon from '@mdi/react';
-import IconButton from '@mui/material/IconButton';
+import Button from '@mui/material/Button';
 import { TelemetryDeviceKeysDialog } from 'features/surveys/telemetry/device-keys/TelemetryDeviceKeysDialog';
 import { useState } from 'react';
 
@@ -28,9 +28,15 @@ export const TelemetryDeviceKeysButton = (props: ITelemetryDeviceKeysButtonProps
         }}
       />
 
-      <IconButton onClick={() => setOpen(true)} disabled={disabled} aria-label="Manage telemetry device keys">
-        <Icon path={mdiKeyWireless} size={1} />
-      </IconButton>
+      <Button
+        variant="outlined"
+        color="primary"
+        onClick={() => setOpen(true)}
+        disabled={disabled}
+        aria-label="Manage telemetry device keys"
+        startIcon={<Icon path={mdiKeyVariant} size={1} />}>
+        Device Keys
+      </Button>
     </>
   );
 };
diff --git a/app/src/features/surveys/telemetry/device-keys/TelemetryDeviceKeysDialog.tsx b/app/src/features/surveys/telemetry/device-keys/TelemetryDeviceKeysDialog.tsx
index ab379def70..29302327b0 100644
--- a/app/src/features/surveys/telemetry/device-keys/TelemetryDeviceKeysDialog.tsx
+++ b/app/src/features/surveys/telemetry/device-keys/TelemetryDeviceKeysDialog.tsx
@@ -8,6 +8,7 @@ import useTheme from '@mui/material/styles/useTheme';
 import Typography from '@mui/material/Typography';
 import useMediaQuery from '@mui/material/useMediaQuery';
 import { AxiosProgressEvent, CancelTokenSource } from 'axios';
+import AlertBar from 'components/alert/AlertBar';
 import FileUpload from 'components/file-upload/FileUpload';
 import { AttachmentTypeFileExtensions } from 'constants/attachments';
 import { TelemetryDeviceKeysList } from 'features/surveys/telemetry/device-keys/TelemetryDeviceKeysList';
@@ -103,7 +104,7 @@ export const TelemetryDeviceKeysDialog = (props: ITelemetryDeviceKeysDialogProps
   return (
     <Dialog
       fullScreen={fullScreen}
-      maxWidth="xl"
+      maxWidth="md"
       open={open}
       onClose={onClose}
       aria-labelledby="component-dialog-title"
@@ -112,14 +113,20 @@ export const TelemetryDeviceKeysDialog = (props: ITelemetryDeviceKeysDialogProps
         <DialogTitle id="component-dialog-title">Manage Device Keys</DialogTitle>
         <DialogContent>
           <Box mb={3}>
-            <Typography color="textSecondary">
-              Device keys allow telemetry data from Vectronic to be automatically loaded into your Survey.
-            </Typography>
-            <Typography color="textSecondary">Vectronic device keys are .keyx files.</Typography>
-            <Typography color="textSecondary">Lotek device keys are .cfg files.</Typography>
-            <Typography color="textSecondary" mb={3}>
-              Telemetry data from other manufacturers must be imported manually.
-            </Typography>
+            <AlertBar
+              severity="info"
+              variant="standard"
+              title="Automatic Data Retrievals"
+              text={
+                <Typography variant="body2">
+                  Telemetry data can be imported manually or, for Vectronic and Lotek devices, retrieved automatically
+                  after&nbsp;<strong>uploading device keys</strong>&nbsp;(.keyx or .cfg files). Automatic data
+                  retrievals happen nightly. For Vectronic devices, you should see new telemetry data for a deployment
+                  within 24 hours of uploading the device's .keyx file. For Lotek devices, you should see telemetry data
+                  after a system administrator has processed your .cfg file.
+                </Typography>
+              }
+            />
             <FileUpload
               uploadHandler={uploadHandler}
               dropZoneProps={{
diff --git a/app/src/features/surveys/telemetry/list/SurveyDeploymentList.tsx b/app/src/features/surveys/telemetry/list/SurveyDeploymentList.tsx
index 74478d3932..68204fc8c5 100644
--- a/app/src/features/surveys/telemetry/list/SurveyDeploymentList.tsx
+++ b/app/src/features/surveys/telemetry/list/SurveyDeploymentList.tsx
@@ -17,7 +17,6 @@ import Toolbar from '@mui/material/Toolbar';
 import Typography from '@mui/material/Typography';
 import { LoadingGuard } from 'components/loading/LoadingGuard';
 import { SkeletonList } from 'components/loading/SkeletonLoaders';
-import { TelemetryDeviceKeysButton } from 'features/surveys/telemetry/device-keys/TelemetryDeviceKeysButton';
 import { SurveyDeploymentListItem } from 'features/surveys/telemetry/list/SurveyDeploymentListItem';
 import { useBiohubApi } from 'hooks/useBioHubApi';
 import { useDialogContext, useSurveyContext, useTelemetryDataContext } from 'hooks/useContext';
@@ -213,8 +212,6 @@ export const SurveyDeploymentList = () => {
             Add
           </Button>
 
-          <TelemetryDeviceKeysButton />
-
           <IconButton
             edge="end"
             aria-label="header-settings"
diff --git a/app/src/features/surveys/telemetry/table/TelemetryTableContainer.tsx b/app/src/features/surveys/telemetry/table/TelemetryTableContainer.tsx
index 21e4b8ae61..979783f9c7 100644
--- a/app/src/features/surveys/telemetry/table/TelemetryTableContainer.tsx
+++ b/app/src/features/surveys/telemetry/table/TelemetryTableContainer.tsx
@@ -27,6 +27,7 @@ import { useBiohubApi } from 'hooks/useBioHubApi';
 import { useTelemetryTableContext } from 'hooks/useContext';
 import { useContext, useDeferredValue, useState } from 'react';
 import { pluralize as p } from 'utils/Utils';
+import { TelemetryDeviceKeysButton } from '../device-keys/TelemetryDeviceKeysButton';
 
 export const TelemetryTableContainer = () => {
   const biohubApi = useBiohubApi();
@@ -144,6 +145,7 @@ export const TelemetryTableContainer = () => {
           </Typography>
 
           <Stack flexDirection="row" alignItems="center" gap={1} overflow="hidden" whiteSpace="nowrap">
+            <TelemetryDeviceKeysButton />
             <Button
               variant="contained"
               color="primary"