chore: Switch to pnpm + adjust to IRM (#4969)

# What this PR does
- switch to pnpm
- adjust to IRM

## Which issue(s) this PR closes

Related to:
https://github.com/grafana/irm/issues/12
https://github.com/grafana/irm/issues/11
https://github.com/grafana/irm/issues/66

<!--
*Note*: If you want the issue to be auto-closed once the PR is merged,
change "Related to" to "Closes" in the line above.
If you have more than one GitHub issue that this PR closes, be sure to
preface
each issue link with a [closing
keyword](https://docs.github.com/en/get-started/writing-on-github/working-with-advanced-formatting/using-keywords-in-issues-and-pull-requests#linking-a-pull-request-to-an-issue).
This ensures that the issue(s) are auto-closed once the PR has been
merged.
-->

## Checklist

- [x] Unit, integration, and e2e (if applicable) tests updated
- [x] Documentation added (or `pr:no public docs` PR label added if not
required)
- [x] Added the relevant release notes label (see labels prefixed w/
`release:`). These labels dictate how your PR will
    show up in the autogenerated release notes.

.github/actions/build-sign-and-package-plugin/action.yml

@@ -41,9 +41,9 @@ runs:
         GRAFANA_ACCESS_POLICY_TOKEN: ${{ inputs.grafana_access_policy_token }}
       run: |
         jq --arg v "${{ inputs.plugin_version_number }}" '.version=$v' package.json > package.new && mv package.new package.json && jq '.version' package.json;
-        yarn build
+        pnpm build
         mage buildAll || true
-        yarn sign
+        pnpm sign
         if [ ! -f dist/MANIFEST.txt ]; then echo "Sign failed, MANIFEST.txt not created, aborting." && exit 1; fi
         mv dist grafana-oncall-app
         zip -r grafana-oncall-app.zip ./grafana-oncall-app

.github/actions/install-frontend-dependencies/action.yml

@@ -1,38 +1,18 @@
-name: "Install frontend dependencies"
+name: Install frontend dependencies
-description: "Setup node + install frontend dependencies"
+description: Setup node/pnpm + install frontend dependencies
-inputs:
-  working-directory:
-    description: "Relative path to oncall/grafana-plugin directory"
-    required: false
-    default: "."
 runs:
-  using: "composite"
+  using: composite
   steps:
-    - name: Determine grafana-plugin directory location
+    - name: Install pnpm
-      id: grafana-plugin-directory
+      uses: pnpm/action-setup@v4
-      shell: bash
+      with:
-      run: echo "grafana-plugin-directory=${{ inputs.working-directory }}/grafana-plugin" >> $GITHUB_OUTPUT
+        version: 9.1.4
-    - name: Determine yarn.lock location
-      id: yarn-lock-location
-      shell: bash
-      # yamllint disable rule:line-length
-      run: echo "yarn-lock-location=${{ steps.grafana-plugin-directory.outputs.grafana-plugin-directory }}/yarn.lock" >> $GITHUB_OUTPUT
-      # yamllint enable rule:line-length
     - uses: actions/setup-node@v4
       with:
         node-version: 20.15.1
-        cache: "yarn"
+        cache: pnpm
-        cache-dependency-path: ${{ steps.yarn-lock-location.outputs.yarn-lock-location }}
+        cache-dependency-path: grafana-plugin/pnpm-lock.yaml
-    - name: Use cached frontend dependencies
-      id: cache-frontend-dependencies
-      uses: actions/cache@v4
-      with:
-        path: ${{ inputs.working-directory }}/grafana-plugin/node_modules
-        # yamllint disable rule:line-length
-        key: ${{ runner.os }}-frontend-node-modules-${{ hashFiles(steps.yarn-lock-location.outputs.yarn-lock-location) }}
-        # yamllint enable rule:line-length
     - name: Install frontend dependencies
-      if: steps.cache-frontend-dependencies.outputs.cache-hit != 'true'
       shell: bash
-      working-directory: ${{ steps.grafana-plugin-directory.outputs.grafana-plugin-directory }}
+      working-directory: grafana-plugin
-      run: yarn install --frozen-lockfile --prefer-offline --network-timeout 500000
+      run: pnpm install --frozen-lockfile --prefer-offline

.github/workflows/e2e-tests.yml

@@ -78,12 +78,12 @@ jobs:
         uses: actions/cache@v4
         with:
           path: grafana-plugin/dist
-          key: ${{ runner.os }}-plugin-frontend-${{ hashFiles('grafana-plugin/src/**/*', 'grafana-plugin/yarn.lock') }}
+          key: ${{ runner.os }}-plugin-frontend-${{ hashFiles('grafana-plugin/src/**/*', 'grafana-plugin/pnpm.lock') }}
 
       - name: Build plugin frontend
         if: steps.cache-plugin-frontend.outputs.cache-hit != 'true'
         working-directory: grafana-plugin
-        run: yarn build:dev
+        run: pnpm build:dev
 
       # helpful reference for properly caching the playwright binaries/dependencies
       # https://playwrightsolutions.com/playwright-github-action-to-cache-the-browser-binaries/
@@ -107,7 +107,7 @@ jobs:
       - name: Install Playwright deps
         shell: bash
         working-directory: grafana-plugin
-        run: yarn playwright install
+        run: pnpm playwright install
 
       # ---------- Expensive e2e tests steps start -----------
       - name: Install Go
@@ -150,7 +150,7 @@ jobs:
         if: inputs.run-expensive-tests
         shell: bash
         env:
-          E2E_TESTS_CMD: "cd ../../grafana-plugin && yarn test:e2e-expensive"
+          E2E_TESTS_CMD: "cd ../../grafana-plugin && pnpm test:e2e-expensive"
           GRAFANA_VERSION: ${{ inputs.grafana_version }}
           GF_FEATURE_TOGGLES_ENABLE: "externalServiceAccounts"
           ONCALL_API_URL: "http://oncall-dev-engine:8080"

.github/workflows/linting-and-tests.yml

@@ -35,7 +35,7 @@ jobs:
         uses: ./.github/actions/install-frontend-dependencies
       - name: Build, lint and test frontend
         working-directory: grafana-plugin
-        run: yarn lint && yarn type-check && yarn test && yarn build
+        run: pnpm lint && pnpm type-check && pnpm test && pnpm build
 
   test-technical-documentation:
     name: "Test technical documentation"

.gitignore

@@ -8,7 +8,7 @@ venv
 .DS_Store
 .env
 
-yarn.lock
+pnpm.lock
 node_modules
 
 test-results

.pre-commit-config.yaml

@@ -53,7 +53,7 @@ repos:
     rev: v8.25.0
     hooks:
       - id: eslint
-        entry: bash -c "cd grafana-plugin && eslint --max-warnings=0 --fix ${@/grafana-plugin\//}" --
+        entry: bash -c "cd grafana-plugin && eslint --max-warnings=20 --fix ${@/grafana-plugin\//}" --
         types: [file]
         files: ^grafana-plugin/src/(?:(?!autogenerated).)*\.(js|jsx|ts|tsx)$
         additional_dependencies:

.tilt/plugin/Tiltfile

@@ -9,7 +9,7 @@ if is_ci:
         "build-ui",
         labels=[label],
         dir=grafana_plugin_dir,
-        cmd="yarn build",
+        cmd="pnpm build",
         allow_parallel=True,
     )
 
@@ -19,9 +19,9 @@ if not is_ci:
         "build-ui",
         labels=[label],
         dir=grafana_plugin_dir,
-        cmd="yarn install",
+        cmd="pnpm install",
         serve_dir=grafana_plugin_dir,
-        serve_cmd="yarn watch",
+        serve_cmd="pnpm watch",
         allow_parallel=True,
     )
 

