Added board and sprint panels for samples

microsoft · danhellem · Apr 3, 2025 · Feb 28, 2025 · Mar 18, 2025 · Apr 1, 2025
commit 2eca19ef1b45fc9646c8fce9c82f7d80fd06c19c
diff --git a/src/Samples/backlog-board-pivot-filter-menu-panel/backlog-board-pivot-filter-menu-panel.html b/src/Samples/backlog-board-pivot-filter-menu-panel/backlog-board-pivot-filter-menu-panel.html
@@ -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>
diff --git a/src/Samples/backlog-board-pivot-filter-menu-panel/backlog-board-pivot-filter-menu-panel.json b/src/Samples/backlog-board-pivot-filter-menu-panel/backlog-board-pivot-filter-menu-panel.json
@@ -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"
+            }
+        }
+    ]
+}
diff --git a/src/Samples/backlog-board-pivot-filter-menu-panel/backlog-board-pivot-filter-menu-panel.ts b/src/Samples/backlog-board-pivot-filter-menu-panel/backlog-board-pivot-filter-menu-panel.ts
@@ -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();
diff --git a/src/Samples/panel-content/panel-content.html b/src/Samples/panel-content/panel-content.html
@@ -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>
diff --git a/src/Samples/panel-content/panel-content.tsx b/src/Samples/panel-content/panel-content.tsx
@@ -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 />);
diff --git a/src/Samples/panel-content/panel.content.json b/src/Samples/panel-content/panel.content.json
@@ -0,0 +1,12 @@
+{
+    "contributions": [
+        {
+            "id": "panel-content",
+            "type": "ms.vss-web.external-content",
+            "properties": {
+                "uri": "dist/panel-content/panel-content.html",
+                "registeredObjectId": "panel-content"
+            }
+        }
+    ]
+}
diff --git a/src/Samples/sprint-board-pivot-filter-menu-panel/sprint-board-pivot-filter-menu-panel.html b/src/Samples/sprint-board-pivot-filter-menu-panel/sprint-board-pivot-filter-menu-panel.html
@@ -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>
diff --git a/src/Samples/sprint-board-pivot-filter-menu-panel/sprint-board-pivot-filter-menu-panel.json b/src/Samples/sprint-board-pivot-filter-menu-panel/sprint-board-pivot-filter-menu-panel.json
@@ -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"
+            }
+        }
+    ]
+}
diff --git a/src/Samples/sprint-board-pivot-filter-menu-panel/sprint-board-pivot-filter-menu-panel.ts b/src/Samples/sprint-board-pivot-filter-menu-panel/sprint-board-pivot-filter-menu-panel.ts
@@ -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();