Merge remote-tracking branch 'origin/main' into koesie10/compare-styled

Author: koesie10

docs/test-plan.md

@@ -170,6 +170,8 @@ Run one of the above MRVAs, but cancel it from within VS Code:
 
 Note that this test requires the feature flag: `codeQL.model.llmGeneration`
 
+A package that the AI normally gives models for is `javax.servlet-api` from the `jhy/jsoup` repository.
+
 1. Click "Model with AI".
    - Check that rows change to "Thinking".
    - Check that results come back and rows get filled out.

extensions/ql-vscode/CHANGELOG.md

@@ -6,6 +6,7 @@
 - Remove support for CodeQL CLI versions older than 2.11.6. [#3087](https://github.com/github/vscode-codeql/pull/3087)
 - Preserve focus on results viewer when showing a location in a file. [#3088](https://github.com/github/vscode-codeql/pull/3088)
 - The `dataflowtracking` and `tainttracking` snippets expand to the new module-based interface. [#3091](https://github.com/github/vscode-codeql/pull/3091)
+- The compare view will now show a loading message while the results are loading. [#3107](https://github.com/github/vscode-codeql/pull/3107)
 
 ## 1.10.0 - 16 November 2023
 

extensions/ql-vscode/src/view/compare/Compare.tsx

@@ -12,16 +12,6 @@ import CompareTable from "./CompareTable";
 
 import "../results/resultsView.css";
 
-const emptyComparison: SetComparisonsMessage = {
-  t: "setComparisons",
-  stats: {},
-  result: undefined,
-  commonResultSetNames: [],
-  currentResultSetName: "",
-  databaseUri: "",
-  message: "Empty comparison",
-};
-
 const Header = styled.div`
   display: flex;
 `;
@@ -35,12 +25,13 @@ const Message = styled.div`
 `;
 
 export function Compare(_: Record<string, never>): JSX.Element {
-  const [comparison, setComparison] =
-    useState<SetComparisonsMessage>(emptyComparison);
+  const [comparison, setComparison] = useState<SetComparisonsMessage | null>(
+    null,
+  );
 
-  const message = comparison.message || "Empty comparison";
+  const message = comparison?.message || "Empty comparison";
   const hasRows =
-    comparison.result &&
+    comparison?.result &&
     (comparison.result.to.length || comparison.result.from.length);
 
   useEffect(() => {
@@ -63,6 +54,7 @@ export function Compare(_: Record<string, never>): JSX.Element {
       window.removeEventListener("message", listener);
     };
   }, []);
+
   if (!comparison) {
     return <div>Waiting for results to load.</div>;
   }

extensions/ql-vscode/src/view/compare/CompareTable.tsx

@@ -1,14 +1,11 @@
 import * as React from "react";
 
 import { SetComparisonsMessage } from "../../common/interface-types";
-import RawTableHeader from "../results/RawTableHeader";
 import { className } from "../results/result-table-utils";
-import { ResultRow } from "../../common/bqrs-cli-types";
-import RawTableRow from "../results/RawTableRow";
 import { vscode } from "../vscode-api";
-import { sendTelemetry } from "../common/telemetry";
 import TextButton from "../common/TextButton";
 import { styled } from "styled-components";
+import { RawCompareResultTable } from "./RawCompareResultTable";
 
 interface Props {
   comparison: SetComparisonsMessage;
@@ -40,24 +37,6 @@ export default function CompareTable(props: Props) {
     });
   }
 
-  function createRows(rows: ResultRow[], databaseUri: string) {
-    return (
-      <tbody>
-        {rows.map((row, rowIndex) => (
-          <RawTableRow
-            key={rowIndex}
-            rowIndex={rowIndex}
-            row={row}
-            databaseUri={databaseUri}
-            onSelected={() => {
-              sendTelemetry("comapre-view-result-clicked");
-            }}
-          />
-        ))}
-      </tbody>
-    );
-  }
-
   return (
     <Table>
       <thead>
@@ -85,24 +64,22 @@ export default function CompareTable(props: Props) {
       <tbody>
         <tr>
           <td>
-            <table className={className}>
-              <RawTableHeader
-                columns={result.columns}
-                schemaName={comparison.currentResultSetName}
-                preventSort={true}
-              />
-              {createRows(result.from, comparison.databaseUri)}
-            </table>
+            <RawCompareResultTable
+              columns={result.columns}
+              schemaName={comparison.currentResultSetName}
+              rows={result.from}
+              databaseUri={comparison.databaseUri}
+              className={className}
+            />
           </td>
           <td>
-            <table className={className}>
-              <RawTableHeader
-                columns={result.columns}
-                schemaName={comparison.currentResultSetName}
-                preventSort={true}
-              />
-              {createRows(result.to, comparison.databaseUri)}
-            </table>
+            <RawCompareResultTable
+              columns={result.columns}
+              schemaName={comparison.currentResultSetName}
+              rows={result.to}
+              databaseUri={comparison.databaseUri}
+              className={className}
+            />
           </td>
         </tr>
       </tbody>

extensions/ql-vscode/src/view/compare/RawCompareResultTable.tsx

@@ -0,0 +1,45 @@
+import * as React from "react";
+import { ResultRow } from "../../common/bqrs-cli-types";
+import { sendTelemetry } from "../common/telemetry";
+import RawTableHeader from "../results/RawTableHeader";
+import RawTableRow from "../results/RawTableRow";
+
+interface Props {
+  columns: ReadonlyArray<{ name?: string }>;
+  schemaName: string;
+  rows: ResultRow[];
+  databaseUri: string;
+
+  className?: string;
+}
+
+export function RawCompareResultTable({
+  columns,
+  schemaName,
+  rows,
+  databaseUri,
+  className,
+}: Props) {
+  return (
+    <table className={className}>
+      <RawTableHeader
+        columns={columns}
+        schemaName={schemaName}
+        preventSort={true}
+      />
+      <tbody>
+        {rows.map((row, rowIndex) => (
+          <RawTableRow
+            key={rowIndex}
+            rowIndex={rowIndex}
+            row={row}
+            databaseUri={databaseUri}
+            onSelected={() => {
+              sendTelemetry("comapre-view-result-clicked");
+            }}
+          />
+        ))}
+      </tbody>
+    </table>
+  );
+}