From d31eca89f0a8a2de1f01c2266c0edfc17936d20a Mon Sep 17 00:00:00 2001
From: Sarah Rietkerk <sarahnrietkerk@gmail.com>
Date: Thu, 12 Dec 2024 11:38:50 -0800
Subject: [PATCH 01/32] plumbing for showing the feedback iframe

---
 cli/server.ts                                 |   8 +-
 localtypings/pxteditor.d.ts                   |   1 +
 react-common/components/controls/Feedback.tsx | 169 ++++++++++++++++++
 webapp/src/app.tsx                            |   4 +
 webapp/src/dialogs.tsx                        |   9 +
 webapp/src/projects.tsx                       |   7 +
 6 files changed, 196 insertions(+), 2 deletions(-)
 create mode 100644 react-common/components/controls/Feedback.tsx

diff --git a/cli/server.ts b/cli/server.ts
index 061083f414bb..3599d78ab340 100644
--- a/cli/server.ts
+++ b/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])
diff --git a/localtypings/pxteditor.d.ts b/localtypings/pxteditor.d.ts
index 26dd274455a3..679bb03d3746 100644
--- a/localtypings/pxteditor.d.ts
+++ b/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;
diff --git a/react-common/components/controls/Feedback.tsx b/react-common/components/controls/Feedback.tsx
new file mode 100644
index 000000000000..cbde982bd0f6
--- /dev/null
+++ b/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" />  
+    )
+}
\ No newline at end of file
diff --git a/webapp/src/app.tsx b/webapp/src/app.tsx
index eab841f53d32..873795b17483 100644
--- a/webapp/src/app.tsx
+++ b/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) {
diff --git a/webapp/src/dialogs.tsx b/webapp/src/dialogs.tsx
index b94826ae5c03..d7a53b946889 100644
--- a/webapp/src/dialogs.tsx
+++ b/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;
diff --git a/webapp/src/projects.tsx b/webapp/src/projects.tsx
index bb70c6c840b4..9149ae4ec471 100644
--- a/webapp/src/projects.tsx
+++ b/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>;
     }

From f55fca27b19f9ff044db7f4e8fd22924f77835c6 Mon Sep 17 00:00:00 2001
From: Sarah Rietkerk <sarahnrietkerk@gmail.com>
Date: Wed, 18 Dec 2024 17:08:46 -0800
Subject: [PATCH 02/32] add https flag to the cli to use https when debugging
 ocv iframe

---
 cli/cli.ts    |  5 +++--
 cli/server.ts | 13 +++++++++----
 2 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/cli/cli.ts b/cli/cli.ts
index 3dc5ee9256c3..3bc6f224bfa3 100644
--- a/cli/cli.ts
+++ b/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);
 
diff --git a/cli/server.ts b/cli/server.ts
index 3599d78ab340..b976d02314bc 100644
--- a/cli/server.ts
+++ b/cli/server.ts
@@ -14,6 +14,7 @@ import { promisify } from "util";
 
 import U = pxt.Util;
 import Cloud = pxt.Cloud;
+import { SecureContextOptions } from 'tls';
 
 const userProjectsDirName = "projects";
 
@@ -805,6 +806,7 @@ export interface ServeOptions {
     serial?: boolean;
     noauth?: boolean;
     backport?: number;
+    https?: boolean;
 }
 
 // can use http://localhost:3232/streams/nnngzlzxslfu for testing
