add diff table to location list (#661)

packages/frinx-gamma/src/pages/location-list/location-helpers.ts

@@ -0,0 +1,68 @@
+import { CustomerLocation } from '../../network-types';
+
+export type Status = 'CREATED' | 'UPDATED' | 'DELETED' | 'NO_CHANGE';
+
+export type CustomerLocationWithStatus = CustomerLocation & { status: Status };
+
+export function getChangedLocationsWithStatus(
+  createdLocations: CustomerLocation[] | null,
+  updatedLocations: CustomerLocation[] | null,
+  deletedLocations: CustomerLocation[] | null,
+): CustomerLocationWithStatus[] {
+  const createdDevicesWithStatus: CustomerLocationWithStatus[] =
+    createdLocations?.map((location) => {
+      return {
+        ...location,
+        status: 'CREATED',
+      };
+    }) || [];
+
+  const updatedDevicesWithStatus: CustomerLocationWithStatus[] =
+    updatedLocations?.map((location) => {
+      return {
+        ...location,
+        status: 'UPDATED',
+      };
+    }) || [];
+
+  const deletedDevicesWithStatus: CustomerLocationWithStatus[] =
+    deletedLocations?.map((location) => {
+      return {
+        ...location,
+        status: 'DELETED',
+      };
+    }) || [];
+
+  return [...createdDevicesWithStatus, ...updatedDevicesWithStatus, ...deletedDevicesWithStatus];
+}
+
+export function getSavedLocationsWithStatus(
+  locations: CustomerLocation[] | null,
+  updatedLocations: CustomerLocation[] | null,
+  deletedLocations: CustomerLocation[] | null,
+): CustomerLocationWithStatus[] {
+  return (
+    locations?.map((location) => {
+      const updatedSite = updatedLocations?.filter((i) => i.locationId === location.locationId) || [];
+      if (updatedSite.length) {
+        return {
+          ...updatedSite[0],
+          status: 'UPDATED',
+        };
+      }
+
+      const deletedSite = deletedLocations?.filter((i) => i.locationId === location.locationId) || [];
+      if (deletedSite.length) {
+        return {
+          ...deletedSite[0],
+          status: 'DELETED',
+        };
+      }
+
+      return {
+        ...location,
+        status: 'NO_CHANGE',
+      };
+    }) || []
+  );
+}

packages/frinx-gamma/src/pages/location-list/location-list.tsx

@@ -1,6 +1,7 @@
 import { Box, Button, Container, Flex, Heading, useDisclosure } from '@chakra-ui/react';
 import React, { useContext, useEffect, useState, VoidFunctionComponent } from 'react';
 import { useParams, Link } from 'react-router-dom';
+import diff from 'diff-arrays-of-objects';
 import callbackUtils from '../../unistore-callback-utils';
 import ConfirmDeleteModal from '../../components/confirm-delete-modal/confirm-delete-modal';
 import {
@@ -15,11 +16,15 @@ import usePagination from '../../hooks/use-pagination';
 import Pagination from '../../components/pagination/pagination';
 import LocationFilter, { LocationFilters } from './location-filter';
 import FilterContext from '../../filter-provider';
+import { getChangedLocationsWithStatus, getSavedLocationsWithStatus } from './location-helpers';
 
 const LocationListPage: VoidFunctionComponent = () => {
   const filterContext = useContext(FilterContext);
   const { location: locationFilters, onLocationFilterChange } = unwrap(filterContext);
   const [site, setSite] = useState<VpnSite | null>(null);
+  const [createdLocations, setCreatedLocations] = useState<CustomerLocation[] | null>(null);
+  const [updatedLocations, setUpdatedLocations] = useState<CustomerLocation[] | null>(null);
+  const [deletedLocations, setDeletedLocations] = useState<CustomerLocation[] | null>(null);
   const [locations, setLocations] = useState<CustomerLocation[] | null>(null);
   const [locationIdToDelete, setLocationIdToDelete] = useState<string | null>(null);
   const deleteModalDisclosure = useDisclosure();
@@ -56,6 +61,15 @@ const LocationListPage: VoidFunctionComponent = () => {
         ...pagination,
         pageCount: Math.ceil(locationsCount / pagination.pageSize),
       });
+      // get data for changes table
+      const allSavedLocations = await callbacks.getLocations(unwrap(siteId), null, null, 'nonconfig');
+      const clientAllSavedLocations = apiLocationsToClientLocations(allSavedLocations);
+      const allUnsavedLocations = await callbacks.getLocations(unwrap(siteId), null, null);
+      const clientAllUnsavedLocations = apiLocationsToClientLocations(allUnsavedLocations);
+      const result = diff(clientAllSavedLocations, clientAllUnsavedLocations, 'locationId');
+      setCreatedLocations(result.added);
+      setUpdatedLocations(result.updated);
+      setDeletedLocations(result.removed);
     };
     fetchData();
   }, [pagination.page, submittedFilters]); // eslint-disable-line react-hooks/exhaustive-deps
@@ -104,6 +118,13 @@ const LocationListPage: VoidFunctionComponent = () => {
     return null;
   }
 
+  const changedLocationsWithStatus = getChangedLocationsWithStatus(
+    createdLocations,
+    updatedLocations,
+    deletedLocations,
+  );
+  const savedLocationsWithStatus = getSavedLocationsWithStatus(locations, updatedLocations, deletedLocations);
+
   return (
     <>
       <ConfirmDeleteModal
@@ -141,10 +162,26 @@ const LocationListPage: VoidFunctionComponent = () => {
               onFilterReset={handleFilterReset}
               onFilterSubmit={handleFilterSubmit}
             />
+            {changedLocationsWithStatus.length ? (
+              <>
+                <Heading size="sm">Changes</Heading>
+                <Box my="2">
+                  <LocationTable
+                    size="sm"
+                    site={site}
+                    detailId={detailId}
+                    locations={changedLocationsWithStatus}
+                    onDeleteLocationButtonClick={handleDeleteButtonClick}
+                    onRowClick={handleRowClick}
+                  />
+                </Box>
+              </>
+            ) : null}
             <LocationTable
+              size="md"
               site={site}
               detailId={detailId}
-              locations={locations || []}
+              locations={savedLocationsWithStatus}
               onDeleteLocationButtonClick={handleDeleteButtonClick}
               onRowClick={handleRowClick}
             />

packages/frinx-gamma/src/pages/location-list/location-table.tsx

@@ -8,6 +8,7 @@ import unwrap from '../../helpers/unwrap';
 import LocationDetail from './location-detail';
 
 type Props = {
+  size: 'sm' | 'md';
   site: VpnSite;
   detailId: string | null;
   locations: CustomerLocation[];
@@ -16,14 +17,15 @@ type Props = {
 };
 
 const LocationTable: VoidFunctionComponent<Props> = ({
+  size,
   site,
   detailId,
   locations,
   onDeleteLocationButtonClick,
   onRowClick,
 }) => {
   return (
-    <Table background="white" size="lg" marginBottom="12">
+    <Table background="white" size={size} marginBottom="12">
       <Thead>
         <Tr>
           <Th />