diff --git a/.changeset/lucky-seas-tickle.md b/.changeset/lucky-seas-tickle.md new file mode 100644 index 0000000000..01c3ec8bf7 --- /dev/null +++ b/.changeset/lucky-seas-tickle.md @@ -0,0 +1,6 @@ +--- +"@khanacademy/perseus": patch +"@khanacademy/perseus-editor": patch +--- + +Remove the locked-[figureName]-labels flags 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 a6b5dcbd39..915c147365 100644 --- a/packages/perseus-editor/src/__stories__/flags-for-api-options.ts +++ b/packages/perseus-editor/src/__stories__/flags-for-api-options.ts @@ -15,14 +15,6 @@ export const flags = { point: true, "unlimited-point": true, none: true, - - // Locked figures flags - "locked-point-labels": true, - "locked-line-labels": true, - "locked-vector-labels": true, - "locked-ellipse-labels": true, - "locked-polygon-labels": true, - "locked-function-labels": 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 6c7d4f2ea4..27af40c769 100644 --- a/packages/perseus-editor/src/__stories__/interactive-graph-editor.stories.tsx +++ b/packages/perseus-editor/src/__stories__/interactive-graph-editor.stories.tsx @@ -153,163 +153,7 @@ export const InteractiveGraphNone = (): React.ReactElement => { ); }; -export const MafsWithLockedFiguresCurrent = (): React.ReactElement => { - return ( - - ); -}; - -MafsWithLockedFiguresCurrent.parameters = { - chromatic: { - // Disabling because this isn't visually testing anything on the - // initial load of the editor page. - disableSnapshot: true, - }, -}; - -export const MafsWithLockedPointLabelsFlag = (): React.ReactElement => { - return ( - - ); -}; - -export const MafsWithLockedLineLabelsFlag = (): React.ReactElement => { - return ( - - ); -}; - -export const MafsWithLockedVectorLabelsFlag = (): React.ReactElement => { - return ( - - ); -}; - -export const MafsWithLockedEllipseLabelsFlag = (): React.ReactElement => { - return ( - - ); -}; - -export const MafsWithLockedPolygonLabelsFlag = (): React.ReactElement => { - return ( - - ); -}; - -export const MafsWithLockedFunctionLabelsFlag = (): React.ReactElement => { - return ( - - ); -}; - -export const MafsWithLockedFigureLabelsAllFlags = (): React.ReactElement => { +export const MafsWithLockedFigures = (): React.ReactElement => { return ( ); diff --git a/packages/perseus-editor/src/widgets/interactive-graph-editor/interactive-graph-editor.tsx b/packages/perseus-editor/src/widgets/interactive-graph-editor/interactive-graph-editor.tsx index 26d517627f..bd763c9530 100644 --- a/packages/perseus-editor/src/widgets/interactive-graph-editor/interactive-graph-editor.tsx +++ b/packages/perseus-editor/src/widgets/interactive-graph-editor/interactive-graph-editor.tsx @@ -852,7 +852,6 @@ class InteractiveGraphEditor extends React.Component { this.props.graph.type ] && ( diff --git a/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-ellipse-settings.test.tsx b/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-ellipse-settings.test.tsx index 5f20a34d33..665b8943d6 100644 --- a/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-ellipse-settings.test.tsx +++ b/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-ellipse-settings.test.tsx @@ -14,13 +14,7 @@ import { import type {UserEvent} from "@testing-library/user-event"; const defaultProps = { - flags: { - ...flags, - mafs: { - ...flags.mafs, - "locked-ellipse-settings": true, - }, - }, + flags: flags, ...getDefaultFigureForType("ellipse"), onChangeProps: () => {}, onMove: () => {}, diff --git a/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-ellipse-settings.tsx b/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-ellipse-settings.tsx index 79213f1048..9b4b1eda27 100644 --- a/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-ellipse-settings.tsx +++ b/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-ellipse-settings.tsx @@ -47,7 +47,6 @@ export type Props = LockedFigureSettingsCommonProps & const LockedEllipseSettings = (props: Props) => { const { - flags, center, radius, angle, @@ -256,55 +255,48 @@ const LockedEllipseSettings = (props: Props) => { /> {/* Visible Labels */} - {flags?.["mafs"]?.["locked-ellipse-labels"] && ( - <> - - - - - Visible labels - - {labels?.map((label, labelIndex) => ( - { - handleLabelChange(newLabel, labelIndex); - }} - onRemove={() => { - handleLabelRemove(labelIndex); - }} - containerStyle={styles.labelContainer} - /> - ))} - - - - )} + + + + Visible labels + {labels?.map((label, labelIndex) => ( + { + handleLabelChange(newLabel, labelIndex); + }} + onRemove={() => { + handleLabelRemove(labelIndex); + }} + containerStyle={styles.labelContainer} + /> + ))} + {/* Actions */} ; onChange: (props: Partial) => void; }; @@ -165,7 +160,6 @@ const LockedFiguresSection = (props: Props) => { return ( { const newExpanded = [...expandedStates]; diff --git a/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-function-settings.tsx b/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-function-settings.tsx index 984891ad3b..5bc77571ba 100644 --- a/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-function-settings.tsx +++ b/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-function-settings.tsx @@ -52,7 +52,6 @@ export type Props = LockedFunctionType & const LockedFunctionSettings = (props: Props) => { const { - flags, color: lineColor, strokeStyle, equation, @@ -337,52 +336,45 @@ const LockedFunctionSettings = (props: Props) => { /> {/* Visible Labels */} - {flags?.["mafs"]?.["locked-function-labels"] && ( - <> - - - - - Visible labels - - {labels?.map((label, labelIndex) => ( - { - handleLabelChange(newLabel, labelIndex); - }} - onRemove={() => { - handleLabelRemove(labelIndex); - }} - containerStyle={styles.labelContainer} - /> - ))} - - - - )} + + + + Visible labels + {labels?.map((label, labelIndex) => ( + { + handleLabelChange(newLabel, labelIndex); + }} + onRemove={() => { + handleLabelRemove(labelIndex); + }} + containerStyle={styles.labelContainer} + /> + ))} + {/* Actions */} { const { - flags, kind, points, color: lineColor, @@ -247,7 +246,6 @@ const LockedLineSettings = (props: Props) => { {/* Defining points settings */} { onChangeProps={(newProps) => handleChangePoint(newProps, 0)} /> { }} /> - {flags?.["mafs"]?.["locked-line-labels"] && ( - <> - - - - - Visible labels - - {labels?.map((label, labelIndex) => ( - { - handleLabelChange(newLabel, labelIndex); - }} - onRemove={() => { - handleLabelRemove(labelIndex); - }} - containerStyle={styles.labelContainer} - /> - ))} - - - - )} + {/* Visible labels */} + + + + Visible labels + + {labels?.map((label, labelIndex) => ( + { + handleLabelChange(newLabel, labelIndex); + }} + onRemove={() => { + handleLabelRemove(labelIndex); + }} + containerStyle={styles.labelContainer} + /> + ))} + {/* Actions */} { const { - flags, headerLabel, coord, color: pointColor, @@ -257,62 +248,54 @@ const LockedPointSettings = (props: Props) => { )} - {((!isDefiningPoint && flags?.["mafs"]?.["locked-point-labels"]) || - (isDefiningPoint && - flags?.["mafs"]?.["locked-line-labels"])) && ( - <> - - - - - Visible labels - - {labels?.map((label, labelIndex) => ( - { - handleLabelChange(newLabel, labelIndex); - }} - onRemove={() => { - handleLabelRemove(labelIndex); - }} - /> - ))} - - - )} + {/* Visible labels */} + + + + Visible labels + {labels?.map((label, labelIndex) => ( + { + handleLabelChange(newLabel, labelIndex); + }} + onRemove={() => { + handleLabelRemove(labelIndex); + }} + /> + ))} + {onRemove && ( { const { - flags, points, color, showVertices, @@ -349,55 +348,48 @@ const LockedPolygonSettings = (props: Props) => { /> {/* Visible Labels */} - {flags?.["mafs"]?.["locked-polygon-labels"] && ( - <> - - - - - Visible labels - - {labels?.map((label, labelIndex) => ( - { - handleLabelChange(newLabel, labelIndex); - }} - onRemove={() => { - handleLabelRemove(labelIndex); - }} - containerStyle={styles.labelContainer} - /> - ))} - - - - )} + + + + Visible labels + {labels?.map((label, labelIndex) => ( + { + handleLabelChange(newLabel, labelIndex); + }} + onRemove={() => { + handleLabelRemove(labelIndex); + }} + containerStyle={styles.labelContainer} + /> + ))} + {/* Actions */} { const { - flags, points, color: lineColor, labels, @@ -220,58 +219,52 @@ const LockedVectorSettings = (props: Props) => { }} /> - {flags?.["mafs"]?.["locked-vector-labels"] && ( - <> - - - - - Visible labels - - {labels?.map((label, labelIndex) => ( - { - handleLabelChange(newLabel, labelIndex); - }} - onRemove={() => { - handleLabelRemove(labelIndex); - }} - containerStyle={styles.labelContainer} - /> - ))} - - - - )} + {/* Visible labels */} + + + + Visible labels + {labels?.map((label, labelIndex) => ( + { + handleLabelChange(newLabel, labelIndex); + }} + onRemove={() => { + handleLabelRemove(labelIndex); + }} + containerStyle={styles.labelContainer} + /> + ))} + {/* Actions */} ; }; export default function GraphLockedLabelsLayer(props: Props) { - const {flags, lockedFigures} = props; + const {lockedFigures} = props; return lockedFigures.map((figure, i) => { if (figure.type === "label") { return ; } - if ( - // Point flag + point type - (flags?.["mafs"]?.["locked-point-labels"] && - figure.type === "point") || - // Line flag + line type - (flags?.["mafs"]?.["locked-line-labels"] && - figure.type === "line") || - // Vector flag + vector type - (flags?.["mafs"]?.["locked-vector-labels"] && - figure.type === "vector") || - // Ellipse flag + ellipse type - (flags?.["mafs"]?.["locked-ellipse-labels"] && - figure.type === "ellipse") || - // Polygon flag + polygon type - (flags?.["mafs"]?.["locked-polygon-labels"] && - figure.type === "polygon") || - // Function flag + function type - (flags?.["mafs"]?.["locked-function-labels"] && - figure.type === "function") - ) { - return ( - - {figure.labels?.map((label, j) => ( - - ))} - - {/* Account for the labels within the lines' defining points */} - {figure.type === "line" && ( - <> - {/* Point 1 labels */} - {figure.points[0].labels?.map((label, k) => ( - - ))} - {/* Point 2 labels */} - {figure.points[1].labels?.map((label, k) => ( - - ))} - - )} - - ); - } - - return null; + return ( + + {figure.labels?.map((label, j) => ( + + ))} + + {/* Account for the labels within the lines' defining points */} + {figure.type === "line" && ( + <> + {/* Point 1 labels */} + {figure.points[0].labels?.map((label, k) => ( + + ))} + {/* Point 2 labels */} + {figure.points[1].labels?.map((label, k) => ( + + ))} + + )} + + ); }); } diff --git a/packages/perseus/src/widgets/interactive-graphs/interactive-graph.test.tsx b/packages/perseus/src/widgets/interactive-graphs/interactive-graph.test.tsx index 2b7fb03595..399401e411 100644 --- a/packages/perseus/src/widgets/interactive-graphs/interactive-graph.test.tsx +++ b/packages/perseus/src/widgets/interactive-graphs/interactive-graph.test.tsx @@ -991,14 +991,10 @@ describe("Interactive Graph", function () { it("should render a locked label within a locked polygon", async () => { // Arrange - const {container} = renderQuestion(graphWithLabeledPolygon, { - flags: { - mafs: { - segment: true, - "locked-polygon-labels": true, - }, - }, - }); + const {container} = renderQuestion( + graphWithLabeledPolygon, + apiOptions, + ); // Act // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access @@ -1212,14 +1208,10 @@ describe("Interactive Graph", function () { it("should render a locked label within a locked point", async () => { // Arrange - const {container} = renderQuestion(graphWithLabeledPoint, { - flags: { - mafs: { - segment: true, - "locked-point-labels": true, - }, - }, - }); + const {container} = renderQuestion( + graphWithLabeledPoint, + apiOptions, + ); // Act // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access @@ -1238,14 +1230,10 @@ describe("Interactive Graph", function () { }); it("should render a locked label within a locked line", async () => { - const {container} = renderQuestion(graphWithLabeledLine, { - flags: { - mafs: { - segment: true, - "locked-line-labels": true, - }, - }, - }); + const {container} = renderQuestion( + graphWithLabeledLine, + apiOptions, + ); // Act // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access @@ -1285,15 +1273,10 @@ describe("Interactive Graph", function () { ], }, ]; - const {container} = renderQuestion(graphWithLabeledLine, { - flags: { - mafs: { - segment: true, - "locked-line-labels": true, - "locked-point-labels": true, - }, - }, - }); + const {container} = renderQuestion( + graphWithLabeledLine, + apiOptions, + ); // Act // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access @@ -1311,14 +1294,10 @@ describe("Interactive Graph", function () { it("should render a locked label within a locked vector", async () => { // Arrange - const {container} = renderQuestion(graphWithLabeledVector, { - flags: { - mafs: { - segment: true, - "locked-vector-labels": true, - }, - }, - }); + const {container} = renderQuestion( + graphWithLabeledVector, + apiOptions, + ); // Act // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access @@ -1338,14 +1317,10 @@ describe("Interactive Graph", function () { it("should render a locked label within a locked ellipse", async () => { // Arrange - const {container} = renderQuestion(graphWithLabeledEllipse, { - flags: { - mafs: { - segment: true, - "locked-ellipse-labels": true, - }, - }, - }); + const {container} = renderQuestion( + graphWithLabeledEllipse, + apiOptions, + ); // Act // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access @@ -1365,14 +1340,10 @@ describe("Interactive Graph", function () { it("should render a locked label within a locked function", async () => { // Arrange - const {container} = renderQuestion(graphWithLabeledFunction, { - flags: { - mafs: { - segment: true, - "locked-function-labels": true, - }, - }, - }); + const {container} = renderQuestion( + graphWithLabeledFunction, + apiOptions, + ); // Act // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access diff --git a/packages/perseus/src/widgets/interactive-graphs/mafs-graph.tsx b/packages/perseus/src/widgets/interactive-graphs/mafs-graph.tsx index 0ec7ae4724..6ede95dab0 100644 --- a/packages/perseus/src/widgets/interactive-graphs/mafs-graph.tsx +++ b/packages/perseus/src/widgets/interactive-graphs/mafs-graph.tsx @@ -271,7 +271,6 @@ export const MafsGraph = (props: MafsGraphProps) => { {props.lockedFigures && ( )}