@@ -950,8 +952,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 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)
@@ -1352,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'))
@@ -1371,7 +1375,8 @@ export function serveAsync(options: ServeOptions) {
 
     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:`);

From 87236db3f092fc88eb08cdd17403a73806c0b173 Mon Sep 17 00:00:00 2001
From: Sarah Rietkerk <sarahnrietkerk@gmail.com>
Date: Fri, 20 Dec 2024 13:36:07 -0800
Subject: [PATCH 03/32] more config, removed functions, changed height and
 width of iframe

---
 react-common/components/controls/Feedback.tsx | 100 ++++++++++--------
 1 file changed, 56 insertions(+), 44 deletions(-)

diff --git a/react-common/components/controls/Feedback.tsx b/react-common/components/controls/Feedback.tsx
index cbde982bd0f6..05610b11c58d 100644
--- a/react-common/components/controls/Feedback.tsx
+++ b/react-common/components/controls/Feedback.tsx
@@ -1,11 +1,51 @@
+import { useEffect } from "react"
+
 export const feedbackConfig: any = {
-    feedbackUiType: "Modal",
+    feedbackUiType: "NoSurface",
+    hostPlatform: "IFrame",
     isDisplayed: true,
     isEmailCollectionEnabled: false, // to enable email collection
     isFileUploadEnabled: false, // to enable file upload function
-    isScreenshotEnabled: true, // to enable screenshot
+    isScreenshotEnabled: false, // to enable screenshot
     isScreenRecordingEnabled: false, // to enable screen recording
-    invokeOnDismissOnEsc: true,
+    invokeOnDismissOnEsc: false,
+    isFeedbackForumEnabled: false,
+    isMyFeedbackEnabled: false,
+    isThankYouPageDisabled: true,
+    initialFeedbackType: "Unclassified",
+    scenarioConfig: {
+      isScenarioEnabled: true,
+      scenarioType: "Custom",
+      questionDetails: {
+        questionUiType: "Rating",
+        questionInstruction: {
+          displayedStringInEnglish: "This is a custom Rating Question",
+          displayedString: "This is a custom Rating Question"
+        },
+        questionOptions: [
+          {
+            displayedStringInEnglish: "Option 1",
+            displayedString: "Option 1"
+          },
+          {
+            displayedStringInEnglish: "Option 2",
+            displayedString: "Option 2"
+          },
+          {
+            displayedStringInEnglish: "Option 3",
+            displayedString: "Option 3"
+          },
+          {
+            displayedStringInEnglish: "Option 4",
+            displayedString: "Option 4"
+          },
+          {
+            displayedStringInEnglish: "Option 5",
+            displayedString: "Option 5"
+          }
+        ]
+      }
+    }
 }
 
 export const themeOptions = {
@@ -42,7 +82,8 @@ export const FEEDBACK_FRAME_ID = 'feedback-iframe'
 let feedbackData = initfeedbackOptions
 
 export const feedbackCallbackEventListener = (event: MessageEvent<FeedbackRequestPayloadType>) => {
-  if (event.data) {
+  if (event.data.Event) {
+    console.log("we got an event with data");
     const payload: FeedbackRequestPayloadType = event.data
     switch (payload.Event) {
       case 'InAppFeedbackInitOptions': //This is required to initialise feedback
@@ -106,6 +147,8 @@ const sendFeedbackInitOptions = () => {
   type FeedbackResponsePayloadType = FeedbackResponseEventPayload<any>
   feedbackData.callbackFunctions = undefined
 //   feedbackData.feedbackConfig!.diagnosticsConfig!.attachDiagnostics = undefined
+  console.log("HELLOOOOOO")
+  console.log(feedbackData)
   console.log("got the message to init");
   let response: FeedbackResponsePayloadType = {
     event: 'InAppFeedbackInitOptions',
@@ -116,51 +159,20 @@ const sendFeedbackInitOptions = () => {
   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;
+
+    useEffect(() => {
+        window.addEventListener('message', feedbackCallbackEventListener)
+        return () => {
+            window.removeEventListener('message', feedbackCallbackEventListener)
+        }
+    }, [])
     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
+        height="450px" // You can change this according to your host app requirement
+        width="700px"  // 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

From 05935524cc00c215341dd6653a96ccd7d2c49ef2 Mon Sep 17 00:00:00 2001
From: Sarah Rietkerk <sarahnrietkerk@gmail.com>
Date: Mon, 13 Jan 2025 16:52:40 -0800
Subject: [PATCH 04/32] using different modal for the feedback

---
 localtypings/pxtarget.d.ts                    |   1 +
 localtypings/pxteditor.d.ts                   |   1 +
 react-common/components/controls/Feedback.tsx | 181 ------------------
 .../components/controls/Feedback/Feedback.tsx |  69 +++++++
 .../Feedback/FeedbackEventListener.ts         | 117 +++++++++++
 .../components/controls/Feedback/configs.ts   |  51 +++++
 webapp/src/app.tsx                            |  20 +-
 webapp/src/dialogs.tsx                        |   9 -
 webapp/src/projects.tsx                       |   2 +-
 9 files changed, 259 insertions(+), 192 deletions(-)
 delete mode 100644 react-common/components/controls/Feedback.tsx
 create mode 100644 react-common/components/controls/Feedback/Feedback.tsx
 create mode 100644 react-common/components/controls/Feedback/FeedbackEventListener.ts
 create mode 100644 react-common/components/controls/Feedback/configs.ts

diff --git a/localtypings/pxtarget.d.ts b/localtypings/pxtarget.d.ts
index d0f1f29e7f15..8c2fe156e43f 100644
--- a/localtypings/pxtarget.d.ts
+++ b/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 {
diff --git a/localtypings/pxteditor.d.ts b/localtypings/pxteditor.d.ts
index 679bb03d3746..ac5b2cd70925 100644
--- a/localtypings/pxteditor.d.ts
+++ b/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 {
diff --git a/react-common/components/controls/Feedback.tsx b/react-common/components/controls/Feedback.tsx
deleted file mode 100644
index 05610b11c58d..000000000000
--- a/react-common/components/controls/Feedback.tsx
+++ /dev/null
@@ -1,181 +0,0 @@
-import { useEffect } from "react"
-
-export const feedbackConfig: 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: true,
-    initialFeedbackType: "Unclassified",
-    scenarioConfig: {
-      isScenarioEnabled: true,
-      scenarioType: "Custom",
-      questionDetails: {
-        questionUiType: "Rating",
-        questionInstruction: {
-          displayedStringInEnglish: "This is a custom Rating Question",
-          displayedString: "This is a custom Rating Question"
-        },
-        questionOptions: [
-          {
-            displayedStringInEnglish: "Option 1",
-            displayedString: "Option 1"
-          },
-          {
-            displayedStringInEnglish: "Option 2",
-            displayedString: "Option 2"
-          },
-          {
-            displayedStringInEnglish: "Option 3",
-            displayedString: "Option 3"
-          },
-          {
-            displayedStringInEnglish: "Option 4",
-            displayedString: "Option 4"
-          },
-          {
-            displayedStringInEnglish: "Option 5",
-            displayedString: "Option 5"
-          }
-        ]
-      }
-    }
-}
-
-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.Event) {
-    console.log("we got an event with 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("HELLOOOOOO")
-  console.log(feedbackData)
-  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')
-}
-
-export const Feedback = () => {
-    const appId = 50315;
-
-    useEffect(() => {
-        window.addEventListener('message', feedbackCallbackEventListener)
-        return () => {
-            window.removeEventListener('message', feedbackCallbackEventListener)
-        }
-    }, [])
-    return (
-        <iframe
-        title="feedback-demo"
-        height="450px" // You can change this according to your host app requirement
-        width="700px"  // 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" />  
-    )
-}
\ No newline at end of file
diff --git a/react-common/components/controls/Feedback/Feedback.tsx b/react-common/components/controls/Feedback/Feedback.tsx
new file mode 100644
index 000000000000..7906bf3cc05d
--- /dev/null
+++ b/react-common/components/controls/Feedback/Feedback.tsx
@@ -0,0 +1,69 @@
+import { useEffect } from "react"
+import { initFeedbackEventListener, removeFeedbackEventListener } from "./FeedbackEventListener";
+import { baseConfig, ratingFeedbackConfig } from "./configs";
+import { Modal } from "../Modal";
+
+interface IFeedbackProps {
+  feedbackConfig: any;
+  frameId: string;
+  title: string;
+  onClose: () => void;
+}
+
+export const Feedback = (props: IFeedbackProps) => {
+  const { feedbackConfig, frameId, title, onClose } = props;
+  const appId = 50315;
+
+  const onDismiss = () => {
+    onClose();
+  }
+
+  let callbacks = { onDismiss };
+
+  useEffect(() => {
+    initFeedbackEventListener(feedbackConfig, frameId, callbacks);
+    return () => {
+        removeFeedbackEventListener();
+    }
+  }, [])
+  return (
+    // would like to make it so there is no border on the iframe so the survey looks seamless
+    <Modal title={title} onClose={onClose}>
+      <iframe
+      title="feedback-demo"
+      height="450px" // You can change this according to your host app requirement
+      width="550px"  // You can change this according to your host app requirement
+      id={frameId}
+      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" />
+    </Modal>
+  )
+}
+
+interface IModalProps {
+  title?: string;
+  onClose: () => void;
+}
+
+export const GenericFeedback = (props: IModalProps) => {
+  return (
+    <Feedback
+        feedbackConfig={baseConfig}
+        frameId="menu-feedback-frame"
+        title={lf("Leave Feedback")}
+        onClose={props.onClose}
+    />
+  )
+}
+
+export const RatingFeedback = (props: IModalProps) => {
+  return (
+    <Feedback
+        feedbackConfig={ratingFeedbackConfig}
+        frameId="activity-feedback-frame"
+        title={lf("Rate this activity")}
+        onClose={props.onClose}
+    />
+  )
+}
\ No newline at end of file
diff --git a/react-common/components/controls/Feedback/FeedbackEventListener.ts b/react-common/components/controls/Feedback/FeedbackEventListener.ts
new file mode 100644
index 000000000000..7d4952c2dcf5
--- /dev/null
+++ b/react-common/components/controls/Feedback/FeedbackEventListener.ts
@@ -0,0 +1,117 @@
+interface FeedbackRequestEventPayload<T> {
+  Event: string
+  EventArgs: string
+}
+type FeedbackRequestPayloadType = FeedbackRequestEventPayload<any>
+
+interface FeedbackResponseEventPayload<T> {
+  event: string
+  data: T
+  error?: any
+}
+
+let themeOptions = { // will want to change this based on the target where we live
+    baseTheme: "PublisherLightTheme",
+}
+
+let initfeedbackOptions: any;
+let feedbackData: any;
+let FEEDBACK_FRAME_ID: string;
+let currentTheme = '';
+let feedbackCallbacks: any;
+
+export const initFeedbackEventListener = (feedbackConfig: any, frameId: string, callbacks?: any) => {
+    window.addEventListener('message', feedbackCallbackEventListener);
+    feedbackCallbacks = callbacks;
+    initfeedbackOptions = {
+        appId: 50315,
+        ageGroup: "Undefined",
+        authenticationType: "Unauthenticated",
+        clientName: "MakeCode",
+        feedbackConfig: feedbackConfig,
+        isProduction: false,
+        themeOptions: themeOptions,
+        // telemetry - will likely want this
+        // userId
+        // userData
+    
+    }
+
+    feedbackData = initfeedbackOptions;
+    FEEDBACK_FRAME_ID = frameId;
+}
+
+export const removeFeedbackEventListener = () => {
+    window.removeEventListener('message', feedbackCallbackEventListener);
+}
+
+const feedbackCallbackEventListener = (event: MessageEvent<FeedbackRequestPayloadType>) => {
+if (event.data.Event) {
+    console.log("we got an event with data");
+    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
+        console.log('Error Message: ', payload.EventArgs)
+        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);
+        if (feedbackCallbacks.onDismiss) {
+            feedbackCallbacks.onDismiss();
+        }
+        break
+    case 'InAppFeedbackExtractFeedbackDataForHost': //Invoked when feedback is dismissed
+        console.log('InAppFeedbackExtractFeedbackDataForHost: ', payload.EventArgs)
+        break
+    }
+}
+}
+
+
+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("HELLOOOOOO")
+    console.log(feedbackData)
+    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')
+}
\ No newline at end of file
diff --git a/react-common/components/controls/Feedback/configs.ts b/react-common/components/controls/Feedback/configs.ts
new file mode 100644
index 000000000000..50222580061d
--- /dev/null
+++ b/react-common/components/controls/Feedback/configs.ts
@@ -0,0 +1,51 @@
+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: "This is a custom Rating Question",
+          displayedString: "This is a custom Rating Question"
+        },
+        questionOptions: [
+          {
+            displayedStringInEnglish: "Option 1",
+            displayedString: "Option 1"
+          },
+          {
+            displayedStringInEnglish: "Option 2",
+            displayedString: "Option 2"
+          },
+          {
+            displayedStringInEnglish: "Option 3",
+            displayedString: "Option 3"
+          },
+          {
+            displayedStringInEnglish: "Option 4",
+            displayedString: "Option 4"
+          },
+          {
+            displayedStringInEnglish: "Option 5",
+            displayedString: "Option 5"
+          }
+        ]
+      }
+    }
+}
\ No newline at end of file
diff --git a/webapp/src/app.tsx b/webapp/src/app.tsx
index 873795b17483..5e89c884fba8 100644
--- a/webapp/src/app.tsx
+++ b/webapp/src/app.tsx
@@ -82,6 +82,7 @@ import { Tour } from "./components/onboarding/Tour";
 import { parseTourStepsAsync } from "./onboarding";
 import { initGitHubDb } from "./idbworkspace";
 import { BlockDefinition, CategoryNameID } from "./toolbox";
+import { Feedback, GenericFeedback } from "../../react-common/components/controls/Feedback/Feedback";
 
 pxt.blocks.requirePxtBlockly = () => pxtblockly as any;
 pxt.blocks.requireBlockly = () => Blockly;
@@ -199,6 +200,7 @@ export class ProjectView
             isMultiplayerGame: false,
             onboarding: undefined,
             mute: pxt.editor.MuteState.Unmuted,
+            feedback: false,
         };
         if (!this.settings.editorFontSize) this.settings.editorFontSize = /mobile/i.test(navigator.userAgent) ? 15 : 19;
         if (!this.settings.fileHistory) this.settings.fileHistory = [];
@@ -208,6 +210,7 @@ export class ProjectView
         this.hwDebug = this.hwDebug.bind(this);
         this.hideLightbox = this.hideLightbox.bind(this);
         this.hideOnboarding = this.hideOnboarding.bind(this);
+        this.hideFeedback = this.hideFeedback.bind(this);
         this.openSimSerial = this.openSimSerial.bind(this);
         this.openDeviceSerial = this.openDeviceSerial.bind(this);
         this.openSerial = this.openSerial.bind(this);
@@ -215,6 +218,7 @@ export class ProjectView
         this.toggleSimulatorFullscreen = this.toggleSimulatorFullscreen.bind(this);
         this.toggleSimulatorCollapse = this.toggleSimulatorCollapse.bind(this);
         this.showKeymap = this.showKeymap.bind(this);
+        this.showFeedback = this.showFeedback.bind(this);
         this.toggleKeymap = this.toggleKeymap.bind(this);
         this.showMiniSim = this.showMiniSim.bind(this);
         this.setTutorialStep = this.setTutorialStep.bind(this);
@@ -4498,7 +4502,7 @@ export class ProjectView
     }
 
     showFeedbackDialog(): void {
-        dialogs.showFeedbackDialogAsync();
+        this.showFeedback();
     }
 
     async showTurnBackTimeDialogAsync() {
@@ -5127,6 +5131,18 @@ export class ProjectView
         this.setState({ bannerVisible: b });
     }
 
+    ///////////////////////////////////////////////////////////
+    ////////////             Feedback            /////////////
+    ///////////////////////////////////////////////////////////
+
+    hideFeedback() {
+        this.setState({ feedback: false });
+    }
+
+    showFeedback() {
+        this.setState({ feedback: true });
+    }
+
     ///////////////////////////////////////////////////////////
     ////////////             Light Box            /////////////
     ///////////////////////////////////////////////////////////
@@ -5265,6 +5281,7 @@ export class ProjectView
         const hideMenuBar = targetTheme.hideMenuBar || hideTutorialIteration || (isTabTutorial && pxt.appTarget.appTheme.embeddedTutorial) || pxt.shell.isTimeMachineEmbed();
         const isHeadless = simOpts && simOpts.headless;
         const selectLanguage = targetTheme.selectLanguage;
+        const giveFeedback = targetTheme.giveFeedback;
         const showEditorToolbar = inEditor && !hideEditorToolbar && this.editor.hasEditorToolbar();
         const useSerialEditor = pxt.appTarget.serial && !!pxt.appTarget.serial.useEditor;
         const showSideDoc = sideDocs && this.state.sideDocsLoadUrl && !this.state.sideDocsCollapsed;
@@ -5406,6 +5423,7 @@ export class ProjectView
                 {hwDialog ? <projects.ChooseHwDialog parent={this} ref={this.handleChooseHwDialogRef} /> : undefined}
                 {sandbox || !sharingEnabled ? undefined : <share.ShareEditor parent={this} ref={this.handleShareEditorRef} loading={this.state.publishing} />}
                 {selectLanguage ? <lang.LanguagePicker parent={this} ref={this.handleLanguagePickerRef} /> : undefined}
+                {giveFeedback && this.state.feedback ? <GenericFeedback onClose={this.hideFeedback}/> : undefined}
                 {sandbox ? <container.SandboxFooter parent={this} /> : undefined}
                 {hideMenuBar ? <div id="editorlogo"><a className="poweredbylogo"></a></div> : undefined}
                 {lightbox ? <sui.Dimmer isOpen={true} active={lightbox} portalClassName={'tutorial'} className={'ui modal'}
diff --git a/webapp/src/dialogs.tsx b/webapp/src/dialogs.tsx
index d7a53b946889..b94826ae5c03 100644
--- a/webapp/src/dialogs.tsx
+++ b/webapp/src/dialogs.tsx
@@ -18,18 +18,9 @@ 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;
diff --git a/webapp/src/projects.tsx b/webapp/src/projects.tsx
index 9149ae4ec471..307c28497f92 100644
--- a/webapp/src/projects.tsx
+++ b/webapp/src/projects.tsx
@@ -239,7 +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.showFeedbackDialog = this.showFeedbackDialog.bind(this);
         this.signOutGithub = this.signOutGithub.bind(this);
     }
 

From 52591434cdef69f66c6ef45366817338a9672879 Mon Sep 17 00:00:00 2001
From: Sarah Rietkerk <sarahnrietkerk@gmail.com>
Date: Tue, 14 Jan 2025 11:05:13 -0800
Subject: [PATCH 05/32] added feedback menu item to editor menu

---
 webapp/src/container.tsx | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/webapp/src/container.tsx b/webapp/src/container.tsx
index 8106f1ce11ec..9f4dcb9a161d 100644
--- a/webapp/src/container.tsx
+++ b/webapp/src/container.tsx
@@ -142,6 +142,7 @@ export class SettingsMenu extends data.Component<SettingsMenuProps, SettingsMenu
         this.toggleAccessibleBlocks = this.toggleAccessibleBlocks.bind(this);
         this.showResetDialog = this.showResetDialog.bind(this);
         this.showShareDialog = this.showShareDialog.bind(this);
+        this.showFeedbackDialog = this.showFeedbackDialog.bind(this);
         this.showExitAndSaveDialog = this.showExitAndSaveDialog.bind(this);
         this.pair = this.pair.bind(this);
         this.pairBluetooth = this.pairBluetooth.bind(this);
@@ -162,6 +163,11 @@ export class SettingsMenu extends data.Component<SettingsMenuProps, SettingsMenu
         this.props.parent.showShareDialog();
     }
 
+    showFeedbackDialog() {
+        pxt.tickEvent("menu.feedback");
+        this.props.parent.showFeedbackDialog();
+    }
+
     openSettings() {
         pxt.tickEvent("menu.settings", undefined, { interactiveConsent: true });
         this.props.parent.openSettings();
@@ -349,7 +355,7 @@ export class SettingsMenu extends data.Component<SettingsMenuProps, SettingsMenu
             {
                 // we always need a way to clear local storage, regardless if signed in or not
             }
-            {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}
+            {targetTheme.giveFeedback ? <sui.Item role="menuitem" text={lf("Give Feedback")} onClick={this.showFeedbackDialog} /> : undefined}
         </sui.DropdownMenu>;
     }
 }

From 9354dc2b2e938ffc285d846cd746e95c0a9a3eb1 Mon Sep 17 00:00:00 2001
From: Sarah Rietkerk <sarahnrietkerk@gmail.com>
Date: Tue, 14 Jan 2025 11:16:40 -0800
Subject: [PATCH 06/32] got rid of iframe border

---
 react-common/components/controls/Feedback/Feedback.tsx | 4 ++--
 react-common/styles/controls/Feedback.less             | 3 +++
 react-common/styles/react-common.less                  | 1 +
 3 files changed, 6 insertions(+), 2 deletions(-)
 create mode 100644 react-common/styles/controls/Feedback.less

diff --git a/react-common/components/controls/Feedback/Feedback.tsx b/react-common/components/controls/Feedback/Feedback.tsx
index 7906bf3cc05d..670ec49fb658 100644
--- a/react-common/components/controls/Feedback/Feedback.tsx
+++ b/react-common/components/controls/Feedback/Feedback.tsx
@@ -28,9 +28,9 @@ export const Feedback = (props: IFeedbackProps) => {
   }, [])
   return (
     // would like to make it so there is no border on the iframe so the survey looks seamless
-    <Modal title={title} onClose={onClose}>
+    <Modal className="feedback-modal" title={title} onClose={onClose}>
       <iframe
-      title="feedback-demo"
+      title="feedback"
       height="450px" // You can change this according to your host app requirement
       width="550px"  // You can change this according to your host app requirement
       id={frameId}
diff --git a/react-common/styles/controls/Feedback.less b/react-common/styles/controls/Feedback.less
new file mode 100644
index 000000000000..d70a6928e351
--- /dev/null
+++ b/react-common/styles/controls/Feedback.less
@@ -0,0 +1,3 @@
+.feedback-modal iframe {
+    border: none;
+}
\ No newline at end of file
diff --git a/react-common/styles/react-common.less b/react-common/styles/react-common.less
index 87e9debe8bdb..c2d634c618c3 100644
--- a/react-common/styles/react-common.less
+++ b/react-common/styles/react-common.less
@@ -25,6 +25,7 @@
 @import "controls/VerticalResizeContainer.less";
 @import "controls/VerticalSlider.less";
 @import "controls/Accordion.less";
+@import "controls/Feedback.less";
 @import "./react-common-variables.less";
 
 @import "fontawesome-free/less/solid.less";

From a764d257c9612e6a0abeb417cadbba4ec1b487b9 Mon Sep 17 00:00:00 2001
From: Sarah Rietkerk <sarahnrietkerk@gmail.com>
Date: Fri, 24 Jan 2025 17:49:50 -0800
Subject: [PATCH 07/32] some small changes and styling

---
 .../components/controls/Feedback/Feedback.tsx | 56 +++++++++----------
 .../Feedback/FeedbackEventListener.ts         | 23 ++------
 .../components/controls/Feedback/configs.ts   | 29 +++++-----
 react-common/styles/controls/Feedback.less    |  2 +-
 webapp/src/app.tsx                            |  5 +-
 webapp/src/container.tsx                      |  2 +-
 webapp/src/projects.tsx                       |  2 +-
 7 files changed, 55 insertions(+), 64 deletions(-)

diff --git a/react-common/components/controls/Feedback/Feedback.tsx b/react-common/components/controls/Feedback/Feedback.tsx
index 670ec49fb658..67515c361b50 100644
--- a/react-common/components/controls/Feedback/Feedback.tsx
+++ b/react-common/components/controls/Feedback/Feedback.tsx
@@ -3,14 +3,41 @@ import { initFeedbackEventListener, removeFeedbackEventListener } from "./Feedba
 import { baseConfig, ratingFeedbackConfig } from "./configs";
 import { Modal } from "../Modal";
 
-interface IFeedbackProps {
+interface IFeedbackModalProps {
   feedbackConfig: any;
   frameId: string;
   title: string;
   onClose: () => void;
 }
 
+interface IFeedbackProps {
+  kind: "generic" | "rating";
+  onClose: () => void;
+}
+
 export const Feedback = (props: IFeedbackProps) => {
+  const { kind, onClose } = props;
+  return (
+    <>
+      {kind === "generic" &&
+        <FeedbackModal
+        feedbackConfig={baseConfig}
+        frameId="menu-feedback-frame"
+        title={lf("Leave Feedback")}
+        onClose={props.onClose}
+      />}
+      {kind === "rating" &&
+        <FeedbackModal
+        feedbackConfig={ratingFeedbackConfig}
+        frameId="activity-feedback-frame"
+        title={lf("Rate this activity")}
+        onClose={props.onClose} />
+      }
+    </>
+  )
+}
+
+export const FeedbackModal = (props: IFeedbackModalProps) => {
   const { feedbackConfig, frameId, title, onClose } = props;
   const appId = 50315;
 
@@ -39,31 +66,4 @@ export const Feedback = (props: IFeedbackProps) => {
       sandbox="allow-scripts allow-same-origin allow-forms allow-popups" />
     </Modal>
   )
-}
-
-interface IModalProps {
-  title?: string;
-  onClose: () => void;
-}
-
-export const GenericFeedback = (props: IModalProps) => {
-  return (
-    <Feedback
-        feedbackConfig={baseConfig}
-        frameId="menu-feedback-frame"
-        title={lf("Leave Feedback")}
-        onClose={props.onClose}
-    />
-  )
-}
-
-export const RatingFeedback = (props: IModalProps) => {
-  return (
-    <Feedback
-        feedbackConfig={ratingFeedbackConfig}
-        frameId="activity-feedback-frame"
-        title={lf("Rate this activity")}
-        onClose={props.onClose}
-    />
-  )
 }
\ No newline at end of file
diff --git a/react-common/components/controls/Feedback/FeedbackEventListener.ts b/react-common/components/controls/Feedback/FeedbackEventListener.ts
index 7d4952c2dcf5..65e587a1f4dd 100644
--- a/react-common/components/controls/Feedback/FeedbackEventListener.ts
+++ b/react-common/components/controls/Feedback/FeedbackEventListener.ts
@@ -47,42 +47,32 @@ export const removeFeedbackEventListener = () => {
 
 const feedbackCallbackEventListener = (event: MessageEvent<FeedbackRequestPayloadType>) => {
 if (event.data.Event) {
-    console.log("we got an event with data");
     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
+    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 '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
+    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
+    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
+    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
-    case 'InAppFeedbackExtractFeedbackDataForHost': //Invoked when feedback is dismissed
-        console.log('InAppFeedbackExtractFeedbackDataForHost: ', payload.EventArgs)
-        break
     }
 }
 }
 
 
-const sendUpdateTheme = () => {
+const sendUpdateTheme = () => { // want to be able to do this, but will wait on this.
     type FeedbackResponsePayloadType = FeedbackResponseEventPayload<any>
     if (currentTheme == 'WindowsDark') {
         currentTheme = 'WindowsLight'
@@ -104,9 +94,6 @@ const sendFeedbackInitOptions = () => {
     type FeedbackResponsePayloadType = FeedbackResponseEventPayload<any>
     feedbackData.callbackFunctions = undefined
     //   feedbackData.feedbackConfig!.diagnosticsConfig!.attachDiagnostics = undefined
-    console.log("HELLOOOOOO")
-    console.log(feedbackData)
-    console.log("got the message to init");
     let response: FeedbackResponsePayloadType = {
         event: 'InAppFeedbackInitOptions',
         data: feedbackData,
diff --git a/react-common/components/controls/Feedback/configs.ts b/react-common/components/controls/Feedback/configs.ts
index 50222580061d..0dd8073fcb86 100644
--- a/react-common/components/controls/Feedback/configs.ts
+++ b/react-common/components/controls/Feedback/configs.ts
@@ -21,30 +21,33 @@ export const ratingFeedbackConfig: any = {
       questionDetails: {
         questionUiType: "Rating",
         questionInstruction: {
-          displayedStringInEnglish: "This is a custom Rating Question",
-          displayedString: "This is a custom Rating Question"
+          displayedStringInEnglish: "What did you think of this activity?",
+          displayedString: "What did you think of this activity?"
         },
         questionOptions: [
           {
-            displayedStringInEnglish: "Option 1",
-            displayedString: "Option 1"
+            displayedStringInEnglish: "Boring",
+            displayedString: "Boring"
           },
           {
-            displayedStringInEnglish: "Option 2",
-            displayedString: "Option 2"
+            displayedStringInEnglish: "Not fun",
+            displayedString: "Not fun"
           },
           {
-            displayedStringInEnglish: "Option 3",
-            displayedString: "Option 3"
+            displayedStringInEnglish: "Kinda fun",
+            displayedString: "Kinda fun"
           },
           {
-            displayedStringInEnglish: "Option 4",
-            displayedString: "Option 4"
+            displayedStringInEnglish: "Fun",
+            displayedString: "Fun"
           },
           {
-            displayedStringInEnglish: "Option 5",
-            displayedString: "Option 5"
-          }
+            displayedStringInEnglish: "Super fun",
+            displayedString: "Super fun"
+          },
+        ],
+        "questionUiBehaviour": [
+          "CommentNotRequired"
         ]
       }
     }
diff --git a/react-common/styles/controls/Feedback.less b/react-common/styles/controls/Feedback.less
index d70a6928e351..1353650a1b14 100644
--- a/react-common/styles/controls/Feedback.less
+++ b/react-common/styles/controls/Feedback.less
@@ -1,3 +1,3 @@
-.feedback-modal iframe {
+.feedback-modal iframe{
     border: none;
 }
\ No newline at end of file
diff --git a/webapp/src/app.tsx b/webapp/src/app.tsx
index 5e89c884fba8..bdf9ec295996 100644
--- a/webapp/src/app.tsx
+++ b/webapp/src/app.tsx
@@ -82,7 +82,7 @@ import { Tour } from "./components/onboarding/Tour";
 import { parseTourStepsAsync } from "./onboarding";
 import { initGitHubDb } from "./idbworkspace";
 import { BlockDefinition, CategoryNameID } from "./toolbox";
-import { Feedback, GenericFeedback } from "../../react-common/components/controls/Feedback/Feedback";
+import { Feedback} from "../../react-common/components/controls/Feedback/Feedback";
 
 pxt.blocks.requirePxtBlockly = () => pxtblockly as any;
 pxt.blocks.requireBlockly = () => Blockly;
@@ -4898,6 +4898,7 @@ export class ProjectView
     async completeTutorialAsync(): Promise<void> {
         pxt.tickEvent("tutorial.finish", { tutorial: this.state.header?.tutorial?.tutorial });
         pxt.tickEvent("tutorial.complete", { tutorial: this.state.header?.tutorial?.tutorial });
+        this.showFeedbackDialog();
         core.showLoading("leavingtutorial", lf("leaving tutorial..."));
         this.postTutorialCompleted();
 
@@ -5423,7 +5424,7 @@ export class ProjectView
                 {hwDialog ? <projects.ChooseHwDialog parent={this} ref={this.handleChooseHwDialogRef} /> : undefined}
                 {sandbox || !sharingEnabled ? undefined : <share.ShareEditor parent={this} ref={this.handleShareEditorRef} loading={this.state.publishing} />}
                 {selectLanguage ? <lang.LanguagePicker parent={this} ref={this.handleLanguagePickerRef} /> : undefined}
-                {giveFeedback && this.state.feedback ? <GenericFeedback onClose={this.hideFeedback}/> : undefined}
+                {giveFeedback && this.state.feedback ? <Feedback onClose={this.hideFeedback} kind="generic"/> : undefined}
                 {sandbox ? <container.SandboxFooter parent={this} /> : undefined}
                 {hideMenuBar ? <div id="editorlogo"><a className="poweredbylogo"></a></div> : undefined}
                 {lightbox ? <sui.Dimmer isOpen={true} active={lightbox} portalClassName={'tutorial'} className={'ui modal'}
diff --git a/webapp/src/container.tsx b/webapp/src/container.tsx
index 9f4dcb9a161d..f7e29c4391d3 100644
--- a/webapp/src/container.tsx
+++ b/webapp/src/container.tsx
@@ -355,7 +355,7 @@ export class SettingsMenu extends data.Component<SettingsMenuProps, SettingsMenu
             {
                 // we always need a way to clear local storage, regardless if signed in or not
             }
-            {targetTheme.giveFeedback ? <sui.Item role="menuitem" text={lf("Give Feedback")} onClick={this.showFeedbackDialog} /> : undefined}
+            {targetTheme.giveFeedback ? <sui.Item role="menuitem" icon="smile outline" text={lf("Give Feedback")} onClick={this.showFeedbackDialog} /> : undefined}
         </sui.DropdownMenu>;
     }
 }
diff --git a/webapp/src/projects.tsx b/webapp/src/projects.tsx
index 307c28497f92..30b08eda0d0f 100644
--- a/webapp/src/projects.tsx
+++ b/webapp/src/projects.tsx
@@ -316,7 +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} />
+            <sui.Item role="menuitem" icon="smile outline" 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>;
     }

From 6446b2a019e611509f5e22c80ca4999cc85780ad Mon Sep 17 00:00:00 2001
From: Sarah Rietkerk <sarahnrietkerk@gmail.com>
Date: Mon, 27 Jan 2025 13:57:05 -0800
Subject: [PATCH 08/32] added comments

---
 .../components/controls/Feedback/Feedback.tsx | 10 ++++--
 .../Feedback/FeedbackEventListener.ts         | 33 +++++++++++++++----
 2 files changed, 34 insertions(+), 9 deletions(-)

diff --git a/react-common/components/controls/Feedback/Feedback.tsx b/react-common/components/controls/Feedback/Feedback.tsx
index 67515c361b50..25fa3a89e8f4 100644
--- a/react-common/components/controls/Feedback/Feedback.tsx
+++ b/react-common/components/controls/Feedback/Feedback.tsx
@@ -3,6 +3,8 @@ import { initFeedbackEventListener, removeFeedbackEventListener } from "./Feedba
 import { baseConfig, ratingFeedbackConfig } 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;
@@ -10,11 +12,14 @@ interface IFeedbackModalProps {
   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 (
@@ -54,12 +59,11 @@ export const FeedbackModal = (props: IFeedbackModalProps) => {
     }
   }, [])
   return (
-    // would like to make it so there is no border on the iframe so the survey looks seamless
     <Modal className="feedback-modal" title={title} onClose={onClose}>
       <iframe
       title="feedback"
-      height="450px" // You can change this according to your host app requirement
-      width="550px"  // You can change this according to your host app requirement
+      height="450px"
+      width="550px"
       id={frameId}
       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
diff --git a/react-common/components/controls/Feedback/FeedbackEventListener.ts b/react-common/components/controls/Feedback/FeedbackEventListener.ts
index 65e587a1f4dd..527b0af73196 100644
--- a/react-common/components/controls/Feedback/FeedbackEventListener.ts
+++ b/react-common/components/controls/Feedback/FeedbackEventListener.ts
@@ -10,7 +10,9 @@ interface FeedbackResponseEventPayload<T> {
   error?: any
 }
 
-let themeOptions = { // will want to change this based on the target where we live
+// 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 where we live
+let themeOptions = {
     baseTheme: "PublisherLightTheme",
 }
 
@@ -20,6 +22,16 @@ 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;
@@ -32,9 +44,6 @@ export const initFeedbackEventListener = (feedbackConfig: any, frameId: string,
         isProduction: false,
         themeOptions: themeOptions,
         // telemetry - will likely want this
-        // userId
-        // userData
-    
     }
 
     feedbackData = initfeedbackOptions;
@@ -45,6 +54,11 @@ 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
@@ -71,8 +85,12 @@ if (event.data.Event) {
 }
 }
 
+// ***************** Helper Functions *****************
 
-const sendUpdateTheme = () => { // want to be able to do this, but will wait on this.
+// 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'
@@ -89,7 +107,10 @@ const sendUpdateTheme = () => { // want to be able to do this, but will wait on
     iFrameEle!.contentWindow!.postMessage(response, 'https://admin-ignite.microsoft.com')
 }
 
-//private functions
+
+/**
+ * Actually initializes the feedback session. This is called when the feedback modal opens.
+ */
 const sendFeedbackInitOptions = () => {
     type FeedbackResponsePayloadType = FeedbackResponseEventPayload<any>
     feedbackData.callbackFunctions = undefined

From 212058810ddc4fecf43ebedf1df854cf1cfb10a7 Mon Sep 17 00:00:00 2001
From: Sarah Rietkerk <sarahnrietkerk@gmail.com>
Date: Mon, 27 Jan 2025 13:59:56 -0800
Subject: [PATCH 09/32] move app id to configs

---
 react-common/components/controls/Feedback/Feedback.tsx         | 3 +--
 .../components/controls/Feedback/FeedbackEventListener.ts      | 3 ++-
 react-common/components/controls/Feedback/configs.ts           | 2 ++
 3 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/react-common/components/controls/Feedback/Feedback.tsx b/react-common/components/controls/Feedback/Feedback.tsx
index 25fa3a89e8f4..4f8293a5f769 100644
--- a/react-common/components/controls/Feedback/Feedback.tsx
+++ b/react-common/components/controls/Feedback/Feedback.tsx
@@ -1,6 +1,6 @@
 import { useEffect } from "react"
 import { initFeedbackEventListener, removeFeedbackEventListener } from "./FeedbackEventListener";
-import { baseConfig, ratingFeedbackConfig } from "./configs";
+import { baseConfig, ratingFeedbackConfig, appId } from "./configs";
 import { Modal } from "../Modal";
 
 // both components require onClose because the feedback modal should close when the user clicks the "finish" button
@@ -44,7 +44,6 @@ export const Feedback = (props: IFeedbackProps) => {
 
 export const FeedbackModal = (props: IFeedbackModalProps) => {
   const { feedbackConfig, frameId, title, onClose } = props;
-  const appId = 50315;
 
   const onDismiss = () => {
     onClose();
diff --git a/react-common/components/controls/Feedback/FeedbackEventListener.ts b/react-common/components/controls/Feedback/FeedbackEventListener.ts
index 527b0af73196..0fc597e8ebcf 100644
--- a/react-common/components/controls/Feedback/FeedbackEventListener.ts
+++ b/react-common/components/controls/Feedback/FeedbackEventListener.ts
@@ -1,3 +1,4 @@
+import { appId } from './configs';
 interface FeedbackRequestEventPayload<T> {
   Event: string
   EventArgs: string
@@ -36,7 +37,7 @@ export const initFeedbackEventListener = (feedbackConfig: any, frameId: string,
     window.addEventListener('message', feedbackCallbackEventListener);
     feedbackCallbacks = callbacks;
     initfeedbackOptions = {
-        appId: 50315,
+        appId: appId,
         ageGroup: "Undefined",
         authenticationType: "Unauthenticated",
         clientName: "MakeCode",
diff --git a/react-common/components/controls/Feedback/configs.ts b/react-common/components/controls/Feedback/configs.ts
index 0dd8073fcb86..7b511129de1f 100644
--- a/react-common/components/controls/Feedback/configs.ts
+++ b/react-common/components/controls/Feedback/configs.ts
@@ -1,3 +1,5 @@
+export const appId = 50315;
+
 export const baseConfig: any = {
     feedbackUiType: "NoSurface",
     hostPlatform: "IFrame",

From 4da2fdc8ded63335a1035eb333453db2284f200e Mon Sep 17 00:00:00 2001
From: Sarah Rietkerk <sarahnrietkerk@gmail.com>
Date: Mon, 27 Jan 2025 14:00:47 -0800
Subject: [PATCH 10/32] fix onclose reference

---
 react-common/components/controls/Feedback/Feedback.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/react-common/components/controls/Feedback/Feedback.tsx b/react-common/components/controls/Feedback/Feedback.tsx
index 4f8293a5f769..ab07cb255194 100644
--- a/react-common/components/controls/Feedback/Feedback.tsx
+++ b/react-common/components/controls/Feedback/Feedback.tsx
@@ -29,14 +29,14 @@ export const Feedback = (props: IFeedbackProps) => {
         feedbackConfig={baseConfig}
         frameId="menu-feedback-frame"
         title={lf("Leave Feedback")}
-        onClose={props.onClose}
+        onClose={onClose}
       />}
       {kind === "rating" &&
         <FeedbackModal
         feedbackConfig={ratingFeedbackConfig}
         frameId="activity-feedback-frame"
         title={lf("Rate this activity")}
-        onClose={props.onClose} />
+        onClose={onClose} />
       }
     </>
   )

From 05d4be75fedda05164fd65bcb2ff65785b212a42 Mon Sep 17 00:00:00 2001
From: Sarah Rietkerk <sarahnrietkerk@gmail.com>
Date: Mon, 27 Jan 2025 14:18:45 -0800
Subject: [PATCH 11/32] moved frame url to configs

---
 react-common/components/controls/Feedback/Feedback.tsx     | 4 ++--
 .../components/controls/Feedback/FeedbackEventListener.ts  | 7 +++----
 react-common/components/controls/Feedback/configs.ts       | 1 +
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/react-common/components/controls/Feedback/Feedback.tsx b/react-common/components/controls/Feedback/Feedback.tsx
index ab07cb255194..f13f6f54d9fe 100644
--- a/react-common/components/controls/Feedback/Feedback.tsx
+++ b/react-common/components/controls/Feedback/Feedback.tsx
@@ -1,6 +1,6 @@
 import { useEffect } from "react"
 import { initFeedbackEventListener, removeFeedbackEventListener } from "./FeedbackEventListener";
-import { baseConfig, ratingFeedbackConfig, appId } from "./configs";
+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
@@ -64,7 +64,7 @@ export const FeedbackModal = (props: IFeedbackModalProps) => {
       height="450px"
       width="550px"
       id={frameId}
-      src={`https://admin-ignite.microsoft.com/centrohost?appname=ocvfeedback&feature=host-ocv-inapp-feedback&platform=web&appId=${appId}#/hostedpage`}
+      src={`${feedbackFrameUrl}/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" />
     </Modal>
diff --git a/react-common/components/controls/Feedback/FeedbackEventListener.ts b/react-common/components/controls/Feedback/FeedbackEventListener.ts
index 0fc597e8ebcf..a658ab53b23e 100644
--- a/react-common/components/controls/Feedback/FeedbackEventListener.ts
+++ b/react-common/components/controls/Feedback/FeedbackEventListener.ts
@@ -1,4 +1,4 @@
-import { appId } from './configs';
+import { appId, feedbackFrameUrl } from './configs';
 interface FeedbackRequestEventPayload<T> {
   Event: string
   EventArgs: string
@@ -105,7 +105,7 @@ const sendUpdateTheme = () => {
         },
     }
     const iFrameEle = document.getElementById(FEEDBACK_FRAME_ID) as HTMLIFrameElement
-    iFrameEle!.contentWindow!.postMessage(response, 'https://admin-ignite.microsoft.com')
+    iFrameEle!.contentWindow!.postMessage(response, feedbackFrameUrl)
 }
 
 
@@ -115,12 +115,11 @@ const sendUpdateTheme = () => {
 const sendFeedbackInitOptions = () => {
     type FeedbackResponsePayloadType = FeedbackResponseEventPayload<any>
     feedbackData.callbackFunctions = undefined
-    //   feedbackData.feedbackConfig!.diagnosticsConfig!.attachDiagnostics = 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, 'https://admin-ignite.microsoft.com')
+    iFrameEle!.contentWindow!.postMessage(response, feedbackFrameUrl)
 }
\ No newline at end of file
diff --git a/react-common/components/controls/Feedback/configs.ts b/react-common/components/controls/Feedback/configs.ts
index 7b511129de1f..6f007e011eb4 100644
--- a/react-common/components/controls/Feedback/configs.ts
+++ b/react-common/components/controls/Feedback/configs.ts
@@ -1,4 +1,5 @@
 export const appId = 50315;
+export const feedbackFrameUrl = 'https://admin-ignite.microsoft.com';
 
 export const baseConfig: any = {
     feedbackUiType: "NoSurface",

From 816c662eaef7b49d7dba3538acad2af4d6d41a81 Mon Sep 17 00:00:00 2001
From: Sarah Rietkerk <sarahnrietkerk@gmail.com>
Date: Mon, 27 Jan 2025 14:33:46 -0800
Subject: [PATCH 12/32] remove tutorial completion feedback for now

---
 .../components/controls/Feedback/FeedbackEventListener.ts       | 2 +-
 webapp/src/app.tsx                                              | 1 -
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/react-common/components/controls/Feedback/FeedbackEventListener.ts b/react-common/components/controls/Feedback/FeedbackEventListener.ts
index a658ab53b23e..e5b3fa7aae25 100644
--- a/react-common/components/controls/Feedback/FeedbackEventListener.ts
+++ b/react-common/components/controls/Feedback/FeedbackEventListener.ts
@@ -12,7 +12,7 @@ interface FeedbackResponseEventPayload<T> {
 }
 
 // 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 where we live
+// we'll want to change this based on the target and whether high contrast is enabled
 let themeOptions = {
     baseTheme: "PublisherLightTheme",
 }
diff --git a/webapp/src/app.tsx b/webapp/src/app.tsx
index bdf9ec295996..950fd206d288 100644
--- a/webapp/src/app.tsx
+++ b/webapp/src/app.tsx
@@ -4898,7 +4898,6 @@ export class ProjectView
     async completeTutorialAsync(): Promise<void> {
         pxt.tickEvent("tutorial.finish", { tutorial: this.state.header?.tutorial?.tutorial });
         pxt.tickEvent("tutorial.complete", { tutorial: this.state.header?.tutorial?.tutorial });
-        this.showFeedbackDialog();
         core.showLoading("leavingtutorial", lf("leaving tutorial..."));
         this.postTutorialCompleted();
 

From 8336f42d639ef4ccf6fb57ad8f4633f5f9536ef4 Mon Sep 17 00:00:00 2001
From: Sarah Rietkerk <sarahnrietkerk@gmail.com>
Date: Mon, 27 Jan 2025 15:01:50 -0800
Subject: [PATCH 13/32] use emoji instead of sui icon

---
 react-common/components/controls/Feedback/Feedback.tsx | 1 -
 webapp/src/container.tsx                               | 2 +-
 webapp/src/projects.tsx                                | 3 +--
 3 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/react-common/components/controls/Feedback/Feedback.tsx b/react-common/components/controls/Feedback/Feedback.tsx
index f13f6f54d9fe..9ac300e09860 100644
--- a/react-common/components/controls/Feedback/Feedback.tsx
+++ b/react-common/components/controls/Feedback/Feedback.tsx
@@ -65,7 +65,6 @@ export const FeedbackModal = (props: IFeedbackModalProps) => {
       width="550px"
       id={frameId}
       src={`${feedbackFrameUrl}/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" />
     </Modal>
   )
diff --git a/webapp/src/container.tsx b/webapp/src/container.tsx
index f7e29c4391d3..8ad3d670235a 100644
--- a/webapp/src/container.tsx
+++ b/webapp/src/container.tsx
@@ -355,7 +355,7 @@ export class SettingsMenu extends data.Component<SettingsMenuProps, SettingsMenu
             {
                 // we always need a way to clear local storage, regardless if signed in or not
             }
-            {targetTheme.giveFeedback ? <sui.Item role="menuitem" icon="smile outline" text={lf("Give Feedback")} onClick={this.showFeedbackDialog} /> : undefined}
+            {targetTheme.giveFeedback ? <sui.Item role="menuitem" text={lf("🙂 Give Feedback")} onClick={this.showFeedbackDialog} /> : undefined}
         </sui.DropdownMenu>;
     }
 }
