[Hint Mode: Start Coords] Add separate flags for graph types (#1465)

## Summary: We want to be able to release the start coords UI even if only a subset of graph types are ready. To accomodate this, I'm adding individual flags for each graph type. Issue: none ## Test plan: Storybook - http://localhost:6006/?path=/docs/perseuseditor-widgets-interactive-graph--docs - Confirm that the UI shows up for the currently landed graphs - segment, ray, linear, linear-system, circle - Confirm that the UI does not show up for the graphs that are not done yet - sinusoid, quadratic, angle, polygon, point Author: nishasy Reviewers: benchristel Required Reviewers: Approved By: benchristel, benchristel Checks: ✅ codecov/project, ✅ codecov/patch, ✅ Upload Coverage (ubuntu-latest, 20.x), ✅ gerald, ⏭️ Publish npm snapshot, ✅ Lint, Typecheck, Format, and Test (ubuntu-latest, 20.x), ✅ Cypress (ubuntu-latest, 20.x), ✅ Jest Coverage (ubuntu-latest, 20.x), ✅ Check builds for changes in size (ubuntu-latest, 20.x), ✅ Check for .changeset entries for all changed files (ubuntu-latest, 20.x), ✅ Publish Storybook to Chromatic (ubuntu-latest, 20.x), ✅ gerald Pull Request URL: #1465
Khan · Jul 31, 2024 · 94ad04f · 94ad04f
1 parent ce26ca3
commit 94ad04f
Show file tree

Hide file tree

Showing 6 changed files with 86 additions and 5 deletions.
diff --git a/.changeset/slow-taxis-give.md b/.changeset/slow-taxis-give.md
@@ -0,0 +1,6 @@
+---
+"@khanacademy/perseus": patch
+"@khanacademy/perseus-editor": patch
+---
+
+[Hint Mode: Start Coords] Add separate flags for graph types
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,9 +11,14 @@ export const flags = {
         linear: true,
         "linear-system": true,
         ray: true,
-        "start-coords-ui": true,
+
+        // Locked figures flags
         "interactive-graph-locked-features-m2": true,
         "interactive-graph-locked-features-m2b": true,
+
+        // Start coords UI flags
+        // TODO(LEMS-2228): Remove flags once this is fully released
+        "start-coords-ui-phase-1": true,
     },
 } satisfies APIOptions["flags"];
 

diff --git a/packages/perseus-editor/src/__stories__/interactive-graph-editor.stories.tsx b/packages/perseus-editor/src/__stories__/interactive-graph-editor.stories.tsx
@@ -122,7 +122,6 @@ export const MafsWithLockedFiguresCurrent = (): React.ReactElement => {
                 flags: {
                     mafs: {
                         ...flags.mafs,
-                        "start-coords-ui": false,
                         "interactive-graph-locked-features-m2": false,
                         "interactive-graph-locked-features-m2b": false,
                     },
@@ -149,7 +148,6 @@ export const MafsWithLockedFiguresM2Flag = (): React.ReactElement => {
                 flags: {
                     mafs: {
                         ...flags.mafs,
-                        "start-coords-ui": false,
                         "interactive-graph-locked-features-m2": true,
                         "interactive-graph-locked-features-m2b": false,
                     },

diff --git a/packages/perseus-editor/src/widgets/__tests__/interactive-graph-editor.test.tsx b/packages/perseus-editor/src/widgets/__tests__/interactive-graph-editor.test.tsx
@@ -672,4 +672,60 @@ describe("InteractiveGraphEditor", () => {
             }),
         );
     });
+
+    test.each`
+        type               | shouldRender
+        ${"linear"}        | ${true}
+        ${"ray"}           | ${true}
+        ${"linear-system"} | ${true}
+        ${"segment"}       | ${true}
+        ${"circle"}        | ${true}
+        ${"quadratic"}     | ${false}
+        ${"sinusoid"}      | ${false}
+        ${"polygon"}       | ${false}
+        ${"angle"}         | ${false}
+        ${"point"}         | ${false}
+    `(
+        "should render for $type graphs if phase1 flag is on: $shouldRender",
+        async ({type, shouldRender}) => {
+            // Arrange
+
+            // Act
+            render(
+                <InteractiveGraphEditor
+                    {...baseProps}
+                    apiOptions={{
+                        ...ApiOptions.defaults,
+                        flags: {
+                            ...flags,
+                            mafs: {
+                                ...flags.mafs,
+                                "start-coords-ui-phase-1": shouldRender,
+                            },
+                        },
+                    }}
+                    graph={{type}}
+                    correct={{type}}
+                />,
+                {
+                    wrapper: RenderStateRoot,
+                },
+            );
+
+            // Assert
+            if (shouldRender) {
+                expect(
+                    await screen.findByRole("button", {
+                        name: "Use default start coordinates",
+                    }),
+                ).toBeInTheDocument();
+            } else {
+                expect(
+                    screen.queryByRole("button", {
+                        name: "Use default start coordinates",
+                    }),
+                ).toBeNull();
+            }
+        },
+    );
 });
diff --git a/packages/perseus-editor/src/widgets/interactive-graph-editor.tsx b/packages/perseus-editor/src/widgets/interactive-graph-editor.tsx
@@ -62,6 +62,15 @@ const POLYGON_SIDES = _.map(_.range(3, 13), function (value) {
     );
 });
 
+// TODO(LEMS-2228): Remove flags once this is fully released
+const startCoordsUiPhase1Types = [
+    "linear",
+    "linear-system",
+    "ray",
+    "segment",
+    "circle",
+];
+
 type Range = [min: number, max: number];
 
 export type Props = {
@@ -473,7 +482,13 @@ class InteractiveGraphEditor extends React.Component<Props> {
                     </LabeledRow>
                 )}
                 {this.props.graph?.type &&
-                    this.props.apiOptions?.flags?.mafs?.["start-coords-ui"] && (
+                    // TODO(LEMS-2228): Remove flags once this is fully released
+                    this.props.apiOptions?.flags?.mafs?.[
+                        "start-coords-ui-phase-1"
+                    ] &&
+                    startCoordsUiPhase1Types.includes(
+                        this.props.graph.type,
+                    ) && (
                         <StartCoordsSettings
                             {...this.props.graph}
                             range={this.props.range}

diff --git a/packages/perseus/src/types.ts b/packages/perseus/src/types.ts
@@ -165,8 +165,9 @@ export const InteractiveGraphLockedFeaturesFlags = [
 export const InteractiveGraphEditorFlags = [
     /**
      * Enables the UI for setting the start coordinates of a graph.
+     * Includes linear, linear-system, ray, segment, and circle graphs.
      */
-    "start-coords-ui",
+    "start-coords-ui-phase-1",
 ] as const;
 
 /**