From 94ad04fee00ae4601ed5d23a19bfeb9f68964c74 Mon Sep 17 00:00:00 2001 From: Nisha Yerunkar Date: Wed, 31 Jul 2024 10:54:26 -0700 Subject: [PATCH] [Hint Mode: Start Coords] Add separate flags for graph types (#1465) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## 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: https://github.com/Khan/perseus/pull/1465 --- .changeset/slow-taxis-give.md | 6 ++ .../src/__stories__/flags-for-api-options.ts | 7 ++- .../interactive-graph-editor.stories.tsx | 2 - .../interactive-graph-editor.test.tsx | 56 +++++++++++++++++++ .../src/widgets/interactive-graph-editor.tsx | 17 +++++- packages/perseus/src/types.ts | 3 +- 6 files changed, 86 insertions(+), 5 deletions(-) create mode 100644 .changeset/slow-taxis-give.md diff --git a/.changeset/slow-taxis-give.md b/.changeset/slow-taxis-give.md new file mode 100644 index 0000000000..10e33edbb4 --- /dev/null +++ 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 index c13ad0e827..fbed34fb26 100644 --- 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 index 8211dc6995..0ac497af7c 100644 --- 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 index 83bb3e0429..adf10676d5 100644 --- 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( + , + { + 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 index e697b1d21c..b91211753b 100644 --- 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 { )} {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, + ) && (