Allow for organization summaries to be null on org summary page (canada-ca#2322)

Author: FestiveKyle

frontend/src/OrganizationDetails.js

@@ -100,7 +100,7 @@ export default function OrganizationDetails() {
           <TabPanel>
             <ErrorBoundary FallbackComponent={ErrorFallbackMessage}>
               <OrganizationSummary
-                summaries={data.organization.summaries}
+                summaries={data?.organization?.summaries}
                 domainCount={data.organization.domainCount}
                 userCount={data.organization.affiliations.totalCount}
                 city={data.organization.city}

frontend/src/OrganizationSummary.js

@@ -38,7 +38,7 @@ export function OrganizationSummary({
           </Text>
         </Stack>
       </Stack>
-      <SummaryGroup web={summaries.web} mail={summaries.mail} />
+      <SummaryGroup web={summaries?.web} mail={summaries?.mail} />
     </Layout>
   )
 }

frontend/src/SummaryGroup.js

@@ -1,13 +1,56 @@
 import React from 'react'
-import { t } from '@lingui/macro'
-import { SimpleGrid } from '@chakra-ui/core'
+import { t, Trans } from '@lingui/macro'
+import { SimpleGrid, Text } from '@chakra-ui/core'
 import SummaryCard from './SummaryCard'
 import { object } from 'prop-types'
 import theme from './theme/canada'
 
 const { colors } = theme
 
 export function SummaryGroup({ web, mail }) {
+  const webCard = web ? (
+    <SummaryCard
+      title={t`Web Configuration`}
+      description={t`Web encryption settings summary`}
+      categoryDisplay={{
+        fail: {
+          name: t`Non-compliant TLS`,
+          color: colors.weak,
+        },
+        pass: {
+          name: t`Compliant TLS`,
+          color: colors.strong,
+        },
+      }}
+      data={web}
+    />
+  ) : (
+    <Text fontWeight="bold" textAlign="center">
+      <Trans>No web configuration information available for this org.</Trans>
+    </Text>
+  )
+
+  const mailCard = mail ? (
+    <SummaryCard
+      title={t`Email Configuration`}
+      description={t`Email security settings summary`}
+      categoryDisplay={{
+        pass: {
+          name: t`DMARC pass`,
+          color: colors.strong,
+        },
+        fail: {
+          name: t`DMARC fail`,
+          color: colors.weak,
+        },
+      }}
+      data={mail}
+    />
+  ) : (
+    <Text fontWeight="bold" textAlign="center">
+      <Trans>No mail configuration information available for this org.</Trans>
+    </Text>
+  )
   return (
     <SimpleGrid
       columns={[1, 1, 1, 2]}
@@ -17,36 +60,8 @@ export function SummaryGroup({ web, mail }) {
       mx="auto"
       p={['2', '8']}
     >
-      <SummaryCard
-        title={t`Web Configuration`}
-        description={t`Web encryption settings summary`}
-        categoryDisplay={{
-          fail: {
-            name: t`Non-compliant TLS`,
-            color: colors.weak,
-          },
-          pass: {
-            name: t`Compliant TLS`,
-            color: colors.strong,
-          },
-        }}
-        data={web}
-      />
-      <SummaryCard
-        title={t`Email Configuration`}
-        description={t`Email security settings summary`}
-        categoryDisplay={{
-          pass: {
-            name: t`DMARC pass`,
-            color: colors.strong,
-          },
-          fail: {
-            name: t`DMARC fail`,
-            color: colors.weak,
-          },
-        }}
-        data={mail}
-      />
+      {webCard}
+      {mailCard}
     </SimpleGrid>
   )
 }