Complete Navigation loop - add go to runtime and back to studio (#697)

* Runtime preview and back to studio integration

* update for new org and test calls to runtime

* headers change

* Update to config API

* Add svg and make entire loop work

* Add telemetry events

* Make commands unavailable in command palette

* Add localized strings for the explorer visible text

* Localize provider command text

l10n/bundle.l10n.json

@@ -5,8 +5,9 @@
   "Edit the site": "Edit the site",
   "Be careful making changes. Anyone can see the changes you make immediately. Choose Edit the site to make edits, or close the editor tab to cancel without editing.": "Be careful making changes. Anyone can see the changes you make immediately. Choose Edit the site to make edits, or close the editor tab to cancel without editing.",
   "You are editing a live, public site ": "You are editing a live, public site ",
-  "Get help writing code in HTML, CSS, and JS languages for Power Pages sites with Copilot.": "Get help writing code in HTML, CSS, and JS languages for Power Pages sites with Copilot.",
-  "Try Copilot for Power Pages": "Try Copilot for Power Pages",
+  "Preview site": "Preview site",
+  "Open in Power Pages": "Open in Power Pages",
+  "Opening preview site...": "Opening preview site...",
   "Microsoft wants your feeback": "Microsoft wants your feeback",
   "Check the URL and verify the parameters are correct": "Check the URL and verify the parameters are correct",
   "Unable to complete the request": "Unable to complete the request",

loc/translations-export/vscode-powerplatform.xlf

@@ -121,9 +121,6 @@ The {3} represents Solution's Type (Managed or Unmanaged), but that test is loca
     <trans-unit id="++CODE++1b93e507157d91755f08e1abfe8a33d725b637a32ddadf149420b25907d440a0">
       <source xml:lang="en">File(s) already exist. No new files to add</source>
     </trans-unit>
-    <trans-unit id="++CODE++6658fe1c5f8e493175e012ea4a3f7e08df6207342fba111ccc67ba8d4d91977f">
-      <source xml:lang="en">Get help writing code in HTML, CSS, and JS languages for Power Pages sites with Copilot.</source>
-    </trans-unit>
     <trans-unit id="++CODE++25109e9c19daeeed3977b84ace83722ac8a4daafcfe4e3709082fcc5b228e7a8">
       <source xml:lang="en">Installing Power Pages generator(v{0})...</source>
       <note>{0} represents the version number</note>
@@ -182,6 +179,12 @@ The {3} represents Dataverse Environment's Organization ID (GUID)</note>
     <trans-unit id="++CODE++bda6bda1e902d120a7f4515ceac8546c3112e3cb9351df1d8b9713b8f86e0370">
       <source xml:lang="en">One or more attribute names have been changed or removed. Contact your admin.</source>
     </trans-unit>
+    <trans-unit id="++CODE++9c1a3ec7947746271d8596f2a428139e20ff14d48e87d4631a3fc17004c170f9">
+      <source xml:lang="en">Open in Power Pages</source>
+    </trans-unit>
+    <trans-unit id="++CODE++dac0ee62a5197a3722a9e7e9e851e80504cced8a13ce8b17842d78e8313578c2">
+      <source xml:lang="en">Opening preview site...</source>
+    </trans-unit>
     <trans-unit id="++CODE++d4dc9d620b68b70e7de4aeaa15e1d83dddb457c64a3cadb35cf1b55025ad194f">
       <source xml:lang="en">PAC Telemetry disabled</source>
     </trans-unit>
@@ -211,6 +214,9 @@ The {3} represents Dataverse Environment's Organization ID (GUID)</note>
       <source xml:lang="en">Preparing pac CLI (v{0})...</source>
       <note>{0} represents the version number</note>
     </trans-unit>
+    <trans-unit id="++CODE++f6412ced721a26ac3e3cb55d3ff713d8403c3dfc2efa0cff07b48478bdd57555">
+      <source xml:lang="en">Preview site</source>
+    </trans-unit>
     <trans-unit id="++CODE++7a6098eb5ff2c2401890216bb502ce6583ff7bddc99e62f8751551eab45ae1b4">
       <source xml:lang="en">Profile Kind: {0}</source>
       <note>The {0} represents the profile type (Admin vs Dataverse)</note>
@@ -247,9 +253,6 @@ The {3} represents Dataverse Environment's Organization ID (GUID)</note>
     <trans-unit id="++CODE++37ea190531b914739bf1ff100b3d44579b6d703de0b79b380094714aa3b3c259">
       <source xml:lang="en">There’s a problem on the back end</source>
     </trans-unit>
-    <trans-unit id="++CODE++8d6329ce370e7f2cf3a5b77a73e0100c08550628408f2763deafe57dce769719">
-      <source xml:lang="en">Try Copilot for Power Pages</source>
-    </trans-unit>
     <trans-unit id="++CODE++d8b8392e2c542950ca64867168e4ef87d4ad606882d5898f826b51c6d553988f">
       <source xml:lang="en">Try again</source>
     </trans-unit>
@@ -407,6 +410,9 @@ The second line should be '[TRANSLATION HERE](command:powerplatform-walkthrough.
     <trans-unit id="microsoft-powerapps-portals.walkthrough.overview.title">
       <source xml:lang="en">Overview</source>
     </trans-unit>
+    <trans-unit id="microsoft-powerplatform-portals.navigation-loop.powerPagesFileExplorer.title">
+      <source xml:lang="en">POWER PAGES ACTIONS</source>
+    </trans-unit>
     <trans-unit id="power-platform-activitybar.title">
       <source xml:lang="en">Power Platform</source>
     </trans-unit>

package.json

@@ -153,6 +153,16 @@
       }
     ],
     "commands": [
+      {
+        "command": "powerpages.powerPagesFileExplorer.powerPagesRuntimePreview",
+        "title": "Preview site",
+        "when": "never"
+      },
+      {
+        "command": "powerpages.powerPagesFileExplorer.backToStudio",
+        "title": "Open in Power Pages",
+        "when": "never"
+      },
       {
         "command": "extension.createChatView",
         "title": "Create Chat View"
@@ -886,9 +896,12 @@
       ],
       "explorer": [
         {
-          "id": "powerpages.treeWebView",
-          "name": "Power Pages Actions",
-          "when": "isWeb && config.powerPlatform.experimental.enableCoPresenceFeature"
+          "id": "powerpages.powerPagesFileExplorer",
+          "name": "%microsoft-powerplatform-portals.navigation-loop.powerPagesFileExplorer.title%",
+          "when": "isWeb && virtualWorkspace",
+          "icon": "./src/web/client/assets/powerPages.svg",
+          "contextualTitle": "%microsoft-powerplatform-portals.navigation-loop.powerPagesFileExplorer.title%",
+          "visibility": "visible"
         }
       ]
     },
