Add missing Input ids (#4334)

* Stop auto-generating Input ids We are going to fix components not providing one, and consumers of this component should give an ID in the future, so mark the prop as required and don't generate an ID. * Remove unnecessary usages of Input Replace those with `Row` and `Col` if they were wrapping elements, or simply delete them if they were not needed. * Add ids to Input elements In order to reduce the amount of console logs, add the required property to all `Input` elements. * Remove unused component DataFilter * Add id prop to TypeAheadInput and its consumers * Add id prop to ISODurationInput and its consumers * Add id field to TypeAheadFieldInput and its consumers * Use right propType * Change autofocus to autoFocus in ISODurationInput * Fix child wrapping in NewUserForm
Graylog2 · Nov 21, 2017 · 32e1716 · 32e1716
1 parent fdc3d26
commit 32e1716
Show file tree

Hide file tree

Showing 53 changed files with 293 additions and 247 deletions.
diff --git a/graylog2-web-interface/src/components/alertconditions/CreateAlertConditionInput.jsx b/graylog2-web-interface/src/components/alertconditions/CreateAlertConditionInput.jsx
@@ -89,13 +89,17 @@ const CreateAlertConditionInput = React.createClass({
         <Row>
           <Col md={6}>
             <form>
-              <Input label="Alert on stream" help="Select the stream that the condition will use to trigger alerts.">
+              <Input id="stream-selector" label="Alert on stream" help="Select the stream that the condition will use to trigger alerts.">
                 <Select placeholder="Select a stream" options={formattedStreams} onChange={this._onStreamChange} />
               </Input>
 
-              <Input type="select" value={this.state.type} onChange={this._onChange}
+              <Input id="condition-type-selector"
+                     type="select"
+                     value={this.state.type}
+                     onChange={this._onChange}
                      disabled={!this.state.selectedStream}
-                     label="Condition type" help="Select the condition type that will be used.">
+                     label="Condition type"
+                     help="Select the condition type that will be used.">
                 <option value={this.PLACEHOLDER} disabled>Select a condition type</option>
                 {availableTypes}
               </Input>

diff --git a/graylog2-web-interface/src/components/alertnotifications/CreateAlertNotificationInput.jsx b/graylog2-web-interface/src/components/alertnotifications/CreateAlertNotificationInput.jsx
@@ -119,12 +119,14 @@ const CreateAlertNotificationInput = React.createClass({
         <Row>
           <Col md={6}>
             <form>
-              <Input label="Notify on stream"
+              <Input id="stream-selector"
+                     label="Notify on stream"
                      help="Select the stream that should use this notification when its alert conditions are triggered.">
                 <Select placeholder="Select a stream" options={formattedStreams} onChange={this._onStreamChange} />
               </Input>
 
-              <Input type="select"
+              <Input id="notification-type-selector"
+                     type="select"
                      value={this.state.type}
                      onChange={this._onChange}
                      disabled={!this.state.selectedStream}

diff --git a/graylog2-web-interface/src/components/bootstrap/Input.jsx b/graylog2-web-interface/src/components/bootstrap/Input.jsx
@@ -4,12 +4,6 @@ import { Checkbox, ControlLabel, FormControl, FormGroup, HelpBlock, InputGroup,
 
 import InputWrapper from './InputWrapper';
 
-const generateId = () => {
-  console.warn('Input elements should have an id prop, generating one for you');
-  const randomNumericId = Math.floor(Math.random() * 1000);
-  return `input-${randomNumericId}`;
-};
-
 /*
  * Input adapter for react bootstrap.
  *
@@ -19,7 +13,7 @@ const generateId = () => {
  */
 const Input = React.createClass({
   propTypes: {
-    id: PropTypes.string,
+    id: PropTypes.string.isRequired,
     type: PropTypes.string,
     label: PropTypes.oneOfType([
       PropTypes.element,
@@ -49,7 +43,6 @@ const Input = React.createClass({
 
   getDefaultProps() {
     return {
-      id: generateId(),
       type: undefined,
       label: '',
       labelClassName: undefined,

diff --git a/graylog2-web-interface/src/components/common/DataFilter.jsx b/graylog2-web-interface/src/components/common/DataFilter.jsx
diff --git a/graylog2-web-interface/src/components/common/DataTable.jsx b/graylog2-web-interface/src/components/common/DataTable.jsx
@@ -78,7 +78,8 @@ const DataTable = React.createClass({
       filter = (
         <div className="row">
           <div className="col-md-8">
-            <TypeAheadDataFilter label={this.props.filterLabel}
+            <TypeAheadDataFilter id={`${this.props.id}-data-filter`}
+                                 label={this.props.filterLabel}
                                  data={this.state.rows}
                                  displayKey={this.props.displayKey}
                                  filterBy={this.props.filterBy}

diff --git a/graylog2-web-interface/src/components/common/ISODurationInput.jsx b/graylog2-web-interface/src/components/common/ISODurationInput.jsx
@@ -5,6 +5,7 @@ import ISODurationUtils from 'util/ISODurationUtils';
 
 const ISODurationInput = React.createClass({
   propTypes: {
+    id: PropTypes.string.isRequired,
     duration: PropTypes.string.isRequired,
     update: PropTypes.func.isRequired,
     label: PropTypes.string,
@@ -49,15 +50,16 @@ const ISODurationInput = React.createClass({
 
   render() {
     return (
-      <Input type="text"
+      <Input id={this.props.id}
+             type="text"
              ref="isoDuration"
              label={this.props.label}
              onChange={this._onUpdate}
              value={this.state.duration}
              help={this.props.help}
              addonAfter={ISODurationUtils.humanizeDuration(this.state.duration, this.props.validator, this.props.errorText)}
              bsStyle={ISODurationUtils.durationStyle(this.state.duration, this.props.validator)}
-             autofocus={this.props.autoFocus}
+             autoFocus={this.props.autoFocus}
              required={this.props.required} />
     );
   },

diff --git a/graylog2-web-interface/src/components/common/PaginatedList.jsx b/graylog2-web-interface/src/components/common/PaginatedList.jsx
@@ -41,7 +41,7 @@ const PaginatedList = React.createClass({
     }
     return (
       <div className="form-inline page-size" style={{ float: 'right' }}>
-        <Input type="select" bsSize="small" label="Show:" value={this.state.pageSize} onChange={this._onChangePageSize}>
+        <Input id="page-size" type="select" bsSize="small" label="Show:" value={this.state.pageSize} onChange={this._onChangePageSize}>
           {this.props.pageSizes.map(size => <option key={`option-${size}`} value={size}>{size}</option>)}
         </Input>
       </div>

diff --git a/graylog2-web-interface/src/components/common/TableList.jsx b/graylog2-web-interface/src/components/common/TableList.jsx
@@ -1,6 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import Immutable from 'immutable';
+import lodash from 'lodash';
 import { Col, ListGroup, ListGroupItem, Row } from 'react-bootstrap';
 
 import { Input } from 'components/bootstrap';
@@ -46,7 +47,11 @@ const TableList = React.createClass({
     const header = (
       <div>
         {bulkHeaderActions}
-        <Input type="checkbox" label="Select all" checked={this.state.allSelected} onChange={this._toggleSelectAll}
+        <Input id="select-all-checkbox"
+               type="checkbox"
+               label="Select all"
+               checked={this.state.allSelected}
+               onChange={this._toggleSelectAll}
                groupClassName="form-group-inline" />
       </div>
     );
@@ -63,7 +68,8 @@ const TableList = React.createClass({
           {this.props.itemActionsFactory(item)}
         </div>
 
-        <Input type="checkbox"
+        <Input id={`${this.props.idKey}-checkbox`}
+               type="checkbox"
                label={item[this.props.titleKey]}
                checked={this.state.selected.includes(item[this.props.idKey])}
                onChange={this._onItemSelect(item[this.props.idKey])}
@@ -100,7 +106,8 @@ const TableList = React.createClass({
       filter = (
         <Row>
           <Col md={5}>
-            <TypeAheadDataFilter label={this.props.filterLabel}
+            <TypeAheadDataFilter id={`${lodash.kebabCase(this.props.filterLabel)}-data-filter`}
+                                 label={this.props.filterLabel}
                                  data={this.props.items}
                                  displayKey="value"
                                  filterSuggestions={[]}

diff --git a/graylog2-web-interface/src/components/common/TypeAheadDataFilter.jsx b/graylog2-web-interface/src/components/common/TypeAheadDataFilter.jsx
@@ -7,6 +7,7 @@ import { TypeAheadInput } from 'components/common';
 
 const TypeAheadDataFilter = React.createClass({
   propTypes: {
+    id: PropTypes.string,
     data: PropTypes.array,
     displayKey: PropTypes.string,
     filterBy: PropTypes.string,
@@ -113,7 +114,8 @@ const TypeAheadDataFilter = React.createClass({
     return (
       <div className="filter">
         <form className="form-inline" onSubmit={this._onSearchTextChanged} style={{ display: 'inline' }}>
-          <TypeAheadInput ref="typeAheadInput"
+          <TypeAheadInput id={this.props.id}
+                          ref="typeAheadInput"
                           onSuggestionSelected={this._onFilterAdded}
                           suggestionText={`Filter by ${this.props.filterBy}: `}
                           suggestions={suggestions}

diff --git a/graylog2-web-interface/src/components/common/TypeAheadFieldInput.jsx b/graylog2-web-interface/src/components/common/TypeAheadFieldInput.jsx
@@ -15,6 +15,7 @@ import fetch from 'logic/rest/FetchProvider';
 
 const TypeAheadFieldInput = React.createClass({
   propTypes: {
+    id: PropTypes.string.isRequired,
     valueLink: PropTypes.object,
     autoFocus: PropTypes.bool,
     onChange: PropTypes.func,
@@ -77,10 +78,12 @@ const TypeAheadFieldInput = React.createClass({
 
   render() {
     return (
-      <Input ref="fieldInput" label={this.props.label}
+      <Input id={this.props.id}
+             ref="fieldInput"
+             label={this.props.label}
              wrapperClassName="typeahead-wrapper"
              defaultValue={this.props.valueLink ? this.props.valueLink.value : null}
-        {...this._getFilteredProps()} />
+             {...this._getFilteredProps()} />
     );
   },
 });

diff --git a/graylog2-web-interface/src/components/common/TypeAheadInput.jsx b/graylog2-web-interface/src/components/common/TypeAheadInput.jsx
@@ -9,6 +9,7 @@ import Typeahead from 'typeahead.js';
 
 const TypeAheadInput = React.createClass({
   propTypes: {
+    id: PropTypes.string.isRequired,
     label: PropTypes.string.isRequired,
     onKeyPress: PropTypes.func,
     displayKey: PropTypes.string,
@@ -50,19 +51,19 @@ const TypeAheadInput = React.createClass({
       highlight: true,
       minLength: 1,
     },
-      {
-        name: 'dataset-name',
-        displayKey: props.displayKey,
-        source: UniversalSearch.substringMatcher(props.suggestions, props.displayKey, 6),
-        templates: {
-          suggestion: (value) => {
-            if (props.suggestionText) {
-              return `<div><strong>${props.suggestionText}</strong> ${value[props.displayKey]}</div>`;
-            }
-            return `<div>${value.value}</div>`;
-          },
+    {
+      name: 'dataset-name',
+      displayKey: props.displayKey,
+      source: UniversalSearch.substringMatcher(props.suggestions, props.displayKey, 6),
+      templates: {
+        suggestion: (value) => {
+          if (props.suggestionText) {
+            return `<div><strong>${props.suggestionText}</strong> ${value[props.displayKey]}</div>`;
+          }
+          return `<div>${value.value}</div>`;
         },
-      });
+      },
+    });
 
     if (typeof props.onTypeaheadLoaded === 'function') {
       props.onTypeaheadLoaded();
@@ -76,7 +77,9 @@ const TypeAheadInput = React.createClass({
     });
   },
   render() {
-    return (<Input type="text" ref="fieldInput"
+    return (<Input id={this.props.id}
+                   type="text"
+                   ref="fieldInput"
                    wrapperClassName="typeahead-wrapper"
                    label={this.props.label}
                    onKeyPress={this.props.onKeyPress} />);

diff --git a/graylog2-web-interface/src/components/common/index.jsx b/graylog2-web-interface/src/components/common/index.jsx
@@ -1,6 +1,5 @@
 export { default as ClipboardButton } from './ClipboardButton';
 export { default as ContentPackMarker } from './ContentPackMarker';
-export { default as DataFilter } from './DataFilter';
 export { default as DataTable } from './DataTable';
 export { default as DatePicker } from './DatePicker';
 export { default as DocumentTitle } from './DocumentTitle';

diff --git a/graylog2-web-interface/src/components/configurations/SearchesConfig.jsx b/graylog2-web-interface/src/components/configurations/SearchesConfig.jsx
@@ -220,12 +220,15 @@ const SearchesConfig = React.createClass({
                             onModalClose={this._resetConfig}
                             submitButtonText="Save">
           <fieldset>
-            <Input type="checkbox" label="Enable query limit"
+            <Input id="query-limit-checkbox"
+                   type="checkbox"
+                   label="Enable query limit"
                    name="enabled"
                    checked={this._isEnabled()}
                    onChange={this._onChecked} />
             {this._isEnabled() &&
-            <ISODurationInput duration={config.query_time_range_limit}
+            <ISODurationInput id="query-timerange-limit-field"
+                              duration={config.query_time_range_limit}
                               update={this._onUpdate('query_time_range_limit')}
                               label="Query time range limit (ISO8601 Duration)"
                               help={'The maximum time range for searches. (i.e. "P30D" for 30 days, "PT24H" for 24 hours)'}
@@ -245,14 +248,16 @@ const SearchesConfig = React.createClass({
                                   title="Surrounding Timerange Options"
                                   help={<span>Configure the available options for the <strong>surrounding</strong> time range selector as <strong>ISO8601 duration</strong></span>} />
 
-            <Input type="text"
+            <Input id="filter-fields-input"
+                   type="text"
                    label="Surrounding search filter fields"
                    onChange={this._onFilterFieldsUpdate}
                    value={this.state.surroundingFilterFields || filterFieldsString}
                    help="A ',' separated list of message fields that will be used as filter for the surrounding messages query."
                    required />
 
-            <Input type="text"
+            <Input id="disabled-fields-input"
+                   type="text"
                    label="Disabled analysis fields"
                    onChange={this._onAnalysisDisabledFieldsUpdate}
                    value={this.state.analysisDisabledFields || analysisDisabledFieldsString}

diff --git a/graylog2-web-interface/src/components/dashboard/EditDashboardModal.jsx b/graylog2-web-interface/src/components/dashboard/EditDashboardModal.jsx
@@ -38,7 +38,7 @@ const EditDashboardModal = React.createClass({
                           submitButtonText="Save">
         <fieldset>
           <Input id={`${this.props.id}-title`} type="text" label="Title:" onChange={this._onTitleChange} value={this.state.title} autoFocus required />
-          <Input type="text" label="Description:" name="Description" onChange={this._onDescriptionChange} value={this.state.description} required />
+          <Input id={`${this.props.id}-description`} type="text" label="Description:" name="Description" onChange={this._onDescriptionChange} value={this.state.description} required />
         </fieldset>
       </BootstrapModalForm>
     );