microsoft / azure-devops-extension-sample

Sample web extension for Azure DevOps

Azure DevOps Web Sample Extension

This repository generates an Azure DevOps extension containing a number of different contributions of various types.

Dependencies

The sample repository depends on a few Azure DevOps packages:

• azure-devops-extension-sdk: Required module for Azure DevOps extensions which allows communication between the host page and the extension iframe.
• azure-devops-extension-api: Contains REST client libraries for the various Azure DevOps feature areas.
• azure-devops-ui: UI library containing the React components used in the Azure DevOps web UI.

Some external dependencies:

• React - Is used to render the UI in the samples, and is a dependency of azure-devops-ui.
• TypeScript - Samples are written in TypeScript and compiled to JavaScript
• SASS - Extension samples are styled using SASS (which is compiled to CSS and delivered in webpack js bundles).
• webpack - Is used to gather dependencies into a single javascript bundle for each sample.

Building the sample project

Just run:

npm run build

This produces a .vsix file which can be uploaded to the Visual Studio Marketplace

Using the extension

The preferred way to get started is to use the tfx extension init command which will clone from this sample and prompt you for replacement information (like your publisher id). Just run:

npm install -g tfx-cli
tfx extension init

You can also clone the sample project and change the publisher property in azure-devops-extension.json to your own Marketplace publisher id. Refer to the online documentation for setting up your own publisher and publishing an extension.

Samples

Individual sample contributions are self-contained folders under ./src/Samples. Within each sample you will find:

1. {SampleName}.json - describes the contribution objects being added to Azure DevOps
2. {SampleName}.html - page which is rendered within an iframe on the appropriate Azure DevOps page or pages. It may be visible UI (such as a Hub) or a background iframe (such as a Menu action handler). This will include a sample reference for {SampleName}.js, and for visible frames it will contain a single <div> element with an id of root.
3. {SampleName}.ts(x) - Root script that is run when the frame is loaded. A webpack entry is added for this file which will generate a single js file with this content and all its dependencies.
4. {SampleName}.scss - optional sass file containing the styles (CSS) for the UI
5. Additional ts/tsx files - For samples that are too big for one file, the code will be broken up appropriately

BreadcrumbService

This sample adds a breadcrumb service which adds a "Sample Breadcrumb Item" global breadcrumb item to the sample hub. Visit the "Sample Hub" in the Pipelines hub group to see this item.

CodeEditorContribution

This sample adds a language definition and a JSON schema for the code editor.

To see the language definition in action, add a new file to git or TFVC called "sample.mylog", then copy the example log content from the Monaco playground.

To see the JSON schema in action, add a new file to git or TFVC called "myconfig.json", then begin editing it.

Feature

This sample shows how to hook into the Preview Features panel (under the user profile menu). It adds a simple hub that is only shown when an "ABC" feature is turned on. The feature can be toggled per-user or per-organization.

This also defines a second feature (ABC v2) which controls whether v1 or v2 of the ABC hub is used (when the ABC feature is turned on). When enabled, a "property-provider" contribution modifies the name and url of the hub contribution. Here we add a v2=true query parameter to our existing hub page, but you could also specify a completely different html page here. This feature shows off a bit more advanced functionality provided by preview features. It can be toggled per-user, per-project, or per-organization (the "null" hostScopeValue). It is on by default (defaultState: true). And it has an override rule which causes the v2 feature to be OFF (and disabled in the preview features panel) whenever the ABC feature is off.

Hub

This sample adds a hub named "Sample Hub" into the Pipelines hub group. If you visit a project-level page, you will find Sample Hub under the Pipelines navigation element in the vertical navigation menu on the left of the page.

The hub uses a Pivot component to draw 4 different tabs:

1. An Overview tab contains some simple details about the current user and project
2. A Navigation tab contains a few actions that allow you to integrate with the page's URL and title
3. An Extension Data tab demonstrates reading and writing to the extension data service
4. A Messages tab shows how to display global messages

There are also actions at the top-right of the hub which demonstrate opening dialogs and panels, including custom content within them (used in the Panel sample).

Menu

This sample adds a "Sample build definition menu item" to the Builds hub in the dropdown actions menu in the top-right of the page. The menu handler gets the current build definition from the context that is passed to it, it makes a REST call, and shows the result in a message box.

Panel

This sample is leveraged within the Hub sample. It is content that contains a toggle button along with OK/Cancel buttons. It can be used as custom panel or dialog content.

Pivot

This sample adds a "Sample Pivot" pivot (tab) to the Organization (Project Collection) home page, next to "Projects", "My work items", and "My pull requests".

This pivot makes a REST call for all the projects in the organization and it displays them in a grid view.

Pill

This sample adds pills to the title of the Pipeline definition (Runs) page.

QueryParamsHandler

This sample adds a service that gets loaded on any page whenever a "showMyPanel" query parameter is present in the URL when any page is loaded. The startup service shows the custom panel from the Panel sample, using an optional "myPanelTitle" query parameter as the panel title.

RepositoryActions

