FE User Page Fix

frontend/src/App.js

@@ -10,7 +10,7 @@ import { Footer } from './Footer'
 import { Navigation } from './Navigation'
 import { Flex, Link, CSSReset, useToast, Box } from '@chakra-ui/core'
 import { SkipLink } from './SkipLink'
-import { TwoFactorNotificationBar } from './TwoFactorNotificationBar'
+// import { TwoFactorNotificationBar } from './TwoFactorNotificationBar'
 import { useUserState } from './UserState'
 import { RouteIf } from './RouteIf'
 import { ErrorBoundary } from 'react-error-boundary'
@@ -70,7 +70,7 @@ export default function App() {
             </Link>
           )}
 
-          {1 && (
+          {isLoggedIn() && (
             <Link to="/dmarc-summaries">
               <Trans>DMARC Report</Trans>
             </Link>
@@ -113,7 +113,7 @@ export default function App() {
           )}
         </Navigation>
 
-        {isLoggedIn() && !currentUser.tfa && <TwoFactorNotificationBar />}
+        {/* {isLoggedIn() && !currentUser.tfa && <TwoFactorNotificationBar />} */}
         <Main>
           <Suspense fallback={<div>Loading...</div>}>
             <Switch>

frontend/src/DmarcByDomainPage.js

@@ -47,13 +47,7 @@ export default function DmarcByDomainPage() {
     relayRoot: 'findMyDomains',
   })
 
-  // TODO: Properly handle these errors
-  if (error)
-    return (
-      <Heading as="h3" size="lg" textAlign="center">
-        <Trans>Error while querying for DMARC report summary table</Trans>
-      </Heading>
-    )
+  if (error) return <ErrorFallbackMessage error={error} />
 
   // DMARC Summary Table setup
   let tableDisplay

frontend/src/OrganizationCard.js

@@ -35,6 +35,18 @@ export function OrganizationCard({
   if (webSummary[0]?.percentage) webValue = webSummary[0]?.percentage
   if (mailSummary[0]?.percentage) mailValue = mailSummary[0]?.percentage
 
+  if (webValue % 1 >= 0.5) {
+    webValue = Math.ceil(webValue)
+  } else {
+    webValue = Math.floor(webValue)
+  }
+
+  if (mailValue % 1 >= 0.5) {
+    mailValue = Math.ceil(mailValue)
+  } else {
+    mailValue = Math.floor(mailValue)
+  }
+
   return (
     <ListItem {...rest}>
       <PseudoBox

frontend/src/UserCard.js

@@ -1,24 +1,11 @@
 import React from 'react'
 import { Badge, Box, Text, PseudoBox, Stack } from '@chakra-ui/core'
 import { Trans } from '@lingui/macro'
-// import { useHistory } from 'react-router-dom'
 import { bool, string } from 'prop-types'
 
 export function UserCard({ userName, tfa, role }) {
-  // const history = useHistory()
   return (
-    <PseudoBox
-      width="100%"
-      // onClick={() => {
-      //   history.push({
-      //     pathname: '/user',
-      //     state: { detail: userName },
-      //   })
-      // }}
-      // _hover={{ borderColor: 'gray.200', bg: 'gray.200' }}
-      p="8"
-      as="button"
-    >
+    <PseudoBox width="100%" p="8">
       <Stack isInline align="center" mb={['1', '0']}>
         <Box>
           <Text fontSize="md">{userName}</Text>
@@ -38,7 +25,7 @@ export function UserCard({ userName, tfa, role }) {
         )}
         {tfa !== null && (
           <Box>
-            <Badge variantColor={tfa ? 'green' : 'red'}>
+            <Badge variant="solid" variantColor={tfa ? 'green' : 'red'}>
               <Trans>2FA Validated</Trans>
             </Badge>
           </Box>

frontend/src/UserPage.js

@@ -1,15 +1,14 @@
 import React from 'react'
-import { useHistory, useLocation, Link as RouteLink } from 'react-router-dom'
+import { useHistory, useLocation } from 'react-router-dom'
 import { string } from 'prop-types'
 import {
   Stack,
   SimpleGrid,
   Divider,
   Heading,
   Icon,
-  Text,
   Badge,
-  Link,
+  Box,
 } from '@chakra-ui/core'
 import { useQuery } from '@apollo/client'
 import { useUserState } from './UserState'
@@ -22,29 +21,12 @@ import EditableUserPassword from './EditableUserPassword'
 import { TrackerButton } from './TrackerButton'
 import { LoadingMessage } from './LoadingMessage'
 import { ErrorFallbackMessage } from './ErrorFallbackMessage'
-import { ErrorBoundary } from 'react-error-boundary'
-import { ListOf } from './ListOf'
 
 export default function UserPage() {
   const location = useLocation()
   const history = useHistory()
   const { currentUser } = useUserState()
 
-  // const {
-  //   loading: queryUserLoading,
-  //   error: queryUserError,
-  //   data: queryUserData,
-  // } = useQuery(QUERY_USER, {
-  //   context: {
-  //     headers: {
-  //       authorization: currentUser.jwt,
-  //     },
-  //   },
-  //   variables: {
-  //     userName: currentUser.userName,
-  //   },
-  // })
-
   const {
     loading: queryUserLoading,
     error: queryUserError,
@@ -69,10 +51,6 @@ export default function UserPage() {
     return <ErrorFallbackMessage error={queryUserError} />
   }
 
-  const affiliations = queryUserData.userPage.affiliations.edges.map(
-    (e) => e.node,
-  )
-
   return (
     <SimpleGrid columns={{ md: 1, lg: 2 }} spacing="60px" width="100%">
       <Stack p={25} spacing={4}>
@@ -95,56 +73,37 @@ export default function UserPage() {
         />
       </Stack>
 
-      <Stack Stack p={25} spacing="4">
-        <Heading as="h1" size="lg" textAlign="left">
-          <Trans>Organizations</Trans>
-        </Heading>
-        <ListOf
-          elements={affiliations}
-          ifEmpty={() => <Trans>No Organizations</Trans>}
-          mb="4"
-        >
-          {({ permission, organization }, index) => (
-            <ErrorBoundary key={`userpage-errorbound-${index}`} FallbackComponent={ErrorFallbackMessage}>
-              <Stack
-                mb="2"
-                flexDirection={['column', 'row']}
-                align={['flex-start', 'center']}
-                key={`${organization.slug}:${index}`}
-              >
-                <Stack isInline align="center" w={['100%', '70%']}>
-                  <Link
-                    as={RouteLink}
-                    to={`/organizations/${organization.slug}`}
-                  >
-                    <Text fontWeight="semibold" isTruncated mr="1">
-                      {organization.name}
-                    </Text>
-                  </Link>
-                  {organization.verified && (
-                    <Icon name="check-circle" color="blue.500" />
-                  )}
-                </Stack>
-                <Stack isInline align="center">
-                  <Text fontWeight="bold">Role:</Text>
-                  <Badge
-                    color="primary"
-                    bg="transparent"
-                    borderColor="primary"
-                    borderWidth="1px"
-                  >
-                    {permission}
-                  </Badge>
-                </Stack>
-                <Divider />
-              </Stack>
-            </ErrorBoundary>
-          )}
-        </ListOf>
-        <Divider />
+      <Stack p={25} spacing="4">
         <Heading as="h1" size="lg" textAlign="left">
           <Trans>Account Details</Trans>
         </Heading>
+        <Box>
+          <Icon
+            size="icons.lg"
+            name={queryUserData.userPage.tfaValidated ? 'check' : 'close'}
+            color={
+              queryUserData.userPage.tfaValidated ? 'green.500' : 'red.500'
+            }
+            pr={2}
+          />
+          <Badge variant="outline" color="gray.900">
+            <Trans>2FA Validated</Trans>
+          </Badge>
+        </Box>
+        <Box>
+          <Icon
+            size="icons.lg"
+            name={queryUserData.userPage.emailValidated ? 'check' : 'close'}
+            color={
+              queryUserData.userPage.emailValidated ? 'green.500' : 'red.500'
+            }
+            pr={2}
+          />
+          <Badge variant="outline" color="gray.900">
+            <Trans>Email Validated</Trans>
+          </Badge>
+        </Box>
+
         <TrackerButton
           w={['100%', '50%']}
           variant="primary"

frontend/src/__tests__/UserCard.test.js

@@ -37,7 +37,7 @@ describe('<UserCard />', () => {
 
     const tfaBadge = getByText(/2FA Validated/i)
     expect(tfaBadge).toBeDefined()
-    expect(tfaBadge).toHaveStyle('background-color: rgb(198, 246, 213)')
+    expect(tfaBadge).toHaveStyle('background-color: rgb(56, 161, 105)')
   })
 
   it('badge is red when TwoFactor value is false', async () => {
@@ -59,6 +59,6 @@ describe('<UserCard />', () => {
 
     const tfaBadge = getByText(/2FA Validated/i)
     expect(tfaBadge).toBeDefined()
-    expect(tfaBadge).toHaveStyle('background-color: rgb(254, 215, 215)')
+    expect(tfaBadge).toHaveStyle('background-color: rgb(229, 62, 62)')
   })
 })

frontend/src/__tests__/UserList.test.js

@@ -60,56 +60,6 @@ describe('<UserList />', () => {
     )
   })
 
-  // it('redirects to userPage when a list element is clicked', async () => {
-  //   // create a history object and inject it so we can inspect it afterwards
-  //   // for the side effects of our form submission (a redirect to /!).
-  //   const history = createMemoryHistory({
-  //     initialEntries: ['/user-list'],
-  //     initialIndex: 0,
-  //   })
-
-  //   // Set the inital history item to user-list
-  //   const { getByText } = render(
-  //     <UserStateProvider
-  //       initialState={{
-  //         userName: 'testuser@testemail.gc.ca',
-  //         jwt: 'string',
-  //         tfa: false,
-  //       }}
-  //     >
-  //       <ThemeProvider theme={theme}>
-  //         <I18nProvider i18n={i18n}>
-  //           <Router history={history}>
-  //             <MockedProvider>
-  //               <UserList
-  //                 permission={'SUPER_ADMIN'}
-  //                 userListData={data.findOrganizationBySlug.affiliations}
-  //                 orgId={data.findOrganizationBySlug.id}
-  //                 orgName={data.findOrganizationBySlug.name}
-  //               />
-  //             </MockedProvider>
-  //           </Router>
-  //         </I18nProvider>
-  //       </ThemeProvider>
-  //     </UserStateProvider>,
-  //   )
-
-  //   const foundUserCard = await waitFor(() =>
-  //     getByText(
-  //       data.findOrganizationBySlug.affiliations.edges[0].node.user.userName,
-  //     ),
-  //   )
-
-  //   const leftClick = { button: 0 }
-  //   fireEvent.click(foundUserCard, leftClick)
-  //   // default `button` property for click events is set to `0` which is a left click.
-
-  //   await waitFor(() => {
-  //     // Path should be '/user', so expect that value
-  //     expect(history.location.pathname).toEqual('/user')
-  //   })
-  // })
-
   describe('Admin profile userlist', () => {
     it('updateUserRole elements render', async () => {
       const history = createMemoryHistory({

frontend/src/__tests__/UserPage.test.js

@@ -26,7 +26,6 @@ describe('<UserPage />', () => {
     {
       request: {
         query: QUERY_CURRENT_USER,
-        // variables: { userName: userName },
       },
       result: {
         data: {
@@ -37,23 +36,6 @@ describe('<UserPage />', () => {
             preferredLang: 'ENGLISH',
             tfaValidated: false,
             emailValidated: false,
-            affiliations: {
-              edges: [
-                {
-                  node: {
-                    permission: 'ADMIN',
-                    organization: {
-                      id: 'VXNlckxpc3RJdGVtOig0LCAzKQ==',
-                      acronym: 'CSE',
-                      name: 'Test Org',
-                      slug: 'test-org',
-                      verified: false,
-                      domainCount: 3,
-                    },
-                  },
-                },
-              ],
-            },
           },
         },
       },

frontend/src/fixtures/dmarcReportSummaryTable.js

@@ -8,7 +8,7 @@ export const rawDmarcReportSummaryTableData = {
             domain: 'domain1.ca',
             dmarcSummaryByPeriod: {
               month: 'LAST30DAYS',
-              year: '2020',
+              year: '2021',
               domain: 'domain1.ca',
               categoryPercentages: {
                 failPercentage: 31.5,
@@ -31,7 +31,7 @@ export const rawDmarcReportSummaryTableData = {
             domain: 'domain2.ca',
             dmarcSummaryByPeriod: {
               month: 'LAST30DAYS',
-              year: '2020',
+              year: '2021',
               domain: 'domain2.ca',
               categoryPercentages: {
                 failPercentage: 31.5,

frontend/src/graphql/queries.js

@@ -448,19 +448,6 @@ export const QUERY_CURRENT_USER = gql`
       preferredLang
       tfaValidated
       emailValidated
-      affiliations {
-        edges {
-          node {
-            permission
-            organization {
-              id
-              name
-              slug
-              verified
-            }
-          }
-        }
-      }
     }
   }
 `