Chore: Migrate yarn from v1 to v2 (#39082)

* Chore: Migrate yarn from v1 to v2 Co-authored-by: Hugo Häggmark <hugo.haggmark@gmail.com>
4 years ago · b2e94d0733
parent 1b2a1a9621
commit b2e94d0733
41 changed files with 34937 additions and 24885 deletions
--- a/.drone.yml
+++ b/.drone.yml
@ -21,7 +21,7 @@ steps:
  - chmod +x bin/grabpl
  - ./bin/grabpl verify-drone
  - make gen-go
-  - yarn install --frozen-lockfile --no-progress
+  - yarn install --immutable

 - name: codespell
  image: grafana/build-container:1.4.3
@ -150,7 +150,7 @@ steps:
 - name: end-to-end-tests
  image: grafana/ci-e2e:12.19.0-1
  commands:
-  - ./node_modules/.bin/cypress install
+  - yarn run cypress install
  - ./bin/grabpl e2e-tests --port 3001
  environment:
    HOST: end-to-end-tests-server
@ -171,7 +171,7 @@ steps:
  image: buildkite/puppeteer
  commands:
  - yarn wait-on http://$HOST:$PORT
-  - yarn -s test:accessibility-pr
+  - yarn run test:accessibility-pr
  environment:
    GRAFANA_MISC_STATS_API_KEY:
      from_secret: grafana_misc_stats_api_key
@ -293,7 +293,7 @@ steps:
  - chmod +x bin/grabpl
  - ./bin/grabpl verify-drone
  - make gen-go
-  - yarn install --frozen-lockfile --no-progress
+  - yarn install --immutable

 - name: trigger-enterprise-downstream
  image: grafana/drone-downstream
@ -448,7 +448,7 @@ steps:
 - name: end-to-end-tests
  image: grafana/ci-e2e:12.19.0-1
  commands:
-  - ./node_modules/.bin/cypress install
+  - yarn run cypress install
  - ./bin/grabpl e2e-tests --port 3001
  environment:
    HOST: end-to-end-tests-server
@ -482,7 +482,7 @@ steps:
  image: buildkite/puppeteer
  commands:
  - yarn wait-on http://$HOST:$PORT
-  - yarn -s test:accessibility --json > pa11y-ci-results.json
+  - yarn run test:accessibility --json > pa11y-ci-results.json
  environment:
    GRAFANA_MISC_STATS_API_KEY:
      from_secret: grafana_misc_stats_api_key
@ -792,7 +792,7 @@ steps:
  - ./bin/grabpl verify-drone
  - make gen-go
  - ./bin/grabpl verify-version ${DRONE_TAG}
-  - yarn install --frozen-lockfile --no-progress
+  - yarn install --immutable

 - name: codespell
  image: grafana/build-container:1.4.3
@ -938,7 +938,7 @@ steps:
 - name: end-to-end-tests
  image: grafana/ci-e2e:12.19.0-1
  commands:
-  - ./node_modules/.bin/cypress install
+  - yarn run cypress install
  - ./bin/grabpl e2e-tests --port 3001 --tries 3
  environment:
    HOST: end-to-end-tests-server
@ -1182,7 +1182,7 @@ steps:
  - ./bin/grabpl verify-drone
  - make gen-go
  - ./bin/grabpl verify-version ${DRONE_TAG}
-  - yarn install --frozen-lockfile --no-progress
+  - yarn install --immutable
  depends_on:
  - clone

@ -1362,7 +1362,7 @@ steps:
 - name: end-to-end-tests
  image: grafana/ci-e2e:12.19.0-1
  commands:
-  - ./node_modules/.bin/cypress install
+  - yarn run cypress install
  - ./bin/grabpl e2e-tests --port 3001 --tries 3
  environment:
    HOST: end-to-end-tests-server
@ -1512,7 +1512,7 @@ steps:
 - name: end-to-end-tests-enterprise2
  image: grafana/ci-e2e:12.19.0-1
  commands:
-  - ./node_modules/.bin/cypress install
+  - yarn run cypress install
  - ./bin/grabpl e2e-tests --port 3002 --tries 3
  environment:
    HOST: end-to-end-tests-server-enterprise2
@ -1778,7 +1778,7 @@ steps:
  - ./bin/grabpl verify-drone
  - make gen-go
  - ./bin/grabpl verify-version v7.3.0-test
-  - yarn install --frozen-lockfile --no-progress
+  - yarn install --immutable

 - name: codespell
  image: grafana/build-container:1.4.3
@ -1924,7 +1924,7 @@ steps:
 - name: end-to-end-tests
  image: grafana/ci-e2e:12.19.0-1
  commands:
-  - ./node_modules/.bin/cypress install
+  - yarn run cypress install
  - ./bin/grabpl e2e-tests --port 3001 --tries 3
  environment:
    HOST: end-to-end-tests-server
@ -2157,7 +2157,7 @@ steps:
  - ./bin/grabpl verify-drone
  - make gen-go
  - ./bin/grabpl verify-version v7.3.0-test
-  - yarn install --frozen-lockfile --no-progress
+  - yarn install --immutable
  depends_on:
  - clone

@ -2337,7 +2337,7 @@ steps:
 - name: end-to-end-tests
  image: grafana/ci-e2e:12.19.0-1
  commands:
-  - ./node_modules/.bin/cypress install
+  - yarn run cypress install
  - ./bin/grabpl e2e-tests --port 3001 --tries 3
  environment:
    HOST: end-to-end-tests-server
@ -2481,7 +2481,7 @@ steps:
 - name: end-to-end-tests-enterprise2
  image: grafana/ci-e2e:12.19.0-1
  commands:
-  - ./node_modules/.bin/cypress install
+  - yarn run cypress install
  - ./bin/grabpl e2e-tests --port 3002 --tries 3
  environment:
    HOST: end-to-end-tests-server-enterprise2
@ -2746,7 +2746,7 @@ steps:
  - chmod +x bin/grabpl
  - ./bin/grabpl verify-drone
  - make gen-go
-  - yarn install --frozen-lockfile --no-progress
+  - yarn install --immutable

 - name: codespell
  image: grafana/build-container:1.4.3
@ -2889,7 +2889,7 @@ steps:
 - name: end-to-end-tests
  image: grafana/ci-e2e:12.19.0-1
  commands:
-  - ./node_modules/.bin/cypress install
+  - yarn run cypress install
  - ./bin/grabpl e2e-tests --port 3001 --tries 3
  environment:
    HOST: end-to-end-tests-server
@ -3096,7 +3096,7 @@ steps:
  - mv /tmp/grabpl bin/
  - ./bin/grabpl verify-drone
  - make gen-go
-  - yarn install --frozen-lockfile --no-progress
+  - yarn install --immutable
  depends_on:
  - clone

@ -3270,7 +3270,7 @@ steps:
 - name: end-to-end-tests
  image: grafana/ci-e2e:12.19.0-1
  commands:
-  - ./node_modules/.bin/cypress install
+  - yarn run cypress install
  - ./bin/grabpl e2e-tests --port 3001 --tries 3
  environment:
    HOST: end-to-end-tests-server
@ -3424,7 +3424,7 @@ steps:
 - name: end-to-end-tests-enterprise2
  image: grafana/ci-e2e:12.19.0-1
  commands:
-  - ./node_modules/.bin/cypress install
+  - yarn run cypress install
  - ./bin/grabpl e2e-tests --port 3002 --tries 3
  environment:
    HOST: end-to-end-tests-server-enterprise2
--- a/.eslintignore
+++ b/.eslintignore
@ -6,3 +6,4 @@ devenv
 data
 dist
 e2e/tmp
+public/lib/monaco
--- a/.github/workflows/publish.yml
+++ b/.github/workflows/publish.yml
@ -16,16 +16,21 @@ jobs:
    steps:
    - uses: actions/checkout@v1
    - run: git clone --single-branch --no-tags --depth 1 -b master https://grafanabot:${{ secrets.GH_BOT_ACCESS_TOKEN }}@github.com/grafana/website-sync ./.github/actions/website-sync
-    - uses: actions/cache@v2.1.6
-      with:
-        path: '**/node_modules'
-        key: ${{ runner.os }}-modules-${{ hashFiles('**/yarn.lock') }}
    - name: generate-packages-docs
      uses: actions/setup-node@v2.4.1
      id: generate-docs
      with:
        node-version: '14'
-    - run: yarn install --pure-lockfile --no-progress
+    - name: Get yarn cache directory path
+      id: yarn-cache-dir-path
+      run: echo "::set-output name=dir::$(yarn config get cacheFolder)"
+    - uses: actions/cache@v2.1.6
+      with:
+        path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
+        key: yarn-${{ hashFiles('**/yarn.lock') }}
+        restore-keys: |
+            yarn-
+    - run: yarn install --immutable
    - run: ./scripts/ci-reference-docs-build.sh
    - name: publish-to-git
      uses: ./.github/actions/website-sync
--- a/.gitignore
+++ b/.gitignore
@ -12,12 +12,19 @@ awsconfig
 /emails/dist
 /reports
 /e2e/tmp
-.yarnrc
-.yarn/
 vendor/
 /docs/menu.yaml
 /requests

+# Yarn
+.yarn/*
+!.yarn/patches
+!.yarn/releases
+!.yarn/plugins
+!.yarn/sdks
+!.yarn/versions
+.pnp.*
+
 # Enterprise emails
 /emails/templates/enterprise_*
 /public/emails/enterprise_*
--- a/.yarn/plugins/@yarnpkg/plugin-typescript.cjs
+++ b/.yarn/plugins/@yarnpkg/plugin-typescript.cjs
--- a/.yarn/releases/yarn-3.1.0-rc.5.cjs
+++ b/.yarn/releases/yarn-3.1.0-rc.5.cjs
--- a/.yarnrc.yml
+++ b/.yarnrc.yml
@ -0,0 +1,13 @@
+enableTelemetry: false
+
+nmHoistingLimits: workspaces
+
+nmMode: hardlinks-global
+
+nodeLinker: node-modules
+
+plugins:
+  - path: .yarn/plugins/@yarnpkg/plugin-typescript.cjs
+    spec: "@yarnpkg/plugin-typescript"
+
+yarnPath: .yarn/releases/yarn-3.1.0-rc.5.cjs
--- a/2
+++ b/2
@ -26,7 +26,7 @@ deps: deps-js ## Install all dependencies.

 node_modules: package.json yarn.lock ## Install node modules.
 	@echo "install frontend dependencies"
-	yarn install --pure-lockfile --no-progress
+	YARN_ENABLE_PROGRESS_BARS=false yarn install --immutable

 ##@ Building

--- a/e2e/suite1/tsconfig.json
+++ b/e2e/suite1/tsconfig.json
@ -1,7 +1,4 @@
 {
-  "compilerOptions": {
-    "types": ["cypress"]
-  },
  "extends": "../../tsconfig.json",
  "include": ["**/*.ts", "../../packages/grafana-e2e/cypress/support/index.d.ts"],
  "resolveJsonModule": true
--- a/e2e/verify/tsconfig.json
+++ b/e2e/verify/tsconfig.json
@ -1,7 +1,4 @@
 {
-  "compilerOptions": {
-    "types": ["cypress"]
-  },
  "extends": "../../tsconfig.json",
  "include": ["**/*.ts", "../../packages/grafana-e2e/cypress/support/index.d.ts"]
 }
--- a/jest.config.js
+++ b/jest.config.js
@ -27,7 +27,11 @@ module.exports = {
    '\\.svg': '<rootDir>/public/test/mocks/svg.ts',
    '\\.css': '<rootDir>/public/test/mocks/style.ts',
    'monaco-editor/esm/vs/editor/editor.api': '<rootDir>/public/test/mocks/monaco.ts',
-    '^react($|/.+)': '<rootDir>/node_modules/react$1',
+    '^react($|/.+)$': '<rootDir>/node_modules/react$1',
+    '^react-router(.+)$': '<rootDir>/node_modules/react-router$1',
+    '^react-hook-form$': '<rootDir>/node_modules/react-hook-form',
+    '^enzyme($|/.+)$': '<rootDir>/node_modules/enzyme$1',
+    '^jquery$': '<rootDir>/node_modules/jquery',
  },
  watchPathIgnorePatterns: ['<rootDir>/node_modules/'],
 };