diff --git a/webapp/src/projects.tsx b/webapp/src/projects.tsx
index 30b08eda0d0f..aaebcdb28751 100644
--- a/webapp/src/projects.tsx
+++ b/webapp/src/projects.tsx
@@ -316,8 +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" icon="smile outline" 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}
+            {targetTheme.giveFeedback ? <sui.Item role="menuitem" text={lf("🙂 Give Feedback")} onClick={this.showFeedbackDialog} /> : undefined}
         </sui.DropdownMenu>;
     }
 }

From f90523656b12f1beaac69c14c618877d08eb7fb4 Mon Sep 17 00:00:00 2001
From: Sarah Rietkerk <49178322+srietkerk@users.noreply.github.com>
Date: Tue, 28 Jan 2025 10:12:27 -0800
Subject: [PATCH 14/32] update iframeelement variable in event listener

Co-authored-by: Richard Knoll <riknoll@users.noreply.github.com>
---
 .../components/controls/Feedback/FeedbackEventListener.ts     | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/react-common/components/controls/Feedback/FeedbackEventListener.ts b/react-common/components/controls/Feedback/FeedbackEventListener.ts
index e5b3fa7aae25..532a388857f3 100644
--- a/react-common/components/controls/Feedback/FeedbackEventListener.ts
+++ b/react-common/components/controls/Feedback/FeedbackEventListener.ts
@@ -104,8 +104,8 @@ const sendUpdateTheme = () => {
             baseTheme: currentTheme,
         },
     }
-    const iFrameEle = document.getElementById(FEEDBACK_FRAME_ID) as HTMLIFrameElement
-    iFrameEle!.contentWindow!.postMessage(response, feedbackFrameUrl)
+    const iFrameElement = document.getElementById(FEEDBACK_FRAME_ID) as HTMLIFrameElement
+    iFrameElement!.contentWindow!.postMessage(response, feedbackFrameUrl)
 }
 
 

From 4a4eb795d9c62283589d3daa120e94132f5ba242 Mon Sep 17 00:00:00 2001
From: Sarah Rietkerk <49178322+srietkerk@users.noreply.github.com>
Date: Tue, 28 Jan 2025 10:12:47 -0800
Subject: [PATCH 15/32] add space to less file

Co-authored-by: Richard Knoll <riknoll@users.noreply.github.com>
---
 react-common/styles/controls/Feedback.less | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/react-common/styles/controls/Feedback.less b/react-common/styles/controls/Feedback.less
