Scene: UX improvement on new trigger/action (#2086)

GladysAssistant · May 20, 2024 · 24f98ca · 24f98ca
1 parent 6054152
commit 24f98ca
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 55 deletions.
diff --git a/front/cypress/e2e/routes/scene/Scene.cy.js b/front/cypress/e2e/routes/scene/Scene.cy.js
@@ -66,12 +66,6 @@ describe('Scene view', () => {
         .click(0, 0, { force: true });
     });
 
-    // I don't know why, but I'm unable to get this button with
-    // the text. Using the class but it's not recommended otherwise!!
-    cy.get('.btn-success').then(buttons => {
-      cy.wrap(buttons[1]).click();
-    });
-
     cy.get('div[class*="-control"]').then(inputs => {
       cy.wrap(inputs[1])
         .click(0, 0, { force: true })
@@ -138,12 +132,6 @@ describe('Scene view', () => {
         .click(0, 0, { force: true });
     });
 
-    // I don't know why, but I'm unable to get this button with
-    // the text. Using the class but it's not recommended otherwise!!
-    cy.get('.btn-success').then(buttons => {
-      cy.wrap(buttons[1]).click();
-    });
-
     cy.wait('@loadDevices');
     // eslint-disable-next-line cypress/no-unnecessary-waiting
     cy.wait(100);
@@ -176,12 +164,6 @@ describe('Scene view', () => {
         .click(0, 0, { force: true });
     });
 
-    // I don't know why, but I'm unable to get this button with
-    // the text. Using the class but it's not recommended otherwise!!
-    cy.get('.btn-success').then(buttons => {
-      cy.wrap(buttons[1]).click();
-    });
-
     cy.get('select').then(selects => {
       cy.wrap(selects[0]).select('contains');
       cy.wrap(selects[1]).select('start');

diff --git a/front/src/routes/scene/edit-scene/actions/ChooseActionTypeCard.jsx b/front/src/routes/scene/edit-scene/actions/ChooseActionTypeCard.jsx
@@ -49,10 +49,8 @@ class ChooseActionType extends Component {
     this.setState({
       currentAction: selectedOption
     });
-  };
-  changeBoxType = () => {
-    if (this.state.currentAction) {
-      this.props.updateActionProperty(this.props.columnIndex, this.props.index, 'type', this.state.currentAction.value);
+    if (selectedOption) {
+      this.props.updateActionProperty(this.props.columnIndex, this.props.index, 'type', selectedOption.value);
     }
   };
   render(props, { currentAction }) {
@@ -74,11 +72,6 @@ class ChooseActionType extends Component {
             options={options}
           />
         </div>
-        <div class="form-group">
-          <button onClick={this.changeBoxType} class="btn btn-success">
-            <Text id="editScene.addActionButton" />
-          </button>
-        </div>
       </div>
     );
   }

diff --git a/front/src/routes/scene/edit-scene/index.js b/front/src/routes/scene/edit-scene/index.js
@@ -98,8 +98,25 @@ class EditScene extends Component {
     }
     this.setState({ saving: false });
   };
-  addAction = columnIndex => {
-    this.setState(prevState => {
+  addEmptyActionGroupIfNeeded = async () => {
+    const { actions } = this.state.scene;
+    const lastActionGroup = actions[actions.length - 1];
+    if (lastActionGroup.length > 0) {
+      const newState = update(this.state, {
+        scene: {
+          actions: {
+            $push: [[]]
+          }
+        },
+        variables: {
+          $push: [[]]
+        }
+      });
+      await this.setState(newState);
+    }
+  };
+  addAction = async columnIndex => {
+    await this.setState(prevState => {
       let newState = update(prevState, {
         scene: {
           actions: {
@@ -118,20 +135,9 @@ class EditScene extends Component {
           }
         }
       });
-      if (columnIndex + 1 === newState.scene.actions.length && newState.scene.actions[columnIndex].length === 1) {
-        newState = update(newState, {
-          scene: {
-            actions: {
-              $push: [[]]
-            }
-          },
-          variables: {
-            $push: [[]]
-          }
-        });
-      }
       return newState;
     });
+    await this.addEmptyActionGroupIfNeeded();
   };
   deleteActionGroup = columnIndex => {
     let newState = update(this.state, {
@@ -392,6 +398,7 @@ class EditScene extends Component {
       }
     });
     await this.setState(newState);
+    await this.addEmptyActionGroupIfNeeded();
   };
 
   moveCardGroup = async (index, destIndex) => {
@@ -428,6 +435,7 @@ class EditScene extends Component {
       }
     });
     await this.setState(newState);
+    await this.addEmptyActionGroupIfNeeded();
   };
 
   setTags = tags => {

diff --git a/front/src/routes/scene/edit-scene/triggers/ChooseTriggerTypeCard.jsx b/front/src/routes/scene/edit-scene/triggers/ChooseTriggerTypeCard.jsx
@@ -35,15 +35,7 @@ class ChooseTriggerType extends Component {
       this.setState({
         currentTrigger: selectedOption
       });
-    } else {
-      this.setState({
-        currentTrigger: null
-      });
-    }
-  };
-  changeBoxType = () => {
-    if (this.state.currentTrigger) {
-      this.props.updateTriggerProperty(this.props.index, 'type', this.state.currentTrigger.value);
+      this.props.updateTriggerProperty(this.props.index, 'type', selectedOption.value);
     }
   };
 
@@ -77,11 +69,6 @@ class ChooseTriggerType extends Component {
             onChange={this.handleChange}
           />
         </div>
-        <div class="form-group">
-          <button onClick={this.changeBoxType} class="btn btn-success">
-            <Text id="editScene.addTriggerButton" />
-          </button>
-        </div>
       </div>
     );
   }