This sample adds a "Sample repository action" menu item to the repository picker in the header of code hub pages. If a "href" property is provided, clicking on the action will navigate to the given url. If a "uri" is provided, that code will be executed when the action is clicked.

RepositoryServiceHub

This sample adds a "Repository Information" hub to the Code hub group. It demonstrates how to interact with the IVersionControlRepositoryService to obtain basic information about a user's currently selected Git repository.

WorkItemFormGroup

This sample adds a "Sample WorkItem Form Group" extension to workitem form to show how to interact with the IWorkItemFormService service and IWorkItemNotificationListener. It gives UI to show case how to change field values using the form service and displaying workitem form notification events.

This sample also provides a unit testing example with minimal necessary mocks.

WorkItemOpen

This sample adds a "Sample WorkItem Open" hub to the Boards hub group to show how to interact with the IWorkItemFormNavigationService service. It gives UI for you to open an existing work item (by id) or open the work item form for a new work item (by work item type). Either of these options open a dialog in the host frame.

References

The full set of documentation for developing extensions can be found at https://docs.microsoft.com/en-us/azure/devops/extend.

Contributing

This project welcomes contributions and suggestions. Most contributions require you to agree to a Contributor License Agreement (CLA) declaring that you have the right to, and actually do, grant us the rights to use your contribution. For details, visit https://cla.microsoft.com.

When you submit a pull request, a CLA-bot will automatically determine whether you need to provide a CLA and decorate the PR appropriately (e.g., label, comment). Simply follow the instructions provided by the bot. You will only need to do this once across all repos using our CLA.

This project has adopted the Microsoft Open Source Code of Conduct. For more information see the Code of Conduct FAQ or contact [email protected] with any additional questions or comments.

azure-devops-extension-sample's Issues

How to do localization

For the build tasks, I have found from the tasks repo that the task.json must have a task.loc.json with id like ms-resource:loc. instead of the resources, and a bunch of localized .resjson files in the folder Strings/resources.resjson/.

But I have found nothing for UI like the ones in this repository.

Is there any documentation or process to localize these parts?

Bookmarking a 'tab' that is added by an extension does not work

Hi,
I have created an extension, that adds a custom tab (type: ms.vss-web.tab) to the queryresults page (targets: ms.vss-work-web.query-tabs). Everything is working fine... except when I try to bookmark the tab.

I am just copying the url, that is something like this: https://XYZ/_queries/mypublisherid.mycontributionid/query-guid/

When I close the browser and try to use the bookmark... it doesnt work. It just opens the queryresults page.
At first it looks like that this is a loading issue... the custom appears after a second when everything else is loaded. So I have tried to optimize everything at my end.

But I also tried the following...

• I have closed the browser
• Opened it with the bookmark... it shows the query results page (that is not the expected result)
• I am waiting untill the tab has appeared (so everything is loaded)
• I am re-using the bookmark... but this also results into the query results page (that was something I really didnt expect)

It only seems to work whenever I have had opened the custom tab itself, within the browser session. Once I have done this, using bookmarks (like within the teamprojects homepage wiki) is no problem.

But I want to be able to bookmark it and save it as a favourite within my browser... or be able to sent someone the url by email.

Unfortunately this seems to be not possible.

I am using the new API.

The samples from the old VSS api... the contribution guide... seems to be able to do this without any problems.

So I am hoping you could help me out.

Kr
Edward

How to implement infinite scrolling with Azure DevOps extension Table

In our Azure DevOps extension we are using Advanced table from NPM azure-devops-ui. But this table has limitations of row count that can display. For example when displaying 1000 rows, then a browser becomes slow and sometimes irresponsible.

We understand that infinite scrolling may be the solution. When scrolling hits the bottom of the page, the next records will be loaded. But there is no example of how to use it with Advanced table.

Should I use some of React library for infinite scrolling? Or there is some mechanism implemented in azure-devops-ui? Cannot find it but as I can see, infinite scrolling is realized on Azure DevOps. For example in Pipelines//Runs.

Any help will be appreciated.

Where can I log questions or issues related to the azure-devops-ui library?

Not sure if this is the right forum for azure-devops-ui questions as that library doesn’t seem to be open source.

I’m trying to load 100+ rows into a Table but am only getting the first 30 rows rendered. The only way I can seem to control the number of rows is using the pageSize property, but from the documentation that appears to be a property for controlling pre-rendering of rows and it is an arbitrary value that isn’t directly tied to row count. I don’t see a way to determine if the number of rows I provide to the table will actually be rendered in whole, even if that is a smaller number. Is there any way to achieve this?

I would like to implement paging or some type of lazy loading (like the “load more..” behaviour used elsewhere in Azure DevOps) but these don’t appear to be native features of the Table component. Am I missing anything or are there any examples of this? Or is this something where I’ll just have to roll my own implementation?

Validate field values when save button is hit

According the documentation, onSaved event is triggered right after the form has been saved. Is there a way to listen an event which will be triggered when the Save button is clicked but right before the data is saved?

User unauthorized to access this resource