index 1353650a1b14..d70a6928e351 100644
--- a/react-common/styles/controls/Feedback.less
+++ b/react-common/styles/controls/Feedback.less
@@ -1,3 +1,3 @@
-.feedback-modal iframe{
+.feedback-modal iframe {
     border: none;
 }
\ No newline at end of file

From 6c86476147c1f11c7b6acf6ab826632f5259d7c3 Mon Sep 17 00:00:00 2001
From: Sarah Rietkerk <49178322+srietkerk@users.noreply.github.com>
Date: Tue, 28 Jan 2025 10:14:21 -0800
Subject: [PATCH 16/32] another iframe element var change

Co-authored-by: Richard Knoll <riknoll@users.noreply.github.com>
---
 .../components/controls/Feedback/FeedbackEventListener.ts     | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/react-common/components/controls/Feedback/FeedbackEventListener.ts b/react-common/components/controls/Feedback/FeedbackEventListener.ts
index 532a388857f3..62c14846d2fa 100644
--- a/react-common/components/controls/Feedback/FeedbackEventListener.ts
+++ b/react-common/components/controls/Feedback/FeedbackEventListener.ts
@@ -120,6 +120,6 @@ const sendFeedbackInitOptions = () => {
         data: feedbackData,
     }
     response = JSON.parse(JSON.stringify(response))
-    const iFrameEle = document.getElementById(FEEDBACK_FRAME_ID) as HTMLIFrameElement
-    iFrameEle!.contentWindow!.postMessage(response, feedbackFrameUrl)
+    const iFrameElement = document.getElementById(FEEDBACK_FRAME_ID) as HTMLIFrameElement
+    iFrameElement!.contentWindow!.postMessage(response, feedbackFrameUrl)
 }
\ No newline at end of file

From cd43ef9476d0348e8ec31097b2cab7cf423a8d7a Mon Sep 17 00:00:00 2001
From: Sarah Rietkerk <sarahnrietkerk@gmail.com>
Date: Tue, 28 Jan 2025 10:53:35 -0800
Subject: [PATCH 17/32] moved height, width to less file, fixed some styling

---
 .../components/controls/Feedback/Feedback.tsx      |  2 --
 react-common/styles/controls/Feedback.less         | 14 ++++++++++++--
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/react-common/components/controls/Feedback/Feedback.tsx b/react-common/components/controls/Feedback/Feedback.tsx
index 9ac300e09860..e3a0a22feda2 100644
--- a/react-common/components/controls/Feedback/Feedback.tsx
+++ b/react-common/components/controls/Feedback/Feedback.tsx
@@ -61,8 +61,6 @@ export const FeedbackModal = (props: IFeedbackModalProps) => {
     <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" />
diff --git a/react-common/styles/controls/Feedback.less b/react-common/styles/controls/Feedback.less
index d70a6928e351..d09ea7a77d8a 100644
--- a/react-common/styles/controls/Feedback.less
+++ b/react-common/styles/controls/Feedback.less
@@ -1,3 +1,13 @@
-.feedback-modal iframe {
-    border: none;
+.feedback-modal {
+    .common-modal-body {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        iframe {
+            height: 28rem;
+            width: 34rem;
+            border: none;
+        }
+    }
 }
\ No newline at end of file

From be206b59bd1705be818f1e830673f134a171ef78 Mon Sep 17 00:00:00 2001
From: Sarah Rietkerk <sarahnrietkerk@gmail.com>
Date: Tue, 28 Jan 2025 10:55:50 -0800
Subject: [PATCH 18/32] remove redundant jsdoc types

---
 .../components/controls/Feedback/FeedbackEventListener.ts | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/react-common/components/controls/Feedback/FeedbackEventListener.ts b/react-common/components/controls/Feedback/FeedbackEventListener.ts
index 62c14846d2fa..b5e6da2c2d91 100644
--- a/react-common/components/controls/Feedback/FeedbackEventListener.ts
+++ b/react-common/components/controls/Feedback/FeedbackEventListener.ts
@@ -27,10 +27,10 @@ let feedbackCallbacks: any;
 // 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.
+ * @param 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.
+ * @param frameId: the html id of the actual iframe where the feedback will be displayed
+ * @param [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) => {
@@ -58,7 +58,7 @@ export const removeFeedbackEventListener = () => {
 /**
  * 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
+ * @param event: the event received from OCV
  */
 const feedbackCallbackEventListener = (event: MessageEvent<FeedbackRequestPayloadType>) => {
 if (event.data.Event) {

From 2bb7a0508d47ff4cc10373d4e16086b4d4281b58 Mon Sep 17 00:00:00 2001
From: Sarah Rietkerk <sarahnrietkerk@gmail.com>
Date: Tue, 28 Jan 2025 11:14:28 -0800
Subject: [PATCH 19/32] use pxt log functions, fix spacing in the event
 listener

---
 .../Feedback/FeedbackEventListener.ts         | 42 +++++++++----------
 1 file changed, 21 insertions(+), 21 deletions(-)

diff --git a/react-common/components/controls/Feedback/FeedbackEventListener.ts b/react-common/components/controls/Feedback/FeedbackEventListener.ts
index b5e6da2c2d91..8a18a196b791 100644
--- a/react-common/components/controls/Feedback/FeedbackEventListener.ts
+++ b/react-common/components/controls/Feedback/FeedbackEventListener.ts
@@ -61,30 +61,30 @@ export const removeFeedbackEventListener = () => {
  * @param 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();
+    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
+                pxt.warn('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
+                pxt.debug('InAppFeedbackInitializationComplete: ', payload.EventArgs)
+                break
+            case 'InAppFeedbackOnSuccess': //Invoked when feedback submission is successful - would be useful to have telemetry/something else on this event
+                pxt.debug('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
+                pxt.debug('InAppFeedbackDismissWithResult: ', payload.EventArgs);
+                if (feedbackCallbacks.onDismiss) {
+                    feedbackCallbacks.onDismiss();
+                }
+                break
         }
-        break
     }
 }
-}
 
 // ***************** Helper Functions *****************
 

From b209592cdf2029f541846a83185a98f863069756 Mon Sep 17 00:00:00 2001
From: Sarah Rietkerk <sarahnrietkerk@gmail.com>
Date: Tue, 28 Jan 2025 11:19:57 -0800
Subject: [PATCH 20/32] move emoji out of lf

---
 webapp/src/container.tsx | 2 +-
 webapp/src/projects.tsx  | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/webapp/src/container.tsx b/webapp/src/container.tsx
index 8ad3d670235a..c15ea4ce7cb8 100644
--- a/webapp/src/container.tsx
+++ b/webapp/src/container.tsx
@@ -355,7 +355,7 @@ export class SettingsMenu extends data.Component<SettingsMenuProps, SettingsMenu
             {
                 // we always need a way to clear local storage, regardless if signed in or not
             }
-            {targetTheme.giveFeedback ? <sui.Item role="menuitem" text={lf("🙂 Give Feedback")} onClick={this.showFeedbackDialog} /> : undefined}
+            {targetTheme.giveFeedback ? <sui.Item role="menuitem" text={`🙂 ${lf("Give Feedback")}`} onClick={this.showFeedbackDialog} /> : undefined}
         </sui.DropdownMenu>;
     }
 }
diff --git a/webapp/src/projects.tsx b/webapp/src/projects.tsx
index aaebcdb28751..969827bbb385 100644
--- a/webapp/src/projects.tsx
+++ b/webapp/src/projects.tsx
@@ -316,7 +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} />
-            {targetTheme.giveFeedback ? <sui.Item role="menuitem" text={lf("🙂 Give Feedback")} onClick={this.showFeedbackDialog} /> : undefined}
+            {targetTheme.giveFeedback ? <sui.Item role="menuitem" text={`🙂 ${lf("Give Feedback")}`} onClick={this.showFeedbackDialog} /> : undefined}
         </sui.DropdownMenu>;
     }
 }

From 9438c1865e80860bf65eaa1c81f0455ca2155b97 Mon Sep 17 00:00:00 2001
From: Sarah Rietkerk <sarahnrietkerk@gmail.com>
Date: Tue, 28 Jan 2025 13:30:23 -0800
Subject: [PATCH 21/32] use lf for the displayed strings for the rating

---
 react-common/components/controls/Feedback/configs.ts | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/react-common/components/controls/Feedback/configs.ts b/react-common/components/controls/Feedback/configs.ts
