From 2a614dc64ed69a6f38dc45470e815772a4196312 Mon Sep 17 00:00:00 2001
From: Levente Balogh <balogh.levente.hu@gmail.com>
Date: Wed, 7 Aug 2024 20:42:35 +0200
Subject: [PATCH 1/3] feat(app): wrap the config fields with `<form>`

---
 .../src/components/AppConfig/AppConfig.tsx    | 43 +++++++++++--------
 1 file changed, 26 insertions(+), 17 deletions(-)

diff --git a/packages/create-plugin/templates/app/src/components/AppConfig/AppConfig.tsx b/packages/create-plugin/templates/app/src/components/AppConfig/AppConfig.tsx
index f6333cd84..1ebbdc3fd 100644
--- a/packages/create-plugin/templates/app/src/components/AppConfig/AppConfig.tsx
+++ b/packages/create-plugin/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,30 @@ 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,28 +101,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>
+      </form>
     </div>
   );
 };

From f58793693d0e271ad3d1bad66d0a698072564acb Mon Sep 17 00:00:00 2001
From: Levente Balogh <balogh.levente.hu@gmail.com>
Date: Wed, 7 Aug 2024 20:42:55 +0200
Subject: [PATCH 2/3] feat(scenes-app): wrap the config fields with `<form>`

---
 .../src/components/AppConfig/AppConfig.tsx    | 152 +++++++-----------
 1 file changed, 55 insertions(+), 97 deletions(-)

diff --git a/packages/create-plugin/templates/scenes-app/src/components/AppConfig/AppConfig.tsx b/packages/create-plugin/templates/scenes-app/src/components/AppConfig/AppConfig.tsx
index 8ad9e8e0d..3b87666a5 100644
--- a/packages/create-plugin/templates/scenes-app/src/components/AppConfig/AppConfig.tsx
+++ b/packages/create-plugin/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,106 +56,62 @@ 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}>
-      {/* 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
+      <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
             </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>
+        </FieldSet>
+      </form>
     </div>
   );
 };

From 1ab47f9435853af26327c194ec7eece7b6ad533c Mon Sep 17 00:00:00 2001
From: Levente Balogh <balogh.levente.hu@gmail.com>
Date: Tue, 27 Aug 2024 18:40:37 +0200
Subject: [PATCH 3/3] refactor: remove unused test-ids from the app config

---
 .../src/components/AppConfig/AppConfig.tsx    |  2 -
 .../templates/app/src/components/testIds.ts   |  1 -
 .../src/components/AppConfig/AppConfig.tsx    | 74 +++++++++----------
 3 files changed, 36 insertions(+), 41 deletions(-)

diff --git a/packages/create-plugin/templates/app/src/components/AppConfig/AppConfig.tsx b/packages/create-plugin/templates/app/src/components/AppConfig/AppConfig.tsx
index 1ebbdc3fd..19fba6438 100644
--- a/packages/create-plugin/templates/app/src/components/AppConfig/AppConfig.tsx
+++ b/packages/create-plugin/templates/app/src/components/AppConfig/AppConfig.tsx
@@ -68,7 +68,6 @@ export const AppConfig = ({ plugin }: AppConfigProps) => {
   };
 
   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">
@@ -108,7 +107,6 @@ export const AppConfig = ({ plugin }: AppConfigProps) => {
         </div>
       </FieldSet>
       </form>
-    </div>
   );
 };
 
diff --git a/packages/create-plugin/templates/app/src/components/testIds.ts b/packages/create-plugin/templates/app/src/components/testIds.ts
index c17eb2248..a5728c160 100644
--- a/packages/create-plugin/templates/app/src/components/testIds.ts
+++ b/packages/create-plugin/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',
diff --git a/packages/create-plugin/templates/scenes-app/src/components/AppConfig/AppConfig.tsx b/packages/create-plugin/templates/scenes-app/src/components/AppConfig/AppConfig.tsx
index 3b87666a5..5d324ffd9 100644
--- a/packages/create-plugin/templates/scenes-app/src/components/AppConfig/AppConfig.tsx
+++ b/packages/create-plugin/templates/scenes-app/src/components/AppConfig/AppConfig.tsx
@@ -75,44 +75,42 @@ export const AppConfig = ({ plugin }: Props) => {
   };
 
   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
-            </Button>
-          </div>
-        </FieldSet>
-      </form>
-    </div>
+    <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
+          </Button>
+        </div>
+      </FieldSet>
+    </form>
   );
 };