[WIFI-12285] Add support for FMS database refreshes

Signed-off-by: Charles <charles.bourque96@gmail.com>

src/hooks/Network/Firmware.ts

@@ -32,7 +32,7 @@ export const useGetAvailableFirmware = ({ deviceType }: { deviceType: string })
   const { t } = useTranslation();
   const toast = useToast();
 
-  return useQuery(['firmware'], () => getAllAvailableFirmware(deviceType), {
+  return useQuery(['get-device-profile'], () => getAllAvailableFirmware(deviceType), {
     enabled: deviceType !== '',
     onError: (e: AxiosError) => {
       if (!toast.isActive('firmware-fetching-error'))
@@ -242,3 +242,23 @@ export const useGetFirmwareDashboard = () =>
     keepPreviousData: true,
     refetchInterval: 30000,
   });
+
+const getLastDbUpdate = async () =>
+  axiosFms.get(`firmwares?updateTimeOnly=true`).then((response) => response.data as { lastUpdateTime: number });
+export const useGetFirmwareDbUpdate = () =>
+  useQuery(['firmware', 'db'], getLastDbUpdate, {
+    keepPreviousData: true,
+    staleTime: 30 * 1000,
+  });
+
+const updateDb = async () => axiosFms.put(`firmwares?update=true`);
+
+export const useUpdateFirmwareDb = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation(updateDb, {
+    onSuccess: () => {
+      queryClient.invalidateQueries(['firmware', 'db']);
+    },
+  });
+};

src/pages/Firmware/List/Modal.tsx

@@ -191,6 +191,7 @@ const FirmwareDetailsModal = ({ modalProps, firmware }: Props) => {
               ml={2}
             />
             {isEditingDescription && (
+              // @ts-ignore
               <SaveButton onClick={onSaveDescription} ml={2} isCompact size="sm" isLoading={updateFirmware.isLoading} />
             )}
           </FormLabel>
@@ -202,48 +203,51 @@ const FirmwareDetailsModal = ({ modalProps, firmware }: Props) => {
             isDisabled={!isEditingDescription}
           />
         </FormControl>
-        <FormControl>
-          <FormLabel>
-            {t('common.notes')}{' '}
-            <Popover trigger="click" placement="auto">
-              {({ onClose }) => (
-                <>
-                  <PopoverTrigger>
-                    <IconButton
-                      aria-label={`${t('crud.add')} ${t('common.note')}`}
-                      size="sm"
-                      icon={<Plus size={20} />}
-                    />
-                  </PopoverTrigger>
-                  <PopoverContent w={breakpoint === 'base' ? 'calc(80vw)' : '500px'}>
-                    <PopoverArrow />
-                    <PopoverCloseButton alignContent="center" mt={1} />
-                    <PopoverHeader display="flex">{t('profile.add_new_note')}</PopoverHeader>
-                    <PopoverBody>
-                      <Box>
-                        <Textarea h="100px" placeholder="Your new note" value={newNote} onChange={onNoteChange} />
-                      </Box>
-                      <Center mt={2}>
-                        <Button
-                          colorScheme="blue"
-                          isDisabled={newNote.length === 0}
-                          onClick={onNoteSubmit(onClose)}
-                          isLoading={updateFirmware.isLoading}
-                        >
-                          {t('crud.add')}
-                        </Button>
-                      </Center>
-                    </PopoverBody>
-                  </PopoverContent>
-                </>
-              )}
-            </Popover>
-          </FormLabel>
-          <Box overflowX="auto" overflowY="auto" maxH="400px">
-            <DataTable columns={columns as Column<object>[]} data={notes} obj={t('common.notes')} minHeight="200px" />
-          </Box>
-        </FormControl>
       </SimpleGrid>
+      <FormControl mt={2}>
+        <FormLabel>
+          {t('common.notes')}{' '}
+          <Popover trigger="click" placement="auto">
+            {({ onClose }) => (
+              <>
+                <PopoverTrigger>
+                  <IconButton aria-label={`${t('crud.add')} ${t('common.note')}`} size="sm" icon={<Plus size={20} />} />
+                </PopoverTrigger>
+                <PopoverContent w={breakpoint === 'base' ? 'calc(80vw)' : '500px'}>
+                  <PopoverArrow />
+                  <PopoverCloseButton alignContent="center" mt={1} />
+                  <PopoverHeader display="flex">{t('profile.add_new_note')}</PopoverHeader>
+                  <PopoverBody>
+                    <Box>
+                      <Textarea h="100px" placeholder="Your new note" value={newNote} onChange={onNoteChange} />
+                    </Box>
+                    <Center mt={2}>
+                      <Button
+                        colorScheme="blue"
+                        isDisabled={newNote.length === 0}
+                        onClick={onNoteSubmit(onClose)}
+                        isLoading={updateFirmware.isLoading}
+                      >
+                        {t('crud.add')}
+                      </Button>
+                    </Center>
+                  </PopoverBody>
+                </PopoverContent>
+              </>
+            )}
+          </Popover>
+        </FormLabel>
+      </FormControl>
+      <Box overflowX="auto" overflowY="auto" maxH="400px" mb={4}>
+        <DataTable
+          columns={columns as Column<object>[]}
+          data={notes}
+          obj={t('common.notes')}
+          minHeight="200px"
+          showAllRows
+          hideControls
+        />
+      </Box>
     </Modal>
   );
 };

src/pages/Firmware/List/UpdateDbButton.tsx

@@ -0,0 +1,101 @@
+import * as React from 'react';
+import {
+  Alert,
+  AlertDescription,
+  AlertIcon,
+  AlertTitle,
+  Box,
+  Button,
+  Center,
+  Tag,
+  TagLabel,
+  Text,
+  useDisclosure,
+  useToast,
+} from '@chakra-ui/react';
+import axios from 'axios';
+import { Database } from 'phosphor-react';
+import { useTranslation } from 'react-i18next';
+import FormattedDate from 'components/InformationDisplays/FormattedDate';
+import { Modal } from 'components/Modals/Modal';
+import { useGetFirmwareDbUpdate, useUpdateFirmwareDb } from 'hooks/Network/Firmware';
+
+const UpdateDbButton = () => {
+  const { t } = useTranslation();
+  const toast = useToast();
+  const { isOpen, onOpen, onClose } = useDisclosure();
+  const updateDb = useUpdateFirmwareDb();
+  const getLastUpdate = useGetFirmwareDbUpdate();
+
+  const onUpdateClick = async () => {
+    updateDb.mutate(undefined, {
+      onSuccess: () => {
+        toast({
+          id: `firmware-db-update-success`,
+          title: t('common.success'),
+          description: t('firmware.started_db_update'),
+          status: 'success',
+          duration: 5000,
+          isClosable: true,
+          position: 'top-right',
+        });
+      },
+      onError: (e) => {
+        if (axios.isAxiosError(e)) {
+          toast({
+            id: `firmware-db-update-error`,
+            title: t('common.error'),
+            description: e?.response?.data?.ErrorDescription,
+            status: 'error',
+            duration: 5000,
+            isClosable: true,
+            position: 'top-right',
+          });
+        }
+      },
+    });
+  };
+
+  return (
+    <>
+      <Button colorScheme="teal" leftIcon={<Database size={20} />} onClick={onOpen}>
+        {t('firmware.last_db_update_title')}
+      </Button>
+      <Modal
+        isOpen={isOpen}
+        onClose={onClose}
+        title={t('firmware.last_db_update_modal')}
+        tags={
+          <Tag colorScheme="blue" size="lg">
+            <TagLabel display="flex">
+              <Text mr={1}>Last Update:</Text>
+              <FormattedDate date={getLastUpdate.data?.lastUpdateTime} />
+            </TagLabel>
+          </Tag>
+        }
+      >
+        <Box>
+          <Alert status="warning">
+            <AlertIcon />
+            <Box>
+              <AlertTitle>{t('common.warning')}</AlertTitle>
+              <AlertDescription>{t('firmware.db_update_warning')}</AlertDescription>
+            </Box>
+          </Alert>
+          <Center my={4}>
+            <Button
+              colorScheme="red"
+              leftIcon={<Database size={20} />}
+              onClick={onUpdateClick}
+              isLoading={updateDb.isLoading}
+            >
+              {t('firmware.start_db_update')}
+            </Button>
+          </Center>
+        </Box>
+      </Modal>
+    </>
+  );
+};
+
+export default UpdateDbButton;

src/pages/Firmware/List/index.tsx

@@ -16,6 +16,7 @@ import { MagnifyingGlass } from 'phosphor-react';
 import { useTranslation } from 'react-i18next';
 import { v4 as uuid } from 'uuid';
 import FirmwareDetailsModal from './Modal';
+import UpdateDbButton from './UpdateDbButton';
 import UriCell from './UriCell';
 import { RefreshButton } from 'components/Buttons/RefreshButton';
 import { CardBody } from 'components/Containers/Card/CardBody';
@@ -143,6 +144,7 @@ const FirmwareListTable = () => {
           </Box>
           <Text>{t('controller.firmware.show_dev_releases')}</Text>
           <Switch isChecked={showDevFirmware} onChange={toggle} size="lg" />
+          <UpdateDbButton />
           <RefreshButton
             onClick={() => {
               getDeviceTypes.refetch();