From 5937787c40d33a729f4b07cd5f4dc783a721f621 Mon Sep 17 00:00:00 2001
From: Thomas Sparks <69657545+thsparks@users.noreply.github.com>
Date: Mon, 5 Feb 2024 14:06:26 -0800
Subject: [PATCH] Teacher Tool: Import and Export Rubric (#9845)

This change enables exporting rubrics to a file and importing them again. I've tucked the options behind a new "Action Menu", which is just a meatball menu on the right side of the toolbar. I didn't spend a ton of time styling that, just wanted to get something fairly quick working.
---
 pxtlib/util.ts                                |  5 +
 teachertool/src/App.tsx                       |  2 +
 teachertool/src/components/ActionsMenu.tsx    | 49 +++++++++
 .../src/components/ActiveRubricDisplay.tsx    |  4 +-
 teachertool/src/components/CatalogModal.tsx   |  2 +-
 teachertool/src/components/DebugInput.tsx     |  4 -
 .../src/components/ImportRubricModal.tsx      | 99 +++++++++++++++++++
 teachertool/src/components/NoticeLabel.tsx    | 37 +++++++
 teachertool/src/components/RubricPreview.tsx  | 24 +++++
 .../src/components/RubricWorkspace.tsx        |  5 +-
 .../styling/ActionsMenu.module.scss           | 26 +++++
 .../styling/ImportRubricModal.module.scss     | 13 +++
 .../styling/NoticeLabel.module.scss           | 43 ++++++++
 .../styling/RubricPreview.module.scss         | 24 +++++
 teachertool/src/services/fileSystemService.ts | 33 +++++++
 teachertool/src/state/helpers.ts              | 38 ++++++-
 .../src/transforms/getRubricFromFileAsync.ts  | 20 ++++
 teachertool/src/transforms/hideModal.ts       |  7 +-
 teachertool/src/transforms/setRubric.ts       |  8 ++
 .../{showCatalogModal.ts => showModal.ts}     |  5 +-
 .../tryLoadLastActiveRubricAsync.ts           | 42 +-------
 teachertool/src/types/errorCode.ts            |  5 +-
 teachertool/src/types/index.ts                |  2 +-
 webapp/src/package.ts                         |  3 +-
 24 files changed, 443 insertions(+), 57 deletions(-)
 create mode 100644 teachertool/src/components/ActionsMenu.tsx
 create mode 100644 teachertool/src/components/ImportRubricModal.tsx
 create mode 100644 teachertool/src/components/NoticeLabel.tsx
 create mode 100644 teachertool/src/components/RubricPreview.tsx
 create mode 100644 teachertool/src/components/styling/ActionsMenu.module.scss
 create mode 100644 teachertool/src/components/styling/ImportRubricModal.module.scss
 create mode 100644 teachertool/src/components/styling/NoticeLabel.module.scss
 create mode 100644 teachertool/src/components/styling/RubricPreview.module.scss
 create mode 100644 teachertool/src/services/fileSystemService.ts
 create mode 100644 teachertool/src/transforms/getRubricFromFileAsync.ts
 create mode 100644 teachertool/src/transforms/setRubric.ts
 rename teachertool/src/transforms/{showCatalogModal.ts => showModal.ts} (52%)

diff --git a/pxtlib/util.ts b/pxtlib/util.ts
index bb98dbcc3b7e..f7e6d84a151b 100644
--- a/pxtlib/util.ts
+++ b/pxtlib/util.ts
@@ -185,6 +185,11 @@ namespace ts.pxtc.Util {
         }
     }
 
