Chore: Switch yarn 2 to plug-n-play strategy (#40300)

.drone.yml

@@ -165,7 +165,7 @@ steps:
   - '# It is required that the generated Typescript be in sync with the input CUE
     files.'
   - '# ...Modulo eslint auto-fixes...:'
-  - ./node_modules/.bin/eslint . --ext .gen.ts --fix
+  - yarn run eslint . --ext .gen.ts --fix
   - '# If any filenames are emitted by the below script, run the generator command
     `grafana-cli cue gen-ts` locally and commit the result.'
   - ./scripts/clean-git-or-error.sh
@@ -439,7 +439,7 @@ steps:
   - '# It is required that the generated Typescript be in sync with the input CUE
     files.'
   - '# ...Modulo eslint auto-fixes...:'
-  - ./node_modules/.bin/eslint . --ext .gen.ts --fix
+  - yarn run eslint . --ext .gen.ts --fix
   - '# If any filenames are emitted by the below script, run the generator command
     `grafana-cli cue gen-ts` locally and commit the result.'
   - ./scripts/clean-git-or-error.sh
@@ -894,7 +894,7 @@ steps:
   - '# It is required that the generated Typescript be in sync with the input CUE
     files.'
   - '# ...Modulo eslint auto-fixes...:'
-  - ./node_modules/.bin/eslint . --ext .gen.ts --fix
+  - yarn run eslint . --ext .gen.ts --fix
   - '# If any filenames are emitted by the below script, run the generator command
     `grafana-cli cue gen-ts` locally and commit the result.'
   - ./scripts/clean-git-or-error.sh
@@ -1273,7 +1273,7 @@ steps:
   - '# It is required that the generated Typescript be in sync with the input CUE
     files.'
   - '# ...Modulo eslint auto-fixes...:'
-  - ./node_modules/.bin/eslint . --ext .gen.ts --fix
+  - yarn run eslint . --ext .gen.ts --fix
   - '# If any filenames are emitted by the below script, run the generator command
     `grafana-cli cue gen-ts` locally and commit the result.'
   - ./scripts/clean-git-or-error.sh
@@ -1828,7 +1828,7 @@ steps:
   - '# It is required that the generated Typescript be in sync with the input CUE
     files.'
   - '# ...Modulo eslint auto-fixes...:'
-  - ./node_modules/.bin/eslint . --ext .gen.ts --fix
+  - yarn run eslint . --ext .gen.ts --fix
   - '# If any filenames are emitted by the below script, run the generator command
     `grafana-cli cue gen-ts` locally and commit the result.'
   - ./scripts/clean-git-or-error.sh
@@ -2196,7 +2196,7 @@ steps:
   - '# It is required that the generated Typescript be in sync with the input CUE
     files.'
   - '# ...Modulo eslint auto-fixes...:'
-  - ./node_modules/.bin/eslint . --ext .gen.ts --fix
+  - yarn run eslint . --ext .gen.ts --fix
   - '# If any filenames are emitted by the below script, run the generator command
     `grafana-cli cue gen-ts` locally and commit the result.'
   - ./scripts/clean-git-or-error.sh
@@ -2746,7 +2746,7 @@ steps:
   - '# It is required that the generated Typescript be in sync with the input CUE
     files.'
   - '# ...Modulo eslint auto-fixes...:'
-  - ./node_modules/.bin/eslint . --ext .gen.ts --fix
+  - yarn run eslint . --ext .gen.ts --fix
   - '# If any filenames are emitted by the below script, run the generator command
     `grafana-cli cue gen-ts` locally and commit the result.'
   - ./scripts/clean-git-or-error.sh
@@ -3086,7 +3086,7 @@ steps:
   - '# It is required that the generated Typescript be in sync with the input CUE
     files.'
   - '# ...Modulo eslint auto-fixes...:'
-  - ./node_modules/.bin/eslint . --ext .gen.ts --fix
+  - yarn run eslint . --ext .gen.ts --fix
   - '# If any filenames are emitted by the below script, run the generator command
     `grafana-cli cue gen-ts` locally and commit the result.'
   - ./scripts/clean-git-or-error.sh
@@ -3449,6 +3449,6 @@ kind: secret
 name: drone_token
 ---
 kind: signature
-hmac: 103fe906b04e8a336e3113007921d62a57107bc7a86a14442b438fa54406c084
+hmac: c8c7de29c5b4390cab96212211d21c14defa84d3029560e6b19c47a1377a6137
 
 ...

.yarn/sdks/eslint/bin/eslint.js

@@ -0,0 +1,20 @@
+#!/usr/bin/env node
+
+const {existsSync} = require(`fs`);
+const {createRequire, createRequireFromPath} = require(`module`);
+const {resolve} = require(`path`);
+
+const relPnpApiPath = "../../../../.pnp.cjs";
+
+const absPnpApiPath = resolve(__dirname, relPnpApiPath);
+const absRequire = (createRequire || createRequireFromPath)(absPnpApiPath);
+
+if (existsSync(absPnpApiPath)) {
+  if (!process.versions.pnp) {
+    // Setup the environment to be able to require eslint/bin/eslint.js
+    require(absPnpApiPath).setup();
+  }
+}
+
+// Defer to the real eslint/bin/eslint.js your application uses
+module.exports = absRequire(`eslint/bin/eslint.js`);

.yarn/sdks/eslint/lib/api.js

@@ -0,0 +1,20 @@
+#!/usr/bin/env node
+
+const {existsSync} = require(`fs`);
+const {createRequire, createRequireFromPath} = require(`module`);
+const {resolve} = require(`path`);
+
+const relPnpApiPath = "../../../../.pnp.cjs";
+
+const absPnpApiPath = resolve(__dirname, relPnpApiPath);
+const absRequire = (createRequire || createRequireFromPath)(absPnpApiPath);
+
+if (existsSync(absPnpApiPath)) {
+  if (!process.versions.pnp) {
+    // Setup the environment to be able to require eslint/lib/api.js
+    require(absPnpApiPath).setup();
+  }
+}
+
+// Defer to the real eslint/lib/api.js your application uses
+module.exports = absRequire(`eslint/lib/api.js`);

.yarn/sdks/eslint/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "eslint",
+  "version": "7.21.0-sdk",
+  "main": "./lib/api.js",
+  "type": "commonjs"
+}

.yarn/sdks/integrations.yml

@@ -0,0 +1,5 @@
+# This file is automatically generated by @yarnpkg/sdks.
+# Manual changes might be lost!
+
+integrations:
+  - vscode

.yarn/sdks/prettier/index.js

@@ -0,0 +1,20 @@
+#!/usr/bin/env node
+
+const {existsSync} = require(`fs`);
+const {createRequire, createRequireFromPath} = require(`module`);
+const {resolve} = require(`path`);
+
+const relPnpApiPath = "../../../.pnp.cjs";
+
+const absPnpApiPath = resolve(__dirname, relPnpApiPath);
+const absRequire = (createRequire || createRequireFromPath)(absPnpApiPath);
+
+if (existsSync(absPnpApiPath)) {
+  if (!process.versions.pnp) {
+    // Setup the environment to be able to require prettier/index.js
+    require(absPnpApiPath).setup();
+  }
+}
+
+// Defer to the real prettier/index.js your application uses
+module.exports = absRequire(`prettier/index.js`);

.yarn/sdks/prettier/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "prettier",
+  "version": "2.2.1-sdk",
+  "main": "./index.js",
+  "type": "commonjs"
+}

.yarn/sdks/stylelint/bin/stylelint.js

@@ -0,0 +1,20 @@
+#!/usr/bin/env node
+
+const {existsSync} = require(`fs`);
+const {createRequire, createRequireFromPath} = require(`module`);
+const {resolve} = require(`path`);
+
+const relPnpApiPath = "../../../../.pnp.cjs";
+
+const absPnpApiPath = resolve(__dirname, relPnpApiPath);
+const absRequire = (createRequire || createRequireFromPath)(absPnpApiPath);
+
+if (existsSync(absPnpApiPath)) {
+  if (!process.versions.pnp) {
+    // Setup the environment to be able to require stylelint/bin/stylelint.js
+    require(absPnpApiPath).setup();
+  }
+}
+
+// Defer to the real stylelint/bin/stylelint.js your application uses
+module.exports = absRequire(`stylelint/bin/stylelint.js`);

.yarn/sdks/stylelint/lib/index.js

@@ -0,0 +1,20 @@
+#!/usr/bin/env node
+
+const {existsSync} = require(`fs`);
+const {createRequire, createRequireFromPath} = require(`module`);
+const {resolve} = require(`path`);
+
+const relPnpApiPath = "../../../../.pnp.cjs";
+
+const absPnpApiPath = resolve(__dirname, relPnpApiPath);
+const absRequire = (createRequire || createRequireFromPath)(absPnpApiPath);
+
+if (existsSync(absPnpApiPath)) {
+  if (!process.versions.pnp) {
+    // Setup the environment to be able to require stylelint/lib/index.js
+    require(absPnpApiPath).setup();
+  }
+}
+
+// Defer to the real stylelint/lib/index.js your application uses
+module.exports = absRequire(`stylelint/lib/index.js`);

.yarn/sdks/stylelint/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "stylelint",
+  "version": "13.13.1-sdk",
+  "main": "lib/index.js",
+  "type": "commonjs"
+}

.yarn/sdks/typescript/bin/tsc

@@ -0,0 +1,20 @@
+#!/usr/bin/env node
+
+const {existsSync} = require(`fs`);
+const {createRequire, createRequireFromPath} = require(`module`);
+const {resolve} = require(`path`);
+
+const relPnpApiPath = "../../../../.pnp.cjs";
+
+const absPnpApiPath = resolve(__dirname, relPnpApiPath);
+const absRequire = (createRequire || createRequireFromPath)(absPnpApiPath);
+
+if (existsSync(absPnpApiPath)) {
+  if (!process.versions.pnp) {
+    // Setup the environment to be able to require typescript/bin/tsc
+    require(absPnpApiPath).setup();
+  }
+}
+
+// Defer to the real typescript/bin/tsc your application uses
+module.exports = absRequire(`typescript/bin/tsc`);

.yarn/sdks/typescript/bin/tsserver

