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

bryphe-coder · web-flow · commit 78e652a268c8 · 2022-02-01T13:34:43.000-08:00
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)
diff --git a/.github/workflows/coder.yaml b/.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
diff --git a/.gitignore b/.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/
diff --git a/Makefile b/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
diff --git a/jest.config.js b/jest.config.js
diff --git a/site/.eslintignore b/site/.eslintignore
@@ -2,4 +2,7 @@
 # COPY PASTA OF .gitignore
 ###############################################################################
 node_modules
-vendor
+vendor
+out
+coverage
+.next
diff --git a/site/.eslintrc.yaml b/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
diff --git a/site/.prettierignore b/site/.prettierignore
@@ -12,6 +12,5 @@ yarn-error.log
 
 # Front-end ignore
 .next/
-site/.next/
-site/out/
-coverage/
+coverage/
+out/
diff --git a/site/.prettierrc b/site/.prettierrc
diff --git a/site/_jest/setupTests.ts b/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 {}
diff --git a/site/components/ErrorSummary/index.tsx b/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>
 }
diff --git a/site/jest-runner.eslint.config.js b/site/jest-runner.eslint.config.js
diff --git a/site/jest.config.js b/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/**/*.*",
+  ],
+}
diff --git a/site/package.json b/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",
diff --git a/site/pages/projects/[organization]/[project]/index.tsx b/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",
diff --git a/site/tsconfig.json b/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"]
 }
diff --git a/site/tsconfig.test.json b/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
   }
 }
diff --git a/site/util/array.test.ts b/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")
     })
   })
 })
diff --git a/site/util/array.ts b/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
diff --git a/site/yarn.lock b/site/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -1,10 +1,12 @@`
`1`	`1`	`{`
	`2`	`+ "extends": "./tsconfig.json",`
`2`	`3`	`"compilerOptions": {`
`3`	`4`	`"target": "es5",`
`4`	`5`	`"module": "commonjs",`
`5`	`6`	`"jsx": "react",`
`6`	`7`	`"downlevelIteration": true,`
`7`	`8`	`"strict": true,`
	`9`	`+ "strictNullChecks": true,`
`8`	`10`	`"esModuleInterop": true`
`9`	`11`	`}`
`10`	`12`	`}`