27/07/2027 - Notas da versão do portal integrado do Apigee Edge

Você está vendo a documentação do Apigee Edge.
Acesse a documentação da Apigee X. informações

Na segunda-feira, 27 de julho, vamos lançar uma nova versão do portal integrado do Apigee Edge.

Novos recursos e melhorias

Esta seção descreve os novos recursos e melhorias desta versão.

Melhorias na acessibilidade e capacidade de resposta

Veja a seguir as melhorias de acessibilidade e capacidade de resposta implementadas nesta versão.

• Navegação pelo teclado:agora é possível navegar pelas barras de navegação do cabeçalho e do rodapé, navegação lateral no SmartDocs, lista de apps, visualização de apps e cards de API usando o teclado.
  
• Gerenciamento de foco: navegar com a barra de navegação do cabeçalho e a navegação lateral do SmartDocs move o foco para o primeiro <H1> na página após uma ação de navegação.
• Regiões ativas:as alterações na lista de APIs resultantes da filtragem textual agora são informadas aos usuários que utilizam um leitor de tela.
• Uso semântico de cabeçalhos HTML:agora todo o texto está contido em tags HTML semanticamente adequadas. Uma estrutura de cabeçalhos hierárquica adequada está sendo usada em todo o portal.
• Uso singular de <H1>: agora cada página tem apenas um único <H1> para que os leitores de tela possam identificar facilmente a descrição mais informativa do conteúdo da página.
• Letras maiúsculas estilísticas:o uso de todas as letras maiúsculas como um acento visual agora é aplicado exclusivamente com CSS em vez de no texto.
• Ordem lógica do DOM:os botões de ação nas páginas "Criar" e "Editar app" foram movidos para baixo dos elementos do formulário no DOM para que possam ser ativados em ordem lógica ao concluir a interação com o formulário.
• Descrições textuais de elementos visuais:o uso de rótulos, texto alternativo e texto de botões melhora a navegação com um leitor de tela.
• Contraste de cores:o contraste de cores foi aumentado para atender aos requisitos WCAG AA em vários lugares do produto. Os títulos da API na lista de APIs foram movidos para baixo da imagem para evitar um possível contraste de cor insuficiente
• Validação de formulário:nas páginas "Criar e editar o app", os botões de envio de formulário não estão mais desativados e podem ser ativados para validar o formulário. Os campos de formulário validados nas páginas "Criar" e "Editar app" agora incluem descrições textuais do erro de validação.
• Capacidade de resposta: agora temos uma largura máxima que se aplica a todas as páginas, exceto para SmartDocs. A navegação do SmartDocs agora funciona em telas estreitas do tamanho de smartphones. As páginas "Criar e editar app" agora são mais responsivas a telas estreitas.

Mudanças no DOM que podem afetar seu portal

Considere especialmente se:

• As barras de navegação (cabeçalho e rodapé) e os cabeçalhos das páginas foram estilizados (ou ocultos) com substituições de CSS: agora há uma largura máxima para o conteúdo da página. Para estender as barras de navegação e os cabeçalhos de página até a borda da janela do navegador, a Apigee estilizou o pseudoelemento :before. Para mais informações, consulte Como substituir cores primárias para barras de navegação e cabeçalhos de página.
• Há elementos da página com planos de fundo que se estendem até a borda da janela do navegador (além da imagem de plano de fundo em tela cheia): a largura máxima do conteúdo da página foi limitada para melhorar a capacidade de resposta, o que pode restringir os painéis antigos de largura total nas páginas personalizadas. Para saber mais sobre como usar as novas configurações de max-width, consulte Criar um painel de largura total em uma página do portal.
• Níveis de título HTML específicos foram segmentados com seletores de CSS para modificar os estilos de texto:o nível do título aplicado a determinados conteúdos mudou. Por exemplo: <H1> → <H2> analise a lista detalhada de alterações desta versão para entender exatamente qual conteúdo será afetado.
• Uma cor branca ou muito clara é selecionada como a "cor secundária" no editor de temas do portal:a cor secundária é usada para elementos de navegação difíceis de ver em um fundo branco. Recomendamos escolher uma cor secundária acessível e a substituir, se necessário, por scss personalizado em situações específicas.
• Os links no texto foram estilizados: agora o estilo dos links está mais acessível. Confira as mudanças abaixo para entender como ele pode interagir com seu estilo atual.
• A borda inferior de 2 px na área de conteúdo dos cards de visualização inicial foi estilizada ou oculta com substituições de CSS: esta borda foi movida de <mat-card-content> para uma borda superior em <mat-card-actions>.

Resumo das mudanças detalhadas

As seções a seguir resumem as mudanças detalhadas implementadas nesta versão, por categoria.

Mudanças em todo o portal

Confira abaixo um resumo dessas mudanças.

