[Interactive Graph Locked Figures] Remove m2 flag from the code (#1470)

## Summary: Now that locked figures m2 has been released for a while with no issues coming up, we can remove the flag conditionals from the code. After this, I'll remove the flag from webapp and growthbook as well. Issue: https://khanacademy.atlassian.net/browse/LEMS-2016 ## Test plan: `yarn jest` `yarn typecheck` Scour the Perseus repo for instances of `m2Features`, `features-m2`, and other variations. Confirm they no longer exist. Look for m2b and make sure m2 is no longer next to it in each location. Author: nishasy Reviewers: mark-fitzgerald, jeremywiebe Required Reviewers: Approved By: mark-fitzgerald Checks: ✅ codecov/project, ✅ codecov/patch, ✅ Upload Coverage (ubuntu-latest, 20.x), ✅ gerald, ⏭️ Publish npm snapshot, ✅ Check builds for changes in size (ubuntu-latest, 20.x), ✅ Cypress (ubuntu-latest, 20.x), ✅ Jest Coverage (ubuntu-latest, 20.x), ✅ Lint, Typecheck, Format, and Test (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: #1470
Khan · Aug 1, 2024 · 942b0a9 · 942b0a9
1 parent 6e1ec85
commit 942b0a9
Show file tree

Hide file tree

Showing 16 changed files with 44 additions and 116 deletions.
diff --git a/.changeset/gentle-melons-jam.md b/.changeset/gentle-melons-jam.md
@@ -0,0 +1,6 @@
+---
+"@khanacademy/perseus": patch
+"@khanacademy/perseus-editor": patch
+---
+
+[Interactive Graph Locked Figures] Remove m2 flag from the code
diff --git a/packages/perseus-editor/src/__stories__/flags-for-api-options.ts b/packages/perseus-editor/src/__stories__/flags-for-api-options.ts
@@ -13,7 +13,6 @@ export const flags = {
         ray: true,
 
         // Locked figures flags
-        "interactive-graph-locked-features-m2": true,
         "interactive-graph-locked-features-m2b": true,
 
         // Start coords UI 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,
-                        "interactive-graph-locked-features-m2": false,
                         "interactive-graph-locked-features-m2b": false,
                     },
                 },
@@ -140,32 +139,6 @@ MafsWithLockedFiguresCurrent.parameters = {
     },
 };
 
