Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Modal panel samples #186

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Modal panel samples #186

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
2eca19e
Added board and sprint panels for samples
mattiasen1 Feb 28, 2025
11534f3
Added name property on panel content
mattiasen1 Mar 18, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions src/Samples/backlog-board-pivot-filter-menu-panel/backlog-board-pivot-filter-menu-panel.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
<script type="text/javascript" src="backlog-board-pivot-filter-menu-panel.js" charset="utf-8"></script>
</body>
</html>
17 changes: 17 additions & 0 deletions src/Samples/backlog-board-pivot-filter-menu-panel/backlog-board-pivot-filter-menu-panel.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
{
"contributions": [
{
"id": "backlog-board-pivot-filter-menu-panel",
"type": "ms.vss-web.action",
"targets": [
"ms.vss-work-web.backlog-board-pivot-filter-menu"
],
"properties": {
"text": "Custom board menu item panel",
"uri": "dist/backlog-board-pivot-filter-menu-panel/backlog-board-pivot-filter-menu-panel.html",
"icon": "static/asterisk-small.png",
"registeredObjectId": "backlog-board-pivot-filter-menu-panel"
}
}
]
}
20 changes: 20 additions & 0 deletions src/Samples/backlog-board-pivot-filter-menu-panel/backlog-board-pivot-filter-menu-panel.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
import "es6-promise/auto";
import * as SDK from "azure-devops-extension-sdk";
import { CommonServiceIds, IHostPageLayoutService } from "azure-devops-extension-api";

SDK.register("backlog-board-pivot-filter-menu-panel", () => {
return {
execute: async (context: any) => {
const dialogService = await SDK.getService<IHostPageLayoutService>(CommonServiceIds.HostPageLayoutService);
dialogService.openPanel(SDK.getExtensionContext().id + ".panel-content", {
title: "Backlog Panel",
description: "Team- and project context",
configuration: {
context: context // pass the context to the panel
},
});
}
}
});

SDK.init();
7 changes: 7 additions & 0 deletions src/Samples/panel-content/panel-content.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
<div id="root"></div>
<script type="text/javascript" src="panel-content.js" charset="utf-8"></script>
</body>
</html>
69 changes: 69 additions & 0 deletions src/Samples/panel-content/panel-content.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,69 @@
import * as React from "react";
import * as SDK from "azure-devops-extension-sdk";

import { showRootComponent } from "../../Common";
import { Page } from "azure-devops-ui/Page";
import { CommonServiceIds, IProjectPageService } from "azure-devops-extension-api";

interface IPanelContent {
configuration: any;
projectContext: any;
}

class PanelContent extends React.Component<{}, IPanelContent> {

constructor(props: {}) {
super(props);
this.state = { configuration: undefined, projectContext: undefined };
}

public componentDidMount() {
try {
console.log("Component did mount, initializing SDK...");
SDK.init();

SDK.ready().then(() => {
console.log("SDK is ready, loading project config...");
this.setState({ configuration: SDK.getConfiguration() });
this.loadProjectContext();
}).catch((error) => {
console.error("SDK ready failed: ", error);
});
} catch (error) {
console.error("Error during SDK initialization", error);
}
}

public render(): JSX.Element {
return (
<Page>
<div>
<div>
<h2>Context:</h2>
<pre>{JSON.stringify(this.state.configuration, null, 2)}</pre>
</div>
<div>
<h2>Project Context:</h2>
<pre>{JSON.stringify(this.state.projectContext, null, 2)}</pre>
</div>
</div>
</Page>
);
}

private async loadProjectContext(): Promise<void> {
try {
const client = await SDK.getService<IProjectPageService>(CommonServiceIds.ProjectPageService);
const context = await client.getProject();

this.setState({ projectContext: context });

SDK.notifyLoadSucceeded();
} catch (error) {
console.error("Failed to load project context: ", error);
}
}

}

showRootComponent(<PanelContent />);
13 changes: 13 additions & 0 deletions src/Samples/panel-content/panel.content.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
{
"contributions": [
{
"id": "panel-content",
"type": "ms.vss-web.external-content",
"properties": {
"name:": "Custom Panel Content",
"uri": "dist/panel-content/panel-content.html",
"registeredObjectId": "panel-content"
}
}
]
}
6 changes: 6 additions & 0 deletions src/Samples/sprint-board-pivot-filter-menu-panel/sprint-board-pivot-filter-menu-panel.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
<script type="text/javascript" src="sprint-board-pivot-filter-menu-panel.js" charset="utf-8"></script>
</body>
</html>
18 changes: 18 additions & 0 deletions src/Samples/sprint-board-pivot-filter-menu-panel/sprint-board-pivot-filter-menu-panel.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
{
"contributions": [
{
"id": "sprint-board-pivot-filter-menu-panel",
"type": "ms.vss-web.action",
"targets": [
"ms.vss-work-web.sprint-board-pivot-filter-menu"
],
"properties": {
"text": "Sprint board menu panel",
"uri": "dist/sprint-board-pivot-filter-menu-panel/sprint-board-pivot-filter-menu-panel.html",
"group": "actions",
"icon": "static/asterisk-small.png",
"registeredObjectId": "sprint-board-pivot-filter-menu-panel"
}
}
]
}
20 changes: 20 additions & 0 deletions src/Samples/sprint-board-pivot-filter-menu-panel/sprint-board-pivot-filter-menu-panel.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
import "es6-promise/auto";
import * as SDK from "azure-devops-extension-sdk";
import { CommonServiceIds, IHostPageLayoutService } from "azure-devops-extension-api";

SDK.register("sprint-board-pivot-filter-menu-panel", () => {
return {
execute: async (context: any) => {
const dialogService = await SDK.getService<IHostPageLayoutService>(CommonServiceIds.HostPageLayoutService);
dialogService.openPanel(SDK.getExtensionContext().id + ".panel-content", {
title: "Sprint Panel",
description: "Sprint- and project context",
configuration: {
context: context // pass the context to the panel
},
});
}
}
});

SDK.init();