Feature Highlights: add highlight to toolbar button and add upgrade modal (#44645)

* Feature Highlights: add highlight to toolbar button and add upgrade modal

* replace hideTitle attribute by making title optional

* update modal design

* remove unused updates

packages/grafana-ui/src/components/Button/ToolbarButton.tsx

@@ -29,6 +29,8 @@ export interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {
   variant?: ToolbarButtonVariant;
   /** Hide any children and only show icon */
   iconOnly?: boolean;
+  /** Show highlight dot */
+  isHighlighted?: boolean;
 }
 
 export type ToolbarButtonVariant = 'default' | 'primary' | 'destructive' | 'active';
@@ -48,6 +50,7 @@ export const ToolbarButton = forwardRef<HTMLButtonElement, Props>(
       variant = 'default',
       iconOnly,
       'aria-label': ariaLabel,
+      isHighlighted,
       ...rest
     },
     ref
@@ -84,6 +87,7 @@ export const ToolbarButton = forwardRef<HTMLButtonElement, Props>(
         {children && !iconOnly && <div className={contentStyles}>{children}</div>}
         {isOpen === false && <Icon name="angle-down" />}
         {isOpen === true && <Icon name="angle-up" />}
+        {isHighlighted && <div className={styles.highlight} />}
       </button>
     );
 
@@ -122,6 +126,7 @@ const getStyles = (theme: GrafanaTheme2) => {
   return {
     button: css`
       label: toolbar-button;
+      position: relative;
       display: flex;
       align-items: center;
       height: ${theme.spacing(theme.components.height.md)};
@@ -209,5 +214,15 @@ const getStyles = (theme: GrafanaTheme2) => {
     contentWithRightIcon: css`
       padding-right: ${theme.spacing(0.5)};
     `,
+    highlight: css`
+      background-color: ${theme.colors.success.main};
+      border-radius: 50%;
+      width: 6px;
+      height: 6px;
+      position: absolute;
+      top: -3px;
+      right: -3px;
+      z-index: 1;
+    `,
   };
 };

public/app/core/components/Upgrade/UpgradeModal.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { Modal } from '@grafana/ui';
+import { UpgradeBox } from './UpgradeBox';
+
+export interface Props {
+  title: string;
+  text: string;
+  isOpen?: boolean;
+  onDismiss?: () => void;
+}
+
+export const UpgradeModal = ({ title, text, isOpen, onDismiss }: Props) => {
+  return (
+    <Modal title={title} isOpen={isOpen} onDismiss={onDismiss}>
+      <UpgradeBox text={text} />
+    </Modal>
+  );
+};