diff --git a/public/app/features/dashboard-scene/edit-pane/DashboardEditableElement.tsx b/public/app/features/dashboard-scene/edit-pane/DashboardEditableElement.tsx index 7ccf14b4ff6..7d2c598c7ac 100644 --- a/public/app/features/dashboard-scene/edit-pane/DashboardEditableElement.tsx +++ b/public/app/features/dashboard-scene/edit-pane/DashboardEditableElement.tsx @@ -1,7 +1,7 @@ -import { useMemo } from 'react'; +import { ReactNode, useMemo } from 'react'; -import { Input, TextArea } from '@grafana/ui'; -import { t } from 'app/core/internationalization'; +import { Button, Icon, Input, Stack, TextArea } from '@grafana/ui'; +import { t, Trans } from 'app/core/internationalization'; import { OptionsPaneCategoryDescriptor } from 'app/features/dashboard/components/PanelEditor/OptionsPaneCategoryDescriptor'; import { OptionsPaneItemDescriptor } from 'app/features/dashboard/components/PanelEditor/OptionsPaneItemDescriptor'; @@ -60,6 +60,23 @@ export class DashboardEditableElement implements EditableDashboardElement { return [dashboardOptions]; } + + public renderActions(): ReactNode { + return ( + this.dashboard.onOpenSettings()} + tooltip={t('dashboard.toolbar.dashboard-settings.tooltip', 'Dashboard settings')} + > + + + Settings + + + + + ); + } } export function DashboardTitleInput({ dashboard }: { dashboard: DashboardScene }) { @@ -71,5 +88,5 @@ export function DashboardTitleInput({ dashboard }: { dashboard: DashboardScene } export function DashboardDescriptionInput({ dashboard }: { dashboard: DashboardScene }) { const { description } = dashboard.useState(); - return dashboard.setState({ title: e.currentTarget.value })} />; + return dashboard.setState({ description: e.currentTarget.value })} />; } diff --git a/public/app/features/dashboard-scene/edit-pane/EditPaneHeader.tsx b/public/app/features/dashboard-scene/edit-pane/EditPaneHeader.tsx index 5f9828c834b..d4a3071c2a5 100644 --- a/public/app/features/dashboard-scene/edit-pane/EditPaneHeader.tsx +++ b/public/app/features/dashboard-scene/edit-pane/EditPaneHeader.tsx @@ -22,6 +22,7 @@ export function EditPaneHeader({ element }: EditPaneHeaderProps) { {elementInfo.typeName} + {element.renderActions && element.renderActions()} {(onCopy || onDelete) && ( , }); - toolbarActions.push({ - group: 'settings', - condition: isEditing && dashboard.canEditDashboard() && isShowingDashboard, - render: () => ( - { - dashboard.onOpenSettings(); - }} - tooltip={t('dashboard.toolbar.dashboard-settings.tooltip', 'Dashboard settings')} - fill="text" - size="sm" - key="settings" - variant="secondary" - data-testid={selectors.components.NavToolbar.editDashboard.settingsButton} - > - Settings - - ), - }); + if (!dashboardNewLayouts) { + toolbarActions.push({ + group: 'settings', + condition: isEditing && dashboard.canEditDashboard() && isShowingDashboard, + render: () => ( + { + dashboard.onOpenSettings(); + }} + tooltip={t('dashboard.toolbar.dashboard-settings.tooltip', 'Dashboard settings')} + fill="text" + size="sm" + key="settings" + variant="secondary" + data-testid={selectors.components.NavToolbar.editDashboard.settingsButton} + > + Settings + + ), + }); + } toolbarActions.push({ group: 'main-buttons', diff --git a/public/app/features/dashboard-scene/scene/types/EditableDashboardElement.ts b/public/app/features/dashboard-scene/scene/types/EditableDashboardElement.ts index 9ae7b3969f3..6139b51e8a6 100644 --- a/public/app/features/dashboard-scene/scene/types/EditableDashboardElement.ts +++ b/public/app/features/dashboard-scene/scene/types/EditableDashboardElement.ts @@ -1,3 +1,5 @@ +import { ReactNode } from 'react'; + import { IconName } from '@grafana/data'; import { OptionsPaneCategoryDescriptor } from 'app/features/dashboard/components/PanelEditor/OptionsPaneCategoryDescriptor'; @@ -18,6 +20,11 @@ export interface EditableDashboardElement { */ useEditPaneOptions(): OptionsPaneCategoryDescriptor[]; + /** + * Panel Actions + **/ + renderActions?(): ReactNode; + /** * Supports delete action */ diff --git a/public/locales/en-US/grafana.json b/public/locales/en-US/grafana.json index 2deedc01267..a8bbffba1da 100644 --- a/public/locales/en-US/grafana.json +++ b/public/locales/en-US/grafana.json @@ -1007,6 +1007,9 @@ } }, "dashboard": { + "actions": { + "open-settings": "Settings" + }, "add-menu": { "import": "Import from library", "paste-panel": "Paste panel",