• As variáveis a seguir não estão mais em uso:
  • $layout-horizontal-padding
  • $layout-main-content-horiz-padding
  • $layout-header-horiz-padding
  • $layout-context-bar-horiz-padding
• Há novas variáveis que controlam a largura máxima da área de conteúdo principal e o padding horizontal mínimo dela:
  • $layout-main-content-max-width
  • $layout-horizontal-min-padding

Mudanças na barra de navegação principal

As mudanças na barra de navegação principal estão resumidas abaixo.

• O logotipo <img> agora está envolvido em uma <a> nos tamanhos de tela de computadores e dispositivos móveis
• O botão suspenso do usuário agora é um <button> em vez de um <a>.

Mudanças no estilo dos links

Os links padrão <a> no texto agora têm um sublinhado por padrão e uma cor de plano de fundo (com base nas configurações do tema "cor secundária") ao passar o cursor.

Alterações de página 404

As alterações na página 404 estão resumidas abaixo.

• "Fazer login agora" agora é <H2> em vez de <H1>
• O texto da explicação agora é <H2> em vez de <H1>

Página "APIs"

As mudanças na página de APIs estão resumidas abaixo por categoria.

• Card de entrada de pesquisa/filtro de API:
  • <mat-card-content class="mat-card-content"> agora une o título e a entrada do card de APIs de pesquisa.
  • O <H2> agora usa class="mat-subheading-1" em vez de class="api-doc-filter-title".
  • O <mat-form-field> agora usa appearance="outline"
  • Um ícone de pesquisa foi adicionado à <mat-form-field> antes da entrada: "<mat-icon matPrefix>search</mat-icon>".
  • As etiquetas Aria e as referências de controle foram adicionadas à entrada
• Mensagem de lista de APIs vazia:
  • "Nenhuma API encontrada" agora é <H2> em vez de <H1>
  • A explicação agora é <H3> em vez de <H2>.
• Lista de cards de API:

  "Nenhuma API corresponde à sua pesquisa" agora é <H2> em vez de <H1>

• Cards de API:
  • A rede >div class="api-doc-card-content-image-gradient"></div> foi removida
  • O título da API foi removido da imagem que contém <div> para <div class="api-doc-card-content-title"></div> imediatamente após a imagem <div>.
  • O título da API agora é <H2> em vez de <H1>.

Lista de apps:

• Estado vazio:
  • "Vamos começar" agora é <H2> em vez de <H1>
  • A orientação de estado vazio agora é <H3> em vez de <H2>.
• Lista:
  • "Meus apps" agora é <H2> em vez de <H1>
  • <mat-row> agora está deformado em uma <a>

Criar e editar páginas de aplicativos

As mudanças nas páginas "Criar e editar app" estão resumidas abaixo.

• <div class="app-buttons"> foi movido para o fim do <form> e substituído por <div class="form-buttons-sticky-container">.
• Todo o uso da classe .app-layout-section foi alterado para .details-layout-section
• Todo o uso da classe .app-layout-section-title foi alterado para .details-layout-section-title
• Todos os títulos das seções agora são <H2> em vez de <div>.
• Todo o uso da classe .app-layout-section-content foi alterado para .details-layout-section-content
• A lista de APIs não é mais uma lista de cartões de API com chaves de alternância (semelhante à lista de APIs). Em vez disso, é uma tabela de APIs
• A entrada do URL de retorno foi movida para uma nova seção
• O botão "Salvar" agora usa o estilo do botão suspenso e a cor de fundo principal.
• As tabelas agora são unidas em um <div> com a classe .app-table-wrapper
• Os cabeçalhos da tabela agora usam o wrapper <thead>
• Os corpos da tabela agora usam o wrapper <tbody>
• [style.width] não é mais usado para definir a largura das colunas da tabela
• Todas as tags <a> na tabela agora usam <button

Lista de times

As alterações na lista "Equipe" estão resumidas abaixo.

• Estado vazio:
  • O valor "Vamos começar" agora é <H2> em vez de <H1>
  • "Criar uma equipe para gerenciar a propriedade compartilhada do app" agora é <H3> em vez de <H2>
• Lista:

  O título "Equipes" agora é <H2> em vez de <H1>

Páginas de criação e edição de equipe

As alterações nas páginas Criar e Editar equipe estão resumidas abaixo.

• No <form>, a classe .teams-form foi substituída por .details-form.
• <div class="teams-buttons"> foi movido para o fim do <form> e substituído por <div class="form-buttons-sticky-container">.
• Todo o uso da classe .teams-layout-section foi alterado para .details-layout-section
• Todo o uso da classe .teams-layout-section-title foi alterado para .details-layout-section-title
• Todo o uso da classe .teams-layout-section-content foi alterado para .details-layout-section-content
• <div class="team-apps-container"> foi adicionado ao redor de <table class="team-apps">

SmartDocs

As mudanças na interface do SmartDocs estão resumidas abaixo.

