From 30ad257f6d7c812253848f0b61a714d8139f673f Mon Sep 17 00:00:00 2001
From: Miguel Palau Zarza <mpalauzarza@gmail.com>
Date: Tue, 29 Jul 2025 14:24:40 -0600
Subject: [PATCH] DataSource: Replace individual buttons with dropdown menu in
 EditDataSourceActions

- Convert LinkButton components to dropdown with Menu.Item components
- Add conditional rendering: show simple button when only one action, dropdown when multiple
- Use LinkButton for navigation and Button with dropdown icon for menu trigger
- Replace Trans components with t() function calls for Menu.Item labels
- Prevent PageHeader crowding when multiple plugin extensions are registered
- Maintain all existing functionality and tracking calls
---
 .../components/EditDataSourceActions.tsx      | 84 ++++++++++++-------
 1 file changed, 53 insertions(+), 31 deletions(-)

diff --git a/public/app/features/datasources/components/EditDataSourceActions.tsx b/public/app/features/datasources/components/EditDataSourceActions.tsx
index e8f3dd202a7..cb525f43f51 100644
--- a/public/app/features/datasources/components/EditDataSourceActions.tsx
+++ b/public/app/features/datasources/components/EditDataSourceActions.tsx
@@ -1,7 +1,7 @@
 import { PluginExtensionPoints } from '@grafana/data';
-import { Trans } from '@grafana/i18n';
+import { t, Trans } from '@grafana/i18n';
 import { config, usePluginLinks } from '@grafana/runtime';
-import { LinkButton } from '@grafana/ui';
+import { Button, Dropdown, LinkButton, Menu } from '@grafana/ui';
 import { contextSrv } from 'app/core/core';
 
 import { useDataSource } from '../state/hooks';
@@ -41,26 +41,12 @@ export function EditDataSourceActions({ uid }: Props) {
 
   const links = allLinks.filter((link) => allowedPluginIds.includes(link.pluginId));
 
-  return (
-    <>
-      {hasExploreRights && (
-        <LinkButton
-          variant="secondary"
-          size="sm"
-          href={constructDataSourceExploreUrl(dataSource)}
-          onClick={() => {
-            trackDsConfigClicked('explore');
-            trackExploreClicked({
-              grafana_version: config.buildInfo.version,
-              datasource_uid: dataSource.uid,
-              plugin_name: dataSource.typeName,
-              path: window.location.pathname,
-            });
-          }}
-        >
-          <Trans i18nKey="datasources.edit-data-source-actions.explore-data">Explore data</Trans>
-        </LinkButton>
-      )}
+  // Only render dropdown if there are multiple actions to show
+  const hasActions = hasExploreRights || (!isLoading && links.length > 0);
+
+  if (!hasActions) {
+    // Always show at least the "Build a dashboard" action
+    return (
       <LinkButton
         size="sm"
         variant="secondary"
@@ -77,21 +63,57 @@ export function EditDataSourceActions({ uid }: Props) {
       >
         <Trans i18nKey="datasources.edit-data-source-actions.build-a-dashboard">Build a dashboard</Trans>
       </LinkButton>
+    );
+  }
 
+  const actionsMenu = (
+    <Menu>
+      {hasExploreRights && (
+        <Menu.Item
+          label={t('datasources.edit-data-source-actions.explore-data', 'Explore data')}
+          url={constructDataSourceExploreUrl(dataSource)}
+          onClick={() => {
+            trackDsConfigClicked('explore');
+            trackExploreClicked({
+              grafana_version: config.buildInfo.version,
+              datasource_uid: dataSource.uid,
+              plugin_name: dataSource.typeName,
+              path: window.location.pathname,
+            });
+          }}
+        />
+      )}
+      <Menu.Item
+        label={t('datasources.edit-data-source-actions.build-a-dashboard', 'Build a dashboard')}
+        url={`dashboard/new-with-ds/${dataSource.uid}`}
+        onClick={() => {
+          trackDsConfigClicked('build_a_dashboard');
+          trackCreateDashboardClicked({
+            grafana_version: config.buildInfo.version,
+            datasource_uid: dataSource.uid,
+            plugin_name: dataSource.typeName,
+            path: window.location.pathname,
+          });
+        }}
+      />
       {!isLoading &&
         links.map((link) => (
-          <LinkButton
+          <Menu.Item
             key={link.id}
-            size="sm"
-            variant="secondary"
-            href={link.path}
+            label={link.title}
+            url={link.path}
             onClick={link.onClick}
             icon={link.icon}
-            tooltip={link.description}
-          >
-            {link.title}
-          </LinkButton>
+          />
         ))}
-    </>
+    </Menu>
+  );
+
+  return (
+    <Dropdown overlay={actionsMenu}>
+      <Button variant="secondary" size="sm" icon="angle-down">
+        <Trans i18nKey="datasources.edit-data-source-actions.actions">Actions</Trans>
+      </Button>
+    </Dropdown>
   );
 }