Update project docs (#7396)

* update project docs

* update project pages and add gifs

* style(lint): Auto commit lint changes

* style(lint): Auto commit lint changes

* update headings

* additional copyedits

* Apply suggestions from code review

Co-authored-by: Shana Matthews <[email protected]>

* Apply suggestions from code review

* Update src/docs/product/projects/project-details/index.mdx

* Update index.mdx

fix line break

* style(lint): Auto commit lint changes

* Update index.mdx

* style(lint): Auto commit lint changes

* Update index.mdx

fix typo

---------

Co-authored-by: getsantry[bot] <66042841+getsantry[bot]@users.noreply.github.com>
Co-authored-by: Shana Matthews <[email protected]>

Author: 3 people

src/docs/product/projects/index.mdx

@@ -6,25 +6,37 @@ description: "View all the projects associated with teams that you're a member o
 
 A _Project_ represents your service or application in Sentry. For example, you might have separate projects for your API server and frontend client.
 
-You can [create a project](/product/sentry-basics/integrate-frontend/create-new-project/) for a service and select the particular language or framework when you first start using Sentry. You can add more projects on an as-needed basis, for example, if you want to manage access permissions and/or control privacy and data settings. Setting up multiple projects to reflect your application landscape with finer granularity will go a long way in helping with visibility and triage. Learn more about best practices for setting up projects in our [account setup documentation](/product/accounts/getting-started/#4-create-projects).
+When you first [create a project](/product/sentry-basics/integrate-frontend/create-new-project/), you also assign a team to it. All members of the assigned team have access to the project. Additional teams can be added in **[Project] > Settings > Project Teams**.
 
-When displaying the **Issue Stream** and **Discover** views, the top-level filter bar considers the projects you are a member of by default. This way, you are looking at information that is immediately relevant to your work.
+You can create more projects to reflect your application landscape with finer granularity (for example, a separate project for each repo, mapping components and micro-services to the teams that own them). For most pages in Sentry, including **Issues** and **Discover**, the top-level filter bar defaults to showing information for your projects, so that you only see what's relevant to you and your team(s). How you set up your projects can go a long way in reducing noise and improving productivity. Learn more about best practices for setting up projects in our [account setup documentation](/product/accounts/getting-started/#4-create-projects).
 
 Projects differ from [environments](/product/sentry-basics/environments/), which are designed to help triage issues, especially in a multi-staged release process.
 
-## Projects Homepage
+## Projects Page
 
-The project homepage lists the projects by teams of which you're a member, providing a high-level overview:
+The **Projects** page lists all the projects assigned to teams you're a member of. Projects are displayed in alphabetical order and with a high-level overview of the following:
 
-- A snapshot of both errors and transactions
-- The team and team members associated with each project (remember, projects can be associated to multiple teams, so a project may be listed more than once)
-- The percentage of crash free sessions (if you have configured [release health](/product/releases/health/)) (not available for watchOS; no Mach exception support on tvOS)
+- A snapshot of both errors and transactions in the last 24 hours
+- The percentage of crash free sessions, if you have configured [release health](/product/releases/health/) (not available for watchOS; no Mach exception support on tvOS)
 - Deploys, if you have configured your SDK to [provide a release identifier](/platform-redirect/?next=/configuration/releases/) and are tracking [deploys](/product/cli/releases/#creating-deploys)
 
-The projects are displayed in alphabetical order, separated by team. **Note:** For faster access, star your favorites to ensure they display at the top of the page each time you view.
+**Tip:** For faster access, star your favorite projects to move them to the top of the page.
+
+<div style="position: relative; padding-bottom: calc(56.8359375% + 41px); height: 0; width: 100%">
+  <iframe
+    src="https://demo.arcade.software/1M7NByRziNqbjuXpkrFB?embed"
+    frameborder="0"
+    loading="lazy"
+    webkitallowfullscreen
+    mozallowfullscreen
+    allowfullscreen
+    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;color-scheme: light;"
+    title="Projects -> Star Project"
+  ></iframe>
+</div>
 
 ## View Project Details
 
-The [Project Details](/product/projects/project-details/) page provides an overview over errors, performance, and the health of your releases. You can use the page to quickly correlate spikes in error rates with the issues causing them, react to critical alerts, and analyze long-term trends.
+Click on a project from the **Projects** page to open the **Project Details** page.
 
-Open Project Details by clicking the title of the project on the Projects page.
+The [**Project Details**](/product/projects/project-details/) page provides an overview of errors, performance, and the health of your releases. Use this page to quickly correlate spikes in error rates with the issues causing them, react to critical alerts, and analyze long-term trends.

src/docs/product/projects/project-details/index.mdx

@@ -4,47 +4,148 @@ sidebar_order: 1
 description: "View the combination of errors, performance, and health of your project in one central place."
 ---
 
-The **Project Details** page provides a consolidated view of what's going on in your project. This page is useful if you have oversight over many teams and many projects. You can also use this page to set up [Alerting](/product/alerts-notifications/) or delve into the Issue stream to [triage an issue](#triage).
+The **Project Details** page provides a consolidated view of various project metrics for the selected time range (14 days by default).
 
-![Project Detail](project-detail.png)
-
-After selecting the time range (the default is the last 14 days), the top four cards display:
+The top four cards display the following:
 
 - Crash free [sessions](/product/releases/health/#session)
 - Crash free users
 - Number of [releases](/product/releases/)
 - [Apdex](/product/performance/metrics/#apdex)
 
-Select one of the predefined time ranges (excluding `Last 90 days`) to view the change in these numbers since the last period.
+The two graphs below the cards show the value of a specific metric over the specified time range. Click on the graph legend to show or hide an overlay of the previous time period and any releases (if set up).
+
+<div style="position: relative; padding-bottom: calc(54.296875% + 41px); height: 0; width: 100%">
+  <iframe
+    src="https://demo.arcade.software/XU3D5nw7kEDBO9KwmwuR?embed"
+    frameborder="0"
+    loading="lazy"
+    webkitallowfullscreen
+    mozallowfullscreen
+    allowfullscreen
+    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;color-scheme: light;"
+    title="Project Details -> Graphs"
+  ></iframe>
+</div>
+
+<br />
 
-The two graphs below the cards provide insight into:
+By default, the graphs show crash free sessions and Apdex, but you can toggle the **Display** to set the view to any of the following:
 
 - Crash free [sessions](/product/releases/health/#session)
+- Crash free users
 - [Apdex](/product/performance/metrics/#apdex)
 - [Failure rate](/product/performance/metrics/#failure-rate)
 - [Transactions per minute](/product/performance/metrics/#throughput-total-tpm-tps)
-- Daily errors
-- Daily transactions
+- Number of errors
+- Number of sessions
+- Number of transactions
+
+You can also use this page to set up [alerts](/product/alerts-notifications/) or [triage an issue](#triage).
+
+## Create an Alert
 
-Toggle the **Display** to change the view. You can click on the graph legend to show or hide the overlay of releases and previous period.
+You can use the **Project Details** page to access Sentry's alerts feature.
 
-## Alerting
+Click the **Create Alert** button at the top right to set up either an [Issue Alert](/product/alerts-notifications/issue-alerts/) or a [Metric Alert](/product/alerts-notifications/metric-alerts/).
 
-You can use the Project Details page to access Sentry's alerting feature. Click the **Create Alert** button at the top right to set up either an [Issue Alert](/product/alerts-notifications/issue-alerts/) or a [Metric Alert](/product/alerts-notifications/metric-alerts/). In the **Latest Alerts** section of the sidebar you can see the three latest triggered alerts. Click on one of them to go to Alert Details page. The selected time range does not affect the displayed alerts.
+<div style="position: relative; padding-bottom: calc(61.72148355493352% + 41px); height: 0; width: 100%">
+  <iframe
+    src="https://demo.arcade.software/ZEOZDNURwYhmkqdQ76ge?embed"
+    frameborder="0"
+    loading="lazy"
+    webkitallowfullscreen
+    mozallowfullscreen
+    allowfullscreen
+    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;color-scheme: light;"
+    title="Project Details -> Create Alert"
+  ></iframe>
+</div>
 
-## Releases
+## View Latest Alerts
 
-You can use the Project Details page to assess how often you release new versions of your application:
+The **Latest Alerts** section in the right sidebar shows the 3 latest triggered alerts. Click on an alert to go to the **Alert Details** page. The selected time range does not affect the displayed alerts.
+
+<div style="position: relative; padding-bottom: calc(61.72148355493352% + 41px); height: 0; width: 100%">
+  <iframe
+    src="https://demo.arcade.software/2pJrK9pQvEwpVRseSxbz?embed"
+    frameborder="0"
+    loading="lazy"
+    webkitallowfullscreen
+    mozallowfullscreen
+    allowfullscreen
+    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;color-scheme: light;"
+    title="Project Details -> Latest Alerts"
+  ></iframe>
+</div>
+
+## View Latest Releases
+
+You can use the **Project Details** page to assess how often you release new versions of your application:
 
 - Number of releases compared to the previous period in the top card
 - Release lines overlaid on top of graphs
 - Most recent five releases in the **Latest Releases** section of the sidebar. You can click one of these to navigate to the [Release Details](/product/releases/health/release-details/) page. The selected time range does not affect the displayed releases.
 
-## Triage
+## Triage Top Issues
 
-Use Project Details to view issues associated with this project and to access them for triage. You can navigate to the **Issue Details** page by clicking either **View All Issues** or the **Open in Issues** button located at the top of the **Frequent Unhandled Issues** listed on the page. The issues in the table are sorted by the number of events in the selected time range.
+To help you triage issues, the **Project Details** page shows you the 5 most frequent unhandled issues, sorted by the number of events in the selected time range. Click on an issue to navigate to the **Issue Details** page.
 
-## Modify Project Settings
+<div style="position: relative; padding-bottom: calc(54.296875% + 41px); height: 0; width: 100%">
+  <iframe
+    src="https://demo.arcade.software/zuLVkma4eOWIHuLlXbYm?embed"
+    frameborder="0"
+    loading="lazy"
+    webkitallowfullscreen
+    mozallowfullscreen
+    allowfullscreen
+    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;color-scheme: light;"
+    title="Project Details -> Triage Issue"
+  ></iframe>
+</div>
+
+<br />
+
+If you prefer another view, you can also click **Open in Issues** or **Open in Discover** to see issues sorted in the same way on those pages.
+
+## Manage Project Teams
 
-Use the Settings icon at the top of the page to access the Project's Settings; modify as appropriate to your team and organization.
 See what teams are involved in this project in the **Team Access** section of the sidebar.
+
+Click the open icon to navigate to **Project Teams** page to see all the teams that have access to this project. If you are an owner or admin, you can add or remove teams from the project.
+
+Click on a team to see that team's members and their roles. If you are a team admin, you can also add or remove members from the team or change their role. You can also see other projects that team owns.
+
+<div style="position: relative; padding-bottom: calc(54.31309904153354% + 41px); height: 0; width: 100%">
+  <iframe
+    src="https://demo.arcade.software/mhgmIGjj55tZ3PVqdUnJ?embed"
+    frameborder="0"
+    loading="lazy"
+    webkitallowfullscreen
+    mozallowfullscreen
+    allowfullscreen
+    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;color-scheme: light;"
+    title="Project Details -> Project Teams"
+  ></iframe>
+</div>
+
+## Modify Project Settings
+
+Use the settings icon at the top of the page to access **Project Settings**. Modify settings as appropriate for your team and organization.
+
+<div style="position: relative; padding-bottom: calc(54.31309904153354% + 41px); height: 0; width: 100%">
+  <iframe
+    src="https://demo.arcade.software/wySaVXYOhND0BEFbk2uE?embed"
+    frameborder="0"
+    loading="lazy"
+    webkitallowfullscreen
+    mozallowfullscreen
+    allowfullscreen
+    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;color-scheme: light;"
+    title="Project Details -> Project Settings"
+  ></iframe>
+</div>
+
+<br />
+
+Go to **Project Settings** to perform tasks such as deleting tags, editing ownership rules, and managing data forwarding. You can also access processing settings (including detector threshold settings for performance issues) and SDK setup configurations.