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

…ks/teachertool/block_picker

docs/csp.md

@@ -26,6 +26,17 @@ Some additional features of the Microsoft MakeCode curriculum include:
 
 Microsoft is recognized by the College Board as an endorsed provider of curriculum and professional development for AP® Computer Science Principles (AP CSP). Using an Endorsed Provider affords schools access to resources including an AP CSP syllabus pre-approved by the College Board’s AP Course Audit, and officially recognized professional development that prepares teachers to teach AP CSP. This endorsement affirms only that components of Microsoft's offerings are aligned to all the AP Curriculum Framework standards and the AP CSP assessment.
 
+### ~ reminder
+
+#### **Professional Development Workshops - 2024**
+
+There are two free professional development opportunities available this summer to help prepare Educators to teach the AP CS Principles with Microsoft MakeCode course for the 2024-2025 academic year. These professional development workshops will focus on the course's Big Ideas, Learning Objectives and Essential Knowledge skills. Additionally, you will learn how Microsoft MakeCode's curriculum meets the course's learning objectives and prepares students for the AP Exam and Create Performance Task. By attending the training and using Microsoft MakeCode's curriculum, you will be prepared with a syllabus, pacing plan, and lesson plans, PowerPoints, student handouts, and resources for every day of the course. Each session has limited capacity so secure your place by registering for one of the workshops at the links below:
+
+* **[Workshop 1](https://events.teams.microsoft.com/event/068ed173-0075-493a-be29-8d9784b2717f@38dd6634-1031-4c50-a9b4-d16cd9d97d57)** : 📅 June 17th – 21st
+* **[Workshop 2](https://events.teams.microsoft.com/event/ee217aa0-7581-432b-b828-b0972328b25d@38dd6634-1031-4c50-a9b4-d16cd9d97d57)** : 📅 July 22nd - 26th
+
+### ~
+
 ## Course Overview 
 
 Technical Requirements: Students will need access to a computer with an internet connection.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "pxt-core",
-  "version": "10.0.12",
+  "version": "10.0.13",
   "description": "Microsoft MakeCode provides Blocks / JavaScript / Python tools and editors",
   "keywords": [
     "TypeScript",

pxtsim/sound/sequencer.ts

@@ -41,6 +41,7 @@ namespace pxsim.music {
 
         dispose() {
             if (this.metronome) this.metronome.dispose();
+            this.metronome = undefined
             this.stop();
             this.currentlyPlaying = undefined;
             this.listeners = {};
@@ -88,7 +89,7 @@ namespace pxsim.music {
         stop(sustainCurrentSounds = false) {
             if (this._state === "stop") return;
             this._state = "stop";
-            this.metronome.stop();
+            if (this.metronome) this.metronome.stop();
             this.fireStateChange();
 
             if (!sustainCurrentSounds) this.currentCancelToken.cancelled = true;

react-common/components/controls/Textarea.tsx

@@ -14,6 +14,7 @@ export interface TextareaProps extends ControlProps {
     readOnly?: boolean;
     resize?: "both" | "horizontal" | "vertical";
     wrap?: "hard" | "soft" | "off";
+    autoResize?: boolean;
 
     onChange?: (newValue: string) => void;
     onEnterKey?: (value: string) => void;
@@ -38,11 +39,13 @@ export const Textarea = (props: TextareaProps) => {
         readOnly,
         resize,
         wrap,
+        autoResize,
         onChange,
         onEnterKey
     } = props;
 
     const [value, setValue] = React.useState(initialValue || "");
+    const textareaRef = React.useRef<HTMLTextAreaElement>(null);
 
     React.useEffect(() => {
         setValue(initialValue)
@@ -57,6 +60,10 @@ export const Textarea = (props: TextareaProps) => {
         if (onChange) {
             onChange(newValue);
         }
+        if (autoResize && textareaRef.current) {
+            textareaRef.current.style.height = "1px";
+            textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`;
+        }
     }
 
     const enterKeyHandler = (e: React.KeyboardEvent) => {
@@ -90,6 +97,7 @@ export const Textarea = (props: TextareaProps) => {
                     minLength={minLength}
                     wrap={wrap}
                     readOnly={!!readOnly}
+                    ref={textareaRef}
                     onChange={changeHandler}
                     onKeyDown={enterKeyHandler}
                     autoComplete={autoComplete ? "" : "off"}

teachertool/src/components/CriteriaResultEntry.tsx

@@ -22,7 +22,7 @@ const AddNotesButton: React.FC<AddNotesButtonProps> = ({ criteriaId, setShowInpu
         setShowInput(true);
     };
     return (
-        <div className={css["button-container"]}>
+        <div className={classList(css["button-container"], css["no-print"])}>
             <Button
                 className={classList("inline", "outline-button")}
                 label={Strings.AddNotes}
@@ -49,11 +49,11 @@ const CriteriaResultNotes: React.FC<CriteriaResultNotesProps> = ({ criteriaId, n
         <div className={css["notes-container"]}>
             <DebouncedTextarea
                 placeholder={lf("Write your notes here")}
-                ariaLabel={lf("Notes regarding the criteria result")}
-                label={lf("Notes")}
+                ariaLabel={lf("Feedback regarding the criteria result")}
+                label={lf("Feedback")}
                 title={lf("Write your notes here")}
                 initialValue={teacherTool.evalResults[criteriaId]?.notes ?? undefined}
-                resize="vertical"
+                autoResize={true}
                 onChange={onTextChange}
                 autoComplete={false}
                 intervalMs={500}
@@ -88,7 +88,12 @@ export const CriteriaResultEntry: React.FC<CriteriaResultEntryProps> = ({ criter
                             criteriaId={criteriaId}
                         />
                     </div>
-                    <div className={css["result-notes"]}>
+                    <div
+                        className={classList(
+                            css["result-notes"],
+                            teacherTool.evalResults[criteriaId]?.notes ? undefined : css["no-print"]
+                        )}
+                    >
                         {!showInput && <AddNotesButton criteriaId={criteriaId} setShowInput={setShowInput} />}
                         {showInput && <CriteriaResultNotes criteriaId={criteriaId} />}
                     </div>

teachertool/src/components/DebouncedTextarea.tsx

@@ -39,5 +39,5 @@ export const DebouncedTextarea: React.FC<DebouncedTextareaProps> = ({ intervalMs
         timerId.current = setTimeout(sendChange, intervalMs);
     };
 
-    return <Textarea {...props} onChange={onChangeDebounce} />;
+    return <Textarea {...props} onChange={onChangeDebounce} />
 };

teachertool/src/components/EvalResultDisplay.tsx

@@ -27,13 +27,17 @@ const ResultsHeader: React.FC = () => {
     );
 };
 
-export const EvalResultDisplay: React.FC<{}> = () => {
+interface EvalResultDisplayProps {
+    resultsRef: React.RefObject<HTMLDivElement>;
+}
+
+export const EvalResultDisplay: React.FC<EvalResultDisplayProps> = ({ resultsRef }) => {
     const { state: teacherTool } = useContext(AppStateContext);
 
     return (
         <>
             {teacherTool.projectMetadata && (
-                <div className={css["eval-results-container"]}>
+                <div className={css["eval-results-container"]} ref={resultsRef}>
                     <ResultsHeader />
                     {Object.keys(teacherTool.evalResults ?? {}).map(criteriaInstanceId => {
                         return <CriteriaResultEntry criteriaId={criteriaInstanceId} key={criteriaInstanceId} />;

teachertool/src/components/PrintButton.tsx

@@ -1,17 +1,24 @@
 import * as React from "react";
-import { useRef } from "react";
 import { useReactToPrint } from "react-to-print";
 import { Toolbar } from "./Toolbar";
+import { stateAndDispatch } from "../state";
+import { showToast } from "../state/actions";
+import { makeToast } from "../utils";
+import { Strings } from "../constants";
+import { getSafeRubricName } from "../state/helpers";
 
 interface PrintButtonProps {
     printRef: React.RefObject<HTMLDivElement>;
-    onHandlePrint: () => void;
 }
 
-export const PrintButton: React.FC<PrintButtonProps> = ({ printRef, onHandlePrint }) => {
+export const PrintButton: React.FC<PrintButtonProps> = ({ printRef }) => {
+    const { state: teacherTool } = stateAndDispatch();
     const handlePrint = useReactToPrint({
         content: () => printRef.current,
-        onAfterPrint: onHandlePrint,
+        onPrintError: () => showToast(makeToast("error", lf("Unable to print evaluation results"), 2000)),
+        documentTitle: `${pxt.Util.sanitizeFileName(getSafeRubricName(teacherTool)!)} - ${pxt.Util.sanitizeFileName(
+            teacherTool.projectMetadata?.name || Strings.UntitledProject
+        )}`,
     });
     return <Toolbar.Button icon="fas fa-print" title={lf("Print")} onClick={handlePrint} />;
 };

teachertool/src/components/RubricWorkspace.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import css from "./styling/RubricWorkspace.module.scss";
-import { useContext } from "react";
+import { useContext, useRef } from "react";
 import { AppStateContext, stateAndDispatch } from "../state/appStateContext";
 import { Toolbar } from "./Toolbar";
 import { TabGroup, TabButton } from "./TabGroup";
@@ -17,6 +17,7 @@ import { isProjectLoaded } from "../state/helpers";
 import { setAutorun } from "../transforms/setAutorun";
 import { Strings, Ticks } from "../constants";
 import { resetRubricAsync } from "../transforms/resetRubricAsync";
+import { PrintButton } from "./PrintButton";
 
 function handleImportRubricClicked() {
     pxt.tickEvent(Ticks.ImportRubric);
@@ -53,7 +54,11 @@ const WorkspaceTabButtons: React.FC = () => {
     );
 };
 
-const WorkspaceTabPanels: React.FC = () => {
+interface WorkspaceTabPanelsProps {
+    resultsRef: React.RefObject<HTMLDivElement>;
+}
+
+const WorkspaceTabPanels: React.FC<WorkspaceTabPanelsProps> = ({ resultsRef }) => {
     return (
         <>
             <TabPanel name="home">
@@ -63,7 +68,7 @@ const WorkspaceTabPanels: React.FC = () => {
                 <ActiveRubricDisplay />
             </TabPanel>
             <TabPanel name="results">
-                <EvalResultDisplay />
+                <EvalResultDisplay resultsRef={resultsRef} />
             </TabPanel>
         </>
     );
@@ -101,7 +106,11 @@ function getActionMenuItems(tab: TabName): MenuItem[] {
     return items;
 }
 
-const WorkspaceToolbarButtons: React.FC = () => {
+interface WorkspaceToolbarButtonsProps {
+    resultsRef: React.RefObject<HTMLDivElement>;
+}
+
+const WorkspaceToolbarButtons: React.FC<WorkspaceToolbarButtonsProps> = ({ resultsRef }) => {
     const { state: teacherTool } = useContext(AppStateContext);
     const { activeTab, autorun } = teacherTool;
 
@@ -114,9 +123,7 @@ const WorkspaceToolbarButtons: React.FC = () => {
 
     return (
         <Toolbar.ControlGroup>
-            {activeTab === "results" && (
-                <Toolbar.Button icon="fas fa-print" title={lf("Print")} onClick={() => console.log("Print")} />
-            )}
+            {activeTab === "results" && <PrintButton printRef={resultsRef} />}
             {/* Conditional buttons go above this line */}
             <Toolbar.Toggle
                 label={Strings.AutoRun}
@@ -136,10 +143,11 @@ const WorkspaceToolbarButtons: React.FC = () => {
 };
 
 export const RubricWorkspace: React.FC = () => {
+    const resultsRef = useRef<HTMLDivElement>(null);
     return (
         <div className={css.panel}>
-            <Toolbar left={<WorkspaceTabButtons />} right={<WorkspaceToolbarButtons />} />
-            <WorkspaceTabPanels />
+            <Toolbar left={<WorkspaceTabButtons />} right={<WorkspaceToolbarButtons resultsRef={resultsRef} />} />
+            <WorkspaceTabPanels resultsRef={resultsRef} />
         </div>
     );
 };

teachertool/src/components/styling/EvalResultDisplay.module.scss

@@ -12,8 +12,8 @@
     padding-bottom: 0.5rem;
     margin-top: 0.5rem;
     min-height: 9rem;
-    max-height: 12rem;
-    border-bottom: solid 1px var(--pxt-content-accent) ;
+    border-bottom: solid 1px var(--pxt-content-accent);
+    break-inside: avoid;
 }
 
 .result-details {
@@ -39,7 +39,7 @@
     align-items: center;
     justify-content: flex-end;
     width: 100%;
-    height: 5.5rem;
+    min-height: 5.5rem;
     margin-top: 0.25rem;
 
     .notes-container {
@@ -110,3 +110,21 @@
         }
     }
 }
+
+@media print {
+    .no-print {
+        display: none !important;
+    }
+
+    .specific-criteria-result {
+        min-height: 5.5rem;
+    }
+
+    .result-notes {
+        height: 7rem;
+    }
+
+    .result-notes.no-print {
+        height: 1rem;
+    }
+}

teachertool/src/style.overrides/Button.scss

@@ -49,6 +49,19 @@
         padding: 0.75rem;
     }
 
+    @media print {
+        i {
+            display: none;
+        }
+
+        text-align: center;
+        padding-right: 8px;
+        border: none;
+
+        .common-button-label {
+            border-bottom: 1px solid var(--pxt-page-foreground);
+        }
+    }
 }
 
 .fail > .common-button.common-dropdown-button {

teachertool/src/style.overrides/Textarea.scss

@@ -1,7 +1,7 @@
 .common-textarea-wrapper {
     div[class*="common-textarea-group"] {
         border-radius: 0.5rem;
-        height: 3.5rem;
+        min-height: 4.25rem;
         font-weight: 500;
         &:focus::after {
             outline: none;
@@ -12,4 +12,12 @@
             border-radius: 0.5rem;
         }
     }
+}
+
+@media print {
+    .common-textarea-wrapper {
+        div[class*="common-textarea-group"] {
+            border-radius: 0;
+        }
+    }
 }

webapp/src/idbworkspace.ts

@@ -128,11 +128,11 @@ async function migratePouchAsync() {
                 continue;
         }
 
-        if (await alreadyMigratedList.getAsync(table, id)) {
+        if (await alreadyMigratedList.getAsync(table, migrationDbKey(prefix, id))) {
             continue;
         }
 
-        alreadyMigratedList.setAsync(table, { id });
+        await alreadyMigratedList.setAsync(table, { id: migrationDbKey(prefix, id) });
 
         const db = await getDbAsync(prefix)
         const existing = await db.getAsync(table, id);
@@ -441,6 +441,10 @@ export function initGitHubDb() {
     pxt.github.db = new GithubDb();
 }
 
+function migrationDbKey(prefix: string, id: string) {
+    return `${prefix}--${id}`;
+};
+
 export const provider: WorkspaceProvider = {
     getAsync,
     setAsync,