[Interactive Graph Editor] Put the action buttons under the m2 flag (#…

…1365)

## Summary:
The action buttons that were added in #1360
need to be behind the m2 flag. Adding the check here.

Issue: https://khanacademy.atlassian.net/browse/LEMS-1951

## Test plan:
Storybook
- Go to http://localhost:6006/?path=/story/perseuseditor-editorpage--mafs-with-locked-figures-current
- It should not have the action buttons in the locked figure settings
- Go to http://localhost:6006/?path=/story/perseuseditor-editorpage--mafs-with-locked-figures-m-2-flag
- Expand all the locked figure settings.
- They should all have the action buttons.

### Current
<img width="371" alt="Screenshot 2024-06-20 at 2 02 23 PM" src="https://github.com/Khan/perseus/assets/13231763/97e9cca9-c0db-4900-8360-7eb6e67ba2dd">

### M2 flag
<img width="369" alt="Screenshot 2024-06-20 at 2 02 39 PM" src="https://github.com/Khan/perseus/assets/13231763/101941c8-b4f5-450f-b748-eda8ac2e61fa">

<img width="370" alt="Screenshot 2024-06-20 at 2 02 46 PM" src="https://github.com/Khan/perseus/assets/13231763/820cce4a-c54b-4c89-a94e-0db3579c8425">

Author: nishasy

Reviewers: mark-fitzgerald, benchristel

Required Reviewers:

Approved By: mark-fitzgerald

Checks: ✅ gerald, ✅ Upload Coverage (ubuntu-latest, 20.x), ⏭️  Publish npm snapshot, ✅ Lint, Typecheck, Format, and Test (ubuntu-latest, 20.x), ✅ Check for .changeset entries for all changed files (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), 🚫 Upload Coverage, ✅ 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 for .changeset entries for all changed files (ubuntu-latest, 20.x), 🚫 Check builds for changes in size (ubuntu-latest, 20.x), ✅ Publish Storybook to Chromatic (ubuntu-latest, 20.x), ✅ gerald

Pull Request URL: #1365

.changeset/funny-sheep-retire.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/perseus-editor": patch
+---
+
+[Interactive Graph Editor] Put the action buttons behind the m2 flag

packages/perseus-editor/src/components/locked-ellipse-settings.tsx

@@ -159,6 +159,7 @@ const LockedEllipseSettings = (props: Props) => {
 
             {/* Actions */}
             <LockedFigureSettingsActions
+                showM2Features={props.showM2Features}
                 figureType={props.type}
                 onMove={onMove}
                 onRemove={onRemove}

packages/perseus-editor/src/components/locked-figure-settings-actions.tsx

@@ -25,6 +25,9 @@ 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;
@@ -47,34 +50,38 @@ const LockedFigureSettingsActions = (props: Props) => {
 
             <Spring />
 
-            <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}
-            />
+            {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}
+                    />
+                </>
+            )}
         </View>
     );
 };

packages/perseus-editor/src/components/locked-line-settings.tsx

@@ -177,6 +177,7 @@ const LockedLineSettings = (props: Props) => {
 
             {/* Actions */}
             <LockedFigureSettingsActions
+                showM2Features={props.showM2Features}
                 figureType={props.type}
                 onMove={onMove}
                 onRemove={onRemove}

packages/perseus-editor/src/components/locked-point-settings.tsx

@@ -79,6 +79,7 @@ const LockedPointSettings = (props: Props) => {
             />
 
             <LockedFigureSettingsActions
+                showM2Features={props.showM2Features}
                 figureType={props.type}
                 onMove={onMove}
                 onRemove={onRemove}

packages/perseus-editor/src/components/locked-polygon-settings.tsx

@@ -197,6 +197,7 @@ const LockedPolygonSettings = (props: Props) => {
 
             {/* Actions */}
             <LockedFigureSettingsActions
+                showM2Features={props.showM2Features}
                 figureType={props.type}
                 onMove={onMove}
                 onRemove={onRemove}

packages/perseus-editor/src/components/locked-vector-settings.tsx

@@ -128,6 +128,7 @@ const LockedVectorSettings = (props: Props) => {
 
             {/* Actions */}
             <LockedFigureSettingsActions
+                showM2Features={props.showM2Features}
                 figureType={props.type}
                 onMove={onMove}
                 onRemove={onRemove}