index 6f007e011eb4..e98a4d4dd3ca 100644
--- a/react-common/components/controls/Feedback/configs.ts
+++ b/react-common/components/controls/Feedback/configs.ts
@@ -25,28 +25,28 @@ export const ratingFeedbackConfig: any = {
         questionUiType: "Rating",
         questionInstruction: {
           displayedStringInEnglish: "What did you think of this activity?",
-          displayedString: "What did you think of this activity?"
+          displayedString: lf("What did you think of this activity?")
         },
         questionOptions: [
           {
             displayedStringInEnglish: "Boring",
-            displayedString: "Boring"
+            displayedString: lf("Boring")
           },
           {
             displayedStringInEnglish: "Not fun",
-            displayedString: "Not fun"
+            displayedString: lf("Not fun")
           },
           {
             displayedStringInEnglish: "Kinda fun",
-            displayedString: "Kinda fun"
+            displayedString: lf("Kinda fun")
           },
           {
             displayedStringInEnglish: "Fun",
-            displayedString: "Fun"
+            displayedString: lf("Fun")
           },
           {
             displayedStringInEnglish: "Super fun",
-            displayedString: "Super fun"
+            displayedString: lf("Super fun")
           },
         ],
         "questionUiBehaviour": [

From 158939cf09629e4a6c771c9db82cfd04b6031c13 Mon Sep 17 00:00:00 2001
From: Sarah Rietkerk <sarahnrietkerk@gmail.com>
Date: Wed, 29 Jan 2025 17:03:17 -0800
Subject: [PATCH 22/32] types added

---
 .../components/controls/Feedback/Feedback.tsx |   3 +-
 .../Feedback/FeedbackEventListener.ts         |  17 +-
 .../components/controls/Feedback/configs.ts   |  24 +-
 .../components/controls/Feedback/types.d.ts   | 270 ++++++++++++++++++
 4 files changed, 294 insertions(+), 20 deletions(-)
 create mode 100644 react-common/components/controls/Feedback/types.d.ts

diff --git a/react-common/components/controls/Feedback/Feedback.tsx b/react-common/components/controls/Feedback/Feedback.tsx
index e3a0a22feda2..c2d400bf170c 100644
--- a/react-common/components/controls/Feedback/Feedback.tsx
+++ b/react-common/components/controls/Feedback/Feedback.tsx
@@ -2,11 +2,12 @@ import { useEffect } from "react"
 import { initFeedbackEventListener, removeFeedbackEventListener } from "./FeedbackEventListener";
 import { baseConfig, ratingFeedbackConfig, appId, feedbackFrameUrl } from "./configs";
 import { Modal } from "../Modal";
+import { IFeedbackConfig } from "./types";
 
 // 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;
+  feedbackConfig: IFeedbackConfig;
   frameId: string;
   title: string;
   onClose: () => void;
diff --git a/react-common/components/controls/Feedback/FeedbackEventListener.ts b/react-common/components/controls/Feedback/FeedbackEventListener.ts
index 8a18a196b791..1ba519141533 100644
--- a/react-common/components/controls/Feedback/FeedbackEventListener.ts
+++ b/react-common/components/controls/Feedback/FeedbackEventListener.ts
@@ -1,4 +1,5 @@
 import { appId, feedbackFrameUrl } from './configs';
+import { FeedbackAgeGroup, FeedbackAuthenticationType, IFeedbackCallbackFunctions, IFeedbackConfig, IFeedbackInitOptions, IThemeOptions } from './types';
 interface FeedbackRequestEventPayload<T> {
   Event: string
   EventArgs: string
@@ -13,15 +14,15 @@ interface FeedbackResponseEventPayload<T> {
 
 // 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 = {
+let themeOptions: IThemeOptions = {
     baseTheme: "PublisherLightTheme",
 }
 
-let initfeedbackOptions: any;
+let initfeedbackOptions: IFeedbackInitOptions;
+let feedbackCallbacks: IFeedbackCallbackFunctions;
 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
@@ -33,13 +34,13 @@ let feedbackCallbacks: any;
  * @param [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) => {
+export const initFeedbackEventListener = (feedbackConfig: IFeedbackConfig, frameId: string, callbacks?: IFeedbackCallbackFunctions) => {
     window.addEventListener('message', feedbackCallbackEventListener);
     feedbackCallbacks = callbacks;
     initfeedbackOptions = {
         appId: appId,
-        ageGroup: "Undefined",
-        authenticationType: "Unauthenticated",
+        ageGroup: FeedbackAgeGroup.Undefined,
+        authenticationType: FeedbackAuthenticationType.Unauthenticated,
         clientName: "MakeCode",
         feedbackConfig: feedbackConfig,
         isProduction: false,
@@ -114,10 +115,10 @@ const sendUpdateTheme = () => {
  */
 const sendFeedbackInitOptions = () => {
     type FeedbackResponsePayloadType = FeedbackResponseEventPayload<any>
-    feedbackData.callbackFunctions = undefined
+    initfeedbackOptions.callbackFunctions = undefined
     let response: FeedbackResponsePayloadType = {
         event: 'InAppFeedbackInitOptions',
-        data: feedbackData,
+        data: initfeedbackOptions,
     }
     response = JSON.parse(JSON.stringify(response))
     const iFrameElement = document.getElementById(FEEDBACK_FRAME_ID) as HTMLIFrameElement
diff --git a/react-common/components/controls/Feedback/configs.ts b/react-common/components/controls/Feedback/configs.ts
index e98a4d4dd3ca..52069c536239 100644
--- a/react-common/components/controls/Feedback/configs.ts
+++ b/react-common/components/controls/Feedback/configs.ts
@@ -1,28 +1,30 @@
+import { FeedbackHostPlatformType, FeedbackUiType, IFeedbackConfig, InAppFeedbackQuestionUiBehaviour, InAppFeedbackQuestionUiType, InAppFeedbackScenarioType } from "./types";
+
 export const appId = 50315;
 export const feedbackFrameUrl = 'https://admin-ignite.microsoft.com';
 
-export const baseConfig: any = {
-    feedbackUiType: "NoSurface",
-    hostPlatform: "IFrame",
+export const baseConfig: IFeedbackConfig = {
+    feedbackUiType: FeedbackUiType.NoSurface,
+    hostPlatform: FeedbackHostPlatformType.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
+    isEmailCollectionEnabled: false,
+    isFileUploadEnabled: false,
+    isScreenshotEnabled: false,
+    isScreenRecordingEnabled: false,
     invokeOnDismissOnEsc: false,
     isFeedbackForumEnabled: false,
     isMyFeedbackEnabled: false,
     isThankYouPageDisabled: false,
 }
 
-export const ratingFeedbackConfig: any = {
+export const ratingFeedbackConfig: IFeedbackConfig = {
     ...baseConfig,
     initialFeedbackType: "Unclassified",
     scenarioConfig: {
       isScenarioEnabled: true,
-      scenarioType: "Custom",
+      scenarioType: InAppFeedbackScenarioType.Custom,
       questionDetails: {
-        questionUiType: "Rating",
+        questionUiType: InAppFeedbackQuestionUiType.Rating,
         questionInstruction: {
           displayedStringInEnglish: "What did you think of this activity?",
           displayedString: lf("What did you think of this activity?")
@@ -50,7 +52,7 @@ export const ratingFeedbackConfig: any = {
           },
         ],
         "questionUiBehaviour": [
-          "CommentNotRequired"
+          InAppFeedbackQuestionUiBehaviour.CommentNotRequired
         ]
       }
     }
diff --git a/react-common/components/controls/Feedback/types.d.ts b/react-common/components/controls/Feedback/types.d.ts
new file mode 100644
index 000000000000..a548b1d8cd1b
--- /dev/null
+++ b/react-common/components/controls/Feedback/types.d.ts
@@ -0,0 +1,270 @@
+export declare enum FeedbackAgeGroup {
+    Undefined = "Undefined",
+    MinorWithoutParentalConsent = "MinorWithoutParentalConsent",
+    MinorWithParentalConsent = "MinorWithParentalConsent",
+    NotAdult = "NotAdult",
+    Adult = "Adult",
+    MinorNoParentalConsentRequired = "MinorNoParentalConsentRequired"
+}
+
+export interface IFeedbackCallbackFunctions {
+    attachDiagnosticsLogs?: (diagnosticsUploadId: string, diagnosticsEndpoint: string) => void;
+    onDismiss?: (isFeedbackSent?: boolean) => void;
+    onSuccess?: (clientFeedbackId: string) => void;
+    onError?: (errorMessage?: string) => void;
+    supportCallback?: () => void;
+    initializationComplete?: (initializationCompleteResult: InitializationResult) => void;
+    submitOffline?: (processedOfflineFeedback: ProcessedOfflineFeedback) => void;
+    setCurrentPage?: (pageName: InAppFeedbackPageName) => void;
+    setSubmitButtonState?: (isEnabled: boolean) => void;
+    onResize?: (feedbackContainerDimension: InAppFeedbackContainerDimension) => void;
+    /**
+     * This callback is called for each downstream service request that requires a user access token.
+     * An implementation of this callback should have a switch on `UserAccessTokenAudience` for each service that have been configured by the client.
+     * E.g. see `tenantFeedbackServiceOptions`
+     *
+     * @param audience the service for which the token is requested
+     * @param userUpn the user on behalf of whom the token is requested
+     * @returns an `IUserAccessTokenInfo` with the token and additional relevant metadata needed for the downstream request
+     */
+    getUserAccessToken?: (audience: UserAccessTokenAudience, userUpn: string) => Promise<IUserAccessTokenInfo | string | undefined>;
+}
+
+export declare enum FeedbackAuthenticationType {
+    MSA = "MSA",
+    AAD = "AAD",
+    Unauthenticated = "Unauthenticated"
+}
+export declare enum FeedbackPolicyValue {
+    Enabled = "Enabled",
+    Disabled = "Disabled",
+    NotConfigured = "Not Configured",
+    /**
+     * For feedback applications outside of M366, OCPS policies do not currently apply. This value
+     * is an explicit indication of that condition. In other words, this value should not be used unless
+     * the integrating partner is not part of M365 and knows that OCPS policies do not apply.
+     */
+    NotApplicable = "Not Applicable"
+}
+
+export interface IThemeOptions {
+    isFluentV9?: boolean;
+    /**
+     * v9Theme must be Theme object from @fluentui/react-components@9.*
+     */
+    v9Theme?: any;
+    /**
+     * brandVariants must be BrandVariants object from @fluentui/react-components@9.*
+     */
+    brandVariants?: any;
+    baseTheme?: any;
+    colorScheme?: any;
+}
+
+export interface IFeedbackInitOptions {
+    ageGroup?: FeedbackAgeGroup;
+    appId?: number;
+    authenticationType?: FeedbackAuthenticationType;
+    callbackFunctions?: IFeedbackCallbackFunctions;
+    clientName?: string;
+    feedbackConfig?: IFeedbackConfig;
+    isProduction?: boolean;
+    telemetry?: IFeedbackTelemetry;
+    themeOptions?: IThemeOptions;
+}
+
+export declare enum FeedbackUiType {
+    SidePane = "SidePane",// Default: Used for side pane/detail view
+    Modal = "Modal",// Used for modal view
+    CallOut = "CallOut",// Used for inscreen pop up dialogue
+    IFrameWithinSidePane = "IFrameWithinSidePane",// Same as side pane but used inside an iframe
+    IFrameWithinModal = "IFrameWithinModal",// Same as modal but used inside an iframe
+    IFrameWithinCallOut = "IFrameWithinCallOut",// Same as callout but used inside an iframe
+    NoSurface = "NoSurface",// Used when the surface is provided by the host app
+    NoSurfaceWithoutTitle = "NoSurfaceWithoutTitle"
+}
+
+export declare enum FeedbackHostPlatformType {
+    Windows = "Windows",
+    IOS = "iOS",
+    Android = "Android",
+    WacTaskPane = "WacTaskPane",
+    MacOS = "MacOS",
+    Web = "Web",
+    IFrame = "IFrame"
+}
+export declare enum FeedbackHostEventName {
+    SubmitClicked = "InAppFeedback_HostEvent_SubmitClicked",
+    BackClicked = "InAppFeedback_HostEvent_BackClicked"
+}
+export declare enum InitializationStatus {
+    Success = "Success",
+    Error = "Error",
+    Warning = "Warning"
+}
+export declare enum InAppFeedbackQuestionUiType {
+    DropDown = "DropDown",
+    MultiSelect = "MultiSelect",
+    Rating = "Rating",
+    SingleSelect = "SingleSelect",
+    SingleSelectHorizontal = "SingleSelectHorizontal"
+}
+
+export declare enum InAppFeedbackScenarioType {
+    FeatureArea = "FeatureArea",
+    ResponsibleAI = "ResponsibleAI",
+    Experience = "Experience",
+    ProductSatisfaction = "ProductSatisfaction",
+    CrashImpact = "CrashImpact",// CrashImpact is of type Survey
+    Custom = "Custom",
+    AIThumbsDown = "AIThumbsDown",
+    AIThumbsUp = "AIThumbsUp",
+    AIError = "AIError",
+    PromptSuggestion = "PromptSuggestion"
+}
+export declare enum InAppFeedbackQuestionUiBehaviour {
+    QuestionNotRequired = "QuestionNotRequired",
+    CommentNotRequired = "CommentNotRequired",
+    CommentRequiredWithLastOption = "CommentRequiredWithLastOption"
+}
+export declare enum FeedbackAttachmentOrigin {
+    Application = "Application",
+    User = "User"
+}
+export declare enum FeedbackEntryPoint {
+    Header = "Header",
+    Footer = "Footer",
+    Backstage = "Backstage",
+    HelpMenu = "Help Menu",
+    Canvas = "Canvas",
+    Chat = "Chat"
+}
+
+export interface InitializationResult {
+    status: InitializationStatus;
+    /**
+     * in UTC timestamp milliseconds
+     */
+    timestamp?: number;
+    /**
+     * Duration to load package and validations (centro performance) in milliseconds
+     */
+    loadTime?: number;
+    errorMessages?: string[];
+    warningMessages?: string[];
+}
+
+export interface IFeedbackConfig {
+    appData?: string;
+    canDisplayFeedbackCalled?: boolean;
+    feedbackUiType?: FeedbackUiType;
+    hideFooterActionButtons?: boolean;
+    initialFeedbackType?: FeedbackType;
+    hostPlatform?: FeedbackHostPlatformType;
+    /**
+     * Invokes onDismiss callback on Esc button press
+     * Useful for host apps like Win32 Pane or iFrames
+     */
+    invokeOnDismissOnEsc?: boolean;
+    isDisplayed?: boolean;
+    isEmailCollectionEnabled?: boolean;
+    isFeedbackForumEnabled?: boolean;
+    isFileUploadEnabled?: boolean;
+    isMyFeedbackEnabled?: boolean;
+    isScreenRecordingEnabled?: boolean;
+    isScreenshotEnabled?: boolean;
+    isShareContextDataEnabled?: boolean;
+    isThankYouPageDisabled?: boolean;
+    isSupportEnabled?: boolean;
+    maxHeight?: number;
+    maxWidth?: number;
+    minHeight?: number;
+    minWidth?: number;
+    myFeedbackUrl?: string;
+    privacyUrl?: string;
+    retentionDurationDays?: number;
+    scenarioConfig?: InAppFeedbackScenarioConfig;
+    supportUrl?: string;
+    /**
+     * Enable submit offline feedback
+     * This will only work if submitOffline callback is provided
+     */
+    isOfflineSubmitEnabled?: boolean;
+    /**
+     * For platforms that host other products or sites, this parameter is used to disambiguate the recipient of the data.
+     * Its effect is to alter the form title for internal users only, replacing 'Microsoft' with the string provided.
+     * The string length is capped at 30 characters.
+     * Please keep the name as short as possible to optimize the user experience, preferably including only the product name.
+     * */
+    msInternalTitleTarget?: string;
+}
+
+export type IFeedbackTelemetry = {
+    accountCountryCode?: string;
+    affectedProcessSessionId?: string;
+    appVersion?: string;
+    audience?: string;
+    audienceGroup?: string;
+    browser?: string;
+    browserVersion?: string;
+    channel?: string;
+    clientCountryCode?: string;
+    cpuModel?: string;
+    dataCenter?: string;
+    deviceId?: string;
+    deviceType?: string;
+    entryPoint?: FeedbackEntryPoint;
+    errorClassification?: string;
+    errorCode?: string;
+    errorName?: string;
+    featureArea?: string;
+    featureName?: string;
+    feedbackOrigin?: string;
+    flights?: string;
+    flightSource?: string;
+    fundamentalArea?: string;
+    installationType?: string;
+    integrationSource?: FeedbackIntegrationSource;
+    isLogIncluded?: boolean;
+    isUserSubscriber?: boolean;
+    officeArchitecture?: string;
+    officeBuild?: string;
+    officeEditingLang?: number;
+    officeUILang?: number;
+    osBitness?: number;
+    osBuild?: string;
+    osUserLang?: number;
+    platform?: string;
+    processorArchitecture?: string;
+    processorPhysicalCores?: number;
+    processSessionId?: string;
+    ringId?: number;
+    sku?: string;
+    sourceContext?: string;
+    sqmMachineId?: string;
+    subFeatureName?: string;
+    sourcePageName?: string;
+    sourcePageURI?: string;
+    systemManufacturer?: string;
+    systemProductName?: string;
+    uiHost?: string;
+};
+
+export interface InAppFeedbackScenarioConfig {
+    isScenarioEnabled?: boolean;
+    scenarioType?: InAppFeedbackScenarioType;
+    questionDetails?: InAppFeedbackQuestion;
+}
+export interface InAppFeedbackQuestion {
+    questionUiType?: InAppFeedbackQuestionUiType;
+    questionInstruction?: InAppFeedbackCompositeString;
+    questionOptions?: InAppFeedbackCompositeString[];
+    questionUiBehaviour?: InAppFeedbackQuestionUiBehaviour[];
+}
+export interface InAppFeedbackCompositeString {
+    displayedString: string;
+    displayedStringInEnglish: string;
+}
+
+
+

From c714b423b7a96814915e9fd359c84851ed873b00 Mon Sep 17 00:00:00 2001
From: Sarah Rietkerk <sarahnrietkerk@gmail.com>
Date: Thu, 30 Jan 2025 14:52:14 -0800
Subject: [PATCH 23/32] move types to localtypings and wrap them in a namespace

---
 localtypings/ocv.d.ts                         | 271 ++++++++++++++++++
 .../components/controls/Feedback/Feedback.tsx |   4 +-
 .../Feedback/FeedbackEventListener.ts         |  14 +-
 .../components/controls/Feedback/configs.ts   |  18 +-
 .../components/controls/Feedback/types.d.ts   | 270 -----------------
 5 files changed, 289 insertions(+), 288 deletions(-)
 create mode 100644 localtypings/ocv.d.ts
 delete mode 100644 react-common/components/controls/Feedback/types.d.ts

diff --git a/localtypings/ocv.d.ts b/localtypings/ocv.d.ts
new file mode 100644
index 000000000000..c4522737b0e1
--- /dev/null
+++ b/localtypings/ocv.d.ts
@@ -0,0 +1,271 @@
+declare namespace ocv {
+    const enum FeedbackAgeGroup {
+        Undefined = "Undefined",
+        MinorWithoutParentalConsent = "MinorWithoutParentalConsent",
+        MinorWithParentalConsent = "MinorWithParentalConsent",
+        NotAdult = "NotAdult",
+        Adult = "Adult",
+        MinorNoParentalConsentRequired = "MinorNoParentalConsentRequired"
+    }
+    
+    interface IFeedbackCallbackFunctions {
+        attachDiagnosticsLogs?: (diagnosticsUploadId: string, diagnosticsEndpoint: string) => void;
+        onDismiss?: (isFeedbackSent?: boolean) => void;
+        onSuccess?: (clientFeedbackId: string) => void;
+        onError?: (errorMessage?: string) => void;
+        supportCallback?: () => void;
+        initializationComplete?: (initializationCompleteResult: InitializationResult) => void;
+        setSubmitButtonState?: (isEnabled: boolean) => void;
+    }
+    
+    const enum FeedbackAuthenticationType {
+        MSA = "MSA",
+        AAD = "AAD",
+        Unauthenticated = "Unauthenticated"
+    }
+
+    const enum FeedbackType {
+        Smile = "Smile",
+        Frown = "Frown",
+        Idea = "Idea",
+        Unclassified = "Unclassified",
+        Survey = "Survey"
+    }
+
+    const enum FeedbackPolicyValue {
+        Enabled = "Enabled",
+        Disabled = "Disabled",
+        NotConfigured = "Not Configured",
+        NotApplicable = "Not Applicable"
+    }
+    
+    interface IThemeOptions {
+        isFluentV9?: boolean;
+        /**
+         * v9Theme must be Theme object from @fluentui/react-components@9.*
+         */
+        v9Theme?: any;
+        /**
+         * brandVariants must be BrandVariants object from @fluentui/react-components@9.*
+         */
+        brandVariants?: any;
+        baseTheme?: any;
+        colorScheme?: any;
+    }
+    
+    interface IFeedbackInitOptions {
+        ageGroup?: FeedbackAgeGroup;
+        appId?: number;
+        authenticationType?: FeedbackAuthenticationType;
+        callbackFunctions?: IFeedbackCallbackFunctions;
+        clientName?: string;
+        feedbackConfig?: IFeedbackConfig;
+        isProduction?: boolean;
+        telemetry?: IFeedbackTelemetry;
+        themeOptions?: IThemeOptions;
+    }
+    
+    const enum FeedbackUiType {
+        SidePane = "SidePane",// Default: Used for side pane/detail view
+        Modal = "Modal",// Used for modal view
+        CallOut = "CallOut",// Used for inscreen pop up dialogue
+        IFrameWithinSidePane = "IFrameWithinSidePane",// Same as side pane but used inside an iframe
+        IFrameWithinModal = "IFrameWithinModal",// Same as modal but used inside an iframe
+        IFrameWithinCallOut = "IFrameWithinCallOut",// Same as callout but used inside an iframe
+        NoSurface = "NoSurface",// Used when the surface is provided by the host app
+        NoSurfaceWithoutTitle = "NoSurfaceWithoutTitle"
+    }
+    
+    const enum FeedbackHostPlatformType {
+        Windows = "Windows",
+        IOS = "iOS",
+        Android = "Android",
+        WacTaskPane = "WacTaskPane",
+        MacOS = "MacOS",
+        Web = "Web",
+        IFrame = "IFrame"
+    }
+
+    const enum FeedbackHostEventName {
+        SubmitClicked = "InAppFeedback_HostEvent_SubmitClicked",
+        BackClicked = "InAppFeedback_HostEvent_BackClicked"
+    }
+
+    const enum InitializationStatus {
+        Success = "Success",
+        Error = "Error",
+        Warning = "Warning"
+    }
+
+    const enum InAppFeedbackQuestionUiType {
+        DropDown = "DropDown",
+        MultiSelect = "MultiSelect",
+        Rating = "Rating",
+        SingleSelect = "SingleSelect",
+        SingleSelectHorizontal = "SingleSelectHorizontal"
+    }
+    
+    const enum InAppFeedbackScenarioType {
+        FeatureArea = "FeatureArea",
+        ResponsibleAI = "ResponsibleAI",
+        Experience = "Experience",
+        ProductSatisfaction = "ProductSatisfaction",
+        CrashImpact = "CrashImpact",// CrashImpact is of type Survey
+        Custom = "Custom",
+        AIThumbsDown = "AIThumbsDown",
+        AIThumbsUp = "AIThumbsUp",
+        AIError = "AIError",
+        PromptSuggestion = "PromptSuggestion"
+    }
+
+    const enum InAppFeedbackQuestionUiBehaviour {
+        QuestionNotRequired = "QuestionNotRequired",
+        CommentNotRequired = "CommentNotRequired",
+        CommentRequiredWithLastOption = "CommentRequiredWithLastOption"
+    }
+
+    const enum FeedbackAttachmentOrigin {
+        Application = "Application",
+        User = "User"
+    }
+
+    const enum FeedbackEntryPoint {
+        Header = "Header",
+        Footer = "Footer",
+        Backstage = "Backstage",
+        HelpMenu = "Help Menu",
+        Canvas = "Canvas",
+        Chat = "Chat"
+    }
+    
+    interface InitializationResult {
+        status: InitializationStatus;
+        /**
+         * in UTC timestamp milliseconds
+         */
+        timestamp?: number;
+        /**
+         * Duration to load package and validations (centro performance) in milliseconds
+         */
+        loadTime?: number;
+        errorMessages?: string[];
+        warningMessages?: string[];
+    }
+    
+    interface IFeedbackConfig {
+        appData?: string;
+        canDisplayFeedbackCalled?: boolean;
+        feedbackUiType?: FeedbackUiType;
+        hideFooterActionButtons?: boolean;
+        initialFeedbackType?: FeedbackType;
+        hostPlatform?: FeedbackHostPlatformType;
+        /**
+         * Invokes onDismiss callback on Esc button press
+         * Useful for host apps like Win32 Pane or iFrames
+         */
+        invokeOnDismissOnEsc?: boolean;
+        isDisplayed?: boolean;
+        isEmailCollectionEnabled?: boolean;
+        isFeedbackForumEnabled?: boolean;
+        isFileUploadEnabled?: boolean;
+        isMyFeedbackEnabled?: boolean;
+        isScreenRecordingEnabled?: boolean;
+        isScreenshotEnabled?: boolean;
+        isShareContextDataEnabled?: boolean;
+        isThankYouPageDisabled?: boolean;
+        isSupportEnabled?: boolean;
+        maxHeight?: number;
+        maxWidth?: number;
+        minHeight?: number;
+        minWidth?: number;
+        myFeedbackUrl?: string;
+        privacyUrl?: string;
+        retentionDurationDays?: number;
+        scenarioConfig?: InAppFeedbackScenarioConfig;
+        supportUrl?: string;
+        /**
+         * Enable submit offline feedback
+         * This will only work if submitOffline callback is provided
+         */
+        isOfflineSubmitEnabled?: boolean;
+        /**
+         * For platforms that host other products or sites, this parameter is used to disambiguate the recipient of the data.
+         * Its effect is to alter the form title for internal users only, replacing 'Microsoft' with the string provided.
+         * The string length is capped at 30 characters.
+         * Please keep the name as short as possible to optimize the user experience, preferably including only the product name.
+         * */
+        msInternalTitleTarget?: string;
+    }
+    
+    type IFeedbackTelemetry = {
+        accountCountryCode?: string;
+        affectedProcessSessionId?: string;
+        appVersion?: string;
+        audience?: string;
+        audienceGroup?: string;
+        browser?: string;
+        browserVersion?: string;
+        channel?: string;
+        clientCountryCode?: string;
+        cpuModel?: string;
+        dataCenter?: string;
+        deviceId?: string;
+        deviceType?: string;
+        entryPoint?: FeedbackEntryPoint;
+        errorClassification?: string;
+        errorCode?: string;
+        errorName?: string;
+        featureArea?: string;
+        featureName?: string;
+        feedbackOrigin?: string;
+        flights?: string;
+        flightSource?: string;
+        fundamentalArea?: string;
+        installationType?: string;
+        isLogIncluded?: boolean;
+        isUserSubscriber?: boolean;
+        officeArchitecture?: string;
+        officeBuild?: string;
+        officeEditingLang?: number;
+        officeUILang?: number;
+        osBitness?: number;
+        osBuild?: string;
+        osUserLang?: number;
+        platform?: string;
+        processorArchitecture?: string;
+        processorPhysicalCores?: number;
+        processSessionId?: string;
+        ringId?: number;
+        sku?: string;
+        sourceContext?: string;
+        sqmMachineId?: string;
+        subFeatureName?: string;
+        sourcePageName?: string;
+        sourcePageURI?: string;
+        systemManufacturer?: string;
+        systemProductName?: string;
+        uiHost?: string;
+    };
+    
+    interface InAppFeedbackScenarioConfig {
+        isScenarioEnabled?: boolean;
+        scenarioType?: InAppFeedbackScenarioType;
+        questionDetails?: InAppFeedbackQuestion;
+    }
+
+    interface InAppFeedbackQuestion {
+        questionUiType?: InAppFeedbackQuestionUiType;
+        questionInstruction?: InAppFeedbackCompositeString;
+        questionOptions?: InAppFeedbackCompositeString[];
+        questionUiBehaviour?: InAppFeedbackQuestionUiBehaviour[];
+    }
+
+    interface InAppFeedbackCompositeString {
+        displayedString: string;
+        displayedStringInEnglish: string;
+    }
+}
+
+
+
+
diff --git a/react-common/components/controls/Feedback/Feedback.tsx b/react-common/components/controls/Feedback/Feedback.tsx
index c2d400bf170c..7e4f45bcc732 100644
--- a/react-common/components/controls/Feedback/Feedback.tsx
+++ b/react-common/components/controls/Feedback/Feedback.tsx
@@ -1,13 +1,13 @@
+/// <reference path="../../../../localtypings/ocv.d.ts" />
 import { useEffect } from "react"
 import { initFeedbackEventListener, removeFeedbackEventListener } from "./FeedbackEventListener";
 import { baseConfig, ratingFeedbackConfig, appId, feedbackFrameUrl } from "./configs";
 import { Modal } from "../Modal";
-import { IFeedbackConfig } from "./types";
 
 // 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: IFeedbackConfig;
+  feedbackConfig: ocv.IFeedbackConfig;
   frameId: string;
   title: string;
   onClose: () => void;
diff --git a/react-common/components/controls/Feedback/FeedbackEventListener.ts b/react-common/components/controls/Feedback/FeedbackEventListener.ts
index 1ba519141533..2db64729aa92 100644
--- a/react-common/components/controls/Feedback/FeedbackEventListener.ts
+++ b/react-common/components/controls/Feedback/FeedbackEventListener.ts
@@ -1,5 +1,5 @@
+/// <reference path="../../../../localtypings/ocv.d.ts" />
 import { appId, feedbackFrameUrl } from './configs';
-import { FeedbackAgeGroup, FeedbackAuthenticationType, IFeedbackCallbackFunctions, IFeedbackConfig, IFeedbackInitOptions, IThemeOptions } from './types';
 interface FeedbackRequestEventPayload<T> {
   Event: string
   EventArgs: string
@@ -14,12 +14,12 @@ interface FeedbackResponseEventPayload<T> {
 
 // 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: IThemeOptions = {
+let themeOptions: ocv.IThemeOptions = {
     baseTheme: "PublisherLightTheme",
 }
 
-let initfeedbackOptions: IFeedbackInitOptions;
-let feedbackCallbacks: IFeedbackCallbackFunctions;
+let initfeedbackOptions: ocv.IFeedbackInitOptions;
+let feedbackCallbacks: ocv.IFeedbackCallbackFunctions;
 let feedbackData: any;
 let FEEDBACK_FRAME_ID: string;
 let currentTheme = '';
@@ -34,13 +34,13 @@ let currentTheme = '';
  * @param [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: IFeedbackConfig, frameId: string, callbacks?: IFeedbackCallbackFunctions) => {
+export const initFeedbackEventListener = (feedbackConfig: ocv.IFeedbackConfig, frameId: string, callbacks?: ocv.IFeedbackCallbackFunctions) => {
     window.addEventListener('message', feedbackCallbackEventListener);
     feedbackCallbacks = callbacks;
     initfeedbackOptions = {
         appId: appId,
-        ageGroup: FeedbackAgeGroup.Undefined,
-        authenticationType: FeedbackAuthenticationType.Unauthenticated,
+        ageGroup: ocv.FeedbackAgeGroup.Undefined,
+        authenticationType: ocv.FeedbackAuthenticationType.Unauthenticated,
         clientName: "MakeCode",
         feedbackConfig: feedbackConfig,
         isProduction: false,
diff --git a/react-common/components/controls/Feedback/configs.ts b/react-common/components/controls/Feedback/configs.ts
index 52069c536239..168217c7a301 100644
--- a/react-common/components/controls/Feedback/configs.ts
+++ b/react-common/components/controls/Feedback/configs.ts
@@ -1,11 +1,11 @@
-import { FeedbackHostPlatformType, FeedbackUiType, IFeedbackConfig, InAppFeedbackQuestionUiBehaviour, InAppFeedbackQuestionUiType, InAppFeedbackScenarioType } from "./types";
+/// <reference path="../../../../localtypings/ocv.d.ts" />
 
 export const appId = 50315;
 export const feedbackFrameUrl = 'https://admin-ignite.microsoft.com';
 
-export const baseConfig: IFeedbackConfig = {
-    feedbackUiType: FeedbackUiType.NoSurface,
-    hostPlatform: FeedbackHostPlatformType.IFrame,
+export const baseConfig: ocv.IFeedbackConfig = {
+    feedbackUiType: ocv.FeedbackUiType.NoSurface,
+    hostPlatform: ocv.FeedbackHostPlatformType.IFrame,
     isDisplayed: true,
     isEmailCollectionEnabled: false,
     isFileUploadEnabled: false,
@@ -17,14 +17,14 @@ export const baseConfig: IFeedbackConfig = {
     isThankYouPageDisabled: false,
 }
 
-export const ratingFeedbackConfig: IFeedbackConfig = {
+export const ratingFeedbackConfig: ocv.IFeedbackConfig = {
     ...baseConfig,
-    initialFeedbackType: "Unclassified",
+    initialFeedbackType: ocv.FeedbackType.Unclassified,
     scenarioConfig: {
       isScenarioEnabled: true,
-      scenarioType: InAppFeedbackScenarioType.Custom,
+      scenarioType: ocv.InAppFeedbackScenarioType.Custom,
       questionDetails: {
-        questionUiType: InAppFeedbackQuestionUiType.Rating,
+        questionUiType: ocv.InAppFeedbackQuestionUiType.Rating,
         questionInstruction: {
           displayedStringInEnglish: "What did you think of this activity?",
           displayedString: lf("What did you think of this activity?")
@@ -52,7 +52,7 @@ export const ratingFeedbackConfig: IFeedbackConfig = {
           },
         ],
         "questionUiBehaviour": [
-          InAppFeedbackQuestionUiBehaviour.CommentNotRequired
+          ocv.InAppFeedbackQuestionUiBehaviour.CommentNotRequired
         ]
       }
     }
diff --git a/react-common/components/controls/Feedback/types.d.ts b/react-common/components/controls/Feedback/types.d.ts
deleted file mode 100644
index a548b1d8cd1b..000000000000
--- a/react-common/components/controls/Feedback/types.d.ts
+++ /dev/null
@@ -1,270 +0,0 @@
-export declare enum FeedbackAgeGroup {
-    Undefined = "Undefined",
-    MinorWithoutParentalConsent = "MinorWithoutParentalConsent",
-    MinorWithParentalConsent = "MinorWithParentalConsent",
-    NotAdult = "NotAdult",
-    Adult = "Adult",
-    MinorNoParentalConsentRequired = "MinorNoParentalConsentRequired"
-}
-
-export interface IFeedbackCallbackFunctions {
-    attachDiagnosticsLogs?: (diagnosticsUploadId: string, diagnosticsEndpoint: string) => void;
-    onDismiss?: (isFeedbackSent?: boolean) => void;
-    onSuccess?: (clientFeedbackId: string) => void;
-    onError?: (errorMessage?: string) => void;
-    supportCallback?: () => void;
-    initializationComplete?: (initializationCompleteResult: InitializationResult) => void;
-    submitOffline?: (processedOfflineFeedback: ProcessedOfflineFeedback) => void;
-    setCurrentPage?: (pageName: InAppFeedbackPageName) => void;
-    setSubmitButtonState?: (isEnabled: boolean) => void;
-    onResize?: (feedbackContainerDimension: InAppFeedbackContainerDimension) => void;
-    /**
-     * This callback is called for each downstream service request that requires a user access token.
-     * An implementation of this callback should have a switch on `UserAccessTokenAudience` for each service that have been configured by the client.
-     * E.g. see `tenantFeedbackServiceOptions`
-     *
-     * @param audience the service for which the token is requested
-     * @param userUpn the user on behalf of whom the token is requested
-     * @returns an `IUserAccessTokenInfo` with the token and additional relevant metadata needed for the downstream request
-     */
-    getUserAccessToken?: (audience: UserAccessTokenAudience, userUpn: string) => Promise<IUserAccessTokenInfo | string | undefined>;
-}
-
-export declare enum FeedbackAuthenticationType {
-    MSA = "MSA",
-    AAD = "AAD",
-    Unauthenticated = "Unauthenticated"
-}
-export declare enum FeedbackPolicyValue {
-    Enabled = "Enabled",
-    Disabled = "Disabled",
-    NotConfigured = "Not Configured",
-    /**
-     * For feedback applications outside of M366, OCPS policies do not currently apply. This value
-     * is an explicit indication of that condition. In other words, this value should not be used unless
-     * the integrating partner is not part of M365 and knows that OCPS policies do not apply.
-     */
-    NotApplicable = "Not Applicable"
-}
-
-export interface IThemeOptions {
-    isFluentV9?: boolean;
-    /**
-     * v9Theme must be Theme object from @fluentui/react-components@9.*
-     */
-    v9Theme?: any;
-    /**
-     * brandVariants must be BrandVariants object from @fluentui/react-components@9.*
-     */
-    brandVariants?: any;
-    baseTheme?: any;
-    colorScheme?: any;
-}
-
-export interface IFeedbackInitOptions {
-    ageGroup?: FeedbackAgeGroup;
-    appId?: number;
-    authenticationType?: FeedbackAuthenticationType;
-    callbackFunctions?: IFeedbackCallbackFunctions;
-    clientName?: string;
-    feedbackConfig?: IFeedbackConfig;
-    isProduction?: boolean;
-    telemetry?: IFeedbackTelemetry;
-    themeOptions?: IThemeOptions;
-}
-
-export declare enum FeedbackUiType {
-    SidePane = "SidePane",// Default: Used for side pane/detail view
-    Modal = "Modal",// Used for modal view
-    CallOut = "CallOut",// Used for inscreen pop up dialogue
-    IFrameWithinSidePane = "IFrameWithinSidePane",// Same as side pane but used inside an iframe
-    IFrameWithinModal = "IFrameWithinModal",// Same as modal but used inside an iframe
-    IFrameWithinCallOut = "IFrameWithinCallOut",// Same as callout but used inside an iframe
-    NoSurface = "NoSurface",// Used when the surface is provided by the host app
-    NoSurfaceWithoutTitle = "NoSurfaceWithoutTitle"
-}
-
-export declare enum FeedbackHostPlatformType {
-    Windows = "Windows",
-    IOS = "iOS",
-    Android = "Android",
-    WacTaskPane = "WacTaskPane",
-    MacOS = "MacOS",
-    Web = "Web",
-    IFrame = "IFrame"
-}
-export declare enum FeedbackHostEventName {
-    SubmitClicked = "InAppFeedback_HostEvent_SubmitClicked",
-    BackClicked = "InAppFeedback_HostEvent_BackClicked"
-}
-export declare enum InitializationStatus {
-    Success = "Success",
-    Error = "Error",
-    Warning = "Warning"
-}
-export declare enum InAppFeedbackQuestionUiType {
-    DropDown = "DropDown",
-    MultiSelect = "MultiSelect",
-    Rating = "Rating",
-    SingleSelect = "SingleSelect",
-    SingleSelectHorizontal = "SingleSelectHorizontal"
-}
-
-export declare enum InAppFeedbackScenarioType {
-    FeatureArea = "FeatureArea",
-    ResponsibleAI = "ResponsibleAI",
-    Experience = "Experience",
-    ProductSatisfaction = "ProductSatisfaction",
-    CrashImpact = "CrashImpact",// CrashImpact is of type Survey
-    Custom = "Custom",
-    AIThumbsDown = "AIThumbsDown",
-    AIThumbsUp = "AIThumbsUp",
-    AIError = "AIError",
-    PromptSuggestion = "PromptSuggestion"
-}
-export declare enum InAppFeedbackQuestionUiBehaviour {
-    QuestionNotRequired = "QuestionNotRequired",
-    CommentNotRequired = "CommentNotRequired",
-    CommentRequiredWithLastOption = "CommentRequiredWithLastOption"
-}
-export declare enum FeedbackAttachmentOrigin {
-    Application = "Application",
-    User = "User"
-}
-export declare enum FeedbackEntryPoint {
-    Header = "Header",
-    Footer = "Footer",
-    Backstage = "Backstage",
-    HelpMenu = "Help Menu",
-    Canvas = "Canvas",
-    Chat = "Chat"
-}
-
-export interface InitializationResult {
-    status: InitializationStatus;
-    /**
-     * in UTC timestamp milliseconds
-     */
-    timestamp?: number;
-    /**
-     * Duration to load package and validations (centro performance) in milliseconds
-     */
-    loadTime?: number;
-    errorMessages?: string[];
-    warningMessages?: string[];
-}
-
-export interface IFeedbackConfig {
-    appData?: string;
-    canDisplayFeedbackCalled?: boolean;
-    feedbackUiType?: FeedbackUiType;
-    hideFooterActionButtons?: boolean;
-    initialFeedbackType?: FeedbackType;
-    hostPlatform?: FeedbackHostPlatformType;
-    /**
-     * Invokes onDismiss callback on Esc button press
-     * Useful for host apps like Win32 Pane or iFrames
-     */
-    invokeOnDismissOnEsc?: boolean;
-    isDisplayed?: boolean;
-    isEmailCollectionEnabled?: boolean;
-    isFeedbackForumEnabled?: boolean;
-    isFileUploadEnabled?: boolean;
-    isMyFeedbackEnabled?: boolean;
-    isScreenRecordingEnabled?: boolean;
-    isScreenshotEnabled?: boolean;
-    isShareContextDataEnabled?: boolean;
-    isThankYouPageDisabled?: boolean;
-    isSupportEnabled?: boolean;
-    maxHeight?: number;
-    maxWidth?: number;
-    minHeight?: number;
-    minWidth?: number;
-    myFeedbackUrl?: string;
-    privacyUrl?: string;
-    retentionDurationDays?: number;
-    scenarioConfig?: InAppFeedbackScenarioConfig;
-    supportUrl?: string;
-    /**
-     * Enable submit offline feedback
-     * This will only work if submitOffline callback is provided
-     */
-    isOfflineSubmitEnabled?: boolean;
-    /**
-     * For platforms that host other products or sites, this parameter is used to disambiguate the recipient of the data.
-     * Its effect is to alter the form title for internal users only, replacing 'Microsoft' with the string provided.
-     * The string length is capped at 30 characters.
-     * Please keep the name as short as possible to optimize the user experience, preferably including only the product name.
-     * */
-    msInternalTitleTarget?: string;
-}
-
-export type IFeedbackTelemetry = {
-    accountCountryCode?: string;
-    affectedProcessSessionId?: string;
-    appVersion?: string;
-    audience?: string;
-    audienceGroup?: string;
-    browser?: string;
-    browserVersion?: string;
-    channel?: string;
-    clientCountryCode?: string;
-    cpuModel?: string;
-    dataCenter?: string;
-    deviceId?: string;
-    deviceType?: string;
-    entryPoint?: FeedbackEntryPoint;
-    errorClassification?: string;
-    errorCode?: string;
-    errorName?: string;
-    featureArea?: string;
-    featureName?: string;
-    feedbackOrigin?: string;
-    flights?: string;
-    flightSource?: string;
-    fundamentalArea?: string;
-    installationType?: string;
-    integrationSource?: FeedbackIntegrationSource;
-    isLogIncluded?: boolean;
-    isUserSubscriber?: boolean;
-    officeArchitecture?: string;
-    officeBuild?: string;
-    officeEditingLang?: number;
-    officeUILang?: number;
-    osBitness?: number;
-    osBuild?: string;
-    osUserLang?: number;
-    platform?: string;
-    processorArchitecture?: string;
-    processorPhysicalCores?: number;
-    processSessionId?: string;
-    ringId?: number;
-    sku?: string;
-    sourceContext?: string;
-    sqmMachineId?: string;
-    subFeatureName?: string;
-    sourcePageName?: string;
-    sourcePageURI?: string;
-    systemManufacturer?: string;
-    systemProductName?: string;
-    uiHost?: string;
-};
-
-export interface InAppFeedbackScenarioConfig {
-    isScenarioEnabled?: boolean;
-    scenarioType?: InAppFeedbackScenarioType;
-    questionDetails?: InAppFeedbackQuestion;
-}
-export interface InAppFeedbackQuestion {
-    questionUiType?: InAppFeedbackQuestionUiType;
-    questionInstruction?: InAppFeedbackCompositeString;
-    questionOptions?: InAppFeedbackCompositeString[];
-    questionUiBehaviour?: InAppFeedbackQuestionUiBehaviour[];
-}
-export interface InAppFeedbackCompositeString {
-    displayedString: string;
-    displayedStringInEnglish: string;
-}
-
-
-

From 728ebd81a7d111b2ef4d8c92805a0862def8c718 Mon Sep 17 00:00:00 2001
From: Sarah Rietkerk <sarahnrietkerk@gmail.com>
Date: Thu, 30 Jan 2025 15:21:45 -0800
Subject: [PATCH 24/32] change to using the comment bubble icon

---
 webapp/src/container.tsx | 2 +-
 webapp/src/projects.tsx  | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/webapp/src/container.tsx b/webapp/src/container.tsx
index c15ea4ce7cb8..b4abf59e7d57 100644
--- a/webapp/src/container.tsx
+++ b/webapp/src/container.tsx
@@ -355,7 +355,7 @@ export class SettingsMenu extends data.Component<SettingsMenuProps, SettingsMenu
             {
                 // we always need a way to clear local storage, regardless if signed in or not
             }
-            {targetTheme.giveFeedback ? <sui.Item role="menuitem" text={`🙂 ${lf("Give Feedback")}`} onClick={this.showFeedbackDialog} /> : undefined}
+            {targetTheme.giveFeedback ? <sui.Item role="menuitem" icon="comment" text={lf("Give Feedback")} onClick={this.showFeedbackDialog} /> : undefined}
         </sui.DropdownMenu>;
     }
 }
diff --git a/webapp/src/projects.tsx b/webapp/src/projects.tsx
index 969827bbb385..97416eab61d3 100644
--- a/webapp/src/projects.tsx
+++ b/webapp/src/projects.tsx
@@ -316,7 +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} />
-            {targetTheme.giveFeedback ? <sui.Item role="menuitem" text={`🙂 ${lf("Give Feedback")}`} onClick={this.showFeedbackDialog} /> : undefined}
+            {targetTheme.giveFeedback ? <sui.Item role="menuitem" icon="comment" text={lf("Give Feedback")} onClick={this.showFeedbackDialog} /> : undefined}
         </sui.DropdownMenu>;
     }
 }

From 69ec94dea1bd099557500d0e1381200c476253c0 Mon Sep 17 00:00:00 2001
From: Sarah Rietkerk <sarahnrietkerk@gmail.com>
Date: Fri, 31 Jan 2025 11:39:28 -0800
Subject: [PATCH 25/32] added types

---
 .../Feedback/FeedbackEventListener.ts         | 58 ++++++++++++++-----
 1 file changed, 45 insertions(+), 13 deletions(-)

diff --git a/react-common/components/controls/Feedback/FeedbackEventListener.ts b/react-common/components/controls/Feedback/FeedbackEventListener.ts
index 2db64729aa92..d433c8e9d366 100644
--- a/react-common/components/controls/Feedback/FeedbackEventListener.ts
+++ b/react-common/components/controls/Feedback/FeedbackEventListener.ts
@@ -1,15 +1,52 @@
 /// <reference path="../../../../localtypings/ocv.d.ts" />
 import { appId, feedbackFrameUrl } from './configs';
-interface FeedbackRequestEventPayload<T> {
-  Event: string
-  EventArgs: string
+
+type FeedbackRequestEventArgsType = FeedbackInitOptionsEventPayload | FeedbackErrorEventPayload | FeedbackInitializationCompleteEventPayload | FeedbackOnSuccessEventPayload | FeedbackDismissWithResultEventPayload;
+
+interface FeedbackInitOptionsEventPayload {
+    EventArgs: undefined
+}
+
+interface FeedbackErrorEventPayload {
+    EventArgs: {
+        errorMessage: string
+    }
 }
-type FeedbackRequestPayloadType = FeedbackRequestEventPayload<any>
 
-interface FeedbackResponseEventPayload<T> {
-  event: string
-  data: T
-  error?: any
+interface FeedbackInitializationCompleteEventPayload {
+    EventArgs: {
+        errorMessages: string[],
+        warningMessages: string[],
+        status: string
+    }
+}
+
+interface FeedbackOnSuccessEventPayload {
+    EventArgs: {
+        clientFeedbackId: string
+    }
+}
+
+interface FeedbackDismissWithResultEventPayload {
+    EventArgs: {
+        isSuccess: boolean
+    }
+}
+
+type FeedbackRequestEventType = 'InAppFeedbackInitOptions' | 'InAppFeedbackOnError' | 'InAppFeedbackInitializationComplete' | 'InAppFeedbackOnSuccess' | 'InAppFeedbackDismissWithResult';
+
+type FeedbackRequestPayloadType = {
+    Event: FeedbackRequestEventType
+    EventArgs: FeedbackRequestEventArgsType
+}
+
+type FeedbackResponseEventType = 'InAppFeedbackInitOptions' | 'OnFeedbackHostAppThemeChanged';
+
+type FeedbackResponseDataType = ocv.IThemeOptions | ocv.IFeedbackInitOptions;
+
+type FeedbackResponsePayloadType = {
+  event: FeedbackResponseEventType
+  data: FeedbackResponseDataType
 }
 
 // for styling the feedback, we use this object. It is mostly used to change the colors.
@@ -20,7 +57,6 @@ let themeOptions: ocv.IThemeOptions = {
 
 let initfeedbackOptions: ocv.IFeedbackInitOptions;
 let feedbackCallbacks: ocv.IFeedbackCallbackFunctions;
-let feedbackData: any;
 let FEEDBACK_FRAME_ID: string;
 let currentTheme = '';
 
@@ -48,7 +84,6 @@ export const initFeedbackEventListener = (feedbackConfig: ocv.IFeedbackConfig, f
         // telemetry - will likely want this
     }
 
-    feedbackData = initfeedbackOptions;
     FEEDBACK_FRAME_ID = frameId;
 }
 
@@ -93,7 +128,6 @@ const feedbackCallbackEventListener = (event: MessageEvent<FeedbackRequestPayloa
 // 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 {
@@ -114,8 +148,6 @@ const sendUpdateTheme = () => {
  * Actually initializes the feedback session. This is called when the feedback modal opens.
  */
 const sendFeedbackInitOptions = () => {
-    type FeedbackResponsePayloadType = FeedbackResponseEventPayload<any>
-    initfeedbackOptions.callbackFunctions = undefined
     let response: FeedbackResponsePayloadType = {
         event: 'InAppFeedbackInitOptions',
         data: initfeedbackOptions,

From 9dc536767989d6785eafe9fe2328068c67ec7ca7 Mon Sep 17 00:00:00 2001
From: Sarah Rietkerk <sarahnrietkerk@gmail.com>
Date: Tue, 4 Feb 2025 14:05:18 -0800
Subject: [PATCH 26/32] actually using feedback kind

---
 localtypings/ocv.d.ts                              |  3 +++
 localtypings/pxteditor.d.ts                        | 10 ++++++++--
 .../components/controls/Feedback/Feedback.tsx      |  2 +-
 webapp/src/app.tsx                                 | 14 +++++++-------
 webapp/src/container.tsx                           |  2 +-
 webapp/src/projects.tsx                            |  2 +-
 6 files changed, 21 insertions(+), 12 deletions(-)

diff --git a/localtypings/ocv.d.ts b/localtypings/ocv.d.ts
index c4522737b0e1..01e69eaa8f89 100644
--- a/localtypings/ocv.d.ts
+++ b/localtypings/ocv.d.ts
@@ -1,4 +1,7 @@
 declare namespace ocv {
+
+    type FeedbackKind = "generic" | "rating";
+
     const enum FeedbackAgeGroup {
         Undefined = "Undefined",
         MinorWithoutParentalConsent = "MinorWithoutParentalConsent",
diff --git a/localtypings/pxteditor.d.ts b/localtypings/pxteditor.d.ts
index 8a5837b726dc..7aee16957980 100644
--- a/localtypings/pxteditor.d.ts
+++ b/localtypings/pxteditor.d.ts
@@ -1,6 +1,7 @@
 /// <reference path="../built/pxtlib.d.ts" />
 /// <reference path="./projectheader.d.ts" />
 /// <reference path="./validatorPlan.d.ts" />
+/// <reference path="./ocv.d.ts" />
 
 declare namespace pxt.editor {
     export interface EditorMessage {
@@ -751,6 +752,11 @@ declare namespace pxt.editor {
         cmd?: string;
     }
 
+    export interface FeedbackState {
+        showing: boolean;
+        kind?: ocv.FeedbackKind;
+    }
+
     export interface IAppProps { }
     export interface IAppState {
         active?: boolean; // is this tab visible at all
@@ -805,7 +811,7 @@ declare namespace pxt.editor {
         extensionsVisible?: boolean;
         isMultiplayerGame?: boolean; // Arcade: Does the current project contain multiplayer blocks?
         onboarding?: pxt.tour.BubbleStep[];
-        feedback?: boolean;
+        feedback?: FeedbackState;
     }
 
     export interface EditorState {
@@ -1048,7 +1054,7 @@ declare namespace pxt.editor {
         showLanguagePicker(): void;
         showShareDialog(title?: string, kind?: "multiplayer" | "vscode" | "share"): void;
         showAboutDialog(): void;
-        showFeedbackDialog(): void;
+        showFeedbackDialog(kind: ocv.FeedbackKind): void;
         showTurnBackTimeDialogAsync(): Promise<void>;
 
         showLoginDialog(continuationHash?: string): void;
diff --git a/react-common/components/controls/Feedback/Feedback.tsx b/react-common/components/controls/Feedback/Feedback.tsx
index 7e4f45bcc732..8da668df0118 100644
--- a/react-common/components/controls/Feedback/Feedback.tsx
+++ b/react-common/components/controls/Feedback/Feedback.tsx
@@ -16,7 +16,7 @@ interface IFeedbackModalProps {
 // 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";
+  kind: ocv.FeedbackKind;
   onClose: () => void;
 }
 
diff --git a/webapp/src/app.tsx b/webapp/src/app.tsx
index e0ab16669b7e..ae6c67c00a9c 100644
--- a/webapp/src/app.tsx
+++ b/webapp/src/app.tsx
@@ -201,7 +201,7 @@ export class ProjectView
             isMultiplayerGame: false,
             onboarding: undefined,
             mute: pxt.editor.MuteState.Unmuted,
-            feedback: false,
+            feedback: {showing: false, kind: "generic"} // state that tracks if the feedback modal is showing and what kind
         };
         if (!this.settings.editorFontSize) this.settings.editorFontSize = /mobile/i.test(navigator.userAgent) ? 15 : 19;
         if (!this.settings.fileHistory) this.settings.fileHistory = [];
@@ -4502,8 +4502,8 @@ export class ProjectView
         dialogs.showAboutDialogAsync(this);
     }
 
-    showFeedbackDialog(): void {
-        this.showFeedback();
+    showFeedbackDialog(kind: ocv.FeedbackKind): void {
+        this.showFeedback(kind);
     }
 
     async showTurnBackTimeDialogAsync() {
@@ -5137,11 +5137,11 @@ export class ProjectView
     ///////////////////////////////////////////////////////////
 
     hideFeedback() {
-        this.setState({ feedback: false });
+        this.setState({ feedback: {...this.state.feedback, showing: false } });
     }
 
-    showFeedback() {
-        this.setState({ feedback: true });
+    showFeedback(kind: ocv.FeedbackKind) {
+        this.setState({ feedback: { showing: true, kind } });
     }
 
     ///////////////////////////////////////////////////////////
@@ -5424,7 +5424,7 @@ export class ProjectView
                 {hwDialog ? <projects.ChooseHwDialog parent={this} ref={this.handleChooseHwDialogRef} /> : undefined}
                 {sandbox || !sharingEnabled ? undefined : <share.ShareEditor parent={this} ref={this.handleShareEditorRef} loading={this.state.publishing} />}
                 {selectLanguage ? <lang.LanguagePicker parent={this} ref={this.handleLanguagePickerRef} /> : undefined}
-                {giveFeedback && this.state.feedback ? <Feedback onClose={this.hideFeedback} kind="generic"/> : undefined}
+                {giveFeedback && this.state.feedback.showing ? <Feedback onClose={this.hideFeedback} kind={this.state.feedback.kind}/> : undefined}
                 {sandbox ? <container.SandboxFooter parent={this} /> : undefined}
                 {hideMenuBar ? <div id="editorlogo"><a className="poweredbylogo"></a></div> : undefined}
                 {lightbox ? <sui.Dimmer isOpen={true} active={lightbox} portalClassName={'tutorial'} className={'ui modal'}
diff --git a/webapp/src/container.tsx b/webapp/src/container.tsx
index b4abf59e7d57..68f2a08800eb 100644
--- a/webapp/src/container.tsx
+++ b/webapp/src/container.tsx
@@ -165,7 +165,7 @@ export class SettingsMenu extends data.Component<SettingsMenuProps, SettingsMenu
 
     showFeedbackDialog() {
         pxt.tickEvent("menu.feedback");
-        this.props.parent.showFeedbackDialog();
+        this.props.parent.showFeedbackDialog("generic");
     }
 
     openSettings() {
diff --git a/webapp/src/projects.tsx b/webapp/src/projects.tsx
index 97416eab61d3..ccf9b62f8b72 100644
--- a/webapp/src/projects.tsx
+++ b/webapp/src/projects.tsx
@@ -281,7 +281,7 @@ export class ProjectSettingsMenu extends data.Component<ProjectSettingsMenuProps
 
     showFeedbackDialog() {
         pxt.tickEvent("home.feedback");
-        this.props.parent.showFeedbackDialog();
+        this.props.parent.showFeedbackDialog("generic");
     }
 
     signOutGithub() {

From 3e8c6baf956d83d8c3c2766902c29adf7347f9dc Mon Sep 17 00:00:00 2001
From: Sarah Rietkerk <sarahnrietkerk@gmail.com>
Date: Tue, 4 Feb 2025 14:36:36 -0800
Subject: [PATCH 27/32] rename feedback app theme field

---
 localtypings/pxtarget.d.ts | 2 +-
 webapp/src/app.tsx         | 4 ++--
 webapp/src/container.tsx   | 2 +-
 webapp/src/projects.tsx    | 2 +-
 4 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/localtypings/pxtarget.d.ts b/localtypings/pxtarget.d.ts
index 8c2fe156e43f..8af54cda3610 100644
--- a/localtypings/pxtarget.d.ts
+++ b/localtypings/pxtarget.d.ts
@@ -524,7 +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
+        feedbackEnabled?: boolean; // allow feedback to be shown on a target
     }
 
     interface DownloadDialogTheme {
diff --git a/webapp/src/app.tsx b/webapp/src/app.tsx
index ae6c67c00a9c..8c273cf1023a 100644
--- a/webapp/src/app.tsx
+++ b/webapp/src/app.tsx
@@ -5282,7 +5282,7 @@ export class ProjectView
         const hideMenuBar = targetTheme.hideMenuBar || hideTutorialIteration || (isTabTutorial && pxt.appTarget.appTheme.embeddedTutorial) || pxt.shell.isTimeMachineEmbed();
         const isHeadless = simOpts && simOpts.headless;
         const selectLanguage = targetTheme.selectLanguage;
-        const giveFeedback = targetTheme.giveFeedback;
+        const feedbackEnabled = targetTheme.feedbackEnabled;
         const showEditorToolbar = inEditor && !hideEditorToolbar && this.editor.hasEditorToolbar();
         const useSerialEditor = pxt.appTarget.serial && !!pxt.appTarget.serial.useEditor;
         const showSideDoc = sideDocs && this.state.sideDocsLoadUrl && !this.state.sideDocsCollapsed;
@@ -5424,7 +5424,7 @@ export class ProjectView
                 {hwDialog ? <projects.ChooseHwDialog parent={this} ref={this.handleChooseHwDialogRef} /> : undefined}
                 {sandbox || !sharingEnabled ? undefined : <share.ShareEditor parent={this} ref={this.handleShareEditorRef} loading={this.state.publishing} />}
                 {selectLanguage ? <lang.LanguagePicker parent={this} ref={this.handleLanguagePickerRef} /> : undefined}
-                {giveFeedback && this.state.feedback.showing ? <Feedback onClose={this.hideFeedback} kind={this.state.feedback.kind}/> : undefined}
+                {feedbackEnabled && this.state.feedback.showing ? <Feedback onClose={this.hideFeedback} kind={this.state.feedback.kind}/> : undefined}
                 {sandbox ? <container.SandboxFooter parent={this} /> : undefined}
                 {hideMenuBar ? <div id="editorlogo"><a className="poweredbylogo"></a></div> : undefined}
                 {lightbox ? <sui.Dimmer isOpen={true} active={lightbox} portalClassName={'tutorial'} className={'ui modal'}
diff --git a/webapp/src/container.tsx b/webapp/src/container.tsx
index 68f2a08800eb..3776fe498c05 100644
--- a/webapp/src/container.tsx
+++ b/webapp/src/container.tsx
@@ -355,7 +355,7 @@ export class SettingsMenu extends data.Component<SettingsMenuProps, SettingsMenu
             {
                 // we always need a way to clear local storage, regardless if signed in or not
             }
-            {targetTheme.giveFeedback ? <sui.Item role="menuitem" icon="comment" text={lf("Give Feedback")} onClick={this.showFeedbackDialog} /> : undefined}
+            {targetTheme.feedbackEnabled ? <sui.Item role="menuitem" icon="comment" text={lf("Give Feedback")} onClick={this.showFeedbackDialog} /> : undefined}
         </sui.DropdownMenu>;
     }
 }
diff --git a/webapp/src/projects.tsx b/webapp/src/projects.tsx
index ccf9b62f8b72..588a93947a2f 100644
--- a/webapp/src/projects.tsx
+++ b/webapp/src/projects.tsx
@@ -316,7 +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} />
-            {targetTheme.giveFeedback ? <sui.Item role="menuitem" icon="comment" text={lf("Give Feedback")} onClick={this.showFeedbackDialog} /> : undefined}
+            {targetTheme.feedbackEnabled ? <sui.Item role="menuitem" icon="comment" text={lf("Give Feedback")} onClick={this.showFeedbackDialog} /> : undefined}
         </sui.DropdownMenu>;
     }
 }

From 83b45f8694f6005e5208bd5c07942851b74e4672 Mon Sep 17 00:00:00 2001
From: Sarah Rietkerk <sarahnrietkerk@gmail.com>
Date: Tue, 4 Feb 2025 14:43:52 -0800
Subject: [PATCH 28/32] move iframe init and posting code to helper function

---
 .../controls/Feedback/FeedbackEventListener.ts      | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/react-common/components/controls/Feedback/FeedbackEventListener.ts b/react-common/components/controls/Feedback/FeedbackEventListener.ts
index d433c8e9d366..0de67ce10d70 100644
--- a/react-common/components/controls/Feedback/FeedbackEventListener.ts
+++ b/react-common/components/controls/Feedback/FeedbackEventListener.ts
@@ -124,6 +124,12 @@ const feedbackCallbackEventListener = (event: MessageEvent<FeedbackRequestPayloa
 
 // ***************** Helper Functions *****************
 
+const getIFrameAndSend = (payload: FeedbackResponsePayloadType, url: string) => {
+    const iFrameElement = document.getElementById(FEEDBACK_FRAME_ID) as HTMLIFrameElement
+    if (iFrameElement) {
+        iFrameElement.contentWindow!.postMessage(payload, feedbackFrameUrl);
+    }
+}
 // 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.
@@ -139,8 +145,7 @@ const sendUpdateTheme = () => {
             baseTheme: currentTheme,
         },
     }
-    const iFrameElement = document.getElementById(FEEDBACK_FRAME_ID) as HTMLIFrameElement
-    iFrameElement!.contentWindow!.postMessage(response, feedbackFrameUrl)
+    getIFrameAndSend(response, feedbackFrameUrl);
 }
 
 
@@ -152,7 +157,5 @@ const sendFeedbackInitOptions = () => {
         event: 'InAppFeedbackInitOptions',
         data: initfeedbackOptions,
     }
-    response = JSON.parse(JSON.stringify(response))
-    const iFrameElement = document.getElementById(FEEDBACK_FRAME_ID) as HTMLIFrameElement
-    iFrameElement!.contentWindow!.postMessage(response, feedbackFrameUrl)
+    getIFrameAndSend(response, feedbackFrameUrl);
 }
\ No newline at end of file

From 980020af4cfeb388435f95e1c48bec81374e807f Mon Sep 17 00:00:00 2001
From: Sarah Rietkerk <sarahnrietkerk@gmail.com>
Date: Tue, 4 Feb 2025 14:45:50 -0800
Subject: [PATCH 29/32] use optional chaining for ondismiss call

---
 .../components/controls/Feedback/FeedbackEventListener.ts     | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/react-common/components/controls/Feedback/FeedbackEventListener.ts b/react-common/components/controls/Feedback/FeedbackEventListener.ts
index 0de67ce10d70..695dc78a8ec1 100644
--- a/react-common/components/controls/Feedback/FeedbackEventListener.ts
+++ b/react-common/components/controls/Feedback/FeedbackEventListener.ts
@@ -114,9 +114,7 @@ const feedbackCallbackEventListener = (event: MessageEvent<FeedbackRequestPayloa
                 break
             case 'InAppFeedbackDismissWithResult': //Invoked when feedback is dismissed - the big important one for us to be able to close the feedback modal
                 pxt.debug('InAppFeedbackDismissWithResult: ', payload.EventArgs);
-                if (feedbackCallbacks.onDismiss) {
-                    feedbackCallbacks.onDismiss();
-                }
+                feedbackCallbacks?.onDismiss?.();
                 break
         }
     }

From 3b6a3ffbb2b96a0ebd95d7c0ea16c6a43501e5ee Mon Sep 17 00:00:00 2001
From: Sarah Rietkerk <sarahnrietkerk@gmail.com>
Date: Tue, 4 Feb 2025 14:59:09 -0800
Subject: [PATCH 30/32] move current theme into send update theme function,
 update theme options

---
 .../components/controls/Feedback/FeedbackEventListener.ts    | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/react-common/components/controls/Feedback/FeedbackEventListener.ts b/react-common/components/controls/Feedback/FeedbackEventListener.ts
index 695dc78a8ec1..b4d7f65bd8b3 100644
--- a/react-common/components/controls/Feedback/FeedbackEventListener.ts
+++ b/react-common/components/controls/Feedback/FeedbackEventListener.ts
@@ -58,7 +58,6 @@ let themeOptions: ocv.IThemeOptions = {
 let initfeedbackOptions: ocv.IFeedbackInitOptions;
 let feedbackCallbacks: ocv.IFeedbackCallbackFunctions;
 let FEEDBACK_FRAME_ID: string;
-let currentTheme = '';
 
 // the function to initialize the feedback event listener
 // feedbackConfig: needs to be passed in as a prop because the things that
@@ -132,7 +131,8 @@ const getIFrameAndSend = (payload: FeedbackResponsePayloadType, url: string) =>
 // 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 = () => {
-    if (currentTheme == 'WindowsDark') {
+    let currentTheme = themeOptions.baseTheme;
+    if (currentTheme === 'WindowsDark') {
         currentTheme = 'WindowsLight'
     } else {
         currentTheme = 'WindowsDark'
@@ -143,6 +143,7 @@ const sendUpdateTheme = () => {
             baseTheme: currentTheme,
         },
     }
+    themeOptions.baseTheme = currentTheme;
     getIFrameAndSend(response, feedbackFrameUrl);
 }
 

From 943c493196c83a4ddb242338378df29c4450b376 Mon Sep 17 00:00:00 2001
From: Sarah Rietkerk <sarahnrietkerk@gmail.com>
Date: Tue, 4 Feb 2025 15:17:24 -0800
Subject: [PATCH 31/32] move questions for rating config to a function

---
 .../components/controls/Feedback/configs.ts   | 59 +++++++++++--------
 1 file changed, 33 insertions(+), 26 deletions(-)

diff --git a/react-common/components/controls/Feedback/configs.ts b/react-common/components/controls/Feedback/configs.ts
index 168217c7a301..c638da83b74e 100644
--- a/react-common/components/controls/Feedback/configs.ts
+++ b/react-common/components/controls/Feedback/configs.ts
@@ -17,6 +17,38 @@ export const baseConfig: ocv.IFeedbackConfig = {
     isThankYouPageDisabled: false,
 }
 
+export const createRatingQuestions = () => {
+  return {
+    questionInstruction: {
+      displayedStringInEnglish: "What did you think of this activity?",
+      displayedString: lf("What did you think of this activity?")
+    },
+    questionOptions: [
+      {
+        displayedStringInEnglish: "Boring",
+        displayedString: lf("Boring")
+      },
+      {
+        displayedStringInEnglish: "Not fun",
+        displayedString: lf("Not fun")
+      },
+      {
+        displayedStringInEnglish: "Kinda fun",
+        displayedString: lf("Kinda fun")
+      },
+      {
+        displayedStringInEnglish: "Fun",
+        displayedString: lf("Fun")
+      },
+      {
+        displayedStringInEnglish: "Super fun",
+        displayedString: lf("Super fun")
+      },
+    ],
+  }
+}
+
+
 export const ratingFeedbackConfig: ocv.IFeedbackConfig = {
     ...baseConfig,
     initialFeedbackType: ocv.FeedbackType.Unclassified,
@@ -25,32 +57,7 @@ export const ratingFeedbackConfig: ocv.IFeedbackConfig = {
       scenarioType: ocv.InAppFeedbackScenarioType.Custom,
       questionDetails: {
         questionUiType: ocv.InAppFeedbackQuestionUiType.Rating,
-        questionInstruction: {
-          displayedStringInEnglish: "What did you think of this activity?",
-          displayedString: lf("What did you think of this activity?")
-        },
-        questionOptions: [
-          {
-            displayedStringInEnglish: "Boring",
-            displayedString: lf("Boring")
-          },
-          {
-            displayedStringInEnglish: "Not fun",
-            displayedString: lf("Not fun")
-          },
-          {
-            displayedStringInEnglish: "Kinda fun",
-            displayedString: lf("Kinda fun")
-          },
-          {
-            displayedStringInEnglish: "Fun",
-            displayedString: lf("Fun")
-          },
-          {
-            displayedStringInEnglish: "Super fun",
-            displayedString: lf("Super fun")
-          },
-        ],
+        ...createRatingQuestions(),
         "questionUiBehaviour": [
           ocv.InAppFeedbackQuestionUiBehaviour.CommentNotRequired
         ]

From 36c823c921771dab43e600465f31136481011153 Mon Sep 17 00:00:00 2001
From: Sarah Rietkerk <sarahnrietkerk@gmail.com>
Date: Tue, 4 Feb 2025 16:05:41 -0800
Subject: [PATCH 32/32] move appid, frame url to apptheme

---
 localtypings/pxtarget.d.ts                            |  2 ++
 .../components/controls/Feedback/Feedback.tsx         |  4 ++--
 .../controls/Feedback/FeedbackEventListener.ts        | 11 +++++------
 react-common/components/controls/Feedback/configs.ts  |  2 --
 webapp/src/app.tsx                                    |  2 +-
 webapp/src/container.tsx                              |  3 ++-
 webapp/src/projects.tsx                               |  3 ++-
 7 files changed, 14 insertions(+), 13 deletions(-)

diff --git a/localtypings/pxtarget.d.ts b/localtypings/pxtarget.d.ts
index 8af54cda3610..999da49118ce 100644
--- a/localtypings/pxtarget.d.ts
+++ b/localtypings/pxtarget.d.ts
@@ -525,6 +525,8 @@ declare namespace pxt {
         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
         feedbackEnabled?: boolean; // allow feedback to be shown on a target
+        ocvAppId?: number; // the app id needed to attach to the OCV service
+        ocvFrameUrl?: string; // the base url for the OCV service
     }
 
     interface DownloadDialogTheme {
diff --git a/react-common/components/controls/Feedback/Feedback.tsx b/react-common/components/controls/Feedback/Feedback.tsx
index 8da668df0118..7ba3fb8dbc3c 100644
--- a/react-common/components/controls/Feedback/Feedback.tsx
+++ b/react-common/components/controls/Feedback/Feedback.tsx
@@ -1,7 +1,7 @@
 /// <reference path="../../../../localtypings/ocv.d.ts" />
 import { useEffect } from "react"
 import { initFeedbackEventListener, removeFeedbackEventListener } from "./FeedbackEventListener";
-import { baseConfig, ratingFeedbackConfig, appId, feedbackFrameUrl } from "./configs";
+import { baseConfig, ratingFeedbackConfig } from "./configs";
 import { Modal } from "../Modal";
 
 // both components require onClose because the feedback modal should close when the user clicks the "finish" button
@@ -63,7 +63,7 @@ export const FeedbackModal = (props: IFeedbackModalProps) => {
       <iframe
       title="feedback"
       id={frameId}
-      src={`${feedbackFrameUrl}/centrohost?appname=ocvfeedback&feature=host-ocv-inapp-feedback&platform=web&appId=${appId}#/hostedpage`}
+      src={`${pxt.appTarget.appTheme.ocvFrameUrl}/centrohost?appname=ocvfeedback&feature=host-ocv-inapp-feedback&platform=web&appId=${pxt.appTarget.appTheme.ocvAppId}#/hostedpage`}
       sandbox="allow-scripts allow-same-origin allow-forms allow-popups" />
     </Modal>
   )
diff --git a/react-common/components/controls/Feedback/FeedbackEventListener.ts b/react-common/components/controls/Feedback/FeedbackEventListener.ts
index b4d7f65bd8b3..e3e719f35e51 100644
--- a/react-common/components/controls/Feedback/FeedbackEventListener.ts
+++ b/react-common/components/controls/Feedback/FeedbackEventListener.ts
@@ -1,5 +1,4 @@
 /// <reference path="../../../../localtypings/ocv.d.ts" />
-import { appId, feedbackFrameUrl } from './configs';
 
 type FeedbackRequestEventArgsType = FeedbackInitOptionsEventPayload | FeedbackErrorEventPayload | FeedbackInitializationCompleteEventPayload | FeedbackOnSuccessEventPayload | FeedbackDismissWithResultEventPayload;
 
@@ -73,7 +72,7 @@ export const initFeedbackEventListener = (feedbackConfig: ocv.IFeedbackConfig, f
     window.addEventListener('message', feedbackCallbackEventListener);
     feedbackCallbacks = callbacks;
     initfeedbackOptions = {
-        appId: appId,
+        appId: pxt.appTarget.appTheme.ocvAppId,
         ageGroup: ocv.FeedbackAgeGroup.Undefined,
         authenticationType: ocv.FeedbackAuthenticationType.Unauthenticated,
         clientName: "MakeCode",
@@ -121,10 +120,10 @@ const feedbackCallbackEventListener = (event: MessageEvent<FeedbackRequestPayloa
 
 // ***************** Helper Functions *****************
 
-const getIFrameAndSend = (payload: FeedbackResponsePayloadType, url: string) => {
+const getIFrameAndSend = (payload: FeedbackResponsePayloadType) => {
     const iFrameElement = document.getElementById(FEEDBACK_FRAME_ID) as HTMLIFrameElement
     if (iFrameElement) {
-        iFrameElement.contentWindow!.postMessage(payload, feedbackFrameUrl);
+        iFrameElement.contentWindow!.postMessage(payload, pxt.appTarget.appTheme.ocvFrameUrl);
     }
 }
 // TODO
@@ -144,7 +143,7 @@ const sendUpdateTheme = () => {
         },
     }
     themeOptions.baseTheme = currentTheme;
-    getIFrameAndSend(response, feedbackFrameUrl);
+    getIFrameAndSend(response);
 }
 
 
@@ -156,5 +155,5 @@ const sendFeedbackInitOptions = () => {
         event: 'InAppFeedbackInitOptions',
         data: initfeedbackOptions,
     }
-    getIFrameAndSend(response, feedbackFrameUrl);
+    getIFrameAndSend(response);
 }
\ No newline at end of file
diff --git a/react-common/components/controls/Feedback/configs.ts b/react-common/components/controls/Feedback/configs.ts
index c638da83b74e..892ca9aa82c1 100644
--- a/react-common/components/controls/Feedback/configs.ts
+++ b/react-common/components/controls/Feedback/configs.ts
@@ -1,7 +1,5 @@
 /// <reference path="../../../../localtypings/ocv.d.ts" />
 
-export const appId = 50315;
-export const feedbackFrameUrl = 'https://admin-ignite.microsoft.com';
 
 export const baseConfig: ocv.IFeedbackConfig = {
     feedbackUiType: ocv.FeedbackUiType.NoSurface,
diff --git a/webapp/src/app.tsx b/webapp/src/app.tsx
index 8c273cf1023a..23b65fe25219 100644
--- a/webapp/src/app.tsx
+++ b/webapp/src/app.tsx
@@ -5282,7 +5282,7 @@ export class ProjectView
         const hideMenuBar = targetTheme.hideMenuBar || hideTutorialIteration || (isTabTutorial && pxt.appTarget.appTheme.embeddedTutorial) || pxt.shell.isTimeMachineEmbed();
         const isHeadless = simOpts && simOpts.headless;
         const selectLanguage = targetTheme.selectLanguage;
-        const feedbackEnabled = targetTheme.feedbackEnabled;
+        const feedbackEnabled = targetTheme.feedbackEnabled && targetTheme.ocvFrameUrl && targetTheme.ocvAppId;
         const showEditorToolbar = inEditor && !hideEditorToolbar && this.editor.hasEditorToolbar();
         const useSerialEditor = pxt.appTarget.serial && !!pxt.appTarget.serial.useEditor;
         const showSideDoc = sideDocs && this.state.sideDocsLoadUrl && !this.state.sideDocsCollapsed;
diff --git a/webapp/src/container.tsx b/webapp/src/container.tsx
index 3776fe498c05..aa20becba95d 100644
--- a/webapp/src/container.tsx
+++ b/webapp/src/container.tsx
@@ -319,6 +319,7 @@ export class SettingsMenu extends data.Component<SettingsMenuProps, SettingsMenu
         const showPairDevice = pxt.usb.isEnabled;
 
         const showCenterDivider = targetTheme.selectLanguage || targetTheme.highContrast || showGreenScreen || githubUser;
+        const showFeedbackOption = targetTheme.feedbackEnabled && targetTheme.ocvAppId && targetTheme.ocvFrameUrl;
 
         const simCollapseText = headless ? lf("Toggle the File Explorer") : lf("Toggle the simulator");
 
@@ -355,7 +356,7 @@ export class SettingsMenu extends data.Component<SettingsMenuProps, SettingsMenu
             {
                 // we always need a way to clear local storage, regardless if signed in or not
             }
-            {targetTheme.feedbackEnabled ? <sui.Item role="menuitem" icon="comment" text={lf("Give Feedback")} onClick={this.showFeedbackDialog} /> : undefined}
+            {showFeedbackOption ? <sui.Item role="menuitem" icon="comment" text={lf("Give Feedback")} onClick={this.showFeedbackDialog} /> : undefined}
         </sui.DropdownMenu>;
     }
 }
diff --git a/webapp/src/projects.tsx b/webapp/src/projects.tsx
index 588a93947a2f..e1b15dc92900 100644
--- a/webapp/src/projects.tsx
+++ b/webapp/src/projects.tsx
@@ -301,6 +301,7 @@ export class ProjectSettingsMenu extends data.Component<ProjectSettingsMenuProps
         const githubUser = !hasIdentity && this.getData("github:user") as UserInfo;
         const reportAbuse = pxt.appTarget.cloud && pxt.appTarget.cloud.sharing && pxt.appTarget.cloud.importing;
         const showDivider = targetTheme.selectLanguage || targetTheme.highContrast || githubUser;
+        const showFeedbackOption = targetTheme.feedbackEnabled && targetTheme.ocvFrameUrl && targetTheme.ocvAppId;
 
         return <sui.DropdownMenu role="menuitem" icon={'setting large'} title={lf("Settings")} className="item icon more-dropdown-menuitem" ref={ref => this.dropdown = ref}>
             {targetTheme.selectLanguage && <sui.Item icon='xicon globe' role="menuitem" text={lf("Language")} onClick={this.showLanguagePicker} />}
@@ -316,7 +317,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} />
-            {targetTheme.feedbackEnabled ? <sui.Item role="menuitem" icon="comment" text={lf("Give Feedback")} onClick={this.showFeedbackDialog} /> : undefined}
+            {showFeedbackOption ? <sui.Item role="menuitem" icon="comment" text={lf("Give Feedback")} onClick={this.showFeedbackDialog} /> : undefined}
         </sui.DropdownMenu>;
     }
 }