Skip to content

Commit 9d776d9

Browse files
lcampbell2tparrott-cse
lcampbell2
and
tparrott-cse
authored
FE User Page Fix (canada-ca#1424)
* remove org list from user page * added validation badges to user page * add error fallback message to DmarcByDomainPage.js * changed variant of 2FA badges, org card percentages rounded * replaced 2FA/Email validation red/green representation with icons Co-authored-by: tparrott-cse <tparrott.cse@gmail.com>
1 parent af6b21a commit 9d776d9

12 files changed

Lines changed: 66 additions & 183 deletions

File tree

‎frontend/src/App.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import { Footer } from './Footer'
1010
import { Navigation } from './Navigation'
1111
import { Flex, Link, CSSReset, useToast, Box } from '@chakra-ui/core'
1212
import { SkipLink } from './SkipLink'
13-
import { TwoFactorNotificationBar } from './TwoFactorNotificationBar'
13+
// import { TwoFactorNotificationBar } from './TwoFactorNotificationBar'
1414
import { useUserState } from './UserState'
1515
import { RouteIf } from './RouteIf'
1616
import { ErrorBoundary } from 'react-error-boundary'
@@ -70,7 +70,7 @@ export default function App() {
7070
</Link>
7171
)}
7272

73-
{1 && (
73+
{isLoggedIn() && (
7474
<Link to="/dmarc-summaries">
7575
<Trans>DMARC Report</Trans>
7676
</Link>
@@ -113,7 +113,7 @@ export default function App() {
113113
)}
114114
</Navigation>
115115

116-
{isLoggedIn() && !currentUser.tfa && <TwoFactorNotificationBar />}
116+
{/* {isLoggedIn() && !currentUser.tfa && <TwoFactorNotificationBar />} */}
117117
<Main>
118118
<Suspense fallback={<div>Loading...</div>}>
119119
<Switch>

‎frontend/src/DmarcByDomainPage.js‎

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -47,13 +47,7 @@ export default function DmarcByDomainPage() {
4747
relayRoot: 'findMyDomains',
4848
})
4949

50-
// TODO: Properly handle these errors
51-
if (error)
52-
return (
53-
<Heading as="h3" size="lg" textAlign="center">
54-
<Trans>Error while querying for DMARC report summary table</Trans>
55-
</Heading>
56-
)
50+
if (error) return <ErrorFallbackMessage error={error} />
5751

5852
// DMARC Summary Table setup
5953
let tableDisplay

‎frontend/src/OrganizationCard.js‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,18 @@ export function OrganizationCard({
3535
if (webSummary[0]?.percentage) webValue = webSummary[0]?.percentage
3636
if (mailSummary[0]?.percentage) mailValue = mailSummary[0]?.percentage
3737

38+
if (webValue % 1 >= 0.5) {
39+
webValue = Math.ceil(webValue)
40+
} else {
41+
webValue = Math.floor(webValue)
42+
}
43+
44+
if (mailValue % 1 >= 0.5) {
45+
mailValue = Math.ceil(mailValue)
46+
} else {
47+
mailValue = Math.floor(mailValue)
48+
}
49+
3850
return (
3951
<ListItem {...rest}>
4052
<PseudoBox

‎frontend/src/UserCard.js‎

Lines changed: 2 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,11 @@
11
import React from 'react'
22
import { Badge, Box, Text, PseudoBox, Stack } from '@chakra-ui/core'
33
import { Trans } from '@lingui/macro'
4-
// import { useHistory } from 'react-router-dom'
54
import { bool, string } from 'prop-types'
65

76
export function UserCard({ userName, tfa, role }) {
8-
// const history = useHistory()
97
return (
10-
<PseudoBox
11-
width="100%"
12-
// onClick={() => {
13-
// history.push({
14-
// pathname: '/user',
15-
// state: { detail: userName },
16-
// })
17-
// }}
18-
// _hover={{ borderColor: 'gray.200', bg: 'gray.200' }}
19-
p="8"
20-
as="button"
21-
>
8+
<PseudoBox width="100%" p="8">
229
<Stack isInline align="center" mb={['1', '0']}>
2310
<Box>
2411
<Text fontSize="md">{userName}</Text>
@@ -38,7 +25,7 @@ export function UserCard({ userName, tfa, role }) {
3825
)}
3926
{tfa !== null && (
4027
<Box>
41-
<Badge variantColor={tfa ? 'green' : 'red'}>
28+
<Badge variant="solid" variantColor={tfa ? 'green' : 'red'}>
4229
<Trans>2FA Validated</Trans>
4330
</Badge>
4431
</Box>

‎frontend/src/UserPage.js‎

Lines changed: 30 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,14 @@
11
import React from 'react'
2-
import { useHistory, useLocation, Link as RouteLink } from 'react-router-dom'
2+
import { useHistory, useLocation } from 'react-router-dom'
33
import { string } from 'prop-types'
44
import {
55
Stack,
66
SimpleGrid,
77
Divider,
88
Heading,
99
Icon,
10-
Text,
1110
Badge,
12-
Link,
11+
Box,
1312
} from '@chakra-ui/core'
1413
import { useQuery } from '@apollo/client'
1514
import { useUserState } from './UserState'
@@ -22,29 +21,12 @@ import EditableUserPassword from './EditableUserPassword'
2221
import { TrackerButton } from './TrackerButton'
2322
import { LoadingMessage } from './LoadingMessage'
2423
import { ErrorFallbackMessage } from './ErrorFallbackMessage'
25-
import { ErrorBoundary } from 'react-error-boundary'
26-
import { ListOf } from './ListOf'
2724

2825
export default function UserPage() {
2926
const location = useLocation()
3027
const history = useHistory()
3128
const { currentUser } = useUserState()
3229

33-
// const {
34-
// loading: queryUserLoading,
35-
// error: queryUserError,
36-
// data: queryUserData,
37-
// } = useQuery(QUERY_USER, {
38-
// context: {
39-
// headers: {
40-
// authorization: currentUser.jwt,
41-
// },
42-
// },
43-
// variables: {
44-
// userName: currentUser.userName,
45-
// },
46-
// })
47-
4830
const {
4931
loading: queryUserLoading,
5032
error: queryUserError,
@@ -69,10 +51,6 @@ export default function UserPage() {
6951
return <ErrorFallbackMessage error={queryUserError} />
7052
}
7153

72-
const affiliations = queryUserData.userPage.affiliations.edges.map(
73-
(e) => e.node,
74-
)
75-
7654
return (
7755
<SimpleGrid columns={{ md: 1, lg: 2 }} spacing="60px" width="100%">
7856
<Stack p={25} spacing={4}>
@@ -95,56 +73,37 @@ export default function UserPage() {
9573
/>
9674
</Stack>
9775

98-
<Stack Stack p={25} spacing="4">
99-
<Heading as="h1" size="lg" textAlign="left">
100-
<Trans>Organizations</Trans>
101-
</Heading>
102-
<ListOf
103-
elements={affiliations}
104-
ifEmpty={() => <Trans>No Organizations</Trans>}
105-
mb="4"
106-
>
107-
{({ permission, organization }, index) => (
108-
<ErrorBoundary key={`userpage-errorbound-${index}`} FallbackComponent={ErrorFallbackMessage}>
109-
<Stack
110-
mb="2"
111-
flexDirection={['column', 'row']}
112-
align={['flex-start', 'center']}
113-
key={`${organization.slug}:${index}`}
114-
>
115-
<Stack isInline align="center" w={['100%', '70%']}>
116-
<Link
117-
as={RouteLink}
118-
to={`/organizations/${organization.slug}`}
119-
>
120-
<Text fontWeight="semibold" isTruncated mr="1">
121-
{organization.name}
122-
</Text>
123-
</Link>
124-
{organization.verified && (
125-
<Icon name="check-circle" color="blue.500" />
126-
)}
127-
</Stack>
128-
<Stack isInline align="center">
129-
<Text fontWeight="bold">Role:</Text>
130-
<Badge
131-
color="primary"
132-
bg="transparent"
133-
borderColor="primary"
134-
borderWidth="1px"
135-
>
136-
{permission}
137-
</Badge>
138-
</Stack>
139-
<Divider />
140-
</Stack>
141-
</ErrorBoundary>
142-
)}
143-
</ListOf>
144-
<Divider />
76+
<Stack p={25} spacing="4">
14577
<Heading as="h1" size="lg" textAlign="left">
14678
<Trans>Account Details</Trans>
14779
</Heading>
80+
<Box>
81+
<Icon
82+
size="icons.lg"
83+
name={queryUserData.userPage.tfaValidated ? 'check' : 'close'}
84+
color={
85+
queryUserData.userPage.tfaValidated ? 'green.500' : 'red.500'
86+
}
87+
pr={2}
88+
/>
89+
<Badge variant="outline" color="gray.900">
90+
<Trans>2FA Validated</Trans>
91+
</Badge>
92+
</Box>
93+
<Box>
94+
<Icon
95+
size="icons.lg"
96+
name={queryUserData.userPage.emailValidated ? 'check' : 'close'}
97+
color={
98+
queryUserData.userPage.emailValidated ? 'green.500' : 'red.500'
99+
}
100+
pr={2}
101+
/>
102+
<Badge variant="outline" color="gray.900">
103+
<Trans>Email Validated</Trans>
104+
</Badge>
105+
</Box>
106+
148107
<TrackerButton
149108
w={['100%', '50%']}
150109
variant="primary"

‎frontend/src/__tests__/UserCard.test.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ describe('<UserCard />', () => {
3737

3838
const tfaBadge = getByText(/2FA Validated/i)
3939
expect(tfaBadge).toBeDefined()
40-
expect(tfaBadge).toHaveStyle('background-color: rgb(198, 246, 213)')
40+
expect(tfaBadge).toHaveStyle('background-color: rgb(56, 161, 105)')
4141
})
4242

4343
it('badge is red when TwoFactor value is false', async () => {
@@ -59,6 +59,6 @@ describe('<UserCard />', () => {
5959

6060
const tfaBadge = getByText(/2FA Validated/i)
6161
expect(tfaBadge).toBeDefined()
62-
expect(tfaBadge).toHaveStyle('background-color: rgb(254, 215, 215)')
62+
expect(tfaBadge).toHaveStyle('background-color: rgb(229, 62, 62)')
6363
})
6464
})

‎frontend/src/__tests__/UserList.test.js‎

Lines changed: 0 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -60,56 +60,6 @@ describe('<UserList />', () => {
6060
)
6161
})
6262

63-
// it('redirects to userPage when a list element is clicked', async () => {
64-
// // create a history object and inject it so we can inspect it afterwards
65-
// // for the side effects of our form submission (a redirect to /!).
66-
// const history = createMemoryHistory({
67-
// initialEntries: ['/user-list'],
68-
// initialIndex: 0,
69-
// })
70-
71-
// // Set the inital history item to user-list
72-
// const { getByText } = render(
73-
// <UserStateProvider
74-
// initialState={{
75-
// userName: 'testuser@testemail.gc.ca',
76-
// jwt: 'string',
77-
// tfa: false,
78-
// }}
79-
// >
80-
// <ThemeProvider theme={theme}>
81-
// <I18nProvider i18n={i18n}>
82-
// <Router history={history}>
83-
// <MockedProvider>
84-
// <UserList
85-
// permission={'SUPER_ADMIN'}
86-
// userListData={data.findOrganizationBySlug.affiliations}
87-
// orgId={data.findOrganizationBySlug.id}
88-
// orgName={data.findOrganizationBySlug.name}
89-
// />
90-
// </MockedProvider>
91-
// </Router>
92-
// </I18nProvider>
93-
// </ThemeProvider>
94-
// </UserStateProvider>,
95-
// )
96-
97-
// const foundUserCard = await waitFor(() =>
98-
// getByText(
99-
// data.findOrganizationBySlug.affiliations.edges[0].node.user.userName,
100-
// ),
101-
// )
102-
103-
// const leftClick = { button: 0 }
104-
// fireEvent.click(foundUserCard, leftClick)
105-
// // default `button` property for click events is set to `0` which is a left click.
106-
107-
// await waitFor(() => {
108-
// // Path should be '/user', so expect that value
109-
// expect(history.location.pathname).toEqual('/user')
110-
// })
111-
// })
112-
11363
describe('Admin profile userlist', () => {
11464
it('updateUserRole elements render', async () => {
11565
const history = createMemoryHistory({

‎frontend/src/__tests__/UserPage.test.js‎

Lines changed: 0 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,6 @@ describe('<UserPage />', () => {
2626
{
2727
request: {
2828
query: QUERY_CURRENT_USER,
29-
// variables: { userName: userName },
3029
},
3130
result: {
3231
data: {
@@ -37,23 +36,6 @@ describe('<UserPage />', () => {
3736
preferredLang: 'ENGLISH',
3837
tfaValidated: false,
3938
emailValidated: false,
40-
affiliations: {
41-
edges: [
42-
{
43-
node: {
44-
permission: 'ADMIN',
45-
organization: {
46-
id: 'VXNlckxpc3RJdGVtOig0LCAzKQ==',
47-
acronym: 'CSE',
48-
name: 'Test Org',
49-
slug: 'test-org',
50-
verified: false,
51-
domainCount: 3,
52-
},
53-
},
54-
},
55-
],
56-
},
5739
},
5840
},
5941
},

‎frontend/src/fixtures/dmarcReportSummaryTable.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ export const rawDmarcReportSummaryTableData = {
88
domain: 'domain1.ca',
99
dmarcSummaryByPeriod: {
1010
month: 'LAST30DAYS',
11-
year: '2020',
11+
year: '2021',
1212
domain: 'domain1.ca',
1313
categoryPercentages: {
1414
failPercentage: 31.5,
@@ -31,7 +31,7 @@ export const rawDmarcReportSummaryTableData = {
3131
domain: 'domain2.ca',
3232
dmarcSummaryByPeriod: {
3333
month: 'LAST30DAYS',
34-
year: '2020',
34+
year: '2021',
3535
domain: 'domain2.ca',
3636
categoryPercentages: {
3737
failPercentage: 31.5,

‎frontend/src/graphql/queries.js‎

Lines changed: 0 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -448,19 +448,6 @@ export const QUERY_CURRENT_USER = gql`
448448
preferredLang
449449
tfaValidated
450450
emailValidated
451-
affiliations {
452-
edges {
453-
node {
454-
permission
455-
organization {
456-
id
457-
name
458-
slug
459-
verified
460-
}
461-
}
462-
}
463-
}
464451
}
465452
}
466453
`

0 commit comments

Comments
 (0)