fix toolbar controls

Author: nicolethoen

report/src/app/DataList.tsx

@@ -90,7 +90,7 @@ export class ExpandableDataList extends React.Component<
     });
   };
 
-  onSeveritySelect = (event, selection) => {
+  onSeveritySelect = (selection) => {
     this.setState({
       severitySelections: selection,
     });
@@ -122,12 +122,12 @@ export class ExpandableDataList extends React.Component<
           : null,
     }));
   };
-  handleChange = (checked, event) => {
+  handleChange = (event, checked) => {
     const target = event.target;
     const value = target.type === "checkbox" ? target.checked : target.value;
     this.setState({ hideScreenshots: value });
   };
-  handleExpandAll = (checked, event) => {
+  handleExpandAll = (event, checked) => {
     const target = event.target;
     const shouldExpandAll =
       target.type === "checkbox" ? target.checked : target.value;
@@ -136,7 +136,7 @@ export class ExpandableDataList extends React.Component<
       expanded: shouldExpandAll ? Object.keys(this.props.report) : [],
     });
   };
-  handlePossibleIssues = (checked, event) => {
+  handlePossibleIssues = (event, checked) => {
     const target = event.target;
     const includePossibleIssues =
       target.type === "checkbox" ? target.checked : target.value;
@@ -222,14 +222,14 @@ export class ExpandableDataList extends React.Component<
               // filter out issues that do not match current severity selection
               val.filteredViolations = val.violations ? val.violations.filter((violation) => this.state.severitySelections.includes(violation.impact)) : [];
               val.filteredIncomplete = val.incomplete ? val.incomplete.filter((incomplete) => this.state.severitySelections.includes(incomplete.impact)) : [];
-              const numViolations = val.filteredViolations?.length || 0; 
-              const numIncomplete = val.filteredIncomplete?.length || 0; 
+              const numViolations = val.filteredViolations?.length || 0;
+              const numIncomplete = val.filteredIncomplete?.length || 0;
               if (numViolations + numIncomplete === 0) {
                 if (this.state.severitySelections.includes("ok")) {
                   return val;
                 }
                 return null;
-              } 
+              }
               return val;
             })
             .sort((a: any, b: any) => {

report/src/app/SeveritySelect.tsx

@@ -2,27 +2,30 @@ import React from "react";
 import { CheckboxSelect, CheckboxSelectOption } from '@patternfly/react-templates';
 
 const Options: { content: string; value: string; description?: string; isDisabled?: boolean }[] = [
-  { content: 'critical', value: 'Critical' },
-  { content: 'serious', value: 'Serious' },
-  { content: 'moderate', value: 'Moderate' },
-  { content: 'minor', value: 'Minor' },
-  { content: 'passed', value: 'Passed' }
+  { content: 'critical', value: 'critical' },
+  { content: 'serious', value: 'serious' },
+  { content: 'moderate', value: 'moderate' },
+  { content: 'minor', value: 'minor' },
+  { content: 'passed', value: 'ok' }
 ];
 
 const SeveritySelectInternal = ({ onSelect }) => {
-  const [isOpen, setIsOpen] = React.useState(false);
   const [selected, setSelected] = React.useState<string[]>([
     "critical",
     "serious",
     "moderate",
-    "minor",
+    "minor"
   ]);
 
   const initialOptions = React.useMemo<CheckboxSelectOption[]>(
     () => Options.map((o) => ({ ...o, selected: selected.includes(o.value) })),
     [selected]
   );
 
+  React.useEffect(() => {
+    onSelect(selected);
+  }, [selected])
+
   // impact: "minor", "moderate", "serious", or "critical"
   return (
     <CheckboxSelect

report/src/app/SortSelect.tsx

@@ -14,7 +14,10 @@ const SortSelectInternal = ({ onSelect }) => {
   return (
     <SimpleSelect
       initialOptions={options}
-      onSelect={(_ev, selection) => setSelected(String(selection))}
+      onSelect={(_ev, selection) => {
+        onSelect(_ev, selection);
+        setSelected(String(selection))
+      }}
     />
   );
 };