SceneObject: Rename SceneObjectStatePlain to SceneObjectState (#122)

Author: torkelo

packages/scenes-app/src/pages/Demos/scenes/flexLayout.tsx

@@ -5,7 +5,7 @@ import {
   SceneFlexItem,
   SceneFlexLayout,
   SceneObjectBase,
-  SceneObjectStatePlain,
+  SceneObjectState,
   VizPanel,
 } from '@grafana/scenes';
 import { getQueryRunnerWithRandomWalkQuery } from '../utils';
@@ -109,7 +109,7 @@ export function getFlexLayoutTest() {
   });
 }
 
-class DebugItem extends SceneObjectBase<SceneObjectStatePlain> {
+class DebugItem extends SceneObjectBase<SceneObjectState> {
   public static Component = DebugItemRenderer;
 }
 

packages/scenes-app/src/pages/Home/CustomSceneObject.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { SceneComponentProps, SceneObjectBase, SceneObjectStatePlain } from '@grafana/scenes';
+import { SceneComponentProps, SceneObjectBase, SceneObjectState } from '@grafana/scenes';
 import { Input } from '@grafana/ui';
 
-export interface CustomSceneObjectState extends SceneObjectStatePlain {
+export interface CustomSceneObjectState extends SceneObjectState {
   value?: string;
   onChange: (value: number) => void;
 }

packages/scenes/src/components/EmbeddedScene.tsx

@@ -4,10 +4,10 @@ import { useStyles2 } from '@grafana/ui';
 import React from 'react';
 
 import { SceneObjectBase } from '../core/SceneObjectBase';
-import { SceneComponentProps, SceneObjectStatePlain, SceneObject } from '../core/types';
+import { SceneComponentProps, SceneObjectState, SceneObject } from '../core/types';
 import { UrlSyncManager } from '../services/UrlSyncManager';
 
-export interface EmbeddedSceneState extends SceneObjectStatePlain {
+export interface EmbeddedSceneState extends SceneObjectState {
   /**
    * The main content of the scene (usually a SceneFlexLayout)
    */

packages/scenes/src/components/NestedScene.tsx

@@ -6,15 +6,9 @@ import { Stack } from '@grafana/experimental';
 import { Button, ToolbarButton, useStyles2 } from '@grafana/ui';
 
 import { SceneObjectBase } from '../core/SceneObjectBase';
-import {
-  SceneObject,
-  SceneComponentProps,
-  SceneLayout,
-  SceneLayoutItemState,
-  SceneObjectStatePlain,
-} from '../core/types';
+import { SceneObject, SceneComponentProps, SceneLayout, SceneLayoutItemState, SceneObjectState } from '../core/types';
 
-interface NestedSceneState extends SceneObjectStatePlain {
+interface NestedSceneState extends SceneObjectState {
   title: string;
   isCollapsed?: boolean;
   canCollapse?: boolean;

packages/scenes/src/components/SceneApp/types.ts

@@ -1,4 +1,4 @@
-import { SceneObject, SceneObjectStatePlain } from '../../core/types';
+import { SceneObject, SceneObjectState } from '../../core/types';
 import { EmbeddedScene } from '../EmbeddedScene';
 import { IconName } from '@grafana/data';
 
@@ -9,7 +9,7 @@ export interface SceneRouteMatch<Params extends { [K in keyof Params]?: string }
   url: string;
 }
 
-export interface SceneAppState extends SceneObjectStatePlain {
+export interface SceneAppState extends SceneObjectState {
   // Array of SceneAppPage objects that are considered app's top level pages
   pages: SceneAppPageLike[];
 }
@@ -20,7 +20,7 @@ export interface SceneAppRoute {
   drilldown?: SceneAppDrilldownView;
 }
 
-export interface SceneAppPageState extends SceneObjectStatePlain {
+export interface SceneAppPageState extends SceneObjectState {
   /** Page title */
   title: string;
   /** Page subTitle */

packages/scenes/src/components/SceneByFrameRepeater.tsx

@@ -4,10 +4,10 @@ import { LoadingState, PanelData, DataFrame } from '@grafana/data';
 
 import { SceneObjectBase } from '../core/SceneObjectBase';
 import { sceneGraph } from '../core/sceneGraph';
-import { SceneComponentProps, SceneObjectStatePlain } from '../core/types';
+import { SceneComponentProps, SceneObjectState } from '../core/types';
 import { SceneFlexItem, SceneFlexLayout } from './layout/SceneFlexLayout';
 
-interface SceneByFrameRepeaterState extends SceneObjectStatePlain {
+interface SceneByFrameRepeaterState extends SceneObjectState {
   body: SceneFlexLayout;
   getLayoutChild(data: PanelData, frame: DataFrame, frameIndex: number): SceneFlexItem;
 }

packages/scenes/src/components/SceneCanvasText.tsx

@@ -2,10 +2,10 @@ import React, { CSSProperties } from 'react';
 
 import { SceneObjectBase } from '../core/SceneObjectBase';
 import { sceneGraph } from '../core/sceneGraph';
-import { SceneComponentProps, SceneObjectStatePlain } from '../core/types';
+import { SceneComponentProps, SceneObjectState } from '../core/types';
 import { VariableDependencyConfig } from '../variables/VariableDependencyConfig';
 
-export interface SceneCanvasTextState extends SceneObjectStatePlain {
+export interface SceneCanvasTextState extends SceneObjectState {
   text: string;
   fontSize?: number;
   align?: 'left' | 'center' | 'right';

packages/scenes/src/components/SceneReactObject.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 
 import { SceneObjectBase } from '../core/SceneObjectBase';
-import { SceneComponentProps, SceneObjectStatePlain } from '../core/types';
+import { SceneComponentProps, SceneObjectState } from '../core/types';
 
-export interface SceneReactObjectState<TProps = {}> extends SceneObjectStatePlain {
+export interface SceneReactObjectState<TProps = {}> extends SceneObjectState {
   /**
    * React component to render
    */

packages/scenes/src/components/SceneRefreshPicker.tsx

@@ -5,12 +5,12 @@ import { RefreshPicker } from '@grafana/ui';
 
 import { SceneObjectBase } from '../core/SceneObjectBase';
 import { sceneGraph } from '../core/sceneGraph';
-import { SceneComponentProps, SceneObjectStatePlain, SceneObjectUrlValues } from '../core/types';
+import { SceneComponentProps, SceneObjectState, SceneObjectUrlValues } from '../core/types';
 import { SceneObjectUrlSyncConfig } from '../services/SceneObjectUrlSyncConfig';
 
 export const DEFAULT_INTERVALS = ['5s', '10s', '30s', '1m', '5m', '15m', '30m', '1h', '2h', '1d'];
 
-export interface SceneRefreshPickerState extends SceneObjectStatePlain {
+export interface SceneRefreshPickerState extends SceneObjectState {
   // Refresh interval, e.g. 5s, 1m, 2h
   refresh: string;
   // List of allowed refresh intervals, e.g. ['5s', '1m']

packages/scenes/src/components/SceneTimePicker.tsx

@@ -4,9 +4,9 @@ import { TimeRangePicker } from '@grafana/ui';
 
 import { SceneObjectBase } from '../core/SceneObjectBase';
 import { sceneGraph } from '../core/sceneGraph';
-import { SceneComponentProps, SceneObjectStatePlain } from '../core/types';
+import { SceneComponentProps, SceneObjectState } from '../core/types';
 
-export interface SceneTimePickerState extends SceneObjectStatePlain {
+export interface SceneTimePickerState extends SceneObjectState {
   hidePicker?: boolean;
   isOnCanvas?: boolean;
 }

packages/scenes/src/components/SceneToolbarButton.tsx

@@ -3,9 +3,9 @@ import React from 'react';
 import { IconName, Input, ToolbarButton } from '@grafana/ui';
 
 import { SceneObjectBase } from '../core/SceneObjectBase';
-import { SceneComponentProps, SceneObjectStatePlain } from '../core/types';
+import { SceneComponentProps, SceneObjectState } from '../core/types';
 
-export interface ToolbarButtonState extends SceneObjectStatePlain {
+export interface ToolbarButtonState extends SceneObjectState {
   icon: IconName;
   onClick: () => void;
 }
@@ -18,7 +18,7 @@ export class SceneToolbarButton extends SceneObjectBase<ToolbarButtonState> {
   };
 }
 
-export interface SceneToolbarInputState extends SceneObjectStatePlain {
+export interface SceneToolbarInputState extends SceneObjectState {
   value?: string;
   onChange: (value: number) => void;
 }

packages/scenes/src/components/VizPanel/VizPanel.tsx

@@ -18,7 +18,7 @@ import { PanelContext, SeriesVisibilityChangeMode, VizLegendOptions } from '@gra
 import { config, getAppEvents, getPluginImportUtils } from '@grafana/runtime';
 import { SceneObjectBase } from '../../core/SceneObjectBase';
 import { sceneGraph } from '../../core/sceneGraph';
-import { DeepPartial, SceneObjectStatePlain } from '../../core/types';
+import { DeepPartial, SceneObjectState } from '../../core/types';
 
 import { VizPanelRenderer } from './VizPanelRenderer';
 import { VizPanelMenu } from './VizPanelMenu';
@@ -28,7 +28,7 @@ import { seriesVisibilityConfigFactory } from './seriesVisibilityConfigFactory';
 import { emptyPanelData } from '../../core/SceneDataNode';
 import { changeSeriesColorConfigFactory } from './colorSeriesConfigFactory';
 
-export interface VizPanelState<TOptions = {}, TFieldConfig = {}> extends SceneObjectStatePlain {
+export interface VizPanelState<TOptions = {}, TFieldConfig = {}> extends SceneObjectState {
   title: string;
   description?: string;
   pluginId: string;

packages/scenes/src/components/VizPanel/VizPanelMenu.tsx

@@ -2,9 +2,9 @@ import React from 'react';
 import { PanelMenuItem } from '@grafana/data';
 import { Menu } from '@grafana/ui';
 import { SceneObjectBase } from '../../core/SceneObjectBase';
-import { SceneComponentProps, SceneObjectStatePlain } from '../../core/types';
+import { SceneComponentProps, SceneObjectState } from '../../core/types';
 
-interface VizPanelMenuState extends SceneObjectStatePlain {
+interface VizPanelMenuState extends SceneObjectState {
   items?: PanelMenuItem[];
 }
 

packages/scenes/src/components/layout/SceneFlexLayout.tsx

@@ -4,14 +4,14 @@ import { SceneObjectBase } from '../../core/SceneObjectBase';
 import {
   SceneComponentProps,
   SceneLayout,
-  SceneObjectStatePlain,
+  SceneObjectState,
   SceneObject,
   SceneLayoutItemState,
 } from '../../core/types';
 
 export interface SceneFlexItemLike extends SceneObject<SceneFlexItemState> {}
 
-interface SceneFlexLayoutState extends SceneObjectStatePlain {
+interface SceneFlexLayoutState extends SceneObjectState {
   direction?: CSSProperties['flexDirection'];
   wrap?: CSSProperties['flexWrap'];
   children: SceneFlexItemLike[];

packages/scenes/src/components/layout/grid/SceneGridLayout.test.tsx

@@ -2,7 +2,7 @@ import { render, screen } from '@testing-library/react';
 import React from 'react';
 
 import { SceneObjectBase } from '../../../core/SceneObjectBase';
-import { SceneComponentProps, SceneObjectStatePlain } from '../../../core/types';
+import { SceneComponentProps, SceneObjectState } from '../../../core/types';
 import { EmbeddedScene } from '../../EmbeddedScene';
 
 import { SceneGridItem, SceneGridLayout } from './SceneGridLayout';
@@ -16,7 +16,7 @@ jest.mock(
       children({ height: 600, width: 600 })
 );
 
-class TestObject extends SceneObjectBase<SceneObjectStatePlain> {
+class TestObject extends SceneObjectBase<SceneObjectState> {
   public static Component = (m: SceneComponentProps<TestObject>) => {
     return <div data-testid="test-object">TestObject</div>;
   };

packages/scenes/src/components/layout/grid/SceneGridLayout.tsx

@@ -8,14 +8,14 @@ import {
   SceneLayout,
   SceneLayoutItemState,
   SceneObject,
-  SceneObjectStatePlain,
+  SceneObjectState,
 } from '../../../core/types';
 import { DEFAULT_PANEL_SPAN, GRID_CELL_HEIGHT, GRID_CELL_VMARGIN, GRID_COLUMN_COUNT } from './constants';
 
 import { SceneGridRow } from './SceneGridRow';
 import { SceneGridItemLike, SceneGridItemPlacement, SceneGridItemStateLike } from './types';
 
-interface SceneGridLayoutState extends SceneObjectStatePlain {
+interface SceneGridLayoutState extends SceneObjectState {
   /**
    * Turn on or off dragging for all items. Indiviadual items can still disabled via isDraggable property
    **/

packages/scenes/src/components/layout/grid/types.ts

@@ -1,4 +1,4 @@
-import { SceneObject, SceneObjectStatePlain } from '../../../core/types';
+import { SceneObject, SceneObjectState } from '../../../core/types';
 
 export interface SceneGridItemPlacement {
   x?: number;
@@ -7,7 +7,7 @@ export interface SceneGridItemPlacement {
   height?: number;
 }
 
-export interface SceneGridItemStateLike extends SceneGridItemPlacement, SceneObjectStatePlain {
+export interface SceneGridItemStateLike extends SceneGridItemPlacement, SceneObjectState {
   isResizable: boolean;
   isDraggable: boolean;
 }

packages/scenes/src/core/SceneDataNode.ts

@@ -2,9 +2,9 @@ import { getDefaultTimeRange, PanelData } from '@grafana/data';
 import { LoadingState } from '@grafana/schema';
 
 import { SceneObjectBase } from './SceneObjectBase';
-import { SceneDataProvider, SceneObjectStatePlain } from './types';
+import { SceneDataProvider, SceneDataState } from './types';
 
-export interface SceneDataNodeState extends SceneObjectStatePlain {
+export interface SceneDataNodeState extends SceneDataState {
   data: PanelData;
 }
 

packages/scenes/src/core/SceneObjectBase.test.ts

@@ -3,10 +3,10 @@ import { SceneVariableSet } from '../variables/sets/SceneVariableSet';
 import { SceneDataNode } from './SceneDataNode';
 import { SceneObjectBase } from './SceneObjectBase';
 import { SceneObjectStateChangedEvent } from './events';
-import { SceneObject, SceneObjectStatePlain } from './types';
+import { SceneObject, SceneObjectState } from './types';
 import { SceneTimeRange } from '../core/SceneTimeRange';
 
-interface TestSceneState extends SceneObjectStatePlain {
+interface TestSceneState extends SceneObjectState {
   name?: string;
   nested?: SceneObject<TestSceneState>;
   children?: TestScene[];

packages/scenes/src/core/SceneObjectBase.tsx

@@ -11,7 +11,7 @@ import {
   SceneActivationHandler,
   SceneDeactivationHandler,
   CancelActivationHandler,
-  SceneObjectStatePlain,
+  SceneObjectState,
 } from './types';
 import { useForceUpdate } from '@grafana/ui';
 
@@ -20,7 +20,7 @@ import { SceneObjectStateChangedEvent } from './events';
 import { cloneSceneObject } from './utils';
 import { SceneVariableDependencyConfigLike } from '../variables/types';
 
-export abstract class SceneObjectBase<TState extends SceneObjectStatePlain = SceneObjectStatePlain>
+export abstract class SceneObjectBase<TState extends SceneObjectState = SceneObjectState>
   implements SceneObject<TState>
 {
   private _isActive = false;
@@ -262,7 +262,7 @@ export abstract class SceneObjectBase<TState extends SceneObjectStatePlain = Sce
  * This hook is always returning model.state instead of a useState that remembers the last state emitted on the subject
  * The reason for this is so that if the model instance change this function will always return the latest state.
  */
-function useSceneObjectState<TState extends SceneObjectStatePlain>(model: SceneObjectBase<TState>): TState {
+function useSceneObjectState<TState extends SceneObjectState>(model: SceneObjectBase<TState>): TState {
   const forceUpdate = useForceUpdate();
 
   useEffect(() => {

packages/scenes/src/core/events.ts

@@ -1,8 +1,8 @@
 import { BusEventWithPayload } from '@grafana/data';
 
-import { SceneObject, SceneObjectStatePlain } from './types';
+import { SceneObject, SceneObjectState } from './types';
 
-export interface SceneObjectStateChangedPayload<TState extends SceneObjectStatePlain = SceneObjectStatePlain> {
+export interface SceneObjectStateChangedPayload<TState extends SceneObjectState = SceneObjectState> {
   prevState: TState;
   newState: TState;
   partialUpdate: Partial<TState>;

packages/scenes/src/core/types.ts

@@ -14,14 +14,14 @@ import {
 
 import { SceneVariableDependencyConfigLike, SceneVariables } from '../variables/types';
 
-export interface SceneObjectStatePlain {
+export interface SceneObjectState {
   key?: string;
   $timeRange?: SceneTimeRangeLike;
   $data?: SceneDataProvider;
   $variables?: SceneVariables;
 }
 
-export interface SceneLayoutItemState extends SceneObjectStatePlain {
+export interface SceneLayoutItemState extends SceneObjectState {
   body: SceneObject | undefined;
 }
 
@@ -44,11 +44,11 @@ export interface SceneComponentProps<T> {
 
 export type SceneComponent<TModel> = (props: SceneComponentProps<TModel>) => React.ReactElement | null;
 
-export interface SceneDataState extends SceneObjectStatePlain {
+export interface SceneDataState extends SceneObjectState {
   data?: PanelData;
 }
 
-export interface SceneObject<TState extends SceneObjectStatePlain = SceneObjectStatePlain> {
+export interface SceneObject<TState extends SceneObjectState = SceneObjectState> {
   /** The current state */
   readonly state: TState;
 
@@ -118,7 +118,7 @@ export type SceneDeactivationHandler = () => void;
  **/
 export type CancelActivationHandler = () => void;
 
-export interface SceneLayoutState extends SceneObjectStatePlain {
+export interface SceneLayoutState extends SceneObjectState {
   children: SceneObject[];
 }
 
@@ -128,7 +128,7 @@ export interface SceneLayout<T extends SceneLayoutState = SceneLayoutState> exte
   getDragClassCancel?(): string;
 }
 
-export interface SceneTimeRangeState extends SceneObjectStatePlain {
+export interface SceneTimeRangeState extends SceneObjectState {
   from: string;
   to: string;
   timeZone: TimeZone;

packages/scenes/src/core/utils.ts

@@ -1,11 +1,11 @@
-import { SceneObjectStatePlain } from './types';
+import { SceneObjectState } from './types';
 
 import { SceneObjectBase } from './SceneObjectBase';
 
 /**
  * Will create new SceneItem with shalled cloned state, but all states items of type SceneObject are deep cloned
  */
-export function cloneSceneObject<T extends SceneObjectBase<TState>, TState extends SceneObjectStatePlain>(
+export function cloneSceneObject<T extends SceneObjectBase<TState>, TState extends SceneObjectState>(
   sceneObject: SceneObjectBase<TState>,
   withState?: Partial<TState>
 ): T {