@@ -994,9 +1007,9 @@
     "jwt-decode": "2.2.0",
     "mocha": "^9.2.2",
     "moment": "^2.29.4",
+    "nanoid": "^3.1.31",
     "node-fetch": "^2.6.7",
     "nyc": "^15.1.0",
-    "nanoid": "^3.1.31",
     "os-browserify": "^0.3.0",
     "path-browserify": "^1.0.1",
     "process": "^0.11.10",

package.nls.json

@@ -13,10 +13,10 @@
 
   "pacCLI.authPanel.title": "Auth Profiles",
   "pacCLI.authPanel.welcome.whenInteractiveSupported": {
-     "message": "No auth profiles found on this computer.\n[Add Auth Profile](command:pacCLI.authPanel.newAuthProfile)",
-     "comment": [
-       "This is a Markdown formatted string, and the formatting must persist across translations.",
-       "The second line should be '[TRANSLATION HERE](command:pacCLI.authPanel.newAuthProfile)', keeping brackets and the text in the parentheses unmodified"
+    "message": "No auth profiles found on this computer.\n[Add Auth Profile](command:pacCLI.authPanel.newAuthProfile)",
+    "comment": [
+      "This is a Markdown formatted string, and the formatting must persist across translations.",
+      "The second line should be '[TRANSLATION HERE](command:pacCLI.authPanel.newAuthProfile)', keeping brackets and the text in the parentheses unmodified"
     ]
   },
   "pacCLI.authPanel.welcome.whenInteractiveNotSupported": {
@@ -25,8 +25,7 @@
       "This is a Markdown formatted string, and the formatting must persist across translations.",
       "The second line should not translate the argument `--deviceCode`",
       "The third line should be '[TRANSLATION HERE](command:pacCLI.pacAuthHelp)', keeping brackets and the text in the parentheses unmodified"
-
-   ]
+    ]
   },
   "pacCLI.authPanel.clearAuthProfile.title": "Clear Auth Profiles",
   "pacCLI.authPanel.refresh.title": "Refresh",
