Feature: Updates Scenes templates

packages/create-plugin/templates/scenes-app/src/components/App/App.tsx

@@ -1,12 +1,50 @@
 import React from 'react';
+import { SceneApp, useSceneApp } from '@grafana/scenes';
 import { AppRootProps } from '@grafana/data';
+import { config } from '@grafana/runtime';
+import { Alert } from '@grafana/ui';
+import { DATASOURCE_REF } from '../../constants';
 import { PluginPropsContext } from '../../utils/utils.plugin';
-import { Routes } from '../Routes/Routes';
+import { helloWorldPage } from '../../pages/HelloWorld/helloWorldPage';
+import { homePage } from '../../pages/Home/homePage';
+import { withDrilldownPage } from '../../pages/WithDrilldown/withDrilldownPage';
+import { withTabsPage } from '../../pages/WithTabs/withTabsPage';
+
+function getSceneApp() {
+  return new SceneApp({
+    pages: [helloWorldPage, homePage, withDrilldownPage, withTabsPage],
+    urlSyncOptions: {
+      updateUrlOnInit: true,
+      createBrowserHistorySteps: true,
+    },
+  });
+}
+
+function AppWithScenes() {
+  const scene = useSceneApp(getSceneApp);
+
+  return (
+    <>
+      {!config.datasources[DATASOURCE_REF.uid] && (
+        <Alert title={`Missing ${DATASOURCE_REF.uid} datasource`}>
+          These demos depend on <b>testdata</b> datasource: <code>{JSON.stringify(DATASOURCE_REF)}</code>. See{' '}
+          <a href="https://github.com/grafana/grafana/tree/main/devenv#set-up-your-development-environment">
+            https://github.com/grafana/grafana/tree/main/devenv#set-up-your-development-environment
+          </a>{' '}
+          for more details.
+        </Alert>
+      )}
+
+      <scene.Component model={scene} />
+    </>
+  );
+}
+
 
 function App(props: AppRootProps) {
   return (
     <PluginPropsContext.Provider value={props}>
-      <Routes />
+      <AppWithScenes />
     </PluginPropsContext.Provider>
   );
 }

packages/create-plugin/templates/scenes-app/src/pages/HelloWorld/helloWorldPage.ts

@@ -0,0 +1,10 @@
+import { SceneAppPage } from '@grafana/scenes';
+import { helloWorldScene } from './helloWorldScene';
+import { prefixRoute } from '../../utils/utils.routing';
+import { ROUTES } from '../../constants';
+
+export const helloWorldPage = new SceneAppPage({
+  title: 'Hello World',
+  url: prefixRoute(ROUTES.HelloWorld),
+  getScene: helloWorldScene,
+});

packages/create-plugin/templates/scenes-app/src/pages/HelloWorld/helloWorldScene.tsx → packages/create-plugin/templates/scenes-app/src/pages/HelloWorld/helloWorldScene.ts

@@ -1,6 +1,6 @@
 import { EmbeddedScene, SceneFlexLayout, SceneFlexItem, PanelBuilders } from '@grafana/scenes';
 
