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

## Summary: Adding the m2b flag and its prop to all the relevant components. This way, it should be easy to use a simple conditional when we add the upcoming locked figures (function graphs, labels, maybe polygon markings). Issue: none ## Test plan: - Go to http://localhost:6006/?path=/story/perseuseditor-editorpage--mafs-with-locked-figures-current - Confirm that only point and line show up in the settings - Go to http://localhost:6006/?path=/story/perseuseditor-editorpage--mafs-with-locked-figures-m-2-flag - Point, line, vector, ellipse, and polygon should show up - Go to http://localhost:6006/?path=/story/perseuseditor-editorpage--mafs-with-locked-figures-m-2-b-flag - It should be identical to the m2 one for now. Author: nishasy Reviewers: mark-fitzgerald Required Reviewers: Approved By: mark-fitzgerald Checks: ✅ codecov/project, ✅ codecov/patch, ✅ Upload Coverage (ubuntu-latest, 20.x), ✅ gerald, ⏭️ Publish npm snapshot, ✅ Check builds for changes in size (ubuntu-latest, 20.x), ✅ Jest Coverage (ubuntu-latest, 20.x), ✅ Check for .changeset entries for all changed files (ubuntu-latest, 20.x), ✅ Cypress (ubuntu-latest, 20.x), ✅ Lint, Typecheck, Format, and Test (ubuntu-latest, 20.x), ✅ Publish Storybook to Chromatic (ubuntu-latest, 20.x), ✅ gerald Pull Request URL: #1366
Khan · Jun 20, 2024 · 1351ca3 · 1351ca3
1 parent 33adc62
commit 1351ca3
Show file tree

Hide file tree

Showing 10 changed files with 112 additions and 6 deletions.
diff --git a/.changeset/sour-coats-agree.md b/.changeset/sour-coats-agree.md
@@ -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.
diff --git a/packages/perseus-editor/src/__stories__/editor-page.stories.tsx b/packages/perseus-editor/src/__stories__/editor-page.stories.tsx
@@ -95,6 +95,7 @@ export const MafsWithLockedFiguresCurrent = (): React.ReactElement => {
                     mafs: {
                         ...flags.mafs,
                         "interactive-graph-locked-features-m2": false,
+                        "interactive-graph-locked-features-m2b": false,
                     },
                 },
             }}
@@ -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)}
@@ -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");

diff --git a/packages/perseus-editor/src/__stories__/flags-for-api-options.ts b/packages/perseus-editor/src/__stories__/flags-for-api-options.ts
@@ -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"];
 

diff --git a/packages/perseus-editor/src/components/__stories__/locked-figures-section.stories.tsx b/packages/perseus-editor/src/components/__stories__/locked-figures-section.stories.tsx
@@ -33,6 +33,7 @@ export const Controlled: StoryComponentType = {
         return (
             <LockedFiguresSection
                 showM2Features={true}
+                showM2bFeatures={true}
                 figures={figures}
                 onChange={handlePropsUpdate}
             />
@@ -55,6 +56,7 @@ export const WithProdWidth: StoryComponentType = {
             <View style={styles.prodSizeContainer}>
                 <LockedFiguresSection
                     showM2Features={true}
+                    showM2bFeatures={true}
                     figures={figures}
                     onChange={handlePropsUpdate}
                 />

diff --git a/packages/perseus-editor/src/components/__tests__/locked-figures-section.test.tsx b/packages/perseus-editor/src/components/__tests__/locked-figures-section.test.tsx
@@ -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,
             },
@@ -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,
             },
@@ -71,6 +79,7 @@ describe("LockedFiguresSection", () => {
             <LockedFiguresSection
                 figures={defaultFigures}
                 showM2Features={true}
+                showM2bFeatures={true}
                 onChange={jest.fn()}
             />,
             {
@@ -93,6 +102,7 @@ describe("LockedFiguresSection", () => {
             <LockedFiguresSection
                 figures={defaultFigures}
                 showM2Features={true}
+                showM2bFeatures={true}
                 onChange={jest.fn()}
             />,
             {
@@ -117,6 +127,7 @@ describe("LockedFiguresSection", () => {
             <LockedFiguresSection
                 figures={defaultFigures}
                 showM2Features={true}
+                showM2bFeatures={true}
                 onChange={jest.fn()}
             />,
             {
@@ -147,6 +158,7 @@ describe("LockedFiguresSection", () => {
             <LockedFiguresSection
                 figures={defaultFigures}
                 showM2Features={true}
+                showM2bFeatures={true}
                 onChange={jest.fn()}
             />,
             {
@@ -181,6 +193,7 @@ describe("LockedFiguresSection", () => {
         render(
             <LockedFiguresSection
                 showM2Features={true}
+                showM2bFeatures={true}
                 figures={defaultFigures}
                 onChange={jest.fn()}
             />,
@@ -207,6 +220,7 @@ describe("LockedFiguresSection", () => {
         render(
             <LockedFiguresSection
                 showM2Features={true}
+                showM2bFeatures={true}
                 figures={[
                     getDefaultFigureForType("point"),
                     {...getDefaultFigureForType("point"), coord: [1, 1]},

diff --git a/packages/perseus-editor/src/components/locked-figure-select.tsx b/packages/perseus-editor/src/components/locked-figure-select.tsx
@@ -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;
 };

diff --git a/packages/perseus-editor/src/components/locked-figure-settings.tsx b/packages/perseus-editor/src/components/locked-figure-settings.tsx
@@ -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
     /**

diff --git a/packages/perseus-editor/src/components/locked-figures-section.tsx b/packages/perseus-editor/src/components/locked-figures-section.tsx
@@ -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;
 };
@@ -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];
@@ -169,6 +173,7 @@ const LockedFiguresSection = (props: Props) => {
             <View style={styles.buttonContainer}>
                 <LockedFigureSelect
                     showM2Features={props.showM2Features}
+                    showM2bFeatures={props.showM2bFeatures}
                     id={`${uniqueId}-select`}
                     onChange={addLockedFigure}
                 />

diff --git a/packages/perseus-editor/src/widgets/interactive-graph-editor.tsx b/packages/perseus-editor/src/widgets/interactive-graph-editor.tsx
@@ -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}
                             />

diff --git a/packages/perseus/src/types.ts b/packages/perseus/src/types.ts
@@ -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;
 
 /**