diff --git a/packages/redux-devtools-rtk-query-inspector-monitor/src/components/QueryPreview.tsx b/packages/redux-devtools-rtk-query-inspector-monitor/src/components/QueryPreview.tsx index 67e0ad7e..2102ce71 100644 --- a/packages/redux-devtools-rtk-query-inspector-monitor/src/components/QueryPreview.tsx +++ b/packages/redux-devtools-rtk-query-inspector-monitor/src/components/QueryPreview.tsx @@ -50,6 +50,36 @@ export class QueryPreview extends React.PureComponent { 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 { selectedTab={selectedTab} onTabChange={onTabChange} tabs={tabs} + renderTabLabel={this.renderTabLabel} /> )} @@ -89,6 +120,7 @@ export class QueryPreview extends React.PureComponent { selectedTab={selectedTab} onTabChange={onTabChange} tabs={tabs} + renderTabLabel={this.renderTabLabel} /> ; onTabChange: (tab: QueryPreviewTabs) => void; selectedTab: QueryPreviewTabs; + renderTabLabel?: (tab: QueryPreviewTabOption) => ReactNode; } export class QueryPreviewHeader extends React.Component { @@ -17,7 +18,7 @@ export class QueryPreviewHeader extends React.Component }; render(): ReactNode { - const { tabs, selectedTab } = this.props; + const { tabs, selectedTab, renderTabLabel } = this.props; return ( @@ -36,7 +37,7 @@ export class QueryPreviewHeader extends React.Component tab.value === selectedTab )} > - {tab.label} + {renderTabLabel ? renderTabLabel(tab) : tab.label} ))} diff --git a/packages/redux-devtools-rtk-query-inspector-monitor/src/utils/isIterable.ts b/packages/redux-devtools-rtk-query-inspector-monitor/src/utils/isIterable.ts index a7226ad0..feffafb8 100644 --- a/packages/redux-devtools-rtk-query-inspector-monitor/src/utils/isIterable.ts +++ b/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' ); }