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.

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

[Interactive Graph Editor] Add locked features M2b flag #1366

Merged
merged 2 commits into from
Jun 20, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
6 changes: 6 additions & 0 deletions .changeset/sour-coats-agree.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
"@khanacademy/perseus": patch
"@khanacademy/perseus-editor": patch
---

[Interactive Graph Editor] Add the M2b flag in preparation for locked graphs, labels, and polygon markings.
65 changes: 64 additions & 1 deletion packages/perseus-editor/src/__stories__/editor-page.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -95,6 +95,7 @@ export const MafsWithLockedFiguresCurrent = (): React.ReactElement => {
mafs: {
...flags.mafs,
"interactive-graph-locked-features-m2": false,
"interactive-graph-locked-features-m2b": false,
},
},
}}
Expand Down Expand Up @@ -152,7 +153,13 @@ export const MafsWithLockedFiguresM2Flag = (): React.ReactElement => {
<EditorPage
apiOptions={{
isMobile: false,
flags,
flags: {
mafs: {
...flags.mafs,
"interactive-graph-locked-features-m2": true,
"interactive-graph-locked-features-m2b": false,
},
},
}}
previewDevice={previewDevice}
onPreviewDeviceChange={(newDevice) => setPreviewDevice(newDevice)}
Expand Down Expand Up @@ -192,6 +199,62 @@ MafsWithLockedFiguresM2Flag.parameters = {
},
};

export const MafsWithLockedFiguresM2bFlag = (): React.ReactElement => {
const [previewDevice, setPreviewDevice] =
React.useState<DeviceType>("phone");
const [jsonMode, setJsonMode] = React.useState<boolean | undefined>(false);
const [answerArea, setAnswerArea] = React.useState<
PerseusAnswerArea | undefined | null
>();
const [question, setQuestion] = React.useState<PerseusRenderer | undefined>(
segmentWithLockedFigures,
);
const [hints, setHints] = React.useState<ReadonlyArray<Hint> | undefined>();

return (
<EditorPage
apiOptions={{
isMobile: false,
flags,
}}
previewDevice={previewDevice}
onPreviewDeviceChange={(newDevice) => setPreviewDevice(newDevice)}
developerMode={true}
jsonMode={jsonMode}
answerArea={answerArea}
question={question}
hints={hints}
frameSource="about:blank"
previewURL="about:blank"
itemId="1"
onChange={(props) => {
onChangeAction(props);

if ("jsonMode" in props) {
setJsonMode(props.jsonMode);
}
if ("answerArea" in props) {
setAnswerArea(props.answerArea);
}
if ("question" in props) {
setQuestion(props.question);
}
if ("hints" in props) {
setHints(props.hints);
}
}}
/>
);
};

MafsWithLockedFiguresM2bFlag.parameters = {
chromatic: {
// Disabling because this isn't visually testing anything on the
// initial load of the editor page.
disable: true,
},
};

