Page: Add support for tab counters (#78127)

packages/grafana-data/src/types/navModel.ts

@@ -34,6 +34,7 @@ export interface NavModelItem extends NavLinkDTO {
   parentItem?: NavModelItem;
   onClick?: () => void;
   tabSuffix?: ComponentType<{ className?: string }>;
+  tabCounter?: number;
   hideFromBreadcrumbs?: boolean;
   emptyMessage?: string;
 }

public/app/core/components/Page/PageTabs.test.tsx

@@ -0,0 +1,23 @@
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+
+import { NavModelItem } from '@grafana/data';
+
+import { PageTabs } from './PageTabs';
+
+describe('PageTabs', () => {
+  it('should render a tab with a counter', () => {
+    const navItem: NavModelItem = {
+      text: 'My page',
+      children: [
+        {
+          text: 'My tab',
+          tabCounter: 10,
+        },
+      ],
+    };
+
+    render(<PageTabs navItem={navItem} />);
+    expect(screen.getByText('10')).toBeInTheDocument();
+  });
+});

public/app/core/components/Page/PageTabs.tsx

@@ -23,6 +23,7 @@ export function PageTabs({ navItem }: Props) {
                 active={child.active}
                 key={`${child.url}-${index}`}
                 icon={icon}
+                counter={child.tabCounter}
                 href={child.url}
                 suffix={child.tabSuffix}
               />