+    export function sanitizeFileName(name: string): string {
+        /* eslint-disable no-control-regex */
+        return name.replace(/[()\\\/.,?*^:<>!;'#$%^&|"@+=«»°{}\[\]¾½¼³²¦¬¤¢£~­¯¸`±\x00-\x1F]/g, '').trim().replace(/\s+/g, '-');
+    }
+
     export function repeatMap<T>(n: number, fn: (index: number) => T): T[] {
         n = n || 0;
         let r: T[] = [];
diff --git a/teachertool/src/App.tsx b/teachertool/src/App.tsx
index fde995629a32..893c2fbfe5c9 100644
--- a/teachertool/src/App.tsx
+++ b/teachertool/src/App.tsx
@@ -16,6 +16,7 @@ import { postNotification } from "./transforms/postNotification";
 import { loadCatalogAsync } from "./transforms/loadCatalogAsync";
 import { loadValidatorPlansAsync } from "./transforms/loadValidatorPlansAsync";
 import { tryLoadLastActiveRubricAsync } from "./transforms/tryLoadLastActiveRubricAsync";
+import { ImportRubricModal } from "./components/ImportRubricModal";
 
 export const App = () => {
     const { state, dispatch } = useContext(AppStateContext);
@@ -58,6 +59,7 @@ export const App = () => {
             <HeaderBar />
             <MainPanel />
             <CatalogModal />
+            <ImportRubricModal />
             <Notifications />
         </>
     );
diff --git a/teachertool/src/components/ActionsMenu.tsx b/teachertool/src/components/ActionsMenu.tsx
new file mode 100644
index 000000000000..784e5da17378
--- /dev/null
+++ b/teachertool/src/components/ActionsMenu.tsx
@@ -0,0 +1,49 @@
+import { useContext } from "react";
+import { MenuDropdown, MenuItem } from "react-common/components/controls/MenuDropdown";
+import { writeRubricToFile } from "../services/fileSystemService";
+import { AppStateContext } from "../state/appStateContext";
+// eslint-disable-next-line import/no-internal-modules
+import css from "./styling/ActionsMenu.module.scss";
+import { showModal } from "../transforms/showModal";
+
+export interface IProps {}
+
+export const ActionsMenu: React.FC<IProps> = () => {
+    const { state: teacherTool } = useContext(AppStateContext);
+
+    function handleImportRubricClicked() {
+        showModal("import-rubric");
+    }
+
+    function handleExportRubricClicked() {
+        writeRubricToFile(teacherTool.rubric);
+    }
+
+    const menuItems: MenuItem[] = [
+        {
+            id: "import-rubric",
+            title: lf("Import Rubric"),
+            label: lf("Import Rubric"),
+            ariaLabel: lf("Import Rubric"),
+            onClick: handleImportRubricClicked,
+        },
+        {
+            id: "export-rubric",
+            title: lf("Export Rubric"),
+            label: lf("Export Rubric"),
+            ariaLabel: lf("Export Rubric"),
+            onClick: handleExportRubricClicked,
+        },
+    ];
+
+    const dropdownLabel = <i className={"fas fa-ellipsis-v"} />;
+    return (
+        <MenuDropdown
+            id="actions-menu"
+            className={css["actions-menu"]}
+            items={menuItems}
+            title={"Actions"}
+            label={dropdownLabel}
+        />
+    );
+};
diff --git a/teachertool/src/components/ActiveRubricDisplay.tsx b/teachertool/src/components/ActiveRubricDisplay.tsx
index 5c6b996999ca..528d81e6a542 100644
--- a/teachertool/src/components/ActiveRubricDisplay.tsx
+++ b/teachertool/src/components/ActiveRubricDisplay.tsx
@@ -5,7 +5,7 @@ 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 { showModal } from "../transforms/showModal";
 import { setRubricName } from "../transforms/setRubricName";
 import { DebouncedInput } from "./DebouncedInput";
 
@@ -45,7 +45,7 @@ export const ActiveRubricDisplay: React.FC<IProps> = ({}) => {
             <Button
                 className="inline"
                 label={lf("+ Add Criteria")}
-                onClick={showCatalogModal}
+                onClick={() => showModal("catalog-display")}
                 title={lf("Add Criteria")}
             />
         </div>
diff --git a/teachertool/src/components/CatalogModal.tsx b/teachertool/src/components/CatalogModal.tsx
index 291b963c5531..c196d1f89738 100644
--- a/teachertool/src/components/CatalogModal.tsx
+++ b/teachertool/src/components/CatalogModal.tsx
@@ -34,7 +34,7 @@ export const CatalogModal: React.FC<IProps> = ({}) => {
     }
 
     function closeModal() {
-        hideModal("catalog-display");
+        hideModal();
 
         // Clear for next open.
         setCheckedCriteria(new Set<string>());
diff --git a/teachertool/src/components/DebugInput.tsx b/teachertool/src/components/DebugInput.tsx
index 5d8dfb3028fb..5574e7e7cddd 100644
--- a/teachertool/src/components/DebugInput.tsx
+++ b/teachertool/src/components/DebugInput.tsx
@@ -1,10 +1,6 @@
 /// <reference path="../../../built/pxtblocks.d.ts"/>
 
-import { useState } from "react";
 import { Button } from "react-common/components/controls/Button";
-import { Input } from "react-common/components/controls/Input";
-import { Textarea } from "react-common/components/controls/Textarea";
-import { loadProjectMetadataAsync } from "../transforms/loadProjectMetadataAsync";
 import { runEvaluateAsync } from "../transforms/runEvaluateAsync";
 
 interface IProps {}
diff --git a/teachertool/src/components/ImportRubricModal.tsx b/teachertool/src/components/ImportRubricModal.tsx
new file mode 100644
index 000000000000..b3d91e06a31d
--- /dev/null
+++ b/teachertool/src/components/ImportRubricModal.tsx
@@ -0,0 +1,99 @@
+import { useContext, useEffect, useState } from "react";
+import { AppStateContext } from "../state/appStateContext";
+import { Modal } from "react-common/components/controls/Modal";
+import { hideModal } from "../transforms/hideModal";
+// eslint-disable-next-line import/no-internal-modules
+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";
+
+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]);
+        } else {
+            setSelectedFile(undefined);
+        }
+    }
+
+    function handleImportClicked() {
+        if (selectedRubric) {
+            setRubric(selectedRubric);
+        }
+
+        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}>
+            <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}
+                />
+            </div>
+        </Modal>
+    ) : null;
+};
diff --git a/teachertool/src/components/NoticeLabel.tsx b/teachertool/src/components/NoticeLabel.tsx
new file mode 100644
index 000000000000..2c5ba4ad5269
--- /dev/null
+++ b/teachertool/src/components/NoticeLabel.tsx
@@ -0,0 +1,37 @@
+import { classList } from "react-common/components/util";
+// eslint-disable-next-line import/no-internal-modules
+import css from "./styling/NoticeLabel.module.scss";
+
+export type NoticeLabelSeverity = "info" | "warning" | "error" | "neutral";
+
+export interface INoticeLabelProps extends React.PropsWithChildren<{}> {
+    severity: NoticeLabelSeverity;
+}
+
+export const NoticeLabel: React.FC<INoticeLabelProps> = props => {
+    let iconClass = undefined;
+    switch (props.severity) {
+        case "info":
+            iconClass = "fas fa-exclamation-circle";
+            break;
+        case "warning":
+            iconClass = "fas fa-exclamation-triangle";
+            break;
+        case "error":
+            iconClass = "fas fa-times";
+            break;
+        case "neutral":
+        default:
+            // no icon
+            break;
+    }
+
+    return (
+        <div className={css["notice-label-background"]}>
+            <div className={classList(css["notice-label-container"], css[`${props.severity}-notice-label-container`])}>
+                {props.severity !== "neutral" && <i className={classList(iconClass, css["icon"])} />}
+                <label className="notice-label">{props.children}</label>
+            </div>
+        </div>
+    );
+};
diff --git a/teachertool/src/components/RubricPreview.tsx b/teachertool/src/components/RubricPreview.tsx
new file mode 100644
index 000000000000..a2000bd186dc
--- /dev/null
+++ b/teachertool/src/components/RubricPreview.tsx
@@ -0,0 +1,24 @@
+import { getCatalogCriteriaWithId } from "../state/helpers";
+import { Rubric } from "../types/rubric";
+// eslint-disable-next-line import/no-internal-modules
+import css from "./styling/RubricPreview.module.scss";
+
+export interface IRubricPreviewProps {
+    rubric: Rubric;
+}
+
+export const RubricPreview: React.FC<IRubricPreviewProps> = ({ rubric }) => {
+    return (
+        <div className={css["container"]}>
+            <div className={css["rubric-header"]}>{rubric.name}</div>
+            {rubric.criteria.map((c, i) => {
+                const template = getCatalogCriteriaWithId(c.catalogCriteriaId)?.template;
+                return template ? (
+                    <div key={i} className={css["rubric-criteria"]}>
+                        {template}
+                    </div>
+                ) : null;
+            })}
+        </div>
+    );
+};
diff --git a/teachertool/src/components/RubricWorkspace.tsx b/teachertool/src/components/RubricWorkspace.tsx
index 9b29185a9d7f..fb0e9a235d28 100644
--- a/teachertool/src/components/RubricWorkspace.tsx
+++ b/teachertool/src/components/RubricWorkspace.tsx
@@ -8,6 +8,7 @@ import { TabPanel } from "./TabPanel";
 import { DebugInput } from "./DebugInput";
 import { EvalResultDisplay } from "./EvalResultDisplay";
 import { ActiveRubricDisplay } from "./ActiveRubricDisplay";
