Merge pull request #1031 from poanetwork/issue#790

(Feature) Add selector 'id' to all DOM input elements
poanetwork · Jul 12, 2018 · c1f3c2f · c1f3c2f
2 parents 894b500 + cf98a35
commit c1f3c2f
Show file tree

Hide file tree

Showing 8 changed files with 29 additions and 3 deletions.
diff --git a/src/components/Common/InputField.js b/src/components/Common/InputField.js
@@ -18,6 +18,7 @@ export const InputField = props => {
     <div className={props.side}>
       <label className="label">{props.title}</label>
       <input
+        id={props.name}
         disabled={props.disabled}
         type={props.type}
         className="input"

diff --git a/src/components/Common/NumericInput.js b/src/components/Common/NumericInput.js
@@ -111,12 +111,13 @@ export class NumericInput extends Component {
 
   render() {
     const { value, pristine, valid } = this.state
-    const { disabled, side, errorMessage, title, description } = this.props
+    const { disabled, side, errorMessage, title, description, name } = this.props
 
     return (
       <InputField
         disabled={disabled}
         side={side}
+        name={name}
         type="number"
         errorMessage={errorMessage}
         value={value}

diff --git a/src/components/Common/RadioInputField.js b/src/components/Common/RadioInputField.js
@@ -4,7 +4,13 @@ import '../../assets/stylesheets/application.css'
 export const RadioInputField = props => {
   const inputs = props.items.map((item, index) => (
     <label className="radio-inline" key={index}>
-      <input type="radio" checked={props.selectedItem === item.value} onChange={props.onChange} value={item.value} />
+      <input
+        type="radio"
+        id={item.value}
+        checked={props.selectedItem === item.value}
+        onChange={props.onChange}
+        value={item.value}
+      />
       <span className="title">{item.label}</span>
     </label>
   ))

diff --git a/src/components/Common/ReservedTokensInputBlock.js b/src/components/Common/ReservedTokensInputBlock.js
@@ -221,6 +221,7 @@ export class ReservedTokensInputBlock extends Component {
               side="reserved-tokens-input-property reserved-tokens-input-property-left"
               type="text"
               title={ADDRESS}
+              name={ADDRESS}
               value={this.state.addr}
               onChange={e => this.handleAddressChange(e.target.value)}
               description="Address where to send reserved tokens."
@@ -240,6 +241,7 @@ export class ReservedTokensInputBlock extends Component {
             <NumericInput
               side="reserved-tokens-input-property reserved-tokens-input-property-right"
               title={VALUE}
+              name={VALUE}
               value={this.state.val}
               pristine={this.state.validation.value.pristine}
               valid={this.state.validation.value.valid}

diff --git a/src/components/Common/TierBlock.js b/src/components/Common/TierBlock.js
@@ -28,6 +28,7 @@ export const TierBlock = ({ fields, ...props }) => {
           <div className="hidden">
             <div className="input-block-container">
               <Field
+                id={`${name}.tier`}
                 name={`${name}.tier`}
                 validate={value => {
                   const errors = composeValidators(isRequired(), isMaxLength()(30))(value)
@@ -45,13 +46,15 @@ export const TierBlock = ({ fields, ...props }) => {
 
             <div className="input-block-container">
               <Field
+                id={`${name}.updatable`}
                 name={`${name}.updatable`}
                 render={({ input }) => (
                   <div className="left">
                     <label className="label">{ALLOW_MODIFYING}</label>
                     <div className="radios-inline">
                       <label className="radio-inline">
                         <input
+                          id={`${name}.allow_modifying_on`}
                           type="radio"
                           checked={input.value === 'on'}
                           onChange={() => input.onChange('on')}
@@ -61,6 +64,7 @@ export const TierBlock = ({ fields, ...props }) => {
                       </label>
                       <label className="radio-inline">
                         <input
+                          id={`${name}.allow_modifying_off`}
                           type="radio"
                           checked={input.value === 'off'}
                           value="off"
@@ -82,6 +86,7 @@ export const TierBlock = ({ fields, ...props }) => {
                     <div className="radios-inline">
                       <label className="radio-inline">
                         <input
+                          id={`${name}.enable_whitelisting_yes`}
                           type="radio"
                           checked={input.value === 'yes'}
                           value="yes"
@@ -91,6 +96,7 @@ export const TierBlock = ({ fields, ...props }) => {
                       </label>
                       <label className="radio-inline">
                         <input
+                          id={`${name}.enable_whitelisting_no`}
                           type="radio"
                           checked={input.value === 'no'}
                           value="no"

diff --git a/src/components/manage/ManageForm.js b/src/components/manage/ManageForm.js
@@ -93,6 +93,7 @@ export const ManageForm = inject('tokenStore', 'generalStore', 'crowdsaleStore')
                   side={crowdsaleStore.isDutchAuction ? 'right' : 'left'}
                   type="text"
                   title={TEXT_FIELDS.WALLET_ADDRESS}
+                  name="walletAddress"
                   value={tiers[0].walletAddress}
                   disabled={true}
                 />

diff --git a/src/components/manage/ManageTierBlock.js b/src/components/manage/ManageTierBlock.js
@@ -55,7 +55,14 @@ export const ManageTierBlock = inject('crowdsaleStore', 'tokenStore')(
             <div className="steps-content container">
               <div className={classNames('hidden', { divisor: isWhitelistEnabled })}>
                 <div className="input-block-container">
-                  <InputField side="left" type="text" title={CROWDSALE_SETUP_NAME} value={tier} disabled={true} />
+                  <InputField
+                    side="left"
+                    type="text"
+                    title={CROWDSALE_SETUP_NAME}
+                    name={`${name}.crowdsale_name`}
+                    value={tier}
+                    disabled={true}
+                  />
                 </div>
 
                 <div className="input-block-container">

diff --git a/src/components/stepThree/GasPriceInput.js b/src/components/stepThree/GasPriceInput.js
@@ -72,6 +72,7 @@ class GasPriceInput extends Component {
           <div key={index} className="radios-inline">
             <label className="radio-inline">
               <input
+                id={gasPrice.id}
                 type="radio"
                 checked={input.value.id === gasPrice.id}
                 onChange={() => {
@@ -86,6 +87,7 @@ class GasPriceInput extends Component {
         ))}
         {this.state.isCustom ? (
           <input
+            id="customGasPrice"
             type="number"
             className="input"
             value={this.state.customGasPrice}