DRAFT convert classification dropdown

frontend/src/components/classification-dropdown.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 
 import {
@@ -13,124 +13,106 @@ import { Settings } from '../settings';
 import { CLASSIFICATION } from '../constants.js';
 
 
-export class ClassificationDropdown extends React.Component {
-  static propTypes = {
-    testResult: PropTypes.object,
-  }
-
-  constructor(props) {
-    super(props);
-    this.state = {
-      testResult: this.props.testResult,
-      isClassificationOpen: false
-    };
-  }
+function ClassificationDropdown (props) {
+  const [testResult, setTestResult] = useState(props.testResult);
+  const [classificationOpen, setclassificationOpen] = useState(false);
 
-  componentDidUpdate(prevProps) {
-    if (prevProps !== this.props) {
-      this.setState({testResult: this.props.testResult});
-    }
+  function onClassificationSelect(_event, selection) {
+    setTestResult({
+      ...testResult,
+      'metadata': {
+        ...testResult.metadata,
+        'classification': selection
+      }
+    })
+    setclassificationOpen(!classificationOpen);
+    HttpClient.put([Settings.serverUrl, 'result', testResult['id']], {}, testResult)
+    .catch(error => console.log(error));
   }
 
-  onClassificationToggle = () => {
-    this.setState({isClassificationOpen: !this.state.isClassificationOpen});
-  };
+  useEffect(()=>{
+    setTestResult(props.testResult)
+  }, [props])
 
-  onClassificationSelect = (_event, selection) => {
-    let testResult = this.state.testResult;
-    testResult['metadata']['classification'] = selection;
-    this.setState({testResult: testResult, isClassificationOpen: !this.state.isClassificationOpen});
-    HttpClient.put([Settings.serverUrl, 'result', testResult['id']], {}, testResult);
-  }
-
-  render() {
-    const testResult = this.state.testResult;
-    return (
-      <Dropdown
-        isOpen={this.state.isClassificationOpen}
-        onSelect={this.onClassificationSelect}
-        onOpenChange={() => this.setState({isClassificationOpen: false})}
-        toggle={toggleRef => (
-          <MenuToggle
-            ref={toggleRef}
-            onClick={this.onClassificationToggle}
-            isExpanded={this.state.isClassificationOpen}
-          >
-            {CLASSIFICATION[testResult.metadata && testResult.metadata.classification] || '(unset)'}
-          </MenuToggle>
-        )}
-      >
-        <DropdownList>
-          {Object.keys(CLASSIFICATION).map((key) => (
-            <DropdownItem key={key} value={key}>
-              {CLASSIFICATION[key]}
-            </DropdownItem>
-          ))}
-        </DropdownList>
-      </Dropdown>
-    )
-  }
+  return (
+    <Dropdown
+      isOpen={classificationOpen}
+      onSelect={onClassificationSelect}
+      onOpenChange={() => setclassificationOpen(false)}
+      toggle={toggleRef => (
+        <MenuToggle
+          ref={toggleRef}
+          onClick={() => setclassificationOpen(!classificationOpen)}
+          isExpanded={classificationOpen}
+        >
+          {CLASSIFICATION[testResult.metadata && testResult.metadata.classification] || '(unset)'}
+        </MenuToggle>
+      )}
+    >
+      <DropdownList>
+        {Object.keys(CLASSIFICATION).map((key) => (
+          <DropdownItem key={key} value={key}>
+            {CLASSIFICATION[key]}
+          </DropdownItem>
+        ))}
+      </DropdownList>
+    </Dropdown>
+  )
 }
 
-export class MultiClassificationDropdown extends React.Component {
-  static propTypes = {
-    selectedResults: PropTypes.array,
-    refreshFunc: PropTypes.func
-  }
+ClassificationDropdown.propTypes = {
+  testResult: PropTypes.object,
+}
 
-  constructor(props) {
-    super(props);
-    this.state = {
-      isClassificationOpen: false
-    };
-  }
 
-  onClassificationToggle = isOpen => {
-    this.setState({isClassificationOpen: isOpen});
-  }
+function MultiClassificationDropdown (props) {
+  const [classificationOpen, setclassificationOpen] = useState(false);
+  const {selectedResults, refreshFunc} = props;
 
-  onClassificationSelect = event => {
-    const { selectedResults } = this.props;
+  function onClassificationSelect(event) {
     let classification = event.target.getAttribute('value');
     if (selectedResults.length === 0) {
-      this.setState({isClassificationOpen: !this.state.isClassificationOpen})
+      setclassificationOpen(!classificationOpen)
     }
     else {
       selectedResults.forEach(result => {
         result['metadata']['classification'] = classification;
         HttpClient.put([Settings.serverUrl, 'result', result['id']], {}, result)
-          .then(this.props.refreshFunc());
+          .then(refreshFunc());
       })
-      this.setState({isClassificationOpen: !this.state.isClassificationOpen});
+      setclassificationOpen(!classificationOpen)
     }
   }
+  return (
+    <Dropdown
+      isOpen={classificationOpen}
+      onSelect={onClassificationSelect}
+      onOpenChange={() => setclassificationOpen(false)}
+      toggle={toggleRef => (
+        <MenuToggle
+          ref={toggleRef}
+          isDisabled={selectedResults.length === 0}
+          onClick={() => setclassificationOpen(!classificationOpen)}
+          isExpanded={classificationOpen}
+        >
+          Classify Selected Failures
+        </MenuToggle>
+      )}
+    >
+      <DropdownList>
+        {Object.keys(CLASSIFICATION).map((key) => (
+          <DropdownItem key={key} value={key}>
+            {CLASSIFICATION[key]}
+          </DropdownItem>
+        ))}
+      </DropdownList>
+    </Dropdown>
+  )
+}
 
-  render() {
-    const { selectedResults } = this.props;
-    return (
-      <Dropdown
-        isOpen={this.state.isClassificationOpen}
-        onSelect={this.onClassificationSelect}
-        onOpenChange={() => this.setState({isClassificationOpen: false})}
-        toggle={toggleRef => (
-          <MenuToggle
-            ref={toggleRef}
-            isDisabled={selectedResults.length === 0}
-            onClick={this.onClassificationToggle}
-            isExpanded={this.state.isClassificationOpen}
-          >
-            Classify Selected Failures
-          </MenuToggle>
-        )}
-      >
-        <DropdownList>
-          {Object.keys(CLASSIFICATION).map((key) => (
-            <DropdownItem key={key} value={key}>
-              {CLASSIFICATION[key]}
-            </DropdownItem>
-          ))}
-        </DropdownList>
-      </Dropdown>
-    )
-  }
+MultiClassificationDropdown.propTypes = {
+  selectedResults: PropTypes.array,
+  refreshFunc: PropTypes.func
 }
+
+export {ClassificationDropdown, MultiClassificationDropdown};

frontend/src/components/classify-failures.js

@@ -27,11 +27,12 @@ import {
 } from '../utilities';
 import {
   FilterTable,
-  MultiClassificationDropdown,
   MetaFilter,
   ResultView
 } from './index';
 
+import {MultiClassificationDropdown} from './classification-dropdown';
+
 
 export class ClassifyFailuresTable extends React.Component {
   static propTypes = {

frontend/src/components/index.js

@@ -1,4 +1,3 @@
-export { ClassificationDropdown, MultiClassificationDropdown } from './classification-dropdown';
 export { ClassifyFailuresTable } from './classify-failures';
 export { DownloadButton } from './download-button';
 export { EmptyObject } from './empty-object';

frontend/src/utilities.js

@@ -30,7 +30,7 @@ import {
   NUMERIC_RUN_FIELDS,
   THEME_KEY,
 } from './constants';
-import { ClassificationDropdown } from './components';
+import {ClassificationDropdown} from './components/classification-dropdown'
 
 export function getDateString() {
   return String((new Date()).getTime());