diff --git a/frontend/src/components/classification-dropdown.js b/frontend/src/components/classification-dropdown.js
index 5cf81a82..03a7abba 100644
--- a/frontend/src/components/classification-dropdown.js
+++ b/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 (
- this.setState({isClassificationOpen: false})}
- toggle={toggleRef => (
-
- {CLASSIFICATION[testResult.metadata && testResult.metadata.classification] || '(unset)'}
-
- )}
- >
-
- {Object.keys(CLASSIFICATION).map((key) => (
-
- {CLASSIFICATION[key]}
-
- ))}
-
-
- )
- }
+ return (
+ setclassificationOpen(false)}
+ toggle={toggleRef => (
+ setclassificationOpen(!classificationOpen)}
+ isExpanded={classificationOpen}
+ >
+ {CLASSIFICATION[testResult.metadata && testResult.metadata.classification] || '(unset)'}
+
+ )}
+ >
+
+ {Object.keys(CLASSIFICATION).map((key) => (
+
+ {CLASSIFICATION[key]}
+
+ ))}
+
+
+ )
}
-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 (
+ setclassificationOpen(false)}
+ toggle={toggleRef => (
+ setclassificationOpen(!classificationOpen)}
+ isExpanded={classificationOpen}
+ >
+ Classify Selected Failures
+
+ )}
+ >
+
+ {Object.keys(CLASSIFICATION).map((key) => (
+
+ {CLASSIFICATION[key]}
+
+ ))}
+
+
+ )
+}
- render() {
- const { selectedResults } = this.props;
- return (
- this.setState({isClassificationOpen: false})}
- toggle={toggleRef => (
-
- Classify Selected Failures
-
- )}
- >
-
- {Object.keys(CLASSIFICATION).map((key) => (
-
- {CLASSIFICATION[key]}
-
- ))}
-
-
- )
- }
+MultiClassificationDropdown.propTypes = {
+ selectedResults: PropTypes.array,
+ refreshFunc: PropTypes.func
}
+
+export {ClassificationDropdown, MultiClassificationDropdown};
diff --git a/frontend/src/components/classify-failures.js b/frontend/src/components/classify-failures.js
index 7d860c6f..e5a713df 100644
--- a/frontend/src/components/classify-failures.js
+++ b/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 = {
diff --git a/frontend/src/components/index.js b/frontend/src/components/index.js
index cb9e26b1..814e9961 100644
--- a/frontend/src/components/index.js
+++ b/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';
diff --git a/frontend/src/utilities.js b/frontend/src/utilities.js
index 9f3c15b5..b3d85cc6 100644
--- a/frontend/src/utilities.js
+++ b/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());