48 lines
1.6 KiB
TypeScript
48 lines
1.6 KiB
TypeScript
import { lazy, Suspense } from 'react';
|
|
|
|
import { Dropdown, ToolbarButton } from '@grafana/ui';
|
|
import { contextSrv } from 'app/core/services/context_srv';
|
|
import { AccessControlAction } from 'app/types/accessControl';
|
|
|
|
import { Trans } from '../../../../core/internationalization';
|
|
import { ToolbarExtensionPointMenu } from '../ToolbarExtensionPointMenu';
|
|
|
|
import { ExtensionDropdownProps } from './types';
|
|
|
|
const AddToDashboard = lazy(() =>
|
|
import('./../AddToDashboard').then(({ AddToDashboard }) => ({ default: AddToDashboard }))
|
|
);
|
|
|
|
export function BasicExtensions(props: ExtensionDropdownProps) {
|
|
const { exploreId, links, setSelectedExtension, setIsModalOpen, isModalOpen, noQueriesInPane } = props;
|
|
// If we only have the explore core extension point registered we show the old way of
|
|
// adding a query to a dashboard.
|
|
if (links.length <= 1) {
|
|
const canAddPanelToDashboard =
|
|
contextSrv.hasPermission(AccessControlAction.DashboardsCreate) ||
|
|
contextSrv.hasPermission(AccessControlAction.DashboardsWrite);
|
|
|
|
if (!canAddPanelToDashboard) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<Suspense fallback={null}>
|
|
<AddToDashboard exploreId={exploreId} />
|
|
</Suspense>
|
|
);
|
|
}
|
|
|
|
const menu = <ToolbarExtensionPointMenu extensions={links} onSelect={setSelectedExtension} />;
|
|
|
|
return (
|
|
<>
|
|
<Dropdown onVisibleChange={setIsModalOpen} placement="bottom-start" overlay={menu}>
|
|
<ToolbarButton aria-label="Add" disabled={!Boolean(noQueriesInPane)} variant="canvas" isOpen={isModalOpen}>
|
|
<Trans i18nKey="explore.toolbar.add-to-extensions">Add</Trans>
|
|
</ToolbarButton>
|
|
</Dropdown>
|
|
</>
|
|
);
|
|
}
|