Copying the Pivot sample, I changed it to make a call to getBuilds() using the BuildRestClient, supplying only the project id. Updating the extension, I refreshed and "Loading..." remained visible. I checked the network messages in debug and saw the error.

After getting the token, the browser makes the request for the project's builds but receives a 401 response. I have checked the request header and the correct authorization value is being set. It is strange that getProjects() works but getBuilds() doesn't on the same extension. I am unsure of where it gets the guid of the user from.

Referencing the same API endpoint works from a JavaScript extension. Likewise, using the REST clients' getBuilds() in the same JavaScript extension works.

import { BuildRestClient, Build } from "azure-devops-extension-api/Build";
const builds = await getClient(BuildRestClient).getBuilds(projectId);

{"$id":"1","innerException":null,"message":"TF400813: The user '***' is not authorized to access this resource. ","typeName":"Microsoft.TeamFoundation.Framework.Server.InvalidIdentityException, Microsoft.TeamFoundation.Framework.Server","typeKey":"InvalidIdentityException","errorCode":0,"eventId":3000}

Add a multi-page Hub example

The current Hub examples uses Tabs to represent its different content, but if a Hub is large enough it may be desirable to have multiple pages either using something like React Router and/or the location and navigation services.

It is not clear to me what the intended flow is for doing this, and a reference example would be helpful.

How to send events/messages between different parts of the extension

Let's say I have a submit button which sends information to an external API. Is there a way to send a notification to another portion of the extension which is a different contribution on a different iFrame to notify that the post request was successful?

I've been successful at sending/receiving notifications when Azure-specific events occur, as documented in WorkItemFormGroup.tsx, however, I'm not quite sure how to do it if it's not specific to Azure.

Thanks for your time and help.

Error: EISDIR illegal operation on a directory, open '{path}/{to}/{extension-dir}'

I'm running into an issue trying to use the recommended path to initialize an extension.

Each attempt at running tfx extension init results in error:

