From 493c9cb5fe44a2b382c972d74aa4e3df0b30c82f Mon Sep 17 00:00:00 2001
From: Koen Vlaswinkel <koesie10@github.com>
Date: Wed, 16 Aug 2023 15:59:09 +0200
Subject: [PATCH 1/6] Add story for compare table

---
 .../stories/compare/CompareTable.stories.tsx  | 70 +++++++++++++++++++
 1 file changed, 70 insertions(+)
 create mode 100644 extensions/ql-vscode/src/stories/compare/CompareTable.stories.tsx

diff --git a/extensions/ql-vscode/src/stories/compare/CompareTable.stories.tsx b/extensions/ql-vscode/src/stories/compare/CompareTable.stories.tsx
new file mode 100644
index 00000000000..1631ae2ac97
--- /dev/null
+++ b/extensions/ql-vscode/src/stories/compare/CompareTable.stories.tsx
@@ -0,0 +1,70 @@
+import * as React from "react";
+
+import { Meta, StoryFn } from "@storybook/react";
+
+import CompareTableComponent from "../../view/compare/CompareTable";
+
+import "../../view/results/resultsView.css";
+
+export default {
+  title: "Compare/Compare Table",
+  component: CompareTableComponent,
+} as Meta<typeof CompareTableComponent>;
+
+const Template: StoryFn<typeof CompareTableComponent> = (args) => (
+  <CompareTableComponent {...args} />
+);
+
+export const CompareTable = Template.bind({});
+CompareTable.args = {
+  comparison: {
+    t: "setComparisons",
+    stats: {
+      fromQuery: {
+        name: "Query built from user-controlled sources",
+        status: "finished in 0 seconds",
+        time: "8/16/2023, 3:08:37 PM",
+      },
+      toQuery: {
+        name: "Query built from user-controlled sources",
+        status: "finished in 2 seconds",
+        time: "8/16/2023, 3:07:21 PM",
+      },
+    },
+    columns: [
+      { name: "a", kind: "e" },
+      { name: "b", kind: "e" },
+    ],
+    commonResultSetNames: ["edges", "nodes", "subpaths", "#select"],
+    currentResultSetName: "edges",
+    rows: {
+      from: [],
+      to: [
+        [
+          {
+            label: "url : String",
+            url: {
+              uri: "file:/home/runner/work/sql2o-example/sql2o-example/src/main/java/org/example/HelloController.java",
+              startLine: 22,
+              startColumn: 27,
+              endLine: 22,
+              endColumn: 57,
+            },
+          },
+          {
+            label: "url",
+            url: {
+              uri: "file:/home/runner/work/sql2o-example/sql2o-example/src/main/java/org/example/HelloController.java",
+              startLine: 23,
+              startColumn: 33,
+              endLine: 23,
+              endColumn: 35,
+            },
+          },
+        ],
+      ],
+    },
+    message: undefined,
+    databaseUri: "file:///java",
+  },
+};

From b0663669b069cc49419dce1c3b623ee01ccc4877 Mon Sep 17 00:00:00 2001
From: Koen Vlaswinkel <koesie10@github.com>
Date: Wed, 16 Aug 2023 16:06:10 +0200
Subject: [PATCH 2/6] Use button instead of a for compare table queries

---
 .../ql-vscode/src/view/common/TextButton.tsx  |  8 +++--
 .../src/view/compare/CompareTable.tsx         | 34 +++++++------------
 .../src/view/results/resultsView.css          | 16 +++++----
 3 files changed, 26 insertions(+), 32 deletions(-)

diff --git a/extensions/ql-vscode/src/view/common/TextButton.tsx b/extensions/ql-vscode/src/view/common/TextButton.tsx
index 32ae3fe7f83..7d076d83eac 100644
--- a/extensions/ql-vscode/src/view/common/TextButton.tsx
+++ b/extensions/ql-vscode/src/view/common/TextButton.tsx
@@ -8,19 +8,21 @@ const StyledButton = styled.button<{ size: Size }>`
   color: var(--vscode-textLink-foreground);
   border: none;
   cursor: pointer;
-  font-size: ${(props) => props.size};
+  font-size: ${(props) => props.size ?? "1em"};
 `;
 
 const TextButton = ({
   size,
   onClick,
+  className,
   children,
 }: {
-  size: Size;
+  size?: Size;
   onClick: () => void;
+  className?: string;
   children: React.ReactNode;
 }) => (
-  <StyledButton size={size} onClick={onClick}>
+  <StyledButton size={size} onClick={onClick} className={className}>
     {children}
   </StyledButton>
 );
