Fix DMARC Summary Report Pagination (canada-ca#2061)

ThomasNickerson · web-flow · commit c92c8896cec1 · 2021-04-13T12:32:52.000-03:00
* Refactor to move pagination controls out of DmarcReportTable

* Switch Dmarc Summary query to use findMyDmarcSummaries

* Fix formatting code for new query

* Add cache type policy for findMyDmarcSummaries

* Make page size options more consistent

* Update dmarcReportSummaryTable fixture, tests pass
diff --git a/frontend/src/DmarcByDomainPage.js b/frontend/src/DmarcByDomainPage.js
@@ -10,6 +10,7 @@ import { ErrorBoundary } from 'react-error-boundary'
 import { ErrorFallbackMessage } from './ErrorFallbackMessage'
 import { LoadingMessage } from './LoadingMessage'
 import { usePaginatedCollection } from './usePaginatedCollection'
+import { RelayPaginationControls } from './RelayPaginationControls'
 
 export default function DmarcByDomainPage() {
   const { currentUser } = useUserState()
@@ -23,6 +24,7 @@ export default function DmarcByDomainPage() {
     `LAST30DAYS, ${currentDate.getFullYear()}`,
   )
   const [selectedTableDisplayLimit, setSelectedTableDisplayLimit] = useState(10)
+  const displayLimitOptions = [5, 10, 20, 50, 100]
 
   const {
     loading,
@@ -31,6 +33,7 @@ export default function DmarcByDomainPage() {
     nodes,
     next,
     previous,
+    resetToFirstPage,
     hasNextPage,
     hasPreviousPage,
   } = usePaginatedCollection({
@@ -41,7 +44,7 @@ export default function DmarcByDomainPage() {
       month: selectedPeriod,
       year: selectedYear,
     },
-    relayRoot: 'findMyDomains',
+    relayRoot: 'findMyDmarcSummaries',
   })
 
   if (error) return <ErrorFallbackMessage error={error} />
@@ -61,8 +64,8 @@ export default function DmarcByDomainPage() {
   else if (nodes.length > 0) {
     const formattedData = []
     nodes.forEach((node) => {
-      const domain = node.domain
-      const percentages = { ...node.dmarcSummaryByPeriod.categoryPercentages }
+      const domain = node.domain.domain
+      const percentages = { ...node.categoryPercentages }
       Object.entries(percentages).forEach(([key, value]) => {
         if (typeof value === 'number') percentages[key] = Math.round(value)
       })
@@ -131,16 +134,6 @@ export default function DmarcByDomainPage() {
       },
     ]
 
-    const displayLimitOptions = [5, 10, 20, 50, 100]
-    const paginationConfig = {
-      previous: previous,
-      hasPreviousPage: hasPreviousPage,
-      next: next,
-      hasNextPage: hasNextPage,
-      displayLimitOptions: displayLimitOptions,
-      isLoadingMore: isLoadingMore,
-    }
-
     tableDisplay = (
       <DmarcReportTable
         data={formattedData}
@@ -153,9 +146,7 @@ export default function DmarcByDomainPage() {
         prependLink="domains/"
         appendLink={`/dmarc-report/${selectedPeriod}/${selectedYear}`}
         frontendPagination={false}
-        paginationConfig={paginationConfig}
         selectedDisplayLimit={selectedTableDisplayLimit}
-        setSelectedDisplayLimit={setSelectedTableDisplayLimit}
       />
     )
   }
@@ -241,6 +232,18 @@ export default function DmarcByDomainPage() {
       <ErrorBoundary FallbackComponent={ErrorFallbackMessage}>
         {tableDisplay}
       </ErrorBoundary>
+      <RelayPaginationControls
+          onlyPagination={false}
+          selectedDisplayLimit={selectedTableDisplayLimit}
+          setSelectedDisplayLimit={setSelectedTableDisplayLimit}
+          displayLimitOptions={displayLimitOptions}
+          resetToFirstPage={resetToFirstPage}
+          hasNextPage={hasNextPage}
+          hasPreviousPage={hasPreviousPage}
+          next={next}
+          previous={previous}
+          isLoadingMore={isLoadingMore}
+        />
     </Box>
   )
 }
diff --git a/frontend/src/DmarcReportTable.js b/frontend/src/DmarcReportTable.js
@@ -7,7 +7,7 @@ import {
   useSortBy,
   useTable,
 } from 'react-table'
-import { array, bool, func, number, shape, string } from 'prop-types'
+import { array, bool, number, string } from 'prop-types'
 import {
   Box,
   Button,
@@ -24,7 +24,6 @@ import { Link as RouteLink } from 'react-router-dom'
 import { t, Trans } from '@lingui/macro'
 import WithPseudoBox from './withPseudoBox'
 import ReactTableGlobalFilter from './ReactTableGlobalFilter'
-import { RelayPaginationControls } from './RelayPaginationControls'
 
 const Table = styled.table`
 width: calc(100% - 2px);
@@ -128,14 +127,10 @@ function DmarcReportTable({ ...props }) {
     prependLink,
     appendLink,
     frontendPagination,
-    paginationConfig,
     selectedDisplayLimit = window.matchMedia('screen and (max-width: 760px)')
       .matches
       ? 5
       : 10,
-    setSelectedDisplayLimit,
-    currentPage,
-    setCurrentPage,
   } = props
   const [show, setShow] = React.useState(true)
   const [firstRender, setFirstRender] = React.useState(true)
@@ -320,28 +315,7 @@ function DmarcReportTable({ ...props }) {
         </Stack>
       </Stack>
     </Box>
-  ) : (
-    <RelayPaginationControls
-      previous={() => {
-        paginationConfig.previous()
-      }}
-      hasPreviousPage={paginationConfig.hasPreviousPage}
-      next={() => {
-        if (paginationConfig.hasNextPage && !canNextPage)
-          paginationConfig.next()
-        else {
-          setCurrentPage(currentPage + 1)
-        }
-      }}
-      hasNextPage={paginationConfig.hasNextPage}
-      selectedDisplayLimit={selectedDisplayLimit}
-      setSelectedDisplayLimit={setSelectedDisplayLimit}
-      displayLimitOptions={paginationConfig.displayLimitOptions}
-      gotoPage={gotoPage}
-      isLoadingMore={paginationConfig.isLoadingMore}
-      mt="10px"
-    />
-  )
+  ) : ("")
 
   return (
     <Box ref={wrapperRef}>
@@ -430,18 +404,7 @@ DmarcReportTable.propTypes = {
   prependLink: string,
   appendLink: string,
   frontendPagination: bool,
-  paginationConfig: shape({
-    previous: func,
-    hasPreviousPage: bool,
-    next: func,
-    hasNextPage: bool,
-    displayLimitOptions: array,
-    isLoadingMore: bool,
-  }),
   selectedDisplayLimit: number,
-  setSelectedDisplayLimit: func,
-  currentPage: number,
-  setCurrentPage: func,
 }
 
 DmarcReportTable.defaultProps = {
diff --git a/frontend/src/DomainsPage.js b/frontend/src/DomainsPage.js
@@ -166,7 +166,7 @@ export default function DomainsPage() {
                 onlyPagination={false}
                 selectedDisplayLimit={domainsPerPage}
                 setSelectedDisplayLimit={setDomainsPerPage}
-                displayLimitOptions={[10, 20, 40, 80]}
+                displayLimitOptions={[5, 10, 20, 50, 100]}
                 resetToFirstPage={resetToFirstPage}
                 hasNextPage={hasNextPage}
                 hasPreviousPage={hasPreviousPage}
diff --git a/frontend/src/Organizations.js b/frontend/src/Organizations.js
@@ -165,7 +165,7 @@ export default function Organisations() {
           onlyPagination={false}
           selectedDisplayLimit={orgsPerPage}
           setSelectedDisplayLimit={setOrgsPerPage}
-          displayLimitOptions={[10, 20, 40, 80]}
+          displayLimitOptions={[5, 10, 20, 50, 100]}
           resetToFirstPage={resetToFirstPage}
           hasNextPage={hasNextPage}
           hasPreviousPage={hasPreviousPage}
diff --git a/frontend/src/client.js b/frontend/src/client.js
@@ -8,6 +8,7 @@ export function createCache() {
       Query: {
         fields: {
           findMyDomains: relayStylePagination(['first', 'orderBy', 'search']),
+          findMyDmarcSummaries: relayStylePagination(['first']),
           findMyOrganizations: relayStylePagination(['first', 'orderBy', 'search']),
         },
       },
diff --git a/frontend/src/fixtures/dmarcReportSummaryTable.js b/frontend/src/fixtures/dmarcReportSummaryTable.js
@@ -1,52 +1,48 @@
 export const rawDmarcReportSummaryTableData = {
   data: {
-    findMyDomains: {
+    findMyDmarcSummaries: {
       edges: [
         {
           node: {
             id: 'testid1=',
-            domain: 'domain1.ca',
-            dmarcSummaryByPeriod: {
-              month: 'LAST30DAYS',
-              year: '2021',
-              domain: { domain: 'domain1.ca' },
-              categoryPercentages: {
-                failPercentage: 31.5,
-                fullPassPercentage: 1.88,
-                passDkimOnlyPercentage: 4.51,
-                passSpfOnlyPercentage: 4.12,
-                totalMessages: 7803,
-                __typename: 'CategoryPercentages',
-              },
-              __typename: 'Period',
+            domain: {
+              domain: 'domain1.ca',
+              __typename: 'Domain',
             },
-            __typename: 'Domain',
+            month: 'LAST30DAYS',
+            year: '2021',
+            categoryPercentages: {
+              failPercentage: 31.5,
+              fullPassPercentage: 1.88,
+              passDkimOnlyPercentage: 4.51,
+              passSpfOnlyPercentage: 4.12,
+              totalMessages: 7803,
+              __typename: 'CategoryPercentages',
+            },
+            __typename: 'DmarcSummary',
           },
-
-          __typename: 'DomainEdge',
+          __typename: 'DmarcSummaryEdge',
         },
         {
           node: {
             id: 'testid2=',
-            domain: 'domain2.ca',
-            dmarcSummaryByPeriod: {
-              month: 'LAST30DAYS',
-              year: '2021',
-              domain: { domain: 'domain2.ca' },
-              categoryPercentages: {
-                failPercentage: 31.5,
-                fullPassPercentage: 1.88,
-                passDkimOnlyPercentage: 4.51,
-                passSpfOnlyPercentage: 4.12,
-                totalMessages: 7803,
-                __typename: 'CategoryPercentages',
-              },
-              __typename: 'Period',
+            domain: {
+              domain: 'domain2.ca',
+              __typename: 'Domain',
+            },
+            month: 'LAST30DAYS',
+            year: '2021',
+            categoryPercentages: {
+              failPercentage: 31.5,
+              fullPassPercentage: 1.88,
+              passDkimOnlyPercentage: 4.51,
+              passSpfOnlyPercentage: 4.12,
+              totalMessages: 7803,
+              __typename: 'CategoryPercentages',
             },
-            __typename: 'Domain',
+            __typename: 'DmarcSummary',
           },
-
-          __typename: 'DomainEdge',
+          __typename: 'DmarcSummaryEdge',
         },
       ],
       pageInfo: {
@@ -56,7 +52,7 @@ export const rawDmarcReportSummaryTableData = {
         startCursor: 'startcursor=',
         __typename: 'PageInfo',
       },
-      __typename: 'DomainConnection',
+      __typename: 'DmarcSummaryConnection',
     },
   },
 }
diff --git a/frontend/src/graphql/queries.js b/frontend/src/graphql/queries.js
@@ -1276,36 +1276,38 @@ export const PAGINATED_DMARC_REPORT_SUMMARY_TABLE = gql`
   query PaginatedDmarcReportSummaryTable(
     $month: PeriodEnums!
     $year: Year!
-    $after: String
     $first: Int
+    $after: String
   ) {
-    findMyDomains(after: $after, first: $first, ownership: true) {
+    findMyDmarcSummaries(
+      month: $month
+      year: $year
+      first: $first
+      after: $after
+    ) {
+      pageInfo {
+        hasNextPage
+        hasPreviousPage
+        startCursor
+        endCursor
+      }
       edges {
         node {
           id
-          domain
-          dmarcSummaryByPeriod(month: $month, year: $year) {
-            month
-            year
-            domain {
-              domain
-            }
-            categoryPercentages {
-              failPercentage
-              fullPassPercentage
-              passDkimOnlyPercentage
-              passSpfOnlyPercentage
-              totalMessages
-            }
+          month
+          year
+          domain {
+            domain
+          }
+          categoryPercentages {
+            failPercentage
+            fullPassPercentage
+            passDkimOnlyPercentage
+            passSpfOnlyPercentage
+            totalMessages
           }
         }
       }
-      pageInfo {
-        hasNextPage
-        endCursor
-        hasPreviousPage
-        startCursor
-      }
     }
   }
 `
