Chore: Bump plugin-examples configuration to latest version

.github/workflows/automatic-update.yml

@@ -10,13 +10,22 @@ jobs:
     runs-on: ubuntu-latest
     permissions:
       contents: read
+      id-token: write
     steps:
+      - id: get-secrets
+        uses: grafana/shared-workflows/actions/get-vault-secrets@28361cdb22223e5f1e34358c86c20908e7248760 # get-vault-secrets-v1.1.0
+        with:
+          # Secrets placed in the ci/repo/grafana/grafana-plugin-examples path in Vault
+          repo_secrets: |
+            GITHUB_APP_ID=plugins-platform-bot-app:app_id
+            GITHUB_APP_PRIVATE_KEY=plugins-platform-bot-app:app_pem
+
       - name: Generate token
         id: generate_token
         uses: actions/create-github-app-token@3ff1caaa28b64c9cc276ce0a02e2ff584f3900c5 # v2.0.2
         with:
-          app-id: ${{ secrets.APP_ID }}
-          private-key: ${{ secrets.APP_PEM }}
+          app-id: ${{ env.GITHUB_APP_ID }}
+          private-key: ${{ env.GITHUB_APP_PRIVATE_KEY }}
 
       - name: Checkout repository
         uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
@@ -61,11 +70,11 @@ jobs:
         run: gh pr merge $PR_URL --auto --squash
         env:
           PR_URL: https://github.com/grafana/grafana-plugin-examples/pull/${{ steps.create_pr.outputs.pull-request-number }}
-          GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}
+          GITHUB_TOKEN: ${{ steps.generate_token.outputs.token }}
 
       - name: Auto approve PR
         if: steps.status.outputs.has_changes == 'true'
         run: gh pr review $PR_URL --approve -b "Approving update"
         env:
           PR_URL: https://github.com/grafana/grafana-plugin-examples/pull/${{ steps.create_pr.outputs.pull-request-number }}
-          GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}
+          GITHUB_TOKEN: ${{ steps.generate_token.outputs.token }}

examples/app-basic/.config/.cprc.json

@@ -1,3 +1,3 @@
 {
-  "version": "5.19.2"
+  "version": "5.19.8"
 }

examples/app-basic/.config/README.md

