refactor: Move package.json and other front-end collateral into 'site' (

#128)

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: #118 (comment)

.github/workflows/coder.yaml

@@ -61,9 +61,11 @@ jobs:
 
       - name: Install node_modules
         run: yarn install
+        working-directory: site
 
       - name: "yarn lint"
         run: yarn lint
+        working-directory: site
 
   gen:
     name: "style/gen"
@@ -113,6 +115,7 @@ jobs:
 
       - name: Install node_modules
         run: yarn install
+        working-directory: site
 
       - name: "make ${{ matrix.style }}"
         run: "make --output-sync -j ${{ matrix.style }}"
@@ -194,15 +197,18 @@ jobs:
           node-version: "14"
 
       - run: yarn install
+        working-directory: site
 
       - run: yarn build
+        working-directory: site
 
       - run: yarn test:coverage
+        working-directory: site
 
       - uses: codecov/codecov-action@v2
         if: github.actor != 'dependabot[bot]'
         with:
           token: ${{ secrets.CODECOV_TOKEN }}
-          files: ./coverage/lcov.info
+          files: ./site/coverage/lcov.info
           flags: unittest-js
           fail_ci_if_error: true

.gitignore

@@ -16,9 +16,12 @@ yarn-error.log
 
 # Front-end ignore
 .next/
+site/.eslintcache
 site/.next/
+site/node_modules/
+site/yarn-error.log
 coverage/
 
 # Build
 bin/
-site/out/
+site/out/

Makefile

@@ -26,9 +26,9 @@ fmt/prettier:
 	@echo "--- prettier"
 # Avoid writing files in CI to reduce file write activity
 ifdef CI
-	yarn run format:check
+	cd site && yarn run format:check
 else
-	yarn run format:write
+	cd site && yarn run format:write
 endif
 .PHONY: fmt/prettier
 
@@ -74,6 +74,6 @@ provisionersdk/proto: provisionersdk/proto/provisioner.proto
 .PHONY: provisionersdk/proto
 
 site/out: 
-	yarn build
-	yarn export
+	cd site && yarn build
+	cd site && yarn export
 .PHONY: site/out

.eslintignore → site/.eslintignore

@@ -2,4 +2,7 @@
 # COPY PASTA OF .gitignore
 ###############################################################################
 node_modules
-vendor
+vendor
+out
+coverage
+.next

.eslintrc.yaml → site/.eslintrc.yaml

@@ -18,8 +18,7 @@ parser: "@typescript-eslint/parser"
 parserOptions:
   ecmaVersion: 2018
   project:
-    - "./tsconfig.json"
-    - "./site/tsconfig.json"
+    - "./tsconfig.test.json"
   sourceType: module
   ecmaFeatures:
     jsx: true

.prettierignore → site/.prettierignore

@@ -12,6 +12,5 @@ yarn-error.log
 
 # Front-end ignore
 .next/
-site/.next/
-site/out/
-coverage/
+coverage/
+out/

_jest/setupTests.ts → site/_jest/setupTests.ts

@@ -5,3 +5,6 @@
 // Set up 'next-router-mock' to with our front-end tests:
 // https://github.com/scottrippey/next-router-mock#quick-start
 jest.mock("next/router", () => require("next-router-mock"))
+
+// Suppress isolated modules warning
+export {}

site/components/ErrorSummary/index.tsx

@@ -1,10 +1,15 @@
 import React from "react"
 
 export interface ErrorSummaryProps {
-  error: Error
+  error: Error | undefined
 }
 
 export const ErrorSummary: React.FC<ErrorSummaryProps> = ({ error }) => {
   // TODO: More interesting error page
+
+  if (typeof error === "undefined") {
+    return <div>{"Unknown error"}</div>
+  }
+
   return <div>{error.toString()}</div>
 }

site/jest.config.js

@@ -0,0 +1,41 @@
+module.exports = {
+  projects: [
+    {
+      globals: {
+        "ts-jest": {
+          tsconfig: "tsconfig.test.json",
+        },
+      },
+      coverageReporters: ["text", "lcov"],
+      displayName: "test",
+      preset: "ts-jest",
+      roots: ["<rootDir>"],
+      setupFilesAfterEnv: ["<rootDir>/_jest/setupTests.ts"],
+      transform: {
+        "^.+\\.tsx?$": "ts-jest",
+      },
+      testEnvironment: "jsdom",
+      testRegex: "(/__tests__/.*|(\\.|/)(test|spec))\\.tsx?$",
+      testPathIgnorePatterns: ["/node_modules/", "/__tests__/fakes"],
+      moduleDirectories: ["node_modules", "<rootDir>"],
+    },
+    {
+      displayName: "lint",
+      runner: "jest-runner-eslint",
+      testMatch: ["<rootDir>/**/*.js", "<rootDir>/**/*.ts", "<rootDir>/**/*.tsx"],
+      testPathIgnorePatterns: ["/.next/", "/out/", "/_jest/", "jest.config.js", "jest-runner.*.js", "next.config.js"],
+    },
+  ],
+  collectCoverageFrom: [
+    "<rootDir>/**/*.js",
+    "<rootDir>/**/*.ts",
+    "<rootDir>/**/*.tsx",
+    "!<rootDir>/**/*.stories.tsx",
+    "!<rootDir>/.next/**/*.*",
+    "!<rootDir>/api.ts",
+    "!<rootDir>/dev.ts",
+    "!<rootDir>/next-env.d.ts",
+    "!<rootDir>/next.config.js",
+    "!<rootDir>/out/**/*.*",
+  ],
+}

package.json → site/package.json

@@ -4,10 +4,10 @@
   "repository": "https://github.com/coder/coder",
   "private": true,
   "scripts": {
-    "build": "NODE_ENV=production next build site",
-    "build:dev": "next build site",
-    "dev": "ts-node site/dev.ts",
-    "export": "next export site",
+    "build": "NODE_ENV=production next build",
+    "build:dev": "next build",
+    "dev": "ts-node dev.ts",
+    "export": "next export",
     "format:check": "prettier --check '**/*.{css,html,js,json,jsx,md,ts,tsx,yaml,yml}'",
     "format:write": "prettier --write '**/*.{css,html,js,json,jsx,md,ts,tsx,yaml,yml}' && sql-formatter -l postgresql ./database/query.sql -o ./database/query.sql",
     "lint": "jest --selectProjects lint",

site/pages/projects/[organization]/[project]/index.tsx

@@ -78,8 +78,8 @@ const ProjectPage: React.FC = () => {
     <div className={styles.root}>
       <Navbar user={me} onSignOut={signOut} />
       <Header
-        title={firstOrItem(project)}
-        description={firstOrItem(organization)}
+        title={firstOrItem(project, "")}
+        description={firstOrItem(organization, "")}
         subTitle={`${workspaces.length} workspaces`}
         action={{
           text: "Create Workspace",

site/tsconfig.json

@@ -1,5 +1,4 @@
 {
-  "extends": "../tsconfig.json",
   "compilerOptions": {
     "outDir": "./dist/",
     "noImplicitAny": true,
@@ -13,12 +12,13 @@
     "isolatedModules": true,
     "lib": ["dom", "dom.iterable", "esnext"],
     "skipLibCheck": true,
-    "strict": false,
+    "strict": true,
+    "strictNullChecks": true,
     "forceConsistentCasingInFileNames": true,
     "noEmit": true,
     "incremental": true,
     "moduleResolution": "node"
   },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
-  "exclude": ["node_modules"]
+  "exclude": ["node_modules", "_jest"]
 }

tsconfig.json → site/tsconfig.test.json

@@ -1,10 +1,12 @@
 {
+  "extends": "./tsconfig.json",
   "compilerOptions": {
     "target": "es5",
     "module": "commonjs",
     "jsx": "react",
     "downlevelIteration": true,
     "strict": true,
+    "strictNullChecks": true,
     "esModuleInterop": true
   }
 }

site/util/array.test.ts

@@ -3,15 +3,15 @@ import { firstOrItem } from "./array"
 describe("array", () => {
   describe("firstOrItem", () => {
     it("returns null if empty array", () => {
-      expect(firstOrItem([])).toBeNull()
+      expect(firstOrItem([], null)).toBeNull()
     })
 
     it("returns first item if array with more one item", () => {
-      expect(firstOrItem(["a", "b"])).toEqual("a")
+      expect(firstOrItem(["a", "b"], "c")).toEqual("a")
     })
 
     it("returns item if single item", () => {
-      expect(firstOrItem("c")).toEqual("c")
+      expect(firstOrItem("c", "d")).toEqual("c")
     })
   })
 })

site/util/array.ts

@@ -4,9 +4,13 @@
  * - If an array with 1 or more elements, returns the first element
  * - If a single item, returns that item
  */
-export const firstOrItem = <T>(itemOrItems: T | T[]): T | null => {
+export const firstOrItem = <T>(itemOrItems: undefined | T | T[], defaults: T): T => {
   if (Array.isArray(itemOrItems)) {
-    return itemOrItems.length > 0 ? itemOrItems[0] : null
+    return itemOrItems.length > 0 ? itemOrItems[0] : defaults
+  }
+
+  if (typeof itemOrItems === "undefined") {
+    return defaults
   }
 
   return itemOrItems