diff --git a/packages/create-plugin/src/utils/utils.templates.ts b/packages/create-plugin/src/utils/utils.templates.ts
index 9f5de841d..9a5d7ccb4 100644
--- a/packages/create-plugin/src/utils/utils.templates.ts
+++ b/packages/create-plugin/src/utils/utils.templates.ts
@@ -101,9 +101,8 @@ export function getTemplateData(cliArgs?: GenerateCliArgs): TemplateData {
const useCypress =
!usePlaywright && semverLt(grafanaVersion, '11.0.0') && fs.existsSync(path.join(process.cwd(), 'cypress'));
const bundleGrafanaUI = features.bundleGrafanaUI ?? DEFAULT_FEATURE_FLAGS.bundleGrafanaUI;
- const shouldUseReactRouterV6 = (pluginType: string) =>
- features.useReactRouterV6 === true && pluginType === PLUGIN_TYPES.app;
- const getReactRouterVersion = (pluginType: string) => (shouldUseReactRouterV6(pluginType) ? '6.22.0' : '5.2.0');
+ const shouldUseReactRouterV6 = () => features.useReactRouterV6 === true;
+ const getReactRouterVersion = () => (shouldUseReactRouterV6() ? '6.22.0' : '5.2.0');
const isAppType = (pluginType: string) => pluginType === PLUGIN_TYPES.app || pluginType === PLUGIN_TYPES.scenes;
const isNPM = (packageManagerName: string) => packageManagerName === 'npm';
@@ -128,8 +127,8 @@ export function getTemplateData(cliArgs?: GenerateCliArgs): TemplateData {
isNPM: isNPM(packageManagerName),
version: currentVersion,
bundleGrafanaUI,
- useReactRouterV6: shouldUseReactRouterV6(cliArgs.pluginType),
- reactRouterVersion: getReactRouterVersion(cliArgs.pluginType),
+ useReactRouterV6: shouldUseReactRouterV6(),
+ reactRouterVersion: getReactRouterVersion(),
usePlaywright,
useCypress,
};
@@ -153,8 +152,8 @@ export function getTemplateData(cliArgs?: GenerateCliArgs): TemplateData {
isNPM: isNPM(packageManagerName),
version: currentVersion,
bundleGrafanaUI,
- useReactRouterV6: shouldUseReactRouterV6(pluginJson.type),
- reactRouterVersion: getReactRouterVersion(pluginJson.type),
+ useReactRouterV6: shouldUseReactRouterV6(),
+ reactRouterVersion: getReactRouterVersion(),
usePlaywright,
useCypress,
pluginExecutable: pluginJson.executable,
diff --git a/packages/create-plugin/templates/common/_package.json b/packages/create-plugin/templates/common/_package.json
index 238fb824b..e543cdb73 100644
--- a/packages/create-plugin/templates/common/_package.json
+++ b/packages/create-plugin/templates/common/_package.json
@@ -76,7 +76,7 @@
"@grafana/runtime": "^11.3.2",
"@grafana/ui": "^11.3.2",
"@grafana/schema": "^11.3.2",{{#if_eq pluginType "scenesapp"}}
- "@grafana/scenes": "^5.28.1",{{/if_eq}}
+ "@grafana/scenes": "6.0.0--canary.979.12373078054.0",{{/if_eq}}
"react": "18.2.0",
"react-dom": "18.2.0"{{#if isAppType}},
"react-router-dom": "^{{ reactRouterVersion }}",
diff --git a/packages/create-plugin/templates/scenes-app/src/components/Routes/Routes.tsx b/packages/create-plugin/templates/scenes-app/src/components/Routes/Routes.tsx
index 5a18a78e3..197c09818 100644
--- a/packages/create-plugin/templates/scenes-app/src/components/Routes/Routes.tsx
+++ b/packages/create-plugin/templates/scenes-app/src/components/Routes/Routes.tsx
@@ -1,6 +1,5 @@
import React from 'react';
-import { Redirect, Route, Switch } from 'react-router-dom';
-import { prefixRoute } from '../../utils/utils.routing';
+import { Route, Routes as RoutesOriginal } from 'react-router-dom';
import { ROUTES } from '../../constants';
const HomePage = React.lazy(() => import('../../pages/Home/Home'));
const PageWithTabs = React.lazy(() => import('../../pages/WithTabs/WithTabs'));
@@ -9,12 +8,12 @@ const HelloWorld = React.lazy(() => import('../../pages/HelloWorld/HelloWorld'))
export const Routes = () => {
return (
-
-
-
-
-
-
-
+
+ } />
+ } />
+ } />
+ } />
+ } />
+
);
};
diff --git a/packages/create-plugin/templates/scenes-app/src/constants.ts b/packages/create-plugin/templates/scenes-app/src/constants.ts
index 66f947c00..2618467e1 100644
--- a/packages/create-plugin/templates/scenes-app/src/constants.ts
+++ b/packages/create-plugin/templates/scenes-app/src/constants.ts
@@ -2,12 +2,19 @@ import pluginJson from './plugin.json';
export const PLUGIN_BASE_URL = `/a/${pluginJson.id}`;
-export enum ROUTES {
- Home = 'home',
- WithTabs = 'page-with-tabs',
- WithDrilldown = 'page-with-drilldown',
- HelloWorld = 'hello-world',
-}
+export const URLS = {
+ Home: `${PLUGIN_BASE_URL}/home`,
+ WithTabs: `${PLUGIN_BASE_URL}/page-with-tabs`,
+ WithDrilldown: `${PLUGIN_BASE_URL}/page-with-drilldown`,
+ HelloWorld: `${PLUGIN_BASE_URL}/hello-world`,
+};
+
+export const ROUTES = {
+ Home: 'home/*',
+ WithTabs: 'page-with-tabs/*',
+ WithDrilldown: 'page-with-drilldown/*',
+ HelloWorld: 'hello-world/*',
+};
export const DATASOURCE_REF = {
uid: 'gdev-testdata',
diff --git a/packages/create-plugin/templates/scenes-app/src/pages/Home/Home.tsx b/packages/create-plugin/templates/scenes-app/src/pages/Home/Home.tsx
index 2aa00048e..2bd7f51b9 100644
--- a/packages/create-plugin/templates/scenes-app/src/pages/Home/Home.tsx
+++ b/packages/create-plugin/templates/scenes-app/src/pages/Home/Home.tsx
@@ -2,8 +2,7 @@ import React, { useMemo } from 'react';
import { SceneApp, SceneAppPage } from '@grafana/scenes';
import { getBasicScene } from './scenes';
-import { prefixRoute } from '../../utils/utils.routing';
-import { DATASOURCE_REF, ROUTES } from '../../constants';
+import { DATASOURCE_REF, URLS } from '../../constants';
import { config } from '@grafana/runtime';
import { Alert } from '@grafana/ui';
@@ -14,7 +13,8 @@ const getScene = () => {
title: 'Home page',
subTitle:
'This scene showcases a basic scene functionality, including query runner, variable and a custom scene object.',
- url: prefixRoute(ROUTES.Home),
+ url: URLS.Home,
+ routePath: '*',
getScene: () => {
return getBasicScene();
},
diff --git a/packages/create-plugin/templates/scenes-app/src/pages/WithDrilldown/WithDrilldown.tsx b/packages/create-plugin/templates/scenes-app/src/pages/WithDrilldown/WithDrilldown.tsx
index 579faf84d..b9d045680 100644
--- a/packages/create-plugin/templates/scenes-app/src/pages/WithDrilldown/WithDrilldown.tsx
+++ b/packages/create-plugin/templates/scenes-app/src/pages/WithDrilldown/WithDrilldown.tsx
@@ -1,6 +1,5 @@
import React, { useMemo } from 'react';
-import { prefixRoute } from '../../utils/utils.routing';
-import { DATASOURCE_REF, ROUTES } from '../../constants';
+import { DATASOURCE_REF, URLS } from '../../constants';
import {
EmbeddedScene,
SceneApp,
@@ -55,17 +54,19 @@ const getDrilldownsAppScene = () => {
title: 'Page with drilldown',
subTitle: 'This scene showcases a basic drilldown functionality. Interact with room to see room details scene.',
controls: [new SceneTimePicker({ isOnCanvas: true })],
- url: prefixRoute(`${ROUTES.WithDrilldown}`),
+ url: URLS.WithDrilldown,
+ routePath: '*',
hideFromBreadcrumbs: true,
getScene,
drilldowns: [
{
- routePath: prefixRoute(`${ROUTES.WithDrilldown}`) + '/room/:roomName',
+ routePath: 'room/:roomName/*',
getPage(routeMatch, parent) {
const roomName = routeMatch.params.roomName;
return new SceneAppPage({
- url: prefixRoute(`${ROUTES.WithDrilldown}`) + `/room/${roomName}/temperature`,
+ url: `${URLS.WithDrilldown}/room/${roomName}/temperature`,
+ routePath: `room/:roomName/*`,
title: `${roomName} overview`,
subTitle: 'This scene is a particular room drilldown. It implements two tabs to organise the data.',
getParentPage: () => parent,
@@ -75,12 +76,14 @@ const getDrilldownsAppScene = () => {
tabs: [
new SceneAppPage({
title: 'Temperature',
- url: prefixRoute(`${ROUTES.WithDrilldown}`) + `/room/${roomName}/temperature`,
+ url: `${URLS.WithDrilldown}/room/${roomName}/temperature`,
+ routePath: `temperature`,
getScene: () => getTemperatureOverviewScene(roomName),
}),
new SceneAppPage({
title: 'Humidity',
- url: prefixRoute(`${ROUTES.WithDrilldown}`) + `/room/${roomName}/humidity`,
+ url: `${URLS.WithDrilldown}/room/${roomName}/humidity`,
+ routePath: `humidity`,
getScene: () => getHumidityOverviewScene(roomName),
}),
],
diff --git a/packages/create-plugin/templates/scenes-app/src/pages/WithTabs/WithTabs.tsx b/packages/create-plugin/templates/scenes-app/src/pages/WithTabs/WithTabs.tsx
index bdd36351c..717106ab6 100644
--- a/packages/create-plugin/templates/scenes-app/src/pages/WithTabs/WithTabs.tsx
+++ b/packages/create-plugin/templates/scenes-app/src/pages/WithTabs/WithTabs.tsx
@@ -1,7 +1,6 @@
import React, { useMemo } from 'react';
import { SceneApp, SceneAppPage } from '@grafana/scenes';
-import { ROUTES } from '../../constants';
-import { prefixRoute } from '../../utils/utils.routing';
+import { URLS } from '../../constants';
import { getBasicScene } from '../Home/scenes';
const getTab1Scene = () => {
@@ -19,18 +18,21 @@ const getScene = () =>
title: 'Page with tabs',
subTitle: 'This scene showcases a basic tabs functionality.',
// Important: Mind the page route is ambiguous for the tabs to work properly
- url: prefixRoute(`${ROUTES.WithTabs}`),
+ url: URLS.WithTabs,
+ routePath: '*',
hideFromBreadcrumbs: true,
getScene: getTab1Scene,
tabs: [
new SceneAppPage({
title: 'Server names',
- url: prefixRoute(`${ROUTES.WithTabs}`),
+ url: URLS.WithTabs,
+ routePath: '/',
getScene: getTab1Scene,
}),
new SceneAppPage({
title: 'House locations',
- url: prefixRoute(`${ROUTES.WithTabs}/tab-two`),
+ url: `${URLS.WithTabs}/tab-two`,
+ routePath: 'tab-two/*',
getScene: getTab2Scene,
}),
],
diff --git a/packages/create-plugin/templates/scenes-app/src/utils/utils.routing.ts b/packages/create-plugin/templates/scenes-app/src/utils/utils.routing.ts
deleted file mode 100644
index b9e4c9926..000000000
--- a/packages/create-plugin/templates/scenes-app/src/utils/utils.routing.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import { PLUGIN_BASE_URL } from '../constants';
-
-// Prefixes the route with the base URL of the plugin
-export function prefixRoute(route: string): string {
- return `${PLUGIN_BASE_URL}/${route}`;
-}
diff --git a/packages/create-plugin/templates/scenes-app/tests/appNavigation.spec.ts b/packages/create-plugin/templates/scenes-app/tests/appNavigation.spec.ts
index b761a962e..bfaddd61f 100644
--- a/packages/create-plugin/templates/scenes-app/tests/appNavigation.spec.ts
+++ b/packages/create-plugin/templates/scenes-app/tests/appNavigation.spec.ts
@@ -1,19 +1,19 @@
import { test, expect } from './fixtures';
-import { ROUTES } from '../src/constants';
+import { URLS } from '../src/constants';
test.describe('navigating app', () => {
test('page Hello World should render successfully', async ({ gotoPage, page }) => {
- await gotoPage(`/${ROUTES.HelloWorld}`);
+ await gotoPage(`/${URLS.HelloWorld}`);
await expect(page.getByText('Hello world panel')).toBeVisible();
});
test('page With Tabs should render successfully', async ({ gotoPage, page }) => {
- await gotoPage(`/${ROUTES.WithTabs}`);
+ await gotoPage(`/${URLS.WithTabs}`);
await expect(page.getByText('This scene showcases a basic tabs functionality.')).toBeVisible();
});
test('page Home should support an id parameter', async ({ gotoPage, page }) => {
- await gotoPage(`/${ROUTES.Home}`);
+ await gotoPage(`/${URLS.Home}`);
await expect(
page.getByText(
'This scene showcases a basic scene functionality, including query runner, variable and a custom scene object.'
@@ -23,7 +23,7 @@ test.describe('navigating app', () => {
test('page With Drilldown should render sucessfully', async ({ gotoPage, page }) => {
// wait for page to successfully render
- await gotoPage(`/${ROUTES.WithDrilldown}`);
+ await gotoPage(`/${URLS.WithDrilldown}`);
await expect(
page.getByText(
'This scene showcases a basic drilldown functionality. Interact with room to see room details scene.'
diff --git a/packages/create-plugin/templates/scenes-app/tests/fixtures.ts b/packages/create-plugin/templates/scenes-app/tests/fixtures.ts
index 87bd86681..36bae3b2b 100644
--- a/packages/create-plugin/templates/scenes-app/tests/fixtures.ts
+++ b/packages/create-plugin/templates/scenes-app/tests/fixtures.ts
@@ -1,4 +1,5 @@
import { AppConfigPage, AppPage, test as base } from '@grafana/plugin-e2e';
+import { PLUGIN_BASE_URL } from '../src/constants';
import pluginJson from '../src/plugin.json';
type AppTestFixture = {
@@ -16,11 +17,11 @@ export const test = base.extend({
gotoPage: async ({ gotoAppPage }, use) => {
await use((path) =>
gotoAppPage({
- path,
+ path: path?.replace(PLUGIN_BASE_URL, ''),
pluginId: pluginJson.id,
})
);
},
});
-export { expect } from '@grafana/plugin-e2e';
\ No newline at end of file
+export { expect } from '@grafana/plugin-e2e';