Разработка расширений для вертикальной веб-навигации - Azure DevOps

Мақала
06/01/2023

Azure DevOps Services

Вертикальная навигация содержит изменения, влияющие на некоторые расширения. Эти результаты включают поддержку значков расширений, а также изменения в контексте команды.

Совет

Ознакомьтесь с нашей новейшей документацией по разработке расширений с помощью пакета SDK для расширения Azure DevOps.

Контекст команды

При традиционной горизонтальной навигации пользователи могут перейти к проекту или команде, выбрав в средстве выбора, который находится в левом верхнем углу заголовка страницы. В этом средстве выбора представлен список последних команд и способ поиска всех команд. В новой вертикальной навигации пользователь может переходить только к проекту (а не к команде). Это изменение было внесено для упрощения общего взаимодействия. Но это стало проблемой для веб-расширений, которые полагаются на способность пользователей переключать команды с помощью традиционного средства выбора команд в заголовке страницы.

SDK.getWebContext() — это API на стороне клиента, предоставляемый пакетом SDK, который предоставляет сведения о текущей организации, проекте и команде, с которыми работает пользователь:

{
    "account": {
        "name": "Fabrikam",
        "id": "50e49b94-4bb6-40e7-8c85-a6d756d8a4d8"
    },
    "project": {
        "name": "Fabrikam Dev",
        "id": "049b1af2-fc87-4e50-95e4-151357f04b7f"
    },
    "team": {
        "name": "Ops Team",
        "id": "9b3a6b80-fe95-4c8c-8aa1-1e5d535d7af1"
    }
}

Не рекомендуется полагаться на SDK.getWebContext().team. Вместо этого следуйте приведенным ниже рекомендациям в зависимости от категории, подпадаемой вашему расширению.

Расширения концентратора, которые знают о команде

Если расширение должно предоставить пользователям способ выбора команды, можно использовать REST API Teams, чтобы получить список команд для текущего проекта. В следующем примере показано, как вызвать этот API из расширения.

import { getClient } from "azure-devops-extension-api";
import { CoreRestClient } from "azure-devops-extension-api/Core";
import * as SDK from "azure-devops-extension-sdk";

private async getTeams() {
    const client = getClient(CoreRestClient);
    
    client.getTeams(SDK.getWebContext().project.id).then(
        function(teams) {
            console.log(teams);
        }
    );
}

Пример расширения, предоставляющего средство выбора команды, см. в разделе Календарь команды.

Расширения сводок и панелей, которые находятся в центрах, поддерживающих группу, таких как Невыполненная работа и панель мониторинга

Расширение может проверка объект конфигурации, переданный в ваш вклад. Этот объект имеет различные свойства в зависимости от типа вклада и места размещения вклада. В примере показана команда чтения из конфигурации и возврат к команде чтения из webContext для поддержки как новой вертикальной, так и более старой горизонтальной навигации в локальных выпусках.

function getCurrentTeam() {
  let webContext = SDK.getWebContext();
  let configuration = SDK.getConfiguration();

  if ("team" in configuration) {
    return configuration.team;
  } else if ("team" in webContext) {
    return webContext.team;
  } else {
    return null; // should only happen if not in a project context
  }
}

Расширения действий, которые находятся в центрах с поддержкой команды, таких как Невыполненная работа и панель мониторинга

Расширение может проверка объект actionContext, передаваемый обратному вызову, который вызывается при выборе пользователем элемента меню "Добавлено". В примере показана команда чтения из actionContext.

var menuContributionHandler = (function () {
        "use strict";
        return {
            // This is a callback that gets invoked when a user selects the newly contributed menu item
            // The actionContext parameter contains team information.
            execute: function (actionContext) {
                if("team" in actionContext) {
                    alert(`Team. Id is ${actionContext.team.id}, Name is ${actionContext.team.name}`);
                }
            }
        };
    }());

Значок концентратора

При необходимости можно задать ресурс (например, .png или .jpg) в качестве значка для концентратора. Этот значок отображается рядом с центром на вертикальной панели навигации. Оно должно быть упаковано с расширением.

Примечание

Эти значки не отображаются в горизонтальной навигации.

Чтобы задать значок для концентратора, выполните следующие действия.

iconAsset Задайте для свойства вклада концентратора полный идентификатор ресурса, который соответствует шаблону: {publisher-id}.{extension-id}/{asset-path}.
Добавьте запись для этого ресурса в includesata свойство contribution.
Упакуйте ресурс с расширением, указав его в files свойстве в корне манифеста.

Пример 1.

{
  "id": "my-extension",
  "publisherId": "my-publisher",
  ...
  "contributions": [
        {
            "id": "example-hub",
            "type": "ms.vss-web.hub",
            "targets": [
                "ms.vss-code-web.code-hub-group"
            ],
            "properties": {
                "name": "My Hub",
                "iconAsset": "my-publisher.my-extension/images/fabrikam-logo.png",
                "includesData": {
                    "assets": [
                        "my-publisher.my-extension/images/fabrikam-logo.png"
                    ]
                }
            }
       }
  ],
 "files": [
     {
         "path": "images/fabrikam-logo.png",
         "addressable": true
     }
 ]
}

Пример 2.

При применении таких тем, как светлая или темная, можно указать значки в манифесте расширения следующим образом.


{
    "id": "hub",
    "type": "ms.vss-web.hub",
    "targets": [
        "ms.vss-work-web.work-hub-group"
    ],
    "properties": {
        "name": "Hub",
        "description": "Something",
        "uri": "pages/Hub.html",
        "icon": {
            "light": "img/hub-light.png",
            "dark": "img/hub-dark.png"
        }
    }
}

Бөлісу құралы:

Руководство по вертикальной навигации