Refactor arcade embeds (#11722)

* remove irrelevant title attributes from arcade embeds

* add Arcade embeds component

* add docs

* make link absolute to pass 404 linter

Author: a-hariti

docs/concepts/data-management/event-grouping/index.mdx

@@ -80,19 +80,7 @@ Stack trace rules can work as a combination of both SDK and project settings. As
 
 You can see a fingerprint by opening an issue, clicking "{} View JSON", and finding the _fingerprint_ property in that file. If the default grouping was used, you'll see "default" written there. If a different grouping was used, you'll see the actual fingerprint value itself.
 
-<div style={{"height":"0px","paddingBottom":"calc(56.88524590163935% + 41px)","position":"relative","width":"100%"}}>
-  <iframe
-    src="https://demo.arcade.software/8vE2p1OF0WRxjg7XN8HH?embed"
-    frameborder="0"
-    loading="lazy"
-    webkitallowfullscreen
-    mozallowfullscreen
-    allowfullscreen
-    allow="fullscreen;"
-    style={{"colorScheme":"light","height":"100%","left":"0px","position":"absolute","top":"0px","width":"100%"}}
-    title="View Issue Fingerprint"
-  ></iframe>
-</div>
+<Arcade src="https://demo.arcade.software/8vE2p1OF0WRxjg7XN8HH?embed" />
 
 ## Transaction Grouping Algorithms
 

docs/concepts/key-terms/environments/index.mdx

@@ -40,16 +40,4 @@ If a project is hidden, you won't see that environment in the environment select
 
 Follow along with the interactive demo below to see how to hide and unhide environments.
 
-<div style={{"height":"0px","paddingBottom":"calc(66.5403% + 41px)","position":"relative","width":"100%"}}>
-  <iframe
-    src="https://demo.arcade.software/GqXUGJBjoH5fOG5AMyLt?embed"
-    frameborder="0"
-    loading="lazy"
-    webkitallowfullscreen
-    mozallowfullscreen
-    allowfullscreen
-    allow="fullscreen;"
-    style={{"colorScheme":"light","height":"100%","left":"0px","position":"absolute","top":"0px","width":"100%"}}
-    title="Environments - Hide/show"
-  ></iframe>
-</div>
+<Arcade src="https://demo.arcade.software/GqXUGJBjoH5fOG5AMyLt?embed" />

docs/concepts/key-terms/tracing/trace-view.mdx

@@ -30,7 +30,6 @@ By default, the waterfall view shows a list of transactions. If you need more gr
 >
   <iframe
     src="https://demo.arcade.software/25H9paIDvBOQp5T3pFeW?embed&show_copy_link=true"
-    title="Trace View — Performance — sentry — Sentry"
     frameborder="0"
     loading="lazy"
     webkitallowfullscreen
@@ -45,7 +44,6 @@ By default, the waterfall view shows a list of transactions. If you need more gr
       top: "0px",
       width: "100%",
     }}
-    title="Trace View -> Error"
   ></iframe>
 </div>
 
@@ -59,68 +57,14 @@ Whatever you highlight will also be saved if you navigate away from the page and
 If you're doing a comparison and want an easy way to go back and forth between highlighted areas of interest in your trace, you can pin the tabs. When a tab is pinned, the view will be persistent throughout your session.
 
 <br />
-<div
-  style={{
-    height: "0px",
-    paddingBottom: "calc(66.66% + 41px)",
-    position: "relative",
-    width: "100%",
-  }}
->
-  <iframe
-    src="https://demo.arcade.software/yP3PFytK0ckfetjJTe52?embed&show_copy_link=true"
-    title="Sentry"
-    frameborder="0"
-    loading="lazy"
-    webkitallowfullscreen
-    mozallowfullscreen
-    allowfullscreen
-    allow="clipboard-write; fullscreen;"
-    style={{
-      colorScheme: "light",
-      height: "100%",
-      left: "0px",
-      position: "absolute",
-      top: "0px",
-      width: "100%",
-    }}
-    title="Trace View - Tabbing"
-  ></iframe>
-</div>
+<Arcade src="https://demo.arcade.software/yP3PFytK0ckfetjJTe52?embed&show_copy_link=true" />
 <br />
 Sometimes, duration gaps between entries can be small, but critical to your debugging
 effort. That's why the Trace View enables you to zoom into certain areas of the trace,
 either by double clicking on row elements (which zooms into the row) or by using
 your scroll wheel.
 <br />