@@ -0,0 +1,20 @@
+#!/usr/bin/env node
+
+const {existsSync} = require(`fs`);
+const {createRequire, createRequireFromPath} = require(`module`);
+const {resolve} = require(`path`);
+
+const relPnpApiPath = "../../../../.pnp.cjs";
+
+const absPnpApiPath = resolve(__dirname, relPnpApiPath);
+const absRequire = (createRequire || createRequireFromPath)(absPnpApiPath);
+
+if (existsSync(absPnpApiPath)) {
+  if (!process.versions.pnp) {
+    // Setup the environment to be able to require typescript/bin/tsserver
+    require(absPnpApiPath).setup();
+  }
+}
+
+// Defer to the real typescript/bin/tsserver your application uses
+module.exports = absRequire(`typescript/bin/tsserver`);

.yarn/sdks/typescript/lib/tsc.js

@@ -0,0 +1,20 @@
+#!/usr/bin/env node
+
+const {existsSync} = require(`fs`);
+const {createRequire, createRequireFromPath} = require(`module`);
+const {resolve} = require(`path`);
+
+const relPnpApiPath = "../../../../.pnp.cjs";
+
+const absPnpApiPath = resolve(__dirname, relPnpApiPath);
+const absRequire = (createRequire || createRequireFromPath)(absPnpApiPath);
+
+if (existsSync(absPnpApiPath)) {
+  if (!process.versions.pnp) {
+    // Setup the environment to be able to require typescript/lib/tsc.js
+    require(absPnpApiPath).setup();
+  }
+}
+
+// Defer to the real typescript/lib/tsc.js your application uses
+module.exports = absRequire(`typescript/lib/tsc.js`);

.yarn/sdks/typescript/lib/tsserver.js

