From 5eaaadd59de852832edcf61030592dd72348fc58 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Agn=C3=A8s=20Toulet?=
 <35176601+AgnesToulet@users.noreply.github.com>
Date: Wed, 12 Jan 2022 15:37:16 +0100
Subject: [PATCH] Tabs: add suffix prop for the tab name (#43869)

* Tabs: add suffix prop for the tab name

* Replace FC with JSX.Element
---
 packages/grafana-runtime/src/config.ts                       | 3 +++
 packages/grafana-ui/src/components/Modal/ModalTabsHeader.tsx | 2 ++
 packages/grafana-ui/src/components/Tabs/Tab.tsx              | 4 +++-
 public/app/features/dashboard/components/ShareModal/types.ts | 1 +
 4 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/packages/grafana-runtime/src/config.ts b/packages/grafana-runtime/src/config.ts
index 4d2585cbb03..da3989ad381 100644
--- a/packages/grafana-runtime/src/config.ts
+++ b/packages/grafana-runtime/src/config.ts
@@ -95,6 +95,9 @@ export class GrafanaBootConfig implements GrafanaConfig {
   recordedQueries = {
     enabled: false,
   };
+  featureHighlights = {
+    enabled: false,
+  };
 
   constructor(options: GrafanaBootConfig) {
     const mode = options.bootData.user.lightTheme ? 'light' : 'dark';
diff --git a/packages/grafana-ui/src/components/Modal/ModalTabsHeader.tsx b/packages/grafana-ui/src/components/Modal/ModalTabsHeader.tsx
index 9f606da3ef4..c34a7696576 100644
--- a/packages/grafana-ui/src/components/Modal/ModalTabsHeader.tsx
+++ b/packages/grafana-ui/src/components/Modal/ModalTabsHeader.tsx
@@ -8,6 +8,7 @@ interface ModalTab {
   value: string;
   label: string;
   icon?: IconName;
+  labelSuffix?: () => JSX.Element;
 }
 
 interface Props {
@@ -28,6 +29,7 @@ export const ModalTabsHeader: React.FC<Props> = ({ icon, title, tabs, activeTab,
               key={`${t.value}-${index}`}
               label={t.label}
               icon={t.icon}
+              suffix={t.labelSuffix}
               active={t.value === activeTab}
               onChangeTab={() => onChangeTab(t)}
             />
diff --git a/packages/grafana-ui/src/components/Tabs/Tab.tsx b/packages/grafana-ui/src/components/Tabs/Tab.tsx
index 1bdeed1a797..f5839ee1e94 100644
--- a/packages/grafana-ui/src/components/Tabs/Tab.tsx
+++ b/packages/grafana-ui/src/components/Tabs/Tab.tsx
@@ -18,10 +18,11 @@ export interface TabProps extends HTMLProps<HTMLAnchorElement> {
   onChangeTab?: (event?: React.MouseEvent<HTMLAnchorElement>) => void;
   /** A number rendered next to the text. Usually used to display the number of items in a tab's view. */
   counter?: number | null;
+  suffix?: () => JSX.Element;
 }
 
 export const Tab = React.forwardRef<HTMLAnchorElement, TabProps>(
-  ({ label, active, icon, onChangeTab, counter, className, href, ...otherProps }, ref) => {
+  ({ label, active, icon, onChangeTab, counter, suffix, className, href, ...otherProps }, ref) => {
     const theme = useTheme2();
     const tabsStyles = getTabStyles(theme);
     const content = () => (
@@ -29,6 +30,7 @@ export const Tab = React.forwardRef<HTMLAnchorElement, TabProps>(
         {icon && <Icon name={icon} />}
         {label}
         {typeof counter === 'number' && <Counter value={counter} />}
+        {suffix && suffix()}
       </>
     );
 
diff --git a/public/app/features/dashboard/components/ShareModal/types.ts b/public/app/features/dashboard/components/ShareModal/types.ts
index af637f2f9f4..8b7f47a12cf 100644
--- a/public/app/features/dashboard/components/ShareModal/types.ts
+++ b/public/app/features/dashboard/components/ShareModal/types.ts
@@ -10,5 +10,6 @@ export interface ShareModalTabProps {
 export interface ShareModalTabModel {
   label: string;
   value: string;
+  labelSuffix?: () => JSX.Element;
   component: React.ComponentType<ShareModalTabProps>;
 }