feat: store existing UI docs alongside new

website/docs/docs/ui-old/bi-directional.md

@@ -0,0 +1,83 @@
+---
+title: Bi-Directional Contract Testing
+---
+
+This section describes the Bi-directional Contract Testing screens in PactFlow. Bi-Directional Contract Testing is a type of **static contract testing** where two contracts - one representing consumer expectations, and another representing provider capability - are compared to ensure they are compatible. Refer to the [docs](/docs/bi-directional-contract-testing) for more information on this feature.
+
+## Overview tab
+
+When you open the overview page, if the selected integration uses the bi-directional contract testing feature, a "view contracts" button will appear that takes you to the detailed view.
+
+ 
+
+![Bi-directional Contract Test Overview Screen](/ui/bdct-overview.png)
+
+ 
+
+<div class="status-table">
+
+| Status | Description | Action Required |
+|-------------|-------------|-|
+| ![success](/ui/success.png) | The consumer contract is compatible with the provider's contract.| N/A |
+| ![failed](/ui/failed.png) | The consumer contract is incompatible with the provider's contract, the provider self-verification is unsuccessful, or a classic pact test has failed. | Review the [detail page](#detail-page) to understand the failure cause. |
+| ![unverified](/ui/unverified.png) | No schema comparison has been found for the consumer contract. | Either a consumer contract has yet to be published, or PactFlow has not verified yet. Wait a few minutes and try again (PactFlow generates results in the background), or run a [`Can I Deploy`](/docs/ui-old/can-i-deploy) query for the application in question to force PactFlow to generate a result. |
+
+</div>
+
+:::info scope of this screen
+Currently this page supports showing one verification per consumer version. Whichever provider version was most recently published will be the verification displayed.
+
+Each verification is still generated behind the scenes though, and will work as expected when using `can-i-deploy` in your build pipeline or via CLI.
+:::
+
+## Detail Page
+
+The detail page displays a comprehensive breakdown of the comparison results between a provider contract and its consumer contract (pact), along with metadata, pacticipant information and provider self-verification results.
+
+&nbsp;
+
+![Bi-directional Contract Test Detail Screen](/ui/bdct-cross-comparison.png)
+
+&nbsp;
+
+### Contract Comparison Tab
+
+This tab shows any errors and warnings grouped by the affected resource in the OpenAPI document. The grouping is in the form `{verb} {path}`, for example, `get /products/{id}`. This is a helpful view if you are more familiar with the OpenAPI Document.
+
+There may be more than one interaction in the consumer contract that is incompatible with a given route.
+
+When provider and consumer contracts are incompatible, warnings, error messages and any mismatches (for Pact verifications) are listed here. You can also find incompatibility messages under interaction items on the [Consumer Contract Tab](#consumer-contract-tab), grouped by the interactions defined in the consumer contract. This is a more helpful view for consumer teams diagnosing problems.
+
+![Bi-directional Contract Test Error](/ui/bdct-cross-comparison-error.png)
+
+For interpreting the errors and warnings displayed on these screens, refer to the [compatibility checks](/docs/bi-directional-contract-testing/compatibility-checks) guide.
+
+### Consumer Contract Tab
+
+Displays the verification result of comparing the consumer contract against the provider contract, from the perspective of the consumer contract.
+
+Clicking the interaction item toggles the interaction detail in relation to the current Bi-Directional Contract Testing.
+
+:::note
+When you perform a classic pact test with Bi-Directional Contract Testing, the classic pact test result displays here.
+:::
+
+![Bi-directional Contract Test Error](/ui/bdct-cross-comparison-error-consumer-tab.png)
+
+For interpreting the Bi-Directional Contract Testing related errors and warnings displayed on these screens, refer to the [compatibility checks](/docs/bi-directional-contract-testing/compatibility-checks) guide.
+
+### Provider Contract Tab
+
+Displays the verification result of comparing the consumer contract against the provider contract, from the perspective of the provider contract.
+
+![Bi-directional Contract Test Error](/ui/bdct-cross-comparison-error-provider-tab.png)
+
+
+
+
+## Matrix View Tab
+
+When a pact is published, a comparison will be generated asychronously with the latest provider contract from each branch, and for the provider contract of each deployed/released provider version. These results will be used to populate the data for the matrix page.
+
+Should a [`can-i-deploy`](https://docs.pact.io/pact_broker/can_i_deploy) query be made for a combination of application versions for which a comparsion has not been generated, the comparsion will be performed synchronously, and the results returned in the response.
+

website/docs/docs/ui-old/can-i-deploy.md

@@ -0,0 +1,82 @@
+---
+title: Can I Deploy
+---
+
+## What is Can I Deploy 
+Can I Deploy page is the web version of our popular CLI tool [can-i-deploy](https://docs.pact.io/pact_broker/can_i_deploy), which queries the "Matrix". This UI provides a rich query interface for the Matrix to ensure you can safely deploy your application. It provides additional context not readily available during CLI usage.
+
+You can find `Can I Deploy` button in the top navigation bar on the overview page.
+
+## Walkthrough
+<iframe width="560" height="315" src="https://www.youtube.com/embed/e-l21IjI_d8" title="Can I Deploy introduction" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+
+
+## Can I Deploy layout
+
+The Can I Deploy page contains three main areas:
+
+&nbsp;
+
+![can i deploy screenshot](/ui/cid.png)
+
+&nbsp;
+
+**UI selectors**
+It helps you choose your application from the application list, the application version and the deployment target. For more information, see the [Selectors](#Selectors) section.
+
+**Messaging list**
+It summarizes if you are safe to deploy your chosen application version. 
+
+**Verification statuses table**
+It demonstrates your application version and deployment target.
+
+
+<div class="status-table">
+
+| Status                            | Description                                                                                   |
+| --------------------------------- | --------------------------------------------------------------------------------------------- |
+| ![success](/ui/success.png)       | The application version has a successful verification published for it.                                      |
+| ![failed](/ui/failed.png)         | The verification for the application version had failed.                                              |
+| ![unverified](/ui/unverified.png) | No verification result has been published for the application version.                                       |
+
+</div>
+
+### Selectors
+
+There are three selectors for customizing your Matrix query.
+
+&nbsp;
+
+![selector screenshot](/ui/cid-selectors.png)
+
+&nbsp;
+
+**a -**
+You can choose your application name from the list of applications.
+
+**b -**
+You can choose your application version from the list of versions mentioned below:
+- The latest version from a branch (default: your main branch)
+- Specific version number
+- Version in an environment (Note: you need to have `environment read permission` to interact with this selection)
+- The latest version
+- The latest version with a specific tag
+
+**c -**
+Below are a few options for choosing your deployment target::
+- Deploy to an environment (Note: you need to have `environment read permission` to interact with this selection)
+- Deploy with the other applications' latest version with a specific tag
+- Deploy with other applications' latest main branch
+
+**d -**
+There is a button to submit the matrix query. When a selector is missing or invalid, it is disabled.
+
+## Miscellaneous
+
+### Permission warning
+
+You might see a warning in the following screenshot about the environment permission issue. To set up read/management permissions for your environment, please contact your account administrator. Otherwise, you will not be able to select and run the query that includes environments.
+
+&nbsp;
+
+![environment warning](/ui/cid-warning.png)

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

@@ -0,0 +1,117 @@
+---
+title: Dashboard
+---
+
+## Dashboard layout
+
+The main PactFlow screen has four functional areas.
+
+ 
+
+![Main Screen](/ui/dashboard.png)
+
+ 
+
+**1 -**
+The list of all integrations is displayed on the left panel. Integration here is the pair of a consumer and provider that have a pact. Select an integration to have its details displayed in the center panel. The status icon (see table below) will be displayed for the verification result of latest pact.
+
+**2 -**
+The details of the selected integration will be displayed here.
+
+**3 -**
+You can filter the list of integrations here by either the Consumer or Provider name.
+
+**4 -**
+If you have been assigned to a [team](#settings-teams), you can select them here. This will filter the list of integrations
+by the applications that belong to the team.
+
+**5 -**
+The tabs at the top provide different views of the currently selected integration. 
+
+- The Network Diagram will display a graph view of all the integrations that are reachable from the selected one.
+
+- The [Matrix](#matrix) will display more details of all the pacts and verifications of the selected integration.
+
+- The Webhooks will display a list of triggered webhooks for the integration and logs.
+
+**6 -**
+The settings (or cog) button will take you to all the setting screens. Here you'll be able to setup
+[API tokens](#settings-api-tokens), [webhooks](#settings-webhooks), [users](#settings-users) and more.
+
+**7 -**
+Displays the current logged in user and subscription status.
+
+ 
+
+<div class="status-table">
+
+| Status                            | Description                                                                                   |
+| --------------------------------- | --------------------------------------------------------------------------------------------- |
+| ![success](/ui/success.png)       | The pact has a successful verification published for it.                                      |
+| ![failed](/ui/failed.png)         | The latest verification for the pact had failed.                                              |
+| ![unverified](/ui/unverified.png) | No verification result has been published for the pact.                                       |
+| ![waiting](/ui/waiting.png)       | A new version of the pact has been published since the last verification result was received. |
+
+</div>
+
+## Version tag menus
+
+The blue and grey "pill" icons shown next to the consumer and provider version numbers on the Overview, Matrix and Pact pages represent [tags](https://docs.pact.io/pact_broker/tags) that belong to the relevant application versions in PactFlow.
+
+A blue pill indicates that this is the latest version that has a tag with that name. For example, the latest consumer version with a "main" tag.
+
+<img alt="Latest version tag menu" src="/ui/tag-main-latest.png" style={{width: 70}}/>
+
+A grey pill indicates that there's a later application version that has the same tag.
+
+<img alt="Not latest version tag menu" src="/ui/tag-main-not-latest.png" style={{width: 70}}/>
+
+Clicking on the tag pill icon will allow you to perform actions in the context of that application version tag.
+
+### Consumer version tags
+
+The consumer version tag has the following menu items.
+
+![Consumer version tag menu](/ui/consumer-version-tag-menu.png)
+
+#### Menu items
+
+##### Resources
+
+- Copy pact URL - Copies the URL of the latest pact with the given tag into the clipboard.
+- Copy stub URL - Copies the URL of the [stub](/docs/stubs) created from the latest pact for the given tag.
+- Copy badge URL - Copies the URL of the [verification status badge](https://docs.pact.io/pact_broker/advanced_topics/provider_verification_badges/) for the latest pact for the given tag into the clipboard.
+- Copy tag URL - Copies the URL of the application version tag into the clipboard.
+- Copy tag name - Copies the name of the tag into the clipboard.
+
+##### Delete
+
+- Delete all pacts with the given tag - Allows you to delete all pacts that belong to application versions with the given tag. This is only visible if the current user has the [contract_data:bulk_delete](/docs/permissions#contract_databulk_delete) permission.
+
+### Provider version tags
+
+Clicking on a tag pill for a provider version tag will make the following menu available.
+
+![Provider version tag menu](/ui/provider-version-tag-menu.png)
+
+#### Menu Items
+
+##### Resources
+
+- Copy tag URL - selecting this menu item will copy the URL of the application version tag into the clipboard.
+- Copy tag name - selecting this menu item will copy the name of the tag into the clipboard.
+
+## Matrix 
+
+The "Matrix" displays a table that shows the verification status of each combination of consumer and provider version from the selected integration.
+
+&nbsp;
+
+![Matrix Screen](/ui/matrix.png)
+
+&nbsp;
+
+### Matrix Filters
+Filter the consumer versions and provider versions of the selected integration by version number, branch, environment or tag.
+
+Note: The environment filter option will only be shown to users with the environment read or manage permission.

website/docs/docs/ui-old/settings/api-tokens.md

@@ -0,0 +1,17 @@
+---
+title: API Tokens
+---
+
+![API Token Screen](/ui/api-tokens.png)
+
+**About**
+This screen helps you copy and re-generate your API tokens. There are two types of API tokens you can use:
+
+1. The read only token for anything that needs to download pacts. It should be used for a developer's machine.
+
+2. The read-write token for anything required to publish pact files or verification results. It should only be used by your CI when publishing pacts and verification results.
+
+**Buttons**
+1. The Copy button allows you to copy the token values without displaying them.
+
+2. The Regenerate button allows you to generate a new value for that token. 

website/docs/docs/ui-old/settings/environments.md

@@ -0,0 +1,55 @@
+---
+title: Environments
+---
+
+![Environments Screen](/ui/environments.png)
+
+Here you can manage the list of environments used by your organization. These represent your real-world deployment or release environments. Maintaining this list, along with the `record-deployment` and `record-release` commands, allows PactFlow to ensure you are safe to deploy using the `can-i-deploy` tool. You can read more [here.](https://docs.pact.io/pact_broker/recording_deployments_and_releases/)
+![Environments Screen](/ui/environments-form.png)
+
+ 
+
+| Field | Description |
+| ----- | ----------- |
+| Name | A unique name, no spaces allowed. This name is used in the can-i-deploy and record-deployment CLI commands. For example, "payments-sit-1". This field cannot be edited |
+| DisplayName | Verbose environment name. "Payments Team SIT 1". |
+| Production | Whether or not this environment is a production environment. |
+| Teams | Associating the environment with teams, used to determine which teams can view and edit the environment after it is created. See the permissions section below for details. |
+
+ 
+
+#### Recording deployments and releases
+
+To successfully record a deployment or release to an environment, the user must be allowed to record a deployment/release for the application. Moreover, the user must be allowed to view the environment resource.
+
+In terms of permissions and resource relationships, that means:
+
+1. The user must have `deployment_and_release:record:team` and `environment:view:team` (or `environment:manage:team`) AND the environment, application and user must be assigned to the same team.
+
+OR 
+
+2. The user must have `deployment_and_release:record:*` and `environment:view:*` (or `environment:manage:*`).
+
+#### Creating Production Environments
+
+If all the Broker services are deployed to the same "public" internet, then there only needs to be one Production environment. If there are multiple segregated production environments (for example, when maintaining on-premises software for multiple customers) you should create a separate production Environment for each logical deployment environment.
+
+#### Permissions
+
+Environments can be associated with Teams via creating or editing an Environment, or in the Team settings when creating or editing a Team. The permissions that determine when a user can associate an environment with a team are as follows:
+
+#### environment:manage:* 
+Users with this permission can view, edit and delete all environments. When creating or editing an environment the user can add or remove any team, regardless of their 'teams' permissions. 
+
+#### team:manage:*
+When creating or editing any team the user can change the environments associated with the team.
+
+#### team:manage:{uuid}
+When creating or editing a team they have permission for, the user can change the environments associated with that team.
+
+#### environment:read:*
+The user can view a list of all environments but cannot edit or delete environments.
+
+#### environment:read:team
+The user can view a list of all the environments associated with their teams, but cannot edit or delete environments.
+