teacher tool: add address bar (#9839)

* add address bar * prettier * remove left/right pane css props * remove visible & hidden css classes * rename AddressBar -> ShareLinkInput * remove unneeded classList * removed composable layout classes
microsoft · Jan 31, 2024 · 4a2c1a1 · 4a2c1a1
1 parent bc39dcc
commit 4a2c1a1
Show file tree

Hide file tree

Showing 19 changed files with 253 additions and 75 deletions.
diff --git a/teachertool/src/components/DebugInput.tsx b/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>
     );
-};
+};
diff --git a/teachertool/src/components/EvalResultDisplay.tsx b/teachertool/src/components/EvalResultDisplay.tsx
@@ -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>

diff --git a/teachertool/src/components/HeaderBar.tsx b/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()}

diff --git a/teachertool/src/components/MainPanel.tsx b/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>

diff --git a/teachertool/src/components/MakecodeFrame.tsx b/teachertool/src/components/MakecodeFrame.tsx
@@ -1,12 +1,16 @@
 /// <reference path="../../../built/pxteditor.d.ts" />
+
+// eslint-disable-next-line import/no-internal-modules
+import css from "./styling/MakeCodeFrame.module.scss";
+
 import { useContext, useEffect } from "react";
 import { clearReady, setEditorRef } from "../services/makecodeEditorService";
 import { AppStateContext } from "../state/appStateContext";
 import { getEditorUrl } from "../utils";
 
-interface MakeCodeFrameProps {}
+interface IProps {}
 
