teacher tool: initial theming from target (#9830)

* initial theming from target * temp file rename * readme update * moar readme update * add reducer case * improved error logging
microsoft · Jan 25, 2024 · 27109ad · 27109ad
1 parent 8bea667
commit 27109ad
Show file tree

Hide file tree

Showing 11 changed files with 212 additions and 113 deletions.
diff --git a/teachertool/README.md b/teachertool/README.md
@@ -6,9 +6,10 @@ To test the Teacher Tool locally:
 
 1. Ensure your pxt repo is up to date and has been built recently.
 2. In a command shell, in the `pxt` repo, cd into the `teachertool` folder and start the Teacher Tool dev server: `npm run start`. This will *not* open a browser window.
-3. In another command shell, in the `pxt-arcade` repo, start the Arcade dev server: `pxt serve --rebundle`. This will open the Arcade webapp in a browser.
+3. In another command shell, in the target repo (e.g. `pxt-arcade` or `pxt-microbit`), start the pxt dev server: `pxt serve --rebundle --noauth`. This will open the editor webapp in a browser.
+   1. **Note the `--noauth` parameter.** It is important to include this option when running on localhost in order to download certain required startup files from the localhost pxt server.
 
-Requests to the `/teachertool` endpoint will be routed to the Teacher Tool dev server.
+Requests to the `/eval` endpoint will be routed to the Teacher Tool dev server.
 
 Debug and step through Teacher Tool code using the browser dev tools (F12 to open).
 

diff --git a/teachertool/public/index.html b/teachertool/public/index.html
@@ -38,7 +38,5 @@
     <script type="text/javascript" src="/blb/pxtblocks.js"></script>
 
     <div id="root"></div>
-
-    <!-- @include footer.html -->
   </body>
 </html>
diff --git a/teachertool/src/App.tsx b/teachertool/src/App.tsx
@@ -11,28 +11,40 @@ import { makeNotification } from "./utils";
 import DebugInput from "./components/DebugInput";
 import { MakeCodeFrame } from "./components/MakecodeFrame";
 import EvalResultDisplay from "./components/EvalResultDisplay";
-
+import { downloadTargetConfigAsync } from "./services/ackendRequests";
+import * as Actions from "./state/actions";
+import { logDebug } from "./services/loggingService";
 
 function App() {
     const { state, dispatch } = useContext(AppStateContext);
-    const [didNotify, setDidNotify] = useState(false);
+    const [inited, setInited] = useState(false);
 
     const ready = usePromise(AppStateReady, false);
 
     useEffect(() => {
-        // Init subsystems.
-        NotificationService.initialize();
-    }, [ready]);
+        if (ready && !inited) {
+            NotificationService.initialize();
+            Promise.resolve().then(async () => {
+                const cfg = await downloadTargetConfigAsync();
+                dispatch(Actions.setTargetConfig(cfg || {}));
+                pxt.BrowserUtils.initTheme();
+                // TODO: Remove this. Delay app init to expose any startup race conditions.
+                setTimeout(() => {
+                    // Test notification
+                    postNotification(makeNotification("🎓", 2000));
+                    setInited(true);
 
-    // Test notification
-    useEffect(() => {
-        if (ready && !didNotify) {
-            postNotification(makeNotification("🎓", 2000));
-            setDidNotify(true);
+                    logDebug("App initialized");
+                }, 10);
+            });
         }
-    }, [ready]);
+    }, [ready, inited]);
 
-    return (
+    return !inited ? (
+        <div className="ui active dimmer">
+            <div className="ui large main loader msft"></div>
+        </div>
+    ) : (
         <div className="app-container">
             <HeaderBar />
             <div className="inner-app-container">

diff --git a/teachertool/src/components/DebugInput.tsx b/teachertool/src/components/DebugInput.tsx
@@ -37,7 +37,7 @@ const DebugInput: React.FC<IProps> = ({}) => {
                     rows={20}
                     onChange={setRubric} />
             </div>
-            <Button id="evaluateSingleProjectButton" className="primary" onClick={evaluate} title={"Evaluate"} label={lf("Evaluate")} />
+            <Button id="evaluateSingleProjectButton" className="ui button primary" onClick={evaluate} title={"Evaluate"} label={lf("Evaluate")} />
         </div>
     )
 

diff --git a/teachertool/src/components/HeaderBar.tsx b/teachertool/src/components/HeaderBar.tsx
@@ -3,67 +3,112 @@ import * as React from "react";
 import { Button } from "react-common/components/controls/Button";
 import { MenuBar } from "react-common/components/controls/MenuBar";
 
-interface HeaderBarProps {
-}
+interface HeaderBarProps {}
 
-export class HeaderBar extends React.Component<HeaderBarProps> {
-    protected reportAbuseUrl = "https://github.com/contact/report-content";
+export const HeaderBar: React.FC<HeaderBarProps> = () => {
+    const appTheme = pxt.appTarget?.appTheme;
 
-    protected getOrganizationLogo(targetTheme: pxt.AppTheme) {
-        const logoUrl = targetTheme.organizationWideLogo;
-        return <div className="header-logo">
-            {logoUrl
-                ? <img src={logoUrl} alt={lf("{0} Logo", targetTheme.organization)}/>
-                : <span className="name">{targetTheme.organization}</span>}
-        </div>
-    }
+    const brandIconClick = () => {};
 
-    protected getTargetLogo(targetTheme: pxt.AppTheme) {
-        return <div className={`ui item logo brand noclick}`}>
-            {targetTheme.useTextLogo
-                ? [<span className="name" key="org-name" onClick={this.onHomeClicked}>{targetTheme.organizationText}</span>,
-                   <span className="name-short" key="org-name-short" onClick={this.onHomeClicked}>{targetTheme.organizationShortText || targetTheme.organizationText}</span>]
-                : (targetTheme.logo || targetTheme.portraitLogo
-                    ? <img className="logo" src={targetTheme.logo || targetTheme.portraitLogo} alt={lf("{0} Logo", targetTheme.boardName)}/>
-                    : <span className="name"> {targetTheme.boardName}</span>)
-            }
-        </div>
-    }
+    const getOrganizationLogo = () => {
+        return (
+            <div className="ui item logo organization">
+                {appTheme.organizationWideLogo || appTheme.organizationLogo ? (
+                    <img
+                        className={`ui logo`}
+                        src={
+                            appTheme.organizationWideLogo ||
+                            appTheme.organizationLogo
+                        }
+                        alt={lf("{0} Logo", appTheme.organization)}
+                    />
+                ) : (
+                    <span className="name">{appTheme.organization}</span>
+                )}
+            </div>
+        );
+    };
 
-    onHomeClicked = () => {
+    const getTargetLogo = () => {
+        return (
+            <div
+                aria-label={lf("{0} Logo", appTheme.boardName)}
+                role="menuitem"
+                className={`ui item logo brand mobile hide`}
+                onClick={brandIconClick}
+            >
+                {appTheme.useTextLogo ? (
+                    [
+                        <span className="name" key="org-name">
+                            {appTheme.organizationText}
+                        </span>,
+                        <span className="name-short" key="org-name-short">
+                            {appTheme.organizationShortText ||
+                                appTheme.organizationText}
+                        </span>,
+                    ]
+                ) : appTheme.logo || appTheme.portraitLogo ? (
+                    <img
+                        className={`ui ${
+                            appTheme.logoWide ? "small" : ""
+                        } logo`}
+                        src={appTheme.logo || appTheme.portraitLogo}
+                        alt={lf("{0} Logo", appTheme.boardName)}
+                    />
+                ) : (
+                    <span className="name">{appTheme.boardName}</span>
+                )}
+            </div>
+        );
+    };
+
+    const onHomeClicked = () => {
         pxt.tickEvent("teacherTool.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);
+        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) {
+            if (
+                pxt.appTarget.appTheme.homeUrl?.lastIndexOf("/") ===
+                pxt.appTarget.appTheme.homeUrl?.length - 1
+            ) {
                 rel = rel.substr(1);
             }
             window.open(pxt.appTarget.appTheme.homeUrl + rel);
-        }
-        else {
+        } else {
             window.open(pxt.appTarget.appTheme.homeUrl);
         }
-    }
+    };
 
-    render() {
-        const hasIdentity = pxt.auth.hasIdentity();
+    return (
+        <header className="menubar" role="banner">
+            <MenuBar
+                className={`ui menu ${
+                    appTheme?.invertedMenu ? `inverted` : ""
+                } header`}
+                ariaLabel={lf("Header")}
+            >
+                <div className="left menu">
+                    {getOrganizationLogo()}
+                    {getTargetLogo()}
+                </div>
 
-        const appTheme = pxt.appTarget?.appTheme;
+                <div className="spacer" />
 
-        return <MenuBar className="header" ariaLabel={lf("Header")}>
-            <div className="header-left">
-                {this.getOrganizationLogo(appTheme)}
-                {this.getTargetLogo(appTheme)}
-            </div>
-
-            <div className="spacer" />
-
-            <div className="header-right">
-                <Button className="menu-button" leftIcon="fas fa-home large" title={lf("Return to the editor homepage")} onClick={this.onHomeClicked}/>
-            </div>
-        </MenuBar>
-    }
-}
+                <div className="header-right">
+                    <Button
+                        className="menu-button"
+                        leftIcon="fas fa-home large"
+                        title={lf("Return to the editor homepage")}
+                        onClick={onHomeClicked}
+                    />
+                </div>
+            </MenuBar>
+        </header>
+    );
+};
 
-export default HeaderBar;
+export default HeaderBar;
diff --git a/teachertool/src/services/BackendRequests.ts → teachertool/src/services/ackendRequests.ts b/teachertool/src/services/BackendRequests.ts → teachertool/src/services/ackendRequests.ts
@@ -1,6 +1,8 @@
-export const getProjectTextAsync = async (
+import { logError } from "./loggingService";
+
+export async function getProjectTextAsync(
     projectId: string
-): Promise<pxt.Cloud.JsonText | undefined> => {
+): Promise<pxt.Cloud.JsonText | undefined> {
     try {
         const projectTextUrl = `${pxt.Cloud.apiRoot}/${projectId}/text`;
         const response = await fetch(projectTextUrl);
@@ -10,14 +12,14 @@ export const getProjectTextAsync = async (
             const projectText = await response.json();
             return projectText;
         }
-    } catch (error) {
-        console.error(error);
+    } catch (e) {
+        logError("getProjectTextAsync", e);
     }
-};
+}
 
-export const getProjectMetaAsync = async (
+export async function getProjectMetaAsync(
     projectId: string
-): Promise<pxt.Cloud.JsonScript | undefined> => {
+): Promise<pxt.Cloud.JsonScript | undefined> {
     try {
         const projectMetaUrl = `${pxt.Cloud.apiRoot}/${projectId}`;
         const response = await fetch(projectMetaUrl);
@@ -27,7 +29,17 @@ export const getProjectMetaAsync = async (
             const projectMeta = await response.json();
             return projectMeta;
         }
-    } catch (error) {
-        console.error(error);
+    } catch (e) {
+        logError("getProjectMetaAsync", e);
+    }
+}
+
+export async function downloadTargetConfigAsync(): Promise<
+    pxt.TargetConfig | undefined
+> {
+    try {
+        return await pxt.targetConfigAsync();
+    } catch (e) {
+        logError("downloadTargetConfigAsync", e);
     }
-};
+}
diff --git a/teachertool/src/services/loggingService.ts b/teachertool/src/services/loggingService.ts
@@ -1,24 +1,45 @@
-const formatMessageForConsole = (message: string) => {
+const timestamp = () => {
     const time = new Date();
-    return `[${time.getHours()}:${time.getMinutes()}:${time.getSeconds()}] ${message}`;
-}
+    return `[${time.getHours()}:${time.getMinutes()}:${time.getSeconds()}]`;
+};
 
 const formatName = (name: string) => {
     return name.toLowerCase().replace(/ /g, "_");
-}
+};
 
-export const logError = (name: string, details: string) => {
-    pxt.tickEvent("teachertool.error", { name: formatName(name), message: details });
-    console.error(formatMessageForConsole(`${name}: ${details}`));
-}
+export const logError = (
+    errorCode: string,
+    message?: any,
+    data: pxt.Map<string | number> = {}
+) => {
+    errorCode = formatName(errorCode);
+    let dataObj = { ...data };
+    if (message) {
+        if (typeof message === "object") {
+            dataObj = { ...dataObj, ...message };
+            // Look for non-enumerable properties found on Error objects
+            ["message", "stack", "name"].forEach(key => {
+                if (message[key]) {
+                    dataObj[key] = message[key];
+                }
+            });
+        } else {
+            dataObj.message = message;
+        }
+    }
+    pxt.tickEvent("teachertool.error", {
+        ...dataObj,
+        errorCode,
+    });
+    console.error(timestamp(), errorCode, dataObj);
+};
 
-export const logInfo = (name: string, message: string) => {
-    pxt.tickEvent(`teachertool.${formatName(name)}`, { message: message });
-    console.log(formatMessageForConsole(message));
-}
+export const logInfo = (message: any) => {
+    console.log(timestamp(), message);
+};
 
-export const logDebug = (message: string) => {
+export const logDebug = (message: any) => {
     if (pxt.BrowserUtils.isLocalHost() || pxt.options.debug) {
-        console.log(formatMessageForConsole(message));
+        console.log(timestamp(), message);
     }
-}
+};