Add unsupported notification if accessing Code Eval from non-micro:bi…

…t targets (#10357) * Disallow web crawlers from going to --eval * Unify places that need a "home URL" * Show unsupported experience modal in teacher tool if in the wrong target
microsoft · Jan 30, 2025 · d874027 · d874027
1 parent edf6971
commit d874027
Show file tree

Hide file tree

Showing 9 changed files with 78 additions and 42 deletions.
diff --git a/common-docs/robots.txt b/common-docs/robots.txt
@@ -1,5 +1,6 @@
-# robots.txt for PXT sites
+# robots.txt for PXT sites (except micro:bit)
 
-# Disable crawling in /v2 path for micro:bit
+# Disable crawling in /v2 & /--eval
 User-agent: *
-Disallow: /v2
+Disallow: /v2
+Disallow: /--eval
diff --git a/localtypings/pxtarget.d.ts b/localtypings/pxtarget.d.ts
@@ -441,6 +441,7 @@ declare namespace pxt {
         browserDbPrefixes?: { [majorVersion: number]: string }; // Prefix used when storing projects in the DB to allow side-by-side projects of different major versions
         editorVersionPaths?: { [majorVersion: number]: string }; // A map of major editor versions to their corresponding paths (alpha, v1, etc.)
         experiments?: string[]; // list of experiment ids, also enables this feature
+        supportedExperiences?: string[]; // list of supported "experiences" (separate CRAs, like code eval)
         chooseBoardOnNewProject?: boolean; // when multiple boards are support, show board dialog on "new project"
         bluetoothUartConsole?: boolean; // pair with BLE UART services and pipe console output
         bluetoothUartFilters?: { name?: string; namePrefix?: string; }[]; // device name prefix -- required

diff --git a/multiplayer/src/components/HeaderBar.tsx b/multiplayer/src/components/HeaderBar.tsx
@@ -52,21 +52,9 @@ export default function Render() {
     const onHomeClicked = () => {
         pxt.tickEvent("mp.home");
 
-        // relprefix looks like "/beta---", need to chop off the hyphens and slash
-        let rel = pxt.webConfig?.relprefix.substr(
-            0,
-            pxt.webConfig.relprefix.length - 3
-        );
-        if (pxt.appTarget.appTheme.homeUrl && rel) {
-            if (
-                pxt.appTarget.appTheme.homeUrl?.lastIndexOf("/") ===
-                pxt.appTarget.appTheme.homeUrl?.length - 1
-            ) {
-                rel = rel.substr(1);
-            }
-            window.open(pxt.appTarget.appTheme.homeUrl + rel, "_self");
-        } else {
-            window.open(pxt.appTarget.appTheme.homeUrl, "_self");
+        const homeUrl = pxt.U.getHomeUrl();
+        if (homeUrl) {
+            window.open(homeUrl, "_self");
         }
     };
 

diff --git a/pxtlib/util.ts b/pxtlib/util.ts
@@ -1833,6 +1833,27 @@ namespace ts.pxtc.Util {
     export function fromUTF8Array(s: Uint8Array) {
         return (new TextDecoder()).decode(s);
     }
+
+    export function getHomeUrl() {
+        // relprefix looks like "/beta---", need to chop off the hyphens and slash
+        let rel = pxt.webConfig?.relprefix.substr(0, pxt.webConfig.relprefix.length - 3);
+        if (pxt.appTarget.appTheme.homeUrl && rel) {
+            if (pxt.appTarget.appTheme.homeUrl?.lastIndexOf("/") === pxt.appTarget.appTheme.homeUrl?.length - 1) {
+                rel = rel.substr(1);
+            }
+            return pxt.appTarget.appTheme.homeUrl + rel;
+        }
+        else {
+            return pxt.appTarget.appTheme.homeUrl;
+        }
+    }
+
+    export function isExperienceSupported(experienceId: string) {
+        const supportedExps = pxt.appTarget?.appTheme?.supportedExperiences?.map((e) => e.toLocaleLowerCase());
+        const cleanedExpId = experienceId.toLocaleLowerCase();
+        const isSupported = supportedExps?.includes(cleanedExpId) ?? false;
+        return isSupported;
+    }
 }
 
 namespace ts.pxtc.BrowserImpl {

diff --git a/react-common/components/experiences/UnsupportedExperienceModal.tsx b/react-common/components/experiences/UnsupportedExperienceModal.tsx
@@ -0,0 +1,30 @@
+/// <reference path="../types.d.ts" />
+
+import { Modal, ModalAction } from "../controls/Modal";
+
+/**
+ * A modal that displays a message when the specified experience is not supported
+ * by the current target. Contains a button to return to the home page and no dismiss.
+ */
+export const UnsupportedExperienceModal = () => {
+    function fireGoBackTick() {
+        pxt.tickEvent("unsupportedexperience.goback");
+    }
+
+    const homeUrl = pxt.U.getHomeUrl();
+
+    const goBackAction: ModalAction = {
+        label: lf("Go Back"),
+        onClick: fireGoBackTick,
+        className: "primary",
+        url: homeUrl
+    }
+
+    return (
+        <Modal title={lf("Unsupported Experience")} hideDismissButton={true} actions={[goBackAction]}>
+            <div className="ui unsupported-modal-content">
+                <p>{lf("The current experience is not supported in {0}.", pxt.appTarget.nickname || pxt.appTarget.id)}</p>
+            </div>
+        </Modal>
+    );
+};
diff --git a/skillmap/src/components/HeaderBar.tsx b/skillmap/src/components/HeaderBar.tsx
@@ -208,18 +208,10 @@ export class HeaderBarImpl extends React.Component<HeaderBarProps> {
     onHomeClicked = () => {
         tickEvent("skillmap.home");
 
-        // relprefix looks like "/beta---", need to chop off the hyphens and slash
-        let rel = pxt.webConfig?.relprefix.substr(0, pxt.webConfig.relprefix.length - 3);
-        if (pxt.appTarget.appTheme.homeUrl && rel) {
-            if (pxt.appTarget.appTheme.homeUrl?.lastIndexOf("/") === pxt.appTarget.appTheme.homeUrl?.length - 1) {
-                rel = rel.substr(1);
-            }
-            window.open(pxt.appTarget.appTheme.homeUrl + rel);
-        }
-        else {
-            window.open(pxt.appTarget.appTheme.homeUrl);
+        const homeUrl = pxt.U.getHomeUrl();
+        if (homeUrl) {
+            window.open(homeUrl);
         }
-
     }
 
     onBugClicked = () => {
@@ -275,4 +267,4 @@ const mapDispatchToProps = {
     dispatchShowSelectLanguage
 };
 
-export const HeaderBar = connect(mapStateToProps, mapDispatchToProps)(HeaderBarImpl);
+export const HeaderBar = connect(mapStateToProps, mapDispatchToProps)(HeaderBarImpl);
diff --git a/teachertool/src/App.tsx b/teachertool/src/App.tsx
@@ -19,12 +19,14 @@ import { SignedOutPanel } from "./components/SignedOutPanel";
 import * as authClient from "./services/authClient";
 import { ErrorCode } from "./types/errorCode";
 import { loadProjectMetadataAsync } from "./transforms/loadProjectMetadataAsync";
-import { Ticks } from "./constants";
+import { Constants, Ticks } from "./constants";
+import { UnsupportedExperienceModal } from "react-common/components/experiences/UnsupportedExperienceModal";
 
 export const App = () => {
     const { state, dispatch } = useContext(AppStateContext);
     const [inited, setInited] = useState(false);
     const [authCheckComplete, setAuthCheckComplete] = useState(false);
+    const [isSupported, setIsSupported] = useState<Boolean | undefined>(undefined);
 
     const ready = usePromise(AppStateReady, false);
 
@@ -74,11 +76,15 @@ export const App = () => {
         checkAuthAsync();
     }, []);
 
+    useEffect(() => {
+        setIsSupported(pxt.U.isExperienceSupported(Constants.ExperienceId));
+    }, []);
+
     return !inited || !authCheckComplete ? (
         <div className="ui active dimmer">
             <div className="ui large main loader msft"></div>
         </div>
-    ) : (
+    ) : isSupported ? (
         <>
             <HeaderBar />
             {state.userProfile ? <MainPanel /> : <SignedOutPanel />}
@@ -89,5 +95,7 @@ export const App = () => {
             <Toasts />
             <ScreenReaderAnnouncer />
         </>
+    ) : (
+        <UnsupportedExperienceModal />
     );
 };
diff --git a/teachertool/src/constants.ts b/teachertool/src/constants.ts
@@ -103,6 +103,7 @@ export namespace Ticks {
 
 namespace Misc {
     export const LearnMoreLink = "https://makecode.microbit.org/teachertool"; // TODO: Replace with golink or aka.ms link
+    export const ExperienceId = "code-eval";
 }
 
 export const Constants = Object.assign(Misc, { Strings, Ticks });
diff --git a/tutorialtool/src/components/HeaderBar.tsx b/tutorialtool/src/components/HeaderBar.tsx
@@ -80,15 +80,9 @@ export const HeaderBar: React.FC<HeaderBarProps> = () => {
     const onHomeClicked = () => {
         pxt.tickEvent(Ticks.HomeLink);
 
-        // relprefix looks like "/beta---", need to chop off the hyphens and slash
-        let rel = pxt.webConfig?.relprefix.substr(0, pxt.webConfig.relprefix.length - 3);
-        if (pxt.appTarget.appTheme.homeUrl && rel) {
-            if (pxt.appTarget.appTheme.homeUrl?.lastIndexOf("/") === pxt.appTarget.appTheme.homeUrl?.length - 1) {
-                rel = rel.substr(1);
-            }
-            window.open(pxt.appTarget.appTheme.homeUrl + rel);
-        } else {
-            window.open(pxt.appTarget.appTheme.homeUrl);
+        const homeUrl = pxt.U.getHomeUrl();
+        if (homeUrl) {
+            window.open(homeUrl);
         }
     };
 
@@ -132,4 +126,4 @@ const ProfileMenu: React.FC = () => {
             }
         </>
     )
-}
+}