Adjustments to IRM unified plugin (#4727)

# What this PR does

- TypeScript version bump 5.1
- Other minor tweaks that are required to successfully build and lint
IRM plugin with oncall code imported

## Which issue(s) this PR closes

Related to grafana/irm#3

<!--
*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

- [ ] 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.

.eslintrc.js

@@ -1,5 +1,5 @@
 const rulesDirPlugin = require('eslint-plugin-rulesdir');
-rulesDirPlugin.RULES_DIR = 'tools/eslint-rules';
+rulesDirPlugin.RULES_DIR = __dirname + '/tools/eslint-rules';
 
 module.exports = {
   extends: ['./.config/.eslintrc'],
@@ -8,6 +8,19 @@ module.exports = {
     'import/internal-regex':
       '^assets|^components|^containers|^contexts|^icons|^models|^network|^pages|^services|^state|^utils|^plugin',
   },
+  overrides: [
+    {
+      files: ['src/**/*.{ts,tsx}'],
+      rules: {
+        'deprecation/deprecation': 'off',
+      },
+      parserOptions: {
+        project: './tsconfig.json',
+        tsconfigRootDir: __dirname,
+      },
+    },
+  ],
+
   rules: {
     eqeqeq: 'warn',
     'import/order': [

package.json

@@ -59,8 +59,9 @@
     "@swc/core": "^1.3.90",
     "@swc/helpers": "^0.5.0",
     "@swc/jest": "^0.2.26",
-    "@testing-library/jest-dom": "6.1.4",
-    "@testing-library/react": "14.0.0",
+    "@testing-library/dom": "latest",
+    "@testing-library/jest-dom": "^6.4.2",
+    "@testing-library/react": "^14.1.2",
     "@testing-library/user-event": "^14.4.3",
     "@types/dompurify": "^2.3.4",
     "@types/express": "^4.17.21",
@@ -107,8 +108,6 @@
     "plop": "^2.7.4",
     "postcss-loader": "^7.0.1",
     "prettier": "^2.8.7",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
     "react-test-renderer": "^18.0.2",
     "replace-in-file-webpack-plugin": "^1.0.6",
     "sass": "1.63.2",
@@ -121,7 +120,7 @@
     "ts-jest": "29.0.3",
     "ts-node": "^10.9.1",
     "tsconfig-paths": "^4.2.0",
-    "typescript": "4.8.4",
+    "typescript": "5.1",
     "webpack": "^5.86.0",
     "webpack-bundle-analyzer": "^4.6.1",
     "webpack-cli": "^5.1.4",
@@ -143,7 +142,7 @@
     "@grafana/runtime": "^10.2.2",
     "@grafana/scenes": "^1.28.0",
     "@grafana/schema": "^10.2.2",
-    "@grafana/ui": "^10.2.0",
+    "@grafana/ui": "10.2.0",
     "@lifeomic/attempt": "^3.0.3",
     "array-move": "^4.0.0",
     "axios": "^1.6.7",

src/components/CardButton/CardButton.test.tsx

@@ -1,4 +1,4 @@
-import 'jest/matchMedia.ts';
+import 'jest/matchMedia';
 import React from 'react';
 
 import { fireEvent, render, screen } from '@testing-library/react';

src/components/Collapse/Collapse.test.tsx

@@ -1,4 +1,4 @@
-import 'jest/matchMedia.ts';
+import 'jest/matchMedia';
 import React from 'react';
 
 import { render, fireEvent, screen } from '@testing-library/react';

src/components/ScheduleQualityDetails/ScheduleQualityProgressBar.test.tsx

@@ -1,4 +1,4 @@
-import 'jest/matchMedia.ts';
+import 'jest/matchMedia';
 import React from 'react';
 
 import { render, screen } from '@testing-library/react';

src/components/SourceCode/SourceCode.test.tsx

@@ -1,4 +1,4 @@
-import 'jest/matchMedia.ts';
+import 'jest/matchMedia';
 import React from 'react';
 
 import { render, screen } from '@testing-library/react';

src/pages/incident/Incident.tsx

@@ -647,6 +647,7 @@ class _IncidentPage extends React.Component<IncidentPageProps, IncidentPageState
   };
 
   getPlaceholderReplaceFn = (entity: TimeLineItem) => {
+    // eslint-disable-next-line react/display-name
     return (match: string) => {
       switch (match) {
         case 'author':

src/state/rootBaseStore/RootBaseStore.ts

@@ -172,6 +172,7 @@ export class RootBaseStore {
    * - the user must have an Admin role and necessary permissions
    * Finally, try to load the current user from the OnCall backend
    */
+  @action.bound
   async setupPlugin(meta: OnCallAppPluginMeta) {
     this.setupPluginError(null);
     this.onCallApiUrl = getOnCallApiUrl(meta);