[Page Shield] Use DashButton for zone-level instructions (#25896)

Author: pedrosousa

src/content/docs/page-shield/best-practices/handle-an-alert.mdx

@@ -9,7 +9,7 @@ description: >-
   If you receive a client-side resource alert, sometimes you need to perform some manual investigation to confirm the nature of the script. Use the guidance provided in this page as a starting point for your investigation.
 ---
 
-import { Steps } from "~/components";
+import { Steps, Tabs, TabItem, DashButton } from "~/components";
 
 If you receive a [client-side resource alert](/page-shield/alerts/alert-types/), sometimes you need to perform some manual investigation to confirm the nature of the script. Use the guidance provided in this page as a starting point for your investigation.
 
@@ -19,15 +19,32 @@ Start by identifying the [detection system](/page-shield/how-it-works/malicious-
 
 <Steps>
 
-1. Log in to the [Cloudflare dashboard](https://dash.cloudflare.com/), and select your account and domain.
-2. Navigate to the client-side resource monitoring page:
-   - Old dashboard: Go to **Security** > **Page Shield**.
-   - New security dashboard: Go to **Security** > **Web assets** > **Client-side resources** tab.
-3. Select **Scripts** or **Connections** and search for the resource mentioned on the alert you received.
-4. Select **Details** next to the resource you identified. The example screenshot below shows a malicious script resource.
+{/* prettier-ignore-start */}
+
+1. Navigate to the client-side resources page:
+
+   <Tabs syncKey="dashNewNav"> <TabItem label="Old dashboard">
+
+   1. Log in to the [Cloudflare dashboard](https://dash.cloudflare.com/), and select your account and domain.
+   2. Go to **Security** > **Page Shield**.
+
+   </TabItem> <TabItem label="New dashboard" icon="rocket">
+
+   1. In the Cloudflare dashboard, go to the **Web assets** page.
+
+      <DashButton url="/?to=/:account/:zone/security/web-assets" />
+
+   2. Select the **Client-side resources** tab.
+
+   </TabItem> </Tabs>
+
+2. Select **Scripts** or **Connections** and search for the resource mentioned on the alert you received.
+3. Select **Details** next to the resource you identified. The example screenshot below shows a malicious script resource.
 
    ![Dialog box showing the details of a script considered malicious.](~/assets/images/page-shield/handle-alert-malicious-script-example.png)
 
+{/* prettier-ignore-end */}
+
 </Steps>
 
 The details page will specify which detection system triggered the alert. Check the values of the following fields:

src/content/docs/page-shield/detection/monitor-connections-scripts.mdx

@@ -5,7 +5,14 @@ sidebar:
   order: 2
 ---
 
-import { Render, Markdown, Steps } from "~/components";
+import {
+	Render,
+	Markdown,
+	Steps,
+	Tabs,
+	TabItem,
+	DashButton,
+} from "~/components";
 
 Once you [activate Page Shield's client-side resource monitoring](/page-shield/get-started/), the main client-side resources dashboard will show which resources (scripts and connections) are running on your domain, as well as the cookies recently detected in HTTP traffic.
 
@@ -26,13 +33,24 @@ To review the resources detected by Cloudflare:
 
 <Steps>
 
-1. Log in to the [Cloudflare dashboard](https://dash.cloudflare.com/), and select your account and domain.
+1. Go to the client-side resources page:
 
-2. Go to the client-side resources page:
-   - Old dashboard: Go to **Security** > **Page Shield**.
-   - New security dashboard: Go to **Security** > **Web assets** > **Client-side resources** tab.
+   <Tabs syncKey="dashNewNav"> <TabItem label="Old dashboard">
 
-3. Review the list of scripts, connections, and cookies for your domain, depending on your plan. To apply a filter, select **Add filter** and use one or more of the available options.
+   1. Log in to the [Cloudflare dashboard](https://dash.cloudflare.com/), and select your account and domain.
+   2. Go to **Security** > **Page Shield**.
+
+   </TabItem> <TabItem label="New dashboard" icon="rocket">
+
+   1. In the Cloudflare dashboard, go to the **Web assets** page.
+
+      <DashButton url="/?to=/:account/:zone/security/web-assets" />
+
+   2. Select the **Client-side resources** tab.
+
+   </TabItem> </Tabs>
+
+2. Review the list of scripts, connections, and cookies for your domain, depending on your plan. To apply a filter, select **Add filter** and use one or more of the available options.
 
    <details>
    <summary>Available filters</summary>
@@ -47,7 +65,7 @@ To review the resources detected by Cloudflare:
 
    </details>
 
-4. Depending on your plan, you may be able to [view the details of each item](#view-details).
+3. Depending on your plan, you may be able to [view the details of each item](#view-details).
 
 </Steps>
 
@@ -59,14 +77,30 @@ The All Reported Connections and All Reported Scripts dashboards show all the de
 
 <Steps>
 
-1. Log in to the [Cloudflare dashboard](https://dash.cloudflare.com/), and select your account and domain.
-2. Go to the client-side resources page:
-   - Old dashboard: Go to **Security** > **Page Shield**.
-   - New security dashboard: Go to **Security** > **Web assets** > **Client-side resources** tab.
+{/* prettier-ignore-start */}
+
+1. Go to the client-side resources page:
+
+   <Tabs syncKey="dashNewNav"> <TabItem label="Old dashboard">
+
+   1. Log in to the [Cloudflare dashboard](https://dash.cloudflare.com/), and select your account and domain.
+   2. Go to **Security** > **Page Shield**.
 
-3. Select **Scripts** or **Connections**.
-4. Select **View all scripts** or **View all connections**.
-5. Review the information displayed in the dashboard.
+   </TabItem> <TabItem label="New dashboard" icon="rocket">
+
+   1. In the Cloudflare dashboard, go to the **Web assets** page.
+
+      <DashButton url="/?to=/:account/:zone/security/web-assets" />
+
+   2. Select the **Client-side resources** tab.
+
+   </TabItem> </Tabs>
+
+2. Select **Scripts** or **Connections**.
+3. Select **View all scripts** or **View all connections**.
+4. Review the information displayed in the dashboard.
+
+{/* prettier-ignore-end */}
 
 </Steps>
 
@@ -78,19 +112,32 @@ You can filter the data in these dashboards using different criteria, and print
 Only available to customers on Business and Enterprise plans.
 :::
 
-To view the details of an item:
-
 <Steps>
 
-1. Log in to the [Cloudflare dashboard](https://dash.cloudflare.com/), and select your account and domain.
+{/* prettier-ignore-start */}
+
+1. Go to the client-side resources page:
 
-2. Go to the client-side resources page:
-   - Old dashboard: Go to **Security** > **Page Shield**.
-   - New security dashboard: Go to **Security** > **Web assets** > **Client-side resources** tab.
+   <Tabs syncKey="dashNewNav"> <TabItem label="Old dashboard">
 
-3. Select **Scripts**, **Connections**, or **Cookies** (the available options depend on your plan).
+   1. Log in to the [Cloudflare dashboard](https://dash.cloudflare.com/), and select your account and domain.
+   2. Go to **Security** > **Page Shield**.
 
-4. Next to a script, connection, or cookie in the list, select **Details**.
+   </TabItem> <TabItem label="New dashboard" icon="rocket">
+
+   1. In the Cloudflare dashboard, go to the **Web assets** page.
+
+      <DashButton url="/?to=/:account/:zone/security/web-assets" />
+
+   2. Select the **Client-side resources** tab.
+
+   </TabItem> </Tabs>
+
+2. Select **Scripts**, **Connections**, or **Cookies** (the available options depend on your plan).
+
+3. Next to a script, connection, or cookie in the list, select **Details**.
+
+{/* prettier-ignore-end */}
 
 </Steps>
 
@@ -150,13 +197,29 @@ To export script, connection, or cookie information in CSV format:
 
 <Steps>
 
-1. Log in to the [Cloudflare dashboard](https://dash.cloudflare.com/), and select your account and domain.
-2. Go to the client-side resources page:
-   - Old dashboard: Go to **Security** > **Page Shield**.
-   - New security dashboard: Go to **Security** > **Web assets** > **Client-side resources** tab.
+{/* prettier-ignore-start */}
+
+1. Go to the client-side resources page:
 
-3. Select **Scripts**, **Connections**, or **Cookies**.
-4. (Optional) Apply any filters to the displayed data.
-5. Select **Download CSV**.
+   <Tabs syncKey="dashNewNav"> <TabItem label="Old dashboard">
+
+   1. Log in to the [Cloudflare dashboard](https://dash.cloudflare.com/), and select your account and domain.
+   2. Go to **Security** > **Page Shield**.
+
+   </TabItem> <TabItem label="New dashboard" icon="rocket">
+
+   1. In the Cloudflare dashboard, go to the **Web assets** page.
+
+      <DashButton url="/?to=/:account/:zone/security/web-assets" />
+
+   2. Select the **Client-side resources** tab.
+
+   </TabItem> </Tabs>
+
+2. Select **Scripts**, **Connections**, or **Cookies**.
+3. (Optional) Apply any filters to the displayed data.
+4. Select **Download CSV**.
+
+{/* prettier-ignore-end */}
 
 </Steps>

src/content/docs/page-shield/detection/review-changed-scripts.mdx

@@ -7,7 +7,7 @@ head: []
 description: Learn how to review scripts on your domain after receiving a code change alert.
 ---
 
-import { Steps } from "~/components";
+import { Steps, Tabs, TabItem, DashButton } from "~/components";
 
 :::note
 Available as a paid add-on for customers on an Enterprise plan.
@@ -21,11 +21,27 @@ When you receive such a notification:
 
 <Steps>
 
-1. Log in to the [Cloudflare dashboard](https://dash.cloudflare.com/), and select your account and domain.
-2. Go to the client-side resources page:
-   - Old dashboard: Go to **Security** > **Page Shield**.
-   - New security dashboard: Go to **Security** > **Web assets** > **Client-side resources** tab.
+{/* prettier-ignore-start */}
 
-3. Check the details of each changed script and validate if it is an expected change.
+1. Go to the client-side resources page:
+
+   <Tabs syncKey="dashNewNav"> <TabItem label="Old dashboard">
+
+   1. Log in to the [Cloudflare dashboard](https://dash.cloudflare.com/), and select your account and domain.
+   2. Go to **Security** > **Page Shield**.
+
+   </TabItem> <TabItem label="New dashboard" icon="rocket">
+
+   1. In the Cloudflare dashboard, go to the **Web assets** page.
+
+      <DashButton url="/?to=/:account/:zone/security/web-assets" />
+
+   2. Select the **Client-side resources** tab.
+
+   </TabItem> </Tabs>
+
+2. Check the details of each changed script and validate if it is an expected change.
+
+{/* prettier-ignore-end */}
 
 </Steps>

src/content/docs/page-shield/detection/review-malicious-scripts.mdx

@@ -8,7 +8,7 @@ description: Learn how to review scripts and connections that Page Shield
   considered malicious.
 ---
 
-import { Render, Steps } from "~/components";
+import { Render, Steps, Tabs, TabItem, DashButton } from "~/components";
 
 :::note
 Only available to Enterprise customers with a paid add-on.
@@ -22,15 +22,28 @@ To review the scripts considered malicious:
 
 <Steps>
 
-1. Log in to the [Cloudflare dashboard](https://dash.cloudflare.com/), and select your account and domain.
+{/* prettier-ignore-start */}
 
-2. Go to the client-side resources page:
-   - Old dashboard: Go to **Security** > **Page Shield**.
-   - New security dashboard: Go to **Security** > **Web assets** > **Client-side resources** tab.
+1. Go to the client-side resources page:
 
-3. Select the **Scripts** tab.
+   <Tabs syncKey="dashNewNav"> <TabItem label="Old dashboard">
 
-4. Select **Details** for each script considered malicious. The script details will contain:
+   1. Log in to the [Cloudflare dashboard](https://dash.cloudflare.com/), and select your account and domain.
+   2. Go to **Security** > **Page Shield**.
+
+   </TabItem> <TabItem label="New dashboard" icon="rocket">
+
+   1. In the Cloudflare dashboard, go to the **Web assets** page.
+
+      <DashButton url="/?to=/:account/:zone/security/web-assets" />
+
+   2. Select the **Client-side resources** tab.
+
+   </TabItem> </Tabs>
+
+2. Select the **Scripts** tab.
+
+3. Select **Details** for each script considered malicious. The script details will contain:
    - **Malicious code analysis**: Scores between 1-99 classifying how malicious the current script version is, where 1 means definitely malicious and 99 means definitely not malicious.
    - **Code behavior analysis**: Scores classifying the behavior of the current script version in terms of code obfuscation and data exfiltration. The scores vary between 1-99, where 1 means definitely malicious and 99 means definitely not malicious.
    - **Threat intelligence**: Whether the script URL and/or domain is known to be malicious according to threat intelligence feeds. If the script is considered malicious according to the feeds, the dashboard will show a list of associated threat [categories](/page-shield/how-it-works/malicious-script-detection/#malicious-script-and-connection-categories). If threat intelligence feeds do not have any information about the script URL or domain, the dashboard will show **Not present**.
@@ -41,7 +54,9 @@ To review the scripts considered malicious:
 
    For more information, refer to [Malicious script and connection detection](/page-shield/how-it-works/malicious-script-detection/).
 
-5. Based on the displayed information, and with the help of the [last seen/first seen fields in the script details](/page-shield/detection/monitor-connections-scripts/#view-details), review and update the pages where the malicious script was detected.
+4. Based on the displayed information, and with the help of the [last seen/first seen fields in the script details](/page-shield/detection/monitor-connections-scripts/#view-details), review and update the pages where the malicious script was detected.
+
+{/* prettier-ignore-end */}
 
 </Steps>
 
@@ -53,21 +68,36 @@ To review the connections considered malicious:
 
 <Steps>
 
-1. Log in to the [Cloudflare dashboard](https://dash.cloudflare.com/), and select your account and domain.
+{/* prettier-ignore-start */}
 
-2. Go to the client-side resources page:
-   - Old dashboard: Go to **Security** > **Page Shield**.
-   - New security dashboard: Go to **Security** > **Web assets** > **Client-side resources** tab.
+1. Go to the client-side resources page:
 
-3. Select **Connections**.
+   <Tabs syncKey="dashNewNav"> <TabItem label="Old dashboard">
 
-4. Select **Details** for each connection considered malicious. The connection details will contain:
+   1. Log in to the [Cloudflare dashboard](https://dash.cloudflare.com/), and select your account and domain.
+   2. Go to **Security** > **Page Shield**.
+
+   </TabItem> <TabItem label="New dashboard" icon="rocket">
+
+   1. In the Cloudflare dashboard, go to the **Web assets** page.
+
+      <DashButton url="/?to=/:account/:zone/security/web-assets" />
+
+   2. Select the **Client-side resources** tab.
+
+   </TabItem> </Tabs>
+
+2. Select **Connections**.
+
+3. Select **Details** for each connection considered malicious. The connection details will contain:
    - **URL match**: Whether the connection's target URL is known to be malicious according to threat intelligence feeds. This field requires that you configure Page Shield to analyze the [full URI](/page-shield/reference/settings/#connection-target-details) of outgoing connections.
    - **Domain match**: Whether the connection's target domain is known to be malicious according to threat intelligence feeds.
    - **Category**: The categorization of the connection considered malicious according to threat intelligence feeds.
 
    For more information, refer to [Malicious script and connection detection](/page-shield/how-it-works/malicious-script-detection/).
 
-5. Based on the displayed information, and with the help of the [last seen/first seen fields in the connection details](/page-shield/detection/monitor-connections-scripts/#view-details), review and update the pages where the malicious connection was detected.
+4. Based on the displayed information, and with the help of the [last seen/first seen fields in the connection details](/page-shield/detection/monitor-connections-scripts/#view-details), review and update the pages where the malicious connection was detected.
+
+{/* prettier-ignore-end */}
 
 </Steps>