Merge branch 'framework-selection-options' of github.com:twharmon/js-framework-benchmark into twharmon-framework-selection-options

Author: krausest

webdriver-ts-results/src/components/SelectionToolbar/FrameworkSelector/FrameworkSelectorCategory.tsx

@@ -14,18 +14,22 @@ const FrameworkSelectorCategory = ({ label, frameworkType }: Props) => {
   const selectedFrameworks = useRootStore((state) => state.selectedFrameworks);
   const frameworks = useRootStore((state) => state.frameworkLists[frameworkType]);
   const isNoneSelected = useRootStore((state) => state.isNoneFrameworkSelected);
+  const isUnflaggedSelected = useRootStore((state) => state.isUnflaggedFrameworkSelected);
   const areAllSelected = useRootStore((state) => state.areAllFrameworksSelected);
 
   const selectFramework = useRootStore((state) => state.selectFramework);
   const selectAllFrameworks = useRootStore((state) => state.selectAllFrameworks);
+  const selectUnflaggedFrameworks = useRootStore((state) => state.selectUnflaggedFrameworks);
 
   return (
     <SelectorContentContainer
       grid
       isNoneSelected={isNoneSelected(frameworkType)}
+      isUnflaggedSelected={isUnflaggedSelected(frameworkType)}
       areAllSelected={areAllSelected(frameworkType)}
       selectNone={() => selectAllFrameworks(frameworkType, false)}
       selectAll={() => selectAllFrameworks(frameworkType, true)}
+      selectUnflagged={() => selectUnflaggedFrameworks(frameworkType)}
       label={label}
     >
       <FrameworkSelectorList

webdriver-ts-results/src/components/SelectionToolbar/SelectorContentContainer/SelectionContentContainer.tsx

@@ -5,8 +5,10 @@ import { Button, Flex } from "antd";
 interface Props {
   children: React.ReactElement;
   selectNone: (event: React.SyntheticEvent) => void;
+  selectUnflagged: (event: React.SyntheticEvent) => void;
   selectAll: (event: React.SyntheticEvent) => void;
   isNoneSelected: boolean;
+  isUnflaggedSelected: boolean;
   areAllSelected: boolean;
   grid?: boolean;
   label: string;
@@ -15,7 +17,9 @@ interface Props {
 const SelectorContentContainer = ({
   selectAll,
   selectNone,
+  selectUnflagged,
   isNoneSelected,
+  isUnflaggedSelected,
   areAllSelected,
   children,
   grid = false,
@@ -25,6 +29,10 @@ const SelectorContentContainer = ({
     !isNoneSelected && selectNone(event);
   };
 
+  const handleSelectUnflagged = (event: React.MouseEvent) => {
+    !isUnflaggedSelected && selectUnflagged(event);
+  };
+
   const handleSelectAll = (event: React.MouseEvent) => {
     !areAllSelected && selectAll(event);
   };
@@ -40,6 +48,9 @@ const SelectorContentContainer = ({
           <Button type="text" onClick={handleSelectAll} disabled={areAllSelected} aria-label="Select all">
             All
           </Button>
+          <Button type="text" onClick={handleSelectUnflagged} disabled={isUnflaggedSelected} aria-label="Select unflagged">
+            Unflagged
+          </Button>
         </div>
       </Flex>
       <div className={`selector-content-container__content ${grid ? "grid" : ""}`}>

webdriver-ts-results/src/store.ts

@@ -91,8 +91,10 @@ interface Actions {
   isNoneBenchmarkSelected: (type: BenchmarkType) => boolean;
   areAllFrameworksSelected: (type: FrameworkType) => boolean;
   isNoneFrameworkSelected: (type: FrameworkType) => boolean;
+  isUnflaggedFrameworkSelected: (type: FrameworkType) => boolean;
   selectFramework: (framework: Framework, add: boolean) => void;
   selectAllFrameworks: (frameworkType: FrameworkType, add: boolean) => void;
+  selectUnflaggedFrameworks: (frameworkType: FrameworkType) => void;
   selectCategory: (categoryId: number, add: boolean) => void;
   selectBenchmark: (benchmark: Benchmark, add: boolean) => void;
   selectAllBenchmarks: (benchmarkType: BenchmarkType, add: boolean) => void;
@@ -232,6 +234,9 @@ export const useRootStore = create<State & Actions>((set, get) => ({
   isNoneFrameworkSelected: (type) => {
     return get().frameworkLists[type].every((framework) => !get().selectedFrameworks.has(framework));
   },
+  isUnflaggedFrameworkSelected: (type) => {
+    return get().frameworkLists[type].every((framework) => framework.issues.length ? !get().selectedFrameworks.has(framework) : get().selectedFrameworks.has(framework));
+  },
   // Actions
   selectFramework: (framework: Framework, add: boolean) => {
     const newSelectedFramework = new Set(get().selectedFrameworks);
@@ -241,6 +246,23 @@ export const useRootStore = create<State & Actions>((set, get) => ({
     const t = { ...get(), selectedFrameworks: newSelectedFramework };
     return set(() => ({ ...t, resultTables: updateResultTable(t) }));
   },
+  selectUnflaggedFrameworks: (frameworkType: FrameworkType) => {
+    const newSelectedFramework = new Set(get().selectedFrameworks);
+    const frameworks =
+      frameworkType === FrameworkType.KEYED
+        ? get().frameworkLists[FrameworkType.KEYED]
+        : get().frameworkLists[FrameworkType.NON_KEYED];
+
+    for (const framework of frameworks) {
+      framework.issues.length ? newSelectedFramework.delete(framework) : newSelectedFramework.add(framework);
+    }
+
+    const t = { ...get(), selectedFrameworks: newSelectedFramework };
+    return set(() => ({
+      ...t,
+      resultTables: updateResultTable(t),
+    }));
+  },
   selectAllFrameworks: (frameworkType: FrameworkType, add: boolean) => {
     const newSelectedFramework = new Set(get().selectedFrameworks);
     const frameworks =