feat(rtk-query): do not display tree node preview

Other changes:

* improve visibility of demo devTools on small devices

* tweak QueryPreviewInfo labels

packages/redux-devtools-rtk-query-monitor/demo/src/DevTools.tsx

@@ -7,11 +7,11 @@ const largeScreenQuery = window.matchMedia('(min-width: 1024px)');
 
 export default createDevTools(
   <DockMonitor
-    fluid
     toggleVisibilityKey="ctrl-h"
     changePositionKey="ctrl-q"
     changeMonitorKey="ctrl-m"
-    defaultSize={largeScreenQuery.matches ? 0.34 : 0.55}
+    fluid
+    defaultSize={largeScreenQuery.matches ? 0.44 : 0.55}
   >
     <RtkQueryMonitor />
   </DockMonitor>

packages/redux-devtools-rtk-query-monitor/demo/src/features/posts/PostsManager.tsx

@@ -52,10 +52,10 @@ const AddPost = () => {
   };
 
   return (
-    <Flex p={5}>
-      <Box flex={10}>
-        <FormControl isInvalid={Boolean(post.name.length < 3 && post.name)}>
-          <FormLabel htmlFor="name">Post name</FormLabel>
+    <Flex p={'5px 0'} flexDirection="row" flexWrap="wrap" maxWidth={'85%'}>
+      <Box flex={'5 0 auto'} padding="0 5px 0 0">
+        <FormControl flexDirection="column" isInvalid={Boolean(post.name.length < 3 && post.name)}>
+          <FormLabel  htmlFor="name">Post name</FormLabel>
           <Input
             id="name"
             name="name"
@@ -65,7 +65,6 @@ const AddPost = () => {
           />
         </FormControl>
       </Box>
-      <Spacer />
       <Box>
         <Button
           mt={8}

packages/redux-devtools-rtk-query-monitor/demo/src/index.css

@@ -35,7 +35,7 @@ h6 {
 
 section {
   display: block;
-  max-width: 67vw;
+  max-width: 65%;
 }
 
 .pokemon-list {

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

@@ -9,7 +9,7 @@ import { TreeView } from './TreeView';
 
 type QueryTimings = {
   startedAt: string;
-  latestFetchAt: string;
+  loadedAt: string;
   duration: string;
 };
 
@@ -45,7 +45,7 @@ export class QueryPreviewInfo extends PureComponent<QueryPreviewInfoProps> {
         ? new Date(query.startedTimeStamp).toISOString()
         : '-';
 
-      const latestFetchAt = query.fulfilledTimeStamp
+      const loadedAt = query.fulfilledTimeStamp
         ? new Date(query.fulfilledTimeStamp).toISOString()
         : '-';
 
@@ -53,7 +53,7 @@ export class QueryPreviewInfo extends PureComponent<QueryPreviewInfoProps> {
 
       const timings = {
         startedAt,
-        latestFetchAt,
+        loadedAt,
         duration: '-',
       };
 

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

@@ -42,13 +42,14 @@ export class TreeView extends React.PureComponent<TreeViewProps> {
     ReturnType<typeof createTreeItemLabelRenderer>
   >(identity, createTreeItemLabelRenderer);
 
-  readonly selectGetItemString = createSelector(
-    [
-      (styling: StylingFunction, _: boolean) => styling,
-      (_: StylingFunction, isWideLayout: boolean) => isWideLayout,
-    ],
-    (styling, isWideLayout) => (type: string, data: any) =>
-      getItemString(styling, type, data, DATA_TYPE_KEY, isWideLayout)
+  readonly selectGetItemString = createSelector<
+    StylingFunction,
+    StylingFunction,
+    (type: string, data: unknown) => ReactNode
+  >(
+    identity,
+    (styling) => (type, data) =>
+      getItemString(styling, type, data, DATA_TYPE_KEY, false)
   );
 
   readonly selectTheme = createSelector<
@@ -63,7 +64,6 @@ export class TreeView extends React.PureComponent<TreeViewProps> {
 
   render(): ReactNode {
     const {
-      isWideLayout,
       data,
       before,
       after,
@@ -86,7 +86,7 @@ export class TreeView extends React.PureComponent<TreeViewProps> {
                 labelRenderer={this.selectLabelRenderer(styling)}
                 theme={this.selectTheme(base16Theme)}
                 invertTheme={invertTheme}
-                getItemString={this.selectGetItemString(styling, isWideLayout)}
+                getItemString={this.selectGetItemString(styling)}
                 hideRoot={hideRoot}
               />
               {after}

packages/redux-devtools-rtk-query-monitor/src/containers/RtkQueryInspector.tsx

@@ -77,7 +77,7 @@ class RtkQueryInspector<S, A extends Action<unknown>> extends PureComponent<
   updateSizeMode = (): void => {
     if (this.inspectorRef.current) {
       const isWideLayout =
-        this.inspectorRef.current.offsetWidth > RtkQueryInspector.wideLayout;
+        this.inspectorRef.current.offsetWidth >= RtkQueryInspector.wideLayout;
 
       if (isWideLayout !== this.state.isWideLayout) {
         this.setState({ isWideLayout });

packages/redux-devtools-rtk-query-monitor/src/styles/tree.tsx

@@ -40,12 +40,12 @@ function getShortTypeString(val: unknown, diff: boolean | undefined) {
 function getText(
   type: string,
   data: any,
-  isWideLayout: boolean,
+  previewContent: boolean,
   isDiff: boolean | undefined
 ) {
   if (type === 'Object') {
     const keys = Object.keys(data);
-    if (!isWideLayout) return keys.length ? '{…}' : '{}';
+    if (!previewContent) return keys.length ? '{…}' : '{}';
 
     const str = keys
       .slice(0, 3)
@@ -57,7 +57,7 @@ function getText(
 
     return `{ ${str} }`;
   } else if (type === 'Array') {
-    if (!isWideLayout) return data.length ? '[…]' : '[]';
+    if (!previewContent) return data.length ? '[…]' : '[]';
 
     const str = data
       .slice(0, 4)
@@ -76,7 +76,7 @@ export function getItemString(
   type: string,
   data: any,
   dataTypeKey: string | symbol | undefined,
-  isWideLayout: boolean,
+  previewContent: boolean,
   isDiff?: boolean
 ): ReactNode {
   return (
@@ -85,7 +85,7 @@ export function getItemString(
       {dataTypeKey && data[dataTypeKey]
         ? `${data[dataTypeKey] as string} `
         : ''}
-      {getText(type, data, isWideLayout, isDiff)}
+      {getText(type, data, previewContent, isDiff)}
     </span>
   );
 }