feat(rtk-query): add counters on tags & subs tab buttons

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

@@ -50,6 +50,36 @@ export class QueryPreview extends React.PureComponent<QueryPreviewProps> {
     this.labelRenderer = createTreeItemLabelRenderer(this.props.styling);
   }
 
+  renderLabelWithCounter = (label: React.ReactText, counter: number): string => {
+    let counterAsString = counter.toFixed(0);
+
+    if(counterAsString.length > 3) {
+      counterAsString = counterAsString.slice(0, 2) + '...';
+    }
+
+    return `${label} (${counterAsString})`
+  }
+
+  renderTabLabel = (tab: QueryPreviewTabOption): ReactNode => {
+    const { queryInfo, tags, querySubscriptions } = this.props;
+    if(queryInfo) {
+      if(tab.value === QueryPreviewTabs.queryTags && tags.length > 0) {
+        return this.renderLabelWithCounter(tab.label, tags.length);
+      }
+
+      if(tab.value === QueryPreviewTabs.querySubscriptions && querySubscriptions) {
+        const subsCount = Object.keys(querySubscriptions).length;
+
+        if(subsCount > 0) {
+          return this.renderLabelWithCounter(tab.label, subsCount);
+        }
+      }
+    }
+
+    return tab.label;
+
+  }
+
   render(): ReactNode {
     const {
       queryInfo,
@@ -73,6 +103,7 @@ export class QueryPreview extends React.PureComponent<QueryPreviewProps> {
                 selectedTab={selectedTab}
                 onTabChange={onTabChange}
                 tabs={tabs}
+                renderTabLabel={this.renderTabLabel}
               />
             </div>
           )}
@@ -89,6 +120,7 @@ export class QueryPreview extends React.PureComponent<QueryPreviewProps> {
                 selectedTab={selectedTab}
                 onTabChange={onTabChange}
                 tabs={tabs}
+                renderTabLabel={this.renderTabLabel}
               />
               <TabComponent
                 styling={styling}

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

@@ -7,6 +7,7 @@ export interface QueryPreviewHeaderProps {
   tabs: ReadonlyArray<QueryPreviewTabOption>;
   onTabChange: (tab: QueryPreviewTabs) => void;
   selectedTab: QueryPreviewTabs;
+  renderTabLabel?: (tab: QueryPreviewTabOption) => ReactNode;
 }
 
 export class QueryPreviewHeader extends React.Component<QueryPreviewHeaderProps> {
@@ -17,7 +18,7 @@ export class QueryPreviewHeader extends React.Component<QueryPreviewHeaderProps>
   };
 
   render(): ReactNode {
-    const { tabs, selectedTab } = this.props;
+    const { tabs, selectedTab, renderTabLabel } = this.props;
 
     return (
       <StyleUtilsContext.Consumer>
@@ -36,7 +37,7 @@ export class QueryPreviewHeader extends React.Component<QueryPreviewHeaderProps>
                     tab.value === selectedTab
                   )}
                 >
-                  {tab.label}
+                  {renderTabLabel ? renderTabLabel(tab) : tab.label}
                 </div>
               ))}
             </div>

packages/redux-devtools-rtk-query-inspector-monitor/src/utils/isIterable.ts

@@ -1,8 +1,8 @@
-export default function isIterable(obj: any) {
+export default function isIterable(obj: unknown): boolean {
   return (
     obj !== null &&
     typeof obj === 'object' &&
     !Array.isArray(obj) &&
-    typeof obj[window.Symbol.iterator] === 'function'
+    typeof (obj as any)[window.Symbol.iterator] === 'function'
   );
 }