Merge branch 'stable7.1' (microsoft#8486)

* [stable7.1] Cherry-pick fixes for skillmap, iframe (microsoft#8391)

* Rest finishedActivityState when opening new activity (microsoft#8387)

* Null check for header when saving, posting tutorial progress (microsoft#8389)

* Don't unload/reload skillmap graph, reduces jittering (microsoft#8390)

* Don't use telemetry item before it's declared (microsoft#8393)

* 7.1.21

* Cherry pick fixes to stable7.1 (microsoft#8394)

* Don't write the contents of nonexistent files (microsoft#8392)

* Don't use telemetry item before it's declared (microsoft#8393)

* 7.1.22

* Handle iframe reloading (microsoft#8398)

* 7.1.23

* Only load project if skillmap editorview open (microsoft#8399)

* 7.1.24

* Don't run sim in background when no project is loaded in the skillmap iframe (microsoft#8405)

* Don't run sim in background when no project is loaded in the skillmap iframe

* Don't reload header when exiting skillmp tutorial

* Remove post progress

* Retry request for skillmap markdown in safari (microsoft#8395)

* 7.1.25

* Check for deleted flag when importing skillmap project (microsoft#8414)

* Filter tiles out of image gallery in image editor (microsoft#8403)

* Add user profile page (microsoft#8411)

Co-authored-by: Eric Anderson <eanders@microsoft.com>

* Fix hang in monaco by making regex more specific (microsoft#8427)

* Fix hang in monaco by making regex more specific

* cleanup

* Only reset progress for currently open skillmap (microsoft#8415)

* reenable auth in skillmap (microsoft#8428)

* 7.1.26

* Check for placeholder type before guessing a new type (microsoft#8429) (microsoft#8435)

* on signin, transfer local projects to cloud (microsoft#8431) (microsoft#8443)

* on signin, transfer local projects to cloud

* pr feedback and refinements

* Add detection for chromium-based edge (microsoft#8432)

* skillmap: reflect project cloud status on on info panel (microsoft#8440)

* cloud status wip

* reflect cloud status on info panel

* removed unneeded property

* show cloud status on skillmap view

* pr feedback and refinements

* Fix User Menu header sizing (microsoft#8437)

* Prompt users to sign in after completing the first skillmap activity (microsoft#8433)

* 7.1.27

* Load entire toolbox instead of exiting tutorial on toolbox error (microsoft#8449)

* Make copies of local projects when importing skillmap progress to cloud (microsoft#8456)

* Make copies of local projects when importing skillmap progress to cloud

* cleanup

* PR feedback

* always request all header cloud status

* 7.1.28

* Tick event for grey block in tutorial filters, add 24hr expiration (microsoft#8463)

* 7.1.29

* allow specifying pkgs to compile hex files for in staticpkg (microsoft#8460) (microsoft#8466)

* Handle user initials better in skillmap (microsoft#8458)

* 7.1.30

* Never use the icons.css from pxt-arcade-sim (microsoft#8451)

* Never use the icons.css from pxt-arcade-sim (microsoft#8451)

* [stable7.1] Cherry Pick (microsoft#8477)

* cleanup cloudSyncCheckAsync trigger (microsoft#8476)

* Cleanup console output (microsoft#8479)

* [stable7.1] Expand inline blocks regex to allow arrays (microsoft#8471) (microsoft#8474)

* Expand inline blocks regex to allow arrays (microsoft#8471)

* Thow warning instead of error for loop in skillmap graph (microsoft#8424)

* Allow skill map end action without link (microsoft#8478)

* 7.1.31

* Align sign in button icon (microsoft#8481)

* skillmap: export cloud projects to local on profile delete (microsoft#8482)

* 7.1.32

* Merge branch 'stable7.1'

* Copy skillmap headers over for cloud users (microsoft#8483)

* Copy skillmap headers over nicely for new users

* Remove trailing spaces

* Put ready promise back

* Don't block things forever

* Move things from ready to appstate

* Add comment

* Use 'some' instead of filter

* 7.1.33

* Use arcade-sim icons.css :) (microsoft#8485)

* 7.1.34

* Copy over user tags. (microsoft#8488)

* 7.1.35

Co-authored-by: shakao <34112083+shakao@users.noreply.github.com>
Co-authored-by: Richard Knoll <riknoll@users.noreply.github.com>
Co-authored-by: Abhijith Chatra <abchatra@microsoft.com>
Co-authored-by: Vivian Li <vivl@microsoft.com>
Co-authored-by: Joey Wunderlich <jwunderl@users.noreply.github.com>
Co-authored-by: Joey Wunderlich <joey.wunderlich@gmail.com>
Co-authored-by: livcheerful <li.v.cheerful@gmail.com>

Author: 7 people

pxteditor/editor.ts

@@ -376,6 +376,7 @@ namespace pxt.editor {
         createGitHubRepositoryAsync(): Promise<void>;
         saveLocalProjectsToCloudAsync(headerIds: string[]): Promise<pxt.Map<string> | undefined>;
         requestProjectCloudStatus(headerIds: string[]): Promise<void>;
+        convertCloudProjectsToLocal(userId: string): Promise<void>;
     }
 
     export interface IHexFileImporter {

pxteditor/editorcontroller.ts

@@ -58,6 +58,7 @@ namespace pxt.editor {
         | "savelocalprojectstocloud"
         | "projectcloudstatus"
         | "requestprojectcloudstatus"
+        | "convertcloudprojectstolocal"
 
         | "toggletrace" // EditorMessageToggleTraceRequest
         | "togglehighcontrast"
@@ -248,6 +249,11 @@ namespace pxt.editor {
         headerIds: string[];
     }
 
+    export interface EditorMessageConvertCloudProjectsToLocal extends EditorMessageRequest {
+        action: "convertcloudprojectstolocal";
+        userId: string;
+    }
+
     export interface EditorMessageImportTutorialRequest extends EditorMessageRequest {
         action: "importtutorial";
         // markdown to load
@@ -575,6 +581,10 @@ namespace pxt.editor {
                                     const msg = data as EditorMessageRequestProjectCloudStatus;
                                     return projectView.requestProjectCloudStatus(msg.headerIds);
                                 }
+                                case "convertcloudprojectstolocal": {
+                                    const msg = data as EditorMessageConvertCloudProjectsToLocal;
+                                    return projectView.convertCloudProjectsToLocal(msg.userId);
+                                }
                             }
                             return Promise.resolve();
                         });

pxtlib/auth.ts

@@ -60,7 +60,8 @@ namespace pxt.auth {
     export const DEFAULT_USER_PREFERENCES: () => UserPreferences = () => ({
         highContrast: false,
         language: pxt.appTarget.appTheme.defaultLocale,
-        reader: ""
+        reader: "",
+        skillmap: {mapProgress: {}, completedTags: {}}
     });
 
     /**

skillmap/src/App.css

@@ -141,11 +141,11 @@ code {
     height: 80%;
     margin: .5rem;
     margin-right: 1rem;
-    padding-top: .5rem;
-    padding-left: 1rem;
+    padding: .6rem;
     font-family: var(--feature-text-font);
     font-weight: 500;
     flex-direction: row-reverse;
+    align-items: center;
 }
 
 .user-menu .header-dropdown {

skillmap/src/App.tsx

@@ -5,7 +5,7 @@ import { connect } from 'react-redux';
 
 import store from "./store/store";
 import * as authClient from "./lib/authClient";
-import { getFlattenedHeaderIds } from "./lib/skillMapUtils";
+import { getFlattenedHeaderIds, hasUrlBeenStarted } from "./lib/skillMapUtils";
 
 import {
     dispatchAddSkillMap,
@@ -34,13 +34,15 @@ import { parseHash, getMarkdownAsync, MarkdownSource, parseQuery,
 import { MakeCodeFrame } from './components/makecodeFrame';
 import { getLocalUserStateAsync, getUserStateAsync, saveUserStateAsync } from './lib/workspaceProvider';
 import { Unsubscribe } from 'redux';
+import { UserProfile } from './components/UserProfile';
+import { ReadyResources, ReadyPromise } from './lib/readyResources';
 
 /* eslint-disable import/no-unassigned-import */
 import './App.css';
 
 // TODO: this file needs to read colors from the target
 import './arcade.css';
-import { UserProfile } from './components/UserProfile';
+
 /* eslint-enable import/no-unassigned-import */
 interface AppProps {
     skillMaps: { [key: string]: SkillMap };
@@ -64,21 +66,28 @@ interface AppProps {
 
 interface AppState {
     error?: string;
+    cloudSyncCheckHasFinished: boolean;
 }
 
 class AppImpl extends React.Component<AppProps, AppState> {
     protected queryFlags: {[index: string]: string} = {};
     protected unsubscribeChangeListener: Unsubscribe | undefined;
     protected loadedUser: UserState | undefined;
-    protected sendMessageAsync: ((message: any) => Promise<any>) | undefined;
+    protected readyPromise: ReadyPromise;
 
     constructor(props: any) {
         super(props);
-        this.state = {};
+        this.state = {
+            cloudSyncCheckHasFinished: false
+        };
+        this.readyPromise = new ReadyPromise();
 
         window.addEventListener("hashchange", this.handleHashChange);
+        this.cloudSyncCheckAsync();
     }
 
+    protected ready = (): Promise<ReadyResources> => this.readyPromise.promise();
+
     protected handleHashChange = async (e: HashChangeEvent) => {
         await this.parseHashAsync();
         e.stopPropagation();
@@ -209,75 +218,66 @@ class AppImpl extends React.Component<AppProps, AppState> {
     }
 
     protected async cloudSyncCheckAsync() {
-        if (await authClient.loggedInAsync() && this.sendMessageAsync && this.loadedUser) {
+        const res = await this.ready();
+        if (await authClient.loggedInAsync()) {
             const state = store.getState();
             const localUser = await getLocalUserStateAsync();
 
             let currentUser = await getUserStateAsync();
             let headerIds = getFlattenedHeaderIds(localUser, state.pageSourceUrl, currentUser);
-
             // Tell the editor to transfer local skillmap projects to the cloud.
-            const headerMap = (await this.sendMessageAsync({
+            const headerMap = (await res.sendMessageAsync!({
                 type: "pxteditor",
                 action: "savelocalprojectstocloud",
                 headerIds
             } as pxt.editor.EditorMessageSaveLocalProjectsToCloud)).resp.headerIdMap;
-
             if (headerMap) {
-                headerIds = headerIds.map(h => headerMap[h] || h);
-
-                // Patch all of the header ids in the user state and copy
-                // over the local progress that doesn't exist in the signed in
-                // user
-                const urls = Object.keys(currentUser.mapProgress);
                 const newUser: UserState = {
                     ...currentUser,
                     mapProgress: {}
                 }
 
-                for (const url of urls) {
+                const localUrls = Object.keys(localUser.mapProgress);
+                for (const url of localUrls) {
+                    // Copy over local user progress. If there is cloud progress, it will
+                    // be overwritten
                     newUser.mapProgress[url] = {
-                        ...currentUser.mapProgress[url],
-                    };
-
-                    if (!localUser.mapProgress[url]) continue;
+                        ...localUser.mapProgress[url]
+                    }
 
                     const maps = Object.keys(localUser.mapProgress[url]);
                     for (const map of maps) {
-                        newUser.mapProgress[url][map] = {
-                            ...currentUser.mapProgress[url][map]
-                        };
-
                         // Only copy over state if the user hasn't started this map yet
-                        if (Object.keys(newUser.mapProgress[url][map].activityState).length !== 0) {
-                            continue;
-                        }
-
-                        const activityState: {[index: string]: ActivityState} = {};
-                        newUser.mapProgress[url][map].activityState = activityState;
-
-                        const signedInProgress = currentUser.mapProgress[url][map].activityState;
-                        const localProgress = localUser.mapProgress[url][map].activityState
-
-                        for (const activity of Object.keys(signedInProgress)) {
-                            const oldState = signedInProgress[activity];
-                            activityState[activity] = {
-                                ...oldState,
-                                headerId: oldState.headerId ? (headerMap[oldState.headerId] || oldState.headerId) : oldState.headerId
+                        if (!hasUrlBeenStarted(currentUser, url)) {
+                            newUser.mapProgress[url][map] = {
+                                ...localUser.mapProgress[url][map]
                             };
+                            newUser.completedTags[url] = localUser.completedTags[url];
+                            const activityState: {[index: string]: ActivityState} = {};
+                            newUser.mapProgress[url][map].activityState = activityState;
+
+                            const localProgress = localUser.mapProgress[url][map].activityState
+                            for (const activity of Object.keys(localProgress)) {
+                                const localActivity = localProgress[activity];
+                                if (localActivity.headerId) {
+                                    activityState[activity] = {
+                                        ...localActivity,
+                                        headerId: headerMap[localActivity.headerId] || localActivity.headerId
+                                    };
+                                }
+                            }
                         }
+                    }
+                }
 
-                        for (const activity of Object.keys(localProgress)) {
-                            const signedInActivity = signedInProgress[activity];
-                            const localActivity = localProgress[activity];
-                            if ((!signedInActivity || !signedInActivity.headerId) && localActivity.headerId) {
-                                const base = signedInActivity || localActivity;
-                                activityState[activity] = {
-                                    ...base,
-                                    headerId: localActivity.headerId ? (headerMap[localActivity.headerId] || localActivity.headerId) : localActivity.headerId
-                                };
-                            }
+                const visitedUrls = Object.keys(currentUser.mapProgress)
+                // Copy progress from cloud user for all visited URLs.
+                for (const url of visitedUrls) {
+                    if (hasUrlBeenStarted(currentUser, url)) {
+                        newUser.mapProgress[url] = {
+                            ...currentUser.mapProgress[url]
                         }
+                        newUser.completedTags[url] = currentUser.completedTags[url]
                     }
                 }
 
@@ -287,17 +287,17 @@ class AppImpl extends React.Component<AppProps, AppState> {
             }
 
             // Tell the editor to send us the cloud status of our projects.
-            await this.sendMessageAsync({
+            await res.sendMessageAsync!({
                 type: "pxteditor",
                 action: "requestprojectcloudstatus",
                 headerIds: getFlattenedHeaderIds(currentUser, state.pageSourceUrl)
             } as pxt.editor.EditorMessageRequestProjectCloudStatus);
         }
+        this.setState({cloudSyncCheckHasFinished: true})
     }
 
     protected onMakeCodeFrameLoaded = async (sendMessageAsync: (message: any) => Promise<any>) => {
-        this.sendMessageAsync = sendMessageAsync;
-        await this.cloudSyncCheckAsync();
+        this.readyPromise.setSendMessageAsync(sendMessageAsync);
     }
 
     async componentDidMount() {
@@ -309,7 +309,7 @@ class AppImpl extends React.Component<AppProps, AppState> {
         await authClient.authCheckAsync();
         await this.initLocalizationAsync();
         await this.parseHashAsync();
-        await this.cloudSyncCheckAsync();
+        this.readyPromise.setAppMounted();
     }
 
     componentWillUnmount() {
@@ -386,8 +386,14 @@ class AppImpl extends React.Component<AppProps, AppState> {
         const { user } = store.getState();
 
         if (user !== this.loadedUser && (!this.loadedUser || user.id === this.loadedUser.id)) {
-            await saveUserStateAsync(user);
-            this.loadedUser = user;
+            // To avoid a race condition where we save to local user's state to the cloud user
+            // before we get a chance to run the cloud upgrade rules on projects, we need to wait
+            // for cloudSyncCheck to finish if we're logged in.
+            if (!this.props.signedIn ||
+                (this.props.signedIn && this.state.cloudSyncCheckHasFinished)) {
+                await saveUserStateAsync(user);
+                this.loadedUser = user;
+            }
         }
     }
 }

skillmap/src/actions/dispatch.ts

@@ -1,3 +1,4 @@
+import { ReadyResources } from '../lib/readyResources';
 import { PageSourceStatus } from '../store/reducer';
 import * as actions from './types'
 
@@ -45,3 +46,4 @@ export const dispatchCloseUserProfile = () => ({ type: actions.HIDE_USER_PROFILE
 
 export const dispatchSetShareStatus = (headerId?: string, url?: string) =>  ({ type: actions.SET_SHARE_STATUS, headerId, url });
 export const dispatchSetCloudStatus = (headerId: string, status: string) => ({ type: actions.SET_CLOUD_STATUS, headerId, status });
+export const dispatchSetReadyResources = (resources: ReadyResources) => ({ type: actions.SET_READY_RESOURCES, resources });

skillmap/src/actions/types.ts

@@ -42,3 +42,4 @@ export const HIDE_USER_PROFILE = "HIDE_USER_PROFILE";
 
 export const SET_SHARE_STATUS = "SET_SHARE_STATUS";
 export const SET_CLOUD_STATUS = "SET_CLOUD_STATUS";
+export const SET_READY_RESOURCES = "SET_READY_RESOURCES";

skillmap/src/components/CloudActions.tsx

@@ -3,7 +3,6 @@ import { connect } from 'react-redux';
 import { dispatchShowLoginModal } from "../actions/dispatch";
 import { SkillMapState } from "../store/reducer";
 import { lookupActivityProgress } from "../lib/skillMapUtils";
-import { head } from "request";
 
 interface OwnProps {
     signedIn: boolean;

skillmap/src/components/HeaderBar.tsx

@@ -16,6 +16,7 @@ interface HeaderBarProps {
     activityOpen: boolean;
     showReportAbuse?: boolean;
     signedIn: boolean;
+    profile: pxt.auth.UserProfile;
     dispatchSaveAndCloseActivity: () => void;
     dispatchShowResetUserModal: () => void;
     dispatchShowLoginModal: () => void;
@@ -86,9 +87,8 @@ export class HeaderBarImpl extends React.Component<HeaderBarProps> {
     }
 
     protected getUserMenu() {
-        const { signedIn } = this.props;
+        const { signedIn, profile } = this.props;
         const items = [];
-        const user = pxt.auth.client()?.getState().profile;
 
         if (signedIn) {
             items.push({
@@ -102,20 +102,18 @@ export class HeaderBarImpl extends React.Component<HeaderBarProps> {
             })
         }
 
-        const avatarElem = user?.idp?.picture?.dataUrl
-            ? <div className="avatar"><img src={user?.idp?.picture?.dataUrl} alt={lf("User Menu")}/></div>
+        const avatarElem = profile?.idp?.picture?.dataUrl
+            ? <div className="avatar"><img src={profile?.idp?.picture?.dataUrl} alt={lf("User Menu")}/></div>
             : undefined;
 
-        const initialsElem = user?.idp?.displayName
-            ? <span className="circle">{pxt.auth.userInitials(user)}</span>
-            : undefined;
+        const initialsElem = <span className="circle">{pxt.auth.userInitials(profile)}</span>
 
         return <div className="user-menu">
             {signedIn
-             ? <Dropdown icon="star" items={items} picture={avatarElem || initialsElem} className="header-dropdown"/>
-             : <HeaderBarButton className="sign-in" icon="xicon icon cloud-user" title={lf("Sign In")} label={lf("Sign In")} onClick={ () => {
+             ? <Dropdown icon="user" items={items} picture={avatarElem || initialsElem} className="header-dropdown"/>
+             : <HeaderBarButton className="sign-in" icon="xicon cloud-user" title={lf("Sign In")} label={lf("Sign In")} onClick={ () => {
                 pxt.tickEvent(`skillmap.usermenu.signin`);
-                 this.props.dispatchShowLoginModal();
+                this.props.dispatchShowLoginModal();
             }}/>}
         </div>;
     }
@@ -222,7 +220,8 @@ function mapStateToProps(state: SkillMapState, ownProps: any) {
         currentMapId: activityOpen && state.editorView?.currentMapId,
         currentActivityId: activityOpen && state.editorView?.currentActivityId,
         showReportAbuse: state.pageSourceStatus === "unknown",
-        signedIn: state.auth.signedIn
+        signedIn: state.auth.signedIn,
+        profile: state.auth.profile
     }
 }
 

skillmap/src/lib/authClient.ts

@@ -31,9 +31,10 @@ class AuthClient extends pxt.auth.AuthClient {
     protected onStateCleared(): Promise<void> {
         return Promise.resolve();
     }
-    protected onProfileDeleted(userId: string): Promise<void> {
+    protected async onProfileDeleted(userId: string): Promise<void> {
         // Show a notification?
-        return Promise.resolve();
+        const state = store.getState();
+        await state.readyResources?.exportCloudProjectsToLocal(userId);
     }
     protected onApiError(err: any): Promise<void> {
         // Show a notification?