From 6323df41515d5c7a0bf1e96ee0adbb3b8d0e527e Mon Sep 17 00:00:00 2001
From: FaberVitale <faber.vitale@gmail.com>
Date: Fri, 8 Apr 2022 18:58:09 +0200
Subject: [PATCH] feat(rtk-query): add Data tab #1126

---
 .../src/components/QueryPreviewData.tsx       | 31 +++++++++++++++++++
 .../src/containers/QueryPreview.tsx           | 22 +++++++++++++
 .../src/selectors.ts                          |  1 +
 .../src/types.ts                              |  1 +
 4 files changed, 55 insertions(+)
 create mode 100644 packages/redux-devtools-rtk-query-monitor/src/components/QueryPreviewData.tsx

diff --git a/packages/redux-devtools-rtk-query-monitor/src/components/QueryPreviewData.tsx b/packages/redux-devtools-rtk-query-monitor/src/components/QueryPreviewData.tsx
new file mode 100644
index 00000000..33dfd0ab
--- /dev/null
+++ b/packages/redux-devtools-rtk-query-monitor/src/components/QueryPreviewData.tsx
@@ -0,0 +1,31 @@
+import React, { ReactNode, PureComponent } from 'react';
+import { RtkResourceInfo } from '../types';
+import { TreeView } from './TreeView';
+
+export interface QueryPreviewDataProps {
+  data: RtkResourceInfo['state']['data'];
+  isWideLayout: boolean;
+}
+export class QueryPreviewData extends PureComponent<QueryPreviewDataProps> {
+  shouldExpandNode = (
+    keyPath: (string | number)[],
+    value: unknown,
+    layer: number
+  ): boolean => {
+    const lastKey = keyPath[keyPath.length - 1];
+
+    return layer <= 1 && lastKey !== 'query' && lastKey !== 'mutation';
+  };
+
+  render(): ReactNode {
+    const { data, isWideLayout } = this.props;
+
+    return (
+      <TreeView
+        data={data}
+        isWideLayout={isWideLayout}
+        shouldExpandNode={this.shouldExpandNode}
+      />
+    );
+  }
+}
diff --git a/packages/redux-devtools-rtk-query-monitor/src/containers/QueryPreview.tsx b/packages/redux-devtools-rtk-query-monitor/src/containers/QueryPreview.tsx
index 67f47703..2362e825 100644
--- a/packages/redux-devtools-rtk-query-monitor/src/containers/QueryPreview.tsx
+++ b/packages/redux-devtools-rtk-query-monitor/src/containers/QueryPreview.tsx
@@ -33,6 +33,10 @@ import {
   QueryPreviewActionsProps,
 } from '../components/QueryPreviewActions';
 import { isTabVisible } from '../utils/tabs';
+import {
+  QueryPreviewData,
+  QueryPreviewDataProps,
+} from '../components/QueryPreviewData';
 
 export interface QueryPreviewProps<S = unknown> {
   readonly selectedTab: QueryPreviewTabs;
@@ -66,6 +70,14 @@ const MappedQueryPreviewInfo = mapProps<
   QueryPreviewInfoProps
 >(({ resInfo, isWideLayout }) => ({ resInfo, isWideLayout }))(QueryPreviewInfo);
 
+const MappedQueryPreviewData = mapProps<
+  QueryPreviewTabProps,
+  QueryPreviewDataProps
+>(({ resInfo, isWideLayout }) => ({
+  data: resInfo?.state?.data,
+  isWideLayout,
+}))(QueryPreviewData);
+
 const MappedQuerySubscriptipns = mapProps<
   QueryPreviewTabProps,
   QueryPreviewSubscriptionsProps
@@ -93,6 +105,16 @@ const MappedQueryPreviewActions = mapProps<
 const tabs: ReadonlyArray<
   TabOption<QueryPreviewTabs, QueryPreviewTabProps, RtkResourceInfo['type']>
 > = [
+  {
+    label: 'Data',
+    value: QueryPreviewTabs.data,
+    component: MappedQueryPreviewData,
+    visible: {
+      query: true,
+      mutation: true,
+      default: true,
+    },
+  },
   {
     label: 'Query',
     value: QueryPreviewTabs.queryinfo,
diff --git a/packages/redux-devtools-rtk-query-monitor/src/selectors.ts b/packages/redux-devtools-rtk-query-monitor/src/selectors.ts
index 5a964aba..305542ca 100644
--- a/packages/redux-devtools-rtk-query-monitor/src/selectors.ts
+++ b/packages/redux-devtools-rtk-query-monitor/src/selectors.ts
@@ -258,6 +258,7 @@ export function createInspectorSelectors<S>(): InspectorSelectors<S> {
     ],
     (subscriptions, actions, tags) => {
       return {
+        [QueryPreviewTabs.data]: 0,
         [QueryPreviewTabs.queryTags]: tags.length,
         [QueryPreviewTabs.querySubscriptions]: Object.keys(subscriptions ?? {})
           .length,
diff --git a/packages/redux-devtools-rtk-query-monitor/src/types.ts b/packages/redux-devtools-rtk-query-monitor/src/types.ts
index e81fbb9c..aeb35bb5 100644
--- a/packages/redux-devtools-rtk-query-monitor/src/types.ts
+++ b/packages/redux-devtools-rtk-query-monitor/src/types.ts
@@ -8,6 +8,7 @@ import type { QueryComparators } from './utils/comparators';
 import type { QueryFilters } from './utils/filters';
 
 export enum QueryPreviewTabs {
+  data,
   queryinfo,
   apiConfig,
   querySubscriptions,