> 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/devops-pt-br/transicao-para-a-nova-ui-ux/capturas-de-tela-da-nova-interface.md).

# Capturas de tela da nova interface

## ![](https://2465342021-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) Visão geral

Este artigo mostra capturas de tela das UIs antiga e nova do Cloud DevOps para cada seção do menu lateral, para que você possa se familiarizar rapidamente com a nova UI. Ele também inclui duas seções expansíveis que abordam a nova UI para os seguintes itens de uma branch:

* **Branch > Componentes** aba: [#branch-components-tab](#branch-components-tab "mention")
* **Branch > Atividades** aba: [#branch-activities-tab](#branch-activities-tab "mention")

O Code Viewer inclui muitas melhorias na experiência do usuário, que são detalhadas em um artigo separado; veja o link a seguir.

* [Visualizador de código aprimorado](/devops/devops-pt-br/transicao-para-a-nova-ui-ux/visualizador-de-codigo-aprimorado.md)

{% hint style="info" %}
Cada captura de tela nesta comparação usa o mesmo tamanho de janela, para que você possa comparar as UIs nova e antiga em pé de igualdade. Vistas lado a lado, a nova UI faz um uso mais eficiente do espaço da tela, exibindo mais informações sem parecer apertada.
{% endhint %}

## Organizações

A **Organizações** A página em ambas as UIs, nova e antiga, fornece uma tabela das organizações Salesforce conectadas ao seu tenant do DevOps, mas a nova UI melhora o layout da tabela.

<figure><img src="https://2465342021-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>Nova UI</p></figcaption></figure>

<figure><img src="https://2465342021-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>UI antiga</p></figcaption></figure>

## Painel

A **Painel** A página tem apenas pequenas alterações de estilo entre as UIs nova e antiga.

<figure><img src="https://2465342021-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>Nova UI</p></figcaption></figure>

<figure><img src="https://2465342021-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>UI antiga</p></figcaption></figure>

## Código → Branches

A **Código** página agora se chama **Ramificações**, um nome que reflete melhor a finalidade da seção. Na nova UI, a tabela Branches mostra mais informações com um layout aprimorado e rótulos de coluna mais claros, para que você possa ver os detalhes mais importantes de cada branch de relance, sem abri-la.

<figure><img src="https://2465342021-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>Nova UI</p></figcaption></figure>

<figure><img src="https://2465342021-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>UI antiga</p></figcaption></figure>

<details>

<summary>Aba Componentes da branch</summary>

A aba Branch Components foi redesenhada para exibir mais informações de relance e posicionar botões comuns em locais mais lógicos. A **Componentes** aba agora está organizada em duas visualizações de tabela selecionáveis: **Componentes** e **Alterações destrutivas**. Uma nova **Visão geral** seção no lado direito da aba fornece informações importantes da branch e botões para ações relacionadas.

As capturas de tela a seguir da nova UI destacam os itens que foram movidos na **Branches > Branch > Componentes** aba. Cada item é numerado, e a lista abaixo explica a que cada número se refere.

<figure><img src="https://2465342021-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://2465342021-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. **Componentes**: A branch **Componentes** tabela é exibida ao selecionar a **Componentes** visualização de tabela.
2. **+ Adicionar componente**: Este botão foi movido para a **Visão geral** seção.
3. **+ Criar Pull Request**: Este botão foi movido do **Três pontos** menu suspenso para o **Visão geral** seção.
4. **Alterações destrutivas**: A branch **Alterações destrutivas** tabela é exibida ao selecionar a **Alterações destrutivas** visualização de tabela.
5. **+ Adicionar alteração prévia**: Este botão só fica visível quando a **Alterações destrutivas** visualização de tabela estiver selecionada.
6. **+ Adicionar alteração posterior**: Este botão só fica visível quando a **Alterações destrutivas** visualização de tabela estiver selecionada.

</details>

<details>

<summary>Aba Branch Activities</summary>

A aba Branch Activities foi redesenhada para simplificar a organização das informações de atividade da branch. A **Atividades** aba agora está organizada em três visualizações selecionáveis: **Ramificação**, **Pipeline**, e **Diagrama de estados**. Cada visualização aparece nas capturas de tela abaixo e é explicada na lista correspondente.

As capturas de tela a seguir da nova UI destacam diferentes visualizações na **Branches > Branch > Atividades** aba. Cada visualização é numerada, e a lista abaixo explica a que cada número se refere.

<figure><img src="https://2465342021-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://2465342021-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://2465342021-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. A **Ramificação** a visualização mostra uma linha do tempo das atividades de jobs da branch e era anteriormente a **Jobs** tabela na UI antiga.
2. A **Pipeline** a visualização mostra uma linha do tempo das atividades de jobs de pipeline da branch e era anteriormente a **Pipelines** tabela na UI antiga.
3. A **Diagrama de estados** a visualização mostra as origens que entram na branch e os destinos que saem dela. Era anteriormente a **Diagrama de estados** aba na UI antiga.

</details>

## Solicitações de Pull Request

A **Solicitações de Pull Request** A página tem uma tabela atualizada e estados de status simplificados. A tabela mostra mais detalhes sobre cada Pull Request e agora mantém **Fechado** e **Mesclado** Pull Requests visíveis. Os status foram reduzidos para apenas três.

**Novos status**

* **Aberto**: Abrange todos os status da UI antiga (**Criado**, **Revisão solicitada**, **Alterações solicitadas**, **Aprovado**) e indica um Pull Request que precisa de ação.
* **Mesclado**: Antes oculto da tabela, este status significa que um Pull Request foi concluído mesclando a branch de origem na branch de destino.
* **Fechado**: Antes oculto da tabela, este status significa que um Pull Request foi fechado sem mesclar, deixando as branches de origem e destino inalteradas.

<figure><img src="https://2465342021-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>Nova UI</p></figcaption></figure>

<figure><img src="https://2465342021-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>UI antiga</p></figcaption></figure>

## Pipelines

Nas UIs nova e antiga, a **Pipelines** página fornece uma tabela dos pipelines disponíveis, mas a nova UI mostra mais detalhes sobre cada um.

<figure><img src="https://2465342021-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>Nova UI</p></figcaption></figure>

<figure><img src="https://2465342021-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>UI antiga</p></figcaption></figure>

## Configurações

Na nova UI, as **Configurações** opções foram movidas de uma única página para itens individuais de menu. Agora você pode abrir cada página de configuração diretamente pelo menu lateral. O menu lateral agora inclui as seguintes configurações:

* Integração com Git
* Configurações de IA
* Integração de User Stories
* Variáveis de ambiente
* Configurações de Pull Requests

{% tabs %}
{% tab title="Integração com Git" %}

<figure><img src="https://2465342021-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>Nova UI</p></figcaption></figure>
{% endtab %}

{% tab title="Configurações de IA" %}

<figure><img src="https://2465342021-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>Nova UI</p></figcaption></figure>
{% endtab %}

{% tab title="Integração de User Stories" %}

<figure><img src="https://2465342021-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>Nova UI</p></figcaption></figure>
{% endtab %}

{% tab title="Variáveis de ambiente" %}

<figure><img src="https://2465342021-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>Nova UI</p></figcaption></figure>
{% endtab %}

{% tab title="Configurações de Pull Requests" %}

<figure><img src="https://2465342021-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>Nova UI</p></figcaption></figure>
{% endtab %}
{% endtabs %}

<figure><img src="https://2465342021-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>UI antiga</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/devops-pt-br/transicao-para-a-nova-ui-ux/capturas-de-tela-da-nova-interface.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.
