People Present On The Site Tree Webview (#788)

* tree webview for users present on power pages studio and vscode for web

* inline icon for mail and teams chat

* open teams chat and mail

* renamed provider

* renamed provider

* renamed provider

* formatting reverted

* formatting reverted

* microsoft teams chat icon updated

* Named command, method and provider more logically

package.json

@@ -154,6 +154,19 @@
       }
     ],
     "commands": [
+      {
+        "command": "powerpages.collaboration.openTeamsChat",
+        "title": "Open Teams Chat",
+        "icon": {
+          "light": "src/web/client/assets/microsoftTeamsIcon/light/microsoftTeams.svg",
+          "dark": "src/web/client/assets/microsoftTeamsIcon/dark/microsoftTeams.svg"
+        }
+      },
+      {
+        "command": "powerpages.collaboration.openMail",
+        "title": "Open Mail",
+        "icon": "$(mail)"
+      },
       {
         "command": "powerpages.powerPagesFileExplorer.powerPagesRuntimePreview",
         "title": "Preview site",
@@ -862,6 +875,16 @@
         {
           "command": "pacCLI.envAndSolutionsPanel.copyOrganizationId",
           "when": "!virtualWorkspace && view == pacCLI.envAndSolutionsPanel && viewItem == ENVIRONMENT"
+        },
+        {
+          "command": "powerpages.collaboration.openTeamsChat",
+          "group": "inline",
+          "when": "viewItem == userNode"
+        },
+        {
+          "command": "powerpages.collaboration.openMail",
+          "group": "inline",
+          "when": "viewItem == userNode"
         }
       ]
     },
@@ -913,6 +936,13 @@
           "icon": "./src/web/client/assets/powerPages.svg",
           "contextualTitle": "%microsoft-powerplatform-portals.navigation-loop.powerPagesFileExplorer.title%",
           "visibility": "visible"
+        },
+        {
+          "id": "powerpages.collaborationView",
+          "name": "People On The Site",
+          "when": "isWeb && virtualWorkspace",
+          "contextualTitle": "People On The Site",
+          "visibility": "visible"
         }
       ]
     },

src/web/client/WebExtensionContext.ts

@@ -32,6 +32,7 @@ import { isMultifileEnabled } from "./utilities/commonUtil";
 import { UserDataMap } from "./context/userDataMap";
 import { EntityForeignKeyDataMap } from "./context/entityForeignKeyDataMap";
 import { QuickPickProvider } from "./webViews/QuickPickProvider";
