From dba67607f7be34d1ee1b6a72e8675a0d2cdcd90c Mon Sep 17 00:00:00 2001
From: vivianyentran <20403606+vivianyentran@users.noreply.github.com>
Date: Wed, 23 Aug 2023 12:37:56 -0700
Subject: [PATCH] add arcades to suspect commits doc (#7684)

---
 .../product/issues/suspect-commits/index.mdx  | 34 +++++++++++++++++--
 1 file changed, 31 insertions(+), 3 deletions(-)

diff --git a/src/docs/product/issues/suspect-commits/index.mdx b/src/docs/product/issues/suspect-commits/index.mdx
index 530893463e0ff..72826404f8383 100644
--- a/src/docs/product/issues/suspect-commits/index.mdx
+++ b/src/docs/product/issues/suspect-commits/index.mdx
@@ -16,9 +16,20 @@ When you've enabled suspect commits, we can tie together issues with the commits
 - Files touched by those commits
 - Authors of those files
 
-Suspect commits and suggested assignees are then displayed on the **Issue Details** page in [sentry.io](https://sentry.io):
-
-![The suspect commits and suggested assignees for an issue](suspect-commits-highlighted.png)
+Suspect commits and suggested assignees are then displayed on the **Issue Details** page in [sentry.io](https://sentry.io), as shown below.
+
+<div style="position: relative; padding-bottom: calc(43.44919786096257% + 41px); height: 0; width: 100%">
+  <iframe
+    src="https://demo.arcade.software/XIrI8grPiEtHHSfCpCOt?embed"
+    frameborder="0"
+    loading="lazy"
+    webkitallowfullscreen
+    mozallowfullscreen
+    allowfullscreen
+    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;color-scheme: light;"
+    title="FE Tutorial -> See Suspect Commits & Suggested Assignees"
+  ></iframe>
+</div>
 
 ## Enable Suspect Commits
 
@@ -63,6 +74,23 @@ Sentry will automatically try to set up code mappings on Python and JavaScript p
 
 The first frame in the stack trace is considered suspect when looking at them top-down. If the first frame is not in-app, the next frame is considered suspect.
 
+### UI Walkthrough
+
+Follow along with the animated gif below to see how to integrate your GitHub account and repository.
+
+<div style="position: relative; padding-bottom: calc(48.66707997520149% + 41px); height: 0; width: 100%">
+  <iframe
+    src="https://demo.arcade.software/OlEYtzImezSBwsV8SVc8?embed"
+    frameborder="0"
+    loading="lazy"
+    webkitallowfullscreen
+    mozallowfullscreen
+    allowfullscreen
+    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;color-scheme: light;"
+    title="FE Tutorial -> Install GitHub Config & Add Code Mapping"
+  ></iframe>
+</div>
+
 ## Suspect Commits Without Integrations
 
 You can send us your commit data [manually](/product/releases/associate-commits/) if: