From b8600a43db49c2b7d959ddee69625f9dbc3c054a Mon Sep 17 00:00:00 2001 From: Paul Marbach Date: Thu, 4 Dec 2025 16:08:25 -0500 Subject: [PATCH] fix from rebase --- .../PanelDataPane/PanelDataPane.tsx | 28 ++++++++++--------- .../PanelDataPane/PanelDataSidebar.tsx | 20 +++++++------ .../PanelDataPane/QueryTransformList.tsx | 1 + 3 files changed, 28 insertions(+), 21 deletions(-) diff --git a/public/app/features/dashboard-scene/panel-edit/PanelDataPane/PanelDataPane.tsx b/public/app/features/dashboard-scene/panel-edit/PanelDataPane/PanelDataPane.tsx index 59f4b29a661..2a46362f0e0 100644 --- a/public/app/features/dashboard-scene/panel-edit/PanelDataPane/PanelDataPane.tsx +++ b/public/app/features/dashboard-scene/panel-edit/PanelDataPane/PanelDataPane.tsx @@ -92,7 +92,7 @@ export class PanelDataPane extends SceneObjectBase { public setQueryLibraryMode = (mode: QueryLibraryMode & { index: number | null }) => { this.setState({ queryLibraryMode: mode }); - } + }; public getUrlState() { return { tab: this.state.tab }; @@ -112,7 +112,6 @@ export class PanelDataPane extends SceneObjectBase { } } - function PanelDataPaneRendered({ model }: SceneComponentProps) { const { tabs, selectedQueryTransform, panelRef, transformPickerIndex, queryLibraryMode } = model.useState(); const styles = useStyles2(getStyles); @@ -139,11 +138,14 @@ function PanelDataPaneRendered({ model }: SceneComponentProps) { // Auto-select first item if nothing is selected const selectedId = useMemo(() => { + if (transformPickerIndex != null) { + return null; + } if (selectedQueryTransform === null && allItems.length > 0) { return allItems[0].id; } return selectedQueryTransform; - }, [selectedQueryTransform, allItems]); + }, [transformPickerIndex, selectedQueryTransform, allItems]); const selectedItem = useMemo(() => allItems.find((item) => item.id === selectedId), [allItems, selectedId]); @@ -198,10 +200,13 @@ function PanelDataPaneRendered({ model }: SceneComponentProps) { ); // Handler for saving a query to the query library (stub) - const handleQueryLibrarySave = useCallback((_name: string, _description: string) => { - // Stub: In real implementation, this would save to the query library - model.setQueryLibraryMode({ active: false, mode: 'browse', index: null }); - }, [model]); + const handleQueryLibrarySave = useCallback( + (_name: string, _description: string) => { + // Stub: In real implementation, this would save to the query library + model.setQueryLibraryMode({ active: false, mode: 'browse', index: null }); + }, + [model] + ); // Handler to close the query library view const handleQueryLibraryClose = useCallback(() => { @@ -210,13 +215,10 @@ function PanelDataPaneRendered({ model }: SceneComponentProps) { // Handler to open query library in a specific mode const handleOpenQueryLibrary = useCallback( - (mode: QueryLibraryMode["mode"], index?: number) => { + (mode: QueryLibraryMode['mode'], index?: number) => { let currentQuery: SceneDataQuery | undefined; - if ( - mode === 'save' && - (selectedItem?.type === 'query' || selectedItem?.type === 'expression') - ) { + if (mode === 'save' && (selectedItem?.type === 'query' || selectedItem?.type === 'expression')) { currentQuery = selectedItem.data; } @@ -321,7 +323,7 @@ function PanelDataPaneRendered({ model }: SceneComponentProps) { onQueryLibrarySave={handleQueryLibrarySave} onQueryLibraryClose={handleQueryLibraryClose} onOpenQueryLibrary={handleOpenQueryLibrary} - /> + /> ); diff --git a/public/app/features/dashboard-scene/panel-edit/PanelDataPane/PanelDataSidebar.tsx b/public/app/features/dashboard-scene/panel-edit/PanelDataPane/PanelDataSidebar.tsx index 5ca48d47623..abfd5274d2b 100644 --- a/public/app/features/dashboard-scene/panel-edit/PanelDataPane/PanelDataSidebar.tsx +++ b/public/app/features/dashboard-scene/panel-edit/PanelDataPane/PanelDataSidebar.tsx @@ -76,11 +76,14 @@ export function PanelDataSidebarRendered({ model }: SceneComponentProps { + if (transformPickerIndex != null) { + return null; + } if (selectedQueryTransform === null && allItems.length > 0) { return allItems[0].id; } return selectedQueryTransform; - }, [selectedQueryTransform, allItems]); + }, [transformPickerIndex, selectedQueryTransform, allItems]); const selectedItem = useMemo(() => allItems.find((item) => item.id === selectedId), [allItems, selectedId]); const updateQuerySelectionOnStateChange = useCallback( @@ -176,13 +179,10 @@ export function PanelDataSidebarRendered({ model }: SceneComponentProps { + (mode: QueryLibraryMode['mode'], index?: number) => { let currentQuery: SceneDataQuery | undefined; - if ( - mode === 'save' && - (selectedItem?.type === 'query' || selectedItem?.type === 'expression') - ) { + if (mode === 'save' && (selectedItem?.type === 'query' || selectedItem?.type === 'expression')) { currentQuery = selectedItem.data; } @@ -305,7 +305,8 @@ export function PanelDataSidebarRendered({ model }: SceneComponentProps model.onCollapseSidebar(true)} onSelect={(id) => { - model.onChangeSelected(id) + model.onChangeSelected(id); + model.onTransformPicker(null); }} onAddQuery={handleAddQuery} onAddFromSavedQueries={(index) => handleOpenQueryLibrary('browse', index)} @@ -346,7 +347,10 @@ export function PanelDataSidebarRendered({ model }: SceneComponentProps model.onCollapseSidebar(true)} - onSelect={(newSelectedId) => model.onChangeSelected(newSelectedId)} + onSelect={(newSelectedId) => { + model.onChangeSelected(newSelectedId); + model.onTransformPicker(null); + }} onAddQuery={handleAddQuery} onAddFromSavedQueries={(index) => handleOpenQueryLibrary('browse', index)} onAddTransform={(index) => { diff --git a/public/app/features/dashboard-scene/panel-edit/PanelDataPane/QueryTransformList.tsx b/public/app/features/dashboard-scene/panel-edit/PanelDataPane/QueryTransformList.tsx index 802bd437c4e..454654cf15d 100644 --- a/public/app/features/dashboard-scene/panel-edit/PanelDataPane/QueryTransformList.tsx +++ b/public/app/features/dashboard-scene/panel-edit/PanelDataPane/QueryTransformList.tsx @@ -527,6 +527,7 @@ export const QueryTransformList = memo( onAddTransform={onAddTransform} onAddExpression={onAddExpression} allowedTypes={['transform']} + index={0} text={t('dashboard-scene.query-transform-list.add', 'Add')} /> ))}