billy/ 521 Consistent Search

CHANGELOG.md

@@ -25,6 +25,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 * Hid staking button on wallet page @jolesbi
 * Increment version in package.json @jolesbi
 * Added proper voyager logo to readme @jolesbi
+* Made search consistent @okwme
 
 ### Fixes
 

app/src/renderer/components/common/NiModalSearch.vue

@@ -11,7 +11,7 @@
           step="1"
           placeholder="View block height..."
           v-model="query")
-        btn(value="Go")
+        btn(value="Find")
         btn(type="button" icon="close" @click.native="close")
       form-msg(name="Query" type="numeric"
         v-if="!$v.filters.blocks.search.query.numeric")

app/src/renderer/components/govern/PageProposals.vue

@@ -3,9 +3,9 @@ page(title='Proposals')
   div(slot="menu"): tool-bar
     router-link(to="/proposals/new" exact v-tooltip.bottom="'New Proposal'")
       i.material-icons add
-    a(@click='setSearch(true)' v-tooltip.bottom="'Search'")
+    a(@click='setSearch()' v-tooltip.bottom="'Search'" :disabled="!somethingToSearch")
       i.material-icons search
-  modal-search(type="proposals")
+  modal-search(type="proposals" v-if="somethingToSearch")
 
   data-loading(v-if="proposals.loading")
   data-empty(v-else-if="proposals.length === 0")