-export const MafsWithLockedFiguresM2Flag = (): React.ReactElement => {
-    return (
-        <EditorPageWithStorybookPreview
-            apiOptions={{
-                isMobile: false,
-                flags: {
-                    mafs: {
-                        ...flags.mafs,
-                        "interactive-graph-locked-features-m2": true,
-                        "interactive-graph-locked-features-m2b": false,
-                    },
-                },
-            }}
-            question={segmentWithLockedFigures}
-        />
-    );
-};
-
-MafsWithLockedFiguresM2Flag.parameters = {
-    chromatic: {
-        // Disabling because this isn't visually testing anything on the
-        // initial load of the editor page.
-        disable: true,
-    },
-};
-
 export const MafsWithLockedFiguresM2bFlag = (): React.ReactElement => {
     return (
         <EditorPageWithStorybookPreview question={segmentWithLockedFigures} />

diff --git a/packages/perseus-editor/src/components/__stories__/locked-figures-section.stories.tsx b/packages/perseus-editor/src/components/__stories__/locked-figures-section.stories.tsx
@@ -32,7 +32,6 @@ export const Controlled: StoryComponentType = {
 
         return (
             <LockedFiguresSection
-                showM2Features={true}
                 showM2bFeatures={true}
                 figures={figures}
                 onChange={handlePropsUpdate}
@@ -55,7 +54,6 @@ export const WithProdWidth: StoryComponentType = {
         return (
             <View style={styles.prodSizeContainer}>
                 <LockedFiguresSection
-                    showM2Features={true}
                     showM2bFeatures={true}
                     figures={figures}
                     onChange={handlePropsUpdate}

diff --git a/packages/perseus-editor/src/components/__tests__/locked-figures-section.test.tsx b/packages/perseus-editor/src/components/__tests__/locked-figures-section.test.tsx
@@ -42,7 +42,6 @@ describe("LockedFiguresSection", () => {
         // Arrange, Act
         render(
             <LockedFiguresSection
-                showM2Features={true}
                 showM2bFeatures={true}
                 onChange={jest.fn()}
             />,
@@ -59,7 +58,6 @@ describe("LockedFiguresSection", () => {
         // Arrange, Act
         render(
             <LockedFiguresSection
-                showM2Features={true}
                 showM2bFeatures={true}
                 onChange={jest.fn()}
             />,
@@ -78,7 +76,6 @@ describe("LockedFiguresSection", () => {
         render(
             <LockedFiguresSection
                 figures={defaultFigures}
-                showM2Features={true}
                 showM2bFeatures={true}
                 onChange={jest.fn()}
             />,
@@ -101,7 +98,6 @@ describe("LockedFiguresSection", () => {
         render(
             <LockedFiguresSection
                 figures={defaultFigures}
-                showM2Features={true}
                 showM2bFeatures={true}
                 onChange={jest.fn()}
             />,
@@ -126,7 +122,6 @@ describe("LockedFiguresSection", () => {
         render(
             <LockedFiguresSection
                 figures={defaultFigures}
-                showM2Features={true}
                 showM2bFeatures={true}
                 onChange={jest.fn()}
             />,
@@ -157,7 +152,6 @@ describe("LockedFiguresSection", () => {
         render(
             <LockedFiguresSection
                 figures={defaultFigures}
-                showM2Features={true}
                 showM2bFeatures={true}
                 onChange={jest.fn()}
             />,
@@ -192,7 +186,6 @@ describe("LockedFiguresSection", () => {
         // Arrange
         render(
             <LockedFiguresSection
-                showM2Features={true}
                 showM2bFeatures={true}
                 figures={defaultFigures}
                 onChange={jest.fn()}
@@ -219,7 +212,6 @@ describe("LockedFiguresSection", () => {
         // Arrange
         render(
             <LockedFiguresSection
-                showM2Features={true}
                 showM2bFeatures={true}
                 figures={[
                     getDefaultFigureForType("point"),

diff --git a/packages/perseus-editor/src/components/graph-locked-figures/locked-ellipse-settings.tsx b/packages/perseus-editor/src/components/graph-locked-figures/locked-ellipse-settings.tsx
@@ -154,7 +154,6 @@ const LockedEllipseSettings = (props: Props) => {
 
             {/* Actions */}
             <LockedFigureSettingsActions
-                showM2Features={props.showM2Features}
                 figureType={props.type}
                 onMove={onMove}
                 onRemove={onRemove}

diff --git a/packages/perseus-editor/src/components/graph-locked-figures/locked-figure-select.tsx b/packages/perseus-editor/src/components/graph-locked-figures/locked-figure-select.tsx
@@ -12,8 +12,6 @@ import {StyleSheet} from "aphrodite";
 import * as React from "react";
 
 type Props = {
-    // TODO(LEMS-2016): Remove this prop once the M2 flag is fully rolled out.
-    showM2Features: boolean;
     // TODO(LEMS-2107): Remove this prop once the M2b flag is fully rolled out.
     showM2bFeatures: boolean;
     id: string;
@@ -23,17 +21,18 @@ type Props = {
 const LockedFigureSelect = (props: Props) => {
     const {id, onChange} = props;
 
-    const figureTypes = props.showM2Features
-        ? ["point", "line", "vector", "ellipse", "polygon"]
-        : ["point", "line"];
+    const figureTypes = ["point", "line", "vector", "ellipse", "polygon"];
+    const figureTypesCurrent = props.showM2bFeatures
+        ? [...figureTypes, "function"]
+        : figureTypes;
 
     return (
         <View style={styles.container}>
             <ActionMenu
                 menuText="Add locked figure"
                 style={styles.addElementSelect}
             >
-                {figureTypes.map((figureType) => (
+                {figureTypesCurrent.map((figureType) => (
                     <ActionItem
                         key={`${id}-${figureType}`}
                         label={figureType}

diff --git a/...ges/perseus-editor/src/components/graph-locked-figures/locked-figure-settings-actions.tsx b/...ges/perseus-editor/src/components/graph-locked-figures/locked-figure-settings-actions.tsx
@@ -25,9 +25,6 @@ export type LockedFigureSettingsMovementType =
     | "front";
 
 type Props = {
-    // Whether to show the M2 features in the locked figure settings.
-    // TODO(LEMS-2016): Remove this prop once the M2 flag is fully rolled out.
-    showM2Features?: boolean;
     figureType: LockedFigureType;
     onMove: (movement: LockedFigureSettingsMovementType) => void;
     onRemove: () => void;
@@ -50,38 +47,34 @@ const LockedFigureSettingsActions = (props: Props) => {
 
             <Spring />
 
-            {props.showM2Features && (
-                <>
-                    <IconButton
-                        icon={caretDoubleUpIcon}
-                        size="small"
-                        aria-label={`Move locked ${figureType} to the back`}
-                        onClick={() => onMove("back")}
-                        style={styles.iconButton}
-                    />
-                    <IconButton
-                        icon={caretUpIcon}
-                        size="small"
-                        aria-label={`Move locked ${figureType} backward`}
-                        onClick={() => onMove("backward")}
-                        style={styles.iconButton}
-                    />
-                    <IconButton
-                        icon={caretDownIcon}
-                        size="small"
-                        aria-label={`Move locked ${figureType} forward`}
-                        onClick={() => onMove("forward")}
-                        style={styles.iconButton}
-                    />
-                    <IconButton
-                        icon={caretDoubleDownIcon}
-                        size="small"
-                        aria-label={`Move locked ${figureType} to the front`}
-                        onClick={() => onMove("front")}
-                        style={styles.iconButton}
-                    />
-                </>
-            )}
+            <IconButton
+                icon={caretDoubleUpIcon}
+                size="small"
+                aria-label={`Move locked ${figureType} to the back`}
+                onClick={() => onMove("back")}
+                style={styles.iconButton}
+            />
+            <IconButton
+                icon={caretUpIcon}
+                size="small"
+                aria-label={`Move locked ${figureType} backward`}
+                onClick={() => onMove("backward")}
+                style={styles.iconButton}
+            />
+            <IconButton
+                icon={caretDownIcon}
+                size="small"
+                aria-label={`Move locked ${figureType} forward`}
+                onClick={() => onMove("forward")}
+                style={styles.iconButton}
+            />
+            <IconButton
+                icon={caretDoubleDownIcon}
+                size="small"
+                aria-label={`Move locked ${figureType} to the front`}
+                onClick={() => onMove("front")}
+                style={styles.iconButton}
+            />
         </View>
     );
 };

diff --git a/packages/perseus-editor/src/components/graph-locked-figures/locked-figure-settings.tsx b/packages/perseus-editor/src/components/graph-locked-figures/locked-figure-settings.tsx
@@ -21,9 +21,6 @@ import type {Props as LockedPolygonProps} from "./locked-polygon-settings";
 import type {Props as LockedVectorProps} from "./locked-vector-settings";
 
 export type LockedFigureSettingsCommonProps = {
-    // Whether to show the M2 features in the locked figure settings.
-    // TODO(LEMS-2016): Remove this prop once the M2 flag is fully rolled out.
-    showM2Features?: boolean;
     // Whether to show the M2b features in the locked figure settings.
     // TODO(LEMS-2107): Remove this prop once the M2b flag is fully rolled out.
     showM2bFeatures?: boolean;
@@ -66,19 +63,11 @@ const LockedFigureSettings = (props: Props) => {
         case "line":
             return <LockedLineSettings {...props} />;
         case "vector":
-            if (props.showM2Features) {
-                return <LockedVectorSettings {...props} />;
-            }
-            break;
+            return <LockedVectorSettings {...props} />;
         case "ellipse":
-            if (props.showM2Features) {
-                return <LockedEllipseSettings {...props} />;
-            }
-            break;
+            return <LockedEllipseSettings {...props} />;
         case "polygon":
-            if (props.showM2Features) {
-                return <LockedPolygonSettings {...props} />;
-            }
+            return <LockedPolygonSettings {...props} />;
     }
 
     return null;

diff --git a/packages/perseus-editor/src/components/graph-locked-figures/locked-figures-section.tsx b/packages/perseus-editor/src/components/graph-locked-figures/locked-figures-section.tsx
@@ -21,9 +21,6 @@ import type {Props as InteractiveGraphEditorProps} from "../../widgets/interacti
 import type {LockedFigure, LockedFigureType} from "@khanacademy/perseus";
 
 type Props = {
-    // Whether to show the M2 features in the locked figure settings.
-    // TODO(LEMS-2016): Remove this prop once the M2 flag is fully rolled out.
-    showM2Features: boolean;
     // Whether to show the M2b features in the locked figure settings.
     // TODO(LEMS-2107): Remove this prop once the M2b flag is fully rolled out.
     showM2bFeatures: boolean;
@@ -171,7 +168,6 @@ const LockedFiguresSection = (props: Props) => {
                         return (
                             <LockedFigureSettings
                                 key={`${uniqueId}-locked-${figure}-${index}`}
-                                showM2Features={props.showM2Features}
                                 showM2bFeatures={props.showM2bFeatures}
                                 expanded={expandedStates[index]}
                                 onToggle={(newValue) => {
@@ -192,7 +188,6 @@ const LockedFiguresSection = (props: Props) => {
                     })}
                     <View style={styles.buttonContainer}>
                         <LockedFigureSelect
-                            showM2Features={props.showM2Features}
                             showM2bFeatures={props.showM2bFeatures}
                             id={`${uniqueId}-select`}
                             onChange={addLockedFigure}

diff --git a/packages/perseus-editor/src/components/graph-locked-figures/locked-line-settings.tsx b/packages/perseus-editor/src/components/graph-locked-figures/locked-line-settings.tsx
@@ -178,7 +178,6 @@ const LockedLineSettings = (props: Props) => {
 
             {/* Actions */}
             <LockedFigureSettingsActions
-                showM2Features={props.showM2Features}
                 figureType={props.type}
                 onMove={onMove}
                 onRemove={onRemove}

diff --git a/packages/perseus-editor/src/components/graph-locked-figures/locked-point-settings.tsx b/packages/perseus-editor/src/components/graph-locked-figures/locked-point-settings.tsx
@@ -80,7 +80,6 @@ const LockedPointSettings = (props: Props) => {
             />
 
             <LockedFigureSettingsActions
-                showM2Features={props.showM2Features}
                 figureType={props.type}
                 onMove={onMove}
                 onRemove={onRemove}

diff --git a/packages/perseus-editor/src/components/graph-locked-figures/locked-polygon-settings.tsx b/packages/perseus-editor/src/components/graph-locked-figures/locked-polygon-settings.tsx
@@ -192,7 +192,6 @@ const LockedPolygonSettings = (props: Props) => {
 
             {/* Actions */}
             <LockedFigureSettingsActions
-                showM2Features={props.showM2Features}
                 figureType={props.type}
                 onMove={onMove}
                 onRemove={onRemove}

diff --git a/packages/perseus-editor/src/components/graph-locked-figures/locked-vector-settings.tsx b/packages/perseus-editor/src/components/graph-locked-figures/locked-vector-settings.tsx
@@ -129,7 +129,6 @@ const LockedVectorSettings = (props: Props) => {
 
             {/* Actions */}
             <LockedFigureSettingsActions
-                showM2Features={props.showM2Features}
                 figureType={props.type}
                 onMove={onMove}
                 onRemove={onRemove}

diff --git a/packages/perseus-editor/src/widgets/interactive-graph-editor.tsx b/packages/perseus-editor/src/widgets/interactive-graph-editor.tsx
@@ -615,11 +615,6 @@ class InteractiveGraphEditor extends React.Component<Props> {
                             this.props.graph.type
                         ] && (
                             <LockedFiguresSection
-                                showM2Features={
-                                    this.props.apiOptions?.flags?.mafs?.[
-                                        "interactive-graph-locked-features-m2"
-                                    ]
-                                }
                                 showM2bFeatures={
                                     this.props.apiOptions?.flags?.mafs?.[
                                         "interactive-graph-locked-features-m2b"

diff --git a/packages/perseus/src/types.ts b/packages/perseus/src/types.ts
@@ -150,14 +150,8 @@ export const MafsGraphTypeFlags = [
 
 export const InteractiveGraphLockedFeaturesFlags = [
     /**
-     * Enables/Disables inital Milestone 2 locked features in the new Mafs
-     * interactive-graph widget (ellipses, vectors, polygons).
-     */
-    "interactive-graph-locked-features-m2",
-    /**
-     * Enables/Disables remaining Milestone 2 locked features in the new Mafs
-     * interactive-graph widget (the rest of the figure types:
-     * function plots, labels).
+     * Enables/Disables Milestone 2 phase b locked features in the
+     * new Mafs interactive-graph widget (locked functions).
      */
     "interactive-graph-locked-features-m2b",
 ] as const;