diff --git a/public/app/features/dashboard-scene/scene/layout-rows/RowItemEditor.tsx b/public/app/features/dashboard-scene/scene/layout-rows/RowItemEditor.tsx index fd6ac94f5b4..540334845f1 100644 --- a/public/app/features/dashboard-scene/scene/layout-rows/RowItemEditor.tsx +++ b/public/app/features/dashboard-scene/scene/layout-rows/RowItemEditor.tsx @@ -1,4 +1,4 @@ -import { useId, useMemo } from 'react'; +import { useId, useMemo, useRef } from 'react'; import { selectors } from '@grafana/e2e-selectors'; import { Trans, t } from '@grafana/i18n'; @@ -10,6 +10,7 @@ import { SHARED_DASHBOARD_QUERY } from 'app/plugins/datasource/dashboard/constan import { MIXED_DATASOURCE_NAME } from 'app/plugins/datasource/mixed/MixedDataSource'; import { useConditionalRenderingEditor } from '../../conditional-rendering/ConditionalRenderingEditor'; +import { dashboardEditActions } from '../../edit-pane/shared'; import { getQueryRunnerFor, useDashboard } from '../../utils/utils'; import { useLayoutCategory } from '../layouts-shared/DashboardLayoutSelector'; import { useEditPaneInputAutoFocus } from '../layouts-shared/utils'; @@ -85,6 +86,7 @@ export function useEditOptions(model: RowItem, isNewElement: boolean): OptionsPa function RowTitleInput({ row, isNewElement }: { row: RowItem; isNewElement: boolean }) { const { title } = row.useState(); + const prevTitle = useRef(''); const ref = useEditPaneInputAutoFocus({ autoFocus: isNewElement }); const hasUniqueTitle = row.hasUniqueTitle(); @@ -102,6 +104,8 @@ function RowTitleInput({ row, isNewElement }: { row: RowItem; isNewElement: bool ref={ref} title={t('dashboard.rows-layout.row-options.title-option', 'Title')} value={title} + onFocus={() => (prevTitle.current = title || '')} + onBlur={() => editRowTitleAction(row, title || '', prevTitle.current || '')} onChange={(e) => row.onChangeTitle(e.currentTarget.value)} /> @@ -168,3 +172,16 @@ function RowRepeatSelect({ row, id }: { row: RowItem; id?: string }) { ); } + +function editRowTitleAction(row: RowItem, title: string, prevTitle: string) { + if (title === prevTitle) { + return; + } + + dashboardEditActions.edit({ + description: t('dashboard.edit-actions.row-title', 'Change row title'), + source: row, + perform: () => row.onChangeTitle(title), + undo: () => row.onChangeTitle(prevTitle), + }); +} diff --git a/public/locales/en-US/grafana.json b/public/locales/en-US/grafana.json index 0051df1d60e..f71b9cd5c16 100644 --- a/public/locales/en-US/grafana.json +++ b/public/locales/en-US/grafana.json @@ -4691,6 +4691,7 @@ "panel-title": "Change panel title", "paste-panel": "Paste panel", "remove": "Remove {{typeName}}", + "row-title": "Change row title", "switch-layout": "Switch layout" }, "edit-pane": {