diff --git a/.betterer.results b/.betterer.results
index d342b246ecc..bb39269fe37 100644
--- a/.betterer.results
+++ b/.betterer.results
@@ -1,5 +1,5 @@
// BETTERER RESULTS V2.
-//
+//
// If this file contains merge conflicts, use `betterer merge` to automatically resolve them:
// https://phenomnomnominal.github.io/betterer/docs/results-file/#merge
//
@@ -3797,10 +3797,6 @@ exports[`better eslint`] = {
"public/app/features/sandbox/TestStuffPage.tsx:5381": [
[0, 0, 0, "Do not use any type assertions.", "0"]
],
- "public/app/features/scenes/editor/SceneObjectTree.tsx:5381": [
- [0, 0, 0, "Do not use any type assertions.", "0"],
- [0, 0, 0, "Unexpected any. Specify a different type.", "1"]
- ],
"public/app/features/search/components/SearchCard.tsx:5381": [
[0, 0, 0, "Unexpected any. Specify a different type.", "0"],
[0, 0, 0, "Do not use any type assertions.", "1"],
diff --git a/package.json b/package.json
index 3f77100ddd2..bfb1cdc53ee 100644
--- a/package.json
+++ b/package.json
@@ -267,7 +267,7 @@
"@grafana/lezer-logql": "0.1.2",
"@grafana/monaco-logql": "^0.0.7",
"@grafana/runtime": "workspace:*",
- "@grafana/scenes": "^0.0.21",
+ "@grafana/scenes": "^0.0.28",
"@grafana/schema": "workspace:*",
"@grafana/ui": "workspace:*",
"@kusto/monaco-kusto": "5.3.6",
diff --git a/public/app/features/scenes/dashboard/DashboardsLoader.test.ts b/public/app/features/scenes/dashboard/DashboardsLoader.test.ts
index daa9cbb874a..ec9d368a740 100644
--- a/public/app/features/scenes/dashboard/DashboardsLoader.test.ts
+++ b/public/app/features/scenes/dashboard/DashboardsLoader.test.ts
@@ -537,7 +537,7 @@ describe('DashboardLoader', () => {
label: undefined,
name: 'query1',
options: [],
- query: 'prometheus',
+ pluginId: 'prometheus',
regex: '/^gdev/',
skipUrlSync: false,
text: ['gdev-prometheus', 'gdev-slow-prometheus'],
diff --git a/public/app/features/scenes/dashboard/DashboardsLoader.ts b/public/app/features/scenes/dashboard/DashboardsLoader.ts
index 72b872e8aa9..a5f4c6611c5 100644
--- a/public/app/features/scenes/dashboard/DashboardsLoader.ts
+++ b/public/app/features/scenes/dashboard/DashboardsLoader.ts
@@ -235,7 +235,7 @@ export function createSceneVariableFromVariableModel(variable: VariableModel): S
text: variable.current.text,
description: variable.description,
regex: variable.regex,
- query: variable.query,
+ pluginId: variable.query,
allValue: variable.allValue || undefined,
includeAll: variable.includeAll,
defaultToAll: Boolean(variable.includeAll),
diff --git a/public/app/features/scenes/editor/SceneComponentEditWrapper.tsx b/public/app/features/scenes/editor/SceneComponentEditWrapper.tsx
deleted file mode 100644
index 9196f200195..00000000000
--- a/public/app/features/scenes/editor/SceneComponentEditWrapper.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-import { css } from '@emotion/css';
-import React, { CSSProperties } from 'react';
-
-import { GrafanaTheme2 } from '@grafana/data';
-import { SceneEditor, SceneObject } from '@grafana/scenes';
-import { useStyles2 } from '@grafana/ui';
-
-export function SceneComponentEditWrapper({
- model,
- editor,
- children,
-}: {
- model: SceneObject;
- editor: SceneEditor;
- children: React.ReactNode;
-}) {
- const styles = useStyles2(getStyles);
- const { hoverObject, selectedObject } = editor.useState();
-
- const onMouseEnter = () => editor.onMouseEnterObject(model);
- const onMouseLeave = () => editor.onMouseLeaveObject(model);
-
- const onClick = (evt: React.MouseEvent) => {
- evt.stopPropagation();
- editor.onSelectObject(model);
- };
-
- const style: CSSProperties = {};
- let className = styles.wrapper;
-
- if (hoverObject?.ref === model) {
- className += ' ' + styles.hover;
- }
- if (selectedObject?.ref === model) {
- className += ' ' + styles.selected;
- }
-
- return (
-
- {children}
-
- );
-}
-
-const getStyles = (theme: GrafanaTheme2) => {
- return {
- wrapper: css({
- display: 'flex',
- flexGrow: 1,
- padding: 8,
- border: `1px dashed ${theme.colors.primary.main}`,
- cursor: 'pointer',
- }),
- hover: css({
- border: `1px solid ${theme.colors.primary.border}`,
- }),
- selected: css({
- border: `1px solid ${theme.colors.error.border}`,
- }),
- };
-};
diff --git a/public/app/features/scenes/editor/SceneEditManager.tsx b/public/app/features/scenes/editor/SceneEditManager.tsx
deleted file mode 100644
index 7fbddae3f70..00000000000
--- a/public/app/features/scenes/editor/SceneEditManager.tsx
+++ /dev/null
@@ -1,80 +0,0 @@
-import { css } from '@emotion/css';
-import React from 'react';
-
-import { GrafanaTheme2 } from '@grafana/data';
-import {
- SceneObjectBase,
- SceneEditorState,
- SceneEditor,
- SceneObject,
- SceneComponentProps,
- SceneComponent,
-} from '@grafana/scenes';
-import { useStyles2 } from '@grafana/ui';
-
-import { SceneComponentEditWrapper } from './SceneComponentEditWrapper';
-import { SceneObjectEditor } from './SceneObjectEditor';
-import { SceneObjectTree } from './SceneObjectTree';
-
-export class SceneEditManager extends SceneObjectBase implements SceneEditor {
- public static Component = SceneEditorRenderer;
-
- public get Component(): SceneComponent {
- return SceneEditorRenderer;
- }
-
- public onMouseEnterObject(model: SceneObject) {
- this.setState({ hoverObject: { ref: model } });
- }
-
- public onMouseLeaveObject(model: SceneObject) {
- if (model.parent) {
- this.setState({ hoverObject: { ref: model.parent } });
- } else {
- this.setState({ hoverObject: undefined });
- }
- }
-
- public onSelectObject(model: SceneObject) {
- this.setState({ selectedObject: { ref: model } });
- }
-
- public getEditComponentWrapper() {
- return SceneComponentEditWrapper;
- }
-}
-
-function SceneEditorRenderer({ model, isEditing }: SceneComponentProps) {
- const { selectedObject } = model.useState();
- const styles = useStyles2(getStyles);
-
- if (!isEditing) {
- return null;
- }
-
- return (
-
-
-
-
- {selectedObject &&
}
-
- );
-}
-
-const getStyles = (theme: GrafanaTheme2) => {
- return {
- container: css({
- display: 'flex',
- flexGrow: 0,
- border: `1px solid ${theme.colors.border.weak}`,
- background: theme.colors.background.primary,
- width: theme.spacing(40),
- cursor: 'pointer',
- flexDirection: 'column',
- }),
- tree: css({
- padding: theme.spacing(0.25, 1),
- }),
- };
-};
diff --git a/public/app/features/scenes/editor/SceneObjectEditor.tsx b/public/app/features/scenes/editor/SceneObjectEditor.tsx
deleted file mode 100644
index 1159c9b03d6..00000000000
--- a/public/app/features/scenes/editor/SceneObjectEditor.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import React from 'react';
-
-import { SceneObject } from '@grafana/scenes';
-import { OptionsPaneCategory } from 'app/features/dashboard/components/PanelEditor/OptionsPaneCategory';
-
-export interface Props {
- model: SceneObject;
-}
-
-export function SceneObjectEditor({ model }: Props) {
- return (
-
-
-
- );
-}
diff --git a/public/app/features/scenes/editor/SceneObjectTree.tsx b/public/app/features/scenes/editor/SceneObjectTree.tsx
deleted file mode 100644
index 44ab3e9ad3d..00000000000
--- a/public/app/features/scenes/editor/SceneObjectTree.tsx
+++ /dev/null
@@ -1,79 +0,0 @@
-import { css, cx } from '@emotion/css';
-import React from 'react';
-
-import { GrafanaTheme2 } from '@grafana/data';
-import { sceneGraph, SceneObject, isSceneObject, SceneLayoutChild } from '@grafana/scenes';
-import { Icon, useStyles2 } from '@grafana/ui';
-
-export interface Props {
- node: SceneObject;
- selectedObject?: SceneObject;
-}
-
-export function SceneObjectTree({ node, selectedObject }: Props) {
- const styles = useStyles2(getStyles);
- const state = node.useState();
- let children: SceneLayoutChild[] = [];
-
- for (const propKey of Object.keys(state)) {
- const propValue = (state as any)[propKey];
- if (isSceneObject(propValue)) {
- children.push(propValue);
- }
- }
-
- if ('children' in state) {
- for (const child of state.children) {
- children.push(child);
- }
- }
-
- const name = node.constructor.name;
- const isSelected = selectedObject === node;
- const onSelectNode = () => sceneGraph.getSceneEditor(node).onSelectObject(node);
-
- return (
-
-
-
{children.length > 0 && }
-
{name}
-
- {children.length > 0 && (
-
- {children.map((child) => (
-
- ))}
-
- )}
-
- );
-}
-
-const getStyles = (theme: GrafanaTheme2) => {
- return {
- node: css({
- display: 'flex',
- flexGrow: 0,
- cursor: 'pointer',
- flexDirection: 'column',
- padding: '2px 4px',
- }),
- header: css({
- display: 'flex',
- fontWeight: 500,
- }),
- name: css({}),
- selected: css({
- color: theme.colors.error.text,
- }),
- icon: css({
- width: theme.spacing(3),
- color: theme.colors.text.secondary,
- }),
- children: css({
- display: 'flex',
- flexDirection: 'column',
- paddingLeft: 8,
- }),
- };
-};
diff --git a/public/app/features/scenes/scenes/demo.tsx b/public/app/features/scenes/scenes/demo.tsx
index 7a641faf2b0..13ef5a0e647 100644
--- a/public/app/features/scenes/scenes/demo.tsx
+++ b/public/app/features/scenes/scenes/demo.tsx
@@ -13,7 +13,6 @@ import { TestDataQueryType } from 'app/plugins/datasource/testdata/dataquery.gen
import { panelBuilders } from '../builders/panelBuilders';
import { DashboardScene } from '../dashboard/DashboardScene';
-import { SceneEditManager } from '../editor/SceneEditManager';
import { getQueryRunnerWithRandomWalkQuery } from './queries';
@@ -60,7 +59,6 @@ export function getFlexLayoutTest(): DashboardScene {
}),
],
}),
- $editor: new SceneEditManager({}),
$timeRange: new SceneTimeRange(),
$data: getQueryRunnerWithRandomWalkQuery(),
actions: [new SceneTimePicker({})],
@@ -112,7 +110,6 @@ export function getScenePanelRepeaterTest(): DashboardScene {
});
},
}),
- $editor: new SceneEditManager({}),
$timeRange: new SceneTimeRange(),
$data: queryRunner,
actions: [
diff --git a/public/app/features/scenes/scenes/grid.tsx b/public/app/features/scenes/scenes/grid.tsx
index 4b7e85e9aa3..5dc2ecd576b 100644
--- a/public/app/features/scenes/scenes/grid.tsx
+++ b/public/app/features/scenes/scenes/grid.tsx
@@ -1,7 +1,6 @@
import { VizPanel, SceneTimePicker, SceneFlexLayout, SceneGridLayout, SceneTimeRange } from '@grafana/scenes';
import { DashboardScene } from '../dashboard/DashboardScene';
-import { SceneEditManager } from '../editor/SceneEditManager';
import { getQueryRunnerWithRandomWalkQuery } from './queries';
@@ -47,7 +46,6 @@ export function getGridLayoutTest(): DashboardScene {
}),
],
}),
- $editor: new SceneEditManager({}),
$timeRange: new SceneTimeRange(),
$data: getQueryRunnerWithRandomWalkQuery(),
actions: [new SceneTimePicker({})],
diff --git a/public/app/features/scenes/scenes/gridMultiTimeRange.tsx b/public/app/features/scenes/scenes/gridMultiTimeRange.tsx
index 75080b77a45..259cacde635 100644
--- a/public/app/features/scenes/scenes/gridMultiTimeRange.tsx
+++ b/public/app/features/scenes/scenes/gridMultiTimeRange.tsx
@@ -2,7 +2,6 @@ import { VizPanel, SceneGridRow, SceneTimePicker, SceneGridLayout, SceneTimeRang
import { TestDataQueryType } from 'app/plugins/datasource/testdata/dataquery.gen';
import { DashboardScene } from '../dashboard/DashboardScene';
-import { SceneEditManager } from '../editor/SceneEditManager';
import { getQueryRunnerWithRandomWalkQuery } from './queries';
@@ -56,7 +55,6 @@ export function getGridWithMultipleTimeRanges(): DashboardScene {
}),
],
}),
- $editor: new SceneEditManager({}),
$timeRange: globalTimeRange,
$data: getQueryRunnerWithRandomWalkQuery(),
actions: [new SceneTimePicker({})],
diff --git a/public/app/features/scenes/scenes/gridMultiple.tsx b/public/app/features/scenes/scenes/gridMultiple.tsx
index 76cb257b203..42ae6a51967 100644
--- a/public/app/features/scenes/scenes/gridMultiple.tsx
+++ b/public/app/features/scenes/scenes/gridMultiple.tsx
@@ -1,7 +1,6 @@
import { VizPanel, SceneTimePicker, SceneFlexLayout, SceneGridLayout, SceneTimeRange } from '@grafana/scenes';
import { DashboardScene } from '../dashboard/DashboardScene';
-import { SceneEditManager } from '../editor/SceneEditManager';
import { getQueryRunnerWithRandomWalkQuery } from './queries';
@@ -86,8 +85,6 @@ export function getMultipleGridLayoutTest(): DashboardScene {
}),
],
}),
-
- $editor: new SceneEditManager({}),
$timeRange: new SceneTimeRange(),
$data: getQueryRunnerWithRandomWalkQuery(),
actions: [new SceneTimePicker({})],
diff --git a/public/app/features/scenes/scenes/gridWithMultipleData.tsx b/public/app/features/scenes/scenes/gridWithMultipleData.tsx
index dfd8d69494a..8610bf00c95 100644
--- a/public/app/features/scenes/scenes/gridWithMultipleData.tsx
+++ b/public/app/features/scenes/scenes/gridWithMultipleData.tsx
@@ -2,7 +2,6 @@ import { VizPanel, SceneGridRow, SceneTimePicker, SceneGridLayout, SceneTimeRang
import { TestDataQueryType } from 'app/plugins/datasource/testdata/dataquery.gen';
import { DashboardScene } from '../dashboard/DashboardScene';
-import { SceneEditManager } from '../editor/SceneEditManager';
import { getQueryRunnerWithRandomWalkQuery } from './queries';
@@ -83,7 +82,6 @@ export function getGridWithMultipleData(): DashboardScene {
}),
],
}),
- $editor: new SceneEditManager({}),
$timeRange: new SceneTimeRange(),
$data: getQueryRunnerWithRandomWalkQuery(),
actions: [new SceneTimePicker({})],
diff --git a/public/app/features/scenes/scenes/gridWithRow.tsx b/public/app/features/scenes/scenes/gridWithRow.tsx
index 8f3c7f09500..31632781273 100644
--- a/public/app/features/scenes/scenes/gridWithRow.tsx
+++ b/public/app/features/scenes/scenes/gridWithRow.tsx
@@ -1,7 +1,6 @@
import { VizPanel, SceneGridLayout, SceneGridRow, SceneTimePicker, SceneTimeRange } from '@grafana/scenes';
import { DashboardScene } from '../dashboard/DashboardScene';
-import { SceneEditManager } from '../editor/SceneEditManager';
import { getQueryRunnerWithRandomWalkQuery } from './queries';
@@ -65,7 +64,6 @@ export function getGridWithRowLayoutTest(): DashboardScene {
}),
],
}),
- $editor: new SceneEditManager({}),
$timeRange: new SceneTimeRange(),
$data: getQueryRunnerWithRandomWalkQuery(),
actions: [new SceneTimePicker({})],
diff --git a/public/app/features/scenes/scenes/queryVariableDemo.tsx b/public/app/features/scenes/scenes/queryVariableDemo.tsx
index 69fd91ded75..903aec184b1 100644
--- a/public/app/features/scenes/scenes/queryVariableDemo.tsx
+++ b/public/app/features/scenes/scenes/queryVariableDemo.tsx
@@ -24,7 +24,7 @@ export function getQueryVariableDemo(): DashboardScene {
}),
new DataSourceVariable({
name: 'datasource',
- query: 'prometheus',
+ pluginId: 'prometheus',
}),
new QueryVariable({
name: 'instance (using datasource variable)',
diff --git a/public/app/features/scenes/scenes/sceneWithRows.tsx b/public/app/features/scenes/scenes/sceneWithRows.tsx
index 51e4352129b..51e77fc822d 100644
--- a/public/app/features/scenes/scenes/sceneWithRows.tsx
+++ b/public/app/features/scenes/scenes/sceneWithRows.tsx
@@ -1,7 +1,6 @@
import { VizPanel, NestedScene, SceneTimePicker, SceneFlexLayout, SceneTimeRange } from '@grafana/scenes';
import { DashboardScene } from '../dashboard/DashboardScene';
-import { SceneEditManager } from '../editor/SceneEditManager';
import { getQueryRunnerWithRandomWalkQuery } from './queries';
@@ -49,7 +48,6 @@ export function getSceneWithRows(): DashboardScene {
}),
],
}),
- $editor: new SceneEditManager({}),
$timeRange: new SceneTimeRange(),
$data: getQueryRunnerWithRandomWalkQuery(),
actions: [new SceneTimePicker({})],
diff --git a/public/app/features/scenes/scenes/variablesDemo.tsx b/public/app/features/scenes/scenes/variablesDemo.tsx
index 03cb1a009fe..b492271eb2b 100644
--- a/public/app/features/scenes/scenes/variablesDemo.tsx
+++ b/public/app/features/scenes/scenes/variablesDemo.tsx
@@ -54,7 +54,7 @@ export function getVariablesDemo(): DashboardScene {
}),
new DataSourceVariable({
name: 'ds',
- query: 'testdata',
+ pluginId: 'testdata',
}),
new TextBoxVariable({
name: 'textbox',
diff --git a/public/app/features/templating/template_srv.ts b/public/app/features/templating/template_srv.ts
index 59b44542dfb..f42a11162ef 100644
--- a/public/app/features/templating/template_srv.ts
+++ b/public/app/features/templating/template_srv.ts
@@ -10,7 +10,7 @@ import {
VariableMap,
} from '@grafana/data';
import { getDataSourceSrv, setTemplateSrv, TemplateSrv as BaseTemplateSrv } from '@grafana/runtime';
-import { sceneGraph, FormatRegistryID, formatRegistry, CustomFormatterFn } from '@grafana/scenes';
+import { sceneGraph, FormatRegistryID, formatRegistry, VariableCustomFormatterFn } from '@grafana/scenes';
import { variableAdapters } from '../variables/adapters';
import { ALL_VARIABLE_TEXT, ALL_VARIABLE_VALUE } from '../variables/constants';
@@ -282,7 +282,7 @@ export class TemplateSrv implements BaseTemplateSrv {
scopedVars.__sceneObject.value,
target,
scopedVars,
- format as string | CustomFormatterFn | undefined
+ format as string | VariableCustomFormatterFn | undefined
);
}
diff --git a/yarn.lock b/yarn.lock
index f25dc8f0305..40785b588b8 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5349,9 +5349,9 @@ __metadata:
languageName: unknown
linkType: soft
-"@grafana/scenes@npm:^0.0.21":
- version: 0.0.21
- resolution: "@grafana/scenes@npm:0.0.21"
+"@grafana/scenes@npm:^0.0.28":
+ version: 0.0.28
+ resolution: "@grafana/scenes@npm:0.0.28"
dependencies:
"@grafana/e2e-selectors": ^9.4.3
"@grafana/experimental": 1.0.1
@@ -5359,7 +5359,7 @@ __metadata:
react-use: 17.4.0
react-virtualized-auto-sizer: 1.0.7
uuid: ^9.0.0
- checksum: a36d6b19884a240df1bc3048f72a2a5b7a505371ae30ae29f70f77d6c590d39282a027322b7d49233cb62fa9410eefedb6cb2cb53d938d9394d142ba5734a070
+ checksum: 0cfcfda325f42c1aee571e32411514954d5a14ac7b40102f33c1c52bd39e65766c3081e634de303379dccd363f78ed4ce022ac71a4d6b7ab3658f18ac81163e7
languageName: node
linkType: hard
@@ -22249,7 +22249,7 @@ __metadata:
"@grafana/lezer-logql": 0.1.2
"@grafana/monaco-logql": ^0.0.7
"@grafana/runtime": "workspace:*"
- "@grafana/scenes": ^0.0.21
+ "@grafana/scenes": ^0.0.28
"@grafana/schema": "workspace:*"
"@grafana/toolkit": "workspace:*"
"@grafana/tsconfig": ^1.2.0-rc1