@@ -106,9 +106,9 @@ We are going to use [`webpack-merge`](https://github.com/survivejs/webpack-merge
 // webpack.config.ts
 import type { Configuration } from 'webpack';
 import { merge } from 'webpack-merge';
-import grafanaConfig from './.config/webpack/webpack.config';
+import grafanaConfig, { type Env } from './.config/webpack/webpack.config';
 
-const config = async (env): Promise<Configuration> => {
+const config = async (env: Env): Promise<Configuration> => {
   const baseConfig = await grafanaConfig(env);
 
   return merge(baseConfig, {

examples/app-basic/.config/types/bundler-rules.d.ts

@@ -0,0 +1,37 @@
+// Image declarations
+declare module '*.gif' {
+  const src: string;
+  export default src;
+}
+
+declare module '*.jpg' {
+  const src: string;
+  export default src;
+}
+
+declare module '*.jpeg' {
+  const src: string;
+  export default src;
+}
+
+declare module '*.png' {
+  const src: string;
+  export default src;
+}
+
+declare module '*.webp' {
+  const src: string;
+  export default src;
+}
+
+declare module '*.svg' {
+  const src: string;
+  export default src;
+}
+
+// Font declarations
+declare module '*.woff';
+declare module '*.woff2';
+declare module '*.eot';
+declare module '*.ttf';
+declare module '*.otf';

examples/app-basic/.config/types/webpack-plugins.d.ts

@@ -0,0 +1,83 @@
+declare module 'replace-in-file-webpack-plugin' {
+  import { Compiler, Plugin } from 'webpack';
+
+  interface ReplaceRule {
+    search: string | RegExp;
+    replace: string | ((match: string) => string);
+  }
+
+  interface ReplaceOption {
+    dir?: string;
+    files?: string[];
+    test?: RegExp | RegExp[];
+    rules: ReplaceRule[];
+  }
+
+  class ReplaceInFilePlugin extends Plugin {
+    constructor(options?: ReplaceOption[]);
+    options: ReplaceOption[];
+    apply(compiler: Compiler): void;
+  }
+
+  export = ReplaceInFilePlugin;
+}
+
+declare module 'webpack-livereload-plugin' {
+  import { ServerOptions } from 'https';
+  import { Compiler, Plugin, Stats, Compilation } from 'webpack';
+
+  interface Options extends Pick<ServerOptions, 'cert' | 'key' | 'pfx'> {
+    /**
+     * protocol for livereload `<script>` src attribute value
+     * @default protocol of the page, either `http` or `https`
+     */
+    protocol?: string | undefined;
+    /**
+     * The desired port for the livereload server.
+     * If you define port 0, an available port will be searched for, starting from 35729.
+     * @default 35729
+     */
+    port?: number | undefined;
+    /**
+     * he desired hostname for the appended `<script>` (if present) to point to
+     * @default hostname of the page, like `localhost` or 10.0.2.2
+     */
+    hostname?: string | undefined;
+    /**
+     * livereload `<script>` automatically to `<head>`.
+     * @default false
+     */
+    appendScriptTag?: boolean | undefined;
+    /**
+     * RegExp of files to ignore. Null value means ignore nothing.
+     * It is also possible to define an array and use multiple anymatch patterns
+     */
+    ignore?: RegExp | RegExp[] | null | undefined;
+    /**
+     * amount of milliseconds by which to delay the live reload (in case build takes longer)
+     * @default 0
+     */
+    delay?: number | undefined;
+    /**
+     * create hash for each file source and only notify livereload if hash has changed
+     * @default false
+     */
+    useSourceHash?: boolean | undefined;
+  }
+
+  class LiveReloadPlugin extends Plugin {
+    readonly isRunning: boolean;
+    constructor(options?: Options);
+
+    apply(compiler: Compiler): void;
+
+    start(watching: any, cb: () => void): void;
+    done(stats: Stats): void;
+    failed(): void;
+    autoloadJs(): string;
+    scriptTag(source: string): string;
+    applyCompilation(compilation: Compilation): void;
+  }
+
+  export = LiveReloadPlugin;
+}

examples/app-basic/.config/webpack/utils.ts

@@ -40,7 +40,7 @@ export function hasReadme() {
 
 // Support bundling nested plugins by finding all plugin.json files in src directory
 // then checking for a sibling module.[jt]sx? file.
-export async function getEntries(): Promise<Record<string, string>> {
+export async function getEntries() {
   const pluginsJson = await glob('**/src/**/plugin.json', { absolute: true });
 
   const plugins = await Promise.all(
@@ -50,14 +50,14 @@ export async function getEntries(): Promise<Record<string, string>> {
     })
   );
 
-  return plugins.reduce((result, modules) => {
-    return modules.reduce((result, module) => {
+  return plugins.reduce<Record<string, string>>((result, modules) => {
+    return modules.reduce((innerResult, module) => {
       const pluginPath = path.dirname(module);
       const pluginName = path.relative(process.cwd(), pluginPath).replace(/src\/?/i, '');
       const entryName = pluginName === '' ? 'module' : `${pluginName}/module`;
 
-      result[entryName] = module;
-      return result;
+      innerResult[entryName] = module;
+      return innerResult;
     }, result);
   }, {});
 }

examples/app-basic/.config/webpack/webpack.config.ts

@@ -34,7 +34,11 @@ __webpack_public_path__ =
 `,
 });
 
-const config = async (env): Promise<Configuration> => {
+export type Env = {
+  [key: string]: true | string | Env;
+};
+
+const config = async (env: Env): Promise<Configuration> => {
   const baseConfig: Configuration = {
     cache: {
       type: 'filesystem',
@@ -77,10 +81,10 @@ const config = async (env): Promise<Configuration> => {
       // Mark legacy SDK imports as external if their name starts with the "grafana/" prefix
       ({ request }, callback) => {
         const prefix = 'grafana/';
-        const hasPrefix = (request) => request.indexOf(prefix) === 0;
-        const stripPrefix = (request) => request.substr(prefix.length);
+        const hasPrefix = (request: string) => request.indexOf(prefix) === 0;
+        const stripPrefix = (request: string) => request.substr(prefix.length);
 
-        if (hasPrefix(request)) {
+        if (request && hasPrefix(request)) {
           return callback(undefined, stripPrefix(request));
         }
 

examples/app-basic/package.json

@@ -24,7 +24,7 @@
     "@grafana/plugin-e2e": "^1.17.1",
     "@grafana/plugin-meta-extractor": "^0.0.2",
     "@grafana/tsconfig": "^2.0.0",
-    "@playwright/test": "1.50.1",
+    "@playwright/test": "^1.52.0",
     "@stylistic/eslint-plugin-ts": "^2.9.0",
     "@swc/core": "^1.3.90",
     "@swc/helpers": "^0.5.0",

examples/app-with-backend/.config/.cprc.json

@@ -1,3 +1,3 @@
 {
-  "version": "5.19.2"
+  "version": "5.19.8"
 }

examples/app-with-backend/.config/README.md

@@ -106,9 +106,9 @@ We are going to use [`webpack-merge`](https://github.com/survivejs/webpack-merge
 // webpack.config.ts
 import type { Configuration } from 'webpack';
 import { merge } from 'webpack-merge';
-import grafanaConfig from './.config/webpack/webpack.config';
+import grafanaConfig, { type Env } from './.config/webpack/webpack.config';
 
-const config = async (env): Promise<Configuration> => {
+const config = async (env: Env): Promise<Configuration> => {
   const baseConfig = await grafanaConfig(env);
 
   return merge(baseConfig, {

examples/app-with-backend/.config/types/bundler-rules.d.ts

@@ -0,0 +1,37 @@
+// Image declarations
+declare module '*.gif' {
+  const src: string;
+  export default src;
+}
+
+declare module '*.jpg' {
+  const src: string;
+  export default src;
+}
+
+declare module '*.jpeg' {
+  const src: string;
+  export default src;
+}
+
+declare module '*.png' {
+  const src: string;
+  export default src;
+}
+
+declare module '*.webp' {
+  const src: string;
+  export default src;
+}
+
+declare module '*.svg' {
+  const src: string;
+  export default src;
+}
+
+// Font declarations
+declare module '*.woff';
+declare module '*.woff2';
+declare module '*.eot';
+declare module '*.ttf';
+declare module '*.otf';