Update Import Flow to Match Designs

teachertool/src/App.tsx

@@ -14,6 +14,7 @@ import { loadCatalogAsync } from "./transforms/loadCatalogAsync";
 import { loadValidatorPlansAsync } from "./transforms/loadValidatorPlansAsync";
 import { tryLoadLastActiveRubricAsync } from "./transforms/tryLoadLastActiveRubricAsync";
 import { ImportRubricModal } from "./components/ImportRubricModal";
+import { ConfirmationModal } from "./components/ConfirmationModal";
 
 export const App = () => {
     const { state, dispatch } = useContext(AppStateContext);
@@ -57,6 +58,7 @@ export const App = () => {
             <MainPanel />
             <CatalogModal />
             <ImportRubricModal />
+            <ConfirmationModal />
             <Toasts />
         </>
     );

teachertool/src/components/ConfirmationModal.tsx

@@ -0,0 +1,48 @@
+import { useContext, useEffect, useState } from "react";
+import { AppStateContext } from "../state/appStateContext";
+import { Modal } from "react-common/components/controls/Modal";
+import { hideModal } from "../transforms/hideModal";
+import { classList } from "react-common/components/util";
+import css from "./styling/ConfirmationModal.module.scss";
+
+export interface IProps {}
+export const ConfirmationModal: React.FC<IProps> = () => {
+    const { state: teacherTool } = useContext(AppStateContext);
+
+    function handleCancel() {
+        hideModal();
+        teacherTool.confirmationOptions?.onCancel?.();
+    }
+
+    function handleContinue() {
+        hideModal();
+        teacherTool.confirmationOptions?.onContinue?.();
+    }
+
+    const actions = [
+        {
+            label: lf("Cancel"),
+            className: "secondary",
+            onClick: handleCancel,
+        },
+        {
+            label: lf("Continue"),
+            className: classList(
+                "primary",
+                teacherTool.confirmationOptions?.cautionLevel === "high" ? css["caution"] : undefined
+            ),
+            onClick: handleContinue,
+        },
+    ];
+
+    return teacherTool.modal === "confirmation" && teacherTool.confirmationOptions ? (
+        <Modal
+            title={teacherTool.confirmationOptions.title}
+            onClose={handleCancel}
+            actions={actions}
+            className={css["confirmation-modal"]}
+        >
+            {teacherTool.confirmationOptions.message}
+        </Modal>
+    ) : null;
+};

teachertool/src/components/DragAndDropFileSurface.tsx

@@ -0,0 +1,108 @@
+import { classList } from "react-common/components/util";
+import { Strings } from "../constants";
+import { NoticeLabel } from "./NoticeLabel";
+import { useRef, useState } from "react";
+import css from "./styling/DragAndDropFileSurface.module.scss";
+import { Button } from "react-common/components/controls/Button";
+
+export interface DragAndDropFileSurfaceProps {
+    onFileDroppedAsync: (file: File) => void;
+    errorMessage?: string;
+}
+export const DragAndDropFileSurface: React.FC<DragAndDropFileSurfaceProps> = ({ onFileDroppedAsync, errorMessage }) => {
+    const [fileIsOverSurface, setFileIsOverSurface] = useState(false);
+    const [errorKey, setErrorKey] = useState(0);
+    const fileInputRef = useRef<HTMLInputElement>(null);
+
+    function handleDragOver(event: React.DragEvent<HTMLDivElement>) {
+        // Stop the browser from intercepting the file.
+        event.stopPropagation();
+        event.preventDefault();
+    }
+
+    function handleDragEnter(event: React.DragEvent<HTMLDivElement>) {
+        event.stopPropagation();
+        event.preventDefault();
+        setFileIsOverSurface(true);
+    }
+
+    function handleDragLeave(event: React.DragEvent<HTMLDivElement>) {
+        event.stopPropagation();
+        event.preventDefault();
+        setFileIsOverSurface(false);
+    }
+
+    function handleDrop(event: React.DragEvent<HTMLDivElement>) {
+        event.stopPropagation();
+        event.preventDefault();
+
+        setFileIsOverSurface(false);
+
+        const file = event.dataTransfer.files[0];
+        if (file) {
+            processNewFile(file);
+        }
+    }
+
+    function handleFileFromBrowse(event: React.ChangeEvent<HTMLInputElement>) {
+        const file = event.target.files?.[0];
+        if (file) {
+            processNewFile(file);
+        }
+    }
+
+    function processNewFile(file: File) {
+        // Change errorKey so that the error component resets (notably, resetting animations).
+        setErrorKey(errorKey + 1);
+        onFileDroppedAsync(file);
+    }
+
+    /*
+    We can't use the drag-and-drop-file-surface directly to handle most drop events, because the child elements interfere with them.
+    To solve this, we add a transparent div (droppable-surface) over everything and use that for most drag-related event handling.
+    However, we don't want the transparent droppable-surface to intercept pointer events when there is no drag occurring, so
+    we still use the drag-and-drop-file-surface to detect dragEnter events and only intercept pointer events on the droppable-surface
+    after that has happened.
+    */
+    return (
+        <div className={css["drag-and-drop-file-surface"]} onDragEnter={handleDragEnter}>
+            <div className={css["instruction-container"]}>
+                <i className={classList("fas fa-file-upload", css["upload-icon"])}></i>
+                <div className="no-select">{fileIsOverSurface ? Strings.ReleaseToUpload : Strings.DragAndDrop}</div>
+                <div className={css["or-browse-container"]}>
+                    <span className={css["or-container"]}>{lf("or")}</span>
+
+                    {/* The button triggers a hidden file input to open the file browser */}
+                    <Button
+                        className={classList("link-button", css["browse-button"])}
+                        title={Strings.Browse}
+                        onClick={() => fileInputRef?.current?.click()}
+                    >
+                        {Strings.Browse}
+                    </Button>
+                    <input
+                        type="file"
+                        ref={fileInputRef}
+                        className="hidden"
+                        onChange={handleFileFromBrowse}
+                        aria-label={Strings.SelectRubricFile}
+                        accept=".json"
+                    />
+                </div>
+            </div>
+
+            {errorMessage && (
+                <div className={css["error-label-container"]} key={errorKey} role="alert" title={errorMessage}>
+                    <NoticeLabel severity="error">{errorMessage}</NoticeLabel>
+                </div>
+            )}
+
+            <div
+                className={classList(css["droppable-surface"], fileIsOverSurface ? css["dragging"] : undefined)}
+                onDrop={handleDrop}
+                onDragLeave={handleDragLeave}
+                onDragOver={handleDragOver}
+            />
+        </div>
+    );
+};

teachertool/src/components/ImportRubricModal.tsx

@@ -1,97 +1,39 @@
-import { useContext, useEffect, useState } from "react";
+import { useContext, useState } from "react";
 import { AppStateContext } from "../state/appStateContext";
 import { Modal } from "react-common/components/controls/Modal";
 import { hideModal } from "../transforms/hideModal";
-import css from "./styling/ImportRubricModal.module.scss";
 import { getRubricFromFileAsync } from "../transforms/getRubricFromFileAsync";
-import { NoticeLabel } from "./NoticeLabel";
-import { Rubric } from "../types/rubric";
-import { RubricPreview } from "./RubricPreview";
-import { setRubric } from "../transforms/setRubric";
+import { DragAndDropFileSurface } from "./DragAndDropFileSurface";
+import { Strings } from "../constants";
+import css from "./styling/ImportRubricModal.module.scss";
+import { replaceActiveRubricAsync } from "../transforms/replaceActiveRubricAsync";
 
 export interface IProps {}
 
 export const ImportRubricModal: React.FC<IProps> = () => {
     const { state: teacherTool } = useContext(AppStateContext);
-    const [selectedFile, setSelectedFile] = useState<File | undefined>(undefined);
-    const [selectedRubric, setSelectedRubric] = useState<Rubric | undefined>(undefined);
     const [errorMessage, setErrorMessage] = useState<string | undefined>(undefined);
 
-    useEffect(() => {
-        async function updatePreview(file: File) {
-            const parsedRubric = await getRubricFromFileAsync(file, false /* allow partial */);
-            if (!parsedRubric) {
-                setErrorMessage(lf("Invalid rubric file."));
-            } else {
-                setErrorMessage(undefined);
-            }
-            setSelectedRubric(parsedRubric);
-        }
-
-        if (selectedFile) {
-            updatePreview(selectedFile);
-        } else {
-            setSelectedRubric(undefined);
-            setErrorMessage(undefined);
-        }
-    }, [selectedFile]);
-
     function closeModal() {
-        setSelectedFile(undefined);
         setErrorMessage(undefined);
-        setSelectedRubric(undefined);
         hideModal();
     }
 
-    function handleFileChange(event: React.ChangeEvent<HTMLInputElement>) {
-        if (event.target.files && event.target.files.length > 0) {
-            setSelectedFile(event.target.files[0]);
+    async function handleFileDroppedAsync(file: File) {
+        const parsedRubric = await getRubricFromFileAsync(file, false /* allow partial */);
+        if (!parsedRubric) {
+            setErrorMessage(Strings.InvalidRubricFile);
         } else {
-            setSelectedFile(undefined);
-        }
-    }
-
-    function handleImportClicked() {
-        if (selectedRubric) {
-            setRubric(selectedRubric);
+            setErrorMessage(undefined);
+            closeModal();
+            replaceActiveRubricAsync(parsedRubric);
         }
-
-        closeModal();
     }
 
-    const actions = [
-        {
-            label: lf("Cancel"),
-            className: "secondary",
-            onClick: closeModal,
-        },
-        {
-            label: lf("Import"),
-            className: "primary",
-            onClick: handleImportClicked,
-            disabled: !selectedRubric,
-        },
-    ];
-
     return teacherTool.modal === "import-rubric" ? (
-        <Modal title={lf("Select rubric to import")} actions={actions} onClose={closeModal}>
+        <Modal title={Strings.ImportRubric} onClose={closeModal} className={css["import-rubric-modal"]}>
             <div className={css["import-rubric"]}>
-                <NoticeLabel severity="warning">
-                    {lf("Warning! Your current rubric will be overwritten by the imported rubric.")}
-                </NoticeLabel>
-                {errorMessage && <NoticeLabel severity="error">{errorMessage}</NoticeLabel>}
-                {selectedRubric && (
-                    <div className={css["rubric-preview-container"]}>
-                        <RubricPreview rubric={selectedRubric} />
-                    </div>
-                )}
-                <input
-                    type="file"
-                    tabIndex={0}
-                    autoFocus
-                    aria-label={lf("Select rubric file.")}
-                    onChange={handleFileChange}
-                />
+                <DragAndDropFileSurface onFileDroppedAsync={handleFileDroppedAsync} errorMessage={errorMessage} />
             </div>
         </Modal>
     ) : null;

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

@@ -0,0 +1,5 @@
+.confirmation-modal {
+    button.caution {
+        background-color: var(--pxt-toast-accent-error)
+    }
+}

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

@@ -0,0 +1,73 @@
+.drag-and-drop-file-surface {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+
+    background-color: var(--pxt-content-background);
+    border-radius: 0.5rem;
+    border: 1px dashed var(--pxt-content-secondary-foreground);
+
+    padding: 2rem;
+    min-height: 30vh;
+
+    .instruction-container {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        color: var(--pxt-content-secondary-foreground);
+        font-size: 2rem;
+        font-weight: 600;
+
+        .upload-icon {
+            font-size: 3rem;
+        }
+
+        .or-browse-container {
+            display: flex;
+            flex-direction: row;
+            gap: 0.5rem;
+
+            .or-container {
+                font-weight: 400;
+            }
+
+            .browse-button {
+                font-weight: 600;
+                font-size: 2rem;
+            }
+        }
+    }
+
+    @keyframes fadeInAndOut {
+        0% { opacity: 0; }
+        5% { opacity: 1; }
+        50% { opacity: 1; }
+        100% { opacity: 0; }
+    }
+
+    .error-label-container {
+        position: absolute;
+        bottom: 1rem;
+        animation: fadeInAndOut 4s forwards;
+
+        i {
+            display: none;
+        }
+    }
+
+    .droppable-surface {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+
+        pointer-events: none;
+        &.dragging {
+            pointer-events: all;
+        }
+    }
+}

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

@@ -1,13 +1,19 @@
-.import-rubric {
-    display: flex;
-    flex-direction: column;
-    gap: 0.5rem;
+.import-rubric-modal {
+    div[class*="common-modal-body"] {
+        background-color: var(--pxt-content-background);
+    }
+
+    .import-rubric {
+        display: flex;
+        flex-direction: column;
+        gap: 0.5rem;
 
-    .rubric-preview-container {
-        max-height: 50vh;
-        overflow-y: auto;
-        border: 2px solid var(--pxt-content-foreground);
-        border-radius: 0.3rem;
-        background-color: var(--pxt-content-background-glass);
+        .rubric-preview-container {
+            max-height: 50vh;
+            overflow-y: auto;
+            border: 2px solid var(--pxt-content-foreground);
+            border-radius: 0.3rem;
+            background-color: var(--pxt-content-background-glass);
+        }
     }
-}
+}