Skip to content

Commit cb460cc

Browse files
EveningStarlightEveningStarlight
authored
Scan domain changes (canada-ca#2840)
* add StatusIcon component * use LoadingMessage more often in ScanDomain * use StatusIcon on ScanDomain * fix 'test' typo * add optional chaining * remove oneTimeScansLoading * fix mocking crash on ScanDomains * fix mocker subscription * update email loading message
1 parent e177c31 commit cb460cc

File tree

4 files changed

+114
-182
lines changed

4 files changed

+114
-182
lines changed

‎frontend/mocking/mocker.js‎

Lines changed: 23 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -648,9 +648,9 @@ const schemaWithMocks = addMocksToSchema({
648648
const dkimScanData = store.get('DkimSub', scanUuid)
649649
setTimeout(() => {
650650
pubsub.publish(
651-
`${NEW_DKIM_DATA_STREAM}/$.parameters.userKey{
651+
`${NEW_DKIM_DATA_STREAM}/${
652652
jwt.decode(context.token, 'secret').parameters.userKey
653-
}`.parameters.userKey,
653+
}`,
654654
{
655655
dkimScanData: dkimScanData,
656656
},
@@ -661,9 +661,9 @@ const schemaWithMocks = addMocksToSchema({
661661
const dmarcScanData = store.get('DmarcSub', scanUuid)
662662
setTimeout(() => {
663663
pubsub.publish(
664-
`${NEW_DMARC_DATA_STREAM}/$.parameters.userKey{
664+
`${NEW_DMARC_DATA_STREAM}/${
665665
jwt.decode(context.token, 'secret').parameters.userKey
666-
}`.parameters.userKey,
666+
}`,
667667
{
668668
dmarcScanData: dmarcScanData,
669669
},
@@ -674,9 +674,9 @@ const schemaWithMocks = addMocksToSchema({
674674
const spfScanData = store.get('SpfSub', scanUuid)
675675
setTimeout(() => {
676676
pubsub.publish(
677-
`${NEW_SPF_DATA_STREAM}/$.parameters.userKey{
677+
`${NEW_SPF_DATA_STREAM}/${
678678
jwt.decode(context.token, 'secret').parameters.userKey
679-
}`.parameters.userKey,
679+
}`,
680680
{
681681
spfScanData: spfScanData,
682682
},
@@ -687,9 +687,9 @@ const schemaWithMocks = addMocksToSchema({
687687
const httpsScanData = store.get('HttpsSub', scanUuid)
688688
setTimeout(() => {
689689
pubsub.publish(
690-
`${NEW_HTTPS_DATA_STREAM}/$.parameters.userKey{
690+
`${NEW_HTTPS_DATA_STREAM}/${
691691
jwt.decode(context.token, 'secret').parameters.userKey
692-
}`.parameters.userKey,
692+
}`,
693693
{
694694
httpsScanData: httpsScanData,
695695
},
@@ -809,31 +809,41 @@ const schemaWithMocks = addMocksToSchema({
809809
dkimScanData: {
810810
subscribe: (_, _args, context) =>
811811
pubsub.asyncIterator(
812-
`${NEW_DKIM_DATA_STREAM}/${jwt.decode(context.token, 'secret')}`,
812+
`${NEW_DKIM_DATA_STREAM}/${
813+
jwt.decode(context.token, 'secret').parameters.userKey
814+
}`,
813815
),
814816
},
815817
dmarcScanData: {
816818
subscribe: (_, _args, context) =>
817819
pubsub.asyncIterator(
818-
`${NEW_DMARC_DATA_STREAM}/${jwt.decode(context.token, 'secret')}`,
820+
`${NEW_DMARC_DATA_STREAM}/${
821+
jwt.decode(context.token, 'secret').parameters.userKey
822+
}`,
819823
),
820824
},
821825
spfScanData: {
822826
subscribe: (_, _args, context) =>
823827
pubsub.asyncIterator(
824-
`${NEW_SPF_DATA_STREAM}/${jwt.decode(context.token, 'secret')}`,
828+
`${NEW_SPF_DATA_STREAM}/${
829+
jwt.decode(context.token, 'secret').parameters.userKey
830+
}`,
825831
),
826832
},
827833
httpsScanData: {
828834
subscribe: (_, _args, context) =>
829835
pubsub.asyncIterator(
830-
`${NEW_HTTPS_DATA_STREAM}/${jwt.decode(context.token, 'secret')}`,
836+
`${NEW_HTTPS_DATA_STREAM}/${
837+
jwt.decode(context.token, 'secret').parameters.userKey
838+
}`,
831839
),
832840
},
833841
sslScanData: {
834842
subscribe: (_, _args, context) =>
835843
pubsub.asyncIterator(
836-
`${NEW_SSL_DATA_STREAM}/${jwt.decode(context.token, 'secret')}`,
844+
`${NEW_SSL_DATA_STREAM}/${
845+
jwt.decode(context.token, 'secret').parameters.userKey
846+
}`,
837847
),
838848
},
839849
},

‎frontend/src/components/StatusIcon.js‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import React from 'react'
2+
import { string } from 'prop-types'
3+
import { Spinner } from '@chakra-ui/react'
4+
import { CheckCircleIcon, WarningIcon, InfoIcon } from '@chakra-ui/icons'
5+
6+
export function StatusIcon({ status }) {
7+
if (status === 'PASS') {
8+
return (
9+
<CheckCircleIcon color="strong" size="icons.sm" aria-label="passes" />
10+
)
11+
} else if (status === 'FAIL') {
12+
return <WarningIcon color="weak" size="icons.sm" aria-label="fails" />
13+
} else if (status === 'LOADING') {
14+
return <Spinner color="accent" size="sm" />
15+
} else {
16+
return (
17+
<InfoIcon
18+
color="info"
19+
size="icons.sm"
20+
aria-label="Information not sufficient, please view guidance"
21+
/>
22+
)
23+
}
24+
}
25+
26+
StatusIcon.propTypes = {
27+
status: string.isRequired,
28+
}

‎frontend/src/domains/ScanDomain.js‎

Lines changed: 60 additions & 145 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,6 @@ import {
1313
Divider,
1414
Flex,
1515
Heading,
16-
Spinner,
1716
Stack,
1817
Tab,
1918
TabList,
@@ -23,19 +22,16 @@ import {
2322
Text,
2423
useToast,
2524
} from '@chakra-ui/react'
26-
import {
27-
CheckCircleIcon,
28-
WarningIcon,
29-
WarningTwoIcon,
30-
InfoIcon,
31-
} from '@chakra-ui/icons'
25+
import { WarningTwoIcon } from '@chakra-ui/icons'
3226
import { useMutation, useQuery } from '@apollo/client'
3327
import { object, string } from 'yup'
3428

3529
import { DomainField } from './DomainField'
30+
import { StatusBadge } from './StatusBadge'
3631

3732
import { ScanCategoryDetails } from '../guidance/ScanCategoryDetails'
3833
import { LoadingMessage } from '../components/LoadingMessage'
34+
import { StatusIcon } from '../components/StatusIcon'
3935
import { fieldRequirements } from '../utilities/fieldRequirements'
4036
import { GET_ONE_TIME_SCANS } from '../graphql/queries'
4137
import { REQUEST_SCAN } from '../graphql/mutations'
@@ -120,8 +116,6 @@ export function ScanDomain() {
120116
})
121117
}
122118

123-
// TODO: Create list of collapsable scan detail cards
124-
125119
const dmarcSteps = {
126120
assess: [
127121
t`Identify all domains and subdomains used to send mail;`,
@@ -147,16 +141,16 @@ export function ScanDomain() {
147141
],
148142
}
149143

150-
const generateStatusIcon = (status) => {
151-
let statusIcon
152-
if (status === 'PASS') {
153-
statusIcon = <CheckCircleIcon color="strong" size="icons.sm" />
154-
} else if (status === 'FAIL') {
155-
statusIcon = <WarningIcon color="weak" size="icons.sm" />
156-
} else {
157-
statusIcon = <InfoIcon color="info" size="icons.sm" />
158-
}
159-
return statusIcon
144+
const statusGroupingProps = {
145+
flexDirection: { base: 'column', md: 'row' },
146+
border: '1px solid',
147+
borderColor: 'gray.300',
148+
borderRadius: 'md',
149+
px: { base: 2, md: 0 },
150+
py: { base: 1, md: 2 },
151+
mx: { base: 0, md: 1 },
152+
my: { base: 2, md: 0 },
153+
bg: 'gray.100',
160154
}
161155

162156
return (
@@ -237,116 +231,50 @@ export function ScanDomain() {
237231
flexDirection={{ base: 'column', md: 'row' }}
238232
flexGrow={{ base: 0, md: '1' }}
239233
>
240-
<Box mx={{ md: 2 }}>
241-
<Stack
242-
align="center"
243-
flexDirection={{ base: 'row', md: 'column' }}
244-
justifyContent="space-between"
245-
spacing={0}
246-
>
247-
<Text
248-
fontWeight="bold"
249-
fontSize="sm"
250-
mb={{ base: 0, md: '2' }}
251-
mr={{ base: '2', md: 0 }}
252-
>
253-
HTTPS:
254-
</Text>
255-
{mergedScan.scan.https ? (
256-
generateStatusIcon(mergedScan.scan.https.status)
257-
) : (
258-
<Spinner color="accent" size="sm" />
259-
)}
260-
</Stack>
261-
</Box>
262-
<Box mx={{ md: 2 }}>
263-
<Stack
264-
align="center"
265-
flexDirection={{ base: 'row', md: 'column' }}
266-
justifyContent="space-between"
267-
spacing={0}
268-
>
269-
<Text
270-
fontWeight="bold"
271-
fontSize="sm"
272-
mb={{ base: 0, md: '2' }}
273-
mr={{ base: '2', md: 0 }}
274-
>
275-
SSL:
276-
</Text>
277-
{mergedScan.scan.ssl ? (
278-
generateStatusIcon(mergedScan.scan.ssl.status)
279-
) : (
280-
<Spinner color="accent" size="sm" />
281-
)}
282-
</Stack>
283-
</Box>
284-
<Box mx={{ md: 2 }}>
285-
<Stack
286-
align="center"
287-
flexDirection={{ base: 'row', md: 'column' }}
288-
justifyContent="space-between"
289-
spacing={0}
290-
>
291-
<Text
292-
fontWeight="bold"
293-
fontSize="sm"
294-
mb={{ base: 0, md: '2' }}
295-
mr={{ base: '2', md: 0 }}
296-
>
297-
SPF:
298-
</Text>
299-
{mergedScan.scan.spf ? (
300-
generateStatusIcon(mergedScan.scan.spf.status)
301-
) : (
302-
<Spinner color="accent" size="sm" />
303-
)}
304-
</Stack>
305-
</Box>
306-
<Box mx={{ md: 2 }}>
307-
<Stack
308-
align="center"
309-
flexDirection={{ base: 'row', md: 'column' }}
310-
justifyContent="space-between"
311-
spacing={0}
312-
>
313-
<Text
314-
fontWeight="bold"
315-
fontSize="sm"
316-
mb={{ base: 0, md: '2' }}
317-
mr={{ base: '2', md: 0 }}
318-
>
319-
DKIM:
320-
</Text>
321-
{mergedScan.scan.dkim ? (
322-
generateStatusIcon(mergedScan.scan.dkim.status)
323-
) : (
324-
<Spinner color="accent" size="sm" />
325-
)}
326-
</Stack>
327-
</Box>
328-
<Box mx={{ md: 2 }}>
329-
<Stack
330-
align="center"
331-
flexDirection={{ base: 'row', md: 'column' }}
332-
justifyContent="space-between"
333-
spacing={0}
334-
>
335-
<Text
336-
fontWeight="bold"
337-
fontSize="sm"
338-
mb={{ base: 0, md: '2' }}
339-
mr={{ base: '2', md: '0' }}
340-
>
341-
DMARC:
342-
</Text>
343-
{mergedScan.scan.dmarc ? (
344-
generateStatusIcon(mergedScan.scan.dmarc.status)
345-
) : (
346-
<Spinner color="accent" size="sm" />
347-
)}
348-
</Stack>
349-
</Box>
234+
<Flex {...statusGroupingProps}>
235+
<StatusBadge
236+
text="HTTPS:"
237+
status={
238+
mergedScan.scan?.https
239+
? mergedScan.scan.https.status
240+
: 'LOADING'
241+
}
242+
/>
243+
<StatusBadge
244+
text="SSL:"
245+
status={
246+
mergedScan.scan?.ssl
247+
? mergedScan.scan.ssl.status
248+
: 'LOADING'
249+
}
250+
/>
251+
</Flex>
252+
<Flex {...statusGroupingProps}>
253+
<StatusBadge
254+
text="SPF:"
255+
status={
256+
mergedScan.scan?.spf
257+
? mergedScan.scan.spf.status
258+
: 'LOADING'
259+
}
260+
/>
261+
<StatusBadge
262+
text="DKIM:"
263+
status={
264+
mergedScan.scan?.dkim
265+
? mergedScan.scan.dkim.status
266+
: 'LOADING'
267+
}
268+
/>
269+
<StatusBadge
270+
text="DMARC:"
271+
status={
272+
mergedScan.scan?.dmarc
273+
? mergedScan.scan.dmarc.status
274+
: 'LOADING'
275+
}
276+
/>
277+
</Flex>
350278
<Divider
351279
orientation={{ base: 'horizontal', md: 'vertical' }}
352280
alignSelf="stretch"
@@ -393,10 +321,7 @@ export function ScanDomain() {
393321
mergedScan.scan.https.status === 'PASS' &&
394322
mergedScan.scan.ssl.status === 'PASS' ? (
395323
<Stack isInline align="center" px="2">
396-
<CheckCircleIcon
397-
color="strong"
398-
size="icons.sm"
399-
/>
324+
<StatusIcon status="PASS" />
400325
<Text fontWeight="bold" fontSize="2xl">
401326
<Trans>ITPIN Compliant</Trans>
402327
</Text>
@@ -415,12 +340,7 @@ export function ScanDomain() {
415340
</Stack>
416341
)
417342
) : (
418-
<Stack isInline align="center" px="2">
419-
<Spinner color="accent" size="md" />
420-
<Text fontWeight="bold" fontSize="2xl">
421-
<Trans>Loading Compliance Status</Trans>
422-
</Text>
423-
</Stack>
343+
<LoadingMessage>One Time Scan</LoadingMessage>
424344
)}
425345
</Box>
426346
<Accordion allowMultiple defaultIndex={[0, 1]}>
@@ -493,12 +413,7 @@ export function ScanDomain() {
493413
)}
494414
</Box>
495415
) : (
496-
<Stack isInline align="center" px="2">
497-
<Spinner color="accent" size="md" />
498-
<Text fontWeight="bold" fontSize="2xl">
499-
<Trans>Loading DMARC Phase</Trans>
500-
</Text>
501-
</Stack>
416+
<LoadingMessage>One Time Scan</LoadingMessage>
502417
)}
503418
</Box>
504419
<Accordion allowMultiple defaultIndex={[0, 1, 2]}>

0 commit comments

Comments
 (0)