From 0e5ce50b90fdcdd4e4c5e51b595f8a3972f28478 Mon Sep 17 00:00:00 2001
From: Gilles De Mey <gilles.de.mey@gmail.com>
Date: Thu, 16 Nov 2023 14:31:14 +0100
Subject: [PATCH] Page: Add support for tab counters (#78127)

---
 packages/grafana-data/src/types/navModel.ts   |  1 +
 .../core/components/Page/PageTabs.test.tsx    | 23 +++++++++++++++++++
 public/app/core/components/Page/PageTabs.tsx  |  1 +
 3 files changed, 25 insertions(+)
 create mode 100644 public/app/core/components/Page/PageTabs.test.tsx

diff --git a/packages/grafana-data/src/types/navModel.ts b/packages/grafana-data/src/types/navModel.ts
index c20ea94656c..0f6acfe430a 100644
--- a/packages/grafana-data/src/types/navModel.ts
+++ b/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;
 }
diff --git a/public/app/core/components/Page/PageTabs.test.tsx b/public/app/core/components/Page/PageTabs.test.tsx
new file mode 100644
index 00000000000..8ef76d655b2
--- /dev/null
+++ b/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();
+  });
+});
diff --git a/public/app/core/components/Page/PageTabs.tsx b/public/app/core/components/Page/PageTabs.tsx
index ba55375e8df..d10e289e524 100644
--- a/public/app/core/components/Page/PageTabs.tsx
+++ b/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}
               />