error: Error: Error unzipping /{path/azure-devops-extension-sample.zip: Error: EISDIR: illegal operation on a directory, open '/{path}/

While troubleshooting with the --trace-level=debug I noticed what appears to be a delete operation after the zipped source is downloaded, but before the unzip operation.

Downloading sample package from https://codeload.github.com/Microsoft/azure-devops-extension-sample/zip/master Package downloaded to {path}/azure-devops-extension-sample.zip (120 kB) 2019-08-27T22:37:44.600Z : Save file azure-devops-extension-sample-master/ 2019-08-27T22:37:44.602Z : Writing buffer for azure-devops-extension-sample-master/ 2019-08-27T22:37:44.602Z : Creating folder if it doesn't exist: {path} 2019-08-27T22:37:44.603Z : Save file azure-devops-extension-sample-master/.gitignore err: Error: EISDIR: illegal operation on a directory, open '{path}/' 2019-08-27T22:37:44.604Z : Deleting contents of {path} 2019-08-27T22:37:44.604Z : Writing buffer for azure-devops-extension-sample-master/.gitignore 2019-08-27T22:37:44.604Z : Creating folder if it doesn't exist: {path} 2019-08-27T22:37:44.605Z : Error: Error unzipping {path}/azure-devops-extension-sample.zip: Error: EISDIR: illegal operation on a directory, open '{path}/' 2019-08-27T22:37:44.605Z : at ExtensionInit.<anonymous> (/usr/local/lib/node_modules/tfx-cli/_build/exec/extension/init.js:311:31) 2019-08-27T22:37:44.605Z : at step (/usr/local/lib/node_modules/tfx-cli/_build/exec/extension/init.js:45:23) 2019-08-27T22:37:44.605Z : at Object.next (/usr/local/lib/node_modules/tfx-cli/_build/exec/extension/init.js:26:53) 2019-08-27T22:37:44.605Z : at fulfilled (/usr/local/lib/node_modules/tfx-cli/_build/exec/extension/init.js:17:58)

I try tu use dropdown and i cannot set item to default select. Can you help me?

I resolved problem

WorkItemIcons and Scopes

Hello,
I used this repo to get the icons of the work item types
var iconList = await client.getWorkItemIcons(); console.log("work item icons", iconList);

And got a CORS issue:
workItemIcons:1 GET http://.../DefaultCollection/_apis/wit/workItemIcons 401 (Unauthorized)
Hub.html:1 Access to fetch at 'http://.../DefaultCollection/_apis/wit/workItemIcons' from origin 'http://...' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

I guessed it's a scopes issue but I don't know which scope to use, I currently use

"scopes": [ "vso.work_full" ]

But it's not enough and it's not written in: https://docs.microsoft.com/en-us/azure/devops/extend/develop/manifest?view=azure-devops#scopes
Please help, which scope Should I use?
10x!

Hub, PivotBarItem and other components missing

Hey there,

thanks for building this sample repo - much apprecheated.

We were using the undocumented vss-ui package and for now it seems we can't switch to the azure-devops-ui package as some copmonents like Hub and PivotBarItem are missing in the new package.

Will those eventually be added to azure-devops-ui ?

Add Widget sample

Does it's possible to add the Widget sample please.

Code editor contribution not working in pull-request view

Hey there,

when I alter and modify the sample for the code editor contribution to have my own language supported (Delphi in my case), I see the highlighting working in the Repo hub, when I am browsing files.
(compare https://github.com/microsoft/azure-devops-extension-sample/tree/master/src/Samples/CodeEditorContribution)

However, when I have PRs ongoing, in these views there, I do not see the syntax highlighting.

Is there a separate endpoint to register the language at/on?
Is there a different contribution to use for that?

Weirdly enough, when I use comments in PRs and use the code tags with my specified alias of "delphi", formatting works for the comments.

Is there somewhere a complete list of contributions and endpoints, one can hook and extend?

Kind regards,
Harald

Edit:
Can I somehow target the monaco-diff-editor?

Incoplete documentation

According to the documentation we have to get copy and than Just run: npm run build

Actually it is not complete first step. You have to call call - npm install - first. Please tune this documentation.

Also, pay attention on message : found 73 high severity vulnerabilities - rised during npm install.

How to Add button control within workitem form page?

I have to add button and on click of the button need to show the pop-up window on work item page. Is it possible to achieve the same using extension?

Context type for menu extensions

In https://github.com/microsoft/azure-devops-extension-sample/blob/master/src/Samples/Menu/Menu.ts, we have

SDK.register("sample-build-menu", () => {
    return {
        execute: async (context: BuildDefinition) => {
            const result = await getClient(BuildRestClient).getDefinition(context.project.id, context.id, undefined, undefined, undefined, true);
            const dialogSvc = await SDK.getService<IHostPageLayoutService>(CommonServiceIds.HostPageLayoutService);
            dialogSvc.openMessageDialog(`Fetched build definition ${result.name}. Latest build: ${JSON.stringify(result.latestBuild)}`, { showCancel: false });
        }
    }
});

Is the context always BuildDefinition? If not, how do I change it? And what can I change it to? I'm trying to build a context menu for a PR.

Sorry, if I'm having a hard time finding good documentation on how this works.

How to do I call getWebContext in a hub?

I'm trying to create a Azure Repos Hub page to gather information about Pull Requests in a repo.. So I need to know what Repo is selected.. I am trying to wrap my head around the examples in this repo, and the examples in:
https://github.com/microsoft/vsts-extension-samples/

Is it still appropriate to use the VSS.getWebContext()? is there an example around in how to use that in a react page hub page like the hub example here? I guess I'm not finding a good set of examples that will show, in a current state of Azure DevOps how to best do that...

How do you setfield for custom reference?

I'm using the following code to set the value of a custom field reference, however it never succeeds.

 const trySet = await workItemFormService.setFieldValue(
      "MyCustomField",
      "This is the gherkins value!!"
    );

If I change the field reference to System.Title, it works.

Do you have to register the custom field somewhere before being able to set it?

Badges/labels for work item task board "cards"

We have a custom work item state ("blocked") that we would like to highlight in the UI. Ideally we'd like to add some sort of badge that displays next to / with the work item in the Work item and task boards screens, for example showing a big red label on the item's "card" in the sprint task board view. Is this a possible extension point? And if so, what contribution type would this be? I'm having difficulty googling for an example as I'm not sure what I should be looking for.

First build with original publisher overrides latest changes

If we run the firt build with original publisher name and Id - then next builds will not consider changes in azure-devops-extension.json file.

Add unit tests to example

How can we unit test our extensions? I have tried doing this recently with Jest. Jest is unable to run load anything from azure-devops-ui library since its compiled to ES6 (not es2015). If there is a way to do that, it would be super helpful to have it in this repo.

Empty custom dialog

I am developing an extension with pull-request context menu item to open up custom dialog. Extension is not rendering the external content. It opens up empty dialog. This is code to open dialog

dialogSVC.openCustomDialog(SDK.getExtensionContext().id + ".some-random-id", { title: "Trigger a BB job", } );
Here is the contribution defined in manifest.json file:

{ "id": "some-random-id", "type":"ms.vss-web.control", "description": "Dialog to trigger a BB job", "targets":[], "properties":{ "uri":"https://localhost:8080//CustomBBDialogSDK.html" } }

I can open correctly rendered page using https://localhost:8080//CustomBBDialogSDK.html
I am running local dev server.

Custom pipeline task

This page that talks about creating custom pipeline tasks, points to this GitHub repo as the new way of working. But, I don't see anything that shows about creating custom pipeline tasks in this repo.

Naming conventions are too strict and undocumented

The existing webpack.config.js has very strict naming conventions. Every contribution must exist in one folder and the folder and file name of the .js file must match (i.e. /Menu/Menu.ts). To make things worse, all folders must be in the Samples folder.

This means that anyone who experiments with this project and then creates something outside of Samples or has a folder that doesn't match its file, will result in an error (i.e. /PullRequestMenu/Menu.ts). And if they are anything like me, they will waste hours wondering what the heck is going on.

A) Is there a way to loosen naming conventions?
B) Can any naming conventions be documented upfront?