• Navegação lateral:
  • A navegação lateral foi completamente reescrita com componentes de material angular
  • Os cabeçalhos da navegação lateral agora são <H2> em vez de <div>.
  • Os itens de navegação agora usam a cor de texto padrão do portal em vez da "cor secundária" do editor de temas
  • Os itens selecionados, em foco e ao passar o cursor na navegação lateral agora usam variações escuras e claras da "cor secundária" do editor de temas do portal para o texto e o plano de fundo, respectivamente
• Conteúdo:
  • Muitos subtítulos, como "Parâmetros de caminho" e "Parâmetros do cabeçalho", agora são <H2> em vez de <H3>
  • As entidades de esquema na página de visão geral agora são <H3>=> em vez de <H2>

Como adicionar melhorias de acessibilidade a uma página inicial

Se você tiver um portal de saída, será necessário editar a página inicial para aproveitar as novas melhorias de acessibilidade para cartões navegáveis, conforme descrito abaixo:

1. Remova href="" do contêiner <mat-card>.
2. Use <H2> em vez de <H1> no título do card no <mat-card-header>.
3. Dentro do título do card <h2>, envolva o texto em uma <a class="navigable-content" href="href-name"> e defina o href-name como o valor adequado para a navegação.

Também é possível usar o seguinte modelo de cartão:

<mat-card class="home-page-card quick-start">
  <mat-card-header class="home-page-card-header" color="primary">
    <mat-icon class="home-page-card-header-icon">
      check_circle
    </mat-icon>
    <h2 class="home-page-card-header-text">
      <a class="navigable-content" href="page-route">
        Card heading
      </a>
    </h2>
  </mat-card-header>
  <mat-card-content class="home-page-card-content">
    <p class="home-page-card-content-text">
      Extra content
    </p>
  </mat-card-content>
</mat-card>
</p>

Substituir cores primárias para barras de navegação e cabeçalhos de página

Para estender as barras de navegação e os cabeçalhos de página até a borda da janela do navegador, adicione um estilo personalizado para elas e para os cabeçalhos de página usando o editor de temas avançados, semelhante ao seguinte para a barra de navegação de cabeçalho:

// Override use of the primary color for header navigation bar background-color
.nav-header .mat-toolbar {
  color: #ffffff //  color for navigation text

  // Use the :before pseudo element to style the background of full-width bars
  // (header and footer navigation bars and page headers)
  &:before {
    background-color: #000000; // background color for header navigation bar
  }
}

Como atualizar o procedimento para gerenciar APIs de um aplicativo

A interação do usuário para gerenciar as APIs em um aplicativo no portal integrado mudou. Especificamente, ao gerenciar um aplicativo, na seção de APIs, os usuários precisam clicar em ou (em vez de um botão de alternância) para ativar ou desativar o acesso, respectivamente, a uma API do aplicativo.

Atualize todos os procedimentos do portal que descrevem como gerenciar APIs na página de apps, se aplicável. Para mais informações, consulte Como gerenciar as APIs no seu app.

Bugs corrigidos

Os bugs a seguir foram corrigidos nesta versão. Esta lista é principalmente para usuários que verificam se os tíquetes de suporte foram corrigidos. Ela não foi projetada para fornecer informações detalhadas a todos os usuários.

Id do problema	Component Name	Descrição
161269688	Portal integrado	As miniaturas dos recursos estão sendo renderizadas incorretamente na Apigee híbrida Agora as miniaturas aparecem corretamente na página "Recursos".
161295683	Portal integrado	Falha no servidor sem uma descrição definida para o app A criação do app vai ser bem-sucedida se a descrição (um campo opcional) não for definida para um app.
160898967	Portal integrado	A página de destino do portal não rola corretamente Agora é possível rolar a página de destino do portal.
160613314, 159197760, 158643196, 158069283, 158069066, 140154942	Portal integrado	Várias correções de segurança
158593496	Portal integrado	Falha na criação de apps para desenvolvedores em portais V1 Corrigimos um problema que impedia a criação de apps para desenvolvedores nos portais V1.
158318079	Portal integrado	Adicionar ou modificar o URL de callback no portal do desenvolvedor não está funcionando Corrigimos um problema que impedia os usuários do portal de adicionar ou modificar um URL de callback na página de APIs.
157902256	Portal integrado	A publicação pode substituir uma atualização de nome de página na página "Detalhes da página" Foi corrigido um problema que fazia com que uma atualização do nome da página fosse substituída durante a publicação do portal (causada por uma disputa).
138993728	Portal integrado	A classificação e a pesquisa de e-mails dos programas para desenvolvedores não funcionam A pesquisa e a classificação de contas de usuário pessoais agora funcionam como esperado.

Problemas conhecidos

Veja uma lista dos problemas conhecidos no portal integrado em Problemas conhecidos no portal integrado.