Convert MultiValueInput

frontend/src/components/index.js

@@ -4,7 +4,6 @@ export { DownloadButton } from './download-button';
 export { EmptyObject } from './empty-object';
 export { FilterTable, MetaFilter } from './filtertable';
 export { IbutsuPage } from './ibutsu-page';
-export { MultiValueInput } from './multivalueinput';
 export { ResultView } from './result';
 export { RunSummary } from './runsummary';
 export { TableEmptyState, TableErrorState } from './tablestates';

frontend/src/components/multivalueinput.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import {
   Button,
@@ -12,110 +12,105 @@ import {
 import { TimesIcon } from '@patternfly/react-icons';
 
 
-export class MultiValueInput extends React.Component {
-  static propTypes = {
-    onAddValue: PropTypes.func,
-    onRemoveValue: PropTypes.func,
-    onValuesChange: PropTypes.func,
-    style: PropTypes.object
-  }
+const MultiValueInput = (props) => {
+  const {
+      onAddValue,
+      onRemoveValue,
+      onValuesChange,
+      style,
+    } = props;
 
-  constructor(props) {
-    super(props);
-    this.style = props.style || {};
-    this.state = {
-      values: [],
-      value: ''
-    };
-  }
+  const [values, setValues] = useState([]);
+  const [value, setValue] = useState('');
 
-  handleTextInputChange = (_event, value) => {
-    this.setState({
-      value: value
-    });
+  const handleTextInputChange = (_event, event_value) => {
+    setValue(event_value);
   };
 
-  handleItemRemove = value => {
-    const currentValues = this.state.values;
-    const newValues = currentValues.filter(v => v !== value);
-    this.setState({values: newValues}, () => {
-      if (this.props.onRemoveValue) {
-        this.props.onRemoveValue(value);
-      }
-      if (this.props.onValuesChange){
-        this.props.onValuesChange(newValues);
-      }
-    });
+  const handleItemRemove = (item) => {
+    const newValues = values.filter(v => v !== item);
+    setValues(newValues);
+    if (onRemoveValue) {
+      onRemoveValue(item);
+    }
+    if (onValuesChange){
+      onValuesChange(newValues);
+    }
   };
 
-  handleItemAdd = value => {
-    if (!this.state.values.includes(value)) {
-      const newValues = this.state.values.concat(value);
-      this.setState({values: newValues}, () => {
-        if (this.props.onAddValue) {
-          this.props.onAddValue(value);
-        }
-        if (this.props.onValuesChange) {
-          this.props.onValuesChange(newValues);
-        }
-     });
+  const handleItemAdd = (item) => {
+    if (!values.includes(item)) {
+      const newValues = values.concat(item);
+      setValues([...values, item]);
+      if (onAddValue) {
+        onAddValue(value);
+      }
+      if (onValuesChange) {
+        onValuesChange(newValues);
+      }
     }
-    this.setState({
-      value: ''
-    });
+    setValue('')
   };
 
-  handleEnter = () => {
-    if (this.state.value.length) {
-      this.handleItemAdd(this.state.value);
+  const handleEnter = () => {
+    if (value.length) {
+      handleItemAdd(value);
     }
   };
 
-  handleKeyPress = event => {
+  const handleKeyPress = (event) => {
     switch (event.key) {
       case 'Enter':
-        this.handleEnter();
+        handleEnter();
         break;
     }
   };
 
-  render() {
     return (
       <React.Fragment>
         <TextInputGroup>
           <TextInputGroupMain
-            value={this.state.value}
+            value={value}
             placeholder="Type any value and hit <Enter>"
-            onChange={this.handleTextInputChange}
-            onKeyDown={this.handleKeyPress}
-            style={{minWidth: '240px'}}
+            onChange={handleTextInputChange}
+            onKeyDown={handleKeyPress}
+            style={{...style, minWidth: '240px'}}
             type="text"
           >
             <ChipGroup aria-label="Current selections">
-              {this.state.values.map((value, index) => (
+              {values.map((item, index) => (
                 <Chip
                   key={index}
-                  onClick={() => this.handleItemRemove(value)}
+                  onClick={() => handleItemRemove(item)}
                 >
                   {value}
                 </Chip>
               ))}
             </ChipGroup>
           </TextInputGroupMain>
           <TextInputGroupUtilities>
-            {(this.state.values.length > 0 || !!this.state.value) && (
-              <Button variant="plain" onClick={() => {
-                this.setState({
-                  values: [],
-                  value: ''
-                });
-              }} aria-label="Clear input value">
+            {(values.length > 0 || !!value) && (
+              <Button
+                variant="plain"
+                onClick={() => {
+                  setValues([]);
+                  setValue('');
+                }}
+                aria-label="Clear input value">
                 <TimesIcon aria-hidden />
               </Button>
             )}
           </TextInputGroupUtilities>
         </TextInputGroup>
       </React.Fragment>
     );
-  }
 }
+
+MultiValueInput.propTypes = {
+  onAddValue: PropTypes.func,
+  onRemoveValue: PropTypes.func,
+  onValuesChange: PropTypes.func,
+  style: PropTypes.object
+}
+
+export default MultiValueInput;

frontend/src/result-list.js

@@ -35,7 +35,8 @@ import {
   parseFilter,
   resultToRow
 } from './utilities';
-import { FilterTable, MultiValueInput } from './components';
+import { FilterTable } from './components';
+import MultiValueInput from './components/multivalueinput'
 import { OPERATIONS, RESULT_FIELDS } from './constants';
 import { IbutsuContext } from './services/context';
 
@@ -758,7 +759,8 @@ export class ResultList extends React.Component {
           <TextInput type="text" id="textSelection" placeholder="Type in value" value={textFilter || ''} onChange={(_event, newValue) => this.onTextChanged(newValue)} style={{height: 'inherit'}}/>
         }
         {(filterMode === 'text' && operationMode === 'multi') &&
-          <MultiValueInput onValuesChange={this.onInValuesChange} style={{height: 'inherit'}}/>
+          <MultiValueInput
+          onValuesChange={this.onInValuesChange} style={{height: 'inherit'}}/>
         }
         {(filterMode === 'run' && operationMode !== 'bool') &&
           <Select

frontend/src/run-list.js

@@ -35,7 +35,8 @@ import {
   parseFilter,
   round
 } from './utilities';
-import { MultiValueInput, FilterTable, RunSummary } from './components';
+import { FilterTable, RunSummary } from './components';
+import MultiValueInput from './components/multivalueinput'
 import { OPERATIONS, RUN_FIELDS } from './constants';
 import { IbutsuContext } from './services/context';
 

frontend/src/views/accessibilitydashboard.js

@@ -30,7 +30,8 @@ import {
   getSpinnerRow,
   parseFilter
 } from '../utilities';
-import { FilterTable, MultiValueInput, RunSummary } from '../components';
+import { FilterTable, RunSummary } from '../components';
+import MultiValueInput from '../components/multivalueinput'
 import { OPERATIONS, ACCESSIBILITY_FIELDS } from '../constants';
 import { IbutsuContext } from '../services/context';
 

frontend/src/views/jenkinsjob.js

@@ -28,7 +28,8 @@ import {
   getSpinnerRow,
   parseFilter
 } from '../utilities';
-import { FilterTable, MultiValueInput, RunSummary } from '../components';
+import { FilterTable, RunSummary } from '../components';
+import MultiValueInput from '../components/multivalueinput'
 import { OPERATIONS, JJV_FIELDS } from '../constants';
 import { IbutsuContext } from '../services/context';