Saving the value of custom group/control

Hi,

I'm probably missing something obvious here. I just copied the following lines and import statements from WorkItemOpen.tsx to WorkItemFormGroup.tsx.
private workItemIdValue = new ObservableValue("1");
<TextField className="sample-work-item-id-input" label="Existing work item id" value={this.workItemIdValue} onChange={(ev, newValue) => { this.workItemIdValue.value = newValue; }} />

How to achieve the following things:

1. Save button to be enabled when I enter any text in the textbox. Similar to how it behaves if you write in any other fields.

2. Actually save the custom control's/group's value. Do I have to save the value separately in onSaved event handler and then populate it on onLoaded when the work item is opened?

building project fails

I do a clean git clone,

npm install
npm run compile

npm -v 6.14.5
node -v 6.11.2

what am I missing?

ERROR in ./src/Common.scss (./node_modules/css-loader!./node_modules/azure-devops-ui/buildScripts/css-variables-loader.js!./node_modules/sass-loader/lib/loader.js!./src/Common.scss)
Module build failed (from ./node_modules/azure-devops-ui/buildScripts/css-variables-loader.js):
C:\Repos\azure-devops-extension-sample\node_modules\azure-devops-ui\buildScripts\CssVariablesLibrary.js:200
defaults = { ...defaults, ...JSON.parse(fs.readFileSync(file, "utf8")) };
^^^

SyntaxError: Unexpected token ...
at NativeCompileCache._moduleCompile (C:\Repos\azure-devops-extension-sample\node_modules\v8-compile-cache\v8-compile-cache.js:226:18)
at Module._compile (C:\Repos\azure-devops-extension-sample\node_modules\v8-compile-cache\v8-compile-cache.js:172:36)
at Object.Module._extensions..js (module.js:579:10)
at Module.load (module.js:487:32)
at tryModuleLoad (module.js:446:12)
at Function.Module._load (module.js:438:3)
at Module.require (module.js:497:17)
at require (C:\Repos\azure-devops-extension-sample\node_modules\v8-compile-cache\v8-compile-cache.js:159:20)
at Object. (C:\Repos\azure-devops-extension-sample\node_modules\azure-devops-ui\buildScripts\css-variables-loader.js:29:22)
at Module._compile (C:\Repos\azure-devops-extension-sample\node_modules\v8-compile-cache\v8-compile-cache.js:178:30)
at Object.Module._extensions..js (module.js:579:10)
at Module.load (module.js:487:32)
at tryModuleLoad (module.js:446:12)
at Function.Module._load (module.js:438:3)
at Module.require (module.js:497:17)
at require (C:\Repos\azure-devops-extension-sample\node_modules\v8-compile-cache\v8-compile-cache.js:159:20)
at loadLoader (C:\Repos\azure-devops-extension-sample\node_modules\loader-runner\lib\loadLoader.js:13:17)
at iteratePitchingLoaders (C:\Repos\azure-devops-extension-sample\node_modules\loader-runner\lib\LoaderRunner.js:169:2)
at iteratePitchingLoaders (C:\Repos\azure-devops-extension-sample\node_modules\loader-runner\lib\LoaderRunner.js:165:10)
at C:\Repos\azure-devops-extension-sample\node_modules\loader-runner\lib\LoaderRunner.js:173:18
at loadLoader (C:\Repos\azure-devops-extension-sample\node_modules\loader-runner\lib\loadLoader.js:36:3)
at iteratePitchingLoaders (C:\Repos\azure-devops-extension-sample\node_modules\loader-runner\lib\LoaderRunner.js:169:2)
at runLoaders (C:\Repos\azure-devops-extension-sample\node_modules\loader-runner\lib\LoaderRunner.js:362:2)
at NormalModule.doBuild (C:\Repos\azure-devops-extension-sample\node_modules\webpack\lib\NormalModule.js:265:3)
at NormalModule.build (C:\Repos\azure-devops-extension-sample\node_modules\webpack\lib\NormalModule.js:412:15)
at Compilation.buildModule (C:\Repos\azure-devops-extension-sample\node_modules\webpack\lib\Compilation.js:626:10)
at factory.create (C:\Repos\azure-devops-extension-sample\node_modules\webpack\lib\Compilation.js:875:14)
at factory (C:\Repos\azure-devops-extension-sample\node_modules\webpack\lib\NormalModuleFactory.js:405:6)
at hooks.afterResolve.callAsync (C:\Repos\azure-devops-extension-sample\node_modules\webpack\lib\NormalModuleFactory.js:155:13)
at AsyncSeriesWaterfallHook.eval [as callAsync] (eval at create (C:\Repos\azure-devops-extension-sample\node_modules\webpack\node_modules\tapable\lib\HookCodeFactory.js:32:10), :6:1)
at resolver (C:\Repos\azure-devops-extension-sample\node_modules\webpack\lib\NormalModuleFactory.js:138:29)
at process.nextTick (C:\Repos\azure-devops-extension-sample\node_modules\webpack\lib\NormalModuleFactory.js:342:9)
at _combinedTickCallback (internal/process/next_tick.js:73:7)
at process._tickCallback (internal/process/next_tick.js:104:9)
@ ./src/Common.scss 2:14-187
@ ./src/Common.tsx
@ ./src/Samples/Feature/Feature.tsx

