@grafana/create-plugin 1.4.0 → 1.4.1-canary.250.5b7466f.0

package/dist/commands/generate.plopfile.js

@@ -71,7 +71,7 @@ function default_1(plop) {
             {
                 name: 'pluginType',
                 type: 'list',
-                choices: [constants_1.PLUGIN_TYPES.app, constants_1.PLUGIN_TYPES.datasource, constants_1.PLUGIN_TYPES.panel],
+                choices: [constants_1.PLUGIN_TYPES.app, constants_1.PLUGIN_TYPES.datasource, constants_1.PLUGIN_TYPES.panel, constants_1.PLUGIN_TYPES.scenes],
                 message: 'What type of plugin would you like?'
             },
             {
@@ -100,11 +100,13 @@ function default_1(plop) {
             var pluginId = (0, utils_handlebars_1.normalizeId)(pluginName, orgName, pluginType);
             var _b = (0, utils_packageManager_1.getPackageManagerFromUserAgent)(), packageManagerName = _b.packageManagerName, packageManagerVersion = _b.packageManagerVersion;
             var packageManagerInstallCmd = (0, utils_packageManager_1.getPackageManagerInstallCmd)(packageManagerName);
+            var isAppType = pluginType === constants_1.PLUGIN_TYPES.app || pluginType === constants_1.PLUGIN_TYPES.scenes;
             var templateData = {
                 pluginId: pluginId,
                 packageManagerName: packageManagerName,
                 packageManagerInstallCmd: packageManagerInstallCmd,
-                packageManagerVersion: packageManagerVersion
+                packageManagerVersion: packageManagerVersion,
+                isAppType: isAppType
             };
             var commonActions = getActionsForTemplateFolder({
                 folderPath: constants_1.TEMPLATE_PATHS.common,
@@ -113,11 +115,12 @@ function default_1(plop) {
             });
             var pluginTypeSpecificActions = getActionsForTemplateFolder({
                 folderPath: constants_1.TEMPLATE_PATHS[pluginType],
-                exportPath: exportPath
+                exportPath: exportPath,
+                templateData: templateData
             });
-            var backendFolderPath = pluginType === constants_1.PLUGIN_TYPES.app ? constants_1.TEMPLATE_PATHS.backendApp : constants_1.TEMPLATE_PATHS.backend;
+            var backendFolderPath = isAppType ? constants_1.TEMPLATE_PATHS.backendApp : constants_1.TEMPLATE_PATHS.backend;
             var backendActions = hasBackend
-                ? getActionsForTemplateFolder({ folderPath: backendFolderPath, exportPath: exportPath })
+                ? getActionsForTemplateFolder({ folderPath: backendFolderPath, exportPath: exportPath, templateData: templateData })
                 : [];
             var pluginActions = __spreadArray(__spreadArray(__spreadArray([], backendActions, true), pluginTypeSpecificActions, true), commonActions, true).reduce(function (acc, file) {
                 var actionExists = acc.find(function (f) { return f.path === file.path; });
@@ -163,7 +166,6 @@ function getActionsForReadme(_a) {
     ];
 }
 function replacePatternWithTemplateInReadme(pattern, partialsFile, exportPath, templateData) {
-    if (templateData === void 0) { templateData = {}; }
     return {
         type: 'modify',
         path: path_1["default"].join(exportPath, 'README.md'),
@@ -174,7 +176,7 @@ function replacePatternWithTemplateInReadme(pattern, partialsFile, exportPath, t
     };
 }
 function getActionsForTemplateFolder(_a) {
-    var folderPath = _a.folderPath, exportPath = _a.exportPath, _b = _a.templateData, templateData = _b === void 0 ? {} : _b;
+    var folderPath = _a.folderPath, exportPath = _a.exportPath, templateData = _a.templateData;
     var files = glob_1["default"].sync("".concat(folderPath, "/**"), { dot: true });
     if (templateData.packageManagerName !== 'pnpm') {
         files = files.filter(function (file) { return path_1["default"].basename(file) !== 'npmrc'; });

package/dist/constants.js

@@ -14,6 +14,7 @@ exports.PARTIALS_DIR = path_1["default"].join(exports.TEMPLATES_DIR, '_partials'
 exports.FIXTURES_PATH = path_1["default"].join(__dirname, '..', 'fixtures');
 exports.TEMPLATE_PATHS = {
     app: path_1["default"].join(exports.TEMPLATES_DIR, 'app'),
+    scenesapp: path_1["default"].join(exports.TEMPLATES_DIR, 'scenes-app'),
     backend: path_1["default"].join(exports.TEMPLATES_DIR, 'backend'),
     backendApp: path_1["default"].join(exports.TEMPLATES_DIR, 'backend-app'),
     common: path_1["default"].join(exports.TEMPLATES_DIR, 'common'),
@@ -28,6 +29,7 @@ var PLUGIN_TYPES;
     PLUGIN_TYPES["panel"] = "panel";
     PLUGIN_TYPES["datasource"] = "datasource";
     PLUGIN_TYPES["secretsmanager"] = "secretsmanager";
+    PLUGIN_TYPES["scenes"] = "scenesapp";
 })(PLUGIN_TYPES = exports.PLUGIN_TYPES || (exports.PLUGIN_TYPES = {}));
 exports.EXTRA_TEMPLATE_VARIABLES = {
     grafanaVersion: '9.5.2'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@grafana/create-plugin",
-  "version": "1.4.0",
+  "version": "1.4.1-canary.250.5b7466f.0",
   "main": "index.js",
   "repository": {
     "directory": "packages/create-plugin",
@@ -19,9 +19,11 @@
     "build": "yarn clean && tsc && chmod +x ./dist/bin/run.js",
     "dev": "CREATE_PLUGIN_DEV=true nodemon --exec 'tsc'",
     "dev-app": "CREATE_PLUGIN_DEV=true nodemon --exec 'yarn generate-app'",
+    "dev-scenes-app": "CREATE_PLUGIN_DEV=true nodemon --exec 'yarn generate-scenes-app'",
     "dev-panel": "CREATE_PLUGIN_DEV=true nodemon --exec 'yarn generate-panel'",
     "dev-datasource": "CREATE_PLUGIN_DEV=true nodemon --exec 'yarn generate-datasource'",
     "generate-app": "tsc && yarn clean-generated && CREATE_PLUGIN_DEV=true node ./scripts/generate-app.js",
+    "generate-scenes-app": "tsc && yarn clean-generated && CREATE_PLUGIN_DEV=true node ./scripts/generate-scenes-app.js",
     "generate-app-backend": "tsc && yarn clean-generated && CREATE_PLUGIN_DEV=true node ./scripts/generate-app-backend.js",
     "generate-panel": "tsc && yarn clean-generated && CREATE_PLUGIN_DEV=true node ./scripts/generate-panel.js",
     "generate-datasource": "tsc && yarn clean-generated && CREATE_PLUGIN_DEV=true node ./scripts/generate-datasource-without-backend.js",
@@ -64,5 +66,5 @@
   "engines": {
     "node": ">=16"
   },
-  "gitHead": "bd765873e928d1c305627e3b7224f3408db42863"
+  "gitHead": "5b7466f9383e929fb1efd68aae3c29e4e64db20e"
 }

package/scripts/generate-scenes-app.js

@@ -0,0 +1,24 @@
+const nodePlop = require('node-plop');
+const path = require('path');
+const fs = require('fs');
+
+async function generate() {
+  const plopFile = path.join(__dirname, '../dist/commands/generate.plopfile.js');
+  if (!fs.existsSync(plopFile)) {
+    console.error('Run build first');
+    process.exit(1);
+  }
+  const plop = await nodePlop(plopFile);
+  const generator = plop.getGenerator('create-plugin');
+  await generator.runActions({
+    pluginName: 'my-plugin',
+    orgName: 'my-org',
+    pluginDescription: 'Auto-generated scenes app',
+    pluginType: 'scenesapp',
+    hasBackend: false,
+    hasGithubWorkflows: true,
+    hasGithubLevitateWorkflow: true,
+  });
+}
+
+generate();

package/src/commands/generate.plopfile.ts

@@ -8,7 +8,7 @@ import { getExportPath } from '../utils/utils.path';
 import { getPackageManagerInstallCmd, getPackageManagerFromUserAgent } from '../utils/utils.packageManager';
 import { printGenerateSuccessMessage } from './generate-actions/print-success-message';
 import { updateGoSdkAndModules } from './generate-actions/update-go-sdk-and-packages';
-import { CliArgs } from './types';
+import { CliArgs, TemplateData } from './types';
 
 // Plopfile API documentation: https://plopjs.com/documentation/#plopfile-api
 export default function (plop: NodePlopAPI) {
@@ -52,7 +52,7 @@ export default function (plop: NodePlopAPI) {
       {
         name: 'pluginType',
         type: 'list',
-        choices: [PLUGIN_TYPES.app, PLUGIN_TYPES.datasource, PLUGIN_TYPES.panel],
+        choices: [PLUGIN_TYPES.app, PLUGIN_TYPES.datasource, PLUGIN_TYPES.panel, PLUGIN_TYPES.scenes],
         message: 'What type of plugin would you like?',
       },
       {
@@ -88,11 +88,13 @@ export default function (plop: NodePlopAPI) {
       // Support the users package manager of choice.
       const { packageManagerName, packageManagerVersion } = getPackageManagerFromUserAgent();
       const packageManagerInstallCmd = getPackageManagerInstallCmd(packageManagerName);
-      const templateData = {
+      const isAppType = pluginType === PLUGIN_TYPES.app || pluginType === PLUGIN_TYPES.scenes;
+      const templateData: TemplateData = {
         pluginId,
         packageManagerName,
         packageManagerInstallCmd,
         packageManagerVersion,
+        isAppType,
       };
       // Copy over files that are shared between plugins types
       const commonActions = getActionsForTemplateFolder({
@@ -105,12 +107,13 @@ export default function (plop: NodePlopAPI) {
       const pluginTypeSpecificActions = getActionsForTemplateFolder({
         folderPath: TEMPLATE_PATHS[pluginType],
         exportPath,
+        templateData,
       });
 
       // Copy over backend-specific files (if selected)
-      const backendFolderPath = pluginType === PLUGIN_TYPES.app ? TEMPLATE_PATHS.backendApp : TEMPLATE_PATHS.backend;
+      const backendFolderPath = isAppType ? TEMPLATE_PATHS.backendApp : TEMPLATE_PATHS.backend;
       const backendActions = hasBackend
-        ? getActionsForTemplateFolder({ folderPath: backendFolderPath, exportPath })
+        ? getActionsForTemplateFolder({ folderPath: backendFolderPath, exportPath, templateData })
         : [];
 
       // Common, pluginType and backend actions can contain different templates for the same destination.
@@ -168,7 +171,7 @@ function getActionsForReadme({
   templateData,
 }: {
   exportPath: string;
-  templateData: Record<string, string>;
+  templateData: TemplateData;
 }): ModifyActionConfig[] {
   return [
     replacePatternWithTemplateInReadme(
@@ -196,7 +199,7 @@ function replacePatternWithTemplateInReadme(
   pattern: string,
   partialsFile: string,
   exportPath: string,
-  templateData: Record<string, string> = {}
+  templateData: TemplateData
 ): ModifyActionConfig {
   return {
     type: 'modify',
@@ -216,11 +219,11 @@ function replacePatternWithTemplateInReadme(
 function getActionsForTemplateFolder({
   folderPath,
   exportPath,
-  templateData = {},
+  templateData,
 }: {
   folderPath: string;
   exportPath: string;
-  templateData?: Record<string, string>;
+  templateData: TemplateData;
 }) {
   let files = glob.sync(`${folderPath}/**`, { dot: true });
 

package/src/commands/types.ts

@@ -9,3 +9,11 @@ export type CliArgs = {
   hasGithubWorkflows: boolean;
   hasGithubLevitateWorkflow: boolean;
 };
+
+export type TemplateData = {
+  pluginId: string;
+  packageManagerName: string;
+  packageManagerInstallCmd: string;
+  packageManagerVersion: string;
+  isAppType: boolean;
+};

package/src/constants.ts

@@ -18,6 +18,7 @@ export const FIXTURES_PATH = path.join(__dirname, '..', 'fixtures');
 
 export const TEMPLATE_PATHS: Record<string, string> = {
   app: path.join(TEMPLATES_DIR, 'app'),
+  scenesapp: path.join(TEMPLATES_DIR, 'scenes-app'),
   backend: path.join(TEMPLATES_DIR, 'backend'),
   backendApp: path.join(TEMPLATES_DIR, 'backend-app'),
   common: path.join(TEMPLATES_DIR, 'common'),
@@ -32,6 +33,7 @@ export enum PLUGIN_TYPES {
   panel = 'panel',
   datasource = 'datasource',
   secretsmanager = 'secretsmanager',
+  scenes = 'scenesapp',
 }
 
 // This gets merged into variables coming from user prompts (when using Plop) or any other dynamic variables,

package/templates/common/package.json

@@ -30,8 +30,8 @@
     "@testing-library/react": "^12.1.4",
     "@types/jest": "^29.5.0",
     "@types/lodash": "^4.14.194",
-    "@types/node": "^18.15.11",{{#if_eq pluginType "app"}}
-    "@types/react-router-dom": "^5.3.3",{{/if_eq}}
+    "@types/node": "^18.15.11",{{#if isAppType}}
+    "@types/react-router-dom": "^5.3.3",{{/if}}
     "copy-webpack-plugin": "^11.0.0",
     "css-loader": "^6.7.3",
     "eslint-webpack-plugin": "^4.0.1",
@@ -60,11 +60,12 @@
     "@emotion/css": "^11.1.3",
     "@grafana/data": "{{ grafanaVersion }}",
     "@grafana/runtime": "{{ grafanaVersion }}",
-    "@grafana/ui": "{{ grafanaVersion }}",
+    "@grafana/ui": "{{ grafanaVersion }}",{{#if_eq pluginType "scenesapp"}}
+    "@grafana/scenes": "^0.7.0",{{/if_eq}}
     "react": "17.0.2",
-    "react-dom": "17.0.2",{{#if_eq pluginType "app"}}
+    "react-dom": "17.0.2",{{#if isAppType}}
     "react-router-dom": "^5.2.0",
-    "rxjs": "7.8.0",{{/if_eq}}
+    "rxjs": "7.8.0",{{/if}}
     "tslib": "2.5.0"
   },
   "packageManager": "{{ packageManagerName }}@{{ packageManagerVersion }}"

package/templates/scenes-app/README.md

@@ -0,0 +1,23 @@
+# Grafana Scenes App Plugin Template
+
+This template is a starting point for building an app plugin with [scenes](https://grafana.github.io/scenes) for Grafana.
+
+## What are Grafana app plugins?
+
+App plugins can let you create a custom out-of-the-box monitoring experience by custom pages, nested datasources and panel plugins.
+
+## What is @grafana/scenes
+
+[@grafana/scenes](https://github.com/grafana/scenes) is a framework to enable versatile app plugins implementation. It provides an easy way to build apps that resemble Grafana's dashboarding experience, including template variables support, versatile layouts, panels rendering and more.
+
+To learn more about @grafana/scenes usage please refer to [documentation](https://grafana.github.io/scenes)
+
+## What does this template contain?
+
+1. An example of a simple scene. See [Home scene](./src/pages/Home/Home.tsx)
+1. An example of a scene with tabs. See [Scene with tabs](./src/pages/WithTabs/WithTabs.tsx)
+1. An example of a scene with drill down. See [Scene with drill down](./src/pages/WithDrilldown/WithDrilldown.tsx)
+
+-- INSERT FRONTEND GETTING STARTED --
+
+-- INSERT DISTRIBUTING YOUR PLUGIN --

package/templates/scenes-app/provisioning/datasources/default.yaml

@@ -0,0 +1,6 @@
+apiVersion: 1
+
+datasources:
+  - name: gdev-testdata
+    isDefault: true
+    type: testdata

package/templates/scenes-app/src/components/App/App.tsx

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { AppRootProps } from '@grafana/data';
+import { PluginPropsContext } from '../../utils/utils.plugin';
+import { Routes } from '../Routes';
+
+export class App extends React.PureComponent<AppRootProps> {
+  render() {
+    return (
+      <PluginPropsContext.Provider value={this.props}>
+        <Routes />
+      </PluginPropsContext.Provider>
+    );
+  }
+}

package/templates/scenes-app/src/components/App/index.tsx

@@ -0,0 +1 @@
+export * from './App';

package/templates/scenes-app/src/components/AppConfig/AppConfig.tsx

@@ -0,0 +1,193 @@
+import React, { useState, ChangeEvent } from 'react';
+import { Button, Field, Input, useStyles2, FieldSet } from '@grafana/ui';
+import { PluginConfigPageProps, AppPluginMeta, PluginMeta, GrafanaTheme2 } from '@grafana/data';
+import { getBackendSrv, locationService } from '@grafana/runtime';
+import { css } from '@emotion/css';
+import { SecretInput } from '../SecretInput';
+import { testIds } from '../testIds';
+
+export type JsonData = {
+  apiUrl?: string;
+  isApiKeySet?: boolean;
+};
+
+type State = {
+  // The URL to reach our custom API.
+  apiUrl: string;
+  // Tells us if the API key secret is set.
+  // Set to `true` ONLY if it has already been set and haven't been changed.
+  // (We unfortunately need an auxiliray variable for this, as `secureJsonData` is never exposed to the browser after it is set)
+  isApiKeySet: boolean;
+  // An secret key for our custom API.
+  apiKey: string;
+};
+
+interface Props extends PluginConfigPageProps<AppPluginMeta<JsonData>> {}
+
+export const AppConfig = ({ plugin }: Props) => {
+  const s = useStyles2(getStyles);
+  const { enabled, pinned, jsonData } = plugin.meta;
+  const [state, setState] = useState<State>({
+    apiUrl: jsonData?.apiUrl || '',
+    apiKey: '',
+    isApiKeySet: Boolean(jsonData?.isApiKeySet),
+  });
+
+  const onResetApiKey = () =>
+    setState({
+      ...state,
+      apiKey: '',
+      isApiKeySet: false,
+    });
+
+  const onChangeApiKey = (event: ChangeEvent<HTMLInputElement>) => {
+    setState({
+      ...state,
+      apiKey: event.target.value.trim(),
+    });
+  };
+
+  const onChangeApiUrl = (event: ChangeEvent<HTMLInputElement>) => {
+    setState({
+      ...state,
+      apiUrl: event.target.value.trim(),
+    });
+  };
+
+  return (
+    <div data-testid={testIds.appConfig.container}>
+      {/* ENABLE / DISABLE PLUGIN */}
+      <FieldSet label="Enable / Disable">
+        {!enabled && (
+          <>
+            <div className={s.colorWeak}>The plugin is currently not enabled.</div>
+            <Button
+              className={s.marginTop}
+              variant="primary"
+              onClick={() =>
+                updatePluginAndReload(plugin.meta.id, {
+                  enabled: true,
+                  pinned: true,
+                  jsonData,
+                })
+              }
+            >
+              Enable plugin
+            </Button>
+          </>
+        )}
+
+        {/* Disable the plugin */}
+        {enabled && (
+          <>
+            <div className={s.colorWeak}>The plugin is currently enabled.</div>
+            <Button
+              className={s.marginTop}
+              variant="destructive"
+              onClick={() =>
+                updatePluginAndReload(plugin.meta.id, {
+                  enabled: false,
+                  pinned: false,
+                  jsonData,
+                })
+              }
+            >
+              Disable plugin
+            </Button>
+          </>
+        )}
+      </FieldSet>
+
+      {/* CUSTOM SETTINGS */}
+      <FieldSet label="API Settings" className={s.marginTopXl}>
+        {/* API Key */}
+        <Field label="API Key" description="A secret key for authenticating to our custom API">
+          <SecretInput
+            width={60}
+            data-testid={testIds.appConfig.apiKey}
+            id="api-key"
+            value={state?.apiKey}
+            isConfigured={state.isApiKeySet}
+            placeholder={'Your secret API key'}
+            onChange={onChangeApiKey}
+            onReset={onResetApiKey}
+          />
+        </Field>
+
+        {/* API Url */}
+        <Field label="API Url" description="" className={s.marginTop}>
+          <Input
+            width={60}
+            id="api-url"
+            data-testid={testIds.appConfig.apiUrl}
+            label={`API Url`}
+            value={state?.apiUrl}
+            placeholder={`E.g.: http://mywebsite.com/api/v1`}
+            onChange={onChangeApiUrl}
+          />
+        </Field>
+
+        <div className={s.marginTop}>
+          <Button
+            type="submit"
+            data-testid={testIds.appConfig.submit}
+            onClick={() =>
+              updatePluginAndReload(plugin.meta.id, {
+                enabled,
+                pinned,
+                jsonData: {
+                  apiUrl: state.apiUrl,
+                  isApiKeySet: true,
+                },
+                // This cannot be queried later by the frontend.
+                // We don't want to override it in case it was set previously and left untouched now.
+                secureJsonData: state.isApiKeySet
+                  ? undefined
+                  : {
+                      apiKey: state.apiKey,
+                    },
+              })
+            }
+            disabled={Boolean(!state.apiUrl || (!state.isApiKeySet && !state.apiKey))}
+          >
+            Save API settings
+          </Button>
+        </div>
+      </FieldSet>
+    </div>
+  );
+};
+
+const getStyles = (theme: GrafanaTheme2) => ({
+  colorWeak: css`
+    color: ${theme.colors.text.secondary};
+  `,
+  marginTop: css`
+    margin-top: ${theme.spacing(3)};
+  `,
+  marginTopXl: css`
+    margin-top: ${theme.spacing(6)};
+  `,
+});
+
+const updatePluginAndReload = async (pluginId: string, data: Partial<PluginMeta<JsonData>>) => {
+  try {
+    await updatePlugin(pluginId, data);
+
+    // Reloading the page as the changes made here wouldn't be propagated to the actual plugin otherwise.
+    // This is not ideal, however unfortunately currently there is no supported way for updating the plugin state.
+    locationService.reload();
+  } catch (e) {
+    console.error('Error while updating the plugin', e);
+  }
+};
+
+export const updatePlugin = async (pluginId: string, data: Partial<PluginMeta>) => {
+  const response = await getBackendSrv().datasourceRequest({
+    url: `/api/plugins/${pluginId}/settings`,
+    method: 'POST',
+    data,
+  });
+
+  return response?.data;
+};

package/templates/scenes-app/src/components/AppConfig/index.tsx

@@ -0,0 +1 @@
+export * from './AppConfig';

package/templates/scenes-app/src/components/Routes/Routes.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { Redirect, Route, Switch } from 'react-router-dom';
+import { HomePage } from '../../pages/Home';
+import { PageWithTabs } from '../../pages/WithTabs';
+import { WithDrilldown } from '../../pages/WithDrilldown';
+import { prefixRoute } from '../../utils/utils.routing';
+import { ROUTES } from '../../constants';
+
+export const Routes = () => {
+  return (
+    <Switch>
+      <Route path={prefixRoute(`${ROUTES.WithTabs}`)} component={PageWithTabs} />
+      <Route path={prefixRoute(`${ROUTES.WithDrilldown}`)} component={WithDrilldown} />
+      <Route path={prefixRoute(`${ROUTES.Home}`)} component={HomePage} />
+      <Redirect to={prefixRoute(ROUTES.Home)} />
+    </Switch>
+  );
+};

package/templates/scenes-app/src/components/Routes/index.tsx

@@ -0,0 +1 @@
+export * from './Routes';

package/templates/scenes-app/src/components/SecretInput/SecretInput.tsx

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { Input, HorizontalGroup, Button } from '@grafana/ui';
+
+type Props = React.ComponentProps<typeof Input> & {
+  /** Defines if the password is already set or not. (It is needed as in some cases the backend doesn't send back the actual password) */
+  isConfigured: boolean;
+  /** Called when the user clicks on the "Reset" button */
+  onReset: () => void;
+};
+
+// This replaces the "LegacyForms.SecretFormField" component from @grafana/ui, so we can start using the newer form components.
+export const SecretInput = ({ isConfigured, onReset, ...props }: Props) => {
+  if (isConfigured) {
+    return (
+      <HorizontalGroup>
+        <Input {...props} type="text" disabled={true} value="configured" />
+        <Button onClick={onReset} variant="secondary">
+          Reset
+        </Button>
+      </HorizontalGroup>
+    );
+  }
+
+  return <Input {...props} type="password" />;
+};

package/templates/scenes-app/src/components/SecretInput/index.tsx

@@ -0,0 +1 @@
+export * from './SecretInput';

package/templates/scenes-app/src/components/testIds.ts

@@ -0,0 +1,22 @@
+export const testIds = {
+  appConfig: {
+    container: 'data-testid ac-container',
+    apiKey: 'data-testid ac-api-key',
+    apiUrl: 'data-testid ac-api-url',
+    submit: 'data-testid ac-submit-form',
+  },
+  pageOne: {
+    container: 'data-testid pg-one-container',
+    navigateToFour: 'data-testid navigate-to-four',
+  },
+  pageTwo: {
+    container: 'data-testid pg-two-container',
+  },
+  pageThree: {
+    container: 'data-testid pg-three-container',
+  },
+  pageFour: {
+    container: 'data-testid pg-four-container',
+    navigateBack: 'data-testid navigate-back',
+  },
+};

package/templates/scenes-app/src/constants.ts

@@ -0,0 +1,14 @@
+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',
+}
+
+export const DATASOURCE_REF = {
+  uid: 'gdev-testdata',
+  type: 'testdata',
+};

package/templates/scenes-app/src/img/logo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 81.9 71.52"><defs><style>.cls-1{fill:#84aff1;}.cls-2{fill:#3865ab;}.cls-3{fill:url(#linear-gradient);}</style><linearGradient id="linear-gradient" x1="42.95" y1="16.88" x2="81.9" y2="16.88" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#f2cc0c"/><stop offset="1" stop-color="#ff9830"/></linearGradient></defs><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="M55.46,62.43A2,2,0,0,1,54.07,59l4.72-4.54a2,2,0,0,1,2.2-.39l3.65,1.63,3.68-3.64a2,2,0,1,1,2.81,2.84l-4.64,4.6a2,2,0,0,1-2.22.41L60.6,58.26l-3.76,3.61A2,2,0,0,1,55.46,62.43Z"/><path class="cls-2" d="M37,0H2A2,2,0,0,0,0,2V31.76a2,2,0,0,0,2,2H37a2,2,0,0,0,2-2V2A2,2,0,0,0,37,0ZM4,29.76V8.84H35V29.76Z"/><path class="cls-3" d="M79.9,0H45a2,2,0,0,0-2,2V31.76a2,2,0,0,0,2,2h35a2,2,0,0,0,2-2V2A2,2,0,0,0,79.9,0ZM47,29.76V8.84h31V29.76Z"/><path class="cls-2" d="M37,37.76H2a2,2,0,0,0-2,2V69.52a2,2,0,0,0,2,2H37a2,2,0,0,0,2-2V39.76A2,2,0,0,0,37,37.76ZM4,67.52V46.6H35V67.52Z"/><path class="cls-2" d="M79.9,37.76H45a2,2,0,0,0-2,2V69.52a2,2,0,0,0,2,2h35a2,2,0,0,0,2-2V39.76A2,2,0,0,0,79.9,37.76ZM47,67.52V46.6h31V67.52Z"/><rect class="cls-1" x="10.48" y="56.95" width="4" height="5.79"/><rect class="cls-1" x="17.43" y="53.95" width="4" height="8.79"/><rect class="cls-1" x="24.47" y="50.95" width="4" height="11.79"/><path class="cls-1" d="M19.47,25.8a6.93,6.93,0,1,1,6.93-6.92A6.93,6.93,0,0,1,19.47,25.8Zm0-9.85a2.93,2.93,0,1,0,2.93,2.93A2.93,2.93,0,0,0,19.47,16Z"/></g></g></svg>

package/templates/scenes-app/src/module.ts

@@ -0,0 +1,10 @@
+import { AppPlugin } from '@grafana/data';
+import { App } from './components/App';
+import { AppConfig } from './components/AppConfig';
+
+export const plugin = new AppPlugin<{}>().setRootPage(App).addConfigPage({
+  title: 'Configuration',
+  icon: 'cog',
+  body: AppConfig,
+  id: 'configuration',
+});

package/templates/scenes-app/src/pages/Home/CustomSceneObject.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { SceneComponentProps, SceneObjectBase, SceneObjectState } from '@grafana/scenes';
+import { Input } from '@grafana/ui';
+
+export interface CustomSceneObjectState extends SceneObjectState {
+  counter: number;
+}
+
+export class CustomSceneObject extends SceneObjectBase<CustomSceneObjectState> {
+  static Component = CustomSceneObjectRenderer;
+
+  onValueChange = (value: number) => {
+    this.setState({ counter: value });
+  };
+}
+
+function CustomSceneObjectRenderer({ model }: SceneComponentProps<CustomSceneObject>) {
+  const state = model.useState();
+
+  return (
+    <Input
+      prefix="Series count"
+      defaultValue={state.counter}
+      width={20}
+      type="number"
+      onBlur={(evt) => {
+        model.onValueChange(parseInt(evt.currentTarget.value, 10));
+      }}
+    />
+  );
+}