C2LC-496: Made actions menu aware of selected action.

src/ActionsMenuItem.js

@@ -12,6 +12,7 @@ import './ActionsMenuItem.scss';
 type ActionsMenuItemProps = {
     intl: IntlShape,
     isAllowed?: boolean,
+    isSelected?: boolean,
     isUsed?: boolean,
     itemKey: string,
     onChange: (event: Event) => void
@@ -26,7 +27,7 @@ export class ActionsMenuItem extends React.Component< ActionsMenuItemProps, {} >
 
     handleChange = (event: Event) => {
         // Always reenabled disallowed commands, but do not disable used ones.
-        if (!this.props.isAllowed || !this.props.isUsed) {
+        if (!this.props.isAllowed || !(this.props.isSelected || this.props.isUsed)) {
             event.preventDefault();
             this.props.onChange(event);
         }
@@ -39,6 +40,10 @@ export class ActionsMenuItem extends React.Component< ActionsMenuItemProps, {} >
         if (this.props.isUsed) {
             commandName += " " + usedLabel;
         }
+        if (this.props.isSelected) {
+            const selectedLabel = this.props.intl.formatMessage({ id: 'ActionsMenuItem.selectedActionToggleLabel' });
+            commandName += " " + selectedLabel
+        }
 
         const checkboxId = `actions-menu-item-${this.props.itemKey}`;
 
@@ -55,7 +60,7 @@ export class ActionsMenuItem extends React.Component< ActionsMenuItemProps, {} >
         }
 
         // Disable the checkbox if the button is allowed and used.
-        const isCheckboxDisabled = (this.props.isAllowed && this.props.isUsed);
+        const isCheckboxDisabled = (this.props.isAllowed && (this.props.isUsed || this.props.isSelected));
 
         return (
             <div

src/ActionsMenuItem.scss

@@ -22,6 +22,11 @@
     }
 }
 
+.ActionsMenuItem__checkbox {
+    margin: auto 0;
+    margin-right: 0.2rem;
+}
+
 .ActionsMenuItem__option {
     background-color: inherit;
     border: 0;

src/ActionsSimplificationModal.js

@@ -23,6 +23,8 @@ type ActionsSimplificationModalProps = {
     menuItems: Array<CommandName>,
     programSequence: ProgramSequence,
     allowedActions: ActionToggleRegister,
+    // TODO: Make this and App.js use CommandName.
+    selectedAction?: null|string,
     show: boolean
 };
 
@@ -124,6 +126,7 @@ class ActionsSimplificationModal extends React.Component<ActionsSimplificationMo
                     intl={this.props.intl}
                     isAllowed={isAllowed}
                     isUsed={isUsed}
+                    isSelected={this.props.selectedAction === itemKey}
                     itemKey={itemKey}
                     key={itemKey}
                     onChange={itemChangeHandler}

src/App.js

@@ -917,20 +917,6 @@ export class App extends React.Component<AppProps, AppState> {
         });
     }
 
-    handleToggleAllowedCommand = (event: Event, commandName: CommandName) => {
-        // TODO: Use the function form of setState() as the new state
-        //       depends on the current state
-        const currentIsAllowed = this.state.allowedActions[commandName];
-        if (this.state.programSequence.usesAction(commandName) && currentIsAllowed) {
-            event.preventDefault();
-        }
-        else {
-            const newAllowedActions= Object.assign({}, this.state.allowedActions);
-            newAllowedActions[commandName] = !currentIsAllowed;
-            this.setState({ allowedActions: newAllowedActions})
-        }
-    }
-
     changeProgramSpeedIndex = (newSpeedIndex: number) => {
         if (newSpeedIndex >= 0 && newSpeedIndex <= (this.speedLookUp.length - 1)) {
             this.interpreter.setStepTime(this.speedLookUp[newSpeedIndex]);
@@ -1357,6 +1343,7 @@ export class App extends React.Component<AppProps, AppState> {
                     onConfirm={this.handleChangeAllowedActions}
                     allowedActions={this.state.allowedActions}
                     programSequence={this.state.programSequence}
+                    selectedAction={this.state.selectedAction}
                 />
             </React.Fragment>
         );

src/messages.json

@@ -21,6 +21,7 @@
         "ActionsMenuItem.command.right180": "Turn right 180 degrees",
         "ActionsMenuItem.unusedItemToggleLabel": "{action}",
         "ActionsMenuItem.usedItemToggleLabel": "(Used)",
+        "ActionsMenuItem.selectedActionToggleLabel": "(Selected)",
         "ActionsSimplificationModal.cancel": "Cancel",
         "ActionsSimplificationModal.save": "Save",
         "ActionsSimplificationModal.title": "Available Actions",