Add a checkbox for enabling selection filtering

For now the checkbox doesn't do anything, we just wire up the state

Author: asgerf

extensions/ql-vscode/src/view/results/ResultTables.tsx

@@ -22,6 +22,7 @@ import { ResultTablesHeader } from "./ResultTablesHeader";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { ResultCount } from "./ResultCount";
 import { ProblemsViewCheckbox } from "./ProblemsViewCheckbox";
+import { SelectionFilterCheckbox } from "./SelectionFilterCheckbox";
 import { assertNever } from "../../common/helpers-pure";
 
 /**
@@ -43,6 +44,8 @@ interface ResultTablesProps {
   queryPath: string;
   selectedTable: string;
   onSelectedTableChange: (tableName: string) => void;
+  selectionFilterEnabled: boolean;
+  onSelectionFilterEnabledChange: (value: boolean) => void;
   problemsViewSelected: boolean;
   onProblemsViewSelectedChange: (selected: boolean) => void;
 }
@@ -105,6 +108,8 @@ export function ResultTables(props: ResultTablesProps) {
     sortStates,
     selectedTable,
     onSelectedTableChange,
+    selectionFilterEnabled,
+    onSelectionFilterEnabledChange,
     problemsViewSelected,
     onProblemsViewSelectedChange,
   } = props;
@@ -185,6 +190,15 @@ export function ResultTables(props: ResultTablesProps) {
     <div>
       <ResultTablesHeader {...props} selectedTable={selectedTable} />
       <div className={tableHeaderClassName}></div>
+      <div
+        className={tableHeaderClassName}
+        style={{ justifyContent: "flex-end" }}
+      >
+        <SelectionFilterCheckbox
+          checked={selectionFilterEnabled}
+          onChange={(e) => onSelectionFilterEnabledChange(e.target.checked)}
+        />
+      </div>
       <div className={tableHeaderClassName}>
         <select value={selectedTable} onChange={onTableSelectionChange}>
           {resultSetOptions}

extensions/ql-vscode/src/view/results/ResultsApp.tsx

@@ -65,6 +65,7 @@ interface ResultsViewState {
   displayedResults: ResultsState;
   nextResultsInfo: ResultsInfo | null;
   isExpectingResultsUpdate: boolean;
+  selectionFilterEnabled: boolean;
   selectedTable: string | undefined;
 }
 
@@ -80,6 +81,7 @@ export function ResultsApp() {
     },
     nextResultsInfo: null,
     isExpectingResultsUpdate: true,
+    selectionFilterEnabled: false,
     selectedTable: undefined,
   });
 
@@ -271,6 +273,10 @@ export function ResultsApp() {
         queryPath={displayedResults.resultsInfo.queryPath}
         selectedTable={state.selectedTable ?? ""}
         onSelectedTableChange={onSelectedTableChange}
+        selectionFilterEnabled={state.selectionFilterEnabled}
+        onSelectionFilterEnabledChange={(selectionFilterEnabled) => {
+          setState((prev) => ({ ...prev, selectionFilterEnabled }));
+        }}
         problemsViewSelected={problemsViewSelected}
         onProblemsViewSelectedChange={setProblemsViewSelected}
       />

extensions/ql-vscode/src/view/results/SelectionFilterCheckbox.tsx

@@ -0,0 +1,31 @@
+import {
+  alertExtrasClassName,
+  toggleDiagnosticsClassName,
+} from "./result-table-utils";
+
+interface Props {
+  checked: boolean;
+  onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+}
+
+export function SelectionFilterCheckbox({
+  checked,
+  onChange,
+}: Props): React.JSX.Element {
+  return (
+    <div className={alertExtrasClassName}>
+      <div className={toggleDiagnosticsClassName}>
+        <input
+          type="checkbox"
+          id="restrict-to-selection"
+          name="restrict-to-selection"
+          onChange={onChange}
+          checked={checked}
+        />
+        <label htmlFor="restrict-to-selection">
+          Filter results to current file or selection
+        </label>
+      </div>
+    </div>
+  );
+}