[FEATURE/BREAKINGCHANGE] DataQueriesProvider: use full queryDefinitions + remove QueryCountProvider + add edit query name in QueryEditorContainer

[Gladorme]

Description

Depends on: perses/perses#3915

This PR is doing some breaking changes:

• DataQueriesProvider: need full query definitions instead of just definition (Definition => QueryDefinition)
• QueryCountProvider: removed, you can retrieve query count using DataQueriesProvider
• useQueryType: removed containing hard coded plugin data

This PR allow user to edit query names, using a self edit/submit button in order to not spam rerender when updating it

Migration should be easy, because Definition is often calculated from QueryDefinition. Worst case:

Before:

export function TestComponent(props: TestComponentProps): ReactElement {
      ...

      const definitions = [
        {
          kind: 'PrometheusTimeSeriesQuery',
          spec: {
            datasource: datasource,
            query: expr,
          },
        },
      ];

  return (
      <DataQueriesProvider definitions={definitions}>
        {/* ... */}
      </DataQueriesProvider>
  )
}

After:

export function TestComponent(props: TestComponentProps): ReactElement {
      ...

      const queryDefinitions = [
        {
          kind: 'TimeSeriesQuery',
          spec: {
            plugin: {
              kind: 'PrometheusTimeSeriesQuery',
              spec: {
                datasource: datasource,
                query: expr,
              },
            },
          },
        },
      ];

  return (
      <DataQueriesProvider definitions={queryDefinitions}>
        {/* ... */}
      </DataQueriesProvider>
  )
}

Screenshots

On edit:

Checklist

• Pull request has a descriptive title and context useful to a reviewer.
• Pull request title follows the [<catalog_entry>] <commit message> naming convention using one of the
  following catalog_entry values: FEATURE, ENHANCEMENT, BUGFIX, BREAKINGCHANGE, DOC,IGNORE.
• All commits have DCO signoffs.

UI Changes

• Changes that impact the UI include screenshots and/or screencasts of the relevant changes.
• Code follows the UI guidelines.
• E2E tests are stable and unlikely to be flaky.
  See e2e docs for more details. Common issues include:
  • Is the data inconsistent? You need to mock API requests.
  • Does the time change? You need to use consistent time values or mock time utilities.
  • Does it have loading states? You need to wait for loading to complete.

[celian-garcia]

Counter proposal to be less polluting for the edit button

[Gladorme]

@jgbernalp If you have any opinion about this breaking change, else I proceed with merge :)

[Copilot]

Pull request overview

This PR introduces breaking changes to the query runtime API by switching DataQueriesProvider to consume full QueryDefinition objects (instead of plugin Definitions), removing QueryCountProvider/useQueryType, and adds UI support for editing query names in QueryEditorContainer with an explicit edit/submit flow to avoid noisy re-renders.

Changes:

• Update DataQueriesProvider to accept/store full QueryDefinitions and expose them via context (enabling query count retrieval without a separate provider).
• Remove QueryCountProvider exports and related wiring.
• Add query-name utilities and implement editable query names in QueryEditorContainer.

Reviewed changes

Copilot reviewed 12 out of 12 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
plugin-system/src/runtime/QueryCountProvider.tsx	Removes the QueryCount context/provider (breaking change).
plugin-system/src/runtime/index.ts	Stops exporting QueryCountProvider.
plugin-system/src/runtime/DataQueriesProvider/model.ts	Updates provider props/context types to use full QueryDefinitions; removes useQueryType.
plugin-system/src/runtime/DataQueriesProvider/DataQueriesProvider.tsx	Uses full QueryDefinitions directly; exposes queryDefinitions in context and filters by query type.
plugin-system/src/runtime/DataQueriesProvider/DataQueriesProvider.test.tsx	Updates tests to the new QueryDefinition shape and removes useQueryType tests.
plugin-system/src/components/PanelSpecEditor/PanelSpecEditor.tsx	Removes QueryCountProvider wrapper usage.
plugin-system/src/components/PanelSpecEditor/PanelSpecEditor.test.tsx	Updates mocked DataQueries context to include queryDefinitions.
plugin-system/src/components/MultiQueryEditor/utils.tsx	Adds helpers for default/query names (new export).
plugin-system/src/components/MultiQueryEditor/QueryEditorContainer.tsx	Adds UI/state for editing query names with save/cancel.
plugin-system/src/components/MultiQueryEditor/index.tsx	Exports the new query-name utilities.
dashboards/src/components/PanelDrawer/PanelQueriesSharedControls.tsx	Updates preview definitions to use full QueryDefinitions (no more mapping to plugin-only definitions).
dashboards/src/components/GridLayout/GridItemContent.tsx	Passes full query definitions into DataQueriesProvider and QueryViewerDialog.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Nexucis]

if there is an assuming breaking change. Can you please provide the migration plan please @Gladorme ?

[Gladorme]

DataQueriesProvider: need full query definitions instead of just definition (Definition => QueryDefinition)
QueryCountProvider: removed, you can retrieve query count using DataQueriesProvider

Migration should be easy, because Definition is often calculated from QueryDefinition. Worst case:

Before:

export function TestComponent(props: TestComponentProps): ReactElement {
      ...

      const definitions = [
        {
          kind: 'PrometheusTimeSeriesQuery',
          spec: {
            datasource: datasource,
            query: expr,
          },
        },
      ];

  return (
      <DataQueriesProvider definitions={definitions}>
        {/* ... */}
      </DataQueriesProvider>
  )
}

After:

export function TestComponent(props: TestComponentProps): ReactElement {
      ...

      const queryDefinitions = [
        {
          kind: 'TimeSeriesQuery',
          spec: {
            plugin: {
              kind: 'PrometheusTimeSeriesQuery',
              spec: {
                datasource: datasource,
                query: expr,
              },
            },
          },
        },
      ];

  return (
      <DataQueriesProvider definitions={queryDefinitions}>
        {/* ... */}
      </DataQueriesProvider>
  )
}