OCV first pass

cli/cli.ts

@@ -2805,7 +2805,6 @@ function renderDocs(builtPackaged: string, localDir: string) {
     }
     pxt.log(`All docs written.`);
 }
-
 export function serveAsync(parsed: commandParser.ParsedCommand) {
     // always use a cloud build
     // in most cases, the user machine is not properly setup to
@@ -2864,6 +2863,7 @@ export function serveAsync(parsed: commandParser.ParsedCommand) {
             serial: !parsed.flags["noSerial"] && !globalConfig.noSerial,
             noauth: parsed.flags["noauth"] as boolean || false,
             backport: parsed.flags["backport"] as number || 0,
+            https: parsed.flags["https"] as boolean || false,
         }))
 }
 
@@ -7129,7 +7129,8 @@ ${pxt.crowdin.KEY_VARIABLE} - crowdin key
                 description: "port where the locally running backend is listening.",
                 argument: "backport",
                 type: "number",
-            }
+            },
+            https: { description: "use https protocol instead of http"}
         }
     }, serveAsync);
 

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';
@@ -13,6 +14,7 @@ import { promisify } from "util";
 
 import U = pxt.Util;
 import Cloud = pxt.Cloud;
+import { SecureContextOptions } from 'tls';
 
 const userProjectsDirName = "projects";
 
@@ -804,6 +806,7 @@ export interface ServeOptions {
     serial?: boolean;
     noauth?: boolean;
     backport?: number;
+    https?: boolean;
 }
 
 // can use http://localhost:3232/streams/nnngzlzxslfu for testing
@@ -949,8 +952,7 @@ export function serveAsync(options: ServeOptions) {
     const wsServerPromise = initSocketServer(serveOptions.wsPort, serveOptions.hostname);
     if (serveOptions.serial)
         initSerialMonitor();
-
-    const server = http.createServer(async (req, res) => {
+    const reqListener: http.RequestListener = async (req, res) => {
         const error = (code: number, msg: string = null) => {
             res.writeHead(code, { "Content-Type": "text/plain" })
             res.end(msg || "Error " + code)
@@ -1351,7 +1353,10 @@ export function serveAsync(options: ServeOptions) {
                 });
         }
         return
-    });
+    };
+    const canUseHttps = serveOptions.https && process.env["HTTPS_KEY"] && process.env["HTTPS_CERT"];
+    const httpsServerOptions: SecureContextOptions = {cert: process.env["HTTPS_CERT"], key: process.env["HTTPS_KEY"]};
+    const server = canUseHttps ? https.createServer(httpsServerOptions, reqListener) : http.createServer(reqListener);
 
     // if user has a server.js file, require it
     const serverjs = path.resolve(path.join(root, 'built', 'server.js'))
