plumbing for showing the feedback iframe

cli/server.ts

@@ -1,6 +1,7 @@
 import * as fs from 'fs';
 import * as path from 'path';
 import * as http from 'http';
+import * as https from 'https';
 import * as url from 'url';
 import * as querystring from 'querystring';
 import * as nodeutil from './nodeutil';
@@ -949,7 +950,7 @@ export function serveAsync(options: ServeOptions) {
     const wsServerPromise = initSocketServer(serveOptions.wsPort, serveOptions.hostname);
     if (serveOptions.serial)
         initSerialMonitor();
-
+    // https.createServer
     const server = http.createServer(async (req, res) => {
         const error = (code: number, msg: string = null) => {
             res.writeHead(code, { "Content-Type": "text/plain" })
@@ -1362,7 +1363,10 @@ export function serveAsync(options: ServeOptions) {
 
     const serverPromise = new Promise<void>((resolve, reject) => {
         server.on("error", reject);
-        server.listen(serveOptions.port, serveOptions.hostname, () => resolve());
+        server.listen(serveOptions.port, serveOptions.hostname, () => {
+            console.log(`Server listening on port ${serveOptions.port}`);
+            return resolve()
+        });
     });
 
     return Promise.all([wsServerPromise, serverPromise])

localtypings/pxteditor.d.ts

@@ -1047,6 +1047,7 @@ declare namespace pxt.editor {
         showLanguagePicker(): void;
         showShareDialog(title?: string, kind?: "multiplayer" | "vscode" | "share"): void;
         showAboutDialog(): void;
+        showFeedbackDialog(): void;
         showTurnBackTimeDialogAsync(): Promise<void>;
 
         showLoginDialog(continuationHash?: string): void;

react-common/components/controls/Feedback.tsx

@@ -0,0 +1,169 @@
+export const feedbackConfig: any = {
+    feedbackUiType: "Modal",
+    isDisplayed: true,
+    isEmailCollectionEnabled: false, // to enable email collection
+    isFileUploadEnabled: false, // to enable file upload function
+    isScreenshotEnabled: true, // to enable screenshot
+    isScreenRecordingEnabled: false, // to enable screen recording
+    invokeOnDismissOnEsc: true,
+}
+
+export const themeOptions = {
+    baseTheme: "PublisherLightTheme",
+}
+
+export const initfeedbackOptions: any = {
+    appId: 50315,
+    ageGroup: "Undefined",
+    authenticationType: "Unauthenticated",
+    clientName: "MakeCode",
+    feedbackConfig: feedbackConfig,
+    isProduction: false,
+    themeOptions: themeOptions,
+    // telemetry - will likely want this
+    // userId
+    // userData
+
+}
+export interface FeedbackRequestEventPayload<T> {
+  Event: string
+  EventArgs: string
+}
+type FeedbackRequestPayloadType = FeedbackRequestEventPayload<any>
+
+export interface FeedbackResponseEventPayload<T> {
+  event: string
+  data: T
+  error?: any
+}
+
+export const FEEDBACK_FRAME_ID = 'feedback-iframe'
+
+let feedbackData = initfeedbackOptions
+
+export const feedbackCallbackEventListener = (event: MessageEvent<FeedbackRequestPayloadType>) => {
+  if (event.data) {
+    const payload: FeedbackRequestPayloadType = event.data
+    switch (payload.Event) {
+      case 'InAppFeedbackInitOptions': //This is required to initialise feedback
+        sendFeedbackInitOptions()
+        break
+    //   case 'InAppFeedbackScreenshot': //This is only needed if you want to have screenshot dynamically provided by host
+    //     sendInAppFeedbackScreenshot()
+    //     break
+      case 'InAppFeedbackOnError': //Invoked when an error occurrs on feedback submission
+        console.log('Error Message: ', payload.EventArgs)
+        break
+      case 'InAppFeedbackAttachDiagnosticLogs': //Invoked when submit button is clicked and feedbackData.feedbackConfig.diagnosticsConfig is configured
+        console.log('Host App can send diagnostics to a third party app data using', payload.EventArgs)
+        break
+    //   case 'InAppFeedbackGetContextData': //This is needed if you want to pass in content samples to be displayed on the form
+    //     sendInAppFeedbackGetContextData()
+    //     break
+      case 'InAppFeedbackSetCurrentPage': //To follow the feedback Page number
+        console.log('pageName: ', payload.EventArgs)
+        break
+      case 'InAppFeedbackSetSubmitButtonState': //To follow the feedback Submit Button State
+        console.log('submitState: ', payload.EventArgs)
+        break
+      case 'InAppFeedbackInitializationComplete': //Invoked when feedback form is fully initialised and displays error/warning if any
+        console.log('InAppFeedbackInitializationComplete: ', payload.EventArgs)
+        break
+      case 'InAppFeedbackOnSuccess': //Invoked when feedback submission is successful
+        console.log('InAppFeedbackOnSuccess: ', payload.EventArgs)
+        break
+      case 'InAppFeedbackDismissWithResult': //Invoked when feedback is dismissed
+        console.log('InAppFeedbackDismissWithResult: ', payload.EventArgs)
+        break
+      case 'InAppFeedbackExtractFeedbackDataForHost': //Invoked when feedback is dismissed
+        console.log('InAppFeedbackExtractFeedbackDataForHost: ', payload.EventArgs)
+        break
+    }
+  }
+}
+
+let currentTheme = ''
+
+export const sendUpdateTheme = () => {
+  type FeedbackResponsePayloadType = FeedbackResponseEventPayload<any>
+  if (currentTheme == 'WindowsDark') {
+    currentTheme = 'WindowsLight'
+  } else {
+    currentTheme = 'WindowsDark'
+  }
+  const response: FeedbackResponsePayloadType = {
+    event: 'OnFeedbackHostAppThemeChanged',
+    data: {
+      baseTheme: currentTheme,
+    },
+  }
+  const iFrameEle = document.getElementById(FEEDBACK_FRAME_ID) as HTMLIFrameElement
+  iFrameEle!.contentWindow!.postMessage(response, 'https://admin-ignite.microsoft.com')
+}
+
+//private functions
+const sendFeedbackInitOptions = () => {
+  type FeedbackResponsePayloadType = FeedbackResponseEventPayload<any>
+  feedbackData.callbackFunctions = undefined
+//   feedbackData.feedbackConfig!.diagnosticsConfig!.attachDiagnostics = undefined
+  console.log("got the message to init");
+  let response: FeedbackResponsePayloadType = {
+    event: 'InAppFeedbackInitOptions',
+    data: feedbackData,
+  }
+  response = JSON.parse(JSON.stringify(response))
+  const iFrameEle = document.getElementById(FEEDBACK_FRAME_ID) as HTMLIFrameElement
+  iFrameEle!.contentWindow!.postMessage(response, 'https://admin-ignite.microsoft.com')
+}
+
+// const sendInAppFeedbackScreenshot = () => {
+//   type FeedbackResponsePayloadType = FeedbackResponseEventPayload<any>
+//   const response: FeedbackResponsePayloadType = {
+//     event: 'InAppFeedbackScreenshot',
+//     data: {
+//       providedScreenshotType: 'DynamicallyProvided',
+//       screenshotImageFormat: 'jpeg',
+//       screenshotBase64: SampleImage,
+//     },
+//   }
+//   const iFrameEle = document.getElementById(FEEDBACK_FRAME_ID) as HTMLIFrameElement
+//   iFrameEle!.contentWindow!.postMessage(response, 'https://admin-ignite.microsoft.com')
+// }
+
+// const sendInAppFeedbackGetContextData = () => {
+//   type FeedbackResponsePayloadType = FeedbackResponseEventPayload<any>
+//   const file1 = new File([SampleImage], 'sample file 1.txt', {
+//     type: 'text/plain',
+//   })
+//   const file2 = new File([SampleImage], 'sample file 2.txt', {
+//     type: 'text/plain',
+//   })
+
+//   const response: FeedbackResponsePayloadType = {
+//     event: 'InAppFeedbackGetContextData',
+//     data: [
+//       {
+//         fileName: 'sample file 1.png',
+//         fileType: 'png',
+//         fileDataBase64: SampleImage,
+//       },
+//     ],
+//   }
+//   const iFrameEle = document.getElementById(FEEDBACK_FRAME_ID) as HTMLIFrameElement
+//   iFrameEle!.contentWindow!.postMessage(response, 'https://admin-ignite.microsoft.com')
+// }
+
+
+export const Feedback = () => {
+    const appId = 50315;
+    return (
+        <iframe
+        title="feedback-demo"
+        height="600px" // You can change this according to your host app requirement
+        width="400px"  // You can change this according to your host app requirement
+        id={FEEDBACK_FRAME_ID}
+        src={`https://admin-ignite.microsoft.com/centrohost?appname=ocvfeedback&feature=host-ocv-inapp-feedback&platform=web&appId=${appId}#/hostedpage`}
+        allow="display-capture;" // This is needed if you want to use the native screenshot/screen recording feature
+        sandbox="allow-scripts allow-same-origin allow-forms allow-popups" />  
+    )
+}

webapp/src/app.tsx

@@ -4497,6 +4497,10 @@ export class ProjectView
         dialogs.showAboutDialogAsync(this);
     }
 
+    showFeedbackDialog(): void {
+        dialogs.showFeedbackDialogAsync();
+    }
+
     async showTurnBackTimeDialogAsync() {
         let simWasRunning = this.isSimulatorRunning();
         if (simWasRunning) {

webapp/src/dialogs.tsx

@@ -18,9 +18,18 @@ import { invalidate } from "./data";
 
 import IProjectView = pxt.editor.IProjectView;
 import ImportFileOptions = pxt.editor.ImportFileOptions;
+import { Modal } from "../../react-common/components/controls/Modal";
+import { Feedback } from "../../react-common/components/controls/Feedback";
 
 let dontShowDownloadFlag = false;
 
+export function showFeedbackDialogAsync() {
+    return core.confirmAsync({
+        header: lf("Give Feedback"),
+        jsx: <Feedback/>
+    })
+}
+
 export function showAboutDialogAsync(projectView: IProjectView) {
     const compileService = pxt.appTarget.compileService;
     const githubUrl = pxt.appTarget.appTheme.githubUrl;

webapp/src/projects.tsx

@@ -239,6 +239,7 @@ export class ProjectSettingsMenu extends data.Component<ProjectSettingsMenuProps
         this.showResetDialog = this.showResetDialog.bind(this);
         this.showReportAbuse = this.showReportAbuse.bind(this);
         this.showAboutDialog = this.showAboutDialog.bind(this);
+        this.showFeedbackDialog = this.showFeedbackDialog.bind(this)
         this.signOutGithub = this.signOutGithub.bind(this);
     }
 
@@ -278,6 +279,11 @@ export class ProjectSettingsMenu extends data.Component<ProjectSettingsMenuProps
         this.props.parent.showAboutDialog();
     }
 
+    showFeedbackDialog() {
+        pxt.tickEvent("home.feedback");
+        this.props.parent.showFeedbackDialog();
+    }
+
     signOutGithub() {
         pxt.tickEvent("home.github.signout");
         this.props.parent.signOutGithub();
@@ -310,6 +316,7 @@ export class ProjectSettingsMenu extends data.Component<ProjectSettingsMenuProps
             {reportAbuse ? <sui.Item role="menuitem" icon="warning circle" text={lf("Report Abuse...")} onClick={this.showReportAbuse} /> : undefined}
             <sui.Item role="menuitem" icon='sign out' text={lf("Reset")} onClick={this.showResetDialog} />
             <sui.Item role="menuitem" text={lf("About...")} onClick={this.showAboutDialog} />
+            <sui.Item role="menuitem" text={lf("Give Feedback")} onClick={this.showFeedbackDialog} />
             {targetTheme.feedbackUrl ? <a className="ui item" href={targetTheme.feedbackUrl} role="menuitem" title={lf("Give Feedback")} target="_blank" rel="noopener noreferrer" >{lf("Give Feedback")}</a> : undefined}
         </sui.DropdownMenu>;
     }