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());