> For the complete documentation index, see [llms.txt](https://docs.flosum.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.flosum.com/devops/new-ui-ux-transition/new-ui-screenshots.md).

# New UI Screenshots

## ![](https://1800549522-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRpUu5iMlzMFAudyBvMOl%2Fuploads%2FG5ZbxX918xOHwbAwAJ4n%2FSummary2-Small-Icon.svg?alt=media\&token=da26a67f-ff7f-47b3-8669-06be960dc2d7) Overview

This article shows screenshots of the Old and New Cloud DevOps UIs for each sidebar menu section, so you can quickly get familiar with the New UI. It also includes two expandable sections covering the New UI for a branch's:

* **Branch > Components** tab: [#branch-components-tab](#branch-components-tab "mention")
* **Branch > Activities** tab: [#branch-activities-tab](#branch-activities-tab "mention")

The Code Viewer includes many user experience improvements, which are detailed in a separate article; see the following link.

* [Improved Code Viewer](/devops/new-ui-ux-transition/improved-code-viewer.md)

{% hint style="info" %}
Every screenshot in this comparison uses the same window size, so you can compare the New and Old UIs on equal footing. Viewed side by side, the New UI makes more efficient use of screen space, surfacing more information without feeling crowded.
{% endhint %}

## Organizations

The **Organizations** page in both the New and Old UIs provides a table of Salesforce organizations connected to your DevOps tenant, but the New UI improves the table layout.

<figure><img src="https://1800549522-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRpUu5iMlzMFAudyBvMOl%2Fuploads%2FH1D0EY1TupYDH8xbDFjE%2FUiScreenshotComparison-S01-new.png?alt=media&amp;token=2fb799a1-7d98-47ed-b1dc-31e988e2d68a" alt=""><figcaption><p>New UI</p></figcaption></figure>

<figure><img src="https://1800549522-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRpUu5iMlzMFAudyBvMOl%2Fuploads%2FNcQHWB1zH6YvxHNQTfIT%2FUiScreenshotComparison-S01-old.png?alt=media&amp;token=e17db6ad-e677-4caa-a5dd-e299fa798838" alt=""><figcaption><p>Old UI</p></figcaption></figure>

## Dashboard

The **Dashboard** page has only minor styling changes between the New and Old UIs.

<figure><img src="https://1800549522-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRpUu5iMlzMFAudyBvMOl%2Fuploads%2FhGgXg3cxPw8BNuJWZr5N%2FUiScreenshotComparison-S02-new.png?alt=media&amp;token=5ed2db25-2a27-416e-8013-bd33cdabf91d" alt=""><figcaption><p>New UI</p></figcaption></figure>

<figure><img src="https://1800549522-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRpUu5iMlzMFAudyBvMOl%2Fuploads%2FFYok6Ch8WdwI9Ba3imfT%2FUiScreenshotComparison-S02-old.png?alt=media&amp;token=7a11ef31-dd2f-4f36-a91f-0ba9e46c5afc" alt=""><figcaption><p>Old UI</p></figcaption></figure>

## Code → Branches

The **Code** page is now called **Branches**, a name that better reflects the section's purpose. In the New UI, the Branches table shows more information with an improved layout and clearer column labels, so you can see the most important details about each branch at a glance, without opening it.

<figure><img src="https://1800549522-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRpUu5iMlzMFAudyBvMOl%2Fuploads%2FqJzPu61Zq5Y62itXJgEf%2FUiScreenshotComparison-S03-new.png?alt=media&amp;token=33252e82-f1ac-45f3-8b39-aa88ff127c2f" alt=""><figcaption><p>New UI</p></figcaption></figure>

<figure><img src="https://1800549522-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRpUu5iMlzMFAudyBvMOl%2Fuploads%2FNvU5BWWeZg66JBfkklpS%2FUiScreenshotComparison-S03-old.png?alt=media&amp;token=9096f8e3-30c9-4c47-9d63-20e2351890f7" alt=""><figcaption><p>Old UI</p></figcaption></figure>

<details>

<summary>Branch Components Tab</summary>

The Branch Components tab has been redesigned to surface more information at a glance and place common buttons in more logical locations. The **Components** tab is now organized into two selectable table views: **Components** and **Destructive Changes**. A new **Overview** section on the right side of the tab provides key branch information and buttons for related actions.

The following New UI screenshots highlight items that have moved on the **Branches > Branch > Components** tab. Each item is numbered, and the list below explains what each number refers to.

<figure><img src="https://1800549522-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRpUu5iMlzMFAudyBvMOl%2Fuploads%2FSw5UwuGkvosjNCIj0pG9%2FUiScreenshotComparison-S03-2-new.png?alt=media&amp;token=a4b24b1c-c4a3-47df-9ac3-3452403554a7" alt=""><figcaption></figcaption></figure>

<figure><img src="https://1800549522-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRpUu5iMlzMFAudyBvMOl%2Fuploads%2FED7QuNBwNpDBPChdTEDt%2FUiScreenshotComparison-S03-3-new.png?alt=media&amp;token=cf00be23-90cf-4611-b2e2-8bb72a29387f" alt=""><figcaption></figcaption></figure>

1. **Components**: The branch **Components** table is displayed by selecting the **Components** table view.
2. **+ Add component**: This button has been moved into the **Overview** section.
3. **+ Create pull request**: This button has been moved from the **Three-Dot** dropdown menu to the **Overview** section.
4. **Destructive Changes**: The branch **Destructive Changes** table is displayed by selecting the **Destructive Changes** table view.
5. **+ Add Pre Change**: This button is only visible when the **Destructive Changes** table view is selected.
6. **+ Add Post Change**: This button is only visible when the **Destructive Changes** table view is selected.

</details>

<details>

<summary>Branch Activities Tab</summary>

The Branch Activities tab has been redesigned to simplify the organization of branch activity information. The **Activities** tab is now organized into three selectable views: **Branch**, **Pipeline**, and **State Diagram**. Each view appears in the screenshots below and is explained in the accompanying list.

The following New UI screenshots highlight different views on the **Branches > Branch > Activities** tab. Each view is numbered, and the list below explains what each number refers to.

<figure><img src="https://1800549522-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRpUu5iMlzMFAudyBvMOl%2Fuploads%2FElMzBiel8BRiqbc8lN1Q%2FUiScreenshotComparison-S03-4-new.png?alt=media&amp;token=72773f27-f791-47b6-815b-c5e894faf4dc" alt=""><figcaption></figcaption></figure>

<figure><img src="https://1800549522-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRpUu5iMlzMFAudyBvMOl%2Fuploads%2FW0wxRsvmx0e939NqJbP6%2FUiScreenshotComparison-S03-5-new.png?alt=media&amp;token=1795a897-c307-4576-8bfb-a7cbd74c3751" alt=""><figcaption></figcaption></figure>

<figure><img src="https://1800549522-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRpUu5iMlzMFAudyBvMOl%2Fuploads%2FLAsxx9qxCYadIjwQutB2%2FUiScreenshotComparison-S03-6-new.png?alt=media&amp;token=7ff38e99-b60a-4661-b649-b730d091d4b8" alt=""><figcaption></figcaption></figure>

1. The **Branch** view shows a timeline of the branch's job activities and was previously the **Jobs** table in the Old UI.
2. The **Pipeline** view shows a timeline of the branch's pipeline job activities and was previously the **Pipelines** table in the Old UI.
3. The **State Diagram** view shows the sources flowing into the branch and the targets leaving it. It was previously the **State Diagram** tab in the Old UI.

</details>

## Pull Requests

The **Pull Requests** page has an updated table and simplified status states. The table shows more detail about each Pull Request and now keeps **Closed** and **Merged** Pull Requests visible. Statuses have been reduced to just three.

**New Statuses**

* **Open**: Covers all the Old UI statuses (**Created**, **Review Requested**, **Changes Requested**, **Approved**) and indicates a Pull Request that needs action.
* **Merged**: Previously hidden from the table, this status means a Pull Request was completed by merging the source branch into the target branch.
* **Closed**: Previously hidden from the table, this status means a Pull Request was closed without merging, leaving the source and target branches unchanged.

<figure><img src="https://1800549522-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRpUu5iMlzMFAudyBvMOl%2Fuploads%2FBwsLGq2bLKa8TxC13rWQ%2FUiScreenshotComparison-S04-new.png?alt=media&amp;token=e8b39529-7a12-4b70-b848-f4bedf730aa2" alt=""><figcaption><p>New UI</p></figcaption></figure>

<figure><img src="https://1800549522-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRpUu5iMlzMFAudyBvMOl%2Fuploads%2F27cqT3la6CRlWwF37no6%2FUiScreenshotComparison-S04-old.png?alt=media&amp;token=655d8454-71d3-42dc-a6e5-e020193ce1a0" alt=""><figcaption><p>Old UI</p></figcaption></figure>

## Pipelines

In both the New and Old UIs, the **Pipelines** page provides a table of available pipelines, but the New UI shows more detail about each one.

<figure><img src="https://1800549522-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRpUu5iMlzMFAudyBvMOl%2Fuploads%2FblYGxZ4kHnVOdjTMlFdq%2FUiScreenshotComparison-S05-new.png?alt=media&amp;token=8cc048ad-ead1-4c34-a0dd-74f32586db08" alt=""><figcaption><p>New UI</p></figcaption></figure>

<figure><img src="https://1800549522-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRpUu5iMlzMFAudyBvMOl%2Fuploads%2F1hbsizY2osTxq5Io1o9M%2FUiScreenshotComparison-S05-old.png?alt=media&amp;token=716c1e3d-ab93-4f39-96c1-88a04aaf7cef" alt=""><figcaption><p>Old UI</p></figcaption></figure>

## Settings

In the New UI, the **Settings** options have moved from a single page to individual menu items. You can now open each settings page directly from the sidebar menu. The sidebar menu now includes the following settings:

* Git integration
* AI Settings
* User Stories Integration
* Environment Variables
* Pull Requests Settings

{% tabs %}
{% tab title="Git Integration" %}

<figure><img src="https://1800549522-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRpUu5iMlzMFAudyBvMOl%2Fuploads%2FNqJqOV9yjS5P47qKBP4P%2FUiScreenshotComparison-S06-new-1.png?alt=media&amp;token=e19c6309-7a8f-4f64-a3da-8f43be6a9d8f" alt=""><figcaption><p>New UI</p></figcaption></figure>
{% endtab %}

{% tab title="AI Settings" %}

<figure><img src="https://1800549522-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRpUu5iMlzMFAudyBvMOl%2Fuploads%2FJf1p3LX5lQgCDjCeko4H%2FUiScreenshotComparison-S06-new-2.png?alt=media&amp;token=760fb12d-d12e-4168-a46f-01750725787e" alt=""><figcaption><p>New UI</p></figcaption></figure>
{% endtab %}

{% tab title="User Stories Integration" %}

<figure><img src="https://1800549522-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRpUu5iMlzMFAudyBvMOl%2Fuploads%2F0TqHhCSm6hsxYrT6H8HP%2FUiScreenshotComparison-S06-new-3.png?alt=media&amp;token=40713153-a73b-4176-bb4f-3c81cdb5ec3d" alt=""><figcaption><p>New UI</p></figcaption></figure>
{% endtab %}

{% tab title="Environment Variables" %}

<figure><img src="https://1800549522-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRpUu5iMlzMFAudyBvMOl%2Fuploads%2FPWOeyxGqF2fAOmv6ecxE%2FUiScreenshotComparison-S06-new-4.png?alt=media&amp;token=c50d3874-1ec3-4f24-9268-8ab3b7eae994" alt=""><figcaption><p>New UI</p></figcaption></figure>
{% endtab %}

{% tab title="Pull Requests Settings" %}

<figure><img src="https://1800549522-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRpUu5iMlzMFAudyBvMOl%2Fuploads%2FFnj7cJ6Q3IXJekWX9aOE%2FUiScreenshotComparison-S06-new-5.png?alt=media&amp;token=5fd01ffc-ab11-4600-97ed-b58c8f679be8" alt=""><figcaption><p>New UI</p></figcaption></figure>
{% endtab %}
{% endtabs %}

<figure><img src="https://1800549522-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRpUu5iMlzMFAudyBvMOl%2Fuploads%2FYevdRWpx3zhxO3tlDCno%2FUiScreenshotComparison-S06-old.png?alt=media&amp;token=24327c90-99cf-46ef-900a-b382b824199c" alt=""><figcaption><p>Old UI</p></figcaption></figure>


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://docs.flosum.com/devops/new-ui-ux-transition/new-ui-screenshots.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.