diff --git a/extensions/ql-vscode/src/view/compare/CompareTable.tsx b/extensions/ql-vscode/src/view/compare/CompareTable.tsx
index 4681671ef56..eabc7292943 100644
--- a/extensions/ql-vscode/src/view/compare/CompareTable.tsx
+++ b/extensions/ql-vscode/src/view/compare/CompareTable.tsx
@@ -7,11 +7,19 @@ 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";
 
 interface Props {
   comparison: SetComparisonsMessage;
 }
 
+const OpenButton = styled(TextButton)`
+  cursor: pointer;
+  text-decoration: underline;
+  padding: 0;
+`;
+
 export default function CompareTable(props: Props) {
   const comparison = props.comparison;
   const rows = props.comparison.rows!;
@@ -46,32 +54,14 @@ export default function CompareTable(props: Props) {
       <thead>
         <tr>
           <td>
-            {/*
-              eslint-disable-next-line
-              jsx-a11y/anchor-is-valid,
-              jsx-a11y/click-events-have-key-events,
-              jsx-a11y/no-static-element-interactions
-            */}
-            <a
-              onClick={() => openQuery("from")}
-              className="vscode-codeql__compare-open"
-            >
+            <OpenButton onClick={() => openQuery("from")}>
               {comparison.stats.fromQuery?.name}
-            </a>
+            </OpenButton>
           </td>
           <td>
-            {/*
-              eslint-disable-next-line
-              jsx-a11y/anchor-is-valid,
-              jsx-a11y/click-events-have-key-events,
-              jsx-a11y/no-static-element-interactions
-            */}
-            <a
-              onClick={() => openQuery("to")}
-              className="vscode-codeql__compare-open"
-            >
+            <OpenButton onClick={() => openQuery("to")}>
               {comparison.stats.toQuery?.name}
-            </a>
+            </OpenButton>
           </td>
         </tr>
         <tr>
diff --git a/extensions/ql-vscode/src/view/results/resultsView.css b/extensions/ql-vscode/src/view/results/resultsView.css
index fdb35ba735a..9076b939e71 100644
--- a/extensions/ql-vscode/src/view/results/resultsView.css
+++ b/extensions/ql-vscode/src/view/results/resultsView.css
@@ -84,8 +84,15 @@
 .vscode-codeql__result-table th {
   border-top: 1px solid rgba(88, 96, 105, 0.25);
   border-bottom: 1px solid rgba(88, 96, 105, 0.25);
-  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial,
-    sans-serif, Apple Color Emoji, Segoe UI Emoji;
+  font-family:
+    -apple-system,
+    BlinkMacSystemFont,
+    Segoe UI,
+    Helvetica,
+    Arial,
+    sans-serif,
+    Apple Color Emoji,
+    Segoe UI Emoji;
   background: rgba(225, 228, 232, 0.25);
   padding: 0.25em 0.5em;
   text-align: center;
@@ -225,11 +232,6 @@ td.vscode-codeql__path-index-cell {
   width: 100%;
 }
 
-.vscode-codeql__compare-open {
-  cursor: pointer;
-  text-decoration: underline;
-}
-
 .vscode-codeql__compare-body > tbody {
   vertical-align: top;
 }

From 3dd858311667655f89207c01a4d5d99c5e054963 Mon Sep 17 00:00:00 2001
From: Koen Vlaswinkel <koesie10@github.com>
Date: Wed, 16 Aug 2023 16:14:40 +0200
Subject: [PATCH 3/6] Use button instead of a for clickable location links

---
 .../locations/ClickableLocation.stories.tsx   | 28 +++++++++++++++++++
 .../ql-vscode/src/view/common/TextButton.tsx  | 10 ++++++-
 .../src/view/results/ResultTablesHeader.tsx   | 18 ++++++------
 .../results/locations/ClickableLocation.tsx   | 23 +++++----------
 .../src/view/results/resultsView.css          |  4 ---
 5 files changed, 52 insertions(+), 31 deletions(-)
 create mode 100644 extensions/ql-vscode/src/stories/results/locations/ClickableLocation.stories.tsx

diff --git a/extensions/ql-vscode/src/stories/results/locations/ClickableLocation.stories.tsx b/extensions/ql-vscode/src/stories/results/locations/ClickableLocation.stories.tsx
new file mode 100644
index 00000000000..a54723ee5c5
--- /dev/null
+++ b/extensions/ql-vscode/src/stories/results/locations/ClickableLocation.stories.tsx
@@ -0,0 +1,28 @@
+import * as React from "react";
+
+import { Meta, StoryFn } from "@storybook/react";
+
+import { ClickableLocation as ClickableLocationComponent } from "../../../view/results/locations/ClickableLocation";
+
+import "../../../view/results/resultsView.css";
+
+export default {
+  title: "Results/Clickable Location",
+  component: ClickableLocationComponent,
+} as Meta<typeof ClickableLocationComponent>;
+
+const Template: StoryFn<typeof ClickableLocationComponent> = (args) => (
+  <ClickableLocationComponent {...args} />
+);
+
+export const ClickableLocation = Template.bind({});
+ClickableLocation.args = {
+  loc: {
+    uri: "file:/home/runner/work/sql2o-example/sql2o-example/src/main/java/org/example/HelloController.java",
+    startLine: 22,
+    startColumn: 27,
+    endLine: 22,
+    endColumn: 57,
+  },
+  label: "url : String",
+};
diff --git a/extensions/ql-vscode/src/view/common/TextButton.tsx b/extensions/ql-vscode/src/view/common/TextButton.tsx
index 7d076d83eac..3a84d8a3dd8 100644
--- a/extensions/ql-vscode/src/view/common/TextButton.tsx
+++ b/extensions/ql-vscode/src/view/common/TextButton.tsx
@@ -9,20 +9,28 @@ const StyledButton = styled.button<{ size: Size }>`
   border: none;
   cursor: pointer;
   font-size: ${(props) => props.size ?? "1em"};
+  padding: 0;
 `;
 
 const TextButton = ({
   size,
   onClick,
   className,
+  title,
   children,
 }: {
   size?: Size;
   onClick: () => void;
   className?: string;
+  title?: string;
   children: React.ReactNode;
 }) => (
-  <StyledButton size={size} onClick={onClick} className={className}>
+  <StyledButton
+    size={size}
+    onClick={onClick}
+    className={className}
+    title={title}
+  >
     {children}
   </StyledButton>
 );
diff --git a/extensions/ql-vscode/src/view/results/ResultTablesHeader.tsx b/extensions/ql-vscode/src/view/results/ResultTablesHeader.tsx
index 69e5e465855..7ab18181001 100644
--- a/extensions/ql-vscode/src/view/results/ResultTablesHeader.tsx
+++ b/extensions/ql-vscode/src/view/results/ResultTablesHeader.tsx
@@ -8,6 +8,8 @@ import {
   ParsedResultSets,
 } from "../../common/interface-types";
 import { basename } from "../../common/path";
+import { styled } from "styled-components";
+import TextButton from "../common/TextButton";
 
 interface Props {
   queryName: string;
@@ -16,6 +18,10 @@ interface Props {
   selectedTable: string;
 }
 
+const OpenQueryLink = styled(TextButton)`
+  text-decoration: none;
+`;
+
 export function ResultTablesHeader(props: Props) {
   const { queryPath, queryName, parsedResultSets, selectedTable } = props;
 
@@ -122,17 +128,9 @@ export function ResultTablesHeader(props: Props) {
       </button>
       <div className={tableHeaderItemClassName}>{queryName}</div>
       <div className={tableHeaderItemClassName}>
-        {/*
-            eslint-disable-next-line
-            jsx-a11y/anchor-is-valid
-          */}
-        <a
-          href="#"
-          onClick={openQueryHandler}
-          className="vscode-codeql__result-table-location-link"
-        >
+        <OpenQueryLink onClick={openQueryHandler}>
           Open {basename(queryPath)}
-        </a>
+        </OpenQueryLink>
       </div>
     </span>
   );
diff --git a/extensions/ql-vscode/src/view/results/locations/ClickableLocation.tsx b/extensions/ql-vscode/src/view/results/locations/ClickableLocation.tsx
index f94cbfe97ec..9301456af38 100644
--- a/extensions/ql-vscode/src/view/results/locations/ClickableLocation.tsx
+++ b/extensions/ql-vscode/src/view/results/locations/ClickableLocation.tsx
@@ -2,6 +2,8 @@ import * as React from "react";
 import { useCallback } from "react";
 import { ResolvableLocationValue } from "../../../common/bqrs-cli-types";
 import { jumpToLocation } from "../result-table-utils";
+import TextButton from "../../common/TextButton";
+import { styled } from "styled-components";
 
 interface Props {
   loc: ResolvableLocationValue;
@@ -11,6 +13,10 @@ interface Props {
   onClick?: () => void;
 }
 
+const Link = styled(TextButton)`
+  text-decoration: none;
+`;
+
 /**
  * A clickable location link.
  */
@@ -31,20 +37,5 @@ export function ClickableLocation({
     [loc, databaseUri, onClick],
   );
 
-  return (
-    <>
-      {/*
-          eslint-disable-next-line
-          jsx-a11y/anchor-is-valid,
-        */}
-      <a
-        href="#"
-        className="vscode-codeql__result-table-location-link"
-        title={title}
-        onClick={handleClick}
-      >
-        {label}
-      </a>
-    </>
-  );
+  return <Link onClick={handleClick}>{label}</Link>;
 }
diff --git a/extensions/ql-vscode/src/view/results/resultsView.css b/extensions/ql-vscode/src/view/results/resultsView.css
index 9076b939e71..d7a1fa061e2 100644
--- a/extensions/ql-vscode/src/view/results/resultsView.css
+++ b/extensions/ql-vscode/src/view/results/resultsView.css
@@ -129,10 +129,6 @@
   text-align: left;
 }
 
-.vscode-codeql__result-table-location-link {
-  text-decoration: none;
-}
-
 select {
   background-color: var(--vscode-dropdown-background);
   color: var(--vscode-dropdown-foreground);

From 90a39ec293731857cb2ca11154e0e1e63744e157 Mon Sep 17 00:00:00 2001
From: Koen Vlaswinkel <koesie10@github.com>
Date: Wed, 16 Aug 2023 16:37:04 +0200
Subject: [PATCH 4/6] Use button instead of a for raw results link

---
 extensions/ql-vscode/src/view/results/alert-table.tsx | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

diff --git a/extensions/ql-vscode/src/view/results/alert-table.tsx b/extensions/ql-vscode/src/view/results/alert-table.tsx
index f11d3e50b07..e70599ea45e 100644
--- a/extensions/ql-vscode/src/view/results/alert-table.tsx
+++ b/extensions/ql-vscode/src/view/results/alert-table.tsx
@@ -22,6 +22,7 @@ import { AlertTableHeader } from "./AlertTableHeader";
 import { SarifMessageWithLocations } from "./locations/SarifMessageWithLocations";
 import { SarifLocation } from "./locations/SarifLocation";
 import { EmptyQueryResultsMessage } from "./EmptyQueryResultsMessage";
+import TextButton from "../common/TextButton";
 
 type AlertTableProps = ResultTableProps & {
   resultSet: InterpretedResultSet<SarifInterpretationData>;
@@ -73,13 +74,9 @@ export class AlertTable extends React.Component<
       return (
         <span>
           No Alerts. See{" "}
-          {/*
-              eslint-disable-next-line
-              jsx-a11y/anchor-is-valid,
-            */}
-          <a href="#" onClick={this.props.showRawResults}>
+          <TextButton onClick={this.props.showRawResults}>
             raw results
-          </a>
+          </TextButton>
           .
         </span>
       );

From a5c675b8c78498954adf88b1ca6fb5629adc768f Mon Sep 17 00:00:00 2001
From: Koen Vlaswinkel <koesie10@github.com>
Date: Fri, 18 Aug 2023 09:58:34 +0200
Subject: [PATCH 5/6] Add story for ResultTablesHeader

---
 .../results/ResultTablesHeader.stories.tsx    | 54 +++++++++++++++++++
 1 file changed, 54 insertions(+)
 create mode 100644 extensions/ql-vscode/src/stories/results/ResultTablesHeader.stories.tsx

diff --git a/extensions/ql-vscode/src/stories/results/ResultTablesHeader.stories.tsx b/extensions/ql-vscode/src/stories/results/ResultTablesHeader.stories.tsx
new file mode 100644
index 00000000000..ccbadce07e9
--- /dev/null
+++ b/extensions/ql-vscode/src/stories/results/ResultTablesHeader.stories.tsx
@@ -0,0 +1,54 @@
+import * as React from "react";
+
+import { Meta, StoryFn } from "@storybook/react";
+
+import { ResultTablesHeader as ResultTablesHeaderComponent } from "../../view/results/ResultTablesHeader";
+
+import "../../view/results/resultsView.css";
+
+export default {
+  title: "Results/Result Tables Header",
+  component: ResultTablesHeaderComponent,
+} as Meta<typeof ResultTablesHeaderComponent>;
+
+const Template: StoryFn<typeof ResultTablesHeaderComponent> = (args) => (
+  <ResultTablesHeaderComponent {...args} />
+);
+
+export const ResultTablesHeader = Template.bind({});
+ResultTablesHeader.args = {
+  queryName: "test query",
+  queryPath: "/a/b/c/query.ql",
+  selectedTable: "#select",
+  parsedResultSets: {
+    pageNumber: 1,
+    pageSize: 10,
+    numPages: 2,
+    numInterpretedPages: 2,
+    resultSetNames: ["#select", "alerts"],
+    resultSet: {
+      t: "InterpretedResultSet",
+      schema: {
+        name: "#select",
+        rows: 15,
+        columns: [
+          {
+            name: "x",
+            kind: "s",
+          },
+        ],
+      },
+      name: "#select",
+      interpretation: {
+        sourceLocationPrefix: "/home/bulk-builder/bulk-builder",
+        numTruncatedResults: 0,
+        numTotalResults: 15,
+        data: {
+          t: "SarifInterpretationData",
+          version: "2.1.0",
+          runs: [],
+        },
+      },
+    },
+  },
+};

From 2888fddf61c8a028c74bd36ed861a28a76632580 Mon Sep 17 00:00:00 2001
From: Koen Vlaswinkel <koesie10@github.com>
Date: Fri, 18 Aug 2023 10:03:36 +0200
Subject: [PATCH 6/6] Move all ResultTablesHeader styles to styled-components

---
 .../src/view/results/ResultTablesHeader.tsx   | 49 ++++++++++++++++---
 .../src/view/results/resultsView.css          | 43 ++--------------
 2 files changed, 47 insertions(+), 45 deletions(-)

diff --git a/extensions/ql-vscode/src/view/results/ResultTablesHeader.tsx b/extensions/ql-vscode/src/view/results/ResultTablesHeader.tsx
index 7ab18181001..edaa1af4a92 100644
--- a/extensions/ql-vscode/src/view/results/ResultTablesHeader.tsx
+++ b/extensions/ql-vscode/src/view/results/ResultTablesHeader.tsx
@@ -18,6 +18,43 @@ interface Props {
   selectedTable: string;
 }
 
+const Container = styled.span`
+  display: flex;
+  padding: 0.5em 0;
+  align-items: center;
+  top: 0;
+  background-color: var(--vscode-editorGutter-background);
+  position: sticky;
+  z-index: 1;
+`;
+
+const PaginationButton = styled.button`
+  padding: 0.3rem;
+  margin: 0.2rem;
+  border: 0;
+  font-size: large;
+  color: var(--vscode-editor-foreground);
+  background-color: var(--vscode-editorGutter-background);
+  cursor: pointer;
+  opacity: 0.8;
+
+  &:hover {
+    opacity: 1;
+  }
+`;
+
+const PageNumberInput = styled.input`
+  border-radius: 0;
+  padding: 0.3rem;
+  margin: 0.2rem;
+  width: 2rem;
+  color: var(--vscode-editor-foreground);
+  border: 0;
+  border-bottom: 1px solid var(--vscode-editor-foreground);
+  background-color: var(--vscode-editorGutter-background);
+  outline: none;
+`;
+
 const OpenQueryLink = styled(TextButton)`
   text-decoration: none;
 `;
@@ -110,9 +147,9 @@ export function ResultTablesHeader(props: Props) {
   }, [queryPath]);
 
   return (
-    <span className="vscode-codeql__table-selection-pagination">
-      <button onClick={prevPageHandler}>&#xab;</button>
-      <input
+    <Container>
+      <PaginationButton onClick={prevPageHandler}>&#xab;</PaginationButton>
+      <PageNumberInput
         type="number"
         size={3}
         value={selectedPage}
@@ -123,16 +160,16 @@ export function ResultTablesHeader(props: Props) {
         onKeyDown={onKeyDownHandler}
       />
       <span>/&nbsp;{numPages}</span>
-      <button value=">" onClick={nextPageHandler}>
+      <PaginationButton value=">" onClick={nextPageHandler}>
         &#xbb;
-      </button>
+      </PaginationButton>
       <div className={tableHeaderItemClassName}>{queryName}</div>
       <div className={tableHeaderItemClassName}>
         <OpenQueryLink onClick={openQueryHandler}>
           Open {basename(queryPath)}
         </OpenQueryLink>
       </div>
-    </span>
+    </Container>
   );
 }
 
diff --git a/extensions/ql-vscode/src/view/results/resultsView.css b/extensions/ql-vscode/src/view/results/resultsView.css
index d7a1fa061e2..16723553a08 100644
--- a/extensions/ql-vscode/src/view/results/resultsView.css
+++ b/extensions/ql-vscode/src/view/results/resultsView.css
@@ -11,16 +11,6 @@
   justify-content: space-between;
 }
 
-.vscode-codeql__table-selection-pagination {
-  display: flex;
-  padding: 0.5em 0;
-  align-items: center;
-  top: 0;
-  background-color: var(--vscode-editorGutter-background);
-  position: sticky;
-  z-index: 1;
-}
-
 .vscode-codeql__table-selection-header-item {
   padding-left: 2em;
 }
@@ -29,35 +19,6 @@
   border: 0;
 }
 
-.vscode-codeql__table-selection-pagination button {
-  padding: 0.3rem;
-  margin: 0.2rem;
-  border: 0;
-  font-size: large;
-  color: var(--vscode-editor-foreground);
-  background-color: var(--vscode-editorGutter-background);
-  cursor: pointer;
-  opacity: 0.8;
-}
-
-.vscode-codeql__table-selection-pagination button:hover {
-  opacity: 1;
-}
-
-.vscode-codeql__table-selection-pagination input[type="number"] {
-  border-radius: 0;
-  padding: 0.3rem;
-  margin: 0.2rem;
-  width: 2rem;
-  border-radius: 0;
-  color: var(--vscode-editor-foreground);
-  border: 0;
-  border-bottom: 1px solid var(--vscode-editor-foreground);
-  background-color: var(--vscode-editorGutter-background);
-  border-radius: 0;
-  outline: none;
-}
-
 .vscode-codeql__result-table-alert-extras {
   display: inline-block;
   text-align: left;
@@ -244,3 +205,7 @@ td.vscode-codeql__path-index-cell {
   font-size: 14px;
   text-align: center;
 }
+
+.vscode-codeql__result-table-location-link {
+  text-decoration: none;
+}