move appid, frame url to apptheme

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 {

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>
   )

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);
 }

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,

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;

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>;
     }
 }

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>;
     }
 }