Merge pull request #188 from solidify/more-modal-samples

More modal samples

Author: danhellem

src/Samples/backlog-toolpane/backlog-toolpane.tsx

@@ -13,68 +13,89 @@ import { CommonServiceIds, IProjectPageService } from "azure-devops-extension-ap
 interface IBacklogToolPane {
     projectContext: any;
     selectedWorkItems: any[];
+    teamContext: any;
 }
 
 class BacklogToolPane extends React.Component<{}, IBacklogToolPane> {
     constructor(props: {}) {
-        super(props);  
-        this.state = { projectContext: undefined, selectedWorkItems: [] };         
+        super(props);
+        this.state = { projectContext: undefined, selectedWorkItems: [], teamContext: undefined };
     }
 
     public componentDidMount() {
-        try {   
-            
-            console.log("Component did mount, register objects...");
-            SDK.register("backlogPanelObject", {
-                workItemSelectionChanged: (workItemInfos: any) => {
-                  console.log("workItemSelectionChanged", workItemInfos);
-                  this.setState({ selectedWorkItems: workItemInfos });
-                }
-            });
+        try {
 
+            console.log("Component did mount, register objects...");
             console.log("Initializing SDK...");
             SDK.init();
-            
+
             SDK.ready().then(() => {
+                console.log(SDK.getContributionId());
                 console.log("SDK is ready, loading project context...");
-                this.loadProjectContext();                  
+                this.loadProjectContext();
+                this.loadTeamContext();
             }).catch((error) => {
                 console.error("SDK ready failed: ", error);
             });
+
+            SDK.register("backlogPanelObject", () =>  {
+                return {
+                    workItemSelectionChanged: (workItems:any) => {
+                        this.setState({ selectedWorkItems: workItems });
+                    }
+                }
+            });
+
         } catch (error) {
             console.error("Error during SDK initialization or project context loading: ", error);
         }
     }
 
     public render(): JSX.Element {
         return (
-            <Page className="sample-hub flex-grow">                
-            <div className="page-content sample-margin">                    
-                <div className="webcontext-section">
-                    <h2>Project Context:</h2>
-                    <pre>{JSON.stringify(this.state.projectContext, null, 2)}</pre>
+            <Page className="sample-hub flex-grow">
+                <Header title="Backlog Toolpane" />
+                <div className="page-content sample-margin">
+                    <div className="webcontext-section">
+                        <h2>Project Context:</h2>
+                        <pre>{JSON.stringify(this.state.projectContext, null, 2)}</pre>
+                    </div>
+                    <div>
+                        <h2>Team Context:</h2>
+                        <pre>{JSON.stringify(this.state.teamContext, null, 2)}</pre>
+                    </div>
+                    <div>
+                        <h2>Selected Work Items:</h2>
+                        <pre>{JSON.stringify(this.state.selectedWorkItems, null, 2)}</pre>
+                    </div>
                 </div>
-                <div>
-                    <h2>Selected Work Items:</h2>
-                    <pre>{JSON.stringify(this.state.selectedWorkItems, null, 2)}</pre>
-                </div>
-            </div>
             </Page>
         );
-    }   
+    }
+
 
     private async loadProjectContext(): Promise<void> {
-        try {            
+        try {
             const client = await SDK.getService<IProjectPageService>(CommonServiceIds.ProjectPageService);
             const context = await client.getProject();
-            
-            this.setState({ projectContext: context });            
+
+            this.setState({ projectContext: context });
 
             SDK.notifyLoadSucceeded();
         } catch (error) {
             console.error("Failed to load project context: ", error);
         }
-    }   
+    }
+
+    private async loadTeamContext(): Promise<void> {
+        try {
+            const teamContext = SDK.getConfiguration().team;
+            this.setState({ teamContext: teamContext });
+        }
+        catch (error) {
+            console.error("Failed to get team context: ", error);
+        }
+    }
 }
 
 showRootComponent(<BacklogToolPane />);

src/Samples/work-hub-group/work-hub-group.json

@@ -15,5 +15,8 @@
                 }
             }
         }
-    ] 
+    ], 
+    "scopes": [
+        "vso.work"
+    ]
 }

src/Samples/work-hub-group/work-hub-group.tsx

@@ -7,27 +7,30 @@ import { Header } from "azure-devops-ui/Header";
 import { Page } from "azure-devops-ui/Page";
 
 import { showRootComponent } from "../../Common";