@@ -45,6 +45,9 @@ export default {
   },
   computed: {
     ...mapGetters(["proposals", "filters"]),
+    somethingToSearch() {
+      return !this.proposals.loading && !!this.proposals.length
+    },
     filteredProposals() {
       if (this.proposals.items && this.filters) {
         let query = this.filters.proposals.search.query
@@ -113,7 +116,8 @@ export default {
     gotoNewProposal() {
       this.$router.push("/proposals/new")
     },
-    setSearch(bool) {
+    setSearch(bool = !this.filters["proposals"].search.visible) {
+      if (!this.somethingToSearch) return false
       this.$store.commit("setSearchVisible", ["proposals", bool])
     }
   },

app/src/renderer/components/monitor/PageBlocks.vue

@@ -1,10 +1,10 @@
 <template lang="pug">
 page(title='Block Explorer')
   div(slot="menu"): tool-bar
-    a(@click='setSearch(true)' v-tooltip.bottom="'Search Block'")
+    a(@click='setSearch()' v-tooltip.bottom="'Search Block'" :disabled="!somethingToSearch")
       i.material-icons search
 
-  modal-search(type="blocks")
+  modal-search(type="blocks" v-if="somethingToSearch")
 
   data-loading(v-if="blockchain.syncing" title="Node is syncing blockchain…")
   data-loading(v-if="!blockchain.syncing && !blockchain.subscription")
@@ -48,7 +48,10 @@ export default {
     ModalSearch
   },
   computed: {
-    ...mapGetters(["blockchain", "lastHeader"]),
+    ...mapGetters(["blockchain", "lastHeader", "filters"]),
+    somethingToSearch() {
+      return !this.blockchain.syncing && !!this.blocks.length
+    },
     latestBlockTime() {
       return moment(this.lastHeader.time).format("MMMM Do YYYY — hh:mm:ss")
     },
@@ -64,16 +67,14 @@ export default {
     num: num
   }),
   methods: {
-    setSearch(bool) {
+    setSearch(bool = !this.filters["blocks"].search.visible) {
+      if (!this.somethingToSearch) return false
       this.$store.commit("setSearchVisible", ["blocks", bool])
     }
   },
   mounted() {
     Mousetrap.bind(["command+f", "ctrl+f"], () => this.setSearch(true))
     Mousetrap.bind("esc", () => this.setSearch(false))
-  },
-  beforeDestroy() {
-    this.$store.commit("resetSearch", "blocks")
   }
 }
 </script>

app/src/renderer/components/staking/PageStaking.vue

@@ -3,10 +3,10 @@ page(title='Staking')
   div(slot="menu"): tool-bar
     a(@click='updateDelegates(address)' v-tooltip.bottom="'Refresh'")
       i.material-icons refresh
-    a(@click='setSearch(true)' v-tooltip.bottom="'Search'")
+    a(@click='setSearch()' v-tooltip.bottom="'Search'" :disabled="!somethingToSearch")
       i.search.material-icons search
 
-  modal-search(type="delegates")
+  modal-search(type="delegates" v-if="somethingToSearch")
 
   .delegates-container
     data-loading(v-if="delegates.loading")
@@ -60,6 +60,9 @@ export default {
     address() {
       return this.user.address
     },
+    somethingToSearch() {
+      return !this.delegates.loading && !!this.delegates.delegates.length
+    },
     filteredDelegates() {
       let query = this.filters.delegates.search.query
 
@@ -141,7 +144,8 @@ export default {
       let candidates = await this.$store.dispatch("getDelegates")
       this.$store.dispatch("getBondedDelegates", candidates)
     },
-    setSearch(bool) {
+    setSearch(bool = !this.filters["delegates"].search.visible) {
+      if (!this.somethingToSearch) return false
       this.$store.commit("setSearchVisible", ["delegates", bool])
     }
   },

app/src/renderer/components/wallet/PageTransactions.vue

@@ -1,10 +1,10 @@
 <template lang="pug">
 page(title='Transactions')
   div(slot="menu"): tool-bar
-    a(@click='setSearch(true)' v-tooltip.bottom="'Search'")
+    a(@click='setSearch()' v-tooltip.bottom="'Search'" :disabled="!somethingToSearch")
       i.material-icons search
 
-  modal-search(type="transactions")
+  modal-search(type="transactions" v-if="somethingToSearch")
 
   data-loading(v-if="wallet.historyLoading")
   data-empty-tx(v-else-if='transactions.length === 0')
@@ -45,6 +45,9 @@ export default {
   },
   computed: {
     ...mapGetters(["filters", "transactions", "wallet", "config"]),
+    somethingToSearch() {
+      return !this.wallet.historyLoading && !!this.transactions.length
+    },
     orderedTransactions() {
       let list = orderBy(
         this.transactions,
@@ -73,7 +76,8 @@ export default {
     }
   }),
   methods: {
-    setSearch(bool) {
+    setSearch(bool = !this.filters["transactions"].search.visible) {
+      if (!this.somethingToSearch) return false
       this.$store.commit("setSearchVisible", ["transactions", bool])
     }
   },

app/src/renderer/components/wallet/PageWallet.vue

@@ -3,10 +3,10 @@ page(title='Wallet')
   div(slot="menu"): tool-bar
     a(@click='updateBalances()' v-tooltip.bottom="'Refresh'")
       i.material-icons refresh
-    a(@click='setSearch(true)' v-tooltip.bottom="'Search'")
+    a(@click='setSearch()' v-tooltip.bottom="'Search'" :disabled="!somethingToSearch")
       i.material-icons search
 
-  modal-search(type="balances")
+  modal-search(type="balances" v-if="somethingToSearch")
 
   part(title='Your Address')
     list-item(
@@ -66,6 +66,9 @@ export default {
   },
   computed: {
     ...mapGetters(["filters", "wallet", "committedDelegations", "config"]),
+    somethingToSearch() {
+      return !this.wallet.balancesLoading && !!this.wallet.balances.length
+    },
     allDenomBalances() {
       // for denoms not in balances, add empty balance
       let balances = this.wallet.balances.slice(0)
@@ -99,7 +102,8 @@ export default {
     }
   },
   methods: {
-    setSearch(bool) {
+    setSearch(bool = !this.filters["balances"].search.visible) {
+      if (!this.somethingToSearch) return false
       this.$store.commit("setSearchVisible", ["balances", bool])
     },
     updateBalances() {

app/src/renderer/vuex/modules/blockchain.js

@@ -11,6 +11,9 @@ export default ({ commit, node }) => {
   }
 
   const mutations = {
+    setBlocks(state, blocks) {
+      state.blocks = blocks
+    },
     setBlock(state, block) {
       state.block = block
     },

app/src/renderer/vuex/modules/delegates.js

@@ -7,6 +7,12 @@ export default ({ dispatch, node }) => {
   }
 
   const mutations = {
+    setDelegateLoading(state, loading) {
+      state.loading = loading
+    },
+    setDelegates(state, delegates) {
+      state.delegates = delegates
+    },
     addDelegate(state, delegate) {
       delegate.id = delegate.pub_key.data
       Object.assign(delegate, delegate.description)
@@ -24,24 +30,25 @@ export default ({ dispatch, node }) => {
   }
 
   const actions = {
-    reconnected({ state, dispatch }) {
+    reconnected({ state, commit, dispatch }) {
       if (state.loading) {
         dispatch("getDelegates")
       }
     },
-    async getDelegates({ state, dispatch, rootState }) {
-      state.loading = true
+    async getDelegates({ state, dispatch, rootState, commit }) {
+      commit("setDelegateLoading", true)
       let delegatePubkeys = (await node.candidates()).data
       await Promise.all(
         delegatePubkeys.map(pubkey => {
           return dispatch("getDelegate", pubkey)
         })
       )
-      state.delegates = indicateValidators(
-        state.delegates,
-        rootState.config.maxValidators
+      commit(
+        "setDelegates",
+        indicateValidators(state.delegates, rootState.config.maxValidators)
       )
-      state.loading = false
+      commit("setDelegateLoading", false)
+
       return state.delegates
     },
     async getDelegate({ commit }, pubkey) {

app/src/renderer/vuex/modules/wallet.js

@@ -15,6 +15,9 @@ export default ({ commit, node }) => {
   }
 
   let mutations = {
+    setHistoryLoading(state, loading) {
+      state.historyLoading = loading
+    },
     setWalletBalances(state, balances) {
       state.balances = balances
       state.balancesLoading = false
@@ -80,7 +83,7 @@ export default ({ commit, node }) => {
       dispatch("queryWalletBalances")
     },
     async queryWalletHistory({ state, commit, dispatch }) {
-      state.historyLoading = true
+      commit("setHistoryLoading", true)
       // let res = await node.coinTxs(state.address)
       // XXX
       let res = []
@@ -96,7 +99,7 @@ export default ({ commit, node }) => {
       await Promise.all(
         blockHeights.map(h => dispatch("queryTransactionTime", h))
       )
-      state.historyLoading = false
+      commit("setHistoryLoading", false)
     },
     async queryTransactionTime({ commit, dispatch }, blockHeight) {
       let blockMetaInfo = await dispatch("queryBlockInfo", blockHeight)

test/unit/specs/components/common/NiModalSearch.spec.js

@@ -1,12 +1,14 @@
 import NiModalSearch from "common/NiModalSearch"
 import setup from "../../../helpers/vuex-setup"
+import Vuelidate from "vuelidate"
 
 describe("NiModalSearch", () => {
   let wrapper, store
-  let { mount } = setup()
+  let { mount, shallow, localVue } = setup()
 
   beforeEach(() => {
     let instance = mount(NiModalSearch, { propsData: { type: "transactions" } })
+    localVue.use(Vuelidate)
     store = instance.store
     wrapper = instance.wrapper
     store.commit("setSearchVisible", ["transactions", true])
@@ -39,4 +41,18 @@ describe("NiModalSearch", () => {
       "def"
     ])
   })
+
+  it("should show find button on blocks", () => {
+    wrapper.setProps({ type: "blocks" })
+    store.commit("setSearchVisible", ["blocks", true])
+    store.commit("setSearchVisible", ["transactions", false])
+    wrapper.update()
+
+    expect(
+      wrapper
+        .find(".ni-modal-search-field .ni-btn__value")
+        .text()
+        .trim()
+    ).toBe("Find")
+  })
 })

test/unit/specs/components/monitor/PageBlocks.spec.js

@@ -4,7 +4,7 @@ import PageBlocks from "renderer/components/monitor/PageBlocks"
 
 describe("PageBlocks", () => {
   let wrapper, store
-  let { mount } = setup()
+  let { mount, shallow } = setup()
 
   let block = {
     header: {
@@ -50,13 +50,38 @@ describe("PageBlocks", () => {
     expect(htmlBeautify(wrapper.html())).toMatchSnapshot()
   })
 
-  it("should call resetSearch on beforeDestroy", () => {
-    wrapper.destroy()
-    expect(store.commit).toHaveBeenCalledWith("resetSearch", "blocks")
+  it("should update 'somethingToSearch' when there's nothing to search", () => {
+    expect(wrapper.vm.somethingToSearch).toBe(true)
+    let instance = shallow(PageBlocks, {
+      stubs: { "modal-search": "<modal-search />" },
+      getters: {
+        lastHeader: () => ({
+          time: 1608,
+          last_block_id: { hash: "123" },
+          height: 12345
+        }),
+        blockchain: () => ({
+          blocks: [],
+          block,
+          blockMetaInfo: { block_id: { hash: "hash" } },
+          blockHeight: null,
+          blockLoading: false,
+          subscription: true,
+          blockMetas: []
+        })
+      }
+    })
+    wrapper = instance.wrapper
+    expect(wrapper.vm.somethingToSearch).toBe(false)
   })
+  //
+  // it("should not call resetSearch on beforeDestroy", () => {
+  //   wrapper.destroy()
+  //   expect(store.commit).toHaveBeenCalledWith("resetSearch", "blocks")
+  // })
 
   it("should show the search on click", () => {
-    wrapper.vm.setSearch(true)
+    wrapper.vm.setSearch()
     expect(store.commit).toHaveBeenCalledWith("setSearchVisible", [
       "blocks",
       true