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
This commit is contained in:
Miguel Palau Zarza
2025-07-29 14:24:40 -06:00
parent 0cdecd3f94
commit 30ad257f6d
@@ -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>
);
}