-import { CommonServiceIds, IProjectPageService } from "azure-devops-extension-api";
+import { CommonServiceIds, IProjectPageService, getClient } from "azure-devops-extension-api";
+import { WorkItemTrackingRestClient } from "azure-devops-extension-api/WorkItemTracking";
 
 interface IWorkHubGroup {
     projectContext: any;
+    assignedWorkItems: any[];
 }
 
-class WorkHubGroup extends React.Component<{}, IWorkHubGroup> {   
+class WorkHubGroup extends React.Component<{}, IWorkHubGroup> {
 
     constructor(props: {}) {
         super(props);
-        this.state = { projectContext: undefined };  
+        this.state = { projectContext: undefined, assignedWorkItems: [] };
     }
 
     public componentDidMount() {
-        try {        
+        try {
             console.log("Component did mount, initializing SDK...");
             SDK.init();
-            
+
             SDK.ready().then(() => {
                 console.log("SDK is ready, loading project context...");
                 this.loadProjectContext();
+                this.loadAssignedWorkItems();
             }).catch((error) => {
                 console.error("SDK ready failed: ", error);
             });
@@ -40,28 +43,60 @@ class WorkHubGroup extends React.Component<{}, IWorkHubGroup> {
         return (
             <Page className="sample-hub flex-grow">
                 <Header title="Custom Work Hub" />
-                <div className="page-content">                    
+                <div className="page-content">
                     <div className="webcontext-section">
                         <h2>Project Context:</h2>
                         <pre>{JSON.stringify(this.state.projectContext, null, 2)}</pre>
                     </div>
+                    <div className="webcontext-section">
+                        <h2>Work Items Assigned To Me:</h2>
+                        <pre>{JSON.stringify(this.state.assignedWorkItems, null, 2)}</pre>
+                    </div>
                 </div>
             </Page>
         );
-    }   
+    }
 
     private async loadProjectContext(): Promise<void> {
-        try {            
+        try {
             const client = await SDK.getService<IProjectPageService>(CommonServiceIds.ProjectPageService);
             const context = await client.getProject();
-            
-            this.setState({ projectContext: context });            
+
+            this.setState({ projectContext: context });
 
             SDK.notifyLoadSucceeded();
         } catch (error) {
             console.error("Failed to load project context: ", error);
         }
     }
+
+    private async loadAssignedWorkItems(): Promise<void> {
+        try {
+            const client = getClient(WorkItemTrackingRestClient);
+
+            const wiqlQuery = {
+                query:`
+                    SELECT [System.Id], [System.Title]
+                    FROM WorkItems
+                    WHERE [System.AssignedTo] = @Me
+                    ORDER BY [System.ChangedDate] DESC
+                    `
+            };
+
+            const queryResult = await client.queryByWiql(wiqlQuery);
+            const workItemIds = queryResult.workItems.map((wi) => wi.id);
+
+            if (workItemIds.length > 0) {
+                const workItems = await client.getWorkItems(workItemIds);
+                this.setState({ assignedWorkItems: workItems });
+            }
+            else {
+                this.setState({ assignedWorkItems: [] });
+            }
+        } catch (error) {
+            console.error("Failed to load assigned work items: ", error);
+        }
+    }
 }
 
 showRootComponent(<WorkHubGroup />);

src/Samples/work-item-query-results-toolbar-menu/work-item-query-results-toolbar-menu.ts

@@ -1,13 +1,21 @@
 import "es6-promise/auto";
 import * as SDK from "azure-devops-extension-sdk";
+import { CommonServiceIds, IHostPageLayoutService } from "azure-devops-extension-api";
 
 SDK.register("work-item-query-results-toolbar-menu", () => {
     return {
-        execute: async (context: any) => {
-            alert("Custom query results toolbar action!");
-            console.log(context);
+            execute: async (context: any) => {
+                const dialogService = await SDK.getService<IHostPageLayoutService>(CommonServiceIds.HostPageLayoutService);
+                dialogService.openPanel(SDK.getExtensionContext().id + ".panel-content", {
+                    title: "query-results-toolbar-menu",
+                    description: "Project-and Queries context",
+                    configuration: {
+                        context: context,
+                    }
+                })
+                console.log(context);
+            }
         }
-    }
 });
 
 SDK.init();