@@ -0,0 +1,184 @@
+#!/usr/bin/env node
+
+const {existsSync} = require(`fs`);
+const {createRequire, createRequireFromPath} = require(`module`);
+const {resolve} = require(`path`);
+
+const relPnpApiPath = "../../../../.pnp.cjs";
+
+const absPnpApiPath = resolve(__dirname, relPnpApiPath);
+const absRequire = (createRequire || createRequireFromPath)(absPnpApiPath);
+
+const moduleWrapper = tsserver => {
+  if (!process.versions.pnp) {
+    return tsserver;
+  }
+
+  const {isAbsolute} = require(`path`);
+  const pnpApi = require(`pnpapi`);
+
+  const isVirtual = str => str.match(/\/(\$\$virtual|__virtual__)\//);
+  const normalize = str => str.replace(/\\/g, `/`).replace(/^\/?/, `/`);
+
+  const dependencyTreeRoots = new Set(pnpApi.getDependencyTreeRoots().map(locator => {
+    return `${locator.name}@${locator.reference}`;
+  }));
+
+  // VSCode sends the zip paths to TS using the "zip://" prefix, that TS
+  // doesn't understand. This layer makes sure to remove the protocol
+  // before forwarding it to TS, and to add it back on all returned paths.
+
+  function toEditorPath(str) {
+    // We add the `zip:` prefix to both `.zip/` paths and virtual paths
+    if (isAbsolute(str) && !str.match(/^\^?(zip:|\/zip\/)/) && (str.match(/\.zip\//) || isVirtual(str))) {
+      // We also take the opportunity to turn virtual paths into physical ones;
+      // this makes it much easier to work with workspaces that list peer
+      // dependencies, since otherwise Ctrl+Click would bring us to the virtual
+      // file instances instead of the real ones.
+      //
+      // We only do this to modules owned by the the dependency tree roots.
+      // This avoids breaking the resolution when jumping inside a vendor
+      // with peer dep (otherwise jumping into react-dom would show resolution
+      // errors on react).
+      //
+      const resolved = isVirtual(str) ? pnpApi.resolveVirtual(str) : str;
+      if (resolved) {
+        const locator = pnpApi.findPackageLocator(resolved);
+        if (locator && dependencyTreeRoots.has(`${locator.name}@${locator.reference}`)) {
+          str = resolved;
+        }
+      }
+
+      str = normalize(str);
+
+      if (str.match(/\.zip\//)) {
+        switch (hostInfo) {
+          // Absolute VSCode `Uri.fsPath`s need to start with a slash.
+          // VSCode only adds it automatically for supported schemes,
+          // so we have to do it manually for the `zip` scheme.
+          // The path needs to start with a caret otherwise VSCode doesn't handle the protocol
+          //
+          // Ref: https://github.com/microsoft/vscode/issues/105014#issuecomment-686760910
+          //
+          // Update Oct 8 2021: VSCode changed their format in 1.61.
+          // Before | ^zip:/c:/foo/bar.zip/package.json
+          // After  | ^/zip//c:/foo/bar.zip/package.json
+          //
+          case `vscode <1.61`: {
+            str = `^zip:${str}`;
+          } break;
+
+          case `vscode`: {
+            str = `^/zip/${str}`;
+          } break;
+
+          // To make "go to definition" work,
+          // We have to resolve the actual file system path from virtual path
+          // and convert scheme to supported by [vim-rzip](https://github.com/lbrayner/vim-rzip)
+          case `coc-nvim`: {
+            str = normalize(resolved).replace(/\.zip\//, `.zip::`);
+            str = resolve(`zipfile:${str}`);
+          } break;
+
+          // Support neovim native LSP and [typescript-language-server](https://github.com/theia-ide/typescript-language-server)
+          // We have to resolve the actual file system path from virtual path,
+          // everything else is up to neovim
+          case `neovim`: {
+            str = normalize(resolved).replace(/\.zip\//, `.zip::`);
+            str = `zipfile:${str}`;
+          } break;
+
+          default: {
+            str = `zip:${str}`;
+          } break;
+        }
+      }
+    }
+
+    return str;
+  }
+
+  function fromEditorPath(str) {
+    switch (hostInfo) {
+      case `coc-nvim`:
+      case `neovim`: {
+        str = str.replace(/\.zip::/, `.zip/`);
+        // The path for coc-nvim is in format of /<pwd>/zipfile:/<pwd>/.yarn/...
+        // So in order to convert it back, we use .* to match all the thing
+        // before `zipfile:`
+        return process.platform === `win32`
+          ? str.replace(/^.*zipfile:\//, ``)
+          : str.replace(/^.*zipfile:/, ``);
+      } break;
+
+      case `vscode`:
+      default: {
+        return process.platform === `win32`
+          ? str.replace(/^\^?(zip:|\/zip)\/+/, ``)
+          : str.replace(/^\^?(zip:|\/zip)\/+/, `/`);
+      } break;
+    }
+  }
+
+  // Force enable 'allowLocalPluginLoads'
+  // TypeScript tries to resolve plugins using a path relative to itself
+  // which doesn't work when using the global cache
+  // https://github.com/microsoft/TypeScript/blob/1b57a0395e0bff191581c9606aab92832001de62/src/server/project.ts#L2238
+  // VSCode doesn't want to enable 'allowLocalPluginLoads' due to security concerns but
+  // TypeScript already does local loads and if this code is running the user trusts the workspace
+  // https://github.com/microsoft/vscode/issues/45856
+  const ConfiguredProject = tsserver.server.ConfiguredProject;
+  const {enablePluginsWithOptions: originalEnablePluginsWithOptions} = ConfiguredProject.prototype;
+  ConfiguredProject.prototype.enablePluginsWithOptions = function() {
+    this.projectService.allowLocalPluginLoads = true;
+    return originalEnablePluginsWithOptions.apply(this, arguments);
+  };
+
+  // And here is the point where we hijack the VSCode <-> TS communications
+  // by adding ourselves in the middle. We locate everything that looks
+  // like an absolute path of ours and normalize it.
+
+  const Session = tsserver.server.Session;
+  const {onMessage: originalOnMessage, send: originalSend} = Session.prototype;
+  let hostInfo = `unknown`;
+
+  Object.assign(Session.prototype, {
+    onMessage(/** @type {string} */ message) {
+      const parsedMessage = JSON.parse(message)
+
+      if (
+        parsedMessage != null &&
+        typeof parsedMessage === `object` &&
+        parsedMessage.arguments &&
+        typeof parsedMessage.arguments.hostInfo === `string`
+      ) {
+        hostInfo = parsedMessage.arguments.hostInfo;
+        if (hostInfo === `vscode` && process.env.VSCODE_IPC_HOOK && process.env.VSCODE_IPC_HOOK.match(/Code\/1\.([1-5][0-9]|60)\./)) {
+          hostInfo += ` <1.61`;
+        }
+      }
+
+      return originalOnMessage.call(this, JSON.stringify(parsedMessage, (key, value) => {
+        return typeof value === `string` ? fromEditorPath(value) : value;
+      }));
+    },
+
+    send(/** @type {any} */ msg) {
+      return originalSend.call(this, JSON.parse(JSON.stringify(msg, (key, value) => {
+        return typeof value === `string` ? toEditorPath(value) : value;
+      })));
+    }
+  });
+
+  return tsserver;
+};
+
+if (existsSync(absPnpApiPath)) {
+  if (!process.versions.pnp) {
+    // Setup the environment to be able to require typescript/lib/tsserver.js
+    require(absPnpApiPath).setup();
+  }
+}
+
+// Defer to the real typescript/lib/tsserver.js your application uses
+module.exports = moduleWrapper(absRequire(`typescript/lib/tsserver.js`));

.yarn/sdks/typescript/lib/tsserverlibrary.js

@@ -0,0 +1,184 @@
+#!/usr/bin/env node
+
+const {existsSync} = require(`fs`);
+const {createRequire, createRequireFromPath} = require(`module`);
+const {resolve} = require(`path`);
+
+const relPnpApiPath = "../../../../.pnp.cjs";
+
+const absPnpApiPath = resolve(__dirname, relPnpApiPath);
+const absRequire = (createRequire || createRequireFromPath)(absPnpApiPath);
+
+const moduleWrapper = tsserver => {
+  if (!process.versions.pnp) {
+    return tsserver;
+  }
+
+  const {isAbsolute} = require(`path`);
+  const pnpApi = require(`pnpapi`);
+
+  const isVirtual = str => str.match(/\/(\$\$virtual|__virtual__)\//);
+  const normalize = str => str.replace(/\\/g, `/`).replace(/^\/?/, `/`);
+
+  const dependencyTreeRoots = new Set(pnpApi.getDependencyTreeRoots().map(locator => {
+    return `${locator.name}@${locator.reference}`;
+  }));
+
+  // VSCode sends the zip paths to TS using the "zip://" prefix, that TS
+  // doesn't understand. This layer makes sure to remove the protocol
+  // before forwarding it to TS, and to add it back on all returned paths.
+
+  function toEditorPath(str) {
+    // We add the `zip:` prefix to both `.zip/` paths and virtual paths
+    if (isAbsolute(str) && !str.match(/^\^?(zip:|\/zip\/)/) && (str.match(/\.zip\//) || isVirtual(str))) {
+      // We also take the opportunity to turn virtual paths into physical ones;
+      // this makes it much easier to work with workspaces that list peer
+      // dependencies, since otherwise Ctrl+Click would bring us to the virtual
+      // file instances instead of the real ones.
+      //
+      // We only do this to modules owned by the the dependency tree roots.
+      // This avoids breaking the resolution when jumping inside a vendor
+      // with peer dep (otherwise jumping into react-dom would show resolution
+      // errors on react).
+      //
+      const resolved = isVirtual(str) ? pnpApi.resolveVirtual(str) : str;
+      if (resolved) {
+        const locator = pnpApi.findPackageLocator(resolved);
+        if (locator && dependencyTreeRoots.has(`${locator.name}@${locator.reference}`)) {
+          str = resolved;
+        }
+      }
+
+      str = normalize(str);
+
+      if (str.match(/\.zip\//)) {
+        switch (hostInfo) {
+          // Absolute VSCode `Uri.fsPath`s need to start with a slash.
+          // VSCode only adds it automatically for supported schemes,
+          // so we have to do it manually for the `zip` scheme.
+          // The path needs to start with a caret otherwise VSCode doesn't handle the protocol
+          //
+          // Ref: https://github.com/microsoft/vscode/issues/105014#issuecomment-686760910
+          //
+          // Update Oct 8 2021: VSCode changed their format in 1.61.
+          // Before | ^zip:/c:/foo/bar.zip/package.json
+          // After  | ^/zip//c:/foo/bar.zip/package.json
+          //
+          case `vscode <1.61`: {
+            str = `^zip:${str}`;
+          } break;
+
+          case `vscode`: {
+            str = `^/zip/${str}`;
+          } break;
+
+          // To make "go to definition" work,
+          // We have to resolve the actual file system path from virtual path
+          // and convert scheme to supported by [vim-rzip](https://github.com/lbrayner/vim-rzip)
+          case `coc-nvim`: {
+            str = normalize(resolved).replace(/\.zip\//, `.zip::`);
+            str = resolve(`zipfile:${str}`);
+          } break;
+
+          // Support neovim native LSP and [typescript-language-server](https://github.com/theia-ide/typescript-language-server)
+          // We have to resolve the actual file system path from virtual path,
+          // everything else is up to neovim
+          case `neovim`: {
+            str = normalize(resolved).replace(/\.zip\//, `.zip::`);
+            str = `zipfile:${str}`;
+          } break;
+
+          default: {
+            str = `zip:${str}`;
+          } break;
+        }
+      }
+    }
+
+    return str;
+  }
+
+  function fromEditorPath(str) {
+    switch (hostInfo) {
+      case `coc-nvim`:
+      case `neovim`: {
+        str = str.replace(/\.zip::/, `.zip/`);
+        // The path for coc-nvim is in format of /<pwd>/zipfile:/<pwd>/.yarn/...
+        // So in order to convert it back, we use .* to match all the thing
+        // before `zipfile:`
+        return process.platform === `win32`
+          ? str.replace(/^.*zipfile:\//, ``)
+          : str.replace(/^.*zipfile:/, ``);
+      } break;
+
+      case `vscode`:
+      default: {
+        return process.platform === `win32`
+          ? str.replace(/^\^?(zip:|\/zip)\/+/, ``)
+          : str.replace(/^\^?(zip:|\/zip)\/+/, `/`);
+      } break;
+    }
+  }
+
+  // Force enable 'allowLocalPluginLoads'
+  // TypeScript tries to resolve plugins using a path relative to itself
+  // which doesn't work when using the global cache
+  // https://github.com/microsoft/TypeScript/blob/1b57a0395e0bff191581c9606aab92832001de62/src/server/project.ts#L2238
+  // VSCode doesn't want to enable 'allowLocalPluginLoads' due to security concerns but
+  // TypeScript already does local loads and if this code is running the user trusts the workspace
+  // https://github.com/microsoft/vscode/issues/45856
+  const ConfiguredProject = tsserver.server.ConfiguredProject;
+  const {enablePluginsWithOptions: originalEnablePluginsWithOptions} = ConfiguredProject.prototype;
+  ConfiguredProject.prototype.enablePluginsWithOptions = function() {
+    this.projectService.allowLocalPluginLoads = true;
+    return originalEnablePluginsWithOptions.apply(this, arguments);
+  };
+
+  // And here is the point where we hijack the VSCode <-> TS communications
+  // by adding ourselves in the middle. We locate everything that looks
+  // like an absolute path of ours and normalize it.
+
+  const Session = tsserver.server.Session;
+  const {onMessage: originalOnMessage, send: originalSend} = Session.prototype;
+  let hostInfo = `unknown`;
+
+  Object.assign(Session.prototype, {
+    onMessage(/** @type {string} */ message) {
+      const parsedMessage = JSON.parse(message)
+
+      if (
+        parsedMessage != null &&
+        typeof parsedMessage === `object` &&
+        parsedMessage.arguments &&
+        typeof parsedMessage.arguments.hostInfo === `string`
+      ) {
+        hostInfo = parsedMessage.arguments.hostInfo;
+        if (hostInfo === `vscode` && process.env.VSCODE_IPC_HOOK && process.env.VSCODE_IPC_HOOK.match(/Code\/1\.([1-5][0-9]|60)\./)) {
+          hostInfo += ` <1.61`;
+        }
+      }
+
+      return originalOnMessage.call(this, JSON.stringify(parsedMessage, (key, value) => {
+        return typeof value === `string` ? fromEditorPath(value) : value;
+      }));
+    },
+
+    send(/** @type {any} */ msg) {
+      return originalSend.call(this, JSON.parse(JSON.stringify(msg, (key, value) => {
+        return typeof value === `string` ? toEditorPath(value) : value;
+      })));
+    }
+  });
+
+  return tsserver;
+};
+
+if (existsSync(absPnpApiPath)) {
+  if (!process.versions.pnp) {
+    // Setup the environment to be able to require typescript/lib/tsserverlibrary.js
+    require(absPnpApiPath).setup();
+  }
+}
+
+// Defer to the real typescript/lib/tsserverlibrary.js your application uses
+module.exports = moduleWrapper(absRequire(`typescript/lib/tsserverlibrary.js`));

.yarn/sdks/typescript/lib/typescript.js

@@ -0,0 +1,20 @@
+#!/usr/bin/env node
+
+const {existsSync} = require(`fs`);
+const {createRequire, createRequireFromPath} = require(`module`);
+const {resolve} = require(`path`);
+
+const relPnpApiPath = "../../../../.pnp.cjs";
+
+const absPnpApiPath = resolve(__dirname, relPnpApiPath);
+const absRequire = (createRequire || createRequireFromPath)(absPnpApiPath);
+
+if (existsSync(absPnpApiPath)) {
+  if (!process.versions.pnp) {
+    // Setup the environment to be able to require typescript/lib/typescript.js
+    require(absPnpApiPath).setup();
+  }
+}
+
+// Defer to the real typescript/lib/typescript.js your application uses
+module.exports = absRequire(`typescript/lib/typescript.js`);

.yarn/sdks/typescript/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "typescript",
+  "version": "4.4.3-sdk",
+  "main": "./lib/typescript.js",
+  "type": "commonjs"
+}

.yarnrc.yml

@@ -1,10 +1,73 @@
 enableTelemetry: false
 
-nmHoistingLimits: workspaces
-
-nmMode: hardlinks-global
-
-nodeLinker: node-modules
+packageExtensions:
+  "@grafana/slate-react@0.22.10-grafana":
+    peerDependencies:
+      slate-react: ">=0.22.0"
+  "@mdx-js/loader@1.6.22":
+    peerDependencies:
+      react: 17.0.1
+  "@storybook/addon-essentials@6.3.7":
+    peerDependencies:
+      "@storybook/components": 6.3.7
+      "@storybook/core-events": 6.3.7
+      "@storybook/theming": 6.3.7
+  "@storybook/addon-knobs@6.3.0":
+    dependencies:
+      copy-to-clipboard: ^3.3.1
+  "@storybook/core-server@6.3.7":
+    peerDependencies:
+      "@babel/core": ^7.0.0
+  "@storybook/core@6.3.7":
+    peerDependencies:
+      "@babel/core": ^7.0.0
+      "@storybook/manager-webpack5": 6.3.7
+      webpack: 5.51.1
+  "@storybook/csf-tools@6.3.7":
+    peerDependencies:
+      "@babel/core": ^7.0.0
+  "@storybook/react@6.3.7":
+    peerDependencies:
+      "@storybook/manager-webpack5": 6.3.7
+  doctrine@3.0.0:
+    dependencies:
+      assert: 2.0.0
+  moveable@0.26.0:
+    dependencies:
+      "@daybrush/utils": 1.6.0
+      framework-utils: ^1.1.0
+      react-simple-compat: 1.2.1
+  rc-time-picker@3.7.3:
+    peerDependencies:
+      react: 17.0.1
+      react-dom: 17.0.1
+  rc-trigger@2.6.5:
+    peerDependencies:
+      react: 17.0.1
+      react-dom: 17.0.1
+  react-compat-moveable@0.14.0:
+    dependencies:
+      "@egjs/agent": ^2.2.1
+      "@egjs/children-differ": ^1.0.1
+      "@scena/matrix": 1.1.1
+      css-to-mat: ^1.0.3
+      gesto: ^1.4.0
+      overlap-area: ^1.0.0
+    peerDependencies:
+      framework-utils: ^1.1.0
+  react-dev-utils@11.0.4:
+    peerDependencies:
+      typescript: 4.4.3
+      webpack: 5.51.1
+  react-docgen-typescript-loader@3.7.2:
+    peerDependencies:
+      webpack: 4.41.5
+  react-icons@2.2.7:
+    peerDependencies:
+      prop-types: "*"
+  react-resizable@3.0.4:
+    peerDependencies:
+      react-dom: 17.0.1
 
 plugins:
   - path: .yarn/plugins/@yarnpkg/plugin-typescript.cjs
@@ -14,4 +77,4 @@ plugins:
   - path: .yarn/plugins/@yarnpkg/plugin-outdated.cjs
     spec: "https://mskelton.dev/yarn-outdated/v2"
 
-yarnPath: .yarn/releases/yarn-3.1.0-rc.5.cjs
+yarnPath: .yarn/releases/yarn-3.1.0.cjs

jest.config.js

@@ -6,7 +6,7 @@ process.env.TZ = 'Pacific/Easter';
 module.exports = {
   verbose: false,
   transform: {
-    '^.+\\.(ts|tsx|js|jsx)$': 'ts-jest',
+    '^.+\\.(ts|tsx|js|jsx)$': require.resolve('ts-jest'),
   },
   transformIgnorePatterns: [
     'node_modules/(?!(ol)/)', // <- exclude the open layers library
@@ -27,11 +27,6 @@ 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-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/'],
 };

package.json

@@ -7,7 +7,7 @@
   "repository": "github:grafana/grafana",
   "scripts": {
     "api-tests": "jest --notify --watch --config=devenv/e2e-api-tests/jest.js",
-    "build": "node ./node_modules/webpack/bin/webpack.js --config scripts/webpack/webpack.prod.js",
+    "build": "webpack --config scripts/webpack/webpack.prod.js",
     "check-strict": "./scripts/ci-check-strict.sh",
     "dev": "webpack --progress --color --config scripts/webpack/webpack.dev.js",
     "e2e": "./e2e/start-and-run-suite",
@@ -76,6 +76,7 @@
     "@babel/plugin-syntax-dynamic-import": "7.8.3",
     "@babel/plugin-transform-react-constant-elements": "7.14.5",
     "@babel/plugin-transform-runtime": "^7.14.5",
+    "@babel/plugin-transform-typescript": "7.15.4",
     "@babel/preset-env": "7.14.7",
     "@babel/preset-react": "7.14.5",
     "@babel/preset-typescript": "7.14.5",
@@ -88,6 +89,8 @@
     "@kusto/monaco-kusto": "4.0.6",
     "@microsoft/api-extractor": "7.18.16",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.0-rc.6",
+    "@rtsao/plugin-proposal-class-properties": "7.0.1-patch.1",
+    "@testing-library/dom": "7.29.4",
     "@testing-library/jest-dom": "5.11.5",
     "@testing-library/react": "12.1.2",
     "@testing-library/react-hooks": "7.0.2",
@@ -104,6 +107,7 @@
     "@types/enzyme": "3.10.5",
     "@types/enzyme-adapter-react-16": "1.0.6",
     "@types/file-saver": "2.0.1",
+    "@types/grafana__slate-react": "npm:@types/slate-react@0.22.5",
     "@types/history": "^4.7.8",
     "@types/hoist-non-react-statics": "3.3.1",
     "@types/jest": "27.0.2",
@@ -124,7 +128,7 @@
     "@types/react-grid-layout": "1.1.1",
     "@types/react-highlight-words": "^0.16.2",
     "@types/react-loadable": "5.5.2",
-    "@types/react-redux": "7.1.18",
+    "@types/react-redux": "7.1.20",
     "@types/react-router-dom": "^5.1.7",
     "@types/react-select": "4.0.13",
     "@types/react-test-renderer": "17.0.1",
@@ -251,6 +255,7 @@
     "@types/ol": "^6.5.1",
     "@visx/event": "2.1.0",
     "@visx/gradient": "2.1.0",
+    "@visx/group": "2.1.0",
     "@visx/scale": "2.1.0",
     "@visx/shape": "2.1.0",
     "@visx/tooltip": "2.1.0",
@@ -260,6 +265,7 @@
     "angular-bindonce": "0.3.1",
     "angular-route": "1.8.2",
     "angular-sanitize": "1.8.2",
+    "app": "link:./public/app",
     "baron": "3.0.3",
     "brace": "0.11.1",
     "calculate-size": "1.1.1",
@@ -272,7 +278,9 @@
     "d3-force": "^2.1.1",
     "d3-scale-chromatic": "1.5.0",
     "dangerously-set-html-content": "1.0.9",
+    "date-fns": "1.30.1",
     "debounce-promise": "3.1.2",
+    "emotion": "10.0.27",
     "eventemitter3": "4.0.0",
     "fast-deep-equal": "^3.1.3",
     "fast-json-patch": "2.2.1",
@@ -281,6 +289,7 @@
     "history": "4.10.1",
     "hoist-non-react-statics": "3.3.2",
     "immer": "9.0.6",
+    "immutable": "3.8.2",
     "jquery": "3.5.1",
     "json-source-map": "0.6.1",
     "jsurl": "^0.1.5",
@@ -306,19 +315,22 @@
     "rc-cascader": "1.5.0",
     "rc-drawer": "4.4.0",
     "rc-slider": "9.6.4",
-    "rc-time-picker": "^3.7.3",
+    "rc-time-picker": "3.7.3",
     "re-resizable": "^6.2.0",
     "react": "17.0.1",
     "react-beautiful-dnd": "13.1.0",
     "react-diff-viewer": "^3.1.1",
     "react-dom": "17.0.1",
+    "react-draggable": "4.4.4",
     "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-moveable": "0.29.0",
     "react-popper": "2.2.4",
     "react-redux": "7.2.5",
+    "react-resizable": "3.0.4",
     "react-reverse-portal": "^2.0.1",
     "react-router-dom": "^5.2.0",
     "react-select": "4.3.0",
@@ -333,16 +345,20 @@
     "reselect": "4.0.0",
     "rst2html": "github:thoward/rst2html#990cb89f2a300cdd9151790be377c4c0840df809",
     "rxjs": "7.3.0",
+    "sass": "link:./public/sass",
     "search-query-parser": "1.5.4",
     "selecto": "1.13.0",
     "semver": "^7.1.3",
     "slate": "0.47.8",
     "slate-plain-serializer": "0.7.10",
+    "symbol-observable": "1.2.0",
+    "test": "link:./public/test",
     "tether": "1.4.7",
     "tether-drop": "https://github.com/torkelo/drop",
     "tinycolor2": "1.4.1",
     "uplot": "1.6.16",
     "uuid": "8.3.0",
+    "vendor": "link:./public/vendor",
     "visjs-network": "4.25.0",
     "whatwg-fetch": "3.1.0"
   },
@@ -352,7 +368,8 @@
     "@microsoft/api-extractor-model": "7.13.13",
     "@rushstack/node-core-library": "3.42.3",
     "@rushstack/rig-package": "0.3.3",
-    "@rushstack/ts-command-line": "4.10.2"
+    "@rushstack/ts-command-line": "4.10.2",
+    "@storybook/react/webpack": "5.58.1"
   },
   "workspaces": {
     "packages": [
@@ -363,5 +380,5 @@
   "engines": {
     "node": ">= 14"
   },
-  "packageManager": "yarn@3.1.0-rc.5"
+  "packageManager": "yarn@3.1.0"
 }

packages/grafana-data/package.json

@@ -13,7 +13,6 @@
     "directory": "packages/grafana-data"
   },
   "main": "src/index.ts",
-  "types": "src/index.ts",
   "scripts": {
     "build": "grafana-toolkit package:build --scope=data",
     "bundle": "rollup -c rollup.config.ts",
@@ -24,12 +23,18 @@
   "dependencies": {
     "@braintree/sanitize-url": "5.0.2",
     "@grafana/schema": "8.3.0-pre",
-    "@types/d3-interpolate": "^3.0.0",
+    "@types/d3-interpolate": "^1.4.0",
+    "d3-interpolate": "1.4.0",
     "date-fns": "2.21.3",
     "eventemitter3": "4.0.7",
     "lodash": "4.17.21",
     "marked": "2.0.1",
+    "moment": "2.29.1",
+    "moment-timezone": "0.5.33",
+    "ol": "6.7.0",
+    "papaparse": "5.3.0",
     "rxjs": "7.3.0",
+    "uplot": "1.6.16",
     "xss": "1.0.6"
   },
   "devDependencies": {
@@ -37,6 +42,11 @@
     "@rollup/plugin-commonjs": "16.0.0",
     "@rollup/plugin-json": "4.1.0",
     "@rollup/plugin-node-resolve": "10.0.0",
+    "@testing-library/dom": "7.29.4",
+    "@testing-library/jest-dom": "5.11.9",
+    "@testing-library/react": "11.1.2",
+    "@testing-library/react-hooks": "^3.2.1",
+    "@testing-library/user-event": "13.3.0",
     "@types/braintree__sanitize-url": "4.1.0",
     "@types/jest": "27.0.2",
     "@types/jquery": "3.3.38",
@@ -47,6 +57,14 @@
     "@types/react": "17.0.30",
     "@types/rollup-plugin-visualizer": "4.2.1",
     "@types/sinon": "^10.0.4",
+    "@types/testing-library__jest-dom": "5.9.5",
+    "@types/testing-library__react-hooks": "^3.2.0",
+    "@types/tinycolor2": "1.4.2",
+    "pretty-format": "25.1.0",
+    "react": "17.0.1",
+    "react-dom": "17.0.1",
+    "react-test-renderer": "17.0.1",
+    "rimraf": "3.0.1",
     "rollup": "2.33.3",
     "rollup-plugin-sourcemaps": "0.6.3",
     "rollup-plugin-terser": "7.0.2",

packages/grafana-data/rollup.config.ts

@@ -3,6 +3,7 @@ import commonjs from '@rollup/plugin-commonjs';
 import sourceMaps from 'rollup-plugin-sourcemaps';
 import json from '@rollup/plugin-json';
 import { terser } from 'rollup-plugin-terser';
+import path from 'path';
 
 const pkg = require('./package.json');
 
@@ -27,8 +28,9 @@ const buildCjsPackage = ({ env }) => {
       '@grafana/schema', // Load from host
     ],
     plugins: [
+      resolve(),
       json({
-        include: ['../../node_modules/moment-timezone/data/packed/latest.json'],
+        include: [path.relative('.', require.resolve('moment-timezone/data/packed/latest.json'))], // absolute path throws an error for whatever reason
       }),
       commonjs({
         include: /node_modules/,

packages/grafana-data/tsconfig.json

@@ -3,7 +3,9 @@
     "declarationDir": "dist",
     "outDir": "compiled",
     "rootDirs": ["."],
-    "typeRoots": ["node_modules/@types", "types"]
+    "paths": {
+      "@grafana/data": ["."]
+    }
   },
   "exclude": ["dist", "node_modules"],
   "extends": "@grafana/tsconfig",
@@ -11,6 +13,7 @@
     "src/**/*.ts*",
     "typings/jest",
     "../../public/app/types/jquery/*.ts",
+    "../../public/app/types/*.d.ts",
     "../../public/app/types/sanitize-url.d.ts"
   ]
 }

packages/grafana-e2e-selectors/package.json

@@ -29,6 +29,7 @@
     "@types/node": "14.17.27",
     "@types/rollup-plugin-visualizer": "4.2.1",
     "@types/systemjs": "^0.20.6",
+    "rimraf": "3.0.1",
     "rollup": "2.33.3",
     "rollup-plugin-sourcemaps": "0.6.3",
     "rollup-plugin-terser": "7.0.2",
@@ -42,6 +43,7 @@
     "@grafana/tsconfig": "^1.0.0-rc1",
     "commander": "5.0.0",
     "execa": "5.1.1",
+    "tslib": "2.3.1",
     "typescript": "4.4.3",
     "yaml": "^1.8.3"
   }

packages/grafana-e2e-selectors/tsconfig.json

@@ -2,8 +2,7 @@
   "compilerOptions": {
     "declarationDir": "dist",
     "outDir": "compiled",
-    "rootDirs": ["."],
-    "typeRoots": ["node_modules/@types"]
+    "rootDirs": ["."]
   },
   "exclude": ["dist", "node_modules"],
   "extends": "@grafana/tsconfig",

packages/grafana-e2e/package.json

@@ -34,29 +34,37 @@
     "@rollup/plugin-node-resolve": "10.0.0",
     "@types/node": "14.17.27",
     "@types/rollup-plugin-visualizer": "4.2.1",
+    "@types/uuid": "8.3.0",
     "date-fns": "2.21.3",
     "rollup": "2.33.3",
     "rollup-plugin-copy": "3.3.0",
     "rollup-plugin-sourcemaps": "0.6.3",
     "rollup-plugin-terser": "7.0.2",
     "rollup-plugin-typescript2": "0.29.0",
-    "rollup-plugin-visualizer": "4.2.0"
+    "rollup-plugin-visualizer": "4.2.0",
+    "webpack": "5.51.1"
   },
   "types": "src/index.ts",
   "dependencies": {
+    "@babel/core": "7.14.6",
+    "@babel/preset-env": "7.14.7",
     "@cypress/webpack-preprocessor": "5.9.1",
     "@grafana/e2e-selectors": "8.3.0-pre",
     "@grafana/tsconfig": "^1.0.0-rc1",
     "@mochajs/json-file-reporter": "^1.2.0",
+    "babel-loader": "8.2.2",
     "blink-diff": "1.0.13",
     "commander": "5.0.0",
     "cypress": "8.4.1",
     "cypress-file-upload": "5.0.8",
     "execa": "5.1.1",
+    "mocha": "7.0.1",
     "resolve-as-bin": "2.1.0",
+    "rimraf": "3.0.1",
     "ts-loader": "6.2.1",
     "tslib": "2.3.1",
     "typescript": "4.4.3",
+    "uuid": "8.3.0",
     "yaml": "^1.8.3"
   }
 }

packages/grafana-e2e/tsconfig.json

@@ -3,7 +3,6 @@
     "declarationDir": "dist",
     "outDir": "compiled",
     "rootDirs": ["."],
-    "typeRoots": ["node_modules/@types"],
     "types": ["cypress"]
   },
   "exclude": ["dist", "node_modules"],

packages/grafana-runtime/package.json

@@ -26,7 +26,11 @@
     "@grafana/data": "8.3.0-pre",
     "@grafana/e2e-selectors": "8.3.0-pre",
     "@grafana/ui": "8.3.0-pre",
+    "@sentry/browser": "5.25.0",
     "history": "4.10.1",
+    "lodash": "4.17.21",
+    "react": "17.0.1",
+    "rxjs": "7.3.0",
     "systemjs": "0.20.19",
     "systemjs-plugin-css": "0.1.37",
     "tslib": "2.3.1"
@@ -35,17 +39,23 @@
     "@grafana/tsconfig": "^1.0.0-rc1",
     "@rollup/plugin-commonjs": "16.0.0",
     "@rollup/plugin-node-resolve": "10.0.0",
+    "@types/angular": "1.6.56",
     "@types/history": "^4.7.8",
     "@types/jest": "27.0.2",
+    "@types/lodash": "4.14.149",
+    "@types/react": "16.9.9",
     "@types/rollup-plugin-visualizer": "4.2.1",
     "@types/systemjs": "^0.20.6",
     "lodash": "4.17.21",
+    "pretty-format": "25.1.0",
+    "rimraf": "3.0.1",
     "rollup": "2.33.3",
     "rollup-plugin-sourcemaps": "0.6.3",
     "rollup-plugin-terser": "7.0.2",
     "rollup-plugin-typescript2": "0.29.0",
     "rollup-plugin-visualizer": "4.2.0",
-    "typescript": "4.4.3"
+    "typescript": "4.4.3",
+    "webpack": "5.58.1"
   },
   "types": "src/index.ts"
 }

packages/grafana-runtime/tsconfig.json

@@ -3,11 +3,7 @@
     "baseUrl": ".",
     "declarationDir": "dist",
     "outDir": "compiled",
-    "rootDirs": ["."],
-    "paths": {
-      "@grafana/slate-react": ["../grafana-ui/node_modules/@types/slate-react"]
-    },
-    "typeRoots": ["node_modules/@types"]
+    "rootDirs": ["."]
   },
   "exclude": ["dist", "node_modules"],
   "extends": "@grafana/tsconfig",

packages/grafana-schema/package.json

@@ -27,11 +27,13 @@
     "@rollup/plugin-json": "4.1.0",
     "@rollup/plugin-node-resolve": "10.0.0",
     "@types/rollup-plugin-visualizer": "4.2.1",
+    "rimraf": "3.0.1",
     "rollup": "2.33.3",
     "rollup-plugin-sourcemaps": "0.6.3",
     "rollup-plugin-terser": "7.0.2",
     "rollup-plugin-typescript2": "0.29.0",
     "rollup-plugin-visualizer": "4.2.0",
+    "tslib": "2.3.1",
     "typescript": "4.4.3"
   }
 }

packages/grafana-toolkit/bin/grafana-toolkit.js

@@ -15,7 +15,7 @@ const isLinkedMode = () => {
   }
 
   try {
-    const resolvedPath = path.resolve(`${__dirname}/../../../node_modules/@grafana/toolkit`);
+    const resolvedPath = require.resolve('@grafana/toolkit');
     return fs.lstatSync(resolvedPath).isSymbolicLink();
   } catch {
     return false;

packages/grafana-toolkit/config/circleci/config.yml

@@ -69,18 +69,18 @@ jobs:
     steps:
       - checkout
       - restore_cache:
-          name: restore node_modules
+          name: restore yarn cache
           keys:
           - build-cache-{{ .Environment.CACHE_VERSION }}-{{ checksum "yarn.lock" }}
       - run:
           name: Install dependencies
           command: |
             mkdir ci
-            [ -f ~/project/node_modules/.bin/grafana-toolkit ] || yarn install --immutable
+            yarn bin grafana-toolkit ] || yarn install --immutable
       - save_cache:
-          name: save node_modules
+          name: save yarn cache
           paths:
-            - ~/project/node_modules
+            - ~/project/.yarn
           key: build-cache-{{ .Environment.CACHE_VERSION }}-{{ checksum "yarn.lock" }}
       - save_cache:
           name: save cypress cache
@@ -93,13 +93,13 @@ jobs:
     steps:
       - checkout
       - restore_cache:
-          name: restore node_modules
+          name: restore yarn cache
           keys:
           - build-cache-{{ .Environment.CACHE_VERSION }}-{{ checksum "yarn.lock" }}
       - run:
           name: Build docs
           command: |
-            ./node_modules/.bin/grafana-toolkit plugin:ci-docs
+            yarn run grafana-toolkit plugin:ci-docs
             [ -d "dist" ] || circleci-agent step halt
       - persist_to_workspace:
           root: .
@@ -111,12 +111,12 @@ jobs:
     steps:
       - checkout
       - restore_cache:
-          name: restore node_modules
+          name: restore yarn cache
           keys:
           - build-cache-{{ .Environment.CACHE_VERSION }}-{{ checksum "yarn.lock" }}
       - run:
           name: Build and test frontend
-          command: ./node_modules/.bin/grafana-toolkit plugin:ci-build
+          command: yarn run grafana-toolkit plugin:ci-build
       - persist_to_workspace:
           root: .
           paths:
@@ -127,7 +127,7 @@ jobs:
     steps:
       - checkout
       - restore_cache:
-          name: restore node_modules
+          name: restore yarn cache
           keys:
           - build-cache-{{ .Environment.CACHE_VERSION }}-{{ checksum "yarn.lock" }}
       - run:
@@ -152,18 +152,18 @@ jobs:
     steps:
     - checkout
     - restore_cache:
-        name: restore node_modules
+        name: restore yarn cache
         keys:
         - build-cache-{{ .Environment.CACHE_VERSION }}-{{ checksum "yarn.lock" }}
     - attach_workspace:
         at: .
     - run:
         name: Move results to ci folder
-        command: ./node_modules/.bin/grafana-toolkit plugin:ci-build --finish
+        command: yarn run grafana-toolkit plugin:ci-build --finish
     - run:
         name: Package distribution
         command: |
-          ./node_modules/.bin/grafana-toolkit plugin:ci-package
+          yarn run grafana-toolkit plugin:ci-package
     - persist_to_workspace:
         root: .
         paths:
@@ -211,7 +211,7 @@ jobs:
     - attach_workspace:
         at: .
     - restore_cache:
-        name: Restore node_modules
+        name: Restore yarn cache
         keys:
         - build-cache-{{ .Environment.CACHE_VERSION }}-{{ checksum "yarn.lock" }}
     - restore_cache:
@@ -237,7 +237,7 @@ jobs:
         name: Run e2e tests
         command: |
           # If the tests fail, but GRAFANACI_STRICT_E2E=0, don't worry about it
-          ./node_modules/.bin/grafana-e2e run \
+          yarn run grafana-e2e run \
           || (
             [ "$GRAFANACI_STRICT_E2E" -eq 0 ] && echo "Bypassing fail. ci-nostrict enabled"
           )
@@ -266,13 +266,13 @@ jobs:
     - attach_workspace:
         at: .
     - restore_cache:
-        name: restore node_modules
+        name: restore yarn cache
         keys:
           - build-cache-{{ .Environment.CACHE_VERSION }}-{{ checksum "yarn.lock" }}
     - run:
         name: Toolkit report
         command: |
-          ./node_modules/.bin/grafana-toolkit plugin:ci-report
+          yarn run grafana-toolkit plugin:ci-report
     - store_artifacts:
         path: ci
 
@@ -286,10 +286,10 @@ jobs:
       - attach_workspace:
           at: .
       - restore_cache:
-          name: restore node_modules
+          name: restore yarn cache
           keys:
           - build-cache-{{ .Environment.CACHE_VERSION }}-{{ checksum "yarn.lock" }}
       - run:
           name: "Publish Release on GitHub"
           command: |
-            ./node_modules/.bin/grafana-toolkit plugin:github-publish
+            yarn run grafana-toolkit plugin:github-publish

packages/grafana-toolkit/package.json

@@ -32,11 +32,15 @@
     "@grafana/eslint-config": "2.5.0",
     "@grafana/tsconfig": "^1.0.0-rc1",
     "@grafana/ui": "8.3.0-pre",
+    "@jest/core": "26.6.3",
     "@rushstack/eslint-patch": "1.0.6",
     "@types/command-exists": "^1.2.0",
+    "@types/eslint": "7.28.0",
+    "@types/expect-puppeteer": "3.3.1",
     "@types/fs-extra": "^9.0.13",
     "@types/inquirer": "^6.0.3",
     "@types/jest": "27.0.2",
+    "@types/lodash": "4.14.149",
     "@types/node": "^14.0.0",
     "@types/prettier": "^2.4.0",
     "@types/react-dev-utils": "^9.0.4",
@@ -44,6 +48,8 @@
     "@types/semver": "^7.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",

packages/grafana-toolkit/src/cli/tasks/plugin.build.ts

@@ -46,7 +46,6 @@ export const prepare = () =>
       // Remove local dependencies for @grafana/data/node_modules
       // See: https://github.com/grafana/grafana/issues/26748
       rimraf(resolvePath(__dirname, 'node_modules/@grafana/data/node_modules')),
-
       // Copy only if local tsconfig does not exist.  Otherwise this will work, but have odd behavior
       copyIfNonExistent(
         resolvePath(__dirname, '../../config/tsconfig.plugin.local.json'),

packages/grafana-toolkit/src/cli/tasks/plugin.update.ts

@@ -12,7 +12,7 @@ const updateCiConfig = () =>
       fs.mkdirSync(ciConfigPath);
     }
 
-    const sourceFile = path.join('node_modules/@grafana/toolkit/config/circleci', 'config.yml');
+    const sourceFile = require.resolve('@grafana/toolkit/config/circleci/config.yml');
     const destFile = path.join(ciConfigPath, 'config.yml');
     fs.copyFileSync(sourceFile, destFile);
   });

packages/grafana-toolkit/src/config/jest.plugin.config.ts

@@ -51,9 +51,10 @@ export const jestConfig = (baseDir: string = process.cwd()) => {
   const setupFile = getSetupFile(setupFilePath);
   const shimsFile = getSetupFile(shimsFilePath);
 
-  const setupFiles = [setupFile, shimsFile, `${__dirname}/matchMedia.js`, 'jest-canvas-mock'].filter((f) => f);
+  const setupFiles = [setupFile, shimsFile, `${__dirname}/matchMedia.js`, require.resolve('jest-canvas-mock')].filter(
+    (f) => f
+  );
   const defaultJestConfig = {
-    preset: 'ts-jest',
     verbose: false,
     moduleDirectories: ['node_modules', 'src'],
     moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json'],
@@ -69,13 +70,13 @@ export const jestConfig = (baseDir: string = process.cwd()) => {
     reporters: [
       'default',
       [
-        'jest-junit',
+        require.resolve('jest-junit'),
         {
           outputDirectory: 'coverage',
         },
       ],
     ],
-    testEnvironment: 'jest-environment-jsdom-fifteen',
+    testEnvironment: require.resolve('jest-environment-jsdom-fifteen'),
     testMatch: [
       '<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}',
       '<rootDir>/src/**/*.{spec,test,jest}.{js,jsx,ts,tsx}',
@@ -83,6 +84,7 @@ export const jestConfig = (baseDir: string = process.cwd()) => {
     ],
     transform: {
       '^.+\\.js$': 'babel-jest',
+      '^.+\\.tsx?$': require.resolve('ts-jest'),
     },
     transformIgnorePatterns: [
       '[/\\\\\\\\]node_modules[/\\\\\\\\].+\\\\.(js|jsx|ts|tsx)$',

packages/grafana-toolkit/src/config/tsconfig.plugin.local.json

@@ -2,7 +2,6 @@
   "compilerOptions": {
     "rootDir": "./src",
     "baseUrl": "./src",
-    "typeRoots": ["./node_modules/@types"],
     "jsx": "react"
   },
   "extends": "@grafana/toolkit/src/config/tsconfig.plugin.json",

packages/grafana-toolkit/src/config/webpack.plugin.config.ts

@@ -170,6 +170,7 @@ const getBaseWebpackConfig: WebpackConfigurationGetter = async (options) => {
 
     performance: { hints: false },
     externals: [
+      'tslib',
       'lodash',
       'jquery',
       'moment',
@@ -213,15 +214,15 @@ const getBaseWebpackConfig: WebpackConfigurationGetter = async (options) => {
           test: /\.tsx?$/,
           loaders: [
             {
-              loader: 'babel-loader',
+              loader: require.resolve('babel-loader'),
               options: {
-                presets: [['@babel/preset-env', { modules: false }]],
-                plugins: ['angularjs-annotate'],
+                presets: [[require.resolve('@babel/preset-env'), { modules: false }]],
+                plugins: [require.resolve('babel-plugin-angularjs-annotate')],
                 sourceMaps: true,
               },
             },
             {
-              loader: 'ts-loader',
+              loader: require.resolve('ts-loader'),
               options: {
                 onlyCompileBundledFiles: true,
                 transpileOnly: true,
@@ -234,7 +235,7 @@ const getBaseWebpackConfig: WebpackConfigurationGetter = async (options) => {
           test: /\.jsx?$/,
           loaders: [
             {
-              loader: 'babel-loader',
+              loader: require.resolve('babel-loader'),
               options: {
                 presets: [['@babel/preset-env', { modules: false }]],
                 plugins: ['angularjs-annotate'],
@@ -249,7 +250,7 @@ const getBaseWebpackConfig: WebpackConfigurationGetter = async (options) => {
           test: /\.html$/,
           exclude: [/node_modules/],
           use: {
-            loader: 'html-loader',
+            loader: require.resolve('html-loader'),
           },
         },
         ...getFileLoaders(),

packages/grafana-toolkit/src/config/webpack/loaders.ts

@@ -144,7 +144,7 @@ export const getFileLoaders = () => {
       use: [
         shouldExtractCss
           ? {
-              loader: 'file-loader',
+              loader: require.resolve('file-loader'),
               options: {
                 outputPath: '/',
                 name: '[path][name].[ext]',
@@ -158,7 +158,7 @@ export const getFileLoaders = () => {
     },
     {
       test: /\.(woff|woff2|eot|ttf|otf)(\?v=\d+\.\d+\.\d+)?$/,
-      loader: 'file-loader',
+      loader: require.resolve('file-loader'),
       options: {
         // Keep publicPath relative for host.com/grafana/ deployments
         publicPath: `public/plugins/${getPluginId()}/fonts`,

packages/grafana-toolkit/tsconfig.json

@@ -4,7 +4,9 @@
     "module": "commonjs",
     "outDir": "dist/src",
     "rootDirs": ["."],
-    "typeRoots": ["node_modules/@types"],
+    "paths": {
+      "@grafana/toolkit": ["."]
+    },
     "useUnknownInCatchVariables": false
   },
   "exclude": ["dist", "node_modules"],

packages/grafana-ui/package.json

@@ -37,23 +37,28 @@
     "@grafana/e2e-selectors": "8.3.0-pre",
     "@grafana/schema": "8.3.0-pre",
     "@grafana/slate-react": "0.22.10-grafana",
-    "@grafana/tsconfig": "^1.0.0-rc1",
     "@monaco-editor/react": "4.2.2",
     "@popperjs/core": "2.5.4",
     "@react-aria/focus": "3.4.1",
     "@react-aria/overlays": "3.7.2",
     "@sentry/browser": "5.25.0",
     "ansicolor": "1.1.95",
+    "calculate-size": "1.1.1",
     "classnames": "2.2.6",
+    "clipboard": "2.0.4",
+    "core-js": "3.10.0",
     "d3": "5.15.0",
+    "emotion": "10.0.27",
     "hoist-non-react-statics": "3.3.2",
     "immutable": "3.8.2",
     "is-hotkey": "0.1.6",
     "jquery": "3.5.1",
     "lodash": "4.17.21",
+    "memoize-one": "5.1.1",
     "moment": "2.29.1",
     "monaco-editor": "0.27.0",
     "papaparse": "5.3.0",
+    "prismjs": "1.24.0",
     "rc-cascader": "1.5.0",
     "rc-drawer": "4.4.0",
     "rc-slider": "9.6.4",
@@ -71,29 +76,52 @@
     "react-popper": "2.2.4",
     "react-router-dom": "^5.2.0",
     "react-select": "4.3.0",
+    "react-select-event": "^5.1.0",
     "react-table": "7.7.0",
     "react-transition-group": "4.4.1",
+    "react-use": "17.2.4",
+    "react-window": "1.8.5",
+    "rxjs": "7.3.0",
     "slate": "0.47.8",
+    "slate-plain-serializer": "0.7.10",
     "tinycolor2": "1.4.1",
     "tslib": "2.3.1",
-    "uplot": "1.6.16"
+    "uplot": "1.6.16",
+    "uuid": "8.3.0"
   },
   "devDependencies": {
+    "@babel/core": "7.14.6",
+    "@grafana/tsconfig": "^1.0.0-rc1",
+    "@mdx-js/react": "1.6.22",
     "@rollup/plugin-commonjs": "16.0.0",
     "@rollup/plugin-image": "2.0.5",
     "@rollup/plugin-node-resolve": "10.0.0",
     "@storybook/addon-a11y": "6.3.7",
+    "@storybook/addon-actions": "6.3.7",
+    "@storybook/addon-docs": "6.3.7",
     "@storybook/addon-essentials": "6.3.7",
     "@storybook/addon-knobs": "6.3.0",
     "@storybook/addon-storysource": "6.3.7",
+    "@storybook/addons": "6.3.7",
+    "@storybook/api": "6.3.7",
     "@storybook/builder-webpack5": "6.3.7",
+    "@storybook/components": "6.3.7",
+    "@storybook/core-events": "6.3.7",
     "@storybook/manager-webpack5": "6.3.7",
     "@storybook/react": "6.3.7",
     "@storybook/theming": "6.3.7",
+    "@testing-library/dom": "7.29.4",
     "@testing-library/jest-dom": "5.11.9",
+    "@testing-library/react": "11.1.2",
+    "@testing-library/react-hooks": "^3.2.1",
+    "@testing-library/user-event": "13.3.0",
     "@types/classnames": "2.2.7",
+    "@types/clipboard": "2.0.1",
     "@types/common-tags": "^1.8.0",
     "@types/d3": "7.0.0",
+    "@types/enzyme": "3.10.5",
+    "@types/enzyme-adapter-react-16": "1.0.6",
+    "@types/grafana__slate-react": "npm:@types/slate-react@0.22.5",
     "@types/hoist-non-react-statics": "3.3.1",
     "@types/is-hotkey": "0.1.1",
     "@types/jest": "27.0.2",
@@ -102,34 +130,53 @@
     "@types/mock-raf": "1.0.2",
     "@types/node": "14.17.27",
     "@types/papaparse": "5.2.0",
+    "@types/prismjs": "1.16.0",
     "@types/react": "17.0.30",
     "@types/react-beautiful-dnd": "13.1.1",
     "@types/react-calendar": "^3.4.3",
     "@types/react-color": "3.0.1",
+    "@types/react-dom": "16.9.9",
     "@types/react-router-dom": "^5.1.7",
     "@types/react-select": "4.0.13",
     "@types/react-table": "7.7.2",
     "@types/react-test-renderer": "17.0.1",
     "@types/react-transition-group": "4.4.0",
+    "@types/react-window": "1.8.1",
     "@types/rollup-plugin-visualizer": "4.2.1",
     "@types/slate": "0.47.2",
+    "@types/slate-plain-serializer": "0.6.1",
     "@types/slate-react": "0.22.5",
+    "@types/testing-library__jest-dom": "5.9.5",
+    "@types/testing-library__react-hooks": "^3.2.0",
     "@types/tinycolor2": "1.4.1",
+    "@types/uuid": "8.3.0",
     "@wojtekmaj/enzyme-adapter-react-17": "0.6.2",
+    "babel-loader": "8.2.2",
     "common-tags": "^1.8.0",
+    "css-loader": "6.4.0",
+    "css-minimizer-webpack-plugin": "^3.1.1",
     "csstype": "3.0.9",
     "enzyme": "3.11.0",
+    "expose-loader": "3.0.0",
     "mock-raf": "1.0.1",
+    "postcss-loader": "6.1.1",
+    "pretty-format": "25.1.0",
+    "raw-loader": "4.0.2",
     "react-docgen-typescript-loader": "3.7.2",
     "react-test-renderer": "17.0.1",
+    "rimraf": "3.0.1",
     "rollup": "2.33.3",
     "rollup-plugin-sourcemaps": "0.6.3",
     "rollup-plugin-terser": "7.0.2",
     "rollup-plugin-typescript2": "0.29.0",
     "rollup-plugin-visualizer": "4.2.0",
+    "sass-loader": "12.1.0",
     "storybook-dark-mode": "1.0.8",
+    "style-loader": "3.3.0",
+    "terser-webpack-plugin": "5.2.4",
     "ts-loader": "8.0.11",
     "typescript": "4.4.3",
+    "webpack": "5.58.1",
     "webpack-filter-warnings-plugin": "1.2.1"
   },
   "types": "src/index.ts"

packages/grafana-ui/src/components/DateTimePickers/_TimeOfDayPicker.scss

@@ -1,4 +1,4 @@
-@import '~rc-time-picker/assets/index.css';
+@import 'rc-time-picker/assets/index.css';
 
 .rc-time-picker-input,
 .rc-time-picker-panel-input-wrap,

packages/grafana-ui/src/components/Drawer/_Drawer.scss

@@ -1,2 +1,2 @@
 // Need to import this to get default styles from rc-drawer
-@import '~rc-drawer/assets/index.css';
+@import 'rc-drawer/assets/index.css';

packages/grafana-ui/src/components/Slider/_Slider.scss

@@ -1 +1 @@
-@import '~rc-slider/assets/index.css';
+@import 'rc-slider/assets/index.css';

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 '~uplot/dist/uPlot.min.css';
+@import 'uplot/dist/uPlot.min.css';
 
 .uplot {
   font-family: inherit;

packages/grafana-ui/tsconfig.json

@@ -1,14 +1,9 @@
 {
   "compilerOptions": {
-    "baseUrl": "node_modules/@types",
+    "baseUrl": "./",
     "declarationDir": "dist",
     "outDir": "compiled",
-    "paths": {
-      "@grafana/slate-react": ["slate-react"],
-      "@grafana/ui": ["."]
-    },
-    "rootDirs": [".", "stories"],
-    "typeRoots": ["node_modules/@types"]
+    "rootDirs": [".", "stories"]
   },
   "exclude": ["dist", "node_modules"],
   "extends": "@grafana/tsconfig",

packages/jaeger-ui-components/package.json

@@ -9,23 +9,29 @@
     "typecheck": "tsc --noEmit"
   },
   "devDependencies": {
+    "@grafana/tsconfig": "^1.0.0-rc1",
+    "@types/classnames": "^2.2.7",
+    "@types/deep-freeze": "^0.1.1",
+    "@types/grafana__slate-react": "npm:@types/slate-react@0.22.5",
+    "@types/hoist-non-react-statics": "^3.3.1",
+    "@types/lodash": "^4.14.123",
+    "@types/react": "17.0.30",
+    "@types/react-icons": "2.2.7",
+    "@types/recompose": "^0.30.7",
+    "@types/reselect": "2.2.0",
+    "@types/slate-react": "0.22.5",
+    "@types/tinycolor2": "1.4.2",
     "@wojtekmaj/enzyme-adapter-react-17": "0.6.2",
     "enzyme": "3.11.0",
-    "typescript": "4.4.3"
+    "sinon": "8.1.1",
+    "typescript": "4.4.3",
+    "webpack": "5.58.1"
   },
   "dependencies": {
     "@emotion/css": "11.1.3",
     "@emotion/react": "11.1.5",
     "@grafana/data": "8.3.0-pre",
     "@grafana/ui": "8.3.0-pre",
-    "@types/classnames": "^2.2.7",
-    "@types/deep-freeze": "^0.1.1",
-    "@types/hoist-non-react-statics": "^3.3.1",
-    "@types/lodash": "^4.14.123",
-    "@types/react": "17.0.30",
-    "@types/react-icons": "2.2.7",
-    "@types/recompose": "^0.30.7",
-    "@types/slate-react": "0.22.5",
     "chance": "^1.0.10",
     "classnames": "^2.2.5",
     "combokeys": "^3.0.0",
@@ -38,9 +44,13 @@
     "lru-memoize": "^1.1.0",
     "memoize-one": "^5.0.0",
     "moment": "2.29.1",
+    "moment-timezone": "0.5.33",
+    "prop-types": "15.7.2",
     "react": "17.0.1",
+    "react-dom": "17.0.1",
     "react-icons": "2.2.7",
     "recompose": "^0.25.0",
+    "reselect": "4.0.0",
     "tinycolor2": "1.4.1",
     "tslib": "2.3.1",
     "tween-functions": "^1.2.0"

packages/jaeger-ui-components/tsconfig.json

@@ -1,11 +1,10 @@
 {
   "compilerOptions": {
-    "baseUrl": "node_modules/@types",
-    "paths": {
-      "@grafana/slate-react": ["slate-react"]
-    },
-    "typeRoots": ["node_modules/@types"]
+    "baseUrl": ".",
+    "allowJs": true,
+    "jsx": "react"
   },
+  "exclude": ["dist", "node_modules"],
   "extends": "@grafana/tsconfig",
   "include": ["src/**/*.ts*", "typings", "../../public/app/types/jquery/*.ts", "../../public/app/types/*.d.ts"]
 }

plugins-bundled/internal/input-datasource/package.json

@@ -15,8 +15,20 @@
   },
   "author": "Grafana Labs",
   "devDependencies": {
+    "@types/jest": "26.0.15",
+    "@types/react": "17.0.30",
+    "ts-loader": "8.0.11",
+    "webpack": "5.58.1"
+  },
+  "dependencies": {
     "@grafana/data": "8.3.0-pre",
     "@grafana/toolkit": "8.3.0-pre",
-    "@grafana/ui": "8.3.0-pre"
+    "@grafana/ui": "8.3.0-pre",
+    "jquery": "3.5.1",
+    "react": "17.0.1",
+    "react-dom": "17.0.1",
+    "react-hook-form": "7.5.3",
+    "react-router-dom": "^5.2.0",
+    "tslib": "2.3.1"
   }
 }

plugins-bundled/internal/input-datasource/tsconfig.json

@@ -3,7 +3,6 @@
   "include": ["src", "types"],
   "compilerOptions": {
     "rootDir": "./src",
-    "baseUrl": "./src",
-    "typeRoots": ["./node_modules/@types", "../../../node_modules/@types"]
+    "baseUrl": "./src"
   }
 }

public/app/angular/panel/specs/metrics_panel_ctrl.test.ts

@@ -17,8 +17,6 @@ jest.mock('app/core/config', () => {
   };
 });
 
-// @ts-ignore
-import q from 'q';
 import { PanelModel } from 'app/features/dashboard/state/PanelModel';
 import { MetricsPanelCtrl } from '../metrics_panel_ctrl';
 
@@ -35,9 +33,6 @@ function setupController({ hasAccessToExplore } = { hasAccessToExplore: false })
   const injectorStub = {
     get: (type: any) => {
       switch (type) {
-        case '$q': {
-          return q;
-        }
         case 'contextSrv': {
           return { hasAccessToExplore: () => hasAccessToExplore };
         }

public/app/features/explore/QueryRows.tsx

@@ -34,9 +34,9 @@ export const QueryRows = ({ exploreId }: Props) => {
     [exploreId]
   );
 
-  const queries = useSelector(getQueries);
-  const dsSettings = useSelector(getDatasourceInstanceSettings);
-  const queryResponse = useSelector(getQueryResponse);
+  const queries = useSelector(getQueries)!;
+  const dsSettings = useSelector(getDatasourceInstanceSettings)!;
+  const queryResponse = useSelector(getQueryResponse)!;
   const history = useSelector(getHistory);
   const eventBridge = useSelector(getEventBridge);
 

public/app/features/plugins/plugin_loader.ts

@@ -5,6 +5,7 @@ import kbn from 'app/core/utils/kbn';
 import moment from 'moment'; // eslint-disable-line no-restricted-imports
 import angular from 'angular';
 import jquery from 'jquery';
+import * as tslib from 'tslib';
 
 // Experimental module exports
 import prismjs from 'prismjs';
@@ -85,6 +86,7 @@ function exposeToPlugin(name: string, component: any) {
   });
 }
 
+exposeToPlugin('tslib', tslib);
 exposeToPlugin('@grafana/data', grafanaData);
 exposeToPlugin('@grafana/ui', grafanaUI);
 exposeToPlugin('@grafana/runtime', grafanaRuntime);

public/app/plugins/panel/geomap/GeomapPanel.tsx

@@ -239,7 +239,7 @@ export class GeomapPanel extends Component<Props, State> {
       this.basemap.dispose();
     }
     this.basemap = layer;
-    this.map.getLayers().insertAt(0, this.basemap);
+    this.map.getLayers().insertAt(0, this.basemap!);
   }
 
   async initLayers(layers: MapLayerOptions[]) {

public/sass/_grafana.scss

@@ -86,7 +86,7 @@
 @import 'components/panel_header';
 
 // LOAD @grafana/ui components
-@import '../../packages/grafana-ui/src/index';
+@import '@grafana/ui/src/index';
 
 // PAGES
 @import 'pages/login';

public/sass/components/_dashboard_grid.scss

@@ -1,5 +1,5 @@
-@import '~react-grid-layout/css/styles.css';
-@import '~react-resizable/css/styles.css';
+@import 'react-grid-layout/css/styles.css';
+@import 'react-resizable/css/styles.css';
 
 .react-resizable-handle {
   // this needs to use visibility and not display none in order not to cause resize flickering

public/test/jest-setup.ts

@@ -33,9 +33,9 @@ angular.module('grafana.directives', []);
 angular.module('grafana.filters', []);
 angular.module('grafana.routes', ['ngRoute']);
 
-jest.mock('app/core/core', () => ({}));
-jest.mock('app/angular/partials', () => ({}));
-jest.mock('app/features/plugins/plugin_loader', () => ({}));
+jest.mock('../app/core/core', () => ({}));
+jest.mock('../app/angular/partials', () => ({}));
+jest.mock('../app/features/plugins/plugin_loader', () => ({}));
 
 configure({ adapter: new Adapter() });
 

scripts/ci-check-strict.sh

@@ -4,7 +4,7 @@ set -e
 echo -e "Collecting code stats (typescript errors & more)"
 
 ERROR_COUNT_LIMIT=6
-ERROR_COUNT="$(./node_modules/.bin/tsc --project tsconfig.json --noEmit --strict true | grep -oP 'Found \K(\d+)')"
+ERROR_COUNT="$(yarn run tsc --project tsconfig.json --noEmit --strict true | grep -oP 'Found \K(\d+)')"
 
 if [ "$ERROR_COUNT" -gt $ERROR_COUNT_LIMIT ]; then
   echo -e "Typescript strict errors $ERROR_COUNT exceeded $ERROR_COUNT_LIMIT so failing build"

scripts/ci-frontend-metrics.sh

@@ -1,7 +1,7 @@
 #!/bin/bash
 set -e
 
-ERROR_COUNT="$(./node_modules/.bin/tsc --project tsconfig.json --noEmit --strict true | grep -oP 'Found \K(\d+)')"
+ERROR_COUNT="$(yarn run tsc --project tsconfig.json --noEmit --strict true | grep -oP 'Found \K(\d+)')"
 ACCESSIBILITY_ERRORS="$(grep -oP '\"errors\":(\d+),' pa11y-ci-results.json | grep -oP '\d+')"
 DIRECTIVES="$(grep -r -o  directive public/app/ | wc -l)"
 CONTROLLERS="$(grep -r -oP 'class .*Ctrl' public/app/ | wc -l)"
@@ -9,7 +9,7 @@ STORIES_COUNT="$(find ./packages/grafana-ui/src/components -name "*.story.tsx" |
 MDX_COUNT="$(find ./packages/grafana-ui/src/components -name "*.mdx" | wc -l)"
 LEGACY_FORMS="$(grep -r -oP 'LegacyForms;' public/app | wc -l)"
 
-STRICT_LINT_RESULTS="$(./node_modules/.bin/eslint --rule '@typescript-eslint/no-explicit-any: ["error"]' --format unix --ext .ts,.tsx ./public || true)"
+STRICT_LINT_RESULTS="$(yarn run eslint --rule '@typescript-eslint/no-explicit-any: ["error"]' --format unix --ext .ts,.tsx ./public || true)"
 STRICT_LINT_EXPLICIT_ANY="$(echo "${STRICT_LINT_RESULTS}" | grep -o "no-explicit-any" | wc -l)"
 
 TOTAL_BUNDLE="$(du -sk ./public/build | cut -f1)"

scripts/drone/steps/lib.star

@@ -994,7 +994,7 @@ def ensure_cuetsified_step():
             '# The above command generates Typescript files (*.gen.ts) from all appropriate .cue files.',
             '# It is required that the generated Typescript be in sync with the input CUE files.',
             '# ...Modulo eslint auto-fixes...:',
-            './node_modules/.bin/eslint . --ext .gen.ts --fix',
+            'yarn run eslint . --ext .gen.ts --fix',
             '# If any filenames are emitted by the below script, run the generator command `grafana-cli cue gen-ts` locally and commit the result.',
             './scripts/clean-git-or-error.sh',
             '# Un-stash changes.',

scripts/webpack/webpack.common.js

@@ -10,7 +10,10 @@ class CopyUniconsPlugin {
       let destDir = path.resolve(__dirname, '../../public/img/icons/unicons');
 
       if (!fs.pathExistsSync(destDir)) {
-        let srcDir = path.resolve(__dirname, '../../node_modules/iconscout-unicons-tarball/unicons/svg/line');
+        let srcDir = path.join(
+          path.dirname(require.resolve('iconscout-unicons-tarball/package.json')),
+          'unicons/svg/line'
+        );
         fs.copySync(srcDir, destDir);
       }
     });
@@ -32,27 +35,19 @@ module.exports = {
   resolve: {
     extensions: ['.ts', '.tsx', '.es6', '.js', '.json', '.svg'],
     alias: {
-      // rc-trigger uses babel-runtime which has internal dependency to core-js@2
-      // this alias maps that dependency to core-js@t3
-      'core-js/library/fn': 'core-js/stable',
       // 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'),
-      'react-hook-form': require.resolve('react-hook-form'),
-      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'),
+      prismjs: require.resolve('prismjs'),
     },
     modules: [
       'node_modules',
-      path.resolve('public'),
       // we need full path to root node_modules for grafana-enterprise symlink to work
       path.resolve('node_modules'),
+      '.yarn',
+      path.resolve('.yarn'),
+      path.resolve('public'),
     ],
     fallback: {
       buffer: false,
@@ -60,6 +55,7 @@ module.exports = {
       stream: false,
       http: false,
       https: false,
+      string_decoder: false,
     },
   },
   ignoreWarnings: [/export .* was not found in/],
@@ -75,9 +71,9 @@ module.exports = {
     new CopyWebpackPlugin({
       patterns: [
         {
-          context: path.resolve(__dirname, '../../node_modules/monaco-editor/'),
-          from: 'min/vs/**',
-          to: '../lib/monaco/', // inside the public/build folder
+          context: path.join(require.resolve('monaco-editor/package.json'), '../min/vs/'),
+          from: '**/*',
+          to: '../lib/monaco/min/vs/', // inside the public/build folder
           globOptions: {
             ignore: [
               '**/*.map', // debug files
@@ -85,7 +81,8 @@ module.exports = {
           },
         },
         {
-          from: './node_modules/@kusto/monaco-kusto/release/min/',
+          context: path.join(require.resolve('@kusto/monaco-kusto'), '../'),
+          from: '**/*',
           to: '../lib/monaco/min/vs/language/kusto/',
         },
       ],

tsconfig.json

@@ -3,13 +3,7 @@
     "jsx": "react",
     "baseUrl": "public/",
     "outDir": "public/dist",
-    "paths": {
-      "@grafana/slate-react": ["../node_modules/@types/slate-react"],
-      "app": ["app/"],
-      "sass": ["sass/"]
-    },
     "rootDirs": ["public/"],
-    "typeRoots": ["node_modules/@types", "public/app/types"],
     "allowJs": true,
     "strictNullChecks": true,
     "resolveJsonModule": true,