sabau/1681-Modal proposal feedback

CHANGELOG.md

@@ -41,6 +41,8 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 - [\#1672](https://github.com/cosmos/voyager/issues/1672) added e2e tests for staking parameters tab @fedekunze
 - [\#1550](https://github.com/cosmos/voyager/issues/1578) added e2e tests for voting on governance proposals @fedekunze
 - [\#1555](https://github.com/cosmos/voyager/issues/1578) added e2e tests for submitting a deposit on a governance proposal @fedekunze
+- [\#1681](https://github.com/cosmos/voyager/issues/1681) Governance: Fixed voting starting date @sabau
+- [\#1690](https://github.com/cosmos/voyager/issues/1690) Governance: Fixed error messages for maxLength @sabau
 
 ### Changed
 

app/src/renderer/components/governance/ModalPropose.vue

@@ -9,35 +9,49 @@
         <i class="material-icons">close</i>
       </div>
     </div>
-    <tm-form-group class="page-proposal-form-group"
-      ><span>Title</span>
+    <tm-form-group :error="$v.title.$invalid" class="page-proposal-form-group">
+      <span>Title</span>
       <tm-field
-        v-focus="v - focus"
+        v-focus
         id="title"
         v-model="title"
         type="text"
         placeholder="Proposal title"
       />
+      <tm-form-msg
+        v-if="!$v.title.maxLength"
+        :max="$v.title.$params.maxLength.max"
+        name="Proposal Title"
+        type="maxLength"
+      />
     </tm-form-group>
-    <tm-form-group class="page-proposal-form-group"
-      ><span>Description</span>
+    <tm-form-group
+      :error="$v.description.$invalid"
+      class="page-proposal-form-group"
+    >
+      <span>Description</span>
       <tm-field
         id="description"
         v-model="description"
         type="textarea"
         placeholder="Write your proposal here..."
       />
+      <tm-form-msg
+        v-if="!$v.description.maxLength"
+        :max="$v.description.$params.maxLength.max"
+        name="Description"
+        type="maxLength"
+      />
     </tm-form-group>
-    <tm-form-group class="modal-propose-form-group" field-id="amount"
-      ><span>Deposit amount</span>
+    <tm-form-group class="modal-propose-form-group" field-id="amount">
+      <span>Deposit amount</span>
       <tm-field
         id="denom"
         :placeholder="denom"
         type="text"
         readonly="readonly"
       />
       <tm-field
-        v-focus
         id="amount"
         :max="balance"
         :min="0"
@@ -69,7 +83,7 @@ import {
 } from "vuelidate/lib/validators"
 import { isEmpty, trim } from "lodash"
 import Modal from "common/TmModal"
-import { TmBtn, TmField, TmFormGroup } from "@tendermint/ui"
+import { TmBtn, TmField, TmFormGroup, TmFormMsg } from "@tendermint/ui"
 
 const isValid = type =>
   type === `Text` || type === `ParameterChange` || type === `SoftwareUpgrade`
@@ -86,7 +100,8 @@ export default {
     Modal,
     TmBtn,
     TmField,
-    TmFormGroup
+    TmFormGroup,
+    TmFormMsg
   },
   props: {
     denom: {
@@ -122,22 +137,14 @@ export default {
     return {
       title: {
         required,
-        minLength(x) {
-          return minLength(this.titleMinLength)(x)
-        },
-        maxLength(x) {
-          return maxLength(this.titleMaxLength)(x)
-        },
+        minLength: minLength(this.titleMinLength),
+        maxLength: maxLength(this.titleMaxLength),
         notBlank
       },
       description: {
         required,
-        minLength(x) {
-          return minLength(this.descriptionMinLength)(x)
-        },
-        maxLength(x) {
-          return maxLength(this.descriptionMaxLength)(x)
-        },
+        minLength: minLength(this.descriptionMinLength),
+        maxLength: maxLength(this.descriptionMaxLength),
         notBlank
       },
       type: {

app/src/renderer/components/governance/PageProposal.vue

@@ -184,7 +184,7 @@ export default {
       return moment(new Date(this.proposal.submit_time)).fromNow()
     },
     votingStartedAgo() {
-      return moment(new Date(this.proposal.voting_start_block)).fromNow()
+      return moment(new Date(this.proposal.voting_start_time)).fromNow()
     },
     depositEndsIn() {
       return moment(new Date(this.proposal.deposit_end_time)).fromNow()

test/unit/specs/components/governance/ModalPropose.spec.js

@@ -92,6 +92,22 @@ describe(`ModalPropose`, () => {
         expect(proposeBtn.html()).toContain(`disabled="disabled"`)
       })
 
+      it(`if title is too long disable submit button and show error message`, () => {
+        wrapper.setData({ title: `x`.repeat(65) })
+        let proposeBtn = wrapper.find(`#submit-proposal`)
+        expect(proposeBtn.html()).toContain(`disabled="disabled"`)
+        let errorMessage = wrapper.find(`input#title + div`)
+        expect(errorMessage.classes()).toContain(`tm-form-msg--error`)
+      })
+
+      it(`if description is too long disable submit button and show error message`, () => {
+        wrapper.setData({ description: `x`.repeat(201) })
+        let proposeBtn = wrapper.find(`#submit-proposal`)
+        expect(proposeBtn.html()).toContain(`disabled="disabled"`)
+        let errorMessage = wrapper.find(`textarea#description + div`)
+        expect(errorMessage.classes()).toContain(`tm-form-msg--error`)
+      })
+
       it(`if proposal type is invalid`, () => {
         wrapper.setData({ type: `Other` })
         let proposeBtn = wrapper.find(`#submit-proposal`)

test/unit/specs/components/governance/__snapshots__/ModalPropose.spec.js.snap

@@ -31,7 +31,7 @@ exports[`ModalPropose component matches snapshot has the expected html structure
   </div>
 
   <div
-    class="page-proposal-form-group tm-form-group"
+    class="page-proposal-form-group tm-form-group tm-form-group--error"
   >
     <!---->
     <!---->
@@ -48,11 +48,13 @@ exports[`ModalPropose component matches snapshot has the expected html structure
         placeholder="Proposal title"
         type="text"
       />
+
+      <!---->
     </div>
   </div>
 
   <div
-    class="page-proposal-form-group tm-form-group"
+    class="page-proposal-form-group tm-form-group tm-form-group--error"
   >
     <!---->
     <!---->
@@ -68,6 +70,8 @@ exports[`ModalPropose component matches snapshot has the expected html structure
         id="description"
         placeholder="Write your proposal here..."
       />
+
+      <!---->
     </div>
   </div>