Rewrite of WebUI (#245)

Rewrite of the UI using Typescript, Vue3, Windicss and Vite. The design should  be close to the current one with some changes:
- latest pipeline in a sidebar on the right
- secrets and registry as part of the repo-settings (secrets and registry entries shouldn't be used as much so they can be "hidden" under settings IMO)
- start page shows list of active repositories with button to enable / add new ones (currently you see all repositories and in most cases you only add new repositories once in a while)

.vscode/launch.json

@@ -19,6 +19,24 @@
       "mode": "debug",
       "program": "${workspaceFolder}/cmd/agent/",
       "cwd": "${workspaceFolder}"
+    },
+    {
+      "name": "Woodpecker UI",
+      "type": "node",
+      "request": "launch",
+      "runtimeExecutable": "yarn",
+      "runtimeArgs": [
+        "start",
+      ],
+      "cwd": "${workspaceFolder}/web",
+      "port": 3000,
+      "resolveSourceMapLocations": [
+        "${workspaceFolder}/web/**",
+        "!**/node_modules/**"
+      ],
+      "skipFiles": [
+        "<node_internals>/**"
+      ]
     }
   ]
 }

.woodpecker/main.yml

@@ -3,6 +3,61 @@ clone:
     image: plugins/git:next
 
 pipeline:
+  web-deps:
+    image: node:16-alpine
+    commands:
+      - cd web/
+      - yarn install --frozen-lockfile
+    when:
+      path: "web/**"
+
+#  TODO: enable if we have enouth mem (~2g) to lint, cause an oom atm.
+#        For reviewers, please run localy to verify it passes
+#  web-lint:
+#    TODO: disabled group for now to prevent oom
+#    group: web-test
+#    image: node:16-alpine
+#    commands:
+#      - cd web/
+#      - yarn lint
+#    when:
+#      path: "web/**"
+
+  web-formatcheck:
+    group: web-test
+    image: node:16-alpine
+    commands:
+      - cd web/
+      - yarn formatcheck
+    when:
+      path: "web/**"
+
+  web-typecheck:
+    group: web-test
+    image: node:16-alpine
+    commands:
+      - cd web/
+      - yarn typecheck
+    when:
+      path: "web/**"
+
+  web-test:
+    group: web-test
+    image: node:16-alpine
+    commands:
+      - cd web/
+      - yarn test
+    when:
+      path: "web/**"
+
+  web-build:
+    image: node:16-alpine
+    commands:
+      - cd web/
+      - yarn build
+    when:
+      path: "web/**"
+
   test:
     image: golang:1.16
     group: test
@@ -12,15 +67,6 @@ pipeline:
       - make lint
       - make formatcheck
 
-  test-frontend:
-    image: node:10.17.0-stretch
-    group: test
-    commands:
-      - (cd web/; yarn install)
-      - (cd web/; yarn run lesshint)
-      - (cd web/; yarn run lint --quiet)
-      - make test-frontend
-
   test-postgres:
     image: golang:1.16
     group: db-test
@@ -40,8 +86,9 @@ pipeline:
       - go test -timeout 30s github.com/woodpecker-ci/woodpecker/server/store/datastore
 
   build-frontend:
-    image: node:10.17.0-stretch
+    image: node:16-alpine
     commands:
+      - apk add make
       - make release-frontend
 
   build-server:

Makefile

@@ -48,14 +48,20 @@ lint:
 	go run vendor/github.com/rs/zerolog/cmd/lint/lint.go github.com/woodpecker-ci/woodpecker/cmd/cli
 	go run vendor/github.com/rs/zerolog/cmd/lint/lint.go github.com/woodpecker-ci/woodpecker/cmd/server
 
+frontend-dependencies:
+	(cd web/; yarn install --frozen-lockfile)
+
 test-agent:
 	$(DOCKER_RUN) go test -race -timeout 30s github.com/woodpecker-ci/woodpecker/cmd/agent $(GO_PACKAGES)
 
 test-server:
 	$(DOCKER_RUN) go test -race -timeout 30s github.com/woodpecker-ci/woodpecker/cmd/server
 
