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

…ks/teacher_tool/import_export_rubric

pxtblocks/code-validation/runValidatorPlanAsync.ts

@@ -1,11 +1,14 @@
 namespace pxt.blocks {
+
+    const maxConcurrentChecks = 4;
+
     export async function runValidatorPlanAsync(usedBlocks: Blockly.Block[], plan: ValidatorPlan): Promise<boolean> {
         // Each plan can have multiple checks it needs to run.
         // Run all of them in parallel, and then check if the number of successes is greater than the specified threshold.
         // TBD if it's faster to run in parallel without short-circuiting once the threshold is reached, or if it's faster to run sequentially and short-circuit.
         const startTime = Date.now();
 
-        const checkRuns = pxt.Util.promisePoolAsync(4, plan.checks, async (check: ValidatorCheckBase): Promise<boolean> => {
+        const checkRuns = pxt.Util.promisePoolAsync(maxConcurrentChecks, plan.checks, async (check: ValidatorCheckBase): Promise<boolean> => {
             switch (check.validator) {
                 case "blocksExist":
                     return runBlocksExistValidation(usedBlocks, check as BlocksExistValidatorCheck);
@@ -18,14 +21,15 @@ namespace pxt.blocks {
 
         const results = await checkRuns;
         const successCount = results.filter((r) => r).length;
+        const passed = successCount >= plan.threshold;
 
         pxt.tickEvent("validation.evaluation_complete", {
             plan: plan.name,
             durationMs: Date.now() - startTime,
-            passed: `${successCount >= plan.threshold}`,
+            passed: `${passed}`,
         });
 
-        return successCount >= plan.threshold;
+        return passed;
     }
 
     function runBlocksExistValidation(usedBlocks: Blockly.Block[], inputs: BlocksExistValidatorCheck): boolean {

teachertool/src/App.tsx

@@ -15,6 +15,7 @@ import { CatalogModal } from "./components/CatalogModal";
 import { postNotification } from "./transforms/postNotification";
 import { loadCatalogAsync } from "./transforms/loadCatalogAsync";
 import { loadValidatorPlansAsync } from "./transforms/loadValidatorPlansAsync";
+import { tryLoadLastActiveRubricAsync } from "./transforms/tryLoadLastActiveRubricAsync";
 
 export const App = () => {
     const { state, dispatch } = useContext(AppStateContext);
@@ -34,6 +35,8 @@ export const App = () => {
                 await loadCatalogAsync();
                 await loadValidatorPlansAsync();
 
+                await tryLoadLastActiveRubricAsync();
+
                 // TODO: Remove this. Delay app init to expose any startup race conditions.
                 setTimeout(() => {
                     // Test notification

teachertool/src/components/ActiveRubricDisplay.tsx

@@ -1,21 +1,30 @@
 /// <reference path="../../../built/pxtblocks.d.ts"/>
 
-import { useContext } from "react";
+import { useContext, useState } from "react";
 import { AppStateContext } from "../state/appStateContext";
 import { getCatalogCriteriaWithId } from "../state/helpers";
 import { Button } from "react-common/components/controls/Button";
 import { removeCriteriaFromRubric } from "../transforms/removeCriteriaFromRubric";
 import { showCatalogModal } from "../transforms/showCatalogModal";
+import { setRubricName } from "../transforms/setRubricName";
+import { DebouncedInput } from "./DebouncedInput";
 
 interface IProps {}
 
 export const ActiveRubricDisplay: React.FC<IProps> = ({}) => {
-    const { state: teacherTool, dispatch } = useContext(AppStateContext);
+    const { state: teacherTool } = useContext(AppStateContext);
 
     return (
         <div className="rubric-display">
-            <h3>{lf("Rubric")}</h3>
-            {teacherTool.selectedCriteria?.map(criteriaInstance => {
+            <DebouncedInput
+                label={lf("Rubric Name")}
+                ariaLabel={lf("Rubric Name")}
+                onChange={setRubricName}
+                placeholder={lf("Rubric Name")}
+                initialValue={teacherTool.rubric.name}
+                preserveValueOnBlur={true}
+            />
+            {teacherTool.rubric.criteria?.map(criteriaInstance => {
                 if (!criteriaInstance) return null;
 
                 const catalogCriteria = getCatalogCriteriaWithId(criteriaInstance.catalogCriteriaId);

teachertool/src/components/DebouncedInput.tsx

@@ -0,0 +1,43 @@
+import { useEffect, useRef } from "react";
+import { Input, InputProps } from "react-common/components/controls/Input";
+
+export interface DebouncedInputProps extends InputProps {
+    intervalMs?: number; // Default 500 ms
+}
+
+// This functions like the React Common Input, but debounces onChange calls,
+// so if onChange is called multiple times in quick succession, it will only
+// be executed once after a pause of the specified `interval` in milliseconds.
+export const DebouncedInput: React.FC<DebouncedInputProps> = ({ intervalMs = 500, ...props }) => {
+    const timerId = useRef<NodeJS.Timeout | undefined>(undefined);
+    const latestValue = useRef<string>("");
+
+    const sendChange = () => {
+        if (props.onChange) {
+            props.onChange(latestValue.current);
+        }
+    };
+
+    // If the timer is pending and the component unmounts,
+    // clear the timer and fire the onChange event immediately.
+    useEffect(() => {
+        return () => {
+            if (timerId.current) {
+                clearTimeout(timerId.current);
+                sendChange();
+            }
+        };
+    }, []);
+
+    const onChangeDebounce = (newValue: string) => {
+        latestValue.current = newValue;
+
+        if (timerId.current) {
+            clearTimeout(timerId.current);
+        }
+
+        timerId.current = setTimeout(sendChange, intervalMs);
+    };
+
+    return <Input {...props} onChange={onChangeDebounce} />;
+};

teachertool/src/components/DebugInput.tsx

@@ -10,25 +10,12 @@ import { runEvaluateAsync } from "../transforms/runEvaluateAsync";
 interface IProps {}
 
 export const DebugInput: React.FC<IProps> = ({}) => {
-    const [shareLink, setShareLink] = useState("https://makecode.microbit.org/S95591-52406-50965-65671");
-
     const evaluate = async () => {
-        await loadProjectMetadataAsync(shareLink);
         await runEvaluateAsync();
     };
 
     return (
         <div className="debug-container">
-            <div className="single-share-link-input-container">
-                {lf("Share Link:")}
-                <Input
-                    id="shareLinkInput"
-                    className="link-input"
-                    placeholder={lf("Share link to validate")}
-                    initialValue={shareLink}
-                    onChange={setShareLink}
-                />
-            </div>
             <Button
                 id="evaluateSingleProjectButton"
                 className="btn-primary"
@@ -38,4 +25,4 @@ export const DebugInput: React.FC<IProps> = ({}) => {
             />
         </div>
     );
-};
+};

teachertool/src/components/EvalResultDisplay.tsx

@@ -11,7 +11,7 @@ export const EvalResultDisplay: React.FC<IProps> = ({}) => {
     const { state: teacherTool } = useContext(AppStateContext);
 
     function getTemplateStringFromCriteriaInstanceId(instanceId: string): string {
-        const catalogCriteriaId = teacherTool.selectedCriteria?.find(
+        const catalogCriteriaId = teacherTool.rubric.criteria?.find(
             criteria => criteria.instanceId === instanceId
         )?.catalogCriteriaId;
         if (!catalogCriteriaId) return "";
@@ -28,20 +28,24 @@ export const EvalResultDisplay: React.FC<IProps> = ({}) => {
                     {Object.keys(teacherTool.evalResults ?? {}).map(criteriaInstanceId => {
                         const result = teacherTool.evalResults[criteriaInstanceId];
                         const label = getTemplateStringFromCriteriaInstanceId(criteriaInstanceId);
-                        return label && (
-                            <div className="result-block-id" key={criteriaInstanceId}>
-                                <p className="block-id-label">
-                                    {getTemplateStringFromCriteriaInstanceId(criteriaInstanceId)}:
-                                </p>
-                                {result === CriteriaEvaluationResult.InProgress && <div className="common-spinner" />}
-                                {result === CriteriaEvaluationResult.CompleteWithNoResult && <p>{lf("N/A")}</p>}
-                                {result === CriteriaEvaluationResult.Fail && (
-                                    <p className="negative-text">{lf("Needs Work")}</p>
-                                )}
-                                {result === CriteriaEvaluationResult.Pass && (
-                                    <p className="positive-text">{lf("Looks Good!")}</p>
-                                )}
-                            </div>
+                        return (
+                            label && (
+                                <div className="result-block-id" key={criteriaInstanceId}>
+                                    <p className="block-id-label">
+                                        {getTemplateStringFromCriteriaInstanceId(criteriaInstanceId)}:
+                                    </p>
+                                    {result === CriteriaEvaluationResult.InProgress && (
+                                        <div className="common-spinner" />
+                                    )}
+                                    {result === CriteriaEvaluationResult.CompleteWithNoResult && <p>{lf("N/A")}</p>}
+                                    {result === CriteriaEvaluationResult.Fail && (
+                                        <p className="negative-text">{lf("Needs Work")}</p>
+                                    )}
+                                    {result === CriteriaEvaluationResult.Pass && (
+                                        <p className="positive-text">{lf("Looks Good!")}</p>
+                                    )}
+                                </div>
+                            )
                         );
                     })}
                 </div>

teachertool/src/components/HeaderBar.tsx

@@ -73,7 +73,7 @@ export const HeaderBar: React.FC<HeaderBarProps> = () => {
     };
 
     return (
-        <MenuBar className={css["header"]} ariaLabel={lf("Header")}>
+        <MenuBar className={css["header"]} ariaLabel={lf("Header")} role="navigation">
             <div className={css["left-menu"]}>
                 {getOrganizationLogo()}
                 {getTargetLogo()}

teachertool/src/components/MainPanel.tsx

@@ -2,11 +2,10 @@ import * as React from "react";
 // eslint-disable-next-line import/no-internal-modules
 import css from "./styling/MainPanel.module.scss";
 
-import { DebugInput } from "./DebugInput";
 import { MakeCodeFrame } from "./MakecodeFrame";
-import { EvalResultDisplay } from "./EvalResultDisplay";
-import { ActiveRubricDisplay } from "./ActiveRubricDisplay";
 import { SplitPane } from "./SplitPane";
+import { RubricWorkspace } from "./RubricWorkspace";
+import { ProjectWorkspace } from "./ProjectWorkspace";
 
 interface IProps {}
 
@@ -16,13 +15,11 @@ export const MainPanel: React.FC<IProps> = () => {
             <SplitPane split={"vertical"} defaultSize={"80%"} primary={"left"}>
                 {/* Left side */}
                 <>
-                    <DebugInput />
-                    <ActiveRubricDisplay />
-                    <EvalResultDisplay />
+                    <RubricWorkspace />
                 </>
                 {/* Right side */}
                 <>
-                    <MakeCodeFrame />
+                    <ProjectWorkspace />
                 </>
             </SplitPane>
         </div>