[Network, Magic partials] Use DashButton component (#24930)

pedrosousa · web-flow · commit 71d7640535fb · 2025-09-08T10:58:37.000+01:00
diff --git a/src/content/docs/learning-paths/data-center-protection/configure-tunnels-routes/configure-routes.mdx b/src/content/docs/learning-paths/data-center-protection/configure-tunnels-routes/configure-routes.mdx
@@ -18,6 +18,7 @@ import { Render } from "~/components"
 		routePrioritization: "/magic-transit/reference/traffic-steering/#route-prioritization",
 		chooseWeights: "/magic-transit/reference/traffic-steering/#set-priority-and-weights-for-static-routes",
 		publicAsnMT: "[Public ASNs used for Magic Transit](/magic-transit/how-to/advertise-prefixes/#cloudflare-asn-vs-your-own-asn) are verified during the onboarding process.",
-		productGatewayOrEgress: "Magic Transit with Egress"
+		productGatewayOrEgress: "Magic Transit with Egress",
+		dashButtonPath: "/?to=/:account/magic-transit/configuration"
 	}}
 />
diff --git a/src/content/docs/learning-paths/data-center-protection/configure-tunnels-routes/configure-tunnels.mdx b/src/content/docs/learning-paths/data-center-protection/configure-tunnels-routes/configure-tunnels.mdx
@@ -16,7 +16,8 @@ import { GlossaryTooltip, Render } from "~/components";
 		ciphersPagePath: "/magic-transit/reference/gre-ipsec-tunnels/#supported-configuration-parameters",
 		antiReplayPagePath: "/magic-transit/reference/anti-replay-protection/",
 		cniLink: "/magic-transit/network-interconnect/",
-		productPathDash: "Magic Transit > Configuration",
+		targetPageName: "Configuration",
+		dashButtonPath: "/?to=/:account/magic-transit/configuration",
 		updateHCFrequencyPage: "/magic-transit/network-health/update-tunnel-health-checks-frequency/",
 		tunnelHealthChecksPage: "/magic-transit/reference/tunnel-health-checks/",
 		antiReplayPagePath: "/magic-transit/reference/anti-replay-protection/",
diff --git a/src/content/docs/magic-transit/analytics/traceroutes.mdx b/src/content/docs/magic-transit/analytics/traceroutes.mdx
@@ -10,5 +10,8 @@ import { Render } from "~/components";
 <Render
 	file="analytics/traceroutes"
 	product="networking-services"
-	params={{ productName: "Transit" }}
+	params={{
+		productName: "Transit",
+		dashButtonPath: "/?to=/:account/magic-transit/tunnel-healthchecks",
+	}}
 />
diff --git a/src/content/docs/magic-transit/how-to/configure-routes.mdx b/src/content/docs/magic-transit/how-to/configure-routes.mdx
@@ -21,6 +21,7 @@ import { Render } from "~/components"
 		routePrioritization: "/magic-transit/reference/traffic-steering/#route-prioritization",
 		chooseWeights: "/magic-transit/reference/traffic-steering/#set-priority-and-weights-for-static-routes",
 		publicAsnMT: "[Public ASNs used for Magic Transit](/magic-transit/how-to/advertise-prefixes/#cloudflare-asn-vs-your-own-asn) are verified during the onboarding process.",
-		productGatewayOrEgress: "Magic Transit with Egress"
+		productGatewayOrEgress: "Magic Transit with Egress",
+		dashButtonPath: "/?to=/:account/magic-transit/configuration"
 	}}
 />
diff --git a/src/content/docs/magic-transit/how-to/configure-tunnel-endpoints.mdx b/src/content/docs/magic-transit/how-to/configure-tunnel-endpoints.mdx
@@ -20,7 +20,8 @@ import { Render } from "~/components";
 		ciphersPagePath: "/magic-transit/reference/gre-ipsec-tunnels/#supported-configuration-parameters",
 		antiReplayPagePath: "/magic-transit/reference/anti-replay-protection/",
 		cniLink: "/magic-transit/network-interconnect/",
-		productPathDash: "Magic Transit > Configuration",
+		targetPageName: "Configuration",
+		dashButtonPath: "/?to=/:account/magic-transit/configuration",
 		updateHCFrequencyPage: "/magic-transit/network-health/update-tunnel-health-checks-frequency/",
 		tunnelHealthChecksPage: "/magic-transit/reference/tunnel-health-checks/",
 		antiReplayPagePath: "/magic-transit/reference/anti-replay-protection/",
diff --git a/src/content/docs/magic-wan/analytics/traceroutes.mdx b/src/content/docs/magic-wan/analytics/traceroutes.mdx
@@ -7,7 +7,11 @@ sidebar:
 
 import { Render } from "~/components";
 
