Merge branch 'master' of https://github.com/microsoft/pxt into thspar…

…ks/teachertool/rework_catalog_modal

.gitignore

@@ -7,6 +7,7 @@ webapp/public/authcode.html
 webapp/public/multiplayer.html
 webapp/public/kiosk.html
 webapp/public/teachertool.html
+webapp/public/tutorialtool.html
 localtypings/blockly.d.ts
 node_modules
 *.sw?

cli/webapps-config.json

@@ -12,6 +12,12 @@
             "localServeWebConfigUrl": false,
             "localServeEndpoint": "eval"
         },
+        {
+            "name": "tutorialtool",
+            "buildCss": false,
+            "localServeWebConfigUrl": false,
+            "localServeEndpoint": "tt"
+        },
         {
             "name": "skillmap",
             "buildCss": true,

gulpfile.js

@@ -590,6 +590,12 @@ const kiosk = createWebappTasks("kiosk");
 
 const teacherTool = createWebappTasks("teachertool");
 
+/********************************************************
+                      Tutorial Tool
+*********************************************************/
+
+const tutorialTool = createWebappTasks("tutorialtool");
+
 /********************************************************
                  Webapp build wrappers
 *********************************************************/
@@ -604,7 +610,7 @@ const maybeUpdateWebappStrings = () => {
 
 const maybeBuildWebapps = () => {
     if (!shouldBuildWebapps()) return noop;
-    return gulp.parallel(skillmap, authcode, multiplayer, kiosk, teacherTool);
+    return gulp.parallel(skillmap, authcode, multiplayer, kiosk, teacherTool, tutorialTool);
 }
 
 /********************************************************

pxtlib/shell.ts

@@ -95,5 +95,4 @@ namespace pxt.shell {
     export function setToolboxAnimation(): void {
         pxt.storage.setLocal("toolboxanimation", "1");
     }
-
 }

pxtservices/backendRequests.ts

@@ -0,0 +1,64 @@
+import { ErrorCode } from "./constants";
+import { logError } from "./loggingService";
+
+export async function fetchJsonDocAsync<T = any>(url: string): Promise<T | undefined> {
+    try {
+        const response = await fetch(url, {
+            cache: "no-cache",
+        });
+        if (!response.ok) {
+            throw new Error("Unable to fetch the json file");
+        } else {
+            const json = await response.json();
+            return json;
+        }
+    } catch (e) {
+        logError(ErrorCode.fetchJsonDocAsync, e);
+    }
+
+    return undefined;
+}
+
+export async function getProjectTextAsync(projectId: string): Promise<pxt.Cloud.JsonText | undefined> {
+    try {
+        const projectTextUrl = `${pxt.Cloud.apiRoot}/${projectId}/text`;
+        const response = await fetch(projectTextUrl);
+        if (!response.ok) {
+            throw new Error("Unable to fetch the project details");
+        } else {
+            const projectText = await response.json();
+            return projectText;
+        }
+    } catch (e) {
+        logError(ErrorCode.getProjectTextAsync, e);
+    }
+
+    return undefined;
+}
+
+export async function getProjectMetaAsync(projectId: string): Promise<pxt.Cloud.JsonScript | undefined> {
+    try {
+        const projectMetaUrl = `${pxt.Cloud.apiRoot}/${projectId}`;
+        const response = await fetch(projectMetaUrl);
+        if (!response.ok) {
+            throw new Error("Unable to fetch the project meta information");
+        } else {
+            const projectMeta = await response.json();
+            return projectMeta;
+        }
+    } catch (e) {
+        logError(ErrorCode.getProjectMetaAsync, e);
+    }
+
+    return undefined;
+}
+
+export async function downloadTargetConfigAsync(): Promise<pxt.TargetConfig | undefined> {
+    try {
+        return await pxt.targetConfigAsync();
+    } catch (e) {
+        logError(ErrorCode.downloadTargetConfigAsync, e);
+    }
+
+    return undefined;
+}

pxtservices/constants.ts

@@ -0,0 +1,6 @@
+export enum ErrorCode {
+    downloadTargetConfigAsync = "downloadTargetConfigAsync",
+    fetchJsonDocAsync = "fetchJsonDocAsync",
+    getProjectTextAsync = "getProjectTextAsync",
+    getProjectMetaAsync = "getProjectMetaAsync",
+}

pxtservices/loggingService.ts

@@ -0,0 +1,49 @@
+let tickEvent = "pxt.error";
+
+const timestamp = () => {
+    const time = new Date();
+    const hours = padTime(time.getHours());
+    const minutes = padTime(time.getMinutes());
+    const seconds = padTime(time.getSeconds());
+
+    return `[${hours}:${minutes}:${seconds}]`;
+};
+
+const padTime = (time: number) => ("0" + time).slice(-2);
+
+export const logError = (errorCode: string, message?: any, data: pxt.Map<string | number> = {}) => {
+    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(tickEvent, {
+        ...dataObj,
+        errorCode,
+    });
+    console.error(timestamp(), errorCode, dataObj);
+};
+
+export const logInfo = (message: any) => {
+    console.log(timestamp(), message);
+};
+
+export const logDebug = (message: any, data?: any) => {
+    if (pxt.BrowserUtils.isLocalHost() || pxt.options.debug) {
+        console.log(timestamp(), message, data);
+    }
+};
+
+
+export const setTickEvent = (event: string) => {
+    tickEvent = event;
+}

react-common/components/profile/SignInButton.tsx

@@ -0,0 +1,20 @@
+import * as React from "react";
+import { Button } from "../controls/Button";
+import { classList } from "../util";
+
+interface IProps {
+    onSignInClick: () => void;
+    className?: string;
+}
+
+export const SignInButton: React.FC<IProps> = ({ onSignInClick, className }) => {
+    return (
+        <Button
+            className={classList(className, "sign-in-button")}
+            rightIcon="xicon cloud-user large"
+            title={lf("Sign In")}
+            label={lf("Sign In")}
+            onClick={onSignInClick}
+        />
+    );
+};

react-common/components/profile/UserAvatarDropdown.tsx

@@ -0,0 +1,59 @@
+import * as React from "react";
+import { MenuDropdown, MenuItem } from "../controls/MenuDropdown";
+import { classList } from "../util";
+
+interface IProps {
+    userProfile: pxt.auth.UserProfile;
+    title: string;
+
+    onSignOutClick?: () => void;
+    className?: string;
+    items?: MenuItem[];
+}
+
+export const UserAvatarDropdown: React.FC<IProps> = (props) => {
+    const { userProfile, title, items, onSignOutClick, className } = props;
+
+    const avatarUrl = userProfile?.idp?.pictureUrl ?? encodedAvatarPic(userProfile);
+
+    const avatarElem = <UserAvatar avatarPicUrl={avatarUrl} />;
+    const initialsElem = <UserInitials userProfile={userProfile} />;
+
+    const allItems = items ? items.slice() : [];
+
+    if (onSignOutClick) {
+        allItems.unshift({
+            id: "signout",
+            title: lf("Sign Out"),
+            label: lf("Sign Out"),
+            onClick: onSignOutClick
+        });
+    }
+
+    return (
+        <MenuDropdown
+            className={classList("user-avatar-dropdown", className)}
+            title={title}
+            label={avatarUrl ? avatarElem : initialsElem}
+            items={allItems}
+        />
+    );
+};
+
+const UserInitials = (props: { userProfile: pxt.auth.UserProfile }) => (
+    <span>
+        <div className="user-avatar-initials" aria-hidden="true">{pxt.auth.userInitials(props.userProfile)}</div>
+    </span>
+);
+
+const UserAvatar = (props: { avatarPicUrl: string }) => (
+    <div className="user-avatar-image">
+        <img src={props.avatarPicUrl} alt={lf("Profile Image")} referrerPolicy="no-referrer" aria-hidden="true" />
+    </div>
+);
+
+function encodedAvatarPic(user: pxt.auth.UserProfile): string {
+    const type = user?.idp?.picture?.mimeType;
+    const encodedImg = user?.idp?.picture?.encoded;
+    return type && encodedImg ? `data:${type};base64,${encodedImg}` : "";
+}

react-common/styles/profile/SignInButton.less

@@ -0,0 +1,19 @@
+.common-button.sign-in-button {
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+
+    .common-button-label {
+        font-family: Segoe UI, Tahoma, Geneva, Verdana;
+        font-weight: 500;
+    }
+}
+
+@media @tabletAndBelow {
+    .common-button.sign-in-button {
+        padding-left: 0.25rem;
+
+        .common-button-label {
+            display: none;
+        }
+    }
+}

react-common/styles/profile/UserAvatarDropdown.less

@@ -0,0 +1,25 @@
+.user-avatar-image {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+
+    img {
+        border: solid 2px @buttonMenuTextColor;
+        border-radius: 100%;
+        width: 2.5rem;
+        height: 2.5rem;
+    }
+}
+
+.user-avatar-initials {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: solid 2px @buttonMenuTextColor;
+    border-radius: 100%;
+    width: 2.5rem;
+    height: 2.5rem;
+
+    background-color: var(--pxt-headerbar-accent);
+}

react-common/styles/profile/profile.less

@@ -1,3 +1,6 @@
+@import "./SignInButton.less";
+@import "./UserAvatarDropdown.less";
+
 .user-profile {
     display: flex;
     flex-direction: row;

teachertool/src/components/MakecodeFrame.tsx

@@ -1,7 +1,7 @@
 /// <reference path="../../../localtypings/pxteditor.d.ts" />
 
 import css from "./styling/MakeCodeFrame.module.scss";
-import { useContext } from "react";
+import { useContext, useState } from "react";
 import { setEditorRef } from "../services/makecodeEditorService";
 import { AppStateContext } from "../state/appStateContext";
 import { getEditorUrl } from "../utils";
@@ -11,6 +11,8 @@ interface IProps {}
 
 export const MakeCodeFrame: React.FC<IProps> = () => {
     const { state: teacherTool } = useContext(AppStateContext);
+    const [ frameId ] = useState(pxt.Util.guidGen());
+
 
     function createIFrameUrl(shareId: string): string {
         const editorUrl: string = pxt.BrowserUtils.isLocalHost()
@@ -22,7 +24,7 @@ export const MakeCodeFrame: React.FC<IProps> = () => {
             url = editorUrl.substr(0, editorUrl.length - 1);
         }
         const shareSection = shareId ? `#pub:${shareId}` : "";
-        url += `?controller=1&teachertool=1&readonly=1&ws=mem&nocookiebanner=1${shareSection}`;
+        url += `?controller=1&teachertool=1&readonly=1&ws=mem&nocookiebanner=1&frameid=${frameId}${shareSection}`;
         return url;
     }
 

tutorialtool/.env

@@ -0,0 +1,3 @@
+DISABLE_ESLINT_PLUGIN=true
+GENERATE_SOURCEMAP=false
+BROWSER=none

tutorialtool/.eslintrc.js

@@ -0,0 +1,6 @@
+module.exports = {
+    "parserOptions": {
+        "project": "tutorialtool/tsconfig.json",
+    },
+    "ignorePatterns": ["tests/**/*.spec.ts", "public/**/*", "build/**/*"]
+}

tutorialtool/.gitignore

@@ -0,0 +1,3 @@
+.vscode
+build
+!package-lock.json

tutorialtool/.prettierrc

@@ -0,0 +1,6 @@
+{
+    "arrowParens": "avoid",
+    "semi": true,
+    "tabWidth": 4,
+    "printWidth":120
+}

tutorialtool/README.md

@@ -0,0 +1,30 @@
+# Tutorial tool
+
+## Localhost testing
+
+To test the Tutorial 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 `tutorialtool` folder and start the Tutorial Tool dev server: `npm run start`. This will *not* open a browser window.
+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 `/tt` endpoint will be routed to the Tutorial Tool dev server.
+
+Debug and step through Tutorial Tool code using the browser dev tools (F12 to open).
+
+
+## Test in staging environment
+
+1. In the pxt repo, run `gulp` to ensure production Tutorial tool is built.
+2. In a browser, go to `https://staging.pxt.io/oauth/gettoken`. This should return a url with an auth token embedded. Copy the entire url value to your clipboard.
+   - It should look something like `https://staging.pxt.io/?access_token=X.XXXXXXXX`
+   - If you get access denied, contact your manager to help you.
+3. In a command shell, set environment variable `PXT_ACCESS_TOKEN` with the copied value.
+4. In the same shell, in the pxt-arcade repo, run `pxt uploadtrg --rebundle`. This should return a url to your private build.
+   - It should look something like `https://arcade.staging.pxt.io/app/XXXXXX-XXXXX`
+ - Paste in a browser and append "--tutorialtool". This should take you to your Tutorial tool build in staging.
+
+## Test in production environment
+
+Follow the "Test in staging environment" instructions, but get your auth token from `https://makecode.com/oauth/gettoken`.