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 <[email protected]>

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')}