--- a/package.json
+++ b/package.json
@ -20,7 +20,7 @@
    "lint": "yarn run lint:ts && yarn run lint:sass",
    "lint:ts": "eslint . --ext .js,.tsx,.ts --cache",
    "lint:sass": "yarn run sass-lint -c public/sass/.sass-lint.yml 'public/sass/**/*.scss, packages/**/*.scss' -v -i '**/node_modules/**/*.scss'",
-    "test:ci": "mkdir -p reports/junit && export JEST_JUNIT_OUTPUT_DIR=reports/junit && jest --ci --reporters=default --reporters=jest-junit -w ${TEST_MAX_WORKERS:-100%}",
+    "test:ci": "mkdir -p reports/junit && JEST_JUNIT_OUTPUT_DIR=reports/junit jest --ci --reporters=default --reporters=jest-junit -w ${TEST_MAX_WORKERS:-100%}",
    "lint:fix": "yarn lint --fix",
    "packages:build": "lerna run clean && lerna run build --ignore @grafana-plugins/input-datasource",
    "packages:docsExtract": "rm -rf ./reports/docs && lerna run docsExtract",
@ -36,12 +36,9 @@
    "precommit": "yarn run lint-staged",
    "prettier:check": "prettier --list-different \"**/*.{ts,tsx,scss,md,mdx}\"",
    "prettier:write": "prettier --list-different \"**/*.{ts,tsx,scss,js,md,mdx}\" --write",