-export function getScene() {
+export function helloWorldScene() {
   return new EmbeddedScene({
     body: new SceneFlexLayout({
       children: [

packages/create-plugin/templates/scenes-app/src/pages/Home/homePage.ts

@@ -0,0 +1,12 @@
+import { SceneAppPage } from '@grafana/scenes';
+import { homeScene } from './homeScene';
+import { prefixRoute } from '../../utils/utils.routing';
+import { ROUTES } from '../../constants';
+
+export const homePage = new SceneAppPage({
+  title: 'Home page',
+  url: prefixRoute(ROUTES.Home),
+  subTitle:
+    'This scene showcases a basic scene functionality, including query runner, variable and a custom scene object.',
+  getScene: () => homeScene(),
+});

packages/create-plugin/templates/scenes-app/src/pages/Home/scenes.tsx → packages/create-plugin/templates/scenes-app/src/pages/Home/homeScene.ts

@@ -15,7 +15,7 @@ import {
 import { DATASOURCE_REF } from '../../constants';
 import { CustomSceneObject } from './CustomSceneObject';
 
-export function getBasicScene(templatised = true, seriesToShow = '__server_names') {
+export function homeScene(templatised = true, seriesToShow = '__server_names') {
   const timeRange = new SceneTimeRange({
     from: 'now-6h',
     to: 'now',

packages/create-plugin/templates/scenes-app/src/pages/WithDrilldown/RoomTemperatureStat.tsx

@@ -0,0 +1,16 @@
+import { ReducerID } from '@grafana/data';
+import { PanelBuilders, SceneDataTransformer } from '@grafana/scenes';
+
+export function RoomTemperatureStat(reducers: ReducerID[]) {
+  const data = new SceneDataTransformer({
+    transformations: [
+      {
+        id: 'reduce',
+        options: {
+          reducers,
+        },
+      },
+    ],
+  });
+  return PanelBuilders.stat().setData(data).setUnit('celsius').build();
+}

packages/create-plugin/templates/scenes-app/src/pages/WithDrilldown/RoomsTemperatureStat.tsx

@@ -0,0 +1,41 @@
+import { PanelBuilders, SceneByFrameRepeater, SceneDataNode, SceneFlexItem, SceneFlexLayout } from '@grafana/scenes';
+
+export function RoomsTemperatureStat() {
+  const stat = PanelBuilders.stat()
+    .setUnit('celsius')
+    .setLinks([
+      {
+        title: 'Go to room temperature overview',
+        url: '${__url.path}/room/${__field.name}/temperature${__url.params}',
+      },
+      {
+        title: 'Go to room humidity overview',
+        url: '${__url.path}/room/${__field.name}/humidity${__url.params}',
+      },
+    ]);
+
+  return new SceneByFrameRepeater({
+    body: new SceneFlexLayout({
+      direction: 'row',
+      wrap: 'wrap',
+      children: [],
+    }),
+    getLayoutChild: (data, frame) => {
+      return new SceneFlexItem({
+        height: '50%',
+        minWidth: '20%',
+        body: stat
+          .setTitle(frame.name || '')
+          .setData(
+            new SceneDataNode({
+              data: {
+                ...data,
+                series: [frame],
+              },
+            })
+          )
+          .build(),
+      });
+    },
+  });
+}

packages/create-plugin/templates/scenes-app/src/pages/WithDrilldown/panels.tsx → packages/create-plugin/templates/scenes-app/src/pages/WithDrilldown/RoomsTemperatureTable.tsx

@@ -1,15 +1,7 @@
-import { ReducerID } from '@grafana/data';
-import {
-  PanelBuilders,
-  SceneByFrameRepeater,
-  SceneDataNode,
-  SceneDataTransformer,
-  SceneFlexItem,
-  SceneFlexLayout,
-} from '@grafana/scenes';
+import { PanelBuilders, SceneDataTransformer } from '@grafana/scenes';
 import { TableCellBackgroundDisplayMode, TableCellDisplayMode, ThresholdsMode } from '@grafana/schema';
 
-export function getRoomsTemperatureTable() {
+export function RoomsTemperatureTable() {
   const data = new SceneDataTransformer({
     transformations: [
       {
@@ -75,57 +67,3 @@ export function getRoomsTemperatureTable() {
     )
     .build();
 }
-
-export function getRoomsTemperatureStats() {
-  const stat = PanelBuilders.stat()
-    .setUnit('celsius')
-    .setLinks([
-      {
-        title: 'Go to room temperature overview',
-        url: '${__url.path}/room/${__field.name}/temperature${__url.params}',
-      },
-      {
-        title: 'Go to room humidity overview',
-        url: '${__url.path}/room/${__field.name}/humidity${__url.params}',
-      },
-    ]);
-
-  return new SceneByFrameRepeater({
-    body: new SceneFlexLayout({
-      direction: 'row',
-      wrap: 'wrap',
-      children: [],
-    }),
-    getLayoutChild: (data, frame) => {
-      return new SceneFlexItem({
-        height: '50%',
-        minWidth: '20%',
-        body: stat
-          .setTitle(frame.name || '')
-          .setData(
-            new SceneDataNode({
-              data: {
-                ...data,
-                series: [frame],
-              },
-            })
-          )
-          .build(),
-      });
-    },
-  });
-}
-
-export function getRoomTemperatureStatPanel(reducers: ReducerID[]) {
-  const data = new SceneDataTransformer({
-    transformations: [
-      {
-        id: 'reduce',
-        options: {
-          reducers,
-        },
-      },
-    ],
-  });
-  return PanelBuilders.stat().setData(data).setUnit('celsius').build();
-}