Move problems-view selected state into ResultsApp

Author: asgerf

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

@@ -7,7 +7,6 @@ import type {
   InterpretedResultsSortState,
   ResultSet,
   ParsedResultSets,
-  IntoResultsViewMsg,
   UserSettings,
 } from "../../common/interface-types";
 import {
@@ -43,6 +42,8 @@ interface ResultTablesProps {
   isLoadingNewResults: boolean;
   queryName: string;
   queryPath: string;
+  problemsViewSelected: boolean;
+  onProblemsViewSelectedChange: (selected: boolean) => void;
 }
 
 const UPDATING_RESULTS_TEXT_CLASS_NAME =
@@ -101,48 +102,14 @@ export function ResultTables(props: ResultTablesProps) {
     origResultsPaths,
     isLoadingNewResults,
     sortStates,
+    problemsViewSelected,
+    onProblemsViewSelectedChange,
   } = props;
 
   const [selectedTable, setSelectedTable] = useState(
     parsedResultSets.selectedTable ||
       getDefaultResultSet(getResultSets(rawResultSets, interpretation)),
   );
-  const [problemsViewSelected, setProblemsViewSelected] = useState(false);
-
-  const handleMessage = useCallback((msg: IntoResultsViewMsg): void => {
-    switch (msg.t) {
-      case "untoggleShowProblems":
-        setProblemsViewSelected(false);
-        break;
-
-      default:
-      // noop
-    }
-  }, []);
-
-  const vscodeMessageHandler = useCallback(
-    (evt: MessageEvent): void => {
-      // sanitize origin
-      const origin = evt.origin.replace(/\n|\r/g, "");
-      if (evt.origin === window.origin) {
-        handleMessage(evt.data as IntoResultsViewMsg);
-      } else {
-        console.error(`Invalid event origin ${origin}`);
-      }
-    },
-    [handleMessage],
-  );
-
-  // TODO: Duplicated from ResultsApp.tsx consider a way to
-  // avoid this duplication
-  useEffect(() => {
-    window.addEventListener("message", vscodeMessageHandler);
-
-    return () => {
-      window.removeEventListener("message", vscodeMessageHandler);
-    };
-  }, [vscodeMessageHandler]);
-
   useEffect(() => {
     const resultSetExists =
       parsedResultSets.resultSetNames.some((v) => selectedTable === v) ||
@@ -178,7 +145,7 @@ export function ResultTables(props: ResultTablesProps) {
         // no change
         return;
       }
-      setProblemsViewSelected(e.target.checked);
+      onProblemsViewSelectedChange(e.target.checked);
       if (e.target.checked) {
         sendTelemetry("local-results-show-results-in-problems-view");
       }
@@ -192,7 +159,14 @@ export function ResultTables(props: ResultTablesProps) {
         });
       }
     },
-    [database, metadata, origResultsPaths, problemsViewSelected, resultsPath],
+    [
+      database,
+      metadata,
+      onProblemsViewSelectedChange,
+      origResultsPaths,
+      problemsViewSelected,
+      resultsPath,
+    ],
   );
 
   const offset = parsedResultSets.pageNumber * parsedResultSets.pageSize;

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

@@ -84,6 +84,8 @@ export function ResultsApp() {
     DEFAULT_USER_SETTINGS,
   );
 
+  const [problemsViewSelected, setProblemsViewSelected] = useState(false);
+
   const updateStateWithNewResultsInfo = useCallback(
     (resultsInfo: ResultsInfo): void => {
       let results: Results | null = null;
@@ -180,7 +182,7 @@ export function ResultsApp() {
           break;
 
         case "untoggleShowProblems":
-          // noop
+          setProblemsViewSelected(false);
           break;
 
         default:
@@ -230,6 +232,8 @@ export function ResultsApp() {
         }
         queryName={displayedResults.resultsInfo.queryName}
         queryPath={displayedResults.resultsInfo.queryPath}
+        problemsViewSelected={problemsViewSelected}
+        onProblemsViewSelectedChange={setProblemsViewSelected}
       />
     );
   } else {