-    "prestart": "yarn themes:generate",
-    "prestart:hot": "yarn themes:generate",
-    "prestart:noTsCheck": "yarn themes:generate",
-    "start": "webpack --progress --color --watch --env noTsCheck=0 --config scripts/webpack/webpack.dev.js",
-    "start:hot": "webpack serve --progress --color --config scripts/webpack/webpack.hot.js",
-    "start:noTsCheck": "webpack --progress --color --watch --env noTsCheck=1 --config scripts/webpack/webpack.dev.js",
+    "start": "yarn themes:generate && webpack --progress --color --watch --env noTsCheck=0 --config scripts/webpack/webpack.dev.js",
+    "start:hot": "yarn themes:generate && webpack serve --progress --color --config scripts/webpack/webpack.hot.js",
+    "start:noTsCheck": "yarn themes:generate && webpack --progress --color --watch --env noTsCheck=1 --config scripts/webpack/webpack.dev.js",
    "stats": "webpack --mode production --config scripts/webpack/webpack.prod.js --profile --json > compilation-stats.json",
    "storybook": "yarn workspace @grafana/ui storybook --ci",
    "storybook:build": "yarn workspace @grafana/ui storybook:build",
@ -85,7 +82,10 @@
    "@emotion/eslint-plugin": "11.2.0",
    "@grafana/api-documenter": "7.11.2",
    "@grafana/api-extractor": "7.10.1",