Adding dropdown in breadcrumb

Hello Team,

How can we add dropdown in a breadcrumb for an extension (similar to what we have in the repos view)?

@nkirchem - any thoughts from your end?

Best regards,
Shaju

Example of a Hub with Sidebar

The Formula Design System documentation talks about the sidebar in the shell page; this appears to be referring to the sidebar, as seen in the wiki page type, and its size & collapsed state at different page sizes. Is this sidebar system available to extension developers? if so, in leu of thorough documentation, can an example be added to this repo?

How to use GraphClient to retrieve groups for the logged in user?

I am creating a custom extension and for one of my requirements, i need to check if the user is part of a specific group or not and then enable or disable some content for the user.

For this i was trying to use the GraphClient. In that i do see some functions that i can use like checkMembershipExistence, but it requires subject descriptor and container descriptor. When i checked on that i could see that getDescriptor can be used to retrieve the descriptor, but then it requires storageKey and to retrieve storageKey we can use getStorageKey, but that requires subjectDescriptor.

So, can you please provide an example of how the GraphClient can be used in a custom extension?

I am trying to achieve something like this (retrieve all the groups for the currently logged in user):
https://docs.microsoft.com/en-us/rest/api/azure/devops/graph/memberships/list?view=azure-devops-rest-5.0#all_groups_for_a_use

Open Work Item Error

When I tried to create a new extension from the sample by doing

tfx extension init

and selecting W for the Work Item Open Sample Project, the project was successfully created and I could create a VSIX file. I uploaded the extension and installed it for my projects collection, and even could open up the Hub with no problems. However, when I click on either button to open the work item, I'm getting an error in the console saying

