Remove locked labels flags (#2065)

## Summary: Remove all the `locked-[figureName]-labels` flags from the Perseus repo now that the visible labels have been out for a while. This includes: - locked-point-labels - locked-line-labels - locked-vector-labels - locked-ellipse-labels - locked-polygon-labels - locked-function-labels Issue: https://khanacademy.atlassian.net/browse/LEMS-2274 ## Test plan: `yarn jest` Author: nishasy Reviewers: catandthemachines Required Reviewers: Approved By: catandthemachines Checks: ✅ Publish npm snapshot (ubuntu-latest, 20.x), ✅ Cypress (ubuntu-latest, 20.x), ✅ Lint, Typecheck, Format, and Test (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) Pull Request URL: #2065
Khan · Jan 7, 2025 · eefcf5c · eefcf5c
1 parent 55b4615
commit eefcf5c
Show file tree

Hide file tree

Showing 17 changed files with 331 additions and 653 deletions.
diff --git a/.changeset/lucky-seas-tickle.md 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
@@ -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
@@ -153,163 +153,7 @@ export const InteractiveGraphNone = (): React.ReactElement => {
     );
 };
 
-export const MafsWithLockedFiguresCurrent = (): React.ReactElement => {
-    return (
-        <EditorPageWithStorybookPreview
-            apiOptions={{
-                isMobile: false,
-                flags: {
-                    mafs: {
-                        ...flags.mafs,
-                        "locked-point-labels": false,
-                        "locked-line-labels": false,
-                        "locked-vector-labels": false,
-                        "locked-ellipse-labels": false,
-                        "locked-polygon-labels": false,
-                        "locked-function-labels": false,
-                    },
-                },
-            }}
-            question={segmentWithLockedFigures}
-        />
-    );
-};
-
-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 (
-        <EditorPageWithStorybookPreview
-            apiOptions={{
-                flags: {
-                    mafs: {
-                        ...flags.mafs,
-                        "locked-point-labels": true,
-                        "locked-line-labels": false,
-                        "locked-vector-labels": false,
-                        "locked-ellipse-labels": false,
-                        "locked-polygon-labels": false,
-                        "locked-function-labels": false,
-                    },
-                },
-            }}
-            question={segmentWithLockedFigures}
-        />
-    );
-};
-
-export const MafsWithLockedLineLabelsFlag = (): React.ReactElement => {
-    return (
-        <EditorPageWithStorybookPreview
-            apiOptions={{
-                flags: {
-                    mafs: {
-                        ...flags.mafs,
-                        "locked-point-labels": false,
-                        "locked-line-labels": true,
-                        "locked-vector-labels": false,
-                        "locked-ellipse-labels": false,
-                        "locked-polygon-labels": false,
-                        "locked-function-labels": false,
-                    },
-                },
-            }}
-            question={segmentWithLockedFigures}
-        />
-    );
-};
-
-export const MafsWithLockedVectorLabelsFlag = (): React.ReactElement => {
-    return (
-        <EditorPageWithStorybookPreview
-            apiOptions={{
-                flags: {
-                    mafs: {
-                        ...flags.mafs,
-                        "locked-point-labels": false,
-                        "locked-line-labels": false,
-                        "locked-vector-labels": true,
-                        "locked-ellipse-labels": false,
-                        "locked-polygon-labels": false,
-                        "locked-function-labels": false,
-                    },
-                },
-            }}
-            question={segmentWithLockedFigures}
-        />
-    );
-};
-
-export const MafsWithLockedEllipseLabelsFlag = (): React.ReactElement => {
-    return (
-        <EditorPageWithStorybookPreview
-            apiOptions={{
-                flags: {
-                    mafs: {
-                        ...flags.mafs,
-                        "locked-point-labels": false,
-                        "locked-line-labels": false,
-                        "locked-vector-labels": false,
-                        "locked-ellipse-labels": true,
-                        "locked-polygon-labels": false,
-                        "locked-function-labels": false,
-                    },
-                },
-            }}
-            question={segmentWithLockedFigures}
-        />
-    );
-};
-
-export const MafsWithLockedPolygonLabelsFlag = (): React.ReactElement => {
-    return (
-        <EditorPageWithStorybookPreview
-            apiOptions={{
-                flags: {
-                    mafs: {
-                        ...flags.mafs,
-                        "locked-point-labels": false,
-                        "locked-line-labels": false,
-                        "locked-vector-labels": false,
-                        "locked-ellipse-labels": false,
-                        "locked-polygon-labels": true,
-                        "locked-function-labels": false,
-                    },
-                },
-            }}
-            question={segmentWithLockedFigures}
-        />
-    );
-};
-
-export const MafsWithLockedFunctionLabelsFlag = (): React.ReactElement => {
-    return (
-        <EditorPageWithStorybookPreview
-            apiOptions={{
-                flags: {
-                    mafs: {
-                        ...flags.mafs,
-                        "locked-point-labels": false,
-                        "locked-line-labels": false,
-                        "locked-vector-labels": false,
-                        "locked-ellipse-labels": false,
-                        "locked-polygon-labels": false,
-                        "locked-function-labels": true,
-                    },
-                },
-            }}
-            question={segmentWithLockedFigures}
-        />
-    );
-};
-
-export const MafsWithLockedFigureLabelsAllFlags = (): React.ReactElement => {
+export const MafsWithLockedFigures = (): React.ReactElement => {
     return (
         <EditorPageWithStorybookPreview question={segmentWithLockedFigures} />
     );

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
@@ -852,7 +852,6 @@ class InteractiveGraphEditor extends React.Component<Props> {
                             this.props.graph.type
                         ] && (
                             <LockedFiguresSection
-                                flags={this.props.apiOptions.flags}
                                 figures={this.props.lockedFigures}
                                 onChange={this.props.onChange}
                             />

diff --git a/...itor/src/widgets/interactive-graph-editor/locked-figures/locked-ellipse-settings.test.tsx b/...itor/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/...us-editor/src/widgets/interactive-graph-editor/locked-figures/locked-ellipse-settings.tsx b/...us-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"] && (
-                <>
-                    <Strut size={spacing.xxxSmall_4} />
-                    <View style={styles.horizontalRule} />
-                    <Strut size={spacing.small_12} />
-
-                    <LabelMedium>Visible labels</LabelMedium>
-
-                    {labels?.map((label, labelIndex) => (
-                        <LockedLabelSettings
-                            {...label}
-                            key={labelIndex}
-                            expanded={true}
-                            onChangeProps={(newLabel) => {
-                                handleLabelChange(newLabel, labelIndex);
-                            }}
-                            onRemove={() => {
-                                handleLabelRemove(labelIndex);
-                            }}
-                            containerStyle={styles.labelContainer}
-                        />
-                    ))}
-
-                    <Button
-                        kind="tertiary"
-                        startIcon={plusCircle}
-                        onClick={() => {
-                            const newLabel = {
-                                ...getDefaultFigureForType("label"),
-                                coord: [
-                                    center[0],
-                                    // Additional vertical offset for each
-                                    // label so they don't overlap.
-                                    center[1] - (labels?.length ?? 0),
-                                ],
-                                // Default to the same color as the ellipse
-                                color: color,
-                            } satisfies LockedLabelType;
-
-                            onChangeProps({
-                                labels: [...(labels ?? []), newLabel],
-                            });
-                        }}
-                        style={styles.addButton}
-                    >
-                        Add visible label
-                    </Button>
-                </>
-            )}
+            <Strut size={spacing.xxxSmall_4} />
+            <View style={styles.horizontalRule} />
+            <Strut size={spacing.small_12} />
+            <LabelMedium>Visible labels</LabelMedium>
+            {labels?.map((label, labelIndex) => (
+                <LockedLabelSettings
+                    {...label}
+                    key={labelIndex}
+                    expanded={true}
+                    onChangeProps={(newLabel) => {
+                        handleLabelChange(newLabel, labelIndex);
+                    }}
+                    onRemove={() => {
+                        handleLabelRemove(labelIndex);
+                    }}
+                    containerStyle={styles.labelContainer}
+                />
+            ))}
+            <Button
+                kind="tertiary"
+                startIcon={plusCircle}
+                onClick={() => {
+                    const newLabel = {
+                        ...getDefaultFigureForType("label"),
+                        coord: [
+                            center[0],
+                            // Additional vertical offset for each
+                            // label so they don't overlap.
+                            center[1] - (labels?.length ?? 0),
+                        ],
+                        // Default to the same color as the ellipse
+                        color: color,
+                    } satisfies LockedLabelType;
+
+                    onChangeProps({
+                        labels: [...(labels ?? []), newLabel],
+                    });
+                }}
+                style={styles.addButton}
+            >
+                Add visible label
+            </Button>
 
             {/* Actions */}
             <LockedFigureSettingsActions

diff --git a/...eus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-figure-settings.tsx b/...eus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-figure-settings.tsx
@@ -24,11 +24,8 @@ import type {Props as LockedLineProps} from "./locked-line-settings";
 import type {Props as LockedPointProps} from "./locked-point-settings";
 import type {Props as LockedPolygonProps} from "./locked-polygon-settings";
 import type {Props as LockedVectorProps} from "./locked-vector-settings";
-import type {APIOptions} from "@khanacademy/perseus";
 
 export type LockedFigureSettingsCommonProps = {
-    flags?: APIOptions["flags"];
-
     // Movement props
     /**
      * Called when a movement button (top, up, down, bottom) is pressed.

diff --git a/...eus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-figures-section.tsx b/...eus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-figures-section.tsx
@@ -19,14 +19,9 @@ import {getDefaultFigureForType} from "./util";
 
 import type {LockedFigureSettingsMovementType} from "./locked-figure-settings-actions";
 import type {Props as InteractiveGraphEditorProps} from "../interactive-graph-editor";
-import type {
-    APIOptions,
-    LockedFigure,
-    LockedFigureType,
-} from "@khanacademy/perseus";
+import type {LockedFigure, LockedFigureType} from "@khanacademy/perseus";
 
 type Props = {
-    flags?: APIOptions["flags"];
     figures?: Array<LockedFigure>;
     onChange: (props: Partial<InteractiveGraphEditorProps>) => void;
 };
@@ -165,7 +160,6 @@ const LockedFiguresSection = (props: Props) => {
                         return (
                             <LockedFigureSettings
                                 key={`${uniqueId}-locked-${figure}-${index}`}
-                                flags={props.flags}
                                 expanded={expandedStates[index]}
                                 onToggle={(newValue) => {
                                     const newExpanded = [...expandedStates];