diff --git a/frontend/schema.faker.graphql b/frontend/schema.faker.graphql
index d37bf20c0c..8528bae360 100644
--- a/frontend/schema.faker.graphql
+++ b/frontend/schema.faker.graphql
@@ -735,6 +735,16 @@ type Query {
An api endpoint that will send a verification email to a given email address.
"""
sendValidationEmail(email: EmailAddress!): NotificationEmail
+
+ """
+ An api endpoint that will be used to populate a userList component in the front end.
+ """
+ userList(organizaion: Acronym!): UserList
+
+ """
+ An api endpoint that will be used to populate a userPage component in the front end.
+ """
+ userPage(userName: EmailAddress!): UserPage
queryDmarcReport(reportId: String!): QueryDmarcReport
}
@@ -1093,6 +1103,73 @@ type WWWScanEdge {
cursor: String!
}
+"""
+This custom object is used to populate the userList componenet in the front end.
+"""
+type UserList {
+ """ Indicates which organization this list is being queried for."""
+ organization: Acronym!
+
+ """Pagination data for this connection."""
+ pageInfo: PageInfo!
+
+ """Contains the nodes in this connection. Aka: A list of userItems that will make up the list on the front end."""
+ edges: [UserItemEdge]!
+}
+
+type UserListItem implements Node {
+ """The ID of the object."""
+ id: ID!
+
+ """ The users email address or userName """
+ userName: EmailAddress! @fake(type: email)
+
+ """ The users display name"""
+ displayName: String! @fake(type: firstName)
+
+ """ Indicates wether or not this user has enabled two factor authentication"""
+ tfa: Boolean! @examples(values: [true, false])
+
+ """ Indicates if this user is an admin of the organization specified in UserList query."""
+ admin: Boolean! @examples(values: [true, false])
+}
+
+"""A Relay edge containing a `UserItem` and its cursor."""
+type UserItemEdge {
+ """The item at the end of the edge"""
+ node: UserListItem!
+
+ """A cursor for use in pagination"""
+ cursor: String!
+}
+
+"""
+This custom gql object is used to populate a userPage component in the front end.
+"""
+type UserPage{
+ """ The users email address or userName"""
+ userName: EmailAddress! @fake(type: email)
+
+ """ The users display name"""
+ displayName: String! @fake(type: firstName)
+
+ """ Indicates the preferred language of this user."""
+ lang: String! @examples(values: ["English, "French])
+
+ """ Indicates wether or not this user has enabled two factor authentication"""
+ tfa: Boolean! @examples(values: [true, false])
+
+ """ Indicates if this user is an admin of the organization specified."""
+ userAffiliations: [UserPageAffiliations]!
+}
+
+type UserPageAffiliations{
+ """ Indicates if this user is an admin of the organization"""
+ admin: Boolean! @examples(values: [true, false])
+
+ """ Indicates which organization this users data is being displayed for."""
+ organization: Acronym! @examples(values: ["GC", "ABC", "ASDF", "NSTIR", "BC"])
+
"""A custom type used to query a DmarcReport for the front end."""
type QueryDmarcReport {
diff --git a/frontend/src/UserCard.js b/frontend/src/UserCard.js
new file mode 100644
index 0000000000..5eea8f8325
--- /dev/null
+++ b/frontend/src/UserCard.js
@@ -0,0 +1,58 @@
+import React from 'react'
+
+import { Badge, Box, Text, PseudoBox } from '@chakra-ui/core'
+import { Trans } from '@lingui/macro'
+
+import { useHistory } from 'react-router-dom'
+
+import { bool, string } from 'prop-types'
+
+export function UserCard(props) {
+ const history = useHistory()
+ return (
+ {
+ history.push({
+ pathname: '/user',
+ state: { detail: props.userName },
+ })
+ }}
+ _hover={{ borderColor: 'gray.200', bg: 'gray.200' }}
+ p="30px"
+ >
+
+
+ {props.displayName}
+
+
+
+
+ {props.userName}
+
+
+
+
+ TwoFactor
+
+
+ Admin
+
+
+
+
+ )
+}
+
+UserCard.propTypes = {
+ displayName: string.isRequired,
+ userName: string.isRequired,
+ admin: bool.isRequired,
+ tfa: bool.isRequired,
+}
diff --git a/frontend/src/UserList.js b/frontend/src/UserList.js
index 85cabeabb9..76a4065c46 100644
--- a/frontend/src/UserList.js
+++ b/frontend/src/UserList.js
@@ -1,81 +1,30 @@
import React from 'react'
import {
- Badge,
Stack,
SimpleGrid,
Divider,
- Box,
- Text,
Button,
Icon,
InputGroup,
InputLeftElement,
Input,
- PseudoBox,
} from '@chakra-ui/core'
import { Trans } from '@lingui/macro'
-import gql from 'graphql-tag'
+import { QUERY_USERLIST } from './graphql/queries'
import { useQuery } from '@apollo/react-hooks'
import { PaginationButtons } from './PaginationButtons'
+import { UserCard } from './UserCard'
export function UserList() {
// This function generates the URL when the page loads
- const { loading, error, data } = useQuery(
- gql`
- {
- user {
- affiliations {
- edges {
- node {
- organization {
- acronym
- affiliatedUsers {
- pageInfo {
- hasNextPage
- hasPreviousPage
- startCursor
- endCursor
- }
- edges {
- node {
- id
- user {
- userName
- displayName
- tfa
- affiliations {
- edges {
- node {
- id
- organization {
- acronym
- }
- permission
- }
- }
- }
- }
- }
- }
- }
- }
- }
- }
- }
- }
- }
- `,
- )
+ const { loading, error, data } = useQuery(QUERY_USERLIST)
if (loading) {
return
Loading...
}
if (error) {
- console.log(error)
- }
- if (data) {
- console.log(data)
+ return