+    "@grafana/e2e": "workspace:*",
    "@grafana/eslint-config": "2.5.0",
+    "@grafana/toolkit": "workspace:*",
+    "@grafana/tsconfig": "^1.0.0-rc1",
    "@kusto/monaco-kusto": "3.2.7",
    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.0-rc.6",
    "@testing-library/jest-dom": "5.11.5",
@ -117,6 +117,7 @@
    "@types/papaparse": "5.2.0",
    "@types/pluralize": "^0.0.29",
    "@types/prismjs": "1.16.0",
+    "@types/rc-time-picker": "^3",
    "@types/react": "16.9.9",
    "@types/react-beautiful-dnd": "13.1.1",
    "@types/react-dom": "16.9.9",
@ -152,6 +153,7 @@
    "copy-webpack-plugin": "9.0.1",
    "css-loader": "6.2.0",
    "css-minimizer-webpack-plugin": "^3.0.2",
+    "cypress": "8.4.1",
    "enzyme": "3.11.0",
    "enzyme-to-json": "3.4.4",
    "es-abstract": "1.18.0-next.1",
@ -178,10 +180,11 @@
    "html-webpack-plugin": "5.3.2",
    "http-server": "13.0.1",
    "husky": "4.2.1",
-    "iconscout-unicons-tarball": "https://github.com/grafana/icons/tarball/9728be621a4e7d891611149c9cd179e793f790a7",
+    "iconscout-unicons-tarball": "https://github.com/grafana/icons/tarball/63056cd833ba7ee4e94904492b3a8c0cabc38d28",
    "jest": "26.6.3",
    "jest-canvas-mock": "2.3.0",
    "jest-date-mock": "1.0.8",
+    "jest-junit": "^6.4.0",
    "jest-matcher-utils": "26.0.0",
    "lerna": "^4.0.0",
    "lint-staged": "10.0.7",
@ -211,6 +214,7 @@
    "terser-webpack-plugin": "5.1.4",
    "testing-library-selector": "^0.1.3",
    "ts-jest": "26.4.4",
+    "ts-loader": "8.0.11",
    "ts-node": "9.0.0",
    "tslib": "2.3.1",
    "typescript": "4.4.3",
@ -227,7 +231,13 @@
    "@emotion/css": "11.1.3",
    "@emotion/react": "11.1.5",
    "@grafana/aws-sdk": "0.0.3",
+    "@grafana/data": "workspace:*",
+    "@grafana/e2e-selectors": "workspace:*",
+    "@grafana/runtime": "workspace:*",
+    "@grafana/schema": "workspace:*",
    "@grafana/slate-react": "0.22.10-grafana",
+    "@grafana/ui": "workspace:*",
+    "@jaegertracing/jaeger-ui-components": "workspace:*",
    "@opentelemetry/api": "1.0.2",
    "@opentelemetry/exporter-collector": "0.23.0",
    "@opentelemetry/semantic-conventions": "0.23.0",
@ -281,6 +291,7 @@
    "memoize-one": "5.1.1",
    "moment": "2.29.1",
    "moment-timezone": "0.5.33",
+    "monaco-editor": "0.27.0",
    "monaco-promql": "^1.7.2",
    "mousetrap": "1.6.5",
    "mousetrap-global-bind": "1.1.0",
@ -290,6 +301,9 @@
    "prismjs": "1.25.0",
    "prop-types": "15.7.2",
    "rc-cascader": "1.5.0",
+    "rc-drawer": "4.4.0",
+    "rc-slider": "9.6.4",
+    "rc-time-picker": "^3.7.3",
    "re-resizable": "^6.2.0",
    "react": "17.0.1",
    "react-beautiful-dnd": "13.1.0",
@ -297,6 +311,8 @@
    "react-dom": "17.0.1",
    "react-grid-layout": "1.2.5",
    "react-highlight-words": "0.17.0",
+    "react-hook-form": "7.5.3",
+    "react-inlinesvg": "2.3.0",
    "react-loadable": "5.5.0",
    "react-popper": "2.2.4",
    "react-redux": "7.2.5",
@ -312,7 +328,7 @@
    "redux-thunk": "2.3.0",
    "regenerator-runtime": "0.13.3",
    "reselect": "4.0.0",
-    "rst2html": "github:thoward/rst2html#990cb89",
+    "rst2html": "github:thoward/rst2html#990cb89f2a300cdd9151790be377c4c0840df809",
    "rxjs": "7.3.0",
    "search-query-parser": "1.5.4",
    "semver": "^7.1.3",
@ -321,21 +337,23 @@
    "tether": "1.4.7",
    "tether-drop": "https://github.com/torkelo/drop",
    "tinycolor2": "1.4.1",
