Add Information Banner to Device Keys Dialog

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) => {

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 @@
         }}
       />
 
-      <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>
     </>
   );
 };

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={{

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"

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"