teacher tool: add auto-run toggle (#9851)

* teacher tool: add auto-run * min exports * no-var * autorun on rubric change * use aria-pressed for toggle button * remove localstorage json apis
microsoft · Feb 7, 2024 · 360c7bf · 360c7bf
1 parent b2f8b88
commit 360c7bf
Show file tree

Hide file tree

Showing 22 changed files with 324 additions and 177 deletions.
diff --git a/react-common/components/controls/Button.tsx b/react-common/components/controls/Button.tsx
@@ -21,6 +21,7 @@ export interface ButtonViewProps extends ContainerProps {
     ariaPosInSet?: number;
     ariaSetSize?: number;
     ariaSelected?: boolean;
+    ariaPressed?: boolean | "mixed";
 }
 
 
@@ -44,6 +45,7 @@ export const Button = (props: ButtonProps) => {
         ariaPosInSet,
         ariaSetSize,
         ariaSelected,
+        ariaPressed,
         role,
         onClick,
         onKeydown,
@@ -101,7 +103,8 @@ export const Button = (props: ButtonProps) => {
             aria-posinset={ariaPosInSet}
             aria-setsize={ariaSetSize}
             aria-describedby={ariaDescribedBy}
-            aria-selected={ariaSelected}>
+            aria-selected={ariaSelected}
+            aria-pressed={ariaPressed}>
                 {(leftIcon || rightIcon || label) && (
                     <span className="common-button-flex">
                         {leftIcon && <i className={leftIcon} aria-hidden={true}/>}

diff --git a/teachertool/src/App.tsx b/teachertool/src/App.tsx
@@ -6,12 +6,10 @@ import * as Actions from "./state/actions";
 import * as NotificationService from "./services/notificationService";
 import { downloadTargetConfigAsync } from "./services/backendRequests";
 import { logDebug } from "./services/loggingService";
-
 import { HeaderBar } from "./components/HeaderBar";
 import { MainPanel } from "./components/MainPanel";
 import { Notifications } from "./components/Notifications";
 import { CatalogModal } from "./components/CatalogModal";
-
 import { postNotification } from "./transforms/postNotification";
 import { loadCatalogAsync } from "./transforms/loadCatalogAsync";
 import { loadValidatorPlansAsync } from "./transforms/loadValidatorPlansAsync";
@@ -27,6 +25,7 @@ export const App = () => {
     useEffect(() => {
         if (ready && !inited) {
             NotificationService.initialize();
+
             Promise.resolve().then(async () => {
                 const cfg = await downloadTargetConfigAsync();
                 dispatch(Actions.setTargetConfig(cfg || {}));
@@ -35,17 +34,13 @@ export const App = () => {
                 // Load catalog and validator plans into state.
                 await loadCatalogAsync();
                 await loadValidatorPlansAsync();
-
                 await tryLoadLastActiveRubricAsync();
 
-                // TODO: Remove this. Delay app init to expose any startup race conditions.
-                setTimeout(() => {
-                    // Test notification
-                    postNotification(makeNotification("🎓", 2000));
-                    setInited(true);
+                // Test notification
+                postNotification(makeNotification("🎓", 2000));
 
-                    logDebug("App initialized");
-                }, 10);
+                setInited(true);
+                logDebug("App initialized");
             });
         }
     }, [ready, inited]);

diff --git a/teachertool/src/components/RubricWorkspace.tsx b/teachertool/src/components/RubricWorkspace.tsx
@@ -9,14 +9,14 @@ import { TabGroup, TabButton } from "./TabGroup";
 import { TabPanel } from "./TabPanel";
 import { EvalResultDisplay } from "./EvalResultDisplay";
 import { ActiveRubricDisplay } from "./ActiveRubricDisplay";
-import { ToolbarControlGroup, ToolbarButton, ToolbarMenuDropdown } from "./ToolbarControls";
 import { MenuItem } from "react-common/components/controls/MenuDropdown";
 import { TabName } from "../types";
 import { runEvaluateAsync } from "../transforms/runEvaluateAsync";
 import { writeRubricToFile } from "../services/fileSystemService";
 import { showModal } from "../transforms/showModal";
 import { isProjectLoaded } from "../state/helpers";
 import { setActiveTab } from "../transforms/setActiveTab";
+import { setAutorun } from "../transforms/setAutorun";
 
 function handleImportRubricClicked() {
     showModal("import-rubric");
@@ -58,6 +58,21 @@ const WorkspaceTabPanels: React.FC = () => {
     );
 };
 
+const WorkspaceAutorun: React.FC = () => {
+    const { state: teacherTool } = useContext(AppStateContext);
+    const { autorun } = teacherTool;
+
+    const onChange = (checked: boolean) => {
+        setAutorun(checked);
+    };
+
+    return (
+        <Toolbar.ControlGroup>
+            <Toolbar.Toggle label={lf("auto-run")} isChecked={autorun} onChange={onChange} />
+        </Toolbar.ControlGroup>
+    );
+};
+
 function getActionMenuItems(tab: TabName): MenuItem[] {
     switch (tab) {
         case "rubric":
@@ -87,20 +102,20 @@ const WorkspaceToolbarButtons: React.FC = () => {
     const actionItems = getActionMenuItems(activeTab);
 
     return (
-        <ToolbarControlGroup>
+        <Toolbar.ControlGroup>
             {activeTab === "results" && (
-                <ToolbarButton icon="fas fa-print" title={lf("Print")} onClick={() => console.log("Print")} />
+                <Toolbar.Button icon="fas fa-print" title={lf("Print")} onClick={() => console.log("Print")} />
             )}
 
-            <ToolbarButton
+            <Toolbar.Button
                 icon="fas fa-play"
                 title={lf("Evaluate")}
                 onClick={handleEvaluateClickedAsync}
                 disabled={!isProjectLoaded(teacherTool)}
             />
 
-            <ToolbarMenuDropdown title={lf("More Actions")} items={actionItems} disabled={!actionItems.length} />
-        </ToolbarControlGroup>
+            <Toolbar.MenuDropdown title={lf("More Actions")} items={actionItems} disabled={!actionItems.length} />
+        </Toolbar.ControlGroup>
     );
 };
 
@@ -109,7 +124,7 @@ interface IProps {}
 export const RubricWorkspace: React.FC<IProps> = () => {
     return (
         <div className={css.panel}>
-            <Toolbar left={<WorkspaceTabButtons />} right={<WorkspaceToolbarButtons />} />
+            <Toolbar left={<WorkspaceTabButtons />} center={<WorkspaceAutorun />} right={<WorkspaceToolbarButtons />} />
             <WorkspaceTabPanels />
         </div>
     );

diff --git a/teachertool/src/components/Toolbar.tsx b/teachertool/src/components/Toolbar.tsx
@@ -3,14 +3,72 @@ import * as React from "react";
 import css from "./styling/Toolbar.module.scss";
 
 import { classList } from "react-common/components/util";
+import { Button, ButtonProps } from "react-common/components/controls/Button";
+import { MenuDropdown, MenuDropdownProps } from "react-common/components/controls/MenuDropdown";
 
-interface IProps {
+interface ToolbarButtonProps extends ButtonProps {
+    icon: string;
+}
+
+const ToolbarButton: React.FC<ToolbarButtonProps> = props => {
+    return (
+        <Button {...props} className={classList(css["toolbar-button"], "tt-toolbar-button")} rightIcon={props.icon} />
+    );
+};
+
+interface ToolbarControlGroupProps extends React.PropsWithChildren<{}> {}
+
+const ToolbarControlGroup: React.FC<ToolbarControlGroupProps> = ({ children }) => {
+    return <div className={classList(css["toolbar-control-group"], "tt-toolbar-control-group")}>{children}</div>;
+};
+
+interface ToolbarMenuDropdownProps extends MenuDropdownProps {}
+
+const ToolbarMenuDropdown: React.FC<ToolbarMenuDropdownProps> = props => {
+    const dropdownLabel = <i className={"fas fa-ellipsis-v"} />;
+    return (
+        <MenuDropdown
+            {...props}
+            className={classList(css["toolbar-menu-dropdown"], "tt-toolbar-menu-dropdown")}
+            label={dropdownLabel}
+        />
+    );
+};
+
+interface ToolbarToggleProps {
+    label: string;
+    isChecked: boolean;
+    onChange: (checked: boolean) => void;
+}
+
+const ToolbarToggle: React.FC<ToolbarToggleProps> = ({ label, isChecked, onChange }) => {
+    const [checked, setChecked] = React.useState(isChecked);
+
+    const onClick = () => {
+        setChecked(!checked);
+        onChange(!checked);
+    };
+
+    return (
+        <Button
+            className={css["toggle-button"]}
+            title={label}
+            label={label}
+            ariaLabel={label}
+            onClick={onClick}
+            rightIcon={checked ? "fas fa-toggle-on" : "fas fa-toggle-off"}
+            ariaPressed={checked}
+        />
+    );
+};
+
+interface ToolbarControlProps {
     left?: React.ReactNode;
     center?: React.ReactNode;
     right?: React.ReactNode;
 }
 
-export const Toolbar: React.FC<IProps> = ({ left, center, right }) => {
+const ToolbarControl: React.FC<ToolbarControlProps> = ({ left, center, right }) => {
     return (
         <div className={classList(css["toolbar"], "tt-toolbar")}>
             <div className={classList(css["left"], "tt-toolbar-left")}>{left}</div>
@@ -19,3 +77,10 @@ export const Toolbar: React.FC<IProps> = ({ left, center, right }) => {
         </div>
     );
 };
+
+export const Toolbar = Object.assign(ToolbarControl, {
+    Button: ToolbarButton,
+    ControlGroup: ToolbarControlGroup,
+    MenuDropdown: ToolbarMenuDropdown,
+    Toggle: ToolbarToggle,
+});
diff --git a/teachertool/src/components/ToolbarControls.tsx b/teachertool/src/components/ToolbarControls.tsx
diff --git a/teachertool/src/components/styling/RubricWorkspace.module.scss b/teachertool/src/components/styling/RubricWorkspace.module.scss
@@ -14,4 +14,8 @@
     div[class*="tt-tabview"] {
         flex: 1 1 0%;
     }
+
+    div[class*="tt-toolbar-center"] {
+        flex-grow: 1;
+    }
 }