* feat: Add web terminal with reconnecting TTYs
This adds a web terminal that can reconnect to resume sessions!
No more disconnects, and no more bad bufferring!
* Add xstate service
* Add the webpage for accessing a web terminal
* Add terminal page tests
* Use Ticker instead of Timer
* Active Windows mode on Windows
Summary:
When `maxWorkers` is high, there's a bug in `jest` that causes OOM kills.
Unfortunately, CI is experiencing this as well as local. For now, the best solution
is just reducing `maxWorkers`.
Resolves: #1004
Summary:
This commit is a bit of a shotgun fix for various project settings.
Realistically, they could've been separate commits, but this is
convenience for just getting things into a green state to unblock
further work.
Details:
- Use our version of TS in vscode plugins
- organize vscode/settings.json
- fix tsconfig.test and tsconfig.prod (removes errors in test files)
- only use prod tsconfig in webpack
- point .eslintrc to both test and prod configs
- cleanup storybook
- running eslint in my workspace was OOMing. I configured
maxWorkers like we had in v1 to fix this.
- remove .storybook from code coverage
- remove .js files from code coverage --> after moving away
from Next.js, we don't allowJS in our tsconfig anymore. We only
use JS for configurations, it's not allowed in src code!
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 />`.
Fix for #348 - migrate our NextJS project to a pure webpack project w/ a single bundle
- [x] Switch from `next/link` to `react-router-dom`'s link
> This part was easy - just change the import to `import { Link } from "react-router-dom"` and `<Link href={...} />` to `<Link to={...} />`
- [x] Switch from `next/router` to `react-router-dom`'s paradigms (`useNavigation`, `useLocation`, and `useParams`)
> `router.push` can be converted to `navigate(...)` (provided by the `useNavigate` hook)
> `router.replace` can be converted `navigate(..., {replace: true})`
> Query parameters (`const { query } = useRouter`) can be converted to `const query = useParams()`)
- [x] Implement client-side routing with `react-router-dom`
> Parameterized routes in NextJS like `projects/[organization]/[project]` would look like:
> ```
> <Route path="projects">
> <Route path=":organization/:project">
> <Route index element={<ProjectPage />} />
> </Route>
> </Route>
> ```
I've hooked up a `build:analyze` command that spins up a server to show the bundle size:
<img width="1303" alt="image" src="https://user-images.githubusercontent.com/88213859/157496889-87c5fdcd-fad1-4f2e-b7b6-437aebf99641.png">
The bundle looks OK, but there are some opportunities for improvement - the heavy-weight dependencies, like React, ReactDOM, Material-UI, and lodash could be brought in via a CDN: https://stackoverflow.com/questions/50645796/how-to-import-reactjs-material-ui-using-a-cdn-through-webpacks-externals
This brings an initial E2E test (really, an integration test - it's only running the server locally, as opposed to against a deployment - but it'd be easy to point playwright to a deployment).
Demo gif:
This test exercises a minimal flow for login:
- Run the `coderd` binary to start a server on 3000
- Create an initial user as part of setup
- Go through the login flow and verify we land on the projects page
It will be useful to have to ensure that #360 doesn't introduce a regression in the login flow
Future E2E tests that would be useful:
- Create a project & verify it shows in the UI
- Create a workspace and verify it shows in the UI
Noticed while running through the build steps (`make build`) that we were getting some lint warnings that weren't blocking build:
```sh
./pages/workspaces/[user]/[workspace].tsx
32:58 Warning: Unexpected any. Specify a different type. @typescript-eslint/no-explicit-any
32:96 Warning: Unexpected any. Specify a different type. @typescript-eslint/no-explicit-any
./components/Form/FormCloseButton.tsx
26:6 Warning: React Hook useEffect has a missing dependency: 'onClose'. Either include it or remove the dependency array. If 'onClose' changes too often, find the parent component that defines it and wrap that definition in useCallback. react-hooks/exhaustive-deps
./components/Navbar/UserDropdown.tsx
38:14 Warning: Unnecessary conditional, value is always truthy. @typescript-eslint/no-unnecessary-condition
68:10 Warning: Unnecessary conditional, value is always truthy. @typescript-eslint/no-unnecessary-condition
./components/Redirect.tsx
20:6 Warning: React Hook useEffect has missing dependencies: 'router' and 'to'. Either include them or remove the dependency array. react-hooks/exhaustive-deps
./components/SignIn/SignInForm.tsx
126:19 Warning: Unnecessary optional chain on a non-nullish value. @typescript-eslint/no-unnecessary-condition
```
It turns out our ESLint config wasn't being picked up, so I fixed that (it wasn't properly named). This PR turns warnings-as-errors on, fixes the issues, and also removes the "Project Create" page, because it isn't used at this time.
Wanted to clean this up before on-boarding more FE developers
Fixes#244
- Adds `jest-junit`
- Configures `jest-junit` to output `junit.xml` in `site/test_results`
- Uploads the emitted `junit.xml` to datadog as part of the `test/js` workflow
This hooks up `storybook`, which the front-end team has enjoyed using in the v1 codebase - it makes it quick and easy to view and test components in isolation.
The `<LoadingButton />` has a simple story added now, so if you run `yarn storybook`, you can preview it in various states:
This will be helpful as we bring more front-end devs to help build v2 out.
Unfortunately along with #133 I missed one other item in moving files to `/site` in #128 - ignoring new configuration files (and other folders) in our `jest.config.js`.
This caused our coverage numbers in front-end code to dip, because files that shouldn't be included (and previously weren't included) were now being tracked for coverage.
This refactors the front-end collateral to all live within `site` - so no `package.json` at the root.
The reason we had this initially is that the jest test run and NextJS actually require having _two_ different `tsconfig`s - Next needs `jsx:"preserve"`, while jest needs `jsx:"react"` - we were using `tsconfig`s at different levels at the hierarchy to manage this.
I changed this behavior to still use two different `tsconfig.json`s, which is mandatory - but just side-by-side in `site`.
Once that's fixed, it was easy to move everything into `site`
Follow up from: https://github.com/coder/coder/pull/118#discussion_r796244577
