* feat(site): configure global fonts
Summary:
Installs fira code and Inter
Impact:
A more pleasant dashboard experience in v2 that matches our prefer font
families from v1
Since it copied to a nested directory, it's very confusing if you
already had a `coder` binary in your `~/go/bin`, since it would always
prefer the `coder` in the higher directory.
* 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>
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 />`.
While going through the manual CLI flow with some people on the team, there was some confusion with the `coder daemon` command - the fact there was no output to confirm that the daemon started:
```
coder ~/coder (bryphe/fix/daemon-log) $ dist/coder_linux_amd64/coder daemon
```
This PR just adds a simple log to confirm that the daemon has started:
```
coder ~/coder (bryphe/fix/daemon-log) $ dist/coder_linux_amd64/coder daemon
2022-03-16 17:57:20.358 [INFO] <daemon.go:53> daemon started {"url": "http://127.0.0.1:3000"}
```
Just throwing this out there. Feel free to reject if you have concerns about adding this @kylecarbs !
Summary:
Partial port of v1 CODEOWNERS -> v2
Impact:
Coder FE will be pinged to review changes in site. We do not have a check that
requires an explicit approval, but it helps review cycle iteration
This refactoring re-organizes the `site` folder to have a nested `src` folder.
Originally, [we wanted to keep the directory structure shallow](https://github.com/coder/coder/pull/8#issuecomment-1009578910) - but there were two points that motivated this change to introduce the `src` level.
1. We have several non-`src` folders now (`e2e`, `static`, `html_templates`, `.storybook`)
2. Having a `src` folder makes it easier to run XState Typegen
So given those two data points - I believe it makes sense to revisit that and introduce a `src` folder.
This adds a couple of missing pieces to the docs:
- More info about `./develop.sh`
- Steps to run the built coder binary manually
- Starting the server
- Logging in
- Creating a project
I attempted to keep them relatively agnostic so they wouldn't be out of date immediately when https://github.com/coder/coder/pull/422 is merged
@presleyp noticed that we have a lot of dependencies listed as `devDependencies` that should be actual `dependencies` - this PR moves them to the appropriate category.
Thanks for catching this @presleyp !
I was investigating some of the test failures in https://github.com/coder/coder/pull/429 - and realized that we actually don't need the `http-proxy-middleware` package anymore (or the `express` package). Of course - the failures were unrelated to that change, so this doesn't fix the CI failures that were encountered.
`http-proxy-middleware` and `express` were needed for our custom NextJS dev server, but that code was removed in #348 , so those dependencies are no longer explicitly required. We should just remove them to avoid the maintenance overhead.
Another clean-up / follow-up from #348
This fixes#433 - a test flake in E2E (intermittent `ESOCKETTIMEDOUT` errors on MacOS).
The main issue is that, occasionally, for very large dependencies (like `@material-ui/icons`) - yarn can actually time out! We researched this in-depth in v1: https://github.com/coder/m/pull/10040 and fixed it successfully there, by increasing the timeout for yarn.
However, this also highlighted the fact that our `node_modules` caching behavior wasn't correct - we should very rarely see a timeout issue like this, because `@material-ui/icons` should be cached.
It turns out that we weren't falling back to the latest cached `node_modules` if there was a miss - so anytime the lock file changed, we'd invalidate the cache, and not restore the previous one. This can be improved by using the [`restore-keys`](https://github.com/coder/m/pull/10040) parameter of the [`@actions/cache`](https://github.com/actions/cache)... and in fact we already do this for the `go` dependencies.
So this fix does two things:
- Improve the caching behavior, such that we should rarely have to install `@material-ui/icons` (and other large dependencies)
- When we do have to install, update the timeout so that we can avoid random `ESOCKETTIMEDOUT` errors
* fix(site): remove duplicate mask-icon
/favicon.svg should 404, but it's also a duplicate of the mask-icon
that has crossorigin="use-credentials"
refactor(site): link attribute ordering
I believe the former duplication of rel="mask-icon" was because the
crossorigin and rel attributes made it less readable.
* refactor(site): reorder link and meta tags
* refactor(site): match v1 tsconfig
Summary of changes:
* ordered configurations for ease of readability
* allowJs removed -> not needed after Next.js
* noImplicitAny removed -> this is set to true by strict
* strictNullChecks removed -> this is set to true by strict
* removed lingering next-env.d.ts in include
* refactor(site): simplify tsconfig.test.json
Because that the base tsconfig was simplified when changing from
Next.js, this one now duplicates most of it. I still believe having a
separate tsconfig is a good idea for the purposes of separating tests
from source code. It especially can make it easier for eslint and jest
performance.
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
