docs: new UI updates (integration + application) (#374)

- Add Integrations page
- Updates to Application page (remove version list,
  add in-place filter controls, tabbed compatability tiles)

Author: mefellows

website/docs/docs/ui-old/dashboard.md

@@ -1,6 +1,9 @@
 ---
 title: Dashboard
 ---
+:::warning
+The Legacy UI will be shut down on Friday, June 27th.
+:::
 
 ## Dashboard layout
 

website/docs/docs/user-interface/application.md

@@ -2,60 +2,89 @@
 title: Application
 ---
 
-Applications (or "Pacticipants") are at the center of the PactFlow experience. From this page, you can:
+## Application
 
-1. See all versions of your application.
-2. Discover all integrated applications and their contracts.
-3. See the health of the application at a glance.
-4. Check if your application is deployable.
-5. Configure your application settings.
+Applications—also called **Pacticipants**—are central to the PactFlow experience.
 
-### Version Details
+From this page, you can:
 
-In the left-hand panel, you can see all versions of the currently selected application. Select a version to view its details.
+1. View all versions of your application.  
+2. Discover all integrated applications and their contracts.  
+3. See the application's overall health.  
+4. Check if the application is deployable.  
+5. Configure application settings.
 
-![Application Page](/ui/clarity/application.png)
+### Application Versions
+
+The **Application Versions** tab shows the latest version of the selected application, based on the designated main branch. Recent versions appear in adjacent tabs.
+
+- Click a tab to view details for that version.  
+- To view older versions, select **View All**.  
+- To filter by branch or tag, click the corresponding label and update the filter. You can only filter by one at a time.
+
+Your filter preferences are preserved when you return to this page.
+
+Accessing this page updates the **Recent** list under **Applications** in the navigation panel.
+
+![Application – Version Page](/ui/clarity/application-version.png)
 
 ### Compatibility
 
-This tab displays each of the integrated applications as tiles, showing a summary of the verification status for each. Each tile has a historical bar chart showing the compatibility of previous versions. Hover over the bar chart to see details, or click to pin them.
+The **Compatibility** tab shows integrated applications as tiles, each summarizing verification status.
+
+- Each tile includes tabs for previous verification results, ordered left to right with the most recent result first.
+- Integrated applications may act as either a **consumer** or a **provider**.
+
+To update the data:
 
-Select a branch in each tile to see versions related to that branch, or use the toggle at the top to quickly change all tiles to the latest updated or main branch.
+- Filter by **branch**, **tag**, or **environment** (only one at a time).  
+- Select a branch within a tile to filter its versions.  
+- Use the **toggle** at the top to apply the latest updated or main branch across all tiles.
 
-Click "View contract" to see a contract for a specific version.
+Click:
 
-![Application Page](/ui/clarity/application-compatibility-tile.png)
+- **View contract** to see contract details for a specific version.  
+- **Triggered Webhooks** to view webhook events related to the integration.
+
+![Application – Compatibility Tab](/ui/clarity/application-version-compatibility.png)
 
 ### Can I Deploy
 
-This tab shows the current deployability to a given environment (see the [`can-i-deploy`](https://docs.pact.io/pact_broker/can_i_deploy) documentation for more information). You must select a team from the drop-down menu to fetch environments related to the selected team before the results can be displayed.
+The **Can I Deploy** tab shows the current deployability status for the application in a selected environment.
 
-![Can I Deploy](/ui/clarity/application-cid.png)
+- Select a **team** from the drop-down to load the associated environments.  
+- View the results to determine whether deployment is possible.
+
+For details, see the [`can-i-deploy`](https://docs.pact.io/pact_broker/can_i_deploy) documentation.
 
-Click on the link in the row to navigate to the specific verification result for a given entry.
+Click a link in the table to navigate to the corresponding verification result.
+
+![Can I Deploy](/ui/clarity/application-cid.png)
 
 ### Network
 
-This tab shows all applications directly integrated with the currently selected application. Click on a node to navigate to the collaborating application.
+The **Network** tab displays all applications directly integrated with the current application.
+
+- Click a node to navigate to the collaborating application.
 
-![Network Graph](/ui/clarity/application-network.png)
+![Application – Network Tab](/ui/clarity/application-network.png)
 
-### Settings
+## Settings
 
-#### General
+### General
 
-This tab allows you to see and modify the display name of the application.
+Update the **display name** of the application in the **General** tab.
 
-![Settings - General](/ui/clarity/application-settings.png)
+![Application – General Settings Page](/ui/clarity/application-settings-general.png)
 
-#### Version Control
+### Version Control
 
-This tab allows you to specify the main branch and repository URL (e.g., a GitHub URL) for the application.
+Specify the **main branch** and **repository URL** (for example, a GitHub URL) in the **Version Control** tab.
 
-![Settings - Version Control](/ui/clarity/application-version-control.png)
+![Application – Version Control Settings Page](/ui/clarity/application-settings-version.png)
 
-#### Badge
+### Badge
 
-This tab allows you to generate `can-i-deploy` build badges for the current application.
+Generate `can-i-deploy` build badges in the **Badge** tab.
 
-![Settings - Badge](/ui/clarity/application-badge.png)
+![Application – Badge Settings Page](/ui/clarity/application-settings-badges.png)

website/docs/docs/user-interface/dashboard.md

@@ -2,42 +2,101 @@
 title: Dashboard
 ---
 
-This screen provides a quick way to discover and access your applications.
+This screen helps you quickly find and access your applications.
 
-![Dashboard](/ui/clarity/dashboard.png)
+![Dashboard – All Applications Tab](/ui/clarity/dashboard-all-applications.png)
 
-## Favourites / Quick Access
+## Applications
 
-The top panel shows a subset of applications in a condensed view for quick access.
+### My Favourites
 
-- Select "My Favourites" from the drop-down to see your saved applications. 
-- Favourite an application by clicking the star icon in the list of applications below. 
-- Remove an application from your favourites by clicking the cross icon.
+The **My Favourites** tab shows a condensed view of your saved applications for quick access.
 
-![Favourites](/ui/clarity/dashboard-favourites.png)
+- Select **My Favourites** from the drop-down to view your saved applications.  
+- Click the **star icon** next to an application to add it to your favourites.  
+- Click the **cross icon** to remove an application from your favourites.
 
-Select a team from the drop-down to see all applications in that team.
+You can favourite up to 20 applications.
 
-## All Applications
+![Dashboard – Favourites Tab](/ui/clarity/dashboard-favourites.png)
 
-The bottom panel shows all applications in the account. Use the search box to filter applications by their name or display name. If you have many applications, pagination controls will appear to aid navigation.
+### Applications by Team
 
-![Search](/ui/clarity/dashboard-search.png)
+The **Applications by Team** tab displays all applications by team.
 
-## Navigation 
+- Select a team from the drop-down to view its applications.
+- You’ll see all teams listed if you have permission to view them.
 
-#### Feedback / Switch UI
+Each application tile shows the **mergeability status** of the _main_ branch.
 
-The feedback button allows you to switch back to the old UI or provide feedback on the new UI.
+This tab displays up to 20 applications.
 
-#### Settings
+![Dashboard – Team Applications Tab](/ui/clarity/dashboard-team-applications.png)
+
+### All Applications
+
+The **All Applications** panel shows all applications in your organization.
+
+- Use the **search box** to filter by name or display name.  
+- If you have many applications, **pagination controls** will appear to help you navigate.
+
+![Dashboard – All Applications Tab](/ui/clarity/dashboard-all-applications.png)
+
+## Integrations
+
+### Integrations Dashboard
 
-The settings (cog) button takes you to all the setting screens, where you can set up [API tokens](#settings-api-tokens), [webhooks](#settings-webhooks), [users](#settings-users), and more.
+The **Integrations** page lists all integrations for your organization. An integration is a pair of a consumer and provider that share a pact.
+
+- Use the **search box** to filter by name or display name.  
+- If you have many integrations, **pagination controls** will appear.  
+- Click an integration to go to its [integration page](/docs/user-interface/integration).
+
+Each tile shows the compatibility status for the _latest_ version of the contract.
+
+![Integrations Page](/ui/clarity/integrations.png)
+
+## Navigation
+
+### Top Navigation
+
+#### Feedback / Switch UI
+
+Click **Feedback** to switch to the old UI or submit feedback on the new UI.
 
 #### Help
 
-The help link directs you to our documentation.
+Click **Help** to open the documentation.
 
 #### Profile
 
-The profile link shows the currently logged-in user, the current version of PactFlow, and a link to log out.
+The **Profile** link shows:
+
+- The currently logged-in user.
+- The current PactFlow version. 
+- A link to log out.
+
+### Side Navigation
+
+#### Applications
+
+Quickly access your most frequent or recently used applications. Navigate to the application dashboard.
+
+![Navigation – Applications](/ui/clarity/navigation-applications.png)
+
+#### Integrations
+
+Quickly access your most frequent or recently used integrations. Navigate to the integration dashboard.
+
+![Navigation – Integrations](/ui/clarity/navigation-integrations.png)
+
+#### Settings
+
+Click the **Settings (cog)** icon to access all configuration screens, including:
+
+- [API tokens](#settings-api-tokens)  
+- [Webhooks](#settings-webhooks)  
+- [Users](#settings-users)  
+- And more
+
+![Navigation – Left](/ui/clarity/navigation-left.png)

website/docs/docs/user-interface/integration.md

@@ -0,0 +1,33 @@
+---
+title: Integration
+---
+
+This page provides compatibility details for a specific integration.
+
+### Matrix
+
+The **Matrix** is a table that shows the verification status for each combination of consumer and provider versions in the selected integration.
+
+Use the Matrix to:
+
+- Quickly check compatibility between applications.
+- Narrow down the data using filters.
+
+You can filter **consumer versions** and **provider versions** by selecting:
+
+- Links in the table.
+- Filters in the table headers, including version, branch, environment, or tag.
+
+> **Note:** You can filter each participant independently, but only by one facet at a time.
+
+:::tip
+The **Environment** filter appears only if you have *read* or *manage* permissions for environments.
+:::
+
+Click **View contract** in any row to open the corresponding contract.
+
+![Integration – Matrix Page](/ui/clarity/integrations-matrix.png)
+
+### Webhooks
+
+The **Webhooks** section lists all triggered webhooks for the integration, along with their associated logs.

website/sidebars.js

@@ -12,6 +12,7 @@ module.exports = {
             'docs/user-interface/migration/new',
             'docs/user-interface/dashboard',
             'docs/user-interface/application',
+            'docs/user-interface/integration',
             'docs/user-interface/contract',
             'docs/user-interface/bi-directional',
             {