-<Render file="analytics/traceroutes"
+<Render
+	file="analytics/traceroutes"
 	product="networking-services"
-	params={{ productName: "WAN" }}
+	params={{
+		productName: "WAN",
+		dashButtonPath: "/?to=/:account/magic-wan/tunnel-healthchecks",
+	}}
 />
diff --git a/src/content/docs/magic-wan/configuration/manually/how-to/configure-routes.mdx b/src/content/docs/magic-wan/configuration/manually/how-to/configure-routes.mdx
@@ -21,7 +21,8 @@ import { Render } from "~/components"
 		routePrioritization: "/magic-wan/reference/traffic-steering/#route-prioritization",
 		chooseWeights: "/magic-wan/reference/traffic-steering/#set-priority-and-weights-for-static-routes",
 		publicAsnMT: " ",
-		productGatewayOrEgress: "Magic WAN with Gateway"
+		productGatewayOrEgress: "Magic WAN with Gateway",
+		dashButtonPath: "/?to=/:account/magic-wan/configuration"
 	}}
 />
 
diff --git a/src/content/docs/magic-wan/configuration/manually/how-to/configure-tunnel-endpoints.mdx b/src/content/docs/magic-wan/configuration/manually/how-to/configure-tunnel-endpoints.mdx
@@ -20,7 +20,8 @@ import { GlossaryTooltip, Render } from "~/components";
 		ciphersPagePath: "/magic-wan/reference/gre-ipsec-tunnels/#supported-configuration-parameters",
 		antiReplayPagePath: "/magic-wan/reference/anti-replay-protection/",
 		cniLink: "/magic-wan/network-interconnect/",
-		productPathDash: "Magic WAN > Configuration",
+		targetPageName: "Configuration",
+		dashButtonPath: "/?to=/:account/magic-wan/configuration",
 		updateHCFrequencyPage: "/magic-wan/configuration/common-settings/tunnel-health-checks-frequency/",
 		tunnelHealthChecksPage: "/magic-wan/reference/tunnel-health-checks/",
 		antiReplayPagePath: "/magic-wan/reference/anti-replay-protection/",
diff --git a/src/content/partials/networking-services/analytics/traceroutes.mdx b/src/content/partials/networking-services/analytics/traceroutes.mdx
@@ -1,18 +1,21 @@
 ---
 params:
   - productName
+  - dashButtonPath
 ---
 
-import { Markdown } from "~/components";
+import { DashButton } from "~/components";
 
 Magic {props.productName} customers can run traceroutes to understand the hop by hop Internet path and latencies from Cloudflare's network to their own network.
 
 To run a traceroute from a specific Cloudflare data center to your network:
 