+import { ActionsMenu } from "./ActionsMenu";
 
 interface IProps {}
 
@@ -23,7 +24,9 @@ export const RubricWorkspace: React.FC<IProps> = () => {
                 {/* Center */}
                 <></>
                 {/* Right */}
-                <></>
+                <>
+                    <ActionsMenu />
+                </>
             </Toolbar>
             <TabPanel name="rubric">
                 <DebugInput />
diff --git a/teachertool/src/components/styling/ActionsMenu.module.scss b/teachertool/src/components/styling/ActionsMenu.module.scss
new file mode 100644
index 000000000000..ec8e052b4ca1
--- /dev/null
+++ b/teachertool/src/components/styling/ActionsMenu.module.scss
@@ -0,0 +1,26 @@
+.actions-menu {
+    button[class*="menu-button"] {
+        padding: 0rem 0.2rem;
+        color: var(--pxt-content-foreground);
+    }
+
+    button[class*="common-menu-dropdown-item"] {
+        color: var(--pxt-content-foreground);
+    }
+
+    ul {
+        background-color: var(--pxt-content-background);
+    }
+
+    li {
+        border-bottom: 1px solid var(--pxt-content-accent);
+
+        &:last-child {
+            border-bottom: none;
+        }
+
+        &:hover {
+            background-color: var(--pxt-content-accent);
+        }
+    }
+}
\ No newline at end of file
diff --git a/teachertool/src/components/styling/ImportRubricModal.module.scss b/teachertool/src/components/styling/ImportRubricModal.module.scss
new file mode 100644
index 000000000000..0fe511c6c64c
--- /dev/null
+++ b/teachertool/src/components/styling/ImportRubricModal.module.scss
@@ -0,0 +1,13 @@
+.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);
+    }
+}
\ No newline at end of file
diff --git a/teachertool/src/components/styling/NoticeLabel.module.scss b/teachertool/src/components/styling/NoticeLabel.module.scss
new file mode 100644
index 000000000000..5502dd2c1335
--- /dev/null
+++ b/teachertool/src/components/styling/NoticeLabel.module.scss
@@ -0,0 +1,43 @@
+.notice-label-background {
+    border-color: var(--pxt-content-foreground);
+    background-color: var(--pxt-content-background);
+    border-radius: 0.3rem;
+
+    .notice-label-container {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        padding: 0.3rem;
+        border-radius: 0.3rem;
+        border: 2px solid
+    }
+
+    .error-notice-label-container {
+        border-color: rgba(red, 0.2);
+        background-color: rgba(red, 0.2);
+        justify-content: flex-start;
+    }
+
+    .warning-notice-label-container {
+        border-color: rgba(orange, 0.4);
+        background-color: rgba(orange, 0.4);
+        justify-content: flex-start;
+    }
+
+    .info-notice-label-container {
+        border-color: rgba(blue, 0.2);
+        background-color: rgba(blue, 0.2);
+        justify-content: flex-start;
+    }
+
+    .neutral-notice-label-container {
+        border-color: rgba(black, 0.1);
+        background-color: rgba(black, 0.1);
+        align-content: center;
+        justify-content: center;
+    }
+
+    .icon {
+        margin-right: 0.5rem;
+    }
+}
\ No newline at end of file
diff --git a/teachertool/src/components/styling/RubricPreview.module.scss b/teachertool/src/components/styling/RubricPreview.module.scss
new file mode 100644
index 000000000000..8702dcf9064c
--- /dev/null
+++ b/teachertool/src/components/styling/RubricPreview.module.scss
@@ -0,0 +1,24 @@
+.container {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: flex-start;
+
+    .rubric-header {
+        width: 100%;
+        font-weight: bold;
+        margin-bottom: 0.1rem;
+        border-bottom: 1px solid var(--pxt-content-foreground);
+        padding: 0.2rem 0.5rem;
+    }
+
+    .rubric-criteria {
+        width: 100%;
+        padding: 0.2rem 0.5rem;
+        border-bottom: 1px solid var(--pxt-content-accent);
+
+        &:last-child {
+            border-bottom: none;
+        }
+    }
+}
\ No newline at end of file
diff --git a/teachertool/src/services/fileSystemService.ts b/teachertool/src/services/fileSystemService.ts
new file mode 100644
index 000000000000..585b602f8f7e
--- /dev/null
+++ b/teachertool/src/services/fileSystemService.ts
@@ -0,0 +1,33 @@
+import { logError } from "../services/loggingService";
+import { ErrorCode } from "../types/errorCode";
+import { Rubric } from "../types/rubric";
+
+// Serializes the active rubric and writes it to a file.
+// Returns true if the file was written successfully, false otherwise.
+export function writeRubricToFile(rubric: Rubric): boolean {
+    const sanitizedName = rubric.name ? pxt.Util.sanitizeFileName(rubric.name) : "";
+    const fileName = `${sanitizedName ? sanitizedName : lf("unnamed-rubric")}.json`;
+
+    // Write content to the given path on disk.
+    const rubricJson = JSON.stringify(rubric, null, 4);
+
+    try {
+        pxt.BrowserUtils.browserDownloadText(rubricJson, fileName);
+        return true;
+    } catch (error) {
+        logError(ErrorCode.unableToExportRubric, error);
+        return false;
+    }
+}
+
+export async function loadRubricFromFileAsync(file: File): Promise<Rubric | undefined> {
+    let rubric: Rubric | undefined = undefined;
+
+    try {
+        const rubricJson = await pxt.Util.fileReadAsTextAsync(file);
+        rubric = JSON.parse(rubricJson) as Rubric;
+    } catch (error) {
+        logError(ErrorCode.unableToReadRubricFile, error);
+    }
+    return rubric;
+}
diff --git a/teachertool/src/state/helpers.ts b/teachertool/src/state/helpers.ts
index 55497c8a8f66..6dc5c16c4d95 100644
--- a/teachertool/src/state/helpers.ts
+++ b/teachertool/src/state/helpers.ts
@@ -1,7 +1,43 @@
-import { CatalogCriteria } from "../types/criteria";
+import { logError } from "../services/loggingService";
+import { CatalogCriteria, CriteriaInstance } from "../types/criteria";
+import { ErrorCode } from "../types/errorCode";
+import { Rubric } from "../types/rubric";
 import { stateAndDispatch } from "./appStateContext";
 
 export function getCatalogCriteriaWithId(id: string): CatalogCriteria | undefined {
     const { state } = stateAndDispatch();
     return state.catalog?.find(c => c.id === id);
 }
