From 647f693e598e7d9e533e81bf4d9116364219c7a3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Thu, 23 Mar 2023 10:31:25 +0100 Subject: [PATCH] Scenes: Update to latest scenes package and remove editing stuff (#65222) * Update to latest scenes and remove editing stuff * fixing test --- .betterer.results | 6 +- package.json | 2 +- .../scenes/dashboard/DashboardsLoader.test.ts | 2 +- .../scenes/dashboard/DashboardsLoader.ts | 2 +- .../editor/SceneComponentEditWrapper.tsx | 61 -------------- .../scenes/editor/SceneEditManager.tsx | 80 ------------------- .../scenes/editor/SceneObjectEditor.tsx | 16 ---- .../scenes/editor/SceneObjectTree.tsx | 79 ------------------ public/app/features/scenes/scenes/demo.tsx | 3 - public/app/features/scenes/scenes/grid.tsx | 2 - .../scenes/scenes/gridMultiTimeRange.tsx | 2 - .../features/scenes/scenes/gridMultiple.tsx | 3 - .../scenes/scenes/gridWithMultipleData.tsx | 2 - .../features/scenes/scenes/gridWithRow.tsx | 2 - .../scenes/scenes/queryVariableDemo.tsx | 2 +- .../features/scenes/scenes/sceneWithRows.tsx | 2 - .../features/scenes/scenes/variablesDemo.tsx | 2 +- .../app/features/templating/template_srv.ts | 4 +- yarn.lock | 10 +-- 19 files changed, 13 insertions(+), 269 deletions(-) delete mode 100644 public/app/features/scenes/editor/SceneComponentEditWrapper.tsx delete mode 100644 public/app/features/scenes/editor/SceneEditManager.tsx delete mode 100644 public/app/features/scenes/editor/SceneObjectEditor.tsx delete mode 100644 public/app/features/scenes/editor/SceneObjectTree.tsx 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