+    "uplot": "1.6.16",
    "uuid": "8.3.0",
    "visjs-network": "4.25.0",
    "whatwg-fetch": "3.1.0"
  },
  "resolutions": {
-    "underscore": "1.12.1"
+    "underscore": "1.12.1",
+    "@types/slate": "0.47.2",
+    "@microsoft/api-extractor-model": "7.10.3",
+    "@rushstack/node-core-library": "3.34.3",
+    "@rushstack/rig-package": "0.2.4",
+    "@rushstack/ts-command-line": "4.7.3"
  },
  "workspaces": {
    "packages": [
      "packages/*",
      "plugins-bundled/internal/*"
-    ],
-    "nohoist": [
-      "**/@types/*",
-      "**/@types/*/**"
    ]
  },
  "engines": {
@ -343,6 +361,7 @@
  },
  "volta": {
    "node": "14.16.0",
-    "yarn": "1.22.5"
-  }
+    "yarn": "3.1.0-rc.5"
+  },
+  "packageManager": "yarn@3.1.0-rc.5"
 }
--- a/packages/grafana-data/package.json
+++ b/packages/grafana-data/package.json
@ -54,6 +54,7 @@
    "rollup-plugin-visualizer": "4.2.0",
    "sinon": "8.1.1",
    "tinycolor2": "1.4.1",
+    "tslib": "2.3.1",
    "typescript": "4.4.3"
  },
  "volta": {
--- a/packages/grafana-e2e/package.json
+++ b/packages/grafana-e2e/package.json
@ -55,6 +55,7 @@
    "execa": "5.1.1",
    "resolve-as-bin": "2.1.0",
    "ts-loader": "6.2.1",
+    "tslib": "2.3.1",
    "typescript": "4.4.3",
    "yaml": "^1.8.3"
  },
