refactor(client): extract learn more into component

apps/client/src/translations/en/translation.json

@@ -2314,5 +2314,8 @@
     "menu_change_to_widget": "Change to widget",
     "menu_change_to_frontend_script": "Change to frontend script",
     "menu_theme_base": "Theme base"
+  },
+  "setup_form": {
+    "more_info": "Learn more"
   }
 }

apps/client/src/widgets/type_widgets/WebView.tsx

@@ -6,16 +6,16 @@ import FNote from "../../entities/fnote";
 import attributes from "../../services/attributes";
 import { t } from "../../services/i18n";
 import toast from "../../services/toast";
-import utils, { openInAppHelpFromUrl } from "../../services/utils";
+import utils from "../../services/utils";
 import Button from "../react/Button";
 import FormGroup from "../react/FormGroup";
 import FormTextBox from "../react/FormTextBox";
 import { useNoteLabel } from "../react/hooks";
-import LinkButton from "../react/LinkButton";
 import SetupForm from "./helpers/SetupForm";
 import { TypeWidgetProps } from "./type_widget";
 
 const isElectron = utils.isElectron();
+const HELP_PAGE = "1vHRoWCEjj0L";
 
 export default function WebView({ note }: TypeWidgetProps) {
     const [ webViewSrc ] = useNoteLabel(note, "webViewSrc");
@@ -60,7 +60,7 @@ function SetupWebView({note}: {note: FNote}) {
 
     return (
         <SetupForm
-            icon="bx bx-globe-alt"
+            icon="bx bx-globe-alt" inAppHelpPage={HELP_PAGE}
             onSubmit={() => submit(src)}
         >
             <FormGroup name="web-view-src-detail" label={t("web_view_setup.title")}>
@@ -83,7 +83,7 @@ function SetupWebView({note}: {note: FNote}) {
 
 function DisabledWebView({ note, url }: { note: FNote, url: string }) {
     return (
-        <SetupForm icon="bx bx-globe-alt">
+        <SetupForm icon="bx bx-globe-alt" inAppHelpPage={HELP_PAGE}>
             <FormGroup name="web-view-src-detail" label={t("web_view_setup.disabled_description")}>
                 <FormTextBox
                     type="url"
@@ -98,11 +98,6 @@ function DisabledWebView({ note, url }: { note: FNote, url: string }) {
                 onClick={() => attributes.toggleDangerousAttribute(note, "label", "webViewSrc", true)}
                 primary
             />
-
-            <LinkButton
-                text="Learn more"
-                onClick={() => openInAppHelpFromUrl("1vHRoWCEjj0L")}
-            />
         </SetupForm>
     );
 }

apps/client/src/widgets/type_widgets/helpers/SetupForm.tsx

@@ -3,19 +3,31 @@ import "./SetupForm.css";
 import clsx from "clsx";
 import { ComponentChildren } from "preact";
 
+import { t } from "../../../services/i18n";
+import { openInAppHelpFromUrl } from "../../../services/utils";
+import LinkButton from "../../react/LinkButton";
+
 interface SetupFormProps {
     icon: string;
     onSubmit?: () => void;
     children: ComponentChildren;
+    inAppHelpPage?: string;
 }
 
-export default function SetupForm({ icon, children, onSubmit }: SetupFormProps) {
+export default function SetupForm({ icon, children, onSubmit, inAppHelpPage }: SetupFormProps) {
     return (
         <div class="setup-form">
             <form class="tn-centered-form" onSubmit={onSubmit}>
                 <span className={clsx(icon, "form-icon")} />
 
                 {children}
+
+                {inAppHelpPage && (
+                    <LinkButton
+                        text={t("setup_form.more_info")}
+                        onClick={() => openInAppHelpFromUrl("1vHRoWCEjj0L")}
+                    />
+                )}
             </form>
         </div>
     );