@grafana/create-plugin 5.3.1 → 5.3.3-canary.1041.1ab47f9.0

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+# v5.3.2 (Thu Aug 22 2024)
+
+#### 🐛 Bug Fix
+
+- Create Plugin: Fix missing module.ts in sourcemaps [#1071](https://github.com/grafana/plugin-tools/pull/1071) ([@jackw](https://github.com/jackw))
+
+#### Authors: 1
+
+- Jack Westbrook ([@jackw](https://github.com/jackw))
+
+---
+
 # v5.3.1 (Wed Aug 21 2024)
 
 #### 🐛 Bug Fix

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@grafana/create-plugin",
-  "version": "5.3.1",
+  "version": "5.3.3-canary.1041.1ab47f9.0",
   "repository": {
     "directory": "packages/create-plugin",
     "url": "https://github.com/grafana/plugin-tools"
@@ -87,5 +87,5 @@
   "engines": {
     "node": ">=20"
   },
-  "gitHead": "acc595c46c832320e3e90f7db18dd69728b4ecd8"
+  "gitHead": "1ab47f9435853af26327c194ec7eece7b6ad533c"
 }

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

@@ -30,6 +30,8 @@ export const AppConfig = ({ plugin }: AppConfigProps) => {
     isApiKeySet: Boolean(secureJsonFields?.apiKey),
   });
 
+  const isSubmitDisabled = Boolean(!state.apiUrl || (!state.isApiKeySet && !state.apiKey));
+
   const onResetApiKey = () =>
     setState({
       ...state,
@@ -44,8 +46,29 @@ export const AppConfig = ({ plugin }: AppConfigProps) => {
     });
   };
 
+  const onSubmit = () => {
+    if (isSubmitDisabled) {
+      return;
+    }
+
+    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,
+          },
+    });
+  };
+
   return (
-    <div data-testid={testIds.appConfig.container}>
+    <form onSubmit={onSubmit}>
       <FieldSet label="API Settings">
         <Field label="API Key" description="A secret key for authenticating to our custom API">
           <SecretInput
@@ -77,29 +100,13 @@ export const AppConfig = ({ plugin }: AppConfigProps) => {
           <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))}
+            disabled={isSubmitDisabled}
           >
             Save API settings
           </Button>
         </div>
       </FieldSet>
-    </div>
+      </form>
   );
 };
 

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

@@ -1,6 +1,5 @@
 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',

package/templates/common/.config/webpack/webpack.config.ts

@@ -98,6 +98,18 @@ const config = async (env): Promise<Configuration> => {
 
     module: {
       rules: [
+        // This must come first in the rules array otherwise it breaks sourcemaps.
+        {
+          test: /src\/(?:.*\/)?module\.tsx?$/,
+          use: [
+            {
+              loader: 'imports-loader',
+              options: {
+                imports: `side-effects grafana-public-path`,
+              },
+            },
+          ],
+        },
         {
           exclude: /(node_modules)/,
           test: /\.[tj]sx?$/,
@@ -118,17 +130,6 @@ const config = async (env): Promise<Configuration> => {
             },
           },
         },
-        {
-          test: /src\/(?:.*\/)?module\.tsx?$/,
-          use: [
-            {
-              loader: 'imports-loader',
-              options: {
-                imports: `side-effects grafana-public-path`,
-              },
-            },
-          ],
-        },
         {
           test: /\.css$/,
           use: ['style-loader', 'css-loader'],

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

@@ -33,6 +33,8 @@ export const AppConfig = ({ plugin }: Props) => {
     isApiKeySet: Boolean(jsonData?.isApiKeySet),
   });
 
+  const isSubmitDisabled = Boolean(!state.apiUrl || (!state.isApiKeySet && !state.apiKey));
+
   const onResetApiKey = () =>
     setState({
       ...state,
@@ -54,51 +56,26 @@ export const AppConfig = ({ plugin }: Props) => {
     });
   };
 
-  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>
+  const onSubmit = () => {
+    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,
+          },
+    });
+  };
 
-      {/* CUSTOM SETTINGS */}
+  return (
+    <form onSubmit={onSubmit}>
       <FieldSet label="API Settings" className={s.marginTopXl}>
         {/* API Key */}
         <Field label="API Key" description="A secret key for authenticating to our custom API">
@@ -128,33 +105,12 @@ export const AppConfig = ({ plugin }: Props) => {
         </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))}
-          >
+          <Button type="submit" data-testid={testIds.appConfig.submit} disabled={isSubmitDisabled}>
             Save API settings
           </Button>
         </div>
       </FieldSet>
-    </div>
+    </form>
   );
 };