feat: Create user page (#1197)

* Add button and route

* Hook up api

* Lint

* Add basic form

* Get users on page mount

* Make cancel work

* Creating -> idle bc users page refetches

* Import as TypesGen

* Handle api errors

* Lint

* Add handler

* Add FormFooter

* Add FullPageForm

* Lint

* Better form, error, stories

bug in formErrors story

* Make detail optional

* Use Language

* Remove detail prop

* Add back autoFocus

* Remove displayError, use displaySuccess

* Lint, export Language

* Tests - wip

* Fix cancel tests

* Switch back to mock

* Add navigate to xservice

Doesn't work in test

* Move error type predicate to xservice

* Lint

* Switch to using creation mode in XState

still problems in tests

* Lint

* Lint

* Lint

* Revert "Switch to using creation mode in XState"

This reverts commit cf8442fa4b.

* Give XService a navigate action

* Add missing validation messages

* Fix XState warning

* Fix tests

IRL is broken bc I need to send org id

* Pretend user has org id and make it work

* Format

* Lint

* Switch to org ids array

* Skip lines between tests

Co-authored-by: G r e y <grey@coder.com>

* Punctuate notification messages

Co-authored-by: G r e y <grey@coder.com>
This commit is contained in:
Presley Pizzo
2022-04-28 16:32:23 -04:00
committed by GitHub
parent 4efde58726
commit c16f105727
17 changed files with 412 additions and 23 deletions

View File

@ -7,18 +7,25 @@ import { UsersTable } from "../../components/UsersTable/UsersTable"
export const Language = {
pageTitle: "Users",
pageSubtitle: (pager: Pager | undefined): string => (pager ? `${pager.total} total` : ""),
newUserButton: "New User",
}
export interface UsersPageViewProps {
users: UserResponse[]
pager?: Pager
openUserCreationDialog: () => void
}
export const UsersPageView: React.FC<UsersPageViewProps> = ({ users, pager }) => {
export const UsersPageView: React.FC<UsersPageViewProps> = ({ users, pager, openUserCreationDialog }) => {
const styles = useStyles()
return (
<div className={styles.flexColumn}>
<Header title={Language.pageTitle} subTitle={Language.pageSubtitle(pager)} />
<Header
title={Language.pageTitle}
subTitle={Language.pageSubtitle(pager)}
action={{ text: Language.newUserButton, onClick: openUserCreationDialog }}
/>
<UsersTable users={users} />
</div>
)