export const WithSaveWarnings = (): React.ReactElement => {
const [previewDevice, setPreviewDevice] =
React.useState<DeviceType>("phone");
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ export const flags = {
"linear-system": true,
ray: true,
"interactive-graph-locked-features-m2": true,
"interactive-graph-locked-features-m2b": true,
},
} satisfies APIOptions["flags"];

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@ export const Controlled: StoryComponentType = {
return (
<LockedFiguresSection
showM2Features={true}
showM2bFeatures={true}
figures={figures}
onChange={handlePropsUpdate}
/>
Expand All @@ -55,6 +56,7 @@ export const WithProdWidth: StoryComponentType = {
<View style={styles.prodSizeContainer}>
<LockedFiguresSection
showM2Features={true}
showM2bFeatures={true}
figures={figures}
onChange={handlePropsUpdate}
/>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,11 @@ describe("LockedFiguresSection", () => {
test("renders", () => {
// Arrange, Act
render(
<LockedFiguresSection showM2Features={true} onChange={jest.fn()} />,
<LockedFiguresSection
showM2Features={true}
showM2bFeatures={true}
onChange={jest.fn()}
/>,
{
wrapper: RenderStateRoot,
},
Expand All @@ -54,7 +58,11 @@ describe("LockedFiguresSection", () => {
test("renders no expand/collapse button when there are no figures", () => {
// Arrange, Act
render(
<LockedFiguresSection showM2Features={true} onChange={jest.fn()} />,
<LockedFiguresSection
showM2Features={true}
showM2bFeatures={true}
onChange={jest.fn()}
/>,
{
wrapper: RenderStateRoot,
},
Expand All @@ -71,6 +79,7 @@ describe("LockedFiguresSection", () => {
<LockedFiguresSection
figures={defaultFigures}
showM2Features={true}
showM2bFeatures={true}
onChange={jest.fn()}
/>,
{
Expand All @@ -93,6 +102,7 @@ describe("LockedFiguresSection", () => {
<LockedFiguresSection
figures={defaultFigures}
showM2Features={true}
showM2bFeatures={true}
onChange={jest.fn()}
/>,
{
Expand All @@ -117,6 +127,7 @@ describe("LockedFiguresSection", () => {
<LockedFiguresSection
figures={defaultFigures}
showM2Features={true}
showM2bFeatures={true}
onChange={jest.fn()}
/>,
{
Expand Down Expand Up @@ -147,6 +158,7 @@ describe("LockedFiguresSection", () => {
<LockedFiguresSection
figures={defaultFigures}
showM2Features={true}
showM2bFeatures={true}
onChange={jest.fn()}
/>,
{
Expand Down Expand Up @@ -181,6 +193,7 @@ describe("LockedFiguresSection", () => {
render(
<LockedFiguresSection
showM2Features={true}
showM2bFeatures={true}
figures={defaultFigures}
onChange={jest.fn()}
/>,
Expand All @@ -207,6 +220,7 @@ describe("LockedFiguresSection", () => {
render(
<LockedFiguresSection
showM2Features={true}
showM2bFeatures={true}
figures={[
getDefaultFigureForType("point"),
{...getDefaultFigureForType("point"), coord: [1, 1]},
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,8 @@ import * as React from "react";
type Props = {
// TODO(LEMS-2016): Remove this prop once the M2 flag is fully rolled out.
showM2Features: boolean;
// TODO(LEMS-2107): Remove this prop once the M2b flag is fully rolled out.
showM2bFeatures: boolean;
id: string;
onChange: (value: string) => void;
};
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,9 @@ export type LockedFigureSettingsCommonProps = {
// Whether to show the M2 features in the locked figure settings.
// TODO(LEMS-2016): Remove this prop once the M2 flag is fully rolled out.
showM2Features?: boolean;
// Whether to show the M2b features in the locked figure settings.
// TODO(LEMS-2107): Remove this prop once the M2b flag is fully rolled out.
showM2bFeatures?: boolean;

// Movement props
/**
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,9 @@ type Props = {
// Whether to show the M2 features in the locked figure settings.
// TODO(LEMS-2016): Remove this prop once the M2 flag is fully rolled out.
showM2Features: boolean;
// Whether to show the M2b features in the locked figure settings.
// TODO(LEMS-2107): Remove this prop once the M2b flag is fully rolled out.
showM2bFeatures: boolean;
figures?: Array<LockedFigure>;
onChange: (props: Partial<InteractiveGraphEditorProps>) => void;
};
Expand Down Expand Up @@ -151,6 +154,7 @@ const LockedFiguresSection = (props: Props) => {
<LockedFigureSettings
key={`${uniqueId}-locked-${figure}-${index}`}
showM2Features={props.showM2Features}
showM2bFeatures={props.showM2bFeatures}
expanded={expandedStates[index]}
onToggle={(newValue) => {
const newExpanded = [...expandedStates];
Expand All @@ -169,6 +173,7 @@ const LockedFiguresSection = (props: Props) => {
<View style={styles.buttonContainer}>
<LockedFigureSelect
showM2Features={props.showM2Features}
showM2bFeatures={props.showM2bFeatures}
id={`${uniqueId}-select`}
onChange={addLockedFigure}
/>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -611,6 +611,11 @@ class InteractiveGraphEditor extends React.Component<Props> {
"interactive-graph-locked-features-m2"
]
}
showM2bFeatures={
this.props.apiOptions?.flags?.mafs?.[
"interactive-graph-locked-features-m2b"
]
}
figures={this.props.lockedFigures}
onChange={this.props.onChange}
/>
Expand Down
11 changes: 8 additions & 3 deletions packages/perseus/src/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -146,11 +146,16 @@ export const MafsGraphTypeFlags = [

export const InteractiveGraphLockedFeaturesFlags = [
/**
* Enables/Disables Milestone 2 locked features in the new Mafs
* interactive-graph widget (the rest of the figure types:
* ellipses, vectors, polygons, functions, labels).
* Enables/Disables inital Milestone 2 locked features in the new Mafs
* interactive-graph widget (ellipses, vectors, polygons).
*/
"interactive-graph-locked-features-m2",
/**
* Enables/Disables remaining Milestone 2 locked features in the new Mafs
* interactive-graph widget (the rest of the figure types:
* function plots, labels).
*/
"interactive-graph-locked-features-m2b",
] as const;

/**
Expand Down