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:
@@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user