Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

teacher tool: add address bar #9839

Merged
merged 7 commits into from
Jan 31, 2024
Merged

teacher tool: add address bar #9839

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
763ab95
add address bar
eanders-ms Jan 31, 2024
fe19910
prettier
eanders-ms Jan 31, 2024
4fc0d7b
remove left/right pane css props
eanders-ms Jan 31, 2024
5e9bbff
remove visible & hidden css classes
eanders-ms Jan 31, 2024
acc6df9
rename AddressBar -> ShareLinkInput
eanders-ms Jan 31, 2024
706b33f
remove unneeded classList
eanders-ms Jan 31, 2024
fe42143
removed composable layout classes
eanders-ms Jan 31, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
53 changes: 53 additions & 0 deletions teachertool/src/components/AddressBar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
import * as React from "react";
// eslint-disable-next-line import/no-internal-modules
import css from "./styling/AddressBar.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 {
className?: string;
}

export const AddressBar: React.FC<IProps> = ({ className }) => {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is AddressBar the right name for this? I know that SearchBar isn't right, either, but when I read address bar, it took me a minute to understand that this is the component where the user submits the share link.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I chose AddressBar because:

  1. it's modeled closely after a browser's address bar.
  2. the most common input will be a pasted URL, like an address bar.

I am open to alternatives!

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ShareLinkInput would be the most descriptive, probably. But I'm fine with AddressBar.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Renamed!

const { state: teacherTool } = useContext(AppStateContext);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is there a reason we wouldn't just name this projectMetadata?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I believe this is a way of extracting projectMetadata from the teacherTool object.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't think I'm following. Naming this projectMetadata would mean accessing the actual project metadata like projectMetadata.projectMetadata.
Line 17 is where I extract projectMetadata to a local var.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh, yeah, I was confused because the projectMetadata variable was accessed similar to how this is, and I thought we could just rename the state, but I realize now that it is a similar accessor, but we need both of these. I know I did not explain that well, but long story short, I understand now and appreciate the clarification!

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["address-bar"], className)}>
<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>
);
};
15 changes: 1 addition & 14 deletions teachertool/src/components/DebugInput.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand All @@ -38,4 +25,4 @@ export const DebugInput: React.FC<IProps> = ({}) => {
/>
</div>
);
};
};
32 changes: 18 additions & 14 deletions teachertool/src/components/EvalResultDisplay.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion teachertool/src/components/HeaderBar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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()}
Expand Down
11 changes: 4 additions & 7 deletions teachertool/src/components/MainPanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {}

Expand All @@ -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>
Expand Down
28 changes: 14 additions & 14 deletions teachertool/src/components/MakecodeFrame.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
Expand All @@ -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 */
};
27 changes: 27 additions & 0 deletions teachertool/src/components/ProjectWorkspace.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
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 { AddressBar } from "./AddressBar";
import { MakeCodeFrame } from "./MakecodeFrame";
import { classes } from "../utils";

interface IProps {}

export const ProjectWorkspace: React.FC<IProps> = () => {
return (
<div className={classes(css, "panel", "h-full", "w-full", "flex", "flex-col")}>
<Toolbar toolbarClass={css["grow-1"]}>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I know this is a placeholder, but I was wondering if the project view toggle we're going to fill in here is something we'll be able to do in v1? Is the toggle just so a teacher can look at a student's project in JavaScript? Would it be clear that they can't validate projects in JavaScript?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

They actually can still validate a project even after switching to JS. It'll still validate the blocks, but it should all still work. It won't work well if a project was made in Javascript instead of blocks, but I think that's a different scenario.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, I'm worried the toggle will give the impression that we support evaluating JavaScript-only projects, but this is an assumption. I imagine a scenario where a teacher sees the toggle, thinks "Oh, I can validate student projects in JavaScript, too", uploads a JavaScript-only project and then the evaluation doesn't work. But, if a teacher uploads a JavaScript project, that's something that we can know, right? And just error and tell the user "sorry, we cannot evaluate JavaScript-made projects at this time".

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I wouldn't worry about it too much for v1, but yes I think we can check the preferred editor and error if needed.

I think there is value in having the toggle regardless, as one teacher did mention they like to switch to JS to search for things in the code, rather than scrolling through blocks, so there's a known use-case there.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good point Sarah. I'd like to leave this as an open design question for now. I'll add it to the work board to track.

{/* Left */}
<></>
{/* Center */}
<></>
{/* Right */}
<></>
</Toolbar>
<AddressBar className={css["grow-1"]} />
<MakeCodeFrame />
</div>
);
};
19 changes: 19 additions & 0 deletions teachertool/src/components/RubricWorkspace.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 />
</>
);
};
8 changes: 5 additions & 3 deletions teachertool/src/components/SplitPane.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,18 +9,20 @@ interface IProps {
defaultSize: number | string;
primary: "left" | "right";
children: React.ReactNode;
leftPaneClass?: string;
rightPaneClass?: string;
}

export const SplitPane: React.FC<IProps> = ({ className, split, children }) => {
export const SplitPane: React.FC<IProps> = ({ className, split, children, leftPaneClass, rightPaneClass }) => {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What will something like the left or right pane class look like?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The purpose is to enable the parent to inject css into the div that wraps the panel content. I may end up removing it. This can be accomplished without adding a prop.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Removed!

const [left, right] = React.Children.toArray(children);

return (
<div className={classList(css[`split-pane-${split}`], className)}>
<div className={css[`left-${split}`]}>{left}</div>
<div className={classList(css[`left-${split}`], leftPaneClass)}>{left}</div>
<div className={css[`splitter-${split}`]}>
<div className={css[`splitter-${split}-inner`]} />
</div>
<div className={css[`right-${split}`]}>{right}</div>
<div className={classList(css[`right-${split}`], rightPaneClass)}>{right}</div>
</div>
);
};
24 changes: 24 additions & 0 deletions teachertool/src/components/Toolbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
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;
toolbarClass?: string;
leftClass?: string;
centerClass?: string;
rightClass?: string;
}

export const Toolbar: React.FC<IProps> = ({ children, toolbarClass, leftClass, centerClass, rightClass }) => {
const [left, center, right] = React.Children.toArray(children);
return (
<div className={classList(css["toolbar"], toolbarClass)}>
<div className={classList(css["left"], leftClass)}>{left}</div>
<div className={classList(css["center"], centerClass)}>{center}</div>
<div className={classList(css["right"], rightClass)}>{right}</div>
</div>
);
};
62 changes: 62 additions & 0 deletions teachertool/src/components/styling/AddressBar.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
.address-bar {
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%);
}
}
}
}
}
7 changes: 7 additions & 0 deletions teachertool/src/components/styling/MakeCodeFrame.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
.makecode-frame {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
border: none;
}
9 changes: 9 additions & 0 deletions teachertool/src/components/styling/ProjectWorkspace.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
@import "shared";

.panel {
background-color: var(--pxt-headerbar-accent-smoke);

iframe {
flex: 1 1 0%;
}
}
Empty file added teachertool/src/components/styling/RubricWorkspace.module.scss
View file
Open in desktop
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is it valuable to create a styling module for something that's empty right now?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It won't be empty for long.

Empty file.
2 changes: 1 addition & 1 deletion teachertool/src/components/styling/SplitPane.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@

.splitter-vertical {
background-color: var(--pxt-content-accent);
width: 0.5px;
width: 1px;
}

.splitter-vertical-inner {
Expand Down
Loading
Loading