Feat #1126 Add Data Tab to rtk-query-monitor (#1129)

* fix: broken rtk-query-monitor demo not working #1126 Description: downgrades framer-motion in order to remove the runtime error "_framerMotion.motion.custom is not a function" See: https://stackoverflow.com/questions/66703410/next-js-framermotion-motion-custom-is-not-a-function * feat(rtk-query): add Data tab #1126 * fix: bump min popup width to 700px #1126 Description: improve UI of rtk-query right side tabs * fix: bump min popup window width again to 760px #1126 * chore: add changeset * feat(rtk-query): improve a11y of rtk-query-monitor tab panel #1126 * chore(rtk-query): add few integration tests to rtk-query-monitor #1126 * Fix merge * Deduplicate msw Co-authored-by: Nathan Bierema <nbierema@gmail.com>

Author: FaberVitale

.changeset/lemon-balloons-sniff.md

@@ -0,0 +1,5 @@
+---
+'@redux-devtools/rtk-query-monitor': minor
+---
+
+feat(rtk-query): add Data tab to rtk-query-monitor #1126 #1129

.changeset/popular-dodos-laugh.md

@@ -0,0 +1,5 @@
+---
+'rtk-query-demo': patch
+---
+
+fix: rtk-query-monitor demo not working #1126 #1129

.changeset/ten-files-return.md

@@ -0,0 +1,5 @@
+---
+'remotedev-redux-devtools-extension': patch
+---
+
+bump min popup window width to 760px #1126 #1129

extension/src/browser/views/includes/style.pug

@@ -7,7 +7,7 @@ style.
  overflow: hidden;
  height: 100%;
  width: 100%;
- min-width: 350px;
+ min-width: 760px;
  min-height: 400px;
  margin: 0;
  padding: 0;
@@ -17,6 +17,7 @@ style.
  color: #fff;
  }
  #root {
+ min-width: 760px;
  height: 100%;
  }
  #root > div {

packages/redux-devtools-rtk-query-monitor/.eslintignore

@@ -1,2 +1,3 @@
 demo
 lib
+dist

packages/redux-devtools-rtk-query-monitor/.eslintrc.js

@@ -9,5 +9,13 @@ module.exports = {
  project: ['./tsconfig.json'],
  },
  },
+ {
+ files: ['test/**/*.ts', 'test/**/*.tsx'],
+ extends: '../../eslintrc.ts.react.jest.base.json',
+ parserOptions: {
+ tsconfigRootDir: __dirname,
+ project: ['./tsconfig.test.json'],
+ },
+ },
  ],
 };

packages/redux-devtools-rtk-query-monitor/demo/package.json

@@ -20,7 +20,7 @@
  "@redux-devtools/rtk-query-monitor": "^3.0.0",
  "@reduxjs/toolkit": "^1.8.2",
  "framer-motion": "^6.3.15",
- "msw": "^0.42.3",
+ "msw": "^0.43.0",
  "react": "^18.2.0",
  "react-dom": "^18.2.0",
  "react-icons": "^4.4.0",

packages/redux-devtools-rtk-query-monitor/jest.config.js

@@ -0,0 +1,12 @@
+module.exports = {
+ preset: 'ts-jest',
+ testEnvironment: 'jsdom',
+ moduleNameMapper: {
+ '\\.css$': '<rootDir>/test/__mocks__/styleMock.ts',
+ },
+ globals: {
+ 'ts-jest': {
+ tsconfig: 'tsconfig.test.json',
+ },
+ },
+};

packages/redux-devtools-rtk-query-monitor/package.json

@@ -37,10 +37,11 @@
  "build:esm": "babel src --config-file ./babel.config.esm.json --extensions \".ts,.tsx\" --out-dir lib/esm",
  "build:types": "tsc --emitDeclarationOnly",
  "clean": "rimraf lib",
+ "test": "jest",
  "lint": "eslint . --ext .ts,.tsx",
  "type-check": "tsc --noEmit",
  "prepack": "pnpm run clean && pnpm run build",
- "prepublish": "pnpm run type-check && pnpm run lint"
+ "prepublish": "pnpm run type-check && pnpm run lint && pnpm run test"
  },
  "dependencies": {
  "@babel/runtime": "^7.18.3",
@@ -68,18 +69,26 @@
  "@babel/preset-typescript": "^7.17.12",
  "@redux-devtools/core": "^3.13.1",
  "@reduxjs/toolkit": "^1.8.2",
+ "@testing-library/jest-dom": "^5.16.4",
+ "@testing-library/react": "^13.3.0",
+ "@types/jest": "^27.5.2",
  "@types/hex-rgba": "^1.0.1",
  "@types/lodash.debounce": "^4.0.7",
  "@types/react": "^18.0.14",
  "@typescript-eslint/eslint-plugin": "^5.29.0",
  "@typescript-eslint/parser": "^5.29.0",
  "eslint": "^8.18.0",
  "eslint-config-prettier": "^8.5.0",
+ "eslint-plugin-jest": "^26.5.3",
  "eslint-plugin-react": "^7.30.1",
  "eslint-plugin-react-hooks": "^4.6.0",
+ "jest": "^27.5.1",
  "react": "^18.2.0",
+ "react-dom": "^18.2.0",
+ "react-redux": "^8.0.2",
  "redux": "^4.2.0",
  "rimraf": "^3.0.2",
+ "ts-jest": "^27.1.5",
  "typescript": "~4.7.4"
  },
  "peerDependencies": {

packages/redux-devtools-rtk-query-monitor/src/components/QueryForm.tsx

@@ -128,6 +128,7 @@ export class QueryForm extends React.PureComponent<
  {({ styling, base16Theme }) => {
  return (
  <form
+ id="rtk-query-monitor-query-selection-form"
  action="#"
  onSubmit={this.handleSubmit}
  {...styling('queryForm')}