From b58e8c30e3cfd4129c130b2216e8f559cee0758c Mon Sep 17 00:00:00 2001 From: G r e y Date: Fri, 18 Mar 2022 01:14:48 +0000 Subject: [PATCH 1/6] chore: improve sb, tsc configs 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 --- .vscode/settings.json | 59 ++++++++++--------- site/.eslintrc.yaml | 4 +- site/.storybook/main.js | 26 +++++++- site/jest.config.js | 2 +- .../components/CodeBlock/index.stories.tsx | 2 +- .../CodeExample/CodeExample.stories.tsx | 2 +- .../Workspace/Workspace.stories.tsx | 2 +- site/tsconfig.json | 3 +- site/tsconfig.prod.json | 4 ++ site/tsconfig.test.json | 3 +- site/webpack.common.ts | 9 ++- 11 files changed, 76 insertions(+), 40 deletions(-) create mode 100644 site/tsconfig.prod.json diff --git a/.vscode/settings.json b/.vscode/settings.json index 1f737aeec2508..6a0c756a79fe0 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,31 +1,4 @@ { - "files.exclude": { - "**/node_modules": true - }, - "go.lintTool": "golangci-lint", - "go.lintFlags": ["--fast"], - "go.lintOnSave": "package", - "go.coverOnSave": true, - // The codersdk is used by coderd another other packages extensively. - // To reduce redundancy in tests, it's covered by other packages. - "go.testFlags": ["-coverpkg=./.,github.com/coder/coder/codersdk"], - "go.coverageDecorator": { - "type": "gutter", - "coveredHighlightColor": "rgba(64,128,128,0.5)", - "uncoveredHighlightColor": "rgba(128,64,64,0.25)", - "coveredBorderColor": "rgba(64,128,128,0.5)", - "uncoveredBorderColor": "rgba(128,64,64,0.25)", - "coveredGutterStyle": "blockgreen", - "uncoveredGutterStyle": "blockred" - }, - "emeraldwalk.runonsave": { - "commands": [ - { - "match": "database/query.sql", - "cmd": "make gen" - } - ] - }, "cSpell.words": [ "coderd", "coderdtest", @@ -76,5 +49,35 @@ "xerrors", "yamux" ], - "eslint.workingDirectories": ["./site"] + "emeraldwalk.runonsave": { + "commands": [ + { + "match": "database/query.sql", + "cmd": "make gen" + } + ] + }, + "eslint.workingDirectories": ["./site"], + "files.exclude": { + "**/node_modules": true + }, + "go.lintTool": "golangci-lint", + "go.lintFlags": ["--fast"], + "go.lintOnSave": "package", + "go.coverOnSave": true, + // The codersdk is used by coderd another other packages extensively. + // To reduce redundancy in tests, it's covered by other packages. + "go.testFlags": ["-coverpkg=./.,github.com/coder/coder/codersdk"], + "go.coverageDecorator": { + "type": "gutter", + "coveredHighlightColor": "rgba(64,128,128,0.5)", + "uncoveredHighlightColor": "rgba(128,64,64,0.25)", + "coveredBorderColor": "rgba(64,128,128,0.5)", + "uncoveredBorderColor": "rgba(128,64,64,0.25)", + "coveredGutterStyle": "blockgreen", + "uncoveredGutterStyle": "blockred" + }, + // We often use a version of TypeScript that's ahead of the version shipped + // with VS Code. + "typescript.tsdk": "./site/node_modules/typescript/lib" } diff --git a/site/.eslintrc.yaml b/site/.eslintrc.yaml index 436bd1a2e40e2..335e775f8e4b5 100644 --- a/site/.eslintrc.yaml +++ b/site/.eslintrc.yaml @@ -17,7 +17,9 @@ extends: parser: "@typescript-eslint/parser" parserOptions: ecmaVersion: 2018 - project: "./tsconfig.test.json" + project: + - ./tsconfig.prod.json + - ./tsconfig.test.json sourceType: module ecmaFeatures: jsx: true diff --git a/site/.storybook/main.js b/site/.storybook/main.js index cf3dc730d92d6..de93a2695ebba 100644 --- a/site/.storybook/main.js +++ b/site/.storybook/main.js @@ -1,16 +1,36 @@ +/** + * @fileoverview This file is configures Storybook + * + * @see + */ const path = require("path") module.exports = { - stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"], + // Automatically loads all stories in source ending in 'stories.tsx' + // + // SEE: https://storybook.js.org/docs/react/configure/overview#configure-story-loading + stories: ["../src/**/*.stories.tsx"], + + // addons are official and community plugins to extend Storybook. + // + // SEE: https://storybook.js.org/addons addons: ["@storybook/addon-links", "@storybook/addon-essentials"], + + // Storybook uses babel under the hood, while we currently use ts-loader. + // Sometimes, you may encounter an error in a Storybook that contains syntax + // that requires a babel plugin. + // + // SEE: https://storybook.js.org/docs/react/configure/babel babel: async (options) => ({ ...options, plugins: ["@babel/plugin-proposal-class-properties"], - // any extra options you want to set }), + + // Storybook internally uses its own Webpack configuration instead of ours. + // + // SEE: https://storybook.js.org/docs/react/configure/webpack webpackFinal: async (config) => { config.resolve.modules = [path.resolve(__dirname, ".."), "node_modules"] - return config }, } diff --git a/site/jest.config.js b/site/jest.config.js index d72d368ab8efa..58341cf8dd143 100644 --- a/site/jest.config.js +++ b/site/jest.config.js @@ -3,7 +3,7 @@ module.exports = { { globals: { "ts-jest": { - tsconfig: "tsconfig.test.json", + tsconfig: "./tsconfig.test.json", }, }, coverageReporters: ["text", "lcov"], diff --git a/site/src/components/CodeBlock/index.stories.tsx b/site/src/components/CodeBlock/index.stories.tsx index 86e14ffca2856..6e921faca30e0 100644 --- a/site/src/components/CodeBlock/index.stories.tsx +++ b/site/src/components/CodeBlock/index.stories.tsx @@ -9,7 +9,7 @@ Started container user Using user 'coder' with shell '/bin/bash'`.split("\n") export default { - title: "CodeBlock", + title: "CodeBlock/CodeBlock", component: CodeBlock, argTypes: { lines: { control: "text", defaultValue: sampleLines }, diff --git a/site/src/components/CodeExample/CodeExample.stories.tsx b/site/src/components/CodeExample/CodeExample.stories.tsx index 4eafb626a83d2..f7972f678afb0 100644 --- a/site/src/components/CodeExample/CodeExample.stories.tsx +++ b/site/src/components/CodeExample/CodeExample.stories.tsx @@ -5,7 +5,7 @@ import { CodeExample, CodeExampleProps } from "./CodeExample" const sampleCode = `echo "Hello, world"` export default { - title: "CodeExample", + title: "CodeBlock/CodeExample", component: CodeExample, argTypes: { code: { control: "string", defaultValue: sampleCode }, diff --git a/site/src/components/Workspace/Workspace.stories.tsx b/site/src/components/Workspace/Workspace.stories.tsx index db3ab80384750..94d60aa6d6b7e 100644 --- a/site/src/components/Workspace/Workspace.stories.tsx +++ b/site/src/components/Workspace/Workspace.stories.tsx @@ -4,7 +4,7 @@ import { Workspace, WorkspaceProps } from "./Workspace" import { MockOrganization, MockProject, MockWorkspace } from "../../test_helpers" export default { - title: "Workspace", + title: "Workspaces/Workspace", component: Workspace, argTypes: {}, } diff --git a/site/tsconfig.json b/site/tsconfig.json index 1989ec0b9efc5..aefaa7cc96f7e 100644 --- a/site/tsconfig.json +++ b/site/tsconfig.json @@ -15,6 +15,5 @@ "strict": true, "target": "es5" }, - "include": ["**/*.ts", "**/*.tsx"], - "exclude": ["node_modules", "_jest", "**/*.test.tsx"] + "include": ["**/*.ts", "**/*.tsx"] } diff --git a/site/tsconfig.prod.json b/site/tsconfig.prod.json new file mode 100644 index 0000000000000..26d0cc07eed64 --- /dev/null +++ b/site/tsconfig.prod.json @@ -0,0 +1,4 @@ +{ + "extends": "./tsconfig.json", + "exclude": ["node_modules", "_jest", "**/*.stories.tsx", "**/*.test.tsx"] +} diff --git a/site/tsconfig.test.json b/site/tsconfig.test.json index 2cd6b5bbd2bfd..416150b4d41fa 100644 --- a/site/tsconfig.test.json +++ b/site/tsconfig.test.json @@ -1,4 +1,5 @@ { "extends": "./tsconfig.json", - "exclude": ["node_modules", "_jest"] + "exclude": ["node_modules", "_jest"], + "include": ["**/*.stories.tsx", "**/*.test.tsx"] } diff --git a/site/webpack.common.ts b/site/webpack.common.ts index edf9baed3e091..004afe96ae6ee 100644 --- a/site/webpack.common.ts +++ b/site/webpack.common.ts @@ -30,7 +30,14 @@ export const commonWebpackConfig: Configuration = { rules: [ { test: /\.tsx?$/, - use: ["ts-loader"], + use: [ + { + loader: "ts-loader", + options: { + configFile: "tsconfig.prod.json", + }, + }, + ], exclude: [/node_modules/], }, ], From 36f301f48478191d1a8df7acf40075a0c799469f Mon Sep 17 00:00:00 2001 From: G r e y Date: Fri, 18 Mar 2022 01:40:42 +0000 Subject: [PATCH 2/6] chore: fix eslint OOMing my workspace --- site/.eslintrc.yaml | 3 +-- site/jest.config.js | 3 +++ site/tsconfig.json | 3 ++- 3 files changed, 6 insertions(+), 3 deletions(-) diff --git a/site/.eslintrc.yaml b/site/.eslintrc.yaml index 335e775f8e4b5..0b6c04974d640 100644 --- a/site/.eslintrc.yaml +++ b/site/.eslintrc.yaml @@ -18,8 +18,7 @@ parser: "@typescript-eslint/parser" parserOptions: ecmaVersion: 2018 project: - - ./tsconfig.prod.json - - ./tsconfig.test.json + - ./tsconfig.json sourceType: module ecmaFeatures: jsx: true diff --git a/site/jest.config.js b/site/jest.config.js index 58341cf8dd143..757621cb3bea4 100644 --- a/site/jest.config.js +++ b/site/jest.config.js @@ -1,4 +1,7 @@ +const maxWorkers = process.env.CI ? 16 : 2 + module.exports = { + maxWorkers, projects: [ { globals: { diff --git a/site/tsconfig.json b/site/tsconfig.json index aefaa7cc96f7e..977b02dc54623 100644 --- a/site/tsconfig.json +++ b/site/tsconfig.json @@ -15,5 +15,6 @@ "strict": true, "target": "es5" }, - "include": ["**/*.ts", "**/*.tsx"] + "include": ["**/*.ts", "**/*.tsx"], + "exclude": ["node_modules", "_jest"] } From 48f60e7129c7aaada47657618115617e82a99b15 Mon Sep 17 00:00:00 2001 From: G r e y Date: Thu, 17 Mar 2022 21:44:13 -0400 Subject: [PATCH 3/6] fixup project in eslintrc --- site/.eslintrc.yaml | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/site/.eslintrc.yaml b/site/.eslintrc.yaml index 0b6c04974d640..7ee997c1e9aad 100644 --- a/site/.eslintrc.yaml +++ b/site/.eslintrc.yaml @@ -17,8 +17,7 @@ extends: parser: "@typescript-eslint/parser" parserOptions: ecmaVersion: 2018 - project: - - ./tsconfig.json + project: "./tsconfig.json" sourceType: module ecmaFeatures: jsx: true From 0594fc962383937e98fc4eabae6c2da0c481614e Mon Sep 17 00:00:00 2001 From: G r e y Date: Fri, 18 Mar 2022 01:52:08 +0000 Subject: [PATCH 4/6] chore: ignore coverage for .storybook --- codecov.yml | 1 + 1 file changed, 1 insertion(+) diff --git a/codecov.yml b/codecov.yml index 0a45a9a582c18..39b0aa0c229f8 100644 --- a/codecov.yml +++ b/codecov.yml @@ -35,4 +35,5 @@ ignore: - provisionerd/proto - provisionersdk/proto - scripts/datadog-cireport + - site/.storybook - rules.go From ebf6f06fd91916961a6e2169d784f328ef1558e1 Mon Sep 17 00:00:00 2001 From: G r e y Date: Fri, 18 Mar 2022 02:22:47 +0000 Subject: [PATCH 5/6] fixup: do not collect coverage on js files This is safe because we don't allow JS in our tsconfigs! We only use JS for config files! --- site/jest.config.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/site/jest.config.js b/site/jest.config.js index 757621cb3bea4..903cf219c43dd 100644 --- a/site/jest.config.js +++ b/site/jest.config.js @@ -31,9 +31,10 @@ module.exports = { }, ], collectCoverageFrom: [ - "/**/*.js", + // included files "/**/*.ts", "/**/*.tsx", + // excluded files "!/**/*.stories.tsx", "!/_jest/**/*.*", "!/api.ts", From aab6cecdb4d0f1d71174698b8493638c05fef66e Mon Sep 17 00:00:00 2001 From: G r e y Date: Fri, 18 Mar 2022 03:15:25 +0000 Subject: [PATCH 6/6] add comment --- site/jest.config.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/site/jest.config.js b/site/jest.config.js index 903cf219c43dd..3effb20d6a983 100644 --- a/site/jest.config.js +++ b/site/jest.config.js @@ -1,3 +1,9 @@ +// REMARK: Jest is supposed to never exceed 50% maxWorkers by default. However, +// there seems to be an issue with this in our Ubuntu-based workspaces. +// If we don't limit it, then 100% CPU and high MEM usage is hit +// unexpectedly, leading to OOM kills. +// +// SEE thread: https://github.com/coder/coder/pull/483#discussion_r829636583 const maxWorkers = process.env.CI ? 16 : 2 module.exports = {