@@ -67,7 +66,7 @@
     "comment": [
       "This is a Markdown formatted string, and the formatting must persist across translations.",
       "The second line should be '[TRANSLATION HERE](command:powerplatform-walkthrough.overview-learn-more)', keeping brackets and the text in the parentheses unmodified"
-   ]
+    ]
   },
   "microsoft-powerapps-portals.walkthrough.fileSystem.title": "File explorer",
   "microsoft-powerapps-portals.walkthrough.fileSystem.description": {
@@ -76,7 +75,7 @@
       "This is a Markdown formatted string, and the formatting must persist across translations.",
       "The seventh line should be '[TRANSLATION HERE](command:powerplatform-walkthrough.fileSystem-documentation).', keeping brackets and the text in the parentheses unmodified",
       "The eighth line should be '[TRANSLATION HERE](command:powerplatform-walkthrough.fileSystem-open-folder)', keeping brackets and the text in the parentheses unmodified"
-   ]
+    ]
   },
   "microsoft-powerapps-portals.walkthrough.advancedCapabilities.title": "Advanced capabilities",
   "microsoft-powerapps-portals.walkthrough.advancedCapabilities.description": {
@@ -85,14 +84,15 @@
       "This is a Markdown formatted string, and the formatting must persist across translations.",
       "The fifth line should be '[TRANSLATION HERE](command:powerplatform-walkthrough.advancedCapabilities-learn-more) TRANSLATION', keeping brackets and the text in the parentheses unmodified",
       "The seventh line should be '[TRANSLATION HERE](command:powerplatform-walkthrough.advancedCapabilities-start-coding)', keeping brackets and the text in the parentheses unmodified"
-   ]
+    ]
   },
   "microsoft-powerapps-portals.walkthrough.saveConflict.title": "Save conflict",
   "microsoft-powerapps-portals.walkthrough.saveConflict.description": {
     "message": "Avoid accidental overwrites when you try to save outdated code in VS Code for the Web. You can compare the changes side-by-side and decide to accept or revert the changes. \n \nTo learn more, visit [Prevent accidental overwrites](command:powerplatform-walkthrough.saveConflict-learn-more).",
     "comment": [
       "This is a Markdown formatted string, and the formatting must persist across translations.",
       "The fifth line should be '[TRANSLATION HERE](command:powerplatform-walkthrough.saveConflict-learn-more).', keeping brackets and the text in the parentheses unmodified"
-   ]
-  }
+    ]
+  },
+  "microsoft-powerplatform-portals.navigation-loop.powerPagesFileExplorer.title": "POWER PAGES ACTIONS"
 }

src/web/client/WebExtensionContext.ts

