ShareButton: Split copy link button and dropdown (#94020)

public/app/features/dashboard-scene/sharing/ShareButton/ShareButton.tsx

@@ -1,9 +1,11 @@
+import { css } from '@emotion/css';
 import { useCallback, useState } from 'react';
 import { useAsyncFn } from 'react-use';
 
+import { GrafanaTheme2 } from '@grafana/data';
 import { selectors as e2eSelectors } from '@grafana/e2e-selectors';
 import { VizPanel } from '@grafana/scenes';
-import { Button, ButtonGroup, Dropdown } from '@grafana/ui';
+import { Button, ButtonGroup, Dropdown, useStyles2 } from '@grafana/ui';
 import { t, Trans } from 'app/core/internationalization';
 
 import { DashboardScene } from '../../scene/DashboardScene';
@@ -15,6 +17,7 @@ import { buildShareUrl } from './utils';
 const newShareButtonSelector = e2eSelectors.pages.Dashboard.DashNav.newShareButton;
 
 export default function ShareButton({ dashboard, panel }: { dashboard: DashboardScene; panel?: VizPanel }) {
+  const styles = useStyles2(getStyles);
   const [isOpen, setIsOpen] = useState(false);
 
   const [_, buildUrl] = useAsyncFn(async () => {
@@ -23,17 +26,13 @@ export default function ShareButton({ dashboard, panel }: { dashboard: Dashboard
   }, [dashboard]);
 
   const onMenuClick = useCallback((isOpen: boolean) => {
-    if (isOpen) {
-      DashboardInteractions.toolbarShareDropdownClick();
-    }
-
     setIsOpen(isOpen);
   }, []);
 
   const MenuActions = () => <ShareMenu dashboard={dashboard} />;
 
   return (
-    <ButtonGroup data-testid={newShareButtonSelector.container}>
+    <ButtonGroup data-testid={newShareButtonSelector.container} className={styles.container}>
       <Button
         data-testid={newShareButtonSelector.shareLink}
         size="sm"
@@ -48,3 +47,11 @@ export default function ShareButton({ dashboard, panel }: { dashboard: Dashboard
     </ButtonGroup>
   );
 }
+
+function getStyles(theme: GrafanaTheme2) {
+  return {
+    container: css({
+      gap: 1,
+    }),
+  };
+}

public/app/features/dashboard-scene/utils/interactions.ts

@@ -28,9 +28,6 @@ export const DashboardInteractions = {
   toolbarShareClick: () => {
     reportDashboardInteraction('toolbar_actions_clicked', { item: 'share' });
   },
-  toolbarShareDropdownClick: () => {
-    reportDashboardInteraction('toolbar_actions_clicked', { item: 'share_dropdown' });
-  },
   toolbarAddClick: () => {
     reportDashboardInteraction('toolbar_actions_clicked', { item: 'add' });
   },