-<div
-  style={{
-    height: "0px",
-    paddingBottom: "calc(66.66% + 41px)",
-    position: "relative",
-    width: "100%",
-  }}
->
-  <iframe
-    src="https://demo.arcade.software/U8JbMjFJR1KRiP4G4j4E?embed&show_copy_link=true"
-    title="Trace View — Performance — sentry — Sentry"
-    frameborder="0"
-    loading="lazy"
-    webkitallowfullscreen
-    mozallowfullscreen
-    allowfullscreen
-    allow="clipboard-write; fullscreen;"
-    style={{
-      colorScheme: "light",
-      height: "100%",
-      left: "0px",
-      position: "absolute",
-      top: "0px",
-      width: "100%",
-    }}
-    title="Trace View - Zooming"
-  ></iframe>
-</div>
+<Arcade src="https://demo.arcade.software/U8JbMjFJR1KRiP4G4j4E?embed&show_copy_link=true" />
 <br />
 The Trace View has other features like search, which makes it easy to visualize matching
 spans that you can then iterate over using the up or down arrows. You can also tailor

docs/contributing/pages/components.mdx

@@ -38,6 +38,18 @@ An Alert component with no level setting will render as a Note component.
 
 See also the [Note component](#note).
 
+## Arcade embeds
+
+Render an [Arcade](https://arcade.software) embed.
+<Arcade src="https://demo.arcade.software/v7uhzmdV6Q5PDzoVPAE6?embed&show_copy_link=true" />
+```markdown {tabTitle:Example}
+<Arcade src="https://demo.arcade.software/v7uhzmdV6Q5PDzoVPAE6?embed&show_copy_link=true" />
+```
+
+Attributes:
+
+- `src` (string) - the URL of the Arcade embed
+
 ## Expandable
 
 Render an expandable section.

docs/organization/integrations/integration-platform/index.mdx

@@ -37,19 +37,7 @@ The Sentry integration platform provides the ability to add rich UI components t
 You can make any integration available as an action in [issue alerts](/organization/integrations/integration-platform/webhooks/issue-alerts) and [metric alerts](/organization/integrations/integration-platform/webhooks/metric-alerts) by enabling the "Alert Rule Action" toggle. The integration will then show
 up as a service in the action section when creating or updating an alert rule. The interactive demo below shows how to set up an integration that can receive Sentry alerts.
 
-<div style={{"height":"0px","paddingBottom":"calc(56.88524590163935% + 41px)","position":"relative","width":"100%"}}>
-  <iframe
-    src="https://demo.arcade.software/v7uhzmdV6Q5PDzoVPAE6?embed&show_copy_link=true"
-    frameborder="0"
-    loading="lazy"
-    webkitallowfullscreen
-    mozallowfullscreen
-    allowfullscreen
-    allow="fullscreen;"
-    style={{"colorScheme":"light","height":"100%","left":"0px","position":"absolute","top":"0px","width":"100%"}}
-    title="Create Internal Integration &amp; Alert Rule"
-  ></iframe>
-</div>
+<Arcade src="https://demo.arcade.software/v7uhzmdV6Q5PDzoVPAE6?embed&show_copy_link=true" />
 
 For your service to receive webhooks for alert rules, you must have `Send a notification via <your integration>` as an action in the rule. Once that's set up, you'll start receiving webhook requests for triggered alerts. For more information about the request and payload, check out the [full Webhooks documentation](/organization/integrations/integration-platform/webhooks/). If you'd like users to provide more app-specific information to handle these webhooks (e.g. assignees, teams, notification channels), consider implementing the [alert rule action UI component](/organization/integrations/integration-platform/ui-components/alert-rule-action).
 

docs/organization/integrations/integration-platform/webhooks/issue-alerts.mdx

@@ -8,19 +8,7 @@ Sentry integrations which have been made available as [alert rule actions](/orga
 
 The interactive demo below shows how to set up an internal integration that can receive issue alerts.
 
-<div style={{"height":"0px","paddingBottom":"calc(56.88524590163935% + 41px)","position":"relative","width":"100%"}}>
-  <iframe
-    src="https://demo.arcade.software/v7uhzmdV6Q5PDzoVPAE6?embed&show_copy_link=true"
-    frameborder="0"
-    loading="lazy"
-    webkitallowfullscreen
-    mozallowfullscreen
-    allowfullscreen
-    allow="fullscreen;"
-    style={{"colorScheme":"light","height":"100%","left":"0px","position":"absolute","top":"0px","width":"100%"}}
-    title="Create Internal Integration &amp; Alert Rule"
-  ></iframe>
-</div>
+<Arcade src="https://demo.arcade.software/v7uhzmdV6Q5PDzoVPAE6?embed&show_copy_link=true" />
 
 ## Sentry-Hook-Resource Header
 

docs/organization/integrations/integration-platform/webhooks/metric-alerts.mdx

@@ -8,19 +8,7 @@ Sentry integrations which have been made available as [alert rule actions](/orga
 
 The interactive demo below shows how to set up an internal integration that can receive Sentry alerts.
 
-<div style={{"height":"0px","paddingBottom":"calc(56.88524590163935% + 41px)","position":"relative","width":"100%"}}>
-  <iframe
-    src="https://demo.arcade.software/v7uhzmdV6Q5PDzoVPAE6?embed&show_copy_link=true"
-    frameborder="0"
-    loading="lazy"
-    webkitallowfullscreen
-    mozallowfullscreen
-    allowfullscreen
-    allow="fullscreen;"
-    style={{"colorScheme":"light","height":"100%","left":"0px","position":"absolute","top":"0px","width":"100%"}}
-    title="Create Internal Integration &amp; Alert Rule"
-  ></iframe>
-</div>
+<Arcade src="https://demo.arcade.software/v7uhzmdV6Q5PDzoVPAE6?embed&show_copy_link=true" />
 
 ## Sentry-Hook-Resource Header
 

docs/product/alerts/create-alerts/routing-alerts.mdx

@@ -48,19 +48,7 @@ When you create a new integration and enable the "Alert Rule Action" option on i
 
 The interactive demo below shows how to set up an integration that can receive Sentry alerts.
 
-<div style={{"height":"0px","paddingBottom":"calc(56.88524590163935% + 41px)","position":"relative","width":"100%"}}>
-  <iframe
-    src="https://demo.arcade.software/v7uhzmdV6Q5PDzoVPAE6?embed&show_copy_link=true"
-    frameborder="0"
-    loading="lazy"
-    webkitallowfullscreen
-    mozallowfullscreen
-    allowfullscreen
-    allow="fullscreen;"
-    style={{"colorScheme":"light","height":"100%","left":"0px","position":"absolute","top":"0px","width":"100%"}}
-    title="Create Internal Integration &amp; Alert Rule"
-  ></iframe>
-</div>
+<Arcade src="https://demo.arcade.software/v7uhzmdV6Q5PDzoVPAE6?embed&show_copy_link=true" />
 
 ## Legacy Integrations
 

docs/product/crons/job-monitoring.mdx

@@ -24,31 +24,7 @@ The "Issues" section shows the issues created from this Cron Monitor. Issues are
 
 The table of recent check-ins lists previously scheduled jobs and their statuses.
 
-<div style={{
-  position: 'relative',
-  paddingBottom: 'calc(57.073170731707314% + 41px)',
-  height: 0,
-  width: '100%'
-}}>
-  <iframe
-    src="https://demo.arcade.software/7XmPfL0l2pp6KmBUXwMc?embed"
-    frameborder="0"
-    loading="lazy"
-    webkitallowfullscreen
-    mozallowfullscreen
-    allowfullscreen
-    allow="fullscreen;"
-    style={{
-      position: 'absolute',
-      top: 0,
-      left: 0,
-      width: '100%',
-      height: '100%',
-      colorScheme: 'light'
-    }}
-    title="Crons - Details page walkthrough"
-  ></iframe>
-</div>
+<Arcade src="https://demo.arcade.software/7XmPfL0l2pp6KmBUXwMc?embed" />
 
 ## Multiple Environments
 

docs/product/explore/metrics/metrics-explorer-page.mdx

@@ -10,19 +10,7 @@ Once you've started sending metrics to Sentry, you can explore them in the produ
 
 ## Querying & Visualization
 
-<div style={{"height":"0px","paddingBottom":"calc(56.8359% + 41px)","position":"relative","width":"100%"}}>
-  <iframe
-    src="https://demo.arcade.software/wazwqB6rvF5ZronReDLa?embed&show_copy_link=true"
-    frameborder="0"
-    loading="lazy"
-    webkitallowfullscreen
-    mozallowfullscreen
-    allowfullscreen
-    allow="fullscreen;"
-    style={{"colorScheme":"light","height":"100%","left":"0px","position":"absolute","top":"0px","width":"100%"}}
-    title="Sentry Metrics Explorer - Query &amp; Visualize"
-  ></iframe>
-</div>
+<Arcade src="https://demo.arcade.software/wazwqB6rvF5ZronReDLa?embed&show_copy_link=true" />
 
 You can use the dropdowns at the top of the page as a query editor for your metrics. Select the metric you want to plot from a list of available metrics in your project, the aggregate operation you'd like to perform (such as avg, min, max, and so on), and, optionally, any tags you'd like to group by. In the image above the metric `gibpotato.potatoes.event_processing_time`, is queried and shown, grouped by `event_type`.
 
@@ -38,19 +26,7 @@ If you'd like to zoom in and dig deeper into a particular area of your chart, dr
 
 Sometimes observing one metric is enough to reach an insight. However, it's oftentimes necessary to look at multiple metrics simultaneously to find potential correlations.
 
-<div style={{"height":"0px","paddingBottom":"calc(56.8359% + 41px)","position":"relative","width":"100%"}}>
-  <iframe
-    src="https://demo.arcade.software/LM8eNFS5x1y7YVC1Pe91?embed&show_copy_link=true"
-    frameborder="0"
-    loading="lazy"
-    webkitallowfullscreen
-    mozallowfullscreen
-    allowfullscreen
-    allow="fullscreen;"
-    style={{"colorScheme":"light","height":"100%","left":"0px","position":"absolute","top":"0px","width":"100%"}}
-    title="Sentry Metrics Explorer - Multiple Metrics"
-  ></iframe>
-</div>
+<Arcade src="https://demo.arcade.software/LM8eNFS5x1y7YVC1Pe91?embed&show_copy_link=true" />
 
 In this case, you can create additional queries in order to compare and contrast different metrics. Click "Add Query" button to create a new query. Alternatively, you can also click "... > Duplicate" next to an existing query to create a duplicate of that query.
 
@@ -66,19 +42,7 @@ While metrics are a great tool for analyzing your data in aggregate and identify
 
 Below your metric charts, the "Span Samples" tab shows a list of exemplars associated with that metric. By clicking on a span, you can navigate to the full trace view.
 
-<div style={{"height":"0px","paddingBottom":"calc(56.8359% + 41px)","position":"relative","width":"100%"}}>
-  <iframe
-    src="https://demo.arcade.software/aPBtSIQrhir2SLgTMcbZ?embed&show_copy_link=true"
-    frameborder="0"
-    loading="lazy"
-    webkitallowfullscreen
-    mozallowfullscreen
-    allowfullscreen
-    allow="fullscreen;"
-    style={{"colorScheme":"light","height":"100%","left":"0px","position":"absolute","top":"0px","width":"100%"}}
-    title="Sentry Metrics Explorer - Sample Transactions"
-  ></iframe>
-</div>
+<Arcade src="https://demo.arcade.software/aPBtSIQrhir2SLgTMcbZ?embed&show_copy_link=true" />
 Within the trace view, custom metrics associated with a span are also displayed in the span details.
 
 ![Trace View Metrics](./img/trace-view-metrics.png)
@@ -93,36 +57,12 @@ This feature is not currently available in all SDKs.
 
 When it comes to custom metrics, you can use the code locations tab to see the line of code in your application where your metric is being emitted. This can come in handy when troubleshooting an issue, especially if you were not the one creating the metric in the first place.
 
-<div style={{"height":"0px","paddingBottom":"calc(56.8359% + 41px)","position":"relative","width":"100%"}}>
-  <iframe
-    src="https://demo.arcade.software/LIthR3DDJaUXTLSNvD17?embed&show_copy_link=true"
-    frameborder="0"
-    loading="lazy"
-    webkitallowfullscreen
-    mozallowfullscreen
-    allowfullscreen
-    allow="fullscreen;"
-    style={{"colorScheme":"light","height":"100%","left":"0px","position":"absolute","top":"0px","width":"100%"}}
-    title="Sentry Metrics Explorer - Code Location"
-  ></iframe>
-</div>
+<Arcade src="https://demo.arcade.software/LIthR3DDJaUXTLSNvD17?embed&show_copy_link=true" />
 
 ## Create Alerts & Dashboards
 
 In order to stay ahead of issues, you can also create metric-based alerts to get notified about unexpected changes or spikes. Click "... > Create Alert" next to your metric query to configure your custom metric alert.
 
-<div style={{"height":"0px","paddingBottom":"calc(56.8359% + 41px)","position":"relative","width":"100%"}}>
-  <iframe
-    src="https://demo.arcade.software/7qnZaYnUMqEzJcR4Ro2D?embed&show_copy_link=true"
-    frameborder="0"
-    loading="lazy"
-    webkitallowfullscreen
-    mozallowfullscreen
-    allowfullscreen
-    allow="fullscreen;"
-    style={{"colorScheme":"light","height":"100%","left":"0px","position":"absolute","top":"0px","width":"100%"}}
-    title="Sentry Metrics Explorer - Create Alerts &amp; Dashboards"
-  ></iframe>
-</div>
+<Arcade src="https://demo.arcade.software/7qnZaYnUMqEzJcR4Ro2D?embed&show_copy_link=true" />
 
 If you want to continuously monitor a particular metric, click "... > Add to Dashboard" to create a new Dashboard widget. You can configure your dashboard to display custom metrics that matter most to you. To learn more, see [Dashboards](/product/dashboards/).

docs/product/insights/assets.mdx

@@ -14,7 +14,7 @@ If you have performance monitoring enabled for your frontend, you can see how yo
 
 Starting with the [**Assets** page](#assets-page), you get a high-level overview of how your assets are doing. From there, you can drill into a specific asset's [**Asset Summary** page](#asset-summary-page) and then investigate sample events from the [Sample List](#sample-list) to better understand the context of its performance in a specific page.
 
-<div style={{position: 'relative', paddingBottom: 'calc(50.86013462976814% + 41px)', height: 0}}><iframe src="https://demo.arcade.software/c7lgN0cFkg0R2tb9t0jH?embed" frameborder="0" loading="lazy" webkitallowfullscreen mozallowfullscreen allowfullscreen allow="fullscreen;" style={{position: 'absolute', top: 0, left: 0, width: '100%', height: '100%', colorScheme: 'light'}}></iframe></div>
+<Arcade src="https://demo.arcade.software/c7lgN0cFkg0R2tb9t0jH?embed" />
 
 ## Prerequisites and Limitations
 

docs/product/insights/caches/index.mdx

@@ -14,19 +14,7 @@ Sentry's cache monitoring provides insights into cache utilization and latency s
 
 Starting with the [Cache page](https://sentry.io/orgredirect/organizations/:orgslug/insights/caches/), you get an overview of the transactions within your application that are making at least one lookup against a cache. From there, you can dig into specific cache span operations by clicking a transaction and viewing its sample list.
 
-<div style={{"height":"0px","paddingBottom":"calc(56.8359% + 41px)","position":"relative","width":"100%"}}>
-  <iframe
-    src="https://demo.arcade.software/ZXXfmVEBIjlwk83pUSfs?embed&show_copy_link=true"
-    frameborder="0"
-    loading="lazy"
-    webkitallowfullscreen
-    mozallowfullscreen
-    allowfullscreen
-    allow="fullscreen;"
-    style={{"colorScheme":"light","height":"100%","left":"0px","position":"absolute","top":"0px","width":"100%"}}
-    title="Performance -> Caches Module Walkthrough"
-  ></iframe>
-</div>
+<Arcade src="https://demo.arcade.software/ZXXfmVEBIjlwk83pUSfs?embed&show_copy_link=true" />
 
 ## Instrumentation