@@ -1362,12 +1367,16 @@ 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])
         .then(() => {
-            const start = `http://${serveOptions.hostname}:${serveOptions.port}/#local_token=${options.localToken}&wsport=${serveOptions.wsPort}`;
+            const protocol = canUseHttps ? "https" : "http";
+            const start = `${protocol}://${serveOptions.hostname}:${serveOptions.port}/#local_token=${options.localToken}&wsport=${serveOptions.wsPort}`;
             console.log(`---------------------------------------------`);
             console.log(``);
             console.log(`To launch the editor, open this URL:`);

localtypings/pxtarget.d.ts

@@ -524,6 +524,7 @@ declare namespace pxt {
         timeMachineDiffInterval?: number; // An interval in milliseconds at which to take diffs to store in project history. Defaults to 5 minutes
         timeMachineSnapshotInterval?: number; // An interval in milliseconds at which to take full project snapshots in project history. Defaults to 15 minutes
         adjustBlockContrast?: boolean; // If set to true, all block colors will automatically be adjusted to have a contrast ratio of 4.5 with text
+        giveFeedback?: boolean; // Show the give feedback button in the settings menu
     }
 
     interface DownloadDialogTheme {

localtypings/pxteditor.d.ts

@@ -805,6 +805,7 @@ declare namespace pxt.editor {
         extensionsVisible?: boolean;
         isMultiplayerGame?: boolean; // Arcade: Does the current project contain multiplayer blocks?
         onboarding?: pxt.tour.BubbleStep[];
+        feedback?: boolean;
     }
 
     export interface EditorState {
@@ -1047,6 +1048,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/Feedback.tsx

@@ -0,0 +1,71 @@
+import { useEffect } from "react"
+import { initFeedbackEventListener, removeFeedbackEventListener } from "./FeedbackEventListener";
+import { baseConfig, ratingFeedbackConfig, appId, feedbackFrameUrl } from "./configs";
+import { Modal } from "../Modal";
+
+// both components require onClose because the feedback modal should close when the user clicks the "finish" button
+// this would not happen if the EventListener did not have a callback to close the modal
+interface IFeedbackModalProps {
+  feedbackConfig: any;
+  frameId: string;
+  title: string;
+  onClose: () => void;
+}
+
+// right now, there are two kinds of feedback that I think could be valuable for our targets
+// generic and rating feedback, but we will likely want to expand this
+interface IFeedbackProps {
+  kind: "generic" | "rating";
+  onClose: () => void;
+}
+
+// Wrapper component of the feedback modal so kind can determine what feedback actually shows in the modal
+export const Feedback = (props: IFeedbackProps) => {
+  const { kind, onClose } = props;
+  return (
+    <>
+      {kind === "generic" &&
+        <FeedbackModal
+        feedbackConfig={baseConfig}
+        frameId="menu-feedback-frame"
+        title={lf("Leave Feedback")}
+        onClose={onClose}
+      />}
+      {kind === "rating" &&
+        <FeedbackModal
+        feedbackConfig={ratingFeedbackConfig}
+        frameId="activity-feedback-frame"
+        title={lf("Rate this activity")}
+        onClose={onClose} />
+      }
+    </>
+  )
+}
+
+export const FeedbackModal = (props: IFeedbackModalProps) => {
+  const { feedbackConfig, frameId, title, onClose } = props;
+
+  const onDismiss = () => {
+    onClose();
+  }
+
+  let callbacks = { onDismiss };
+
+  useEffect(() => {
+    initFeedbackEventListener(feedbackConfig, frameId, callbacks);
+    return () => {
+        removeFeedbackEventListener();
+    }
+  }, [])
+  return (
+    <Modal className="feedback-modal" title={title} onClose={onClose}>
+      <iframe
+      title="feedback"
+      height="450px"
+      width="550px"
+      id={frameId}
+      src={`${feedbackFrameUrl}/centrohost?appname=ocvfeedback&feature=host-ocv-inapp-feedback&platform=web&appId=${appId}#/hostedpage`}
+      sandbox="allow-scripts allow-same-origin allow-forms allow-popups" />
+    </Modal>
+  )
+}

react-common/components/controls/Feedback/FeedbackEventListener.ts

@@ -0,0 +1,125 @@
+import { appId, feedbackFrameUrl } from './configs';
+interface FeedbackRequestEventPayload<T> {
+  Event: string
+  EventArgs: string
+}
+type FeedbackRequestPayloadType = FeedbackRequestEventPayload<any>
+
+interface FeedbackResponseEventPayload<T> {
+  event: string
+  data: T
+  error?: any
+}
+
+// for styling the feedback, we use this object. It is mostly used to change the colors.
+// we'll want to change this based on the target and whether high contrast is enabled
+let themeOptions = {
+    baseTheme: "PublisherLightTheme",
+}
+
+let initfeedbackOptions: any;
+let feedbackData: any;
+let FEEDBACK_FRAME_ID: string;
+let currentTheme = '';
+let feedbackCallbacks: any;
+
+// the function to initialize the feedback event listener
+// feedbackConfig: needs to be passed in as a prop because the things that
+/**
+ * The function to initialize the feedback event listener
+ * @param {any} feedbackConfig: the feedback config object whose fields are defined in OCV.
+ *  This changes based on what type of feedback we want to collect. Look at configs.ts for more details.
+ * @param {string} frameId: the html id of the actual iframe where the feedback will be displayed
+ * @param {any} [callbacks]: an object of functions that can be called when certain events happen in the feedback modal.
+ *  Needs to be passed in because the callbacks will depend on what the parent wants to react to.
+ */
+export const initFeedbackEventListener = (feedbackConfig: any, frameId: string, callbacks?: any) => {
+    window.addEventListener('message', feedbackCallbackEventListener);
+    feedbackCallbacks = callbacks;
+    initfeedbackOptions = {
+        appId: appId,
+        ageGroup: "Undefined",
+        authenticationType: "Unauthenticated",
+        clientName: "MakeCode",
+        feedbackConfig: feedbackConfig,
+        isProduction: false,
+        themeOptions: themeOptions,
+        // telemetry - will likely want this
+    }
+
+    feedbackData = initfeedbackOptions;
+    FEEDBACK_FRAME_ID = frameId;
+}
+
+export const removeFeedbackEventListener = () => {
+    window.removeEventListener('message', feedbackCallbackEventListener);
+}
+
+/**
+ * The function that listens for the feedback events.
+ * The events here are the ones that seemed most useful to log or respond to
+ * @param {MessageEvent<FeedbackRequestPayloadType>} event: the event received from OCV
+ */
+const feedbackCallbackEventListener = (event: MessageEvent<FeedbackRequestPayloadType>) => {
+if (event.data.Event) {
+    const payload: FeedbackRequestPayloadType = event.data
+    switch (payload.Event) {
+    case 'InAppFeedbackInitOptions': //This is required to initialise feedback
+        sendFeedbackInitOptions()
+        break
+    case 'InAppFeedbackOnError': //Invoked when an error occurrs on feedback submission - would be nice to log something to the user
+        console.log('Error Message: ', payload.EventArgs)
+        break
+    case 'InAppFeedbackInitializationComplete': //Invoked when feedback form is fully initialised and displays error/warning if any - nice to have a log for this
+        console.log('InAppFeedbackInitializationComplete: ', payload.EventArgs)
+        break
+    case 'InAppFeedbackOnSuccess': //Invoked when feedback submission is successful - would be useful to have telemetry/something else on this event
+        console.log('InAppFeedbackOnSuccess: ', payload.EventArgs)
+        break
+    case 'InAppFeedbackDismissWithResult': //Invoked when feedback is dismissed - the big important one for us to be able to close the feedback modal
+        console.log('InAppFeedbackDismissWithResult: ', payload.EventArgs);
+        if (feedbackCallbacks.onDismiss) {
+            feedbackCallbacks.onDismiss();
+        }
+        break
+    }
+}
+}
+
+// ***************** Helper Functions *****************
+
+// TODO
+// haven't implemented yet with events, but this will be needed in order to update to high contrast
+// general changes need to be made as well use the correct theme. the windows ones were just the defaults.
+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, feedbackFrameUrl)
+}
+
+
+/**
+ * Actually initializes the feedback session. This is called when the feedback modal opens.
+ */
+const sendFeedbackInitOptions = () => {
+    type FeedbackResponsePayloadType = FeedbackResponseEventPayload<any>
+    feedbackData.callbackFunctions = undefined
+    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, feedbackFrameUrl)
+}

react-common/components/controls/Feedback/configs.ts

@@ -0,0 +1,57 @@
+export const appId = 50315;
+export const feedbackFrameUrl = 'https://admin-ignite.microsoft.com';
+
+export const baseConfig: any = {
+    feedbackUiType: "NoSurface",
+    hostPlatform: "IFrame",
+    isDisplayed: true,
+    isEmailCollectionEnabled: false, // to enable email collection
+    isFileUploadEnabled: false, // to enable file upload function
+    isScreenshotEnabled: false, // to enable screenshot
+    isScreenRecordingEnabled: false, // to enable screen recording
+    invokeOnDismissOnEsc: false,
+    isFeedbackForumEnabled: false,
+    isMyFeedbackEnabled: false,
+    isThankYouPageDisabled: false,
+}
+
+export const ratingFeedbackConfig: any = {
+    ...baseConfig,
+    initialFeedbackType: "Unclassified",
+    scenarioConfig: {
+      isScenarioEnabled: true,
+      scenarioType: "Custom",
+      questionDetails: {
+        questionUiType: "Rating",
+        questionInstruction: {
+          displayedStringInEnglish: "What did you think of this activity?",
+          displayedString: "What did you think of this activity?"
+        },
+        questionOptions: [
+          {
+            displayedStringInEnglish: "Boring",
+            displayedString: "Boring"
+          },
+          {
+            displayedStringInEnglish: "Not fun",
+            displayedString: "Not fun"
+          },
+          {
+            displayedStringInEnglish: "Kinda fun",
+            displayedString: "Kinda fun"
+          },
+          {
+            displayedStringInEnglish: "Fun",
+            displayedString: "Fun"
+          },
+          {
+            displayedStringInEnglish: "Super fun",
+            displayedString: "Super fun"
+          },
+        ],
+        "questionUiBehaviour": [
+          "CommentNotRequired"
+        ]
+      }
+    }
+}

react-common/styles/controls/Feedback.less

@@ -0,0 +1,3 @@
+.feedback-modal iframe{
+    border: none;
+}

react-common/styles/react-common.less

@@ -26,6 +26,7 @@
 @import "controls/VerticalSlider.less";
 @import "controls/Accordion.less";
 @import "controls/CarouselNav.less";
+@import "controls/Feedback.less";
 @import "./react-common-variables.less";
 
 @import "fontawesome-free/less/solid.less";