{
  stack: "Error: No contribution provider or uri for ms.vss-work-web.work-item-form-navigation-service.
      at t.getBackgroundHost (https://{organization}.com/_static/_ext/ms.vss-web/ext-content/ms.vss-web.ext-content.luCfz4YwcHM3_pJR.min.js:1:19120)
      at t.getService (https://{organization}.com/_static/_ext/ms.vss-web/ext-content/ms.vss-web.ext-content.luCfz4YwcHM3_pJR.min.js:1:18834)
      at https://{organization}.com/_static/_ext/ms.vss-web/platform-content/ms.vss-web.platform-content.xjg1YXj9NZN2H2LQ.min.js:1:21067",
  message: "No contribution provider or uri for ms.vss-work-web.work-item-form-navigation-service."
}

Work Item form service not available

I have been trying to develop an extension that interacts with the work item form service to set field values, however the service is never returned and even the example code fails to retrieve it.

This is for Azure devops server 2019 on premises.

Build issue when running 'npm run build'

Hi

Does anyone know the cause of this:

> [email protected] package-extension C:\Users\zubin\source\repos\azure-devops-extension-sample
> tfx extension create --manifest-globs azure-devops-extension.json src/Samples/**/*.json "--rev-version"

(node:6440) Warning: Accessing non-existent property 'padLevels' of module exports inside circular dependency
(Use `node --trace-warnings ...` to show where the warning was created)
TFS Cross Platform Command Line Interface v0.6.3
Copyright Microsoft Corporation
error: TypeError [ERR_INVALID_ARG_TYPE]: The "data" argument must be of type string or an instance of Buffer, TypedArray, or DataView. Received an instance of Inplace
npm ERR! code ELIFECYCLE
npm ERR! errno 4294967295
npm ERR! [email protected] package-extension: `tfx extension create --manifest-globs azure-devops-extension.json src/Samples/**/*.json "--rev-version"`
npm ERR! Exit status 4294967295

Seems to be a problem with running tfx extension create

Is this a replacement of the vss-* libraries?

According to this documentation:

https://docs.microsoft.com/en-us/azure/devops/extend/get-started/node?view=vsts

We should install the "vss-web-extension-sdk", however you are using "azure-devops-extension-sdk" How are these two different?

How to get access to monaco editor in extension code.

I am working on an extension for PR review for a new language. For that we need to do syntax highlighting and also show diff in PR review.
I have a look at code editor contribution example but still not able to find how to access Monaco editor in extension code.
Also is it possible via sdk to create new PR view view for new language?

Where does the menu contribution show up?

Using tfx extension init I created an extension with just the Menu contribution, which is supposed to show up on Build definitions somewhere. Based on https://docs.microsoft.com/en-us/azure/devops/extend/reference/targets/overview?view=azure-devops, I can see where it is supposed to be in the old UI, but after publishing I'm unable to find it in the current UI. I also tried it for ms.vss-code-web.pull-request-action-menu, but I was unable to find anything there either (though that one could be due to user error).

Connecting to Azure Function REST API from a custom extension hub

I am trying to connect to an Azure Function REST API from a custom extension hub. I have created a service endpoint to store the URL and token. My question is how to retrieve the token, so that i can pass it along with the request?

@nkirchem any ideas from your end?

Can't hit git branches extensibility points

Hi,

I tried to add a sample to this project to hit some supposedly existing extensibility points, according to the documentation. It's a basic copy / paste from the Menu sample, and looks like this:

Actions/Actions.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <body>
        <script type="text/javascript" src="Actions.js" charset="utf-8"></script>
    </body>
</html>

Actions/Actions.ts

import "es6-promise/auto";
import * as SDK from "azure-devops-extension-sdk";
import { CommonServiceIds, IHostDialogService  } from "azure-devops-extension-api";

SDK.register('sample-action', () => {
    return {
        execute: async(context: any) => {
            const dialogSvc = await SDK.getService<IHostDialogService>(CommonServiceIds.HostDialogService);
            dialogSvc.openMessageDialog(`Context: ${JSON.stringify(context)}`, { showCancel:false });
        }
    }
});

SDK.init();

and finally Actions/Actions.json

{
    "contributions": [
        {
            "id": "sample-action",
            "type": "ms.vss-web.action",
            "targets": [
                "ms.vss-admin-web.collection-overview-toolbar-menu",
                "ms.vss-admin-web.projects-grid-menu",
                "ms.vss-admin-web.project-overview-toolbar-menu",
                "ms.vss-admin-web.teams-grid-menu",
                "ms.vss-build-web.completed-build-menu",
                "ms.vss-build-web.build-definition-menu",
                "ms.vss-releaseManagement-web.release-definition-explorer-context-menu",
                "ms.vss-releaseManagement-web.release-definition-explorer-toolbar-menu",
                "ms.vss-releaseManagement-web.release-editor-tool-bar-menu",
                "ms.vss-code-web.source-grid-item-menu",
                "ms.vss-code-web.source-tree-item-menu",
                "ms.vss-code-web.source-item-menu",
                "ms.vss-code-web.git-branches-tree-menu",
                "ms.vss-code-web.git-branches-summary-grid-menu",
                "ms.vss-code-web.git-branches-summary-grid-diff-menu",
                "ms.vss-code-web.pull-request-action-menu"
            ],
            "properties": {
                "text": "Sample action",
                "uri": "dist/Actions/Actions.html",
                "icon": "static/sample-icon.png",
                "registeredObjectId": "sample-action"
            }
        }
    ]
}

Some of these targets are still working (build, release, source), others don't. And I don't understand why the git related ones are not responding (ms.vss-code-web.git-branches-tree-menu, ms.vss-code-web.git-branches-summary-grid-menu and ms.vss-code-web.git-branches-summary-grid-diff-menu).

I checked all possible actions in the following pages without any luck. I even switched to the old UI to be sure:

• https://dev.azure.com/MY_ORG/_git/MY_PROJECT/branches
• https://dev.azure.com/MY_ORG/MY_PROJECT/_settings/repositories

Did I miss something? Are these extensibility points still valid?
Thanks

List

Any chance to provide a List sample taking advantage of azure-devops-ui?

I can only find a Pivot which implements office-ui-fabric-react.

how to set debug environment to run locally?

how to set debug environment to run locally without the need to load the extension to azure as iFrame?

Full screen dialog window

Hello,

Do you have a sample which shows how to create a full screen dialog window? The current sample has an example to open custom dialog window, but in the dialog options i am not able to specify a custom width for the dialog, i am able to specify the content width, but not the dialog window width. Please help.

Something like this: https://docs.microsoft.com/en-us/azure/devops/extend/develop/using-host-dialog?view=azure-devop

What i am trying to create is a dialog window which can be maximized or minimized based on user action. Something similar to what is available in the Baclog view (when user clicks on the title of a work item, the work item form is opened in a dialog window in full screen and user has a provision to resize it.

Thanks in advance.
Shaju

Pipelines is not supported anymore

When building out-of-the-box and publishing to the marketplace, you'll get an error telling you that category "pipeline" is not supported anymore. You should pick one from:

https://aka.ms/extensioncategories

Getting an error when i create react based Azure Devops Table with check box

Table columns used
export const checkboxColumns = [
new ColumnSelect(),
{
id: "name", name: "Name", readonly: true, renderCell: renderSimpleCell, width: new ObservableValue(-30),
},
{
id: "age", name: "Age", readonly: true, renderCell: renderSimpleCell, width: new ObservableValue(-30),
},
{
id: "gender", name: "Gender", readonly: true, renderCell: renderSimpleCell, width: new ObservableValue(-40),
},
];
Error Message Prompted while compiling the code
TS2322: Type '(ColumnSelect | { id: string; name: string; readonly: boolean; renderCell: (rowIndex: number, columnIndex: number, tableColumn: ITableColumn, tableItem: T, ariaRowIndex?: number | undefined) => Element; width: ObservableValue<...>; })[]' is not assignable to type 'ITableColumn[]'.
Type 'ColumnSelect | { id: string; name: string; readonly: boolean; renderCell: (rowIndex: number, columnIndex: number, tableColumn: ITableColumn, tableItem: T, ariaRowIndex?: number | undefined) => Element; width: ObservableValue<...>; }' is not assignable to type 'ITableColumn'.
Type 'ColumnSelect' is not assignable to type 'ITableColumn'.
Types of property 'behaviors' are incompatible.
Type 'IBehavior<ITableColumnBehaviorProps<{}>, {}>[]' is not assignable to type 'IBehavior<ITableColumnBehaviorProps, {}>[]'.
Type 'IBehavior<ITableColumnBehaviorProps<{}>, {}>' is not assignable to type 'IBehavior<ITableColumnBehaviorProps, {}>'.
Types of property 'initialize' are incompatible.
Type '((props: Readonly<ITableColumnBehaviorProps<{}>>, component: {}, eventDispatch: IEventDispatch) => void) | undefined' is not assignable to type '((props: Readonly, component: {}, eventDispatch: IEventDispatch) => void) | undefined'.
Type '(props: Readonly<ITableColumnBehaviorProps<{}>>, component: {}, eventDispatch: IEventDispatch) => void' is not assignable to type '(props: Readonly, component: {}, eventDispatch: IEventDispatch) => void'.
Types of parameters 'props' and 'props' are incompatible.
Type 'Readonly' is not assignable to type 'Readonly<ITableColumnBehaviorProps<{}>>'.
Types of property 'tableProps' are incompatible.
Type 'Partial' is not assignable to type 'Partial<ITableProps<{}>>'.

Code Used for Table Creation
import * as React from "react";
import { checkboxColumns, tableItems } from "./TableData";
import { ListSelection } from "azure-devops-ui/List";
import { Card } from "azure-devops-ui/Card";
import { Table } from "azure-devops-ui/Table";

export default class TableCheckboxExample extends React.Component {
private selection = new ListSelection({ selectOnFocus: true, multiSelect: true });

public render(): JSX.Element {
return (
<Card className="flex-grow bolt-table-card" contentProps={{ contentPadding: false }}>

);
}
}

Extend project settings with azure devops sdk

Hello everyone,
I have a question for you.

I have old vss extension of project settings and it worked well, but I try to rewrite it to react and azure devops extension sdk and when I put my hub into project setting or own hub group then i see page in menu but after click nothing is loaded, no progress indicator, nothing. If I put my hub into another place in devops (for example Borads) then I see my page, so I think, everythings is OK with it.
Is there any required settings, previlieges for show page with this sdk like project settings, hub in own hub group?

Have anyone same experience or can someone try it to place hub into project settings (ms.vss-web.project-admin-hub-group)? I want to know if it is only my fault, or not.

Thanks
JM

Cannot download "https://github.com/sass/node-sass/releases/download/v4.12.0/win32-x64-79_binding.node

Running tfx extension init results in the following error:
Cannot download "https://github.com/sass/node-sass/releases/download/v4.12.0/win32-x64-79_binding.node"

There seems to be a newer version:
https://github.com/sass/node-sass/releases/download/v4.13.1/win32-x64-79_binding.node

For version 12, the following url should be used:
https://github.com/sass/node-sass/releases/download/v4.13.1/win32-x64-72_binding.node

Running this sample gives errors only so far :(

I am new to developing a extension for Azure DevOps. Trying to get this up and running but when I am trying to do npm run build it tells me no rimraf exists.

After that I installed rimraf but then I get another issue with the Copy Plugin. Anyone familiar with this issue?

Is it possible to make a panel modal?

Dear Azure DevOps team,

for dialogs, it is possible to specify the lightDismiss option, if we don't want the dialog to close when clicking outside of it. However, as you mentioned in issue #16, we should use panels instead of dialogs. Since the openDialog does not allow us to specify a size, I have now used openPanel instead. However, now users accidentally click outside of the panel and lose all the work they've done in it. Is there a way to prevent this, or alternatively, specify a dialog size, so we can use dialog instead?

Thanks for any pointers!

Cheers,
Christoph

Modal Dialog in Azure DevOps Extension

I am trying to create a confirmation window and for that i am using this:

const dialogService = await SDK.getService<IHostPageLayoutService>(CommonServiceIds.HostPageLayoutService);
dialogService.openCustomDialog

Everything works fine, but the problem is that when user clicks anywhere outside the dialog the dialog is closed, but i want the dialog to close only when user clicks on the buttons provided in the custom dialog. How to achieve that?

Thanks,
Shaju

What are my options for storing data?

Obviously I can place data in source control, but I'm worried about concurrency and users constantly having to resolve conflicts. Is the a table or column database in devops for extensions to utilize?

Clear selected item in a dropdown

I am trying to implement a cascading drop down and for that i want to clear the selected item when the main drop down selection changes. Is it possible with Dropdown control or should i be using EditableDropdown? If yes, then how?

@nkirchem any inputs from your end will be helpful. Your suggestions/recommendations have always been helpful to me :)