Add domainCount to orgs page (canada-ca#591)

This commit makes use of the new domainCount field that is now available to
display the number of domains associated with an organization.

Author: sleepycat

frontend/schema.faker.graphql

@@ -402,7 +402,7 @@ type DmarcReportEdge {
 }
 
 type Domain implements Node {
-  organization: Organization
+  organization: Organizations
   dmarcReports(
     before: String
     after: String
@@ -951,6 +951,15 @@ type OrganizationDetail {
       ]
     )
 
+  """
+  The number of domains under this organization
+  """
+  domainCount: Int
+    @fake(
+      type: number
+      options: { minNumber: 0, maxNumber: 20, precisionNumber: 1 }
+    )
+
   """
   The zone which the organization belongs to.
   """
@@ -984,6 +993,14 @@ type OrganizationDetail {
 
 type Organizations implements Node {
   """
+  The number of domains under this organization
+  """
+  domainCount: Int
+    @fake(
+      type: number
+      options: { minNumber: 0, maxNumber: 20, precisionNumber: 1 }
+    )
+  """
   The ID of the object.
   """
   id: ID!
@@ -1012,7 +1029,6 @@ type Organizations implements Node {
       ]
     )
 
-
   """
   The zone which the organization belongs to.
   """
@@ -1381,9 +1397,9 @@ type Query {
   Select all information on all organizations that a user has access to.
   """
   findMyOrganizations(
-    before: String,
-    after: String,
-    first: Int,
+    before: String
+    after: String
+    first: Int
     last: Int
   ): OrganizationsConnection
 
@@ -1396,19 +1412,20 @@ type Query {
   Select information on an organizations domains, or all domains a user has access to.
   """
   findDomainsByOrg(
-    orgSlug: Slug,
-    before: String,
-    after: String,
-    first: Int, last: Int
-): DomainConnection
+    orgSlug: Slug
+    before: String
+    after: String
+    first: Int
+    last: Int
+  ): DomainConnection
 
   """
   Select information on  all domains a user has access to.
   """
   findMyDomains(
-    before: String,
-    after: String,
-    first: Int,
+    before: String
+    after: String
+    first: Int
     last: Int
   ): DomainConnection
 
@@ -1529,10 +1546,14 @@ enum RoleEnums {
 }
 
 enum ScanTypeEnums {
-  """Used for defining if DMARC and DKIM scans should be performed"""
+  """
+  Used for defining if DMARC and DKIM scans should be performed
+  """
   MAIL
 
-  """Used for defining if HTTPS and SSL scans should be performed"""
+  """
+  Used for defining if HTTPS and SSL scans should be performed
+  """
   WEB
 }
 
@@ -1796,7 +1817,7 @@ type UserAffClass implements Node {
   """
   The organization this affiliation belongs to
   """
-  organization: Organization
+  organization: Organizations
 
   """
   The ID of the object.
@@ -1949,7 +1970,6 @@ type UserPageAffiliations implements Node {
   organization: Acronym @examples(values: ["GC", "ABC", "ASDF", "NSTIR", "BC"])
 }
 
-
 type ValidateTwoFactor {
   user: User
 }

frontend/src/Organization.js

@@ -1,19 +1,27 @@
 import React from 'react'
-import { Link, ListItem, Stack } from '@chakra-ui/core'
+import { Trans } from '@lingui/macro'
+import { Text, Link, ListItem, Stack } from '@chakra-ui/core'
 import { Link as RouteLink, useRouteMatch } from 'react-router-dom'
-import { string } from 'prop-types'
-export function Organization({ name, slug, ...rest }) {
+import { string, number } from 'prop-types'
+export function Organization({ name, slug, domainCount, ...rest }) {
   const { path, _url } = useRouteMatch()
   console.log(`path: ${path}, url: ${_url}`)
   return (
     <ListItem {...rest}>
-      <Stack spacing={4} padding={[1, 2, 3]} direction="row" flexWrap="wrap">
+      <Stack spacing={4} padding={[1, 2, 3]} flexWrap="wrap">
         <Link as={RouteLink} to={`${path}/${slug}`}>
-          {name}
+          <Text fontWeight="bold">{name}</Text>
         </Link>
+        <Text>
+          <Trans>Internet facing services: {domainCount}</Trans>
+        </Text>
       </Stack>
     </ListItem>
   )
 }
 
-Organization.propTypes = { name: string, slug: string }
+Organization.propTypes = {
+  name: string.isRequired,
+  slug: string.isRequired,
+  domainCount: number.isRequired,
+}

frontend/src/Organizations.js

@@ -57,8 +57,13 @@ export default function Organisations() {
               elements={organizations}
               ifEmpty={() => <Trans>No Organizations</Trans>}
             >
-              {({ name, slug }, index) => (
-                <Organization key={'org' + index} slug={slug} name={name} />
+              {({ name, slug, domainCount }, index) => (
+                <Organization
+                  key={'org' + index}
+                  slug={slug}
+                  name={name}
+                  domainCount={domainCount}
+                />
               )}
             </ListOf>
           </Stack>

frontend/src/__tests__/Organizations.test.js

@@ -23,12 +23,14 @@ const mocks = [
               node: {
                 name: 'Fisheries and Oceans Canada',
                 slug: 'fisheries-and-oceans-canada',
+                domainCount: 2,
               },
             },
             {
               node: {
                 name: 'Treasury Board of Canada Secretariat',
                 slug: 'treasury-board-secretariat',
+                domainCount: 5,
               },
             },
           ],

frontend/src/graphql/queries.js

@@ -26,6 +26,7 @@ export const ORGANIZATIONS = gql`
       edges {
         node {
           name
+          domainCount
           slug
         }
       }