-1. Log in to the [Cloudflare dashboard](https://dash.cloudflare.com/) and select your account.
-2. Go to **Magic {props.productName}** > **Tunnel Health**.
-3. Expand a Magic Tunnel, and find the Cloudflare data center where the traceroute will be run from.
-4. Select **Traceroute for details**.
+1. In the Cloudflare dashboard, go to Magic {props.productName}'s **Network health** page.
+
+	 <DashButton url={props.dashButtonPath} />
+
+2. Expand a Magic Tunnel, and find the Cloudflare data center where the traceroute will be run from.
+3. Select **Traceroute for details**.
 
 You can access detailed data from the traceroute, including:
 
diff --git a/src/content/partials/networking-services/magic-user-role.mdx b/src/content/partials/networking-services/magic-user-role.mdx
@@ -3,17 +3,21 @@
 
 ---
 
+import { DashButton } from "~/components";
+
 You can determine which users have, or do not have, configuration edit access for Magic products, including Magic Transit, Magic WAN, and Magic Firewall.
 
 For example, if you have multiple Cloudflare products managed by different teams on the same account, you may want to provide select users with edit access and other users with read-only access.
 
 ## Assign permissions
 
-1. Log in to the [Cloudflare dashboard](https://dash.cloudflare.com/login), and select your account.
-2. From your Account Home, go to **Manage Account** > **Members**.
-3. Under **Members**, enter an existing user's name and select **Search**.
-4. Expand the menu at the end of the user row.
-5. From the list, locate **Network Services (Magic)**.
-6. Select one of two options:
+1. In the Cloudflare dashboard, go to the **Members** page.
+
+	 <DashButton url="/?to=/:account/members" />
+
+2. Under **Members**, enter an existing user's name and select **Search**.
+3. Expand the menu at the end of the user row.
+4. From the list, locate **Network Services (Magic)**.
+5. Select one of two options:
    - **Network Services (Magic)** - Enables users to view and edit Magic configurations.
    - **Network Services (Magic, Read-Only)** - Enables users to view but not modify Magic configurations.
diff --git a/src/content/partials/networking-services/mconn/configure-connectors.mdx b/src/content/partials/networking-services/mconn/configure-connectors.mdx
@@ -10,7 +10,18 @@ params:
   - finalInstructions
 ---
 
-import { AnchorHeading, Aside, Card, Code, GlossaryTooltip, Markdown, Render, Tabs, TabItem } from "~/components";
+import {
+  AnchorHeading,
+  Aside,
+  Card,
+  Code,
+  GlossaryTooltip,
+  Markdown,
+  Render,
+  Tabs,
+  TabItem,
+  DashButton,
+} from "~/components";
 
 { props.magicWord === "virtual" && (
 	<>
@@ -513,8 +524,11 @@ After finishing your Connector configuration, you need to add it to a site. <Ren
 
 When you are ready to connect your Magic WAN Connector to the Cloudflare network:
 
-1. Log in to the [Cloudflare dashboard](https://dash.cloudflare.com/) and select your account.
-2. Go to **Magic WAN** > **Configuration** > **Connectors**.
+1. In the Cloudflare dashboard, go to Magic WAN's **Configuration** page.
+
+   <DashButton url="/?to=/:account/magic-wan/configuration" />
+
+2. Go to **Connectors**.
 3. Find the Connector you want to activate, select the three dots next to it > **Edit**. Make sure you verify the serial number to choose the right connector you want to activate.
 4. In the new window, the **Status** dropdown will show as **Deactivated**. Select it to change the status to **Activated**.
 5. The **Interrupt window** is the time period when the Magic WAN Connector software can update, which may result in interruption to existing connections. Choose a time period to minimize disruption to your sites. Refer to [Interrupt window](/magic-wan/configuration/connector/maintenance/interrupt-service-window/) for more details on how to define when the Connector can update its systems.
@@ -769,10 +783,13 @@ Magic WAN Connector automatically creates [IPsec tunnels](/magic-wan/reference/g
 
 To check the IPsec tunnels and static routes created by your Magic WAN Connector:
 
-1. Log in to the [Cloudflare dashboard](https://dash.cloudflare.com/) and select your account.
-2. Go to **Magic WAN** > **Sites**.
-3. Select the name of the site for which you want to check the Connector's IPsec tunnels and static routes, and select **Edit**.
-4. Select **Tunnels** to check IPsec tunnels, and **Routes** for the static routes.
+1. In the Cloudflare dashboard, go to the **Sites** page.
+
+   <DashButton url="/?to=/:account/magic-wan/sites" />
+
+2. Select the name of the site for which you want to check the Connector's IPsec tunnels and static routes, and select **Edit**.
+
+3. Select **Tunnels** to check IPsec tunnels, and **Routes** for the static routes.
 
 ---
 
diff --git a/src/content/partials/networking-services/mconn/register-hardware-appliance.mdx b/src/content/partials/networking-services/mconn/register-hardware-appliance.mdx
@@ -2,11 +2,15 @@
 {}
 ---
 
-1. Log in to the [Cloudflare dashboard](https://dash.cloudflare.com/) and select your account.
-2. Go to **Magic WAN** > **Configuration**.
-3. Under **Connectors**, select **Register your appliance**.
-4. In **Appliance details** > **Serial number**, insert the serial number for your device. You can optionally add notes about the Magic WAN Connector you are adding to the dashboard.
-5. (Optional) Select **Add** below **Serial number** to add multiple Magic WAN Connectors at once to your account.
-6. Select **Register appliance**.
-
-Your device is now registered with your account. Select **Add on-ramps** to continue with the setup process, or **Return to connections** to check your newly added Connector.
+import { DashButton } from "~/components";
+
+1. In the Cloudflare dashboard, go to Magic WAN's **Configuration** page.
+
+   <DashButton url="/?to=/:account/magic-wan/configuration" />
+
+2. Under **Connectors**, select **Register your appliance**.
+3. In **Appliance details** > **Serial number**, insert the serial number for your device. You can optionally add notes about the Magic WAN Connector you are adding to the dashboard.
+4. (Optional) Select **Add** below **Serial number** to add multiple Magic WAN Connectors at once to your account.
+5. Select **Register appliance**.
+
+Your device is now registered with your account. Select **Add on-ramps** to continue with the setup process, or **Return to connections** to check your newly added Connector.
diff --git a/src/content/partials/networking-services/routing/configure-routes.mdx b/src/content/partials/networking-services/routing/configure-routes.mdx
@@ -8,9 +8,10 @@ params:
   - routePrioritization
   - chooseWeights
   - productGatewayOrEgress
+  - dashButtonPath
 ---
 
-import { Aside, APIRequest, Markdown, Render, TabItem, Tabs } from "~/components";
+import { Aside, APIRequest, Markdown, Render, TabItem, Tabs, DashButton } from "~/components";
 
 Magic Networking uses a routing table to steer your traffic via next-hop from Cloudflare's global network to your connected networks. Entries can be added to the Magic routing table via static route configuration or via routes learned through BGP peering (only available over Direct CNI).
 
@@ -32,20 +33,22 @@ Refer to <a href={props.trafficSteeringPage}>Traffic Steering</a> for more infor
 
 <Tabs syncKey="dashPlusAPI"> <TabItem label="Dashboard">
 
-1. Log in to the [Cloudflare dashboard](https://dash.cloudflare.com/login), and select your account.
-2. Go to **{props.productName}** > **Configuration**.
-3. From the **Routes** tab, select **Create** to add a new route.
-4. Enter a descriptive name for your route in **Description**.
-5. In **Prefix**, enter your range of IP addresses. For example, `10.10.10.100/24`.
-6. In **Tunnel/Next hop** select which tunnel you want your route to go through. Choose from the tunnels you have created in <a href={props.tunnelEndpoints}>Configure tunnel endpoints</a>.
-7. Choose the **Priority** for your route. Lower numbers have higher priorities.
+1. In the Cloudflare dashboard, go to {props.productName}'s **Configuration** page.
+
+	 <DashButton url={props.dashButtonPath} />
+
+2. From the **Routes** tab, select **Create** to add a new route.
+3. Enter a descriptive name for your route in **Description**.
+4. In **Prefix**, enter your range of IP addresses. For example, `10.10.10.100/24`.
+5. In **Tunnel/Next hop** select which tunnel you want your route to go through. Choose from the tunnels you have created in <a href={props.tunnelEndpoints}>Configure tunnel endpoints</a>.
+6. Choose the **Priority** for your route. Lower numbers have higher priorities.
 	:::note
 	<Render file="longest-prefix-match" product="networking-services/reference" /> Have this in mind when configuring priorities for your routes. Refer to <a href={props.routePrioritization}>Route prioritization</a> for more information.
 	:::
-8. (Optional) Choose a **Weight** for your route. Refer to <a href={props.chooseWeights}>Set priority and weights for static routes</a> for examples.
-9. (Optional) If you need to scope your route to a specific region, you can do it in **Region code**.
-10. (Optional) We highly recommend testing your route before adding it by selecting **Test routes**.
-11. Select **Add routes** when you are done.
+7. (Optional) Choose a **Weight** for your route. Refer to <a href={props.chooseWeights}>Set priority and weights for static routes</a> for examples.
+8. (Optional) If you need to scope your route to a specific region, you can do it in **Region code**.
+9. (Optional) We highly recommend testing your route before adding it by selecting **Test routes**.
+10. Select **Add routes** when you are done.
 
 </TabItem> <TabItem label="API">
 
@@ -263,8 +266,11 @@ The Magic routing table is managed by the customer, who can select both the Clou
 
 By default, each BGP peering session will use the same Cloudflare-side ASN to represent peering with the {props.productName} routing table. This ASN is called the **CF Account ASN** and is set to `13335`. This can be configured to a private 2-byte ASN (for example, any values between `64512` and `65534`). To set this ASN:
 
-1. Log in to the [Cloudflare dashboard](https://dash.cloudflare.com/), and select your account.
-2. Go to **{props.productName}** > **Configuration** > **BGP**.
+1. In the Cloudflare dashboard, go to {props.productName}'s **Configuration** page.
+
+	 <DashButton url={props.dashButtonPath} />
+
+2. Go to **BGP configuration**.
 3. In **CF Account ASN**, enter Cloudflare's ASN.
 4. Select **Update**.
 
@@ -313,8 +319,11 @@ You need to configure two ASNs:
 
 If you already have set up your Cloudflare account ASN, you can skip steps two and three below.
 
-1. Log in to the [Cloudflare dashboard](https://dash.cloudflare.com/login), and select your account.
-2. Go to **{props.productName}** > **Configuration** > **BGP configuration**.
+1. In the Cloudflare dashboard, go to {props.productName}'s **Configuration** page.
+
+	 <DashButton url={props.dashButtonPath} />
+
+2. Go to **BGP configuration**.
 3. In **CF Account ASN**, enter Cloudflare's ASN.
 4. Go to **Interconnects**.
 5. Find the Direct CNI interconnect you want to configure with BGP > select the **three dots** next to it > **Configure BGP**.
diff --git a/src/content/partials/networking-services/routing/configure-tunnels.mdx b/src/content/partials/networking-services/routing/configure-tunnels.mdx
diff --git a/src/content/partials/networking-services/tunnel-health/magic-tunnel-health-alerts.mdx b/src/content/partials/networking-services/tunnel-health/magic-tunnel-health-alerts.mdx
diff --git a/src/content/partials/networking-services/tunnel-health/update-tunnel-health-checks-frequency.mdx b/src/content/partials/networking-services/tunnel-health/update-tunnel-health-checks-frequency.mdx