+import { UserCollaborationProvider } from "./webViews/userCollaborationProvider";
 
 export interface IWebExtensionContext {
     // From portalSchema properties
@@ -112,6 +113,7 @@ class WebExtensionContext implements IWebExtensionContext {
     private _containerId: string;
     private _connectedUsers: UserDataMap;
     private _quickPickProvider: QuickPickProvider;
+    private _userCollaborationProvider: UserCollaborationProvider;
 
     public get schemaDataSourcePropertiesMap() {
         return this._schemaDataSourcePropertiesMap;
@@ -215,7 +217,10 @@ class WebExtensionContext implements IWebExtensionContext {
     public get quickPickProvider() {
         return this._quickPickProvider;
     }
-
+    public get userCollaborationProvider() {
+        return this._userCollaborationProvider;
+    }
+
     constructor() {
         this._schemaDataSourcePropertiesMap = new Map<string, string>();
         this._schemaEntitiesMap = new Map<string, Map<string, string>>();
@@ -249,6 +254,7 @@ class WebExtensionContext implements IWebExtensionContext {
         this._containerId = "";
         this._connectedUsers = new UserDataMap();
         this._quickPickProvider = new QuickPickProvider();
+        this._userCollaborationProvider = new UserCollaborationProvider();
     }
 
     public setWebExtensionContext(

src/web/client/common/constants.ts

@@ -132,3 +132,7 @@ export enum GraphService {
 }
 
 export const MICROSOFT_GRAPH_PROFILE_PICTURE_SERVICE_CALL = "/photo/$value";
+
+// User collaboration constants
+export const USER_COLLABORATION_CONTEXT_VALUE = "userNode";
+export const THEME_ICON_ACCOUNT = "account";

src/web/client/extension.ts

@@ -195,6 +195,22 @@ export function activate(context: vscode.ExtensionContext): void {
     showWalkthrough(context, WebExtensionContext.telemetry);
 }
 
+export function registerCollaborationView() {
+    vscode.window.registerTreeDataProvider('powerpages.collaborationView', WebExtensionContext.userCollaborationProvider);
+    vscode.commands.registerCommand(
+        "powerpages.collaboration.openTeamsChat",
+        (event) => {
+            WebExtensionContext.userCollaborationProvider.openTeamsChat(event.id)
+        }
+    );
+    vscode.commands.registerCommand(
+        "powerpages.collaboration.openMail",
+        (event) => {
+            WebExtensionContext.userCollaborationProvider.openMail(event.id)
+        }
+    );
+}
+
 export function powerPagesNavigation() {
     const powerPagesNavigationProvider = new PowerPagesNavigationProvider();
     vscode.window.registerTreeDataProvider('powerpages.powerPagesFileExplorer', powerPagesNavigationProvider);
@@ -302,6 +318,7 @@ export function processWillSaveDocument(context: vscode.ExtensionContext) {
 export function processWillStartCollaboartion(context: vscode.ExtensionContext) {
     // feature in progress, hence disabling it
     if (isCoPresenceEnabled()) {
+        registerCollaborationView();
         vscode.commands.registerCommand('powerPlatform.previewCurrentActiveUsers', () => WebExtensionContext.quickPickProvider.showQuickPick());
         createWebWorkerInstance(context);
     }
@@ -340,6 +357,7 @@ export function createWebWorkerInstance(
                             WebExtensionContext.removeConnectedUserInContext(
                                 data.userId
                             );
+                            WebExtensionContext.userCollaborationProvider.refresh();
                         }
                         if (data.type === Constants.workerEventMessages.UPDATE_CONNECTED_USERS) {
                             WebExtensionContext.updateConnectedUsersInContext(
@@ -348,6 +366,7 @@ export function createWebWorkerInstance(
                                 data.userId,
                                 data.entityId
                             );
+                            WebExtensionContext.userCollaborationProvider.refresh();
                         }
                     };
                 }

src/web/client/utilities/commonUtil.ts

@@ -266,3 +266,11 @@ export function getImageFileContent(fileFsPath: string, fileContent: Uint8Array)
 
     return webFileV2 ? fileContent : convertContentToString(fileContent, true);
 }
+
+export function getTeamChatURL (mail: string) {
+    return new URL(mail, "https://teams.microsoft.com/l/chat/0/0?users=");
+}
+
+export function getMailToPath (mail: string) {
+    return `mailto:${mail}`;
+}

src/web/client/webViews/userCollaborationProvider.ts

@@ -0,0 +1,79 @@
+/*
+ * Copyright (c) Microsoft Corporation. All rights reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+import * as vscode from "vscode";
+import WebExtensionContext from "../WebExtensionContext";
+import { GraphClientService } from "../services/graphClientService";
+import { getMailToPath, getTeamChatURL } from "../utilities/commonUtil";
+import * as Constants from "../common/constants";
+
+export class UserCollaborationProvider
+    implements vscode.TreeDataProvider<UserNode>
+{
+    private graphClientService: GraphClientService;
+    private _onDidChangeTreeData: vscode.EventEmitter<
+        UserNode | undefined | void
+    > = new vscode.EventEmitter<UserNode | undefined | void>();
+    readonly onDidChangeTreeData: vscode.Event<UserNode | undefined | void> =
+        this._onDidChangeTreeData.event;
+
+    constructor() {
+        this.graphClientService = new GraphClientService();
+    }
+
+    refresh(): void {
+        this._onDidChangeTreeData.fire();
+    }
+
+    getTreeItem(element: UserNode): vscode.TreeItem {
+        return element;
+    }
+
+    getChildren(): Thenable<UserNode[]> {
+        return Promise.resolve(this.getConnectedUsers());
+    }
+
+    getConnectedUsers(): UserNode[] {
+        const connectedUsersMap = WebExtensionContext.connectedUsers.getUserMap;
+        const connectedUsers: UserNode[] = Array.from(
+            connectedUsersMap.entries()
+        ).map(([, value]) => {
+            return new UserNode(
+                value._userName,
+                value._userId,
+                vscode.TreeItemCollapsibleState.None
+            );
+        });
+
+        return connectedUsers;
+    }
+
+    async openTeamsChat(userId: string): Promise<void> {
+        const mail = await this.graphClientService.getUserEmail(userId);
+        const teamsChatLink = getTeamChatURL(mail);
+        vscode.env.openExternal(vscode.Uri.parse(teamsChatLink.href));
+    }
+
+    async openMail(userId: string): Promise<void> {
+        const mail = await this.graphClientService.getUserEmail(userId);
+        const mailToPath = getMailToPath(mail);
+        vscode.env.openExternal(vscode.Uri.parse(mailToPath));
+    }
+}
+
+export class UserNode extends vscode.TreeItem {
+    constructor(
+        public readonly label: string,
+        public readonly id: string,
+        public readonly collapsibleState: vscode.TreeItemCollapsibleState
+    ) {
+        super(label, collapsibleState);
+
+        this.tooltip = this.label;
+        this.iconPath = new vscode.ThemeIcon(Constants.THEME_ICON_ACCOUNT);
+    }
+
+    contextValue = Constants.USER_COLLABORATION_CONTEXT_VALUE;
+}