Add documentation links for UI telemetry components (#2428)

* Add documentation links for UI telemetry in EnableUiTelemetry and UiTelemetryToggle components

* Add Privacy Policy link to telemetry description in EnableUiTelemetry component

Author: pablomendezroyo

packages/admin-ui/src/components/welcome/features/EnableUiTelemetry.tsx

@@ -2,6 +2,7 @@ import React, { useState } from "react";
 import BottomButtons from "../BottomButtons";
 import SwitchBig from "components/SwitchBig";
 import { api } from "api";
+import { docsUrl, externalUrlProps } from "params";
 
 export default function EnableUiTelemetry({ onBack, onNext }: { onBack?: () => void; onNext: () => void }) {
   const [telemetryOn, setTelemetryOn] = useState(true);
@@ -19,53 +20,21 @@ export default function EnableUiTelemetry({ onBack, onNext }: { onBack?: () => v
         <div className="title">Help improve Dappnode</div>
         <div className="description">
           <p>
-            You can optionally enable telemetry to help us improve Dappnode.
-            When enabled, we collect usage data such as UI interactions,
-            performance metrics, and error reports.
+            Help us improve Dappnode by enabling telemetry. We collect usage data, performance metrics, and error
+            reports. You can disable this at any time in System &gt; Advanced.{" "}
+            <a href={docsUrl.uiTelemetry} {...externalUrlProps}>
+              Learn more
+            </a>
+            {" · "}
+            <a href="https://dappnode.com/pages/privacy-policy" {...externalUrlProps}>
+              Privacy Policy
+            </a>
           </p>
-
-          <p>
-            By enabling this option, you consent to the collection and processing of this telemetry data.
-            You can disable telemetry at any time in System &gt; Advanced.
-          </p>
-
-          <details style={{ textAlign: "left", marginTop: "0.5rem" }}>
-            <summary style={{ cursor: "pointer", fontWeight: 500 }}>What data is collected and why?</summary>
-
-            <ul style={{ paddingLeft: "1.5rem", marginTop: "0.5rem" }}>
-              <li>
-                <strong>Improve Dappnode:</strong> Your usage data helps us understand how features are used and where
-                issues occur, so we can build a better product.
-              </li>
-              <li>
-                <strong>Better support:</strong> Telemetry helps the Dappnode team diagnose and resolve issues faster
-                when you reach out for support.
-              </li>
-            </ul>
-
-            <p>
-              This data includes your IP address and a pseudonymous persistent session identifier to understand usage over time.
-              Telemetry is proxied through Dappnode infrastructure and processed using third-party services such as Grafana Cloud.
-            </p>
-
-            <p style={{ fontSize: "0.85rem", opacity: 0.8 }}>
-              Learn more in our{" "}
-              <a href="https://dappnode.com/pages/privacy-policy" target="_blank" rel="noopener noreferrer">
-                Privacy Policy
-              </a>
-              .
-            </p>
-          </details>
         </div>
       </div>
 
       <div className="auto-updates-switch">
-        <SwitchBig
-          checked={telemetryOn}
-          onChange={setTelemetryOn}
-          label="Enable anonymous telemetry"
-          id="enable-ui-telemetry"
-        />
+        <SwitchBig checked={telemetryOn} onChange={setTelemetryOn} label="Enable telemetry" id="enable-ui-telemetry" />
       </div>
 
       <BottomButtons onBack={onBack} onNext={onSubmit} />

packages/admin-ui/src/pages/system/components/Advanced/UiTelemetryToggle.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import { api, useApi } from "api";
 import { withToast } from "components/toast/Toast";
 import Switch from "components/Switch";
+import { docsUrl, externalUrlProps } from "params";
 import "./uiTelemetryToggle.scss";
 
 export function UiTelemetryToggle() {
@@ -19,8 +20,11 @@ export function UiTelemetryToggle() {
   return (
     <div className="ui-telemetry-wrapper">
       <div>
-        Send usage data, errors, and performance metrics to help improve Dappnode and allow the team to better
-        support you if you run into any issue.
+        Send usage data, errors, and performance metrics to help improve Dappnode and allow the team to better support
+        you if you run into any issue.{" "}
+        <a href={docsUrl.uiTelemetry} {...externalUrlProps}>
+          Learn more
+        </a>
       </div>
       <Switch
         checked={enabled}

packages/admin-ui/src/params.ts

@@ -113,7 +113,8 @@ export const docsUrl = {
   premiumOverview: `${docsBaseUrl}/docs/user/dappnode-premium/overview`,
   premiumBackupNode: `${docsBaseUrl}/docs/user/dappnode-premium/premium-services#backup-node-for-validators`,
   premiumBackupValidatorsLimit: `${docsBaseUrl}/docs/user/dappnode-premium/premium-services#validators-limit`,
-  starknetDocs: `${docsBaseUrl}/docs/user/staking/starknet/solo`
+  starknetDocs: `${docsBaseUrl}/docs/user/staking/starknet/solo`,
+  uiTelemetry: `${docsBaseUrl}/docs/user/ui-telemetry`
 };
 
 export const forumUrl = {