-export const MakeCodeFrame: React.FC<MakeCodeFrameProps> = () => {
+export const MakeCodeFrame: React.FC<IProps> = () => {
     const { state: teacherTool } = useContext(AppStateContext);
 
     // Clear iframe state when the iframe url is changed
@@ -32,17 +36,13 @@ export const MakeCodeFrame: React.FC<MakeCodeFrameProps> = () => {
     };
 
     /* eslint-disable @microsoft/sdl/react-iframe-missing-sandbox */
-    return (
-        <div className="makecode-frame-outer" style={{ display: "block" }}>
-            {teacherTool.projectMetadata && (
-                <iframe
-                    className="makecode-frame"
-                    src={createIFrameUrl(teacherTool.projectMetadata.id)}
-                    title={"title"}
-                    ref={handleIFrameRef}
-                />
-            )}
-        </div>
-    );
+    return teacherTool.projectMetadata ? (
+        <iframe
+            className={css["makecode-frame"]}
+            src={createIFrameUrl(teacherTool.projectMetadata.id)}
+            title={"title"}
+            ref={handleIFrameRef}
+        />
+    ) : null;
     /* eslint-enable @microsoft/sdl/react-iframe-missing-sandbox */
 };
diff --git a/teachertool/src/components/ProjectWorkspace.tsx b/teachertool/src/components/ProjectWorkspace.tsx
@@ -0,0 +1,26 @@
+import * as React from "react";
+// eslint-disable-next-line import/no-internal-modules
+import css from "./styling/ProjectWorkspace.module.scss";
+
+import { Toolbar } from "./Toolbar";
+import { ShareLinkInput } from "./ShareLinkInput";
+import { MakeCodeFrame } from "./MakecodeFrame";
+
+interface IProps {}
+
+export const ProjectWorkspace: React.FC<IProps> = () => {
+    return (
+        <div className={css.panel}>
+            <Toolbar>
+                {/* Left */}
+                <></>
+                {/* Center */}
+                <></>
+                {/* Right */}
+                <></>
+            </Toolbar>
+            <ShareLinkInput />
+            <MakeCodeFrame />
+        </div>
+    );
+};
diff --git a/teachertool/src/components/RubricWorkspace.tsx b/teachertool/src/components/RubricWorkspace.tsx
@@ -0,0 +1,19 @@
+import * as React from "react";
+// eslint-disable-next-line import/no-internal-modules
+import css from "./styling/RubricWorkspace.module.scss";
+
+import { DebugInput } from "./DebugInput";
+import { EvalResultDisplay } from "./EvalResultDisplay";
+import { ActiveRubricDisplay } from "./ActiveRubricDisplay";
+
+interface IProps {}
+
+export const RubricWorkspace: React.FC<IProps> = () => {
+    return (
+        <>
+            <DebugInput />
+            <ActiveRubricDisplay />
+            <EvalResultDisplay />
+        </>
+    );
+};
diff --git a/teachertool/src/components/ShareLinkInput.tsx b/teachertool/src/components/ShareLinkInput.tsx
@@ -0,0 +1,52 @@
+import * as React from "react";
+// eslint-disable-next-line import/no-internal-modules
+import css from "./styling/ShareLinkInput.module.scss";
+
+import { useContext, useState, useMemo, useCallback, useEffect } from "react";
+import { AppStateContext } from "../state/appStateContext";
+import { classList } from "react-common/components/util";
+import { Input } from "react-common/components/controls/Input";
+import { loadProjectMetadataAsync } from "../transforms/loadProjectMetadataAsync";
+
+interface IProps {
+}
+
+export const ShareLinkInput: React.FC<IProps> = () => {
+    const { state: teacherTool } = useContext(AppStateContext);
+    const { projectMetadata } = teacherTool;
+    const [text, setText] = useState("");
+    const [iconVisible, setIconVisible] = useState(false);
+
+    useEffect(() => {
+        const shareId = pxt.Cloud.parseScriptId(text);
+        setIconVisible(!!shareId && !(shareId === projectMetadata?.shortid || shareId === projectMetadata?.persistId));
+    }, [text, projectMetadata?.shortid, projectMetadata?.persistId]);
+
+    const onTextChange = (str: string) => {
+        setText(str);
+    };
+
+    const onEnterKey = useCallback(() => {
+        const shareId = pxt.Cloud.parseScriptId(text);
+        if (!!shareId && !(shareId === projectMetadata?.shortid || shareId === projectMetadata?.persistId)) {
+            loadProjectMetadataAsync(shareId);
+        }
+    }, [text, projectMetadata?.shortid, projectMetadata?.persistId]);
+
+    const icon = useMemo(() => {
+        return iconVisible ? "fas fa-arrow-right" : undefined;
+    }, [iconVisible]);
+
+    return (
+        <div className={classList(css["share-link-input"], "tt-share-link-input")}>
+            <Input
+                placeholder={lf("Enter Project Link or Share ID")}
+                ariaLabel={lf("Enter Project Link or Share ID")}
+                icon={icon}
+                onChange={onTextChange}
+                onEnterKey={onEnterKey}
+                preserveValueOnBlur={true}
+            ></Input>
+        </div>
+    );
+};
diff --git a/teachertool/src/components/Toolbar.tsx b/teachertool/src/components/Toolbar.tsx
@@ -0,0 +1,20 @@
+import * as React from "react";
+// eslint-disable-next-line import/no-internal-modules
+import css from "./styling/Toolbar.module.scss";
+
+import { classList } from "react-common/components/util";
+
+interface IProps {
+    children: React.ReactNode;
+}
+
+export const Toolbar: React.FC<IProps> = ({ children }) => {
+    const [left, center, right] = React.Children.toArray(children);
+    return (
+        <div className={classList(css["toolbar"], "tt-toolbar")}>
+            <div className={classList(css["left"], "tt-toolbar-left")}>{left}</div>
+            <div className={classList(css["center"], "tt-toolbar-center")}>{center}</div>
+            <div className={classList(css["right"], "tt-toolbar-right")}>{right}</div>
+        </div>
+    );
+};
diff --git a/teachertool/src/components/styling/HeaderBar.module.scss b/teachertool/src/components/styling/HeaderBar.module.scss
@@ -1,7 +1,3 @@
-/*******************************/
-/***** HEADER BAR  *****/
-/*******************************/
-
 .header {
     background-color: var(--pxt-headerbar-background);
     color: var(--pxt-headerbar-foreground);

diff --git a/teachertool/src/components/styling/MakeCodeFrame.module.scss b/teachertool/src/components/styling/MakeCodeFrame.module.scss
@@ -0,0 +1,7 @@
+.makecode-frame {
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    padding: 0;
+    border: none;
+}
diff --git a/teachertool/src/components/styling/ProjectWorkspace.module.scss b/teachertool/src/components/styling/ProjectWorkspace.module.scss
@@ -0,0 +1,11 @@
+.panel {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    background-color: var(--pxt-headerbar-accent-smoke);
+
+    iframe {
+        flex: 1 1 0%;
+    }
+}
diff --git a/teachertool/src/components/styling/RubricWorkspace.module.scss b/teachertool/src/components/styling/RubricWorkspace.module.scss
diff --git a/teachertool/src/components/styling/ShareLinkInput.module.scss b/teachertool/src/components/styling/ShareLinkInput.module.scss
@@ -0,0 +1,62 @@
+.share-link-input {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    height: 3.625rem;
+    background-color: var(--pxt-content-background);
+    color: var(--pxt-content-foreground);
+    padding: 0 1rem 0 1rem;
+    border-top: solid 1px var(--pxt-content-accent);
+
+    div[class="common-input-wrapper"] {
+        width: 100%;
+
+        div[class="common-input-group"] {
+            border-radius: 99px;
+            border: solid 1px var(--pxt-content-accent);
+            padding: 0 1rem 0 1rem;
+
+            &:focus::after {
+                outline: none;
+                border-radius: 99px;
+                border: solid 2px var(--pxt-headerbar-accent-smoke);
+            }
+            &:focus-within::after {
+                outline: none;
+                border-radius: 99px;
+                border: solid 2px var(--pxt-headerbar-accent-smoke);
+            }
+
+            input {
+                width: 100%;
+                font-size: 1rem;
+                padding-left: 0;
+
+                &::placeholder {
+                    color: var(--pxt-content-accent);
+                    font-style: italic;
+                    text-align: center;
+                }
+            }
+
+            i {
+                background-color: var(--pxt-content-background);
+                border-radius: 99px;
+                width: 1.5rem;
+                height: 1.5rem;
+                top: 0;
+                bottom: 0;
+                right: 0.25rem;
+                margin-top: auto;
+                margin-bottom: auto;
+
+                &::before {
+                    font-size: 1rem;
+                    line-height: 1.5rem;
+                    color: var(--pxt-content-foreground);
+                    filter: saturate(0%);
+                }
+            }
+        }
+    }
+}
diff --git a/teachertool/src/components/styling/SplitPane.module.scss b/teachertool/src/components/styling/SplitPane.module.scss
@@ -20,7 +20,7 @@
 
 .splitter-vertical {
   background-color: var(--pxt-content-accent);
-  width: 0.5px;
+  width: 1px;
 }
 
 .splitter-vertical-inner {

diff --git a/teachertool/src/components/styling/Toolbar.module.scss b/teachertool/src/components/styling/Toolbar.module.scss
@@ -0,0 +1,11 @@
+
+
+.toolbar {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    height: 2.625rem;
+    background-color: var(--pxt-content-background);
+    color: var(--pxt-content-foreground);
+}
+