Remove interactive-graph-locked-features-labels flag (#2063)

## Summary: Remove the `interactive-graph-locked-feature-label` flag from the Perseus repo now that the full graph aria label/description and standalone locked labels have been out for a while now. 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), ✅ Check builds for changes in size (ubuntu-latest, 20.x), ✅ Check for .changeset entries for all changed files (ubuntu-latest, 20.x), ✅ Lint, Typecheck, Format, and Test (ubuntu-latest, 20.x), ✅ Cypress (ubuntu-latest, 20.x), ✅ Publish Storybook to Chromatic (ubuntu-latest, 20.x) Pull Request URL: #2063
Khan · Jan 7, 2025 · 85a5b5e · 85a5b5e
1 parent 4bf4960
commit 85a5b5e
Show file tree

Hide file tree

Showing 11 changed files with 17 additions and 81 deletions.
diff --git a/.changeset/chilled-lizards-rush.md b/.changeset/chilled-lizards-rush.md
@@ -0,0 +1,6 @@
+---
+"@khanacademy/perseus": patch
+"@khanacademy/perseus-editor": patch
+---
+
+Remove the interactive-graph-locked-features-labels flag
diff --git a/packages/perseus-editor/src/__stories__/flags-for-api-options.ts b/packages/perseus-editor/src/__stories__/flags-for-api-options.ts
@@ -17,7 +17,6 @@ export const flags = {
         none: true,
 
         // Locked figures flags
-        "interactive-graph-locked-features-labels": true,
         "locked-figures-aria": true,
         "locked-point-labels": true,
         "locked-line-labels": true,

diff --git a/packages/perseus-editor/src/__stories__/interactive-graph-editor.stories.tsx b/packages/perseus-editor/src/__stories__/interactive-graph-editor.stories.tsx
@@ -161,7 +161,6 @@ export const MafsWithLockedFiguresCurrent = (): React.ReactElement => {
                 flags: {
                     mafs: {
                         ...flags.mafs,
-                        "interactive-graph-locked-features-labels": false,
                         "locked-figures-aria": false,
                         "locked-point-labels": false,
                         "locked-line-labels": false,
@@ -185,36 +184,13 @@ MafsWithLockedFiguresCurrent.parameters = {
     },
 };
 
-export const MafsWithLockedLabelsFlag = (): React.ReactElement => {
-    return (
-        <EditorPageWithStorybookPreview
-            apiOptions={{
-                flags: {
-                    mafs: {
-                        ...flags.mafs,
-                        "interactive-graph-locked-features-labels": true,
-                        "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}
-        />
-    );
-};
-
 export const MafsWithLockedPointLabelsFlag = (): React.ReactElement => {
     return (
         <EditorPageWithStorybookPreview
             apiOptions={{
                 flags: {
                     mafs: {
                         ...flags.mafs,
-                        "interactive-graph-locked-features-labels": true,
                         "locked-point-labels": true,
                         "locked-line-labels": false,
                         "locked-vector-labels": false,
@@ -236,7 +212,6 @@ export const MafsWithLockedLineLabelsFlag = (): React.ReactElement => {
                 flags: {
                     mafs: {
                         ...flags.mafs,
-                        "interactive-graph-locked-features-labels": true,
                         "locked-point-labels": false,
                         "locked-line-labels": true,
                         "locked-vector-labels": false,
@@ -258,7 +233,6 @@ export const MafsWithLockedVectorLabelsFlag = (): React.ReactElement => {
                 flags: {
                     mafs: {
                         ...flags.mafs,
-                        "interactive-graph-locked-features-labels": true,
                         "locked-point-labels": false,
                         "locked-line-labels": false,
                         "locked-vector-labels": true,
@@ -280,7 +254,6 @@ export const MafsWithLockedEllipseLabelsFlag = (): React.ReactElement => {
                 flags: {
                     mafs: {
                         ...flags.mafs,
-                        "interactive-graph-locked-features-labels": true,
                         "locked-point-labels": false,
                         "locked-line-labels": false,
                         "locked-vector-labels": false,
@@ -302,7 +275,6 @@ export const MafsWithLockedPolygonLabelsFlag = (): React.ReactElement => {
                 flags: {
                     mafs: {
                         ...flags.mafs,
-                        "interactive-graph-locked-features-labels": true,
                         "locked-point-labels": false,
                         "locked-line-labels": false,
                         "locked-vector-labels": false,
@@ -324,7 +296,6 @@ export const MafsWithLockedFunctionLabelsFlag = (): React.ReactElement => {
                 flags: {
                     mafs: {
                         ...flags.mafs,
-                        "interactive-graph-locked-features-labels": true,
                         "locked-point-labels": false,
                         "locked-line-labels": false,
                         "locked-vector-labels": false,

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
@@ -853,11 +853,6 @@ class InteractiveGraphEditor extends React.Component<Props> {
                         ] && (
                             <LockedFiguresSection
                                 flags={this.props.apiOptions.flags}
-                                showLabelsFlag={
-                                    this.props.apiOptions?.flags?.mafs?.[
-                                        "interactive-graph-locked-features-labels"
-                                    ]
-                                }
                                 figures={this.props.lockedFigures}
                                 onChange={this.props.onChange}
                             />

diff --git a/...rseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-figure-select.tsx b/...rseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-figure-select.tsx
@@ -14,10 +14,6 @@ import * as React from "react";
 import type {LockedFigureType} from "@khanacademy/perseus";
 
 type Props = {
-    // Whether to show the locked labels in the locked figure settings.
-    // TODO(LEMS-2274): Remove this prop once the label flag is
-    // sfully rolled out.
-    showLabelsFlag?: boolean;
     id: string;
     onChange: (value: LockedFigureType) => void;
 };
@@ -32,7 +28,7 @@ const LockedFigureSelect = (props: Props) => {
         "ellipse",
         "polygon",
         "function",
-        ...(props.showLabelsFlag ? ["label" as const] : []),
+        "label",
     ];
 
     return (

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
@@ -5,6 +5,7 @@
  * Used in the interactive graph editor's locked figures section.
  */
 
+import {UnreachableCaseError} from "@khanacademy/wonder-stuff-core";
 import * as React from "react";
 
 import LockedEllipseSettings from "./locked-ellipse-settings";
@@ -27,10 +28,6 @@ import type {APIOptions} from "@khanacademy/perseus";
 
 export type LockedFigureSettingsCommonProps = {
     flags?: APIOptions["flags"];
-    // Whether to show the locked labels in the locked figure settings.
-    // TODO(LEMS-2274): Remove this prop once the label flag is
-    // sfully rolled out.
-    showLabelsFlag?: boolean;
 
     // Movement props
     /**
@@ -80,13 +77,10 @@ const LockedFigureSettings = (props: Props) => {
         case "function":
             return <LockedFunctionSettings {...props} />;
         case "label":
-            if (props.showLabelsFlag) {
-                return <LockedLabelSettings {...props} />;
-            }
-            break;
+            return <LockedLabelSettings {...props} />;
+        default:
+            throw new UnreachableCaseError(props);
     }
-
-    return null;
 };
 
 export default LockedFigureSettings;
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
@@ -27,10 +27,6 @@ import type {
 
 type Props = {
     flags?: APIOptions["flags"];
-    // Whether to show the locked labels in the locked figure settings.
-    // TODO(LEMS-2274): Remove this prop once the label flag is
-    // sfully rolled out.
-    showLabelsFlag?: boolean;
     figures?: Array<LockedFigure>;
     onChange: (props: Partial<InteractiveGraphEditorProps>) => void;
 };
@@ -170,7 +166,6 @@ const LockedFiguresSection = (props: Props) => {
                             <LockedFigureSettings
                                 key={`${uniqueId}-locked-${figure}-${index}`}
                                 flags={props.flags}
-                                showLabelsFlag={props.showLabelsFlag}
                                 expanded={expandedStates[index]}
                                 onToggle={(newValue) => {
                                     const newExpanded = [...expandedStates];
@@ -190,7 +185,6 @@ const LockedFiguresSection = (props: Props) => {
                     })}
                     <View style={styles.buttonContainer}>
                         <LockedFigureSelect
-                            showLabelsFlag={props.showLabelsFlag}
                             id={`${uniqueId}-select`}
                             onChange={addLockedFigure}
                         />

diff --git a/packages/perseus/src/types.ts b/packages/perseus/src/types.ts
@@ -209,11 +209,6 @@ export const MafsGraphTypeFlags = [
 ] as const;
 
 export const InteractiveGraphLockedFeaturesFlags = [
-    /**
-     * Enables/Disables locked features in the new Mafs interactive-graph
-     * widget (locked labels).
-     */
-    "interactive-graph-locked-features-labels",
     /**
      * Enables/disables the aria labels associated with specific locked
      * figures in the updated Interactive Graph widget.

diff --git a/packages/perseus/src/widgets/interactive-graphs/interactive-graph.stories.tsx b/packages/perseus/src/widgets/interactive-graphs/interactive-graph.stories.tsx
@@ -41,7 +41,6 @@ const enableMafs: APIOptions = {
             "unlimited-polygon": true,
             "unlimited-point": true,
             angle: true,
-            "interactive-graph-locked-features-labels": true,
         },
     },
 };

diff --git a/packages/perseus/src/widgets/interactive-graphs/interactive-graph.test.tsx b/packages/perseus/src/widgets/interactive-graphs/interactive-graph.test.tsx
@@ -1068,7 +1068,6 @@ describe("Interactive Graph", function () {
                 flags: {
                     mafs: {
                         segment: true,
-                        "interactive-graph-locked-features-labels": true,
                         "locked-polygon-labels": true,
                     },
                 },
@@ -1276,7 +1275,6 @@ describe("Interactive Graph", function () {
                 flags: {
                     mafs: {
                         segment: true,
-                        "interactive-graph-locked-features-labels": true,
                     },
                 },
             });
@@ -1320,7 +1318,6 @@ describe("Interactive Graph", function () {
                 flags: {
                     mafs: {
                         segment: true,
-                        "interactive-graph-locked-features-labels": true,
                         "locked-point-labels": true,
                     },
                 },
@@ -1347,7 +1344,6 @@ describe("Interactive Graph", function () {
                 flags: {
                     mafs: {
                         segment: true,
-                        "interactive-graph-locked-features-labels": true,
                         "locked-line-labels": true,
                     },
                 },
@@ -1395,7 +1391,6 @@ describe("Interactive Graph", function () {
                 flags: {
                     mafs: {
                         segment: true,
-                        "interactive-graph-locked-features-labels": true,
                         "locked-line-labels": true,
                         "locked-point-labels": true,
                     },
@@ -1422,7 +1417,6 @@ describe("Interactive Graph", function () {
                 flags: {
                     mafs: {
                         segment: true,
-                        "interactive-graph-locked-features-labels": true,
                         "locked-vector-labels": true,
                     },
                 },
@@ -1450,7 +1444,6 @@ describe("Interactive Graph", function () {
                 flags: {
                     mafs: {
                         segment: true,
-                        "interactive-graph-locked-features-labels": true,
                         "locked-ellipse-labels": true,
                     },
                 },
@@ -1478,7 +1471,6 @@ describe("Interactive Graph", function () {
                 flags: {
                     mafs: {
                         segment: true,
-                        "interactive-graph-locked-features-labels": true,
                         "locked-function-labels": true,
                     },
                 },
@@ -1506,7 +1498,6 @@ describe("Interactive Graph", function () {
                 flags: {
                     mafs: {
                         segment: true,
-                        "interactive-graph-locked-features-labels": true,
                     },
                 },
             });
@@ -1529,7 +1520,6 @@ describe("Interactive Graph", function () {
                 flags: {
                     mafs: {
                         segment: true,
-                        "interactive-graph-locked-features-labels": true,
                     },
                 },
             });

diff --git a/packages/perseus/src/widgets/interactive-graphs/mafs-graph.tsx b/packages/perseus/src/widgets/interactive-graphs/mafs-graph.tsx
@@ -270,15 +270,12 @@ export const MafsGraph = (props: MafsGraphProps) => {
                                 )}
                             </svg>
                         </Mafs>
-                        {props.flags?.["mafs"]?.[
-                            "interactive-graph-locked-features-labels"
-                        ] &&
-                            props.lockedFigures && (
-                                <GraphLockedLabelsLayer
-                                    flags={props.flags}
-                                    lockedFigures={props.lockedFigures}
-                                />
-                            )}
+                        {props.lockedFigures && (
+                            <GraphLockedLabelsLayer
+                                flags={props.flags}
+                                lockedFigures={props.lockedFigures}
+                            />
+                        )}
                         <View style={{position: "absolute"}}>
                             <Mafs
                                 preserveAspectRatio={false}