@grafana/create-plugin 1.3.1 → 1.4.0-canary.246.66c1931.0

package/CHANGELOG.md

@@ -1,21 +1,3 @@
-# v1.3.1 (Mon May 15 2023)
-
-#### 🐛 Bug Fix
-
-- Create Plugin: Fix react types errors [#238](https://github.com/grafana/plugin-tools/pull/238) ([@jackw](https://github.com/jackw))
-- chore: update grafanaDependency for datasources [#247](https://github.com/grafana/plugin-tools/pull/247) ([@sympatheticmoose](https://github.com/sympatheticmoose))
-
-#### 📝 Documentation
-
-- docs: readme update for windows [#240](https://github.com/grafana/plugin-tools/pull/240) ([@sympatheticmoose](https://github.com/sympatheticmoose))
-
-#### Authors: 2
-
-- David Harris ([@sympatheticmoose](https://github.com/sympatheticmoose))
-- Jack Westbrook ([@jackw](https://github.com/jackw))
-
----
-
 # v1.3.0 (Fri Apr 28 2023)
 
 #### 🚀 Enhancement

package/dist/constants.js

@@ -30,7 +30,7 @@ var PLUGIN_TYPES;
     PLUGIN_TYPES["secretsmanager"] = "secretsmanager";
 })(PLUGIN_TYPES = exports.PLUGIN_TYPES || (exports.PLUGIN_TYPES = {}));
 exports.EXTRA_TEMPLATE_VARIABLES = {
-    grafanaVersion: '9.3.8'
+    grafanaVersion: '9.5.0'
 };
 exports.GRAFANA_FE_PACKAGES = [
     '@grafana/data',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@grafana/create-plugin",
-  "version": "1.3.1",
+  "version": "1.4.0-canary.246.66c1931.0",
   "main": "index.js",
   "repository": {
     "directory": "packages/create-plugin",
@@ -64,5 +64,5 @@
   "engines": {
     "node": ">=16"
   },
-  "gitHead": "80d7d3cc8ac542995eae2a874d8b9618f9a9559e"
+  "gitHead": "66c1931b45e2c4efcf098ea3a87db432e1a26202"
 }

package/src/constants.ts

@@ -38,7 +38,7 @@ export enum PLUGIN_TYPES {
 // and will be available to use in the templates.
 // Example: "@grafana/ui": "{{ grafanaVersion }}"
 export const EXTRA_TEMPLATE_VARIABLES = {
-  grafanaVersion: '9.3.8',
+  grafanaVersion: '9.5.0',
 };
 
 export const GRAFANA_FE_PACKAGES = [

package/templates/app/src/components/App/App.test.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { BrowserRouter } from 'react-router-dom';
 import { AppRootProps, PluginType } from '@grafana/data';
 import { render, screen } from '@testing-library/react';
 import { App } from './App';
@@ -25,8 +26,12 @@ describe('Components/App', () => {
   });
 
   test('renders without an error"', () => {
-    render(<App {...props} />);
+    render(
+      <BrowserRouter>
+        <App {...props} />
+      </BrowserRouter>
+    );
 
-    expect(screen.queryByText(/Hello Grafana!/i)).toBeInTheDocument();
+    expect(screen.queryByText(/this is page one./i)).toBeInTheDocument();
   });
 });

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

@@ -1,8 +1,21 @@
-import * as React from 'react';
+import React from 'react';
+import { Route, Switch } from 'react-router-dom';
 import { AppRootProps } from '@grafana/data';
+import { ROUTES } from '../../constants';
+import { PageFour, PageOne, PageThree, PageTwo } from '../../pages';
+import { prefixRoute } from '../../utils/utils.routing';
 
-export class App extends React.PureComponent<AppRootProps> {
-  render() {
-    return <div className="page-container">Hello Grafana!</div>;
-  }
+export function App(props: AppRootProps) {
+  return (
+      <Switch>
+        <Route exact path={prefixRoute(ROUTES.Two)} component={PageTwo} />
+        <Route exact path={prefixRoute(`${ROUTES.Three}/:id?`)} component={PageThree} />
+
+        {/* Full-width page (this page will have no side navigation) */}
+        <Route exact path={prefixRoute(ROUTES.Four)} component={PageFour} />
+
+        {/* Default page */}
+        <Route component={PageOne} />
+      </Switch>
+  );
 }

package/templates/app/src/components/AppConfig/AppConfig.test.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { render, screen } from '@testing-library/react';
 import { PluginType } from '@grafana/data';
 import { AppConfig, AppConfigProps } from './AppConfig';
+import { testIds } from 'components/testIds';
 
 describe('Components/AppConfig', () => {
   let props: AppConfigProps;
@@ -23,29 +24,15 @@ describe('Components/AppConfig', () => {
     } as unknown as AppConfigProps;
   });
 
-  test('renders without an error"', () => {
-    render(<AppConfig plugin={props.plugin} query={props.query} />);
-
-    expect(screen.queryByText(/Enable \/ Disable/i)).toBeInTheDocument();
-  });
-
-  test('renders an "Enable" button if the plugin is disabled', () => {
+  test('renders the "API Settings" fieldset with API key, API url inputs and button', () => {
     const plugin = { meta: { ...props.plugin.meta, enabled: false } };
 
     // @ts-ignore - We don't need to provide `addConfigPage()` and `setChannelSupport()` for these tests
     render(<AppConfig plugin={plugin} query={props.query} />);
 
-    expect(screen.queryByText(/The plugin is currently not enabled./i)).toBeInTheDocument();
-    expect(screen.queryByText(/The plugin is currently enabled./i)).not.toBeInTheDocument();
-  });
-
-  test('renders a "Disable" button if the plugin is enabled', () => {
-    const plugin = { meta: { ...props.plugin.meta, enabled: true } };
-
-    // @ts-ignore - We don't need to provide `addConfigPage()` and `setChannelSupport()` for these tests
-    render(<AppConfig plugin={plugin} query={props.query} />);
-
-    expect(screen.queryByText(/The plugin is currently enabled./i)).toBeInTheDocument();
-    expect(screen.queryByText(/The plugin is currently not enabled./i)).not.toBeInTheDocument();
+    expect(screen.queryByRole('group', { name: /api settings/i })).toBeInTheDocument();
+    expect(screen.queryByTestId(testIds.appConfig.apiKey)).toBeInTheDocument();
+    expect(screen.queryByTestId(testIds.appConfig.apiUrl)).toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: /save api settings/i })).toBeInTheDocument();
   });
 });

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

@@ -1,62 +1,102 @@
-import React from 'react';
-import { Button, Legend, useStyles2 } from '@grafana/ui';
-import { PluginConfigPageProps, AppPluginMeta, PluginMeta, GrafanaTheme2 } from '@grafana/data';
-import { getBackendSrv } from '@grafana/runtime';
-import { css } from '@emotion/css';
+import React, { ChangeEvent, useState } from 'react';
 import { lastValueFrom } from 'rxjs';
+import { css } from '@emotion/css';
+import { AppPluginMeta, GrafanaTheme2, PluginConfigPageProps, PluginMeta } from '@grafana/data';
+import { getBackendSrv } from '@grafana/runtime';
+import { Button, Field, FieldSet, Input, SecretInput, useStyles2 } from '@grafana/ui';
+import { testIds } from '../testIds';
 
-export type AppPluginSettings = {};
+export type AppPluginSettings = {
+  apiUrl?: string;
+};
+
+type State = {
+  // The URL to reach our custom API.
+  apiUrl: string;
+  // Tells us if the API key secret is set.
+  isApiKeySet: boolean;
+  // An secret key for our custom API.
+  apiKey: string;
+};
 
 export interface AppConfigProps extends PluginConfigPageProps<AppPluginMeta<AppPluginSettings>> {}
 
 export const AppConfig = ({ plugin }: AppConfigProps) => {
   const s = useStyles2(getStyles);
-  const { enabled, jsonData } = plugin.meta;
+  const { enabled, pinned, jsonData, secureJsonFields } = plugin.meta;
+  const [state, setState] = useState<State>({
+    apiUrl: jsonData?.apiUrl || '',
+    apiKey: '',
+    isApiKeySet: Boolean(secureJsonFields?.apiKey),
+  });
+
+  const onResetApiKey = () =>
+    setState({
+      ...state,
+      apiKey: '',
+      isApiKeySet: false,
+    });
+
+  const onChange = (event: ChangeEvent<HTMLInputElement>) => {
+    setState({
+      ...state,
+      [event.target.name]: event.target.value.trim(),
+    });
+  };
 
   return (
-    <div className="gf-form-group">
-      <div>
-        {/* Enable the plugin */}
-        <Legend>Enable / Disable</Legend>
-        {!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>
-          </>
-        )}
+    <div data-testid={testIds.appConfig.container}>
+      <FieldSet label="API Settings">
+        <Field label="API Key" description="A secret key for authenticating to our custom API">
+          <SecretInput
+            width={60}
+            data-testid={testIds.appConfig.apiKey}
+            name="apiKey"
+            value={state.apiKey}
+            isConfigured={state.isApiKeySet}
+            placeholder={'Your secret API key'}
+            onChange={onChange}
+            onReset={onResetApiKey}
+          />
+        </Field>
 
-        {/* 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>
-          </>
-        )}
-      </div>
+        <Field label="API Url" description="" className={s.marginTop}>
+          <Input
+            width={60}
+            name="apiUrl"
+            data-testid={testIds.appConfig.apiUrl}
+            value={state.apiUrl}
+            placeholder={`E.g.: http://mywebsite.com/api/v1`}
+            onChange={onChange}
+          />
+        </Field>
+
+        <div className={s.marginTop}>
+          <Button
+            type="submit"
+            data-testid={testIds.appConfig.submit}
+            onClick={() =>
+              updatePluginAndReload(plugin.meta.id, {
+                enabled,
+                pinned,
+                jsonData: {
+                  apiUrl: state.apiUrl,
+                },
+                // 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>
   );
 };
@@ -68,9 +108,12 @@ const getStyles = (theme: GrafanaTheme2) => ({
   marginTop: css`
     margin-top: ${theme.spacing(3)};
   `,
+  marginTopXl: css`
+    margin-top: ${theme.spacing(6)};
+  `,
 });
 
-const updatePluginAndReload = async (pluginId: string, data: Partial<PluginMeta>) => {
+const updatePluginAndReload = async (pluginId: string, data: Partial<PluginMeta<AppPluginSettings>>) => {
   try {
     await updatePlugin(pluginId, data);
 
@@ -83,10 +126,11 @@ const updatePluginAndReload = async (pluginId: string, data: Partial<PluginMeta>
 };
 
 export const updatePlugin = async (pluginId: string, data: Partial<PluginMeta>) => {
-  const response = getBackendSrv().fetch({
+  const response = await getBackendSrv().fetch({
     url: `/api/plugins/${pluginId}/settings`,
     method: 'POST',
     data,
   });
+
   return lastValueFrom(response);
 };

package/templates/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/app/src/constants.ts

@@ -0,0 +1,36 @@
+import { NavModelItem } from '@grafana/data';
+import pluginJson from './plugin.json';
+
+export const PLUGIN_BASE_URL = `/a/${pluginJson.id}`;
+
+export enum ROUTES {
+  One = 'one',
+  Two = 'two',
+  Three = 'three',
+  Four = 'four',
+}
+
+export const NAVIGATION_TITLE = 'Basic App Plugin';
+export const NAVIGATION_SUBTITLE = 'Some extra description...';
+
+// Add a navigation item for each route you would like to display in the navigation bar
+export const NAVIGATION: Record<string, NavModelItem> = {
+  [ROUTES.One]: {
+    id: ROUTES.One,
+    text: 'Page One',
+    icon: 'database',
+    url: `${PLUGIN_BASE_URL}/one`,
+  },
+  [ROUTES.Two]: {
+    id: ROUTES.Two,
+    text: 'Page Two',
+    icon: 'key-skeleton-alt',
+    url: `${PLUGIN_BASE_URL}/two`,
+  },
+  [ROUTES.Three]: {
+    id: ROUTES.Three,
+    text: 'Page Three',
+    icon: 'chart-line',
+    url: `${PLUGIN_BASE_URL}/three`,
+  },
+};

package/templates/app/src/pages/PageFour.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { css } from '@emotion/css';
+import { GrafanaTheme2, PageLayoutType } from '@grafana/data';
+import { LinkButton, useStyles2 } from '@grafana/ui';
+import { ROUTES } from '../constants';
+import { prefixRoute } from '../utils/utils.routing';
+import { testIds } from '../components/testIds';
+import { PluginPage } from '@grafana/runtime';
+
+export function PageFour() {
+  const s = useStyles2(getStyles);
+
+  return (
+    <PluginPage layout={PageLayoutType.Canvas}>
+      <div className={s.page} data-testid={testIds.pageFour.container}>
+        <div className={s.container}>
+          <LinkButton data-testid={testIds.pageFour.navigateBack} icon="arrow-left" href={prefixRoute(ROUTES.One)}>
+            Back
+          </LinkButton>
+          <div className={s.content}>This is a full-width page without a navigation bar.</div>
+        </div>
+      </div>
+    </PluginPage>
+  );
+}
+
+const getStyles = (theme: GrafanaTheme2) => ({
+  page: css`
+    padding: ${theme.spacing(3)};
+    background-color: ${theme.colors.background.secondary};
+    display: flex;
+    justify-content: center;
+  `,
+  container: css`
+    width: 900px;
+    max-width: 100%;
+    min-height: 500px;
+  `,
+  content: css`
+    margin-top: ${theme.spacing(6)};
+  `,
+});

package/templates/app/src/pages/PageOne.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { css } from '@emotion/css';
+import { GrafanaTheme2 } from '@grafana/data';
+import { LinkButton, useStyles2 } from '@grafana/ui';
+import { prefixRoute } from '../utils/utils.routing';
+import { ROUTES } from '../constants';
+import { testIds } from '../components/testIds';
+import { PluginPage } from '@grafana/runtime';
+
+export function PageOne() {
+  const s = useStyles2(getStyles);
+
+  return (
+    <PluginPage>
+      <div data-testid={testIds.pageOne.container}>
+        This is page one.
+        <div className={s.marginTop}>
+          <LinkButton data-testid={testIds.pageOne.navigateToFour} href={prefixRoute(ROUTES.Four)}>
+            Full-width page example
+          </LinkButton>
+        </div>
+      </div>
+    </PluginPage>
+  );
+}
+
+const getStyles = (theme: GrafanaTheme2) => ({
+  marginTop: css`
+    margin-top: ${theme.spacing(2)};
+  `,
+});

package/templates/app/src/pages/PageThree.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { css } from '@emotion/css';
+import { useParams, Link } from 'react-router-dom';
+import { GrafanaTheme2 } from '@grafana/data';
+import { useStyles2 } from '@grafana/ui';
+import { prefixRoute } from '../utils/utils.routing';
+import { ROUTES } from '../constants';
+import { testIds } from '../components/testIds';
+import { PluginPage } from '@grafana/runtime';
+
+export function PageThree() {
+  const s = useStyles2(getStyles);
+  const { id } = useParams<{ id: string }>();
+
+  return (
+    <PluginPage>
+      <div data-testid={testIds.pageThree.container}>
+        This is page three.
+        <br />
+        <br />
+        {/* The ID parameter is set */}
+        {id && (
+          <>
+            <strong>ID:</strong> {id}
+          </>
+        )}
+        {/* No ID parameter */}
+        {!id && (
+          <>
+            <strong>No id parameter is set in the URL.</strong> <br />
+            Try the following link: <br />
+            <Link className={s.link} to={prefixRoute(`${ROUTES.Three}/123456789`)}>
+              {prefixRoute(`${ROUTES.Three}/123456789`)}
+            </Link>
+          </>
+        )}
+      </div>
+    </PluginPage>
+  );
+}
+
+const getStyles = (theme: GrafanaTheme2) => ({
+  link: css`
+    color: ${theme.colors.text.link};
+    text-decoration: underline;
+  `,
+});

package/templates/app/src/pages/PageTwo.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { testIds } from '../components/testIds';
+import { PluginPage } from '@grafana/runtime';
+
+export function PageTwo() {
+  return (
+    <PluginPage>
+      <div data-testid={testIds.pageTwo.container}>
+        <p>This is page two.</p>
+      </div>
+    </PluginPage>
+  );
+}

package/templates/app/src/pages/index.tsx

@@ -0,0 +1,4 @@
+export { PageFour } from './PageFour';
+export { PageOne } from './PageOne';
+export { PageThree } from './PageThree';
+export { PageTwo } from './PageTwo';

package/templates/app/src/utils/utils.routing.ts

@@ -0,0 +1,6 @@
+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}`;
+}

package/templates/common/package.json

@@ -64,7 +64,7 @@
     "react": "17.0.2",
     "react-dom": "17.0.2",{{#if_eq pluginType "app"}}
     "react-router-dom": "^5.2.0",
-    "rxjs": "7.5.7",{{/if_eq}}
+    "rxjs": "7.8.0",{{/if_eq}}
     "tslib": "2.5.0"
   },
   "packageManager": "{{ packageManagerName }}@{{ packageManagerVersion }}"