+
+export function verifyCriteriaInstanceIntegrity(instance: CriteriaInstance) {
+    const catalogCriteria = getCatalogCriteriaWithId(instance.catalogCriteriaId);
+
+    if (!catalogCriteria) {
+        throw new Error("Unrecognized catalog id in criteria instance.");
+    }
+
+    for (const param of instance.params ?? []) {
+        if (!catalogCriteria?.parameters?.find(p => p.name === param.name)) {
+            throw new Error("Unrecognized parameter in criteria instance.");
+        }
+    }
+}
+
+export function verifyRubricIntegrity(rubric: Rubric): {
+    valid: boolean;
+    validCriteria: CriteriaInstance[];
+    invalidCriteria: CriteriaInstance[];
+} {
+    const validCriteria: CriteriaInstance[] = [];
+    const invalidCriteria: CriteriaInstance[] = [];
+    for (const criteria of rubric.criteria) {
+        try {
+            verifyCriteriaInstanceIntegrity(criteria);
+            validCriteria.push(criteria);
+        } catch (error) {
+            logError(ErrorCode.unableToLoadCriteriaInstance, error);
+            invalidCriteria.push(criteria);
+        }
+    }
+    return { valid: invalidCriteria.length === 0, validCriteria, invalidCriteria };
+}
diff --git a/teachertool/src/transforms/getRubricFromFileAsync.ts b/teachertool/src/transforms/getRubricFromFileAsync.ts
new file mode 100644
index 000000000000..a9c94e278378
--- /dev/null
+++ b/teachertool/src/transforms/getRubricFromFileAsync.ts
@@ -0,0 +1,20 @@
+import { logDebug, logError } from "../services/loggingService";
+import { loadRubricFromFileAsync } from "../services/fileSystemService";
+import { verifyRubricIntegrity } from "../state/helpers";
+import { Rubric } from "../types/rubric";
+
+export async function getRubricFromFileAsync(file: File, allowPartial: boolean): Promise<Rubric | undefined> {
+    let rubric = await loadRubricFromFileAsync(file);
+
+    if (rubric) {
+        logDebug(`Loading rubric '${rubric.name}' from file...`);
+
+        const rubricVerificationResult = verifyRubricIntegrity(rubric);
+
+        if (!rubricVerificationResult.valid) {
+            rubric = allowPartial ? { ...rubric, criteria: rubricVerificationResult.validCriteria } : undefined;
+        }
+    }
+
+    return rubric;
+}
diff --git a/teachertool/src/transforms/hideModal.ts b/teachertool/src/transforms/hideModal.ts
index 59ea02157ef5..ad80749e8902 100644
--- a/teachertool/src/transforms/hideModal.ts
+++ b/teachertool/src/transforms/hideModal.ts
@@ -1,14 +1,13 @@
 import { logDebug } from "../services/loggingService";
 import { stateAndDispatch } from "../state";
 import * as Actions from "../state/actions";
