Display length of shortest path in MRVA UI (#3671)

* feature: display length of shortest path in MRVA UI #3659

* add entry to changelog

* replace link in changelog + remove test-id

extensions/ql-vscode/CHANGELOG.md

@@ -2,6 +2,8 @@
 
 ## [UNRELEASED]
 
+- Update variant analysis view to display the length of the shortest path for path queries. [#3671](https://github.com/github/vscode-codeql/pull/3671)
+
 ## 1.13.1 - 29 May 2024
 
 - Fix a bug when re-importing test databases that erroneously showed old source code. [#3616](https://github.com/github/vscode-codeql/pull/3616)

extensions/ql-vscode/src/view/common/CodePaths/CodePaths.tsx

@@ -12,6 +12,18 @@ const ShowPathsLink = styled(VSCodeLink)`
   cursor: pointer;
 `;
 
+const Label = styled.span`
+  color: var(--vscode-descriptionForeground);
+  margin-left: 10px;
+`;
+
+function getShortestPathLength(codeFlows: CodeFlow[]): number {
+  const allPathLengths = codeFlows
+    .map((codeFlow) => codeFlow.threadFlows.length)
+    .flat();
+  return Math.min(...allPathLengths);
+}
+
 export type CodePathsProps = {
   codeFlows: CodeFlow[];
   ruleDescription: string;
@@ -40,6 +52,7 @@ export const CodePaths = ({
   return (
     <>
       <ShowPathsLink onClick={onShowPathsClick}>Show paths</ShowPathsLink>
+      <Label>(Shortest: {getShortestPathLength(codeFlows)})</Label>
     </>
   );
 };

extensions/ql-vscode/src/view/common/CodePaths/__tests__/CodePaths.spec.tsx

@@ -24,6 +24,12 @@ describe(CodePaths.name, () => {
     expect(screen.getByText("Show paths")).toBeInTheDocument();
   });
 
+  it("renders shortest path for code flows", () => {
+    render();
+
+    expect(screen.getByText("(Shortest: 1)")).toBeInTheDocument();
+  });
+
   it("posts extension message when 'show paths' link clicked", async () => {
     render();