Feat #1126 Add Data Tab to rtk-query-monitor

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

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

@@ -1,8 +1,10 @@
 import { createSelector, Selector } from '@reduxjs/toolkit';
 import React, { ReactNode, PureComponent } from 'react';
 import { Action, AnyAction } from 'redux';
+import { QueryPreviewTabs } from '../types';
+import { renderTabPanelButtonId, renderTabPanelId } from '../utils/a11y';
 import { emptyRecord, identity } from '../utils/object';
-import { TreeView } from './TreeView';
+import { TreeView, TreeViewProps } from './TreeView';
 
 export interface QueryPreviewActionsProps {
   isWideLayout: boolean;
@@ -11,6 +13,12 @@ export interface QueryPreviewActionsProps {
 
 const keySep = ' - ';
 
+const rootProps: TreeViewProps['rootProps'] = {
+  'aria-labelledby': renderTabPanelButtonId(QueryPreviewTabs.actions),
+  id: renderTabPanelId(QueryPreviewTabs.actions),
+  role: 'tabpanel',
+};
+
 export class QueryPreviewActions extends PureComponent<QueryPreviewActionsProps> {
   selectFormattedActions: Selector<
     AnyAction[],
@@ -74,6 +82,7 @@ export class QueryPreviewActions extends PureComponent<QueryPreviewActionsProps>
 
     return (
       <TreeView
+        rootProps={rootProps}
         data={this.selectFormattedActions(actionsOfQuery)}
         isWideLayout={isWideLayout}
         shouldExpandNode={this.shouldExpandNode}

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

@@ -1,14 +1,21 @@
 import React, { ReactNode, PureComponent } from 'react';
-import { ApiStats, RtkQueryApiState } from '../types';
+import { ApiStats, QueryPreviewTabs, RtkQueryApiState } from '../types';
 import { StyleUtilsContext } from '../styles/createStylingFromTheme';
-import { TreeView } from './TreeView';
+import { TreeView, TreeViewProps } from './TreeView';
+import { renderTabPanelId, renderTabPanelButtonId } from '../utils/a11y';
 
 export interface QueryPreviewApiProps {
   apiStats: ApiStats | null;
   apiState: RtkQueryApiState | null;
   isWideLayout: boolean;
 }
 
+const rootProps: TreeViewProps['rootProps'] = {
+  'aria-labelledby': renderTabPanelButtonId(QueryPreviewTabs.apiConfig),
+  id: renderTabPanelId(QueryPreviewTabs.apiConfig),
+  role: 'tabpanel',
+};
+
 export class QueryPreviewApi extends PureComponent<QueryPreviewApiProps> {
   shouldExpandApiStateNode = (
     keyPath: (string | number)[],
@@ -33,7 +40,7 @@ export class QueryPreviewApi extends PureComponent<QueryPreviewApiProps> {
     return (
       <StyleUtilsContext.Consumer>
         {({ styling }) => (
-          <article {...styling('tabContent')}>
+          <article {...rootProps} {...styling('tabContent')}>
             <h2>{apiState.config.reducerPath}</h2>
             <TreeView
               before={<h3>State</h3>}

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

@@ -0,0 +1,38 @@
+import React, { ReactNode, PureComponent } from 'react';
+import { QueryPreviewTabs, RtkResourceInfo } from '../types';
+import { renderTabPanelButtonId, renderTabPanelId } from '../utils/a11y';
+import { TreeView, TreeViewProps } from './TreeView';
+
+export interface QueryPreviewDataProps {
+  data: RtkResourceInfo['state']['data'];
+  isWideLayout: boolean;
+}
+
+const rootProps: TreeViewProps['rootProps'] = {
+  'aria-labelledby': renderTabPanelButtonId(QueryPreviewTabs.data),
+  id: renderTabPanelId(QueryPreviewTabs.data),
+  role: 'tabpanel',
+};
+
+export class QueryPreviewData extends PureComponent<QueryPreviewDataProps> {
+  shouldExpandNode = (
+    keyPath: (string | number)[],
+    value: unknown,
+    layer: number
+  ): boolean => {
+    return layer <= 1;
+  };
+
+  render(): ReactNode {
+    const { data, isWideLayout } = this.props;
+
+    return (
+      <TreeView
+        rootProps={rootProps}
+        data={data}
+        isWideLayout={isWideLayout}
+        shouldExpandNode={this.shouldExpandNode}
+      />
+    );
+  }
+}

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

@@ -1,6 +1,7 @@
 import React, { ReactNode } from 'react';
 import { StyleUtilsContext } from '../styles/createStylingFromTheme';
 import { QueryPreviewTabs, TabOption } from '../types';
+import { renderTabPanelButtonId } from '../utils/a11y';
 import { emptyArray } from '../utils/object';
 
 export interface QueryPreviewHeaderProps {
@@ -28,7 +29,11 @@ export class QueryPreviewHeader extends React.Component<QueryPreviewHeaderProps>
           <div {...styling('previewHeader')}>
             <div {...styling('tabSelector')}>
               {tabs.map((tab) => (
-                <div
+                <button
+                  type="button"
+                  id={renderTabPanelButtonId(tab.value)}
+                  aria-selected={tab.value === selectedTab}
+                  role={'tab'}
                   onClick={() => this.handleTabClick(tab)}
                   key={tab.value}
                   {...styling(
@@ -42,7 +47,7 @@ export class QueryPreviewHeader extends React.Component<QueryPreviewHeaderProps>
                   <span>
                     {renderTabLabel ? renderTabLabel(tab) : tab.label}
                   </span>
-                </div>
+                </button>
               ))}
             </div>
           </div>

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

@@ -1,11 +1,12 @@
 import { createSelector, Selector } from '@reduxjs/toolkit';
 import { QueryStatus } from '@reduxjs/toolkit/dist/query';
 import React, { ReactNode, PureComponent } from 'react';
-import { RtkResourceInfo, RTKStatusFlags } from '../types';
+import { QueryPreviewTabs, RtkResourceInfo, RTKStatusFlags } from '../types';
+import { renderTabPanelButtonId, renderTabPanelId } from '../utils/a11y';
 import { formatMs } from '../utils/formatters';
 import { identity } from '../utils/object';
 import { getQueryStatusFlags } from '../utils/rtk-query';
-import { TreeView } from './TreeView';
+import { TreeView, TreeViewProps } from './TreeView';
 
 type QueryTimings = {
   startedAt: string;
@@ -23,6 +24,12 @@ type FormattedQuery = {
   | { query: RtkResourceInfo['state'] }
 );
 
+const rootProps: TreeViewProps['rootProps'] = {
+  'aria-labelledby': renderTabPanelButtonId(QueryPreviewTabs.queryinfo),
+  id: renderTabPanelId(QueryPreviewTabs.queryinfo),
+  role: 'tabpanel',
+};
+
 export interface QueryPreviewInfoProps {
   resInfo: RtkResourceInfo;
   isWideLayout: boolean;
@@ -97,6 +104,7 @@ export class QueryPreviewInfo extends PureComponent<QueryPreviewInfoProps> {
 
     return (
       <TreeView
+        rootProps={rootProps}
         data={formattedQuery}
         isWideLayout={isWideLayout}
         shouldExpandNode={this.shouldExpandNode}

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

@@ -1,6 +1,15 @@
 import React, { ReactNode, PureComponent } from 'react';
-import { RtkQueryApiState } from '../types';
-import { TreeView } from './TreeView';
+import { QueryPreviewTabs, RtkQueryApiState } from '../types';
+import { renderTabPanelButtonId, renderTabPanelId } from '../utils/a11y';
+import { TreeView, TreeViewProps } from './TreeView';
+
+const rootProps: TreeViewProps['rootProps'] = {
+  'aria-labelledby': renderTabPanelButtonId(
+    QueryPreviewTabs.querySubscriptions
+  ),
+  id: renderTabPanelId(QueryPreviewTabs.querySubscriptions),
+  role: 'tabpanel',
+};
 
 export interface QueryPreviewSubscriptionsProps {
   subscriptions: RtkQueryApiState['subscriptions'][keyof RtkQueryApiState['subscriptions']];
@@ -12,7 +21,11 @@ export class QueryPreviewSubscriptions extends PureComponent<QueryPreviewSubscri
     const { subscriptions } = this.props;
 
     return (
-      <TreeView data={subscriptions} isWideLayout={this.props.isWideLayout} />
+      <TreeView
+        rootProps={rootProps}
+        data={subscriptions}
+        isWideLayout={this.props.isWideLayout}
+      />
     );
   }
 }

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

@@ -1,11 +1,18 @@
 import React, { ReactNode, PureComponent } from 'react';
-import { RtkQueryTag } from '../types';
-import { TreeView } from './TreeView';
+import { QueryPreviewTabs, RtkQueryTag } from '../types';
+import { renderTabPanelButtonId, renderTabPanelId } from '../utils/a11y';
+import { TreeView, TreeViewProps } from './TreeView';
 
 interface QueryPreviewTagsState {
   data: { tags: RtkQueryTag[] };
 }
 
+const rootProps: TreeViewProps['rootProps'] = {
+  'aria-labelledby': renderTabPanelButtonId(QueryPreviewTabs.queryTags),
+  id: renderTabPanelId(QueryPreviewTabs.queryTags),
+  role: 'tabpanel',
+};
+
 export interface QueryPreviewTagsProps {
   tags: RtkQueryTag[];
   isWideLayout: boolean;
@@ -26,6 +33,8 @@ export class QueryPreviewTags extends PureComponent<
   render(): ReactNode {
     const { isWideLayout, tags } = this.props;
 
-    return <TreeView data={tags} isWideLayout={isWideLayout} />;
+    return (
+      <TreeView rootProps={rootProps} data={tags} isWideLayout={isWideLayout} />
+    );
   }
 }

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

@@ -22,6 +22,9 @@ export interface TreeViewProps
   before?: ReactNode;
   after?: ReactNode;
   children?: ReactNode;
+  rootProps?: Partial<
+    Omit<React.HTMLAttributes<HTMLDivElement>, 'className' | 'style'>
+  >;
 }
 
 export class TreeView extends React.PureComponent<TreeViewProps> {
@@ -80,13 +83,14 @@ export class TreeView extends React.PureComponent<TreeViewProps> {
       keyPath,
       shouldExpandNode,
       hideRoot,
+      rootProps,
     } = this.props;
 
     return (
       <StyleUtilsContext.Consumer>
         {({ styling, invertTheme, base16Theme }) => {
           return (
-            <div {...styling('treeWrapper')}>
+            <div {...rootProps} {...styling('treeWrapper')}>
               {before}
               <JSONTree
                 keyPath={keyPath}