-test-frontend:
-	(cd web/; yarn; yarn run test)
+test-frontend: frontend-dependencies
+	(cd web/; yarn run lint)
+	(cd web/; yarn run formatcheck)
+	(cd web/; yarn run typecheck)
+	(cd web/; yarn run test)
 
 test-lib:
 	$(DOCKER_RUN) go test -race -timeout 30s $(shell go list ./... | grep -v '/cmd/')

server/api/hook.go

@@ -276,7 +276,7 @@ func PostHook(c *gin.Context) {
 
 	defer func() {
 		for _, item := range buildItems {
-			uri := fmt.Sprintf("%s/%s/%d", server.Config.Server.Host, repo.FullName, build.Number)
+			uri := fmt.Sprintf("%s/%s/build/%d", server.Config.Server.Host, repo.FullName, build.Number)
 			if len(buildItems) > 1 {
 				err = remote_.Status(c, user, repo, build, uri, item.Proc)
 			} else {

server/router/router.go

@@ -30,7 +30,6 @@ import (
 
 // Load loads the router
 func Load(serveHTTP func(w http.ResponseWriter, r *http.Request), middleware ...gin.HandlerFunc) http.Handler {
-
 	e := gin.New()
 	e.Use(gin.Recovery())
 

server/web/web.go

@@ -62,7 +62,7 @@ func (w *website) Register(mux *gin.Engine) {
 	h := http.FileServer(w.fs)
 	h = setupCache(h)
 	mux.GET("/favicon.svg", gin.WrapH(h))
-	mux.GET("/static/*filepath", gin.WrapH(h))
+	mux.GET("/assets/*filepath", gin.WrapH(h))
 	mux.NoRoute(gin.WrapF(w.handleIndex))
 }
 

web/.eslintignore

@@ -0,0 +1,6 @@
+# don't lint build output (make sure it's set to your correct build folder name)
+dist
+coverage/
+package.json
+tsconfig.eslint.json
+tsconfig.json

web/.eslintrc.js

@@ -1,33 +1,136 @@
+// @ts-check
+/** @type {import('@typescript-eslint/experimental-utils').TSESLint.Linter.Config} */
+
+/* eslint-env node */
 module.exports = {
-  extends: [
-    "standard",
-    "plugin:jest/recommended",
-    "plugin:react/recommended",
-    "prettier",
-    "prettier/react"
-  ],
-  plugins: ["react", "jest", "prettier"],
-  parser: "babel-eslint",
-  parserOptions: {
-    ecmaVersion: 2016,
-    sourceType: "module",
-    ecmaFeatures: {
-      jsx: true
-    }
-  },
   env: {
-    es6: true,
     browser: true,
-    node: true,
-    "jest/globals": true
   },
+
+  parser: 'vue-eslint-parser',
+  parserOptions: {
+    project: ['./tsconfig.eslint.json'],
+    tsconfigRootDir: __dirname,
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore see https://github.com/vuejs/vue-eslint-parser#parseroptionsparser
+    parser: '@typescript-eslint/parser',
+    sourceType: 'module',
+    extraFileExtensions: ['.vue'],
+  },
+
+  plugins: ['@typescript-eslint', 'import', 'simple-import-sort'],
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'airbnb-base-ts',
+    'plugin:import/errors',
+    'plugin:import/warnings',
+    'plugin:import/typescript',
+    'plugin:promise/recommended',
+    'plugin:vue/vue3-recommended',
+    'plugin:prettier/recommended',
+    'plugin:vue-scoped-css/recommended',
+  ],
+
   rules: {
-    "react/prop-types": 1,
-    "prettier/prettier": [
-      "error",
+    // enable scope analysis rules
+    'no-unused-vars': 'off',
+    '@typescript-eslint/no-unused-vars': 'error',
+    'no-use-before-define': 'off',
+    '@typescript-eslint/no-use-before-define': 'error',
+    'no-shadow': 'off',
+    '@typescript-eslint/no-shadow': 'error',
+    'no-redeclare': 'off',
+    '@typescript-eslint/no-redeclare': 'error',
+
+    // make typescript eslint rules even more strict
+    '@typescript-eslint/no-explicit-any': 'error',
+    '@typescript-eslint/explicit-module-boundary-types': 'off',
+    '@typescript-eslint/no-non-null-assertion': 'error',
+
+    'import/no-unresolved': 'off', // disable as this is handled by tsc itself
+    'import/first': 'error',
+    'import/newline-after-import': 'error',
+    'import/no-cycle': 'error',
+    'import/no-relative-parent-imports': 'error',
+    'import/no-duplicates': 'error',
+    'import/no-extraneous-dependencies': 'error',
+    'import/extensions': 'off',
+    'import/prefer-default-export': 'off',
+
+    'simple-import-sort/imports': 'error',
+    'simple-import-sort/exports': 'error',
+
+    'promise/prefer-await-to-then': 'error',
+    'promise/prefer-await-to-callbacks': 'error',
+
+    'no-underscore-dangle': 'off',
+    'no-else-return': ['error', { allowElseIf: false }],
+    'no-return-assign': ['error', 'always'],
+    'no-return-await': 'error',
+    'no-useless-return': 'error',
+    'no-restricted-imports': [
+      'error',
+      {
+        patterns: ['src', 'dist'],
+      },
+    ],
+    'no-console': 'warn',
+    'no-useless-concat': 'error',
+    'prefer-const': 'error',
+    'spaced-comment': ['error', 'always'],
+    'object-shorthand': ['error', 'always'],
+    'no-useless-rename': 'error',
+    eqeqeq: 'error',
+
+    'vue/attribute-hyphenation': 'error',
+    // enable in accordance with https://github.com/prettier/eslint-config-prettier#vuehtml-self-closing
+    'vue/html-self-closing': [
+      'error',
       {
-        trailingComma: "all",
-      }
-    ]
-  }
+        html: {
+          void: 'any',
+        },
+      },
+    ],
+    'vue/no-static-inline-styles': 'error',
+    'vue/v-on-function-call': 'error',
+    'vue/no-useless-v-bind': 'error',
+    'vue/no-useless-mustaches': 'error',
+    'vue/no-useless-concat': 'error',
+    'vue/no-boolean-default': 'error',
+    'vue/html-button-has-type': 'error',
+    'vue/component-name-in-template-casing': 'error',
+    'vue/match-component-file-name': [
+      'error',
+      {
+        extensions: ['vue'],
+        shouldMatchCase: true,
+      },
+    ],
+    'vue/require-name-property': 'error',
+    'vue/v-for-delimiter-style': 'error',
+    'vue/no-empty-component-block': 'error',
+    'vue/no-duplicate-attr-inheritance': 'error',
+    'vue/no-unused-properties': [
+      'error',
+      {
+        groups: ['props', 'data', 'computed', 'methods', 'setup'],
+      },
+    ],
+    'vue/new-line-between-multi-line-property': 'error',
+    'vue/padding-line-between-blocks': 'error',
+
+    // css rules
+    'vue-scoped-css/no-unused-selector': 'error',
+    'vue-scoped-css/no-parsing-error': 'error',
+    'vue-scoped-css/require-scoped': 'error',
+
+    // enable in accordance with https://github.com/prettier/eslint-config-prettier#curly
+    curly: ['error', 'all'],
+
+    // risky because of https://github.com/prettier/eslint-plugin-prettier#arrow-body-style-and-prefer-arrow-callback-issue
+    'arrow-body-style': 'error',
+    'prefer-arrow-callback': 'error',
+  },
 };

web/.gitignore

@@ -0,0 +1,5 @@
+node_modules
+.DS_Store
+dist
+dist-ssr
+*.local

web/.prettierignore

@@ -0,0 +1,4 @@
+yarn-lock.yaml
+dist
+coverage/
+LICENSE

web/.prettierrc.js

@@ -0,0 +1,8 @@
+module.exports = {
+  semi: true,
+  trailingComma: 'all',
+  singleQuote: true,
+  printWidth: 120,
+  tabWidth: 2,
+  endOfLine: 'lf',
+};