chore(options/etapi): update help

Author: eliandoran

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

@@ -1453,10 +1453,6 @@
   "etapi": {
     "title": "ETAPI",
     "description": "ETAPI is a REST API used to access Trilium instance programmatically, without UI.",
-    "see_more": "See more details in the {{- link_to_wiki}} and the {{- link_to_openapi_spec}} or the {{- link_to_swagger_ui }}.",
-    "wiki": "wiki",
-    "openapi_spec": "ETAPI OpenAPI spec",
-    "swagger_ui": "ETAPI Swagger UI",
     "create_token": "Create new ETAPI token",
     "existing_tokens": "Existing tokens",
     "no_tokens_yet": "There are no tokens yet. Click on the button above to create one.",

apps/client/src/widgets/type_widgets/options/components/OptionsSection.tsx

@@ -2,7 +2,7 @@ import type { ComponentChildren } from "preact";
 import { CSSProperties } from "preact/compat";
 
 interface OptionsSectionProps {
-    title?: string;
+    title?: ComponentChildren;
     children: ComponentChildren;
     noCard?: boolean;
     style?: CSSProperties;

apps/client/src/widgets/type_widgets/options/etapi.tsx

@@ -11,6 +11,7 @@ import dialog from "../../../services/dialog";
 import { formatDateTime } from "../../../utils/formatters";
 import ActionButton from "../../react/ActionButton";
 import { useTriliumEvent } from "../../react/hooks";
+import HelpButton from "../../react/HelpButton";
 
 type RenameTokenCallback = (tokenId: string, oldName: string) => Promise<void>;
 type DeleteTokenCallback = (tokenId: string, name: string ) => Promise<void>;
@@ -48,26 +49,21 @@ export default function EtapiSettings() {
             message: t("etapi.token_created_message"),
             defaultValue: authToken
         });
-    }, []);    
+    }, []);
 
     return (
         <OptionsSection title={t("etapi.title")}>
             <FormText>
-                {t("etapi.description")}<br />
-                <RawHtml
-                    html={t("etapi.see_more", {
-                        link_to_wiki: `<a class="tn-link" href="https://triliumnext.github.io/Docs/Wiki/etapi.html">${t("etapi.wiki")}</a>`,
-                        // TODO: We use window.open src/public/app/services/link.ts -> prevents regular click behavior on "a" element here because it's a relative path
-                        link_to_openapi_spec: `<a class="tn-link" onclick="window.open('etapi/etapi.openapi.yaml')" href="etapi/etapi.openapi.yaml">${t("etapi.openapi_spec")}</a>`,
-                        link_to_swagger_ui: `<a class="tn-link" href="#_help_f3xpgx6H01PW">${t("etapi.swagger_ui")}</a>`
-                    })} />                    
+                {t("etapi.description")}
+                <HelpButton helpPage="pgxEVkzLl1OP" />
             </FormText>
 
             <Button
                 size="small" icon="bx bx-plus"
                 text={t("etapi.create_token")}
                 onClick={createTokenCallback}
             />
+
             <hr />
 
             <h5>{t("etapi.existing_tokens")}</h5>
@@ -123,7 +119,7 @@ function TokenList({ tokens }: { tokens: EtapiToken[] }) {
                                                 text={t("etapi.rename_token")}
                                                 onClick={() => renameCallback(etapiTokenId, name)}
                                             />
-            
+
                                             <ActionButton
                                                 icon="bx bx-trash"
                                                 text={t("etapi.delete_token")}