diff --git a/public/app/features/dashboard-scene/panel-edit/PanelDataPane/PanelDataTransformationsTab.tsx b/public/app/features/dashboard-scene/panel-edit/PanelDataPane/PanelDataTransformationsTab.tsx index af68e86adc4..af937d150c1 100644 --- a/public/app/features/dashboard-scene/panel-edit/PanelDataPane/PanelDataTransformationsTab.tsx +++ b/public/app/features/dashboard-scene/panel-edit/PanelDataPane/PanelDataTransformationsTab.tsx @@ -25,7 +25,7 @@ import { PanelDataPane } from './PanelDataPane'; import { PanelDataQueriesTab } from './PanelDataQueriesTab'; import { TransformationsDrawer } from './TransformationsDrawer'; import { PanelDataPaneTab, TabId, PanelDataTabHeaderProps } from './types'; -import { findSqlExpression, scrollToQueryRow } from './utils'; +import { scrollToQueryRow } from './utils'; const SET_TIMEOUT = 750; @@ -100,23 +100,21 @@ export function PanelDataTransformationsTabRendered({ model }: SceneComponentPro return; } - const queries = queriesTab.getQueries(); - const existingSqlQuery = findSqlExpression(queries); - - if (!existingSqlQuery) { - // Create new SQL expression - queriesTab.onAddExpressionOfType(ExpressionQueryType.sql); - } + // Always create a new SQL expression (it will be added to the end of the queries array) + queriesTab.onAddExpressionOfType(ExpressionQueryType.sql); // Navigate to the Queries tab parent.onChangeTab(queriesTab); - // Scroll to SQL query after tab renders + // Scroll to the newly created SQL query after tab renders setTimeout(() => { - // If SQL already existed, use it; otherwise find the newly created one - const targetRefId = existingSqlQuery?.refId || findSqlExpression(queriesTab.getQueries())?.refId; - if (targetRefId) { - scrollToQueryRow(targetRefId); + const queries = queriesTab.getQueries(); + // The newly added query is the last one in the array + if (queries.length > 0) { + const newQuery = queries[queries.length - 1]; + if (newQuery?.refId) { + scrollToQueryRow(newQuery.refId); + } } }, SET_TIMEOUT); }, [model]); diff --git a/public/app/features/dashboard-scene/panel-edit/PanelDataPane/utils.ts b/public/app/features/dashboard-scene/panel-edit/PanelDataPane/utils.ts index 31a9c548c34..b95a8076874 100644 --- a/public/app/features/dashboard-scene/panel-edit/PanelDataPane/utils.ts +++ b/public/app/features/dashboard-scene/panel-edit/PanelDataPane/utils.ts @@ -1,12 +1,3 @@ -import { DataQuery } from '@grafana/schema'; -import { ExpressionQueryType } from 'app/features/expressions/types'; - -export function findSqlExpression(queries: DataQuery[]) { - return queries.find((query) => { - return typeof query === 'object' && query !== null && 'type' in query && query.type === ExpressionQueryType.sql; - }); -} - export function scrollToQueryRow(refId: string) { // Query rows use uniqueId(refId + '_') for their internal id // The aria-controls attribute will be like "A_1" for refId "A"