-import { ModalType } from "../types";
 
-export function hideModal(modal: ModalType) {
+export function hideModal() {
     const { state: teacherTool, dispatch } = stateAndDispatch();
 
-    if (teacherTool.modal === modal) {
+    if (teacherTool.modal !== undefined) {
         dispatch(Actions.hideModal());
     } else {
-        logDebug(`Trying to hide '${modal}' model when it was not active`);
+        logDebug(`Trying to hide model when no modal is active`);
     }
 }
diff --git a/teachertool/src/transforms/setRubric.ts b/teachertool/src/transforms/setRubric.ts
new file mode 100644
index 000000000000..27564be7cf84
--- /dev/null
+++ b/teachertool/src/transforms/setRubric.ts
@@ -0,0 +1,8 @@
+import { stateAndDispatch } from "../state";
+import { Rubric } from "../types/rubric";
+import * as Actions from "../state/actions";
+
+export function setRubric(rubric: Rubric) {
+    const { dispatch } = stateAndDispatch();
+    dispatch(Actions.setRubric(rubric));
+}
diff --git a/teachertool/src/transforms/showCatalogModal.ts b/teachertool/src/transforms/showModal.ts
similarity index 52%
rename from teachertool/src/transforms/showCatalogModal.ts
rename to teachertool/src/transforms/showModal.ts
index 76ec379a048d..f8154135e01b 100644
--- a/teachertool/src/transforms/showCatalogModal.ts
+++ b/teachertool/src/transforms/showModal.ts
@@ -1,7 +1,8 @@
 import { stateAndDispatch } from "../state";
 import * as Actions from "../state/actions";
+import { ModalType } from "../types";
 
-export function showCatalogModal() {
+export function showModal(modal: ModalType) {
     const { dispatch } = stateAndDispatch();
-    dispatch(Actions.showModal("catalog-display"));
+    dispatch(Actions.showModal(modal));
 }
diff --git a/teachertool/src/transforms/tryLoadLastActiveRubricAsync.ts b/teachertool/src/transforms/tryLoadLastActiveRubricAsync.ts
index e8229cebd8d6..28884947ba1e 100644
--- a/teachertool/src/transforms/tryLoadLastActiveRubricAsync.ts
+++ b/teachertool/src/transforms/tryLoadLastActiveRubricAsync.ts
@@ -1,55 +1,23 @@
-import { stateAndDispatch } from "../state";
-import * as Actions from "../state/actions";
 import { getLastActiveRubricAsync } from "../services/indexedDbService";
 import { logDebug, logError } from "../services/loggingService";
-import { CriteriaInstance } from "../types/criteria";
-import { getCatalogCriteriaWithId } from "../state/helpers";
-import { ErrorCode } from "../types/errorCode";
 import { postNotification } from "./postNotification";
 import { makeNotification } from "../utils";
-
-function validateCriteriaInstance(instance: CriteriaInstance) {
-    const catalogCriteria = getCatalogCriteriaWithId(instance.catalogCriteriaId);
-
-    if (!catalogCriteria) {
-        logError(
-            ErrorCode.loadUnrecognizedCatalogId,
-            "Attempting to load criteria instance with unrecognized catalog id",
-            { catalogCriteriaId: instance.catalogCriteriaId }
-        );
-        return false;
-    }
-
-    for (const param of instance.params ?? []) {
-        if (!catalogCriteria?.parameters?.find(p => p.name === param.name)) {
-            logError(
-                ErrorCode.loadUnrecognizedParameter,
-                "Attempting to load criteria instance with unrecognized parameter",
-                { catalogCriteriaId: instance.catalogCriteriaId, paramName: param.name }
-            );
-            return false;
-        }
-    }
-
-    return true;
-}
+import { setRubric } from "./setRubric";
+import { verifyRubricIntegrity } from "../state/helpers";
 
 export async function tryLoadLastActiveRubricAsync() {
-    const { dispatch } = stateAndDispatch();
-
     const lastActiveRubric = await getLastActiveRubricAsync();
 
     if (lastActiveRubric) {
         logDebug(`Loading last active rubric '${lastActiveRubric.name}'...`);
 
-        const initialCriteriaCount = lastActiveRubric.criteria.length;
-        lastActiveRubric.criteria = lastActiveRubric.criteria.filter(validateCriteriaInstance);
+        const rubricVerificationResult = verifyRubricIntegrity(lastActiveRubric);
 
-        if (lastActiveRubric.criteria.length !== initialCriteriaCount) {
+        if (!rubricVerificationResult.valid) {
             postNotification(makeNotification(lf("Some criteria could not be loaded."), 2000));
         }
 
-        dispatch(Actions.setRubric(lastActiveRubric));
+        setRubric({ ...lastActiveRubric, criteria: rubricVerificationResult.validCriteria });
     } else {
         logDebug(`No last active rubric to load.`);
     }
diff --git a/teachertool/src/types/errorCode.ts b/teachertool/src/types/errorCode.ts
index 3a2a17992b12..34b6b5f24464 100644
--- a/teachertool/src/types/errorCode.ts
+++ b/teachertool/src/types/errorCode.ts
@@ -10,6 +10,7 @@ export enum ErrorCode {
     unableToGetIndexedDbRecord = "unableToGetIndexedDbRecord",
     unableToSetIndexedDbRecord = "unableToSetIndexedDbRecord",
     unableToDeleteIndexedDbRecord = "unableToDeleteIndexedDbRecord",
-    loadUnrecognizedCatalogId = "loadUnrecognizedCatalogId",
-    loadUnrecognizedParameter = "loadUnrecognizedParameter",
+    unableToLoadCriteriaInstance = "unableToLoadCriteriaInstance",
+    unableToExportRubric = "unableToExportRubric",
+    unableToReadRubricFile = "unableToReadRubricFile",
 }
diff --git a/teachertool/src/types/index.ts b/teachertool/src/types/index.ts
index 8e13611aa7ba..6002cd1d7e5f 100644
--- a/teachertool/src/types/index.ts
+++ b/teachertool/src/types/index.ts
@@ -10,6 +10,6 @@ export type NotificationWithId = Notification & {
 
 export type Notifications = NotificationWithId[];
 
-export type ModalType = "catalog-display";
+export type ModalType = "catalog-display" | "import-rubric";
 
 export type TabName = "rubric" | "results";
diff --git a/webapp/src/package.ts b/webapp/src/package.ts
index a1925d6701c0..815ee899a3c5 100644
--- a/webapp/src/package.ts
+++ b/webapp/src/package.ts
@@ -787,8 +787,7 @@ export function mainEditorPkg() {
 
 export function genFileName(extension: string): string {
     /* eslint-disable no-control-regex */
-    let sanitizedName = mainEditorPkg().header.name.replace(/[()\\\/.,?*^:<>!;'#$%^&|"@+=«»°{}\[\]¾½¼³²¦¬¤¢£~­¯¸`±\x00-\x1F]/g, '');
-    sanitizedName = sanitizedName.trim().replace(/\s+/g, '-');
+    let sanitizedName = pxt.Util.sanitizeFileName(mainEditorPkg().header.name);
     /* eslint-enable no-control-regex */
     if (pxt.appTarget.appTheme && pxt.appTarget.appTheme.fileNameExclusiveFilter) {
         const rx = new RegExp(pxt.appTarget.appTheme.fileNameExclusiveFilter, 'g');