@@ -56,6 +56,7 @@ export interface IWebExtensionContext {
     defaultFileUri: vscode.Uri; // This will default to home page or current page in multifile scenario
     showMultifileInVSCode: boolean;
     extensionActivationTime: number;
+    extensionUri: vscode.Uri
 
     // Org specific details
     dataverseAccessToken: string;
@@ -90,6 +91,7 @@ class WebExtensionContext implements IWebExtensionContext {
     private _defaultFileUri: vscode.Uri;
     private _showMultifileInVSCode: boolean;
     private _extensionActivationTime: number;
+    private _extensionUri: vscode.Uri;
     private _dataverseAccessToken: string;
     private _entityDataMap: EntityDataMap;
     private _isContextSet: boolean;
@@ -149,6 +151,9 @@ class WebExtensionContext implements IWebExtensionContext {
     public get extensionActivationTime() {
         return this._extensionActivationTime
     }
+    public get extensionUri() {
+        return this._extensionUri
+    }
     public get dataverseAccessToken() {
         return this._dataverseAccessToken;
     }
@@ -199,6 +204,7 @@ class WebExtensionContext implements IWebExtensionContext {
         this._defaultFileUri = vscode.Uri.parse(``);
         this._showMultifileInVSCode = false;
         this._extensionActivationTime = new Date().getTime();
+        this._extensionUri = vscode.Uri.parse("");
         this._isContextSet = false;
         this._currentSchemaVersion = "";
         this._websiteLanguageCode = "";
@@ -212,7 +218,8 @@ class WebExtensionContext implements IWebExtensionContext {
     public setWebExtensionContext(
         entityName: string,
         entityId: string,
-        queryParamsMap: Map<string, string>
+        queryParamsMap: Map<string, string>,
+        extensionUri?: vscode.Uri
     ) {
         const schema = queryParamsMap.get(schemaKey.SCHEMA_VERSION) as string;
         // Initialize context from URL params
@@ -227,6 +234,7 @@ class WebExtensionContext implements IWebExtensionContext {
             }/`,
             true
         );
+        this._extensionUri = extensionUri as vscode.Uri;
 
         // Initialize multifile FF here
         const enableMultifile = queryParamsMap?.get(Constants.queryParameters.ENABLE_MULTIFILE);

src/web/client/common/constants.ts

@@ -26,6 +26,8 @@ export const MAX_ENTITY_FETCH_COUNT = 100;
 export const MAX_CONCURRENT_REQUEST_COUNT = 50;
 export const MAX_CONCURRENT_REQUEST_QUEUE_COUNT = 1000;
 export const INTELLIGENCE_SCOPE_DEFAULT = "https://text.pai.dynamics.com/.default";
+export const BACK_TO_STUDIO_URL_TEMPLATE = "https://make{.region}.powerpages.microsoft.com/e/{environmentId}/sites/{webSiteId}/pages";
+export const STUDIO_PROD_REGION = "prod";
 
 // Web extension constants
 export const BASE_64 = 'base64';
@@ -74,12 +76,14 @@ export enum queryParameters {
     ENV_ID = "envid",
     GEO = "geo",
     ENABLE_MULTIFILE = "enablemultifile",
+    WEBSITE_PREVIEW_URL = "websitepreviewurl"
 }
 
 export enum httpMethod {
     PATCH = "PATCH",
     GET = "GET",
     POST = "POST",
+    DELETE = "DELETE",
 }
 
 export enum SurveyConstants {

src/web/client/extension.ts

@@ -30,6 +30,7 @@ import {
 } from "./utilities/fileAndEntityUtil";
 import { IEntityInfo } from "./common/interfaces";
 import { telemetryEventNames } from "./telemetry/constants";
+import { PowerPagesNavigationProvider } from "./webViews/powerPagesNavigationProvider";
 import * as copilot from "../../common/copilot/PowerPagesCopilot";
 import { IOrgInfo } from "../../common/copilot/model";
 import { copilotNotificationPanel, disposeNotificationPanel } from "../../common/copilot/welcome-notification/CopilotNotificationPanel";
@@ -102,7 +103,8 @@ export function activate(context: vscode.ExtensionContext): void {
                 WebExtensionContext.setWebExtensionContext(
                     entity,
                     entityId,
-                    queryParamsMap
+                    queryParamsMap,
+                    context.extensionUri
                 );
                 WebExtensionContext.setVscodeWorkspaceState(context.workspaceState);
                 WebExtensionContext.telemetry.sendExtensionInitPathParametersTelemetry(
@@ -123,6 +125,8 @@ export function activate(context: vscode.ExtensionContext): void {
 
                                 processWalkthroughFirstRunExperience(context);
 
+                                powerPagesNavigation();
+
                                 await vscode.window.withProgress(
                                     {
                                         location: vscode.ProgressLocation.Notification,
@@ -187,6 +191,14 @@ export function activate(context: vscode.ExtensionContext): void {
     showWalkthrough(context, WebExtensionContext.telemetry);
 }
 
+export function powerPagesNavigation() {
+    const powerPagesNavigationProvider = new PowerPagesNavigationProvider();
+    vscode.window.registerTreeDataProvider('powerpages.powerPagesFileExplorer', powerPagesNavigationProvider);
+    vscode.commands.registerCommand('powerpages.powerPagesFileExplorer.powerPagesRuntimePreview', () => powerPagesNavigationProvider.previewPowerPageSite());
+    vscode.commands.registerCommand('powerpages.powerPagesFileExplorer.backToStudio', () => powerPagesNavigationProvider.backToStudio());
+    WebExtensionContext.telemetry.sendInfoTelemetry(telemetryEventNames.WEB_EXTENSION_POWER_PAGES_WEB_VIEW_REGISTERED);
+}
+
 export function processWalkthroughFirstRunExperience(context: vscode.ExtensionContext) {
     const isMultifileFirstRun = context.globalState.get(
         IS_MULTIFILE_FIRST_RUN_EXPERIENCE,

src/web/client/telemetry/constants.ts

@@ -93,4 +93,8 @@ export enum telemetryEventNames {
     WEB_EXTENSION_WEB_COPILOT_REGISTRATION_FAILED = 'webExtensionCopilotRegisterFailed',
     WEB_EXTENSION_WEB_COPILOT_NOTIFICATION_SHOWN = 'webExtensionCopilotNotificationShown',
     WEB_EXTENSION_WEB_COPILOT_NOTIFICATION_EVENT_CLICKED = 'webExtensionCopilotNotificationEventClicked',
+    WEB_EXTENSION_POWER_PAGES_WEB_VIEW_REGISTERED = 'webExtensionPowerPagesWebViewRegistered',
+    WEB_EXTENSION_POWER_PAGES_WEB_VIEW_REGISTER_FAILED = 'webExtensionPowerPagesWebViewRegisterFailed',
+    WEB_EXTENSION_BACK_TO_STUDIO_TRIGGERED = 'webExtensionBackToStudioTriggered',
+    WEB_EXTENSION_PREVIEW_SITE_TRIGGERED = 'webExtensionPreviewSiteTriggered',
 }

src/web/client/utilities/commonUtil.ts

@@ -5,13 +5,16 @@
 
 import * as vscode from "vscode";
 import {
+    BACK_TO_STUDIO_URL_TEMPLATE,
     BASE_64,
     CO_PRESENCE_FEATURE_SETTING_NAME,
     DATA,
     MULTI_FILE_FEATURE_SETTING_NAME,
     NO_CONTENT,
+    STUDIO_PROD_REGION,
     VERSION_CONTROL_FOR_WEB_EXTENSION_SETTING_NAME,
-    portalSchemaVersion
+    portalSchemaVersion,
+    queryParameters
 } from "../common/constants";
 import { IAttributePath } from "../common/interfaces";
 import { schemaEntityName } from "../schema/constants";
@@ -199,10 +202,24 @@ export function isPortalVersionV2(): boolean {
     return WebExtensionContext.currentSchemaVersion.toLowerCase() === portalSchemaVersion.V2;
 }
 
-export function getWorkSpaceName(websiteId : string) : string {
+export function getWorkSpaceName(websiteId: string): string {
     if (isPortalVersionV1()) {
         return `Site-v1-${websiteId}`;
     } else {
         return `Site-v2-${websiteId}`;
     }
 }
+
+// ENV_ID is the last part of the parameter value sent in the vscode URL from studio
+export function getEnvironmentIdFromUrl() {
+    return (WebExtensionContext.urlParametersMap.get(queryParameters.ENV_ID) as string).split("/")?.pop() as string;
+}
+
+export function getBackToStudioURL() {
+    const region = WebExtensionContext.urlParametersMap.get(queryParameters.REGION) as string;
+
+    return BACK_TO_STUDIO_URL_TEMPLATE
+        .replace("{environmentId}", getEnvironmentIdFromUrl())
+        .replace("{.region}", region.toLowerCase() === STUDIO_PROD_REGION ? "" : `.${WebExtensionContext.urlParametersMap.get(queryParameters.REGION) as string}`)
+        .replace("{webSiteId}", WebExtensionContext.urlParametersMap.get(queryParameters.WEBSITE_ID) as string);
+}