.tilt/tests/Tiltfile

@@ -2,7 +2,7 @@ label = "OnCall.AllTests"
 
 load('ext://uibutton', 'cmd_button', 'location', 'text_input', 'bool_input')
 
-e2e_tests_cmd=os.getenv("E2E_TESTS_CMD", "cd ../../grafana-plugin && yarn test:e2e")
+e2e_tests_cmd=os.getenv("E2E_TESTS_CMD", "cd ../../grafana-plugin && pnpm test:e2e")
 is_ci=config.tilt_subcommand == "ci"
 
 local_resource(
@@ -16,7 +16,7 @@ local_resource(
 
 cmd_button(
     name="E2E Tests - headless run",
-    argv=["sh", "-c", "yarn --cwd ./grafana-plugin test:e2e $STOP_ON_FIRST_FAILURE $TESTS_FILTER"],
+    argv=["sh", "-c", "pnpm --dir ./grafana-plugin test:e2e $STOP_ON_FIRST_FAILURE $TESTS_FILTER"],
     text="Restart headless run",
     resource="e2e-tests",
     icon_name="replay",
@@ -29,7 +29,7 @@ cmd_button(
 
 cmd_button(
     name="E2E Tests - open watch mode",
-    argv=["sh", "-c", "yarn --cwd grafana-plugin test:e2e:watch"],
+    argv=["sh", "-c", "pnpm --dir grafana-plugin test:e2e:watch"],
     text="Open watch mode",
     resource="e2e-tests",
     icon_name="visibility",
@@ -37,7 +37,7 @@ cmd_button(
 
 cmd_button(
     name="E2E Tests - show report",
-    argv=["sh", "-c", "yarn --cwd grafana-plugin playwright show-report"],
+    argv=["sh", "-c", "pnpm --dir grafana-plugin playwright show-report"],
     text="Show last HTML report",
     resource="e2e-tests",
     icon_name="assignment",

.yamllint.yml

@@ -2,6 +2,7 @@ extends: default
 
 ignore: |
   helm/oncall/templates/**/*.yaml
+  pnpm-lock.yaml
 
 rules:
   line-length:

Makefile

@@ -141,7 +141,7 @@ init:  ## build the frontend plugin code then run make start
 # this makes sure that it will be available when the grafana container starts up without the need to
 # restart the grafana container initially
 ifeq ($(findstring $(UI_PROFILE),$(COMPOSE_PROFILES)),$(UI_PROFILE))
-	$(call run_ui_docker_command,yarn install && yarn build:dev)
+	$(call run_ui_docker_command,pnpm install && pnpm build:dev)
 endif
 
 stop:  # stop all of the docker containers
@@ -168,7 +168,7 @@ install-pre-commit:
 	fi
 
 lint: install-pre-commit  ## run both frontend and backend linters
-                          ## may need to run `yarn install` from within `grafana-plugin`
+                          ## may need to run `pnpm install` from within `grafana-plugin`
                           ## to install several `pre-commit` dependencies
 	pre-commit run --all-files
 
@@ -203,25 +203,25 @@ engine-manage:  ## run Django's `manage.py` script, inside of a docker container
 	$(call run_engine_docker_command,python manage.py $(CMD))
 
 test-e2e:  ## run the e2e tests in headless mode
-	yarn --cwd grafana-plugin test:e2e
+	pnpm --dir grafana-plugin test:e2e
 
 test-e2e-watch:  ## start e2e tests in watch mode
-	yarn --cwd grafana-plugin test:e2e:watch
+	pnpm --dir grafana-plugin test:e2e:watch
 
 test-e2e-show-report:  ## open last e2e test report
-	yarn --cwd grafana-plugin playwright show-report
+	pnpm --dir grafana-plugin playwright show-report
 
 ui-test:  ## run the UI tests
-	$(call run_ui_docker_command,yarn test)
+	$(call run_ui_docker_command,pnpm test)
 
 ui-lint:  ## run the UI linter
-	$(call run_ui_docker_command,yarn lint)
+	$(call run_ui_docker_command,pnpm lint)
 
 ui-build:  ## build the UI
-	$(call run_ui_docker_command,yarn build)
+	$(call run_ui_docker_command,pnpm build)
 
 ui-command:  ## run any command, inside of a UI docker container, passing `$CMD` as arguments.
-             ## e.g. `make ui-command CMD="yarn test"`
+             ## e.g. `make ui-command CMD="pnpm test"`
 	$(call run_ui_docker_command,$(CMD))
 
 exec-engine:  ## exec into engine container's bash

dev/README.md

@@ -12,7 +12,7 @@ Related: [How to develop integrations](/engine/config_integrations/README.md)
 - [tilt-dev/ctlptl: Making local Kubernetes clusters fun and easy to set up](https://github.com/tilt-dev/ctlptl)
 - [Kind](https://kind.sigs.k8s.io)
 - [Node.js v20.x](https://nodejs.org/en/download)
-- [Yarn](https://classic.yarnpkg.com/lang/en/docs/install/#mac-stable)
+- [pnpm](https://pnpm.io/installation)
 
 ### Launch the environment
 
@@ -519,7 +519,7 @@ In order to automate types creation and prevent API usage pitfalls, OnCall proje
 
 ### Instruction
 
-1. Whenever API contract changes, run `yarn generate-types` from `grafana-plugin` directory
+1. Whenever API contract changes, run `pnpm generate-types` from `grafana-plugin` directory
 2. Then you can start consuming types and you can use fully typed http client:
 
    ```ts

grafana-plugin/.gitignore

@@ -8,8 +8,8 @@
 /dist
 
 npm-debug.log*
-yarn-debug.log*
+pnpm-debug.log*
-yarn-error.log*
+pnpm-error.log*
 
 # This file is generated
 grafana-plugin.yml

grafana-plugin/Dockerfile.dev

@@ -3,4 +3,4 @@ FROM node:20.15.1-alpine
 WORKDIR /etc/app
 ENV PATH /etc/app/node_modules/.bin:$PATH
 
-CMD ["yarn", "start"]
+CMD ["pnpm", "start"]

grafana-plugin/package.json

@@ -9,29 +9,29 @@
     "stylelint:fix": "stylelint --fix ./src/**/*.{css,scss,module.css,module.scss}",
     "build": "NODE_ENV=production webpack -c ./webpack.config.ts --env production",
     "build:dev": "NODE_ENV=development webpack -c ./webpack.config.ts --env development",
-    "labels:link": "yarn --cwd ../../gops-labels/frontend link && yarn link \"@grafana/labels\" && yarn --cwd ../../gops-labels/frontend watch",
+    "labels:link": "pnpm --dir ../../gops-labels/frontend link && pnpm link \"@grafana/labels\" && pnpm --dir ../../gops-labels/frontend watch",
-    "labels:unlink": "yarn --cwd ../../gops-labels/frontend unlink",
+    "labels:unlink": "pnpm --dir ../../gops-labels/frontend unlink",
     "mage:build-dev": "go mod download && mage -v build:debug",
     "mage:watch": "go mod download && mage -v watch",
     "test-utc": "TZ=UTC jest --verbose --testNamePattern '^((?!@london-tz).)*$'",
     "test-london-tz": "TZ=Europe/London jest --verbose --testNamePattern '@london-tz'",
-    "test": "PLUGIN_ID=grafana-oncall-app yarn test-utc && yarn test-london-tz",
+    "test": "PLUGIN_ID=grafana-oncall-app pnpm test-utc && pnpm test-london-tz",
     "test:ci": "PLUGIN_ID=grafana-oncall-app pnpm test-utc && pnpm test-london-tz",
-    "test:report": "HTML_REPORT_ENABLED=true yarn test",
+    "test:report": "HTML_REPORT_ENABLED=true pnpm test",
-    "test:silent": "yarn test --silent",
+    "test:silent": "pnpm test --silent",
-    "test:e2e": "PLUGIN_ID=grafana-oncall-app yarn playwright test --grep-invert @expensive",
+    "test:e2e": "PLUGIN_ID=grafana-oncall-app pnpm playwright test --grep-invert @expensive",
-    "test:e2e-expensive": "PLUGIN_ID=grafana-oncall-app yarn playwright test --grep @expensive",
+    "test:e2e-expensive": "PLUGIN_ID=grafana-oncall-app pnpm playwright test --grep @expensive",
-    "test:e2e:watch": "yarn test:e2e --ui",
+    "test:e2e:watch": "pnpm test:e2e --ui",
-    "test:e2e-expensive:watch": "yarn test:e2e-expensive --ui",
+    "test:e2e-expensive:watch": "pnpm test:e2e-expensive --ui",
-    "test:e2e:gen": "yarn playwright codegen http://localhost:3000",
+    "test:e2e:gen": "pnpm playwright codegen http://localhost:3000",
-    "e2e-show-report": "yarn playwright show-report --port 31000",
+    "e2e-show-report": "pnpm playwright show-report --port 31000",
-    "generate-types": "cd ./src/network/oncall-api/types-generator && yarn generate",
+    "generate-types": "cd ./src/network/oncall-api/types-generator && pnpm generate",
     "watch": "NODE_ENV=development webpack -w -c ./webpack.config.ts --env development",
     "sign": "npx --yes @grafana/sign-plugin@latest",
-    "start": "yarn watch",
+    "start": "pnpm watch",
     "setversion": "setversion",
     "type-check": "tsc --noEmit",
-    "type-check:watch": "yarn type-check --watch --preserveWatchOutput false",
+    "type-check:watch": "pnpm type-check --watch --preserveWatchOutput false",
     "find-dead-code": "knip"
   },
   "repository": {

grafana-plugin/src/models/loader/loader.ts

@@ -1,12 +1,10 @@
 import { action, observable, makeObservable } from 'mobx';
 
-interface LoadingResult {
-  [key: string]: boolean;
-}
-
 class LoaderStoreClass {
   @observable
-  items: LoadingResult = {};
+  items: {
+    [key: string]: boolean;
+  } = {};
 
   constructor() {
     makeObservable(this);

grafana-plugin/src/network/oncall-api/http-client.ts

@@ -59,14 +59,17 @@ const clientConfig = {
 };
 
 // We might want to switch to middleware instead of 2 clients once this is published: https://github.com/drwpow/openapi-typescript/pull/1521
-const onCallApiWithGlobalErrorHandling = createClient<paths>({
+const onCallApiWithGlobalErrorHandling: ReturnType<typeof createClient<paths>> = createClient<paths>({
   ...clientConfig,
   fetch: getCustomFetchFn({ withGlobalErrorHandler: true }),
 });
-const onCallApiSkipErrorHandling = createClient<paths>({
+const onCallApiSkipErrorHandling: ReturnType<typeof createClient<paths>> = createClient<paths>({
   ...clientConfig,
   fetch: getCustomFetchFn({ withGlobalErrorHandler: false }),
 });
 
-export const onCallApi = ({ skipErrorHandling = false }: { skipErrorHandling?: boolean } = {}) =>
+export function onCallApi({ skipErrorHandling = false }: { skipErrorHandling?: boolean } = {}):
-  skipErrorHandling ? onCallApiSkipErrorHandling : onCallApiWithGlobalErrorHandling;
+  | typeof onCallApiSkipErrorHandling
+  | typeof onCallApiWithGlobalErrorHandling {
+  return skipErrorHandling ? onCallApiSkipErrorHandling : onCallApiWithGlobalErrorHandling;
+}

grafana-plugin/tsconfig.json

@@ -3,6 +3,8 @@
   "include": ["src", "e2e-tests", "playwright.config.ts"],
   "types": ["node", "@emotion/core"],
   "compilerOptions": {
+    "composite": true,
+    "declaration": true,
     "rootDir": "",
     "typeRoots": ["./node_modules/@types"],
     "noUnusedLocals": false,