* Install and configure XState
* userXService - typegen not working yet
* Lint, fix error transitions
* Lint
* Change initial state to handle loss of state
* Fix gitignore
* Fix types by hook or by crook
* Use xservice in all pages
* Glue/visual component separation
* Fix dependency merge
* Lint
* Remove UserContext
* Remove inspector
* Add typegen command to site/out
* Fix index page redirects
* DRY up nav and redirects
* Moves based on merge
* Moving Page helpers into Page dir
* Move xservice into src, update script
* Move and storybook navbarview
* Update docs
* Install MSW
* Reorganization, with apologies
* Missed spots
* Add mock handlers
* Configure jest for msw
* Fix typos
* Shift unit test to NavbarView
* Fix test types
* Rename NavbarView test
* Attempt at test, wip
* Fix config
* Be logged out, only warn
* Conditionally show text to help test
* Use a Context for MSW's sake
* mocks -> test_helpers
* Enable dev tools
* Format
* Fix import
* Fixes
* Lint
* run typegen postinstall
Co-authored-by: Bryan Phelps <bryan@coder.com>
Fixes#452
When the empty state is rendered with a non-textual element (which it turns out all our current empty states are, because they have a `<button />` component as a call to action), this noisy error log was showing up in the `console`:
```
Warning: validateDOMNesting(...): <div> cannot appear as a descendant of <p>.
at div
at div
at p
at Typography (webpack-internal:///./node_modules/@material-ui/core/esm/Typography/Typography.js:166:28)
at WithStyles (webpack-internal:///./node_modules/@material-ui/styles/esm/withStyles/withStyles.js:64:31)
at div
at StyledComponent (webpack-internal:///./node_modules/@material-ui/styles/esm/styled/styled.js:95:28)
at EmptyState (webpack-internal:///./src/components/EmptyState/index.tsx:47:25)
...
at ProjectsPage (webpack-internal:///./src/pages/projects/index.tsx:37:18)
at Routes (webpack-internal:///./node_modules/react-router/index.js:275:5)
at ThemeProvider (webpack-internal:///./node_modules/@material-ui/styles/esm/ThemeProvider/ThemeProvider.js:44:24)
at UserProvider (webpack-internal:///./src/contexts/UserContext.tsx💯55)
at SWRConfig$1 (webpack-internal:///./node_modules/swr/dist/index.esm.js:501:23)
at Router (webpack-internal:///./node_modules/react-router/index.js:209:15)
at BrowserRouter (webpack-internal:///./node_modules/react-router-dom/index.js:118:5)
at App
```
The issue was that the `description` prop could either be a `string` or an actual `React` component, but was always rendered as a child of a `<Typography />` component. The `<Typography>` component internally renders as a `<p>`, which is not valid to nest `<div>`s inside.
The fix is to not nest inside a `<Typography />` block, but an actual `<div />`.
