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 começar a 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 resposta implementadas nessa versão.

  • Navegação pelo teclado:agora é possível navegar pelas barras de navegação do cabeçalho e do rodapé, navegação lateral do SmartDocs, lista de apps, visualização de apps e cards de API usando o teclado.
  • Gerenciamento de foco: a navegação 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 mudanças na lista de APIs resultantes da filtragem textual agora são informadas aos usuários que usam um leitor de tela.
  • Uso semântico de títulos HTML: agora todo o texto está contido em tags HTML semanticamente adequadas. Uma estrutura de cabeçalhos hierárquica adequada agora é usada em todo o portal.
  • Uso único de <H1>: cada página agora tem apenas um <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 destaque visual agora é aplicado exclusivamente com CSS em vez de no texto real.
  • Ordem lógica do DOM:os botões de ação nas páginas "Criar" e "Editar app" foram movidos para baixo dos elementos de 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:houve um uso aprimorado de rótulos, texto alternativo e texto de botões, o que melhora a navegação com um leitor de tela.
  • Contraste de cor:o contraste de cor foi aumentado para atender aos requisitos WCAG AA em muitos 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 app", os botões de envio de formulários 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 há uma largura máxima que se aplica a todas as páginas, exceto aos SmartDocs. A navegação do SmartDocs agora funciona em telas estreitas do tamanho de um telefone. As páginas "Criar e editar app" agora são mais responsivas a telas estreitas.

Alterações 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 em barras de navegação e cabeçalhos de página.
  • Existem elementos de página com planos de fundo que se estendem até a borda da janela do navegador (exceto a 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 anteriores 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 específicos de cabeçalho HTML 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> Consulte 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 "cor secundária" no editor de tema do portal:a cor secundária é usada para elementos de navegação difíceis de enxergar contra um fundo branco. Recomendamos escolher uma cor secundária acessível e a substituir, se necessário, por scss personalizada 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 da página inicial foi estilizada ou ocultada 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 por categoria as mudanças detalhadas que foram implementadas nesta versão.

Mudanças em todo o portal

Veja abaixo um resumo das mudanças feitas em todo o portal.

  • 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 da área de conteúdo principal:
    • $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á unido em um <a> para tamanhos de tela de computadores e dispositivos móveis
  • O botão suspenso do usuário agora é um <button> em vez de um <a>.

Agora, os links padrão <a> no texto têm um sublinhado 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 mudanças na página 404 estão resumidas abaixo.

  • "Fazer login agora" agora está <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 filtro/pesquisa de API:
    • <mat-card-content class="mat-card-content"> agora envolve o título e a entrada do card das 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>"
    • Os rótulos Aria e as referências de controle foram adicionados à 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:
    • "Começar" agora está <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 um <a>

Criar e editar páginas de aplicativos

Confira abaixo um resumo das mudanças nas páginas "Criar e editar app".

  • <div class="app-buttons"> foi movido para o final de <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 de 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 chave 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 elevado no tapete e a cor de fundo principal
  • As tabelas agora são agrupadas 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 equipes

As mudanças na lista "Equipe" estão resumidas abaixo.

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

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

Páginas "Criar e editar 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 final da <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 tema do portal.
    • Os itens selecionados, focados 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 de 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>

Adicionar melhorias de acessibilidade a uma página inicial

Se você tiver um portal fechado, 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> para o título do card dentro de <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 do card.

Como alternativa, é 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>

Como substituir cores primárias em 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 essas barras e cabeçalhos usando o editor de tema avançado, semelhante à seguinte barra de navegação do cabeçalho:


// Override use of the primary color for header navigation bar background-color
.nav-header .mat-toolbar {
  color: #fff //  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: #000; // 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 app, na seção de APIs, os usuários precisam clicar em ativar ícone ou desativar ícone (em vez de um botão de alternância) para ativar ou desativar o acesso, respectivamente, a uma API do app.

Atualize todos os procedimentos no seu 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

As miniaturas agora são exibidas corretamente na página "Recursos".

161295683 Portal integrado

Falha no servidor sem descrição definida para o app

A criação de apps será bem-sucedida se a descrição (um campo opcional) não estiver 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 do desenvolvedor nos portais V1

Corrigimos um problema que impedia a criação de apps do desenvolvedor 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 a atualização de um nome de página na página de 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 (causado por uma disputa).

138993728 Portal integrado

A classificação e a pesquisa de e-mails de programas de desenvolvedores não estão funcionando

A pesquisa e a classificação de contas de usuário pessoais agora funcionam normalmente.

Problemas conhecidos

Para ver uma lista dos problemas conhecidos com o portal integrado, consulte Problemas conhecidos com o portal integrado.