Upgrade to Yarn v3.0.0-rc2

.github/workflows/main.yml

@@ -22,7 +22,6 @@ jobs:
       - name: Lint
         run: |
           yarn run lint --no-fix
-          DEBUG="lockfile-lint,validate-host-manager" npx lockfile-lint --path yarn.lock --validate-https --allowed-hosts npm --allowed-hosts registry.yarnpkg.com
       - name: Test
         run: |
           yarn run coverage:unit

.gitignore

@@ -30,3 +30,12 @@ selenium-debug.log*
 *.njsproj
 *.sln
 *.sw*
+
+# Yarn
+.yarn/*
+!.yarn/patches
+!.yarn/releases
+!.yarn/plugins
+!.yarn/sdks
+!.yarn/versions
+.pnp.*

.yarnrc.yml

@@ -0,0 +1,12 @@
+nodeLinker: node-modules
+
+yarnPath: .yarn/releases/yarn-3.0.0-rc.2.cjs
+
+enableNetwork: false
+enableStrictSsl: true
+
+networkSettings:
+  "registry.yarnpkg.com":
+    enableNetwork: true
+  "registry.npmjs.org":
+    enableNetwork: true

README.md

@@ -7,9 +7,84 @@
 
 ## Building
 
-This project was created with the [vue-cli](https://cli.vuejs.org/). Plugins
-can be added through the vue-cli utility, and for building the project, you
-can use one of the following commands.
+This project was created with the [vue-cli](https://cli.vuejs.org/).
+
+Vue CLI wraps Webpack, Babel, and other utilities. If you need to
+customize Webpack, then you will have to modify the `vue.config.js`
+file.
+
+Its syntax is different than what you may find in Webpack documentation
+or other websites.
+
+```js
+# webpack
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.js$/,
+        loader: 'some-loader',
+        options: {
+          someOption: true
+        }
+      }
+    ]
+  }
+}
+
+# vue.config.js
+module.exports = {
+  chainWebpack: config => {
+    config.module.rule('js')
+      .test(/\.js$/)
+      .use('some-loader')
+      .loader('some-loader')
+      .options({
+        someOption: true
+      })
+  }
+}
+```
+
+If you need to customize Babel, take a look at the `babel.config.js`
+file. But if you want to transpile dependencies you must update the
+`transpileDependencies` array in `vue.config.js`.
+
+```js
+# babel.config.js
+module.exports = (api) => {
+  api.cache(true)
+  const presets = [
+    '@vue/app'
+  ]
+  const plugins = [
+    ['@babel/plugin-proposal-class-properties', { loose: true }]
+  ]
+  return { presets, plugins }
+}
+```
+
+The example above enables class properties (e.g. static properties used in
+enumify's Enums) for the code. But dependencies are not transpiled. So you
+will have to remember to update `vue.config.js`.
+
+```js
+# vue.config.js
+module.exports = {
+  publicPath: '',
+  outputDir: 'dist',
+  indexPath: 'index.html',
+  transpileDependencies: [
+    // now the project should build fine, and the code in the dependency
+    // below can use class properties without any errors. Other dependencies
+    // are not transpiled, so if any of those dependencies use class
+    // properties in the exported code, then our build may fail, unless
+    // we include each library here.
+    'some-dependency-using-class-properties'
+  ],
+  // ...
+}
+```
 
 ### Project setup
 

package.json

@@ -52,7 +52,10 @@
     "vuex": "^3.6.2"
   },
   "devDependencies": {
+    "@babel/core": "^7.13.16",
+    "@babel/eslint-parser": "^7.13.14",
     "@babel/plugin-proposal-class-properties": "^7.13.0",
+    "@babel/plugin-proposal-optional-chaining": "^7.14.2",
     "@cypress/code-coverage": "^3.9.5",
     "@cypress/webpack-preprocessor": "^5.7.0",
     "@mdi/js": "^5.9.55",
@@ -63,7 +66,9 @@
     "@vue/cli-plugin-unit-mocha": "^4.5.13",
     "@vue/cli-service": "^4.5.13",
     "@vue/test-utils": "^1.2.0",
+    "autoprefixer": "^9.8.6",
     "babel-eslint": "^10.1.0",
+    "babel-loader": "^8.2.2",
     "babel-plugin-istanbul": "^6.0.0",
     "bufferutil": "^4.0.3",
     "chai": "^4.3.4",
@@ -75,15 +80,19 @@
     "eslint": "^7.26.0",
     "eslint-config-standard": "^16.0.2",
     "eslint-config-vuetify": "^0.5.0",
+    "eslint-import-resolver-node": "^0.3.4",
     "eslint-plugin-import": "^2.22.1",
     "eslint-plugin-node": "^11.1.0",
-    "eslint-plugin-standard": "^5.0.0",
     "eslint-plugin-vue": "^7.9.0",
+    "graphql-language-service-utils": "^2.5.2",
     "istanbul-instrumenter-loader": "^3.0.1",
     "istanbul-lib-coverage": "^3.0.0",
     "json-server": "^0.16.3",
+    "markdown-it": "^12.0.6",
     "null-loader": "^4.0.1",
     "nyc": "^15.1.0",
+    "postcss": "^8.2.13",
+    "regenerator-runtime": "^0.13.7",
     "sass": "^1.32.12",
     "sass-loader": "^10.1.1",
     "sinon": "^10.0.0",
@@ -96,11 +105,11 @@
     "vue-cli-plugin-vuetify-essentials": "^0.8.3",
     "vue-template-compiler": "^2.6.12",
     "vuetify-loader": "^1.7.2",
-    "webpack": "^4.46.0"
+    "webpack": "^4.46.0",
+    "zen-observable": "^0.8.15"
   },
   "resolutions": {
-    "cypress": "^7.3.0",
-    "istanbul-instrumenter-loader/**/istanbul-lib-instrument": "4.0.1"
+    "cypress": "^7.3.0"
   },
   "bugs": {
     "url": "https://github.com/cylc/cylc-ui/issues"

postcss.config.js

@@ -16,7 +16,7 @@
  */
 
 module.exports = {
-  plugins: {
-    autoprefixer: {}
-  }
+  plugins: [
+    require('autoprefixer')
+  ]
 }

src/components/cylc/tree/Tree.vue

@@ -160,7 +160,7 @@ import TreeItem from '@/components/cylc/tree/TreeItem'
 import Vue from 'vue'
 import TaskState from '@/model/TaskState.model'
 import Task from '@/components/cylc/Task'
-import clonedeep from 'lodash.clonedeep'
+import cloneDeep from 'lodash/cloneDeep'
 import { mdiPlus, mdiMinus } from '@mdi/js'
 
 export default {
@@ -254,7 +254,7 @@ export default {
           this.tasksFilter.states !== null &&
           this.tasksFilter.states.length > 0
       if (taskNameFilterSet || taskStatesFilterSet) {
-        this.activeFilters = clonedeep(this.tasksFilter)
+        this.activeFilters = cloneDeep(this.tasksFilter)
         this.filterNodes(this.workflows)
       } else {
         this.removeAllFilters()

src/router/index.js

@@ -30,7 +30,7 @@ import Meta from 'vue-meta'
 import NProgress from 'nprogress'
 import store from '@/store'
 
-import '../../node_modules/nprogress/css/nprogress.css'
+import 'nprogress/css/nprogress.css'
 
 // Routes
 import paths from './paths'

src/styles/cylc/_tree.scss

@@ -15,7 +15,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-@import '../../../node_modules/vuetify/src/styles/styles';
+@import '~vuetify/src/styles/styles';
 
 $active-color: #BDD5F7;
 /**

src/utils/aotf.js

@@ -678,7 +678,7 @@ export async function mutate (mutation, args, apolloClient) {
     }
     // command in a different format (e.g. info command)
     return [TaskState.SUBMITTED, result]
-  } catch {
+  } catch (error) {
     return _mutateError(mutation.name, 'invalid response', response)
   }
 }

tests/unit/components/cylc/tree/tree.vue.spec.js

@@ -25,7 +25,7 @@ import { simpleWorkflowTree4Nodes } from './tree.data'
 import TaskState from '@/model/TaskState.model'
 import TreeItem from '@/components/cylc/tree/TreeItem'
 import CylcObjectPlugin from '@/components/cylc/cylcObject/plugin'
-import cloneDeep from 'lodash.clonedeep'
+import cloneDeep from 'lodash/cloneDeep'
 
 const localVue = createLocalVue()
 localVue.prototype.$eventBus = {

vue.config.js

@@ -23,7 +23,11 @@ module.exports = {
   publicPath: '',
   outputDir: 'dist',
   indexPath: 'index.html',
-  transpileDependencies: ['vuetify', 'graphql-language-service-interface', 'graphql-language-service-parser'],
+  transpileDependencies: [
+    'graphql-language-service-interface',
+    'graphql-language-service-parser',
+    'vuetify'
+  ],
   runtimeCompiler: true,
   productionSourceMap: process.env.NODE_ENV !== 'production',
   pluginOptions: {
@@ -74,13 +78,15 @@ module.exports = {
       }
 
       // coverage
-      config.module.rule('istanbul')
-        .test(/\.js$/)
-        .include.add(path.resolve('src')).end()
-        .use('istanbul-instrumenter-loader')
-        .loader('istanbul-instrumenter-loader')
-        .options({ esModules: true })
-        .before('babel-loader')
+      if (process.env.coverage === 'true') {
+        config.module.rule('istanbul')
+          .test(/\.js$/)
+          .include.add(path.resolve('src')).end()
+          .use('istanbul-instrumenter-loader')
+          .loader('istanbul-instrumenter-loader')
+          .options({ esModules: true })
+          .after('cache-loader')
+      }
 
       // resolve modules in devtool
       config.output