ScenesReact: Use new react components and hooks from inside existing EmbeddedScenes

Use case

To help migration
To support mixing both forms

Example:

export function getInteropDemo(defaults: SceneAppPageState) {
  return new SceneAppPage({
    ...defaults,
    subTitle: 'Testing using the hooks and plain react components from normal scene',
    getScene: () => {
      return new EmbeddedSceneWithContext({
        ...getEmbeddedSceneDefaults(),
        key: 'Flex layout embedded scene',
        body: new SceneFlexLayout({
          direction: 'column',
          children: [
            new SceneFlexItem({
              body: new VizPanel({
                title: 'Graph',
                pluginId: 'timeseries',
                $data: getQueryRunnerWithRandomWalkQuery({}),
              }),
            }),
            new SceneFlexItem({
              body: new CustomSceneObject({}),
            }),
          ],
        }),
      });
    },
  });
}

class CustomSceneObject extends SceneObjectBase<SceneObjectState> {
  static Component = ({ model }: SceneComponentProps<CustomSceneObject>) => {
    const [timeRange, _] = useTimeRange();

    return (
      <Stack direction="column">
        <div>Time hook: {timeRange.from.toString()}</div>
        <DemoVizLayout>
          <PlainGraphWithRandomWalk title="Visualization using React VizPanel with data from useQueryRunner" />
        </DemoVizLayout>
      </Stack>
    );
  };
}

grafana / scenes

ScenesReact: Use new react components and hooks from inside existing EmbeddedScenes #777