@grafana/create-plugin 5.2.2-canary.1041.1247c8a.0 → 5.2.2-canary.1046.3745b69.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@grafana/create-plugin",
-  "version": "5.2.2-canary.1041.1247c8a.0",
+  "version": "5.2.2-canary.1046.3745b69.0",
   "repository": {
     "directory": "packages/create-plugin",
     "url": "https://github.com/grafana/plugin-tools"
@@ -87,5 +87,5 @@
   "engines": {
     "node": ">=20"
   },
-  "gitHead": "1247c8a55ca239d06472821ce0fdaeb41bb8267e"
+  "gitHead": "3745b697ca4e22098422d54a86e01e058ee6123c"
 }

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

@@ -30,8 +30,6 @@ export const AppConfig = ({ plugin }: AppConfigProps) => {
     isApiKeySet: Boolean(secureJsonFields?.apiKey),
   });
 
-  const isSubmitDisabled = Boolean(!state.apiUrl || (!state.isApiKeySet && !state.apiKey));
-
   const onResetApiKey = () =>
     setState({
       ...state,
@@ -46,30 +44,8 @@ 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
@@ -101,13 +77,28 @@ export const AppConfig = ({ plugin }: AppConfigProps) => {
           <Button
             type="submit"
             data-testid={testIds.appConfig.submit}
-            disabled={isSubmitDisabled}
+            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>
-      </form>
     </div>
   );
 };

package/templates/github/workflows/ci.yml

@@ -169,8 +169,8 @@ jobs:
 
       - name: Start Grafana
         run: |
-          docker-compose pull
-          DEVELOPMENT=false GRAFANA_VERSION=$\{{ matrix.GRAFANA_IMAGE.VERSION }} GRAFANA_IMAGE=$\{{ matrix.GRAFANA_IMAGE.NAME }} docker-compose up -d
+          docker compose pull
+          DEVELOPMENT=false GRAFANA_VERSION=$\{{ matrix.GRAFANA_IMAGE.VERSION }} GRAFANA_IMAGE=$\{{ matrix.GRAFANA_IMAGE.NAME }} docker compose up -d
 
       - name: Wait for Grafana to start
         uses: nev7n/wait_for_response@v1
@@ -193,7 +193,7 @@ jobs:
           docker logs {{ pluginId }} >& grafana-server.log
 
       - name: Stop grafana docker
-        run: docker-compose down
+        run: docker compose down
 
       - name: Upload server log
         uses: actions/upload-artifact@v4

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

@@ -33,8 +33,6 @@ export const AppConfig = ({ plugin }: Props) => {
     isApiKeySet: Boolean(jsonData?.isApiKeySet),
   });
 
-  const isSubmitDisabled = Boolean(!state.apiUrl || (!state.isApiKeySet && !state.apiKey));
-
   const onResetApiKey = () =>
     setState({
       ...state,
@@ -56,62 +54,106 @@ export const AppConfig = ({ plugin }: Props) => {
     });
   };
 
-  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,
-          },
-    });
-  };
-
   return (
     <div data-testid={testIds.appConfig.container}>
-      <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">
-            <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} disabled={isSubmitDisabled}>
-              Save API settings
+      {/* 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>
-          </div>
-        </FieldSet>
-      </form>
+          </>
+        )}
+      </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>
   );
 };