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

@@ -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';

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)}
             />

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()}
       </>
     );
 

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>;
 }