--- a/packages/grafana-runtime/package.json
+++ b/packages/grafana-runtime/package.json
@ -22,12 +22,14 @@
    "typecheck": "tsc --noEmit"
  },
  "dependencies": {
+    "@emotion/css": "11.1.3",
    "@grafana/data": "8.3.0-pre",
    "@grafana/e2e-selectors": "8.3.0-pre",
    "@grafana/ui": "8.3.0-pre",
    "history": "4.10.1",
    "systemjs": "0.20.19",
-    "systemjs-plugin-css": "0.1.37"
+    "systemjs-plugin-css": "0.1.37",
+    "tslib": "2.3.1"
  },
  "devDependencies": {
    "@grafana/tsconfig": "^1.0.0-rc1",
--- a/packages/grafana-toolkit/config/circleci/config.yml
+++ b/packages/grafana-toolkit/config/circleci/config.yml
@ -59,7 +59,7 @@ executors:
  default_exec: # declares a reusable executor
    docker:
      - image: srclosson/grafana-plugin-ci-alpine:latest
-  e2e_exec: 
+  e2e_exec:
    docker:
      - image: srclosson/grafana-plugin-ci-e2e:latest

@ -76,7 +76,7 @@ jobs:
          name: Install dependencies
          command: |
            mkdir ci
-            [ -f ~/project/node_modules/.bin/grafana-toolkit ] || yarn install --frozen-lockfile
+            [ -f ~/project/node_modules/.bin/grafana-toolkit ] || yarn install --immutable
      - save_cache:
          name: save node_modules
          paths:
@ -193,7 +193,7 @@ jobs:
        command: |
          mkdir ci # Avoid error if not exists
          mkdir ci/jobs # Avoid error if not exists
-          mkdir ci/jobs/provisioning  
+          mkdir ci/jobs/provisioning
          mv plugin-provisioning/${PROVISIONING_REPO_PATH}/* ci/jobs/provisioning
    - persist_to_workspace:
        root: .
@ -228,7 +228,7 @@ jobs:
          ginstall canary
          /opt/grafana/bin/grafana-server -config ci/grafana-test-env/custom.ini -homepath /opt/grafana &
          ## To make sure grafana has started up
-          while ! $(netstat -tulpn | grep 3000 >/dev/null 2>&1); do sleep 1; done 
+          while ! $(netstat -tulpn | grep 3000 >/dev/null 2>&1); do sleep 1; done
          /opt/grafana/bin/grafana-cli --version
    - run:
        name: Copy provisioning files
--- a/packages/grafana-toolkit/package.json
+++ b/packages/grafana-toolkit/package.json
@ -32,6 +32,7 @@
    "@grafana/eslint-config": "2.5.0",
    "@grafana/tsconfig": "^1.0.0-rc1",
    "@grafana/ui": "8.3.0-pre",
+    "@rushstack/eslint-patch": "1.0.6",
    "@types/command-exists": "^1.2.0",
    "@types/fs-extra": "^9.0.13",
    "@types/inquirer": "^6.0.3",
@ -43,8 +44,6 @@
    "@types/semver": "^6.0.0",
    "@types/tmp": "^0.1.0",
    "@types/webpack": "4.41.7",
-    "@typescript-eslint/eslint-plugin": "4.28.0",
-    "@typescript-eslint/parser": "4.28.0",
    "axios": "0.21.2",
    "babel-jest": "26.6.3",
    "babel-loader": "8.2.2",
@ -56,10 +55,6 @@
    "copy-webpack-plugin": "5.1.2",
    "css-loader": "3.4.2",
    "eslint": "7.21.0",
-    "eslint-config-prettier": "7.2.0",
-    "eslint-plugin-jsdoc": "36.1.0",
-    "eslint-plugin-prettier": "3.3.1",
-    "eslint-plugin-react-hooks": "4.2.0",
    "execa": "^5.1.1",
    "file-loader": "5.0.2",
    "fork-ts-checker-webpack-plugin": "1.0.0",
--- a/packages/grafana-toolkit/src/cli/tasks/plugin.build.ts
+++ b/packages/grafana-toolkit/src/cli/tasks/plugin.build.ts
@ -100,7 +100,7 @@ export const lintPlugin = ({ fix }: Fixable = {}) =>
        if (filePaths.length > 0) {
          return filePaths[0];
        } else {
-          return resolvePath(__dirname, '../../config/eslint.plugin.json');
+          return resolvePath(__dirname, '../../config/eslint.plugin.js');
        }
      }
    );
@ -108,6 +108,7 @@ export const lintPlugin = ({ fix }: Fixable = {}) =>
    const cli = new CLIEngine({
      configFile,
      fix,
+      useEslintrc: false,
    });

    const report = cli.executeOnFiles(await getTypescriptSources());
--- a/packages/grafana-toolkit/src/cli/tasks/plugin/bundle.ts
+++ b/packages/grafana-toolkit/src/cli/tasks/plugin/bundle.ts
@ -25,6 +25,7 @@ export const bundlePlugin = async ({ watch, production, preserveConsole }: Plugi
      console.log('Started watching plugin for changes...');
      compiler.watch({}, (err, stats) => {});

+      // @ts-ignore
      compiler.hooks.invalid.tap('invalid', () => {
        clearConsole();
        console.log('Compiling...');
--- a/packages/grafana-toolkit/src/cli/tasks/toolkit.build.ts
+++ b/packages/grafana-toolkit/src/cli/tasks/toolkit.build.ts
@ -54,7 +54,7 @@ const copyFiles = () => {
    'src/config/prettier.plugin.rc.js',
    'src/config/tsconfig.plugin.json',
    'src/config/tsconfig.plugin.local.json',
-    'src/config/eslint.plugin.json',
+    'src/config/eslint.plugin.js',
    'src/config/styles.mock.js',
    'src/config/jest.plugin.config.local.js',
    'src/config/matchMedia.js',
--- a/packages/grafana-toolkit/src/cli/utils/pascalCase.ts
+++ b/packages/grafana-toolkit/src/cli/utils/pascalCase.ts
@ -1,3 +1,3 @@
 import { flow, camelCase, upperFirst } from 'lodash';

-export const pascalCase = flow(camelCase, upperFirst);
+export const pascalCase = flow([camelCase, upperFirst]);
--- a/packages/grafana-toolkit/src/config/eslint.plugin.js
+++ b/packages/grafana-toolkit/src/config/eslint.plugin.js
@ -0,0 +1,8 @@
+require('@rushstack/eslint-patch/modern-module-resolution');
+
+module.exports = {
+  extends: ['@grafana/eslint-config'],
+  rules: {
+    'react/prop-types': 'off',
+  },
+};
--- a/packages/grafana-toolkit/src/config/eslint.plugin.json
+++ b/packages/grafana-toolkit/src/config/eslint.plugin.json
@ -1,6 +0,0 @@
-{
-  "extends": ["@grafana/eslint-config"],
-  "rules": {
-    "react/prop-types": "off"
-  }
-}
--- a/packages/grafana-ui/package.json
+++ b/packages/grafana-ui/package.json
@ -73,6 +73,7 @@
    "react-transition-group": "4.4.1",
    "slate": "0.47.8",
    "tinycolor2": "1.4.1",
+    "tslib": "2.3.1",
    "uplot": "1.6.16"
  },
  "devDependencies": {
@ -112,7 +113,10 @@
    "@types/slate": "0.47.2",
    "@types/slate-react": "0.22.5",
    "@types/tinycolor2": "1.4.1",
+    "@wojtekmaj/enzyme-adapter-react-17": "0.6.2",
    "common-tags": "^1.8.0",
+    "csstype": "3.0.9",
+    "enzyme": "3.11.0",
    "mock-raf": "1.0.1",
    "react-docgen-typescript-loader": "3.7.2",
    "react-test-renderer": "17.0.1",
--- a/packages/grafana-ui/src/components/ColorPicker/NamedColorsGroup.tsx
+++ b/packages/grafana-ui/src/components/ColorPicker/NamedColorsGroup.tsx
@ -1,12 +1,12 @@
 import React, { FunctionComponent } from 'react';
 import { ThemeVizHue } from '@grafana/data';
-import { Color } from 'csstype';
+import { Property } from 'csstype';
 import { ColorSwatch, ColorSwatchVariant } from './ColorSwatch';
 import { upperFirst } from 'lodash';

 interface NamedColorsGroupProps {
  hue: ThemeVizHue;
-  selectedColor?: Color;
+  selectedColor?: Property.Color;
  onColorSelect: (colorName: string) => void;
  key?: string;
 }
--- a/packages/grafana-ui/src/components/DateTimePickers/_TimeOfDayPicker.scss
+++ b/packages/grafana-ui/src/components/DateTimePickers/_TimeOfDayPicker.scss
@ -1,4 +1,4 @@
-@import '../../node_modules/rc-time-picker/assets/index.css';
+@import '~rc-time-picker/assets/index.css';

 .rc-time-picker-input,
 .rc-time-picker-panel-input-wrap,
--- a/packages/grafana-ui/src/components/Drawer/_Drawer.scss
+++ b/packages/grafana-ui/src/components/Drawer/_Drawer.scss
@ -1,2 +1,2 @@
 // Need to import this to get default styles from rc-drawer
-@import '../../node_modules/rc-drawer/assets/index.css';
+@import '~rc-drawer/assets/index.css';
--- a/packages/grafana-ui/src/components/Link/Link.tsx
+++ b/packages/grafana-ui/src/components/Link/Link.tsx
@ -11,6 +11,7 @@ export const Link = forwardRef<HTMLAnchorElement, Props>(({ href, children, ...r
  const validUrl = locationUtil.stripBaseFromUrl(textUtil.sanitizeUrl(href ?? ''));

  return (
+    // @ts-ignore
    <RouterLink ref={ref as React.Ref<HTMLAnchorElement>} to={validUrl} {...rest}>
      {children}
    </RouterLink>
--- a/packages/grafana-ui/src/components/Slider/_Slider.scss
+++ b/packages/grafana-ui/src/components/Slider/_Slider.scss
@ -1 +1 @@
-@import '../../node_modules/rc-slider/assets/index.css';
+@import '~rc-slider/assets/index.css';
--- a/packages/grafana-ui/src/components/Table/utils.ts
+++ b/packages/grafana-ui/src/components/Table/utils.ts
@ -1,6 +1,6 @@
 import { Column, Row } from 'react-table';
 import memoizeOne from 'memoize-one';
-import { ContentPosition } from 'csstype';
+import { Property } from 'csstype';
 import {
  DataFrame,
  Field,
@ -17,7 +17,7 @@ import { JSONViewCell } from './JSONViewCell';
 import { ImageCell } from './ImageCell';
 import { getFooterValue } from './FooterRow';

-export function getTextAlign(field?: Field): ContentPosition {
+export function getTextAlign(field?: Field): Property.JustifyContent {
  if (!field) {
    return 'flex-start';
  }
--- a/packages/grafana-ui/src/components/uPlot/Plot.scss
+++ b/packages/grafana-ui/src/components/uPlot/Plot.scss
@ -1,5 +1,5 @@
 // importing the uPlot css so it will be bundled with the rest of the styling.
-@import '../../node_modules/uplot/dist/uPlot.min.css';
+@import '~uplot/dist/uPlot.min.css';

 .uplot {
  font-family: inherit;
--- a/packages/jaeger-ui-components/package.json
+++ b/packages/jaeger-ui-components/package.json
@ -22,6 +22,7 @@
    "@types/deep-freeze": "^0.1.1",
    "@types/hoist-non-react-statics": "^3.3.1",
    "@types/lodash": "^4.14.123",
+    "@types/react": "16.9.9",
    "@types/react-icons": "2.2.7",
    "@types/recompose": "^0.30.7",
    "@types/slate-react": "0.22.5",
@ -37,9 +38,11 @@
    "lru-memoize": "^1.1.0",
    "memoize-one": "^5.0.0",
    "moment": "2.29.1",
+    "react": "17.0.1",
    "react-icons": "2.2.7",
    "recompose": "^0.25.0",
    "tinycolor2": "1.4.1",
+    "tslib": "2.3.1",
    "tween-functions": "^1.2.0"
  },
  "volta": {
--- a/public/app/features/alerting/unified/RuleEditor.test.tsx
+++ b/public/app/features/alerting/unified/RuleEditor.test.tsx
@ -316,7 +316,7 @@ describe('RuleEditor', () => {
      uid: 'abcd',
      id: 1,
    };
-    jest.spyOn(api, 'searchFolders').mockResolvedValue([folder] as DashboardSearchHit[]);
+    const searchFolderMock = jest.spyOn(api, 'searchFolders').mockResolvedValue([folder] as DashboardSearchHit[]);
    const getFolderByUid = jest.fn().mockResolvedValue({
      ...folder,
      canSave: true,
@ -363,6 +363,7 @@ describe('RuleEditor', () => {
    });

    await renderRuleEditor(uid);
+    await waitFor(() => expect(searchFolderMock).toHaveBeenCalled());

    // check that it's filled in
    const nameInput = await ui.inputs.name.find();
--- a/public/sass/components/_page_header.scss
+++ b/public/sass/components/_page_header.scss
@ -1,4 +1,6 @@
 .page-header {
+  margin-top: $space-md;
+
  .btn {
    float: right;
    margin-left: $space-md;
@ -10,8 +12,6 @@
    }
  }

-  margin-top: $space-md;
-
  @include media-breakpoint-up(md) {
    margin-top: 0;
  }
--- a/public/test/matchers/utils.ts
+++ b/public/test/matchers/utils.ts
@ -1,6 +1,6 @@
 import { matcherHint, printExpected, printReceived } from 'jest-matcher-utils';
 import { OBSERVABLE_TEST_TIMEOUT_IN_MS } from './types';
-import { asapScheduler, Observable, Subscription, timer } from 'rxjs';
+import { asapScheduler, Subscription, timer, isObservable } from 'rxjs';

 export function forceObservableCompletion(subscription: Subscription, resolve: (args: any) => void) {
  const timeoutObservable = timer(OBSERVABLE_TEST_TIMEOUT_IN_MS, asapScheduler);
@ -35,7 +35,7 @@ Expected ${printReceived(received)} to be ${printExpected('defined')}.`,
 }

 export function expectObservableToBeObservable(received: any): jest.CustomMatcherResult | null {
-  if (received instanceof Observable) {
+  if (isObservable(received)) {
    return null;
  }

--- a/scripts/build/build.sh
+++ b/scripts/build/build.sh
@ -96,7 +96,7 @@ function build_frontend() {
  if [ ! -d "dist" ]; then
    mkdir dist
  fi
-  yarn install --pure-lockfile --no-progress
+  YARN_ENABLE_PROGRESS_BARS=false yarn install --immutable
  echo "Building frontend"

  start=$(date +%s%N)
--- a/scripts/build/ci-build/Dockerfile
+++ b/scripts/build/ci-build/Dockerfile
@ -109,7 +109,7 @@ ENV GOVERSION=1.17 \
    PATH=/usr/local/go/bin:$PATH \
    GOPATH=/go \
    NODEVERSION=14.17.6-1nodesource1 \
-    YARNVERSION=1.22.5-1
+    YARNVERSION=3.1.0-rc.5

 # Use ARG so as not to persist environment variable in image
 ARG DEBIAN_FRONTEND=noninteractive
--- a/scripts/build/old_appveyor.yml
+++ b/scripts/build/old_appveyor.yml
@ -14,7 +14,7 @@ install:
  # install nodejs and npm
  - ps: Install-Product node $env:nodejs_version
  - npm install -g yarn --silent
-  - yarn install --pure-lockfile --no-progress
+  - YARN_ENABLE_PROGRESS_BARS=false yarn install --immutable
  - npm install -g grunt-cli
  - appveyor DownloadFile https://storage.googleapis.com/golang/go%GOVERSION%.windows-amd64.zip
  - 7z x go%GOVERSION%.windows-amd64.zip -y -oC:\ > NUL
--- a/scripts/drone/steps/lib.star
+++ b/scripts/drone/steps/lib.star
@ -62,7 +62,7 @@ def initialize_step(edition, platform, ver_mode, is_downstream=False, install_de

    if install_deps:
        common_cmds.extend([
-            'yarn install --frozen-lockfile --no-progress',
+            'yarn install --immutable',
        ])
    if edition in ('enterprise', 'enterprise2'):
        source_commit = ''
@ -427,7 +427,7 @@ def test_a11y_frontend_step(edition, port=3001):
        'failure': 'ignore',
        'commands': [
            'yarn wait-on http://$HOST:$PORT',
-            'yarn -s test:accessibility --json > pa11y-ci-results.json',
+            'yarn run test:accessibility --json > pa11y-ci-results.json',
        ],
    }

@ -446,7 +446,7 @@ def test_a11y_frontend_step_pr(edition, port=3001):
        'failure': 'ignore',
        'commands': [
            'yarn wait-on http://$HOST:$PORT',
-            'yarn -s test:accessibility-pr',
+            'yarn run test:accessibility-pr',
        ],
    }

@ -632,7 +632,7 @@ def e2e_tests_step(edition, port=3001, tries=None):
        'commands': [
            # Have to re-install Cypress since it insists on searching for its binary beneath /root/.cache,
            # even though the Yarn cache directory is beneath /usr/local/share somewhere
-            './node_modules/.bin/cypress install',
+            'yarn run cypress install',
            cmd,
        ],
    }
--- a/scripts/webpack/webpack.common.js
+++ b/scripts/webpack/webpack.common.js
@ -38,6 +38,11 @@ module.exports = {
      // storybook v6 bump caused the app to bundle multiple versions of react breaking hooks
      // make sure to resolve only from the project: https://github.com/facebook/react/issues/13991#issuecomment-435587809
      react: path.resolve(__dirname, '../../node_modules/react'),
+      // Needed as these don't work across different execution contexts, which can cause
+      // problems with @grafana/ui
+      'react-router': require.resolve('react-router'),
+      'react-router-dom': require.resolve('react-router-dom'),
+      jquery: require.resolve('jquery'),
      // some of data source pluginis use global Prism object to add the language definition
      // we want to have same Prism object in core and in grafana/ui
      prismjs: path.resolve(__dirname, '../../node_modules/prismjs'),
@ -49,6 +54,7 @@ module.exports = {
      path.resolve('node_modules'),
    ],
    fallback: {
+      buffer: false,
      fs: false,
      stream: false,
      http: false,
--- a/yarn.lock
+++ b/yarn.lock