refactor modified indication

Author: corevo

packages/selenium-ide/src/neo/components/Suite/index.jsx

@@ -124,7 +124,13 @@ class Suite extends React.Component {
               onClick={this.handleClick}
             >
               <span className="si-caret" />
-              <span className="title">{this.props.suite.name}</span>
+              <span
+                className={classNames('title', {
+                  changed: this.props.suite.modified,
+                })}
+              >
+                {this.props.suite.name}
+              </span>
             </a>
           )}
           {listMenu}

packages/selenium-ide/src/neo/components/Suite/style.css

@@ -21,6 +21,10 @@
   overflow: hidden;
 }
 
+.project > a .title.changed::after {
+  content: '*';
+}
+
 .project > a .si-caret {
   font-size: 10px;
   color: #505050;

packages/selenium-ide/src/neo/components/TestList/index.jsx

@@ -73,7 +73,7 @@ export default class TestList extends Component {
                   PlaybackState.stackCaller.id === test.id &&
                   PlaybackState.paused
                 }
-                changed={UiState.getTestState(test).modified}
+                changed={test.modified}
                 selectTest={UiState.selectTest}
                 moveSelectionUp={() => {
                   UiState.selectTestByIndex(index - 1)
@@ -107,7 +107,7 @@ export default class TestList extends Component {
                   PlaybackState.stackCaller.id === test.id &&
                   PlaybackState.paused
                 }
-                changed={UiState.getTestState(test).modified}
+                changed={test.modified}
                 selectTest={UiState.selectTest}
                 removeTest={
                   this.props.removeTest
@@ -145,7 +145,7 @@ export default class TestList extends Component {
                   PlaybackState.stackCaller.id === test.id &&
                   PlaybackState.paused
                 }
-                changed={UiState.getTestState(test).modified}
+                changed={test.modified}
                 selectTest={UiState.selectTest}
                 renameTest={this.props.renameTest}
                 duplicateTest={() => {

packages/selenium-ide/src/neo/components/TestTable/index.jsx

@@ -60,8 +60,8 @@ export default class TestTable extends React.Component {
     this.newCommand = undefined
   }
   scrollToLastPos() {
-    if (UiState.selectedTest.state.scrollY) {
-      this.node.scrollTop = UiState.selectedTest.state.scrollY
+    if (UiState.selectedTest.test.scrollY) {
+      this.node.scrollTop = UiState.selectedTest.test.scrollY
     } else {
       this.node.scrollTop = 0
     }
@@ -78,7 +78,7 @@ export default class TestTable extends React.Component {
     }
   }
   handleScroll() {
-    UiState.selectedTest.state.scrollY = this.node.scrollTop
+    UiState.selectedTest.test.scrollY = this.node.scrollTop
   }
   render() {
     if (this.props.commands)

packages/selenium-ide/src/neo/models/Suite.js

@@ -15,7 +15,7 @@
 // specific language governing permissions and limitations
 // under the License.
 
-import { action, observable, computed } from 'mobx'
+import { action, observable, computed, reaction } from 'mobx'
 import uuidv4 from 'uuid/v4'
 import naturalCompare from 'string-natural-compare'
 import TestCase from './TestCase'
@@ -34,10 +34,18 @@ export default class Suite {
   persistSession = false
   @observable
   _tests = []
+  @observable
+  modified = false
 
   constructor(id = uuidv4(), name = 'Untitled Suite') {
     this.id = id
     this.name = name
+    this.changeTestsDisposer = reaction(
+      () => this._tests.length,
+      () => {
+        this.modified = true
+      }
+    )
     this.containsTest = this.containsTest.bind(this)
     this.export = this.export.bind(this)
   }
@@ -56,6 +64,7 @@ export default class Suite {
   @action.bound
   setName(name) {
     this.name = name
+    this.modified = true
   }
 
   @action.bound

packages/selenium-ide/src/neo/models/TestCase.js

@@ -15,7 +15,7 @@
 // specific language governing permissions and limitations
 // under the License.
 
-import { action, observable } from 'mobx'
+import { action, observable, reaction } from 'mobx'
 import uuidv4 from 'uuid/v4'
 import Command from './Command'
 
@@ -26,11 +26,30 @@ export default class TestCase {
   @observable
   commands = []
   nameDialogShown = false
+  @observable
+  modified = false
+  @observable
+  selectedCommand = null
+  @observable
+  scrollY = null
 
   constructor(id = uuidv4(), name = 'Untitled Test') {
     this.id = id
     this.name = name
+    this.changeDisposer = reaction(
+      () =>
+        this.commands.map(({ command, target, targets, value }) => ({
+          command,
+          target,
+          targets,
+          value,
+        })),
+      () => {
+        this.modified = true
+      }
+    )
     this.export = this.export.bind(this)
+    this.dispose = this.dispose.bind(this)
   }
 
   @action.bound
@@ -50,6 +69,7 @@ export default class TestCase {
   @action.bound
   setName(name) {
     this.name = name
+    this.modified = true
   }
 
   @action.bound
@@ -138,6 +158,10 @@ export default class TestCase {
     }
   }
 
+  dispose() {
+    this.changeDisposer()
+  }
+
   @action
   static fromJS = function(jsRep) {
     const test = new TestCase(jsRep.id)

packages/selenium-ide/src/neo/side-effects/modify.js

@@ -15,12 +15,11 @@
 // specific language governing permissions and limitations
 // under the License.
 
-import { action, observable, computed, toJS } from 'mobx'
+import { action, observable, computed, reaction, toJS } from 'mobx'
 import uuidv4 from 'uuid/v4'
 import naturalCompare from 'string-natural-compare'
 import TestCase from '../../models/TestCase'
 import Suite from '../../models/Suite'
-import modify from '../../side-effects/modify'
 import { VERSIONS } from '../../IO/migrate'
 
 export default class ProjectStore {
@@ -45,8 +44,28 @@ export default class ProjectStore {
 
   constructor(name = 'Untitled Project') {
     this.name = name
-    modify(this)
+    this.changedTestDisposer = reaction(
+      () => this._tests.find(({ modified }) => modified),
+      modified => {
+        if (modified) this.setModified(true)
+      }
+    )
+    this.changeTestsDisposer = reaction(
+      () => this._tests.length,
+      () => this.setModified(true)
+    )
+    this.changedSuiteDisposer = reaction(
+      () => this._suites.find(({ modified }) => modified),
+      modified => {
+        if (modified) this.setModified(true)
+      }
+    )
+    this.changeSuitesDisposer = reaction(
+      () => this._suites.length,
+      () => this.setModified(true)
+    )
     this.toJS = this.toJS.bind(this)
+    this.dispose = this.dispose.bind(this)
   }
 
   @computed
@@ -67,13 +86,17 @@ export default class ProjectStore {
   @action.bound
   setUrl(url) {
     this.url = url
+    this.setModified(true)
   }
 
   @action.bound
   addUrl(urlToAdd) {
     if (urlToAdd) {
       const url = new URL(urlToAdd).href
-      if (!this._urls.find(u => u === url)) this._urls.push(url)
+      if (!this._urls.find(u => u === url)) {
+        this._urls.push(url)
+        this.setModified(true)
+      }
     }
   }
 
@@ -85,14 +108,12 @@ export default class ProjectStore {
   @action.bound
   changeName(name) {
     this.name = name.replace(/<[^>]*>/g, '') // firefox adds unencoded html elements to the string, strip them
+    this.setModified(true)
   }
 
   @action.bound
   setModified(modified = true) {
     this.modified = modified
-    if (!modified) {
-      modify(this)
-    }
   }
 
   @action.bound
@@ -197,6 +218,13 @@ export default class ProjectStore {
     this.setModified(false)
   }
 
+  dispose() {
+    this.changeTestsDisposer()
+    this.changedTestDisposer()
+    this.changeSuitesDisposer()
+    this.changedSuiteDisposer()
+  }
+
   toJS() {
     return toJS({
       id: this.id,

packages/selenium-ide/src/neo/stores/domain/ProjectStore.js

@@ -605,5 +605,7 @@ export default function seed(store, numberOfSuites = 0) {
 
   store.changeName('seed project')
 
+  UiState.saved()
+
   return store
 }