Extract vscode-codeql__vertical-rule class to component

Author: koesie10

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

@@ -0,0 +1,9 @@
+import { styled } from "styled-components";
+
+export const VerticalRule = styled.span`
+  border-left: 1px solid var(--vscode-dropdown-border);
+  height: 100%;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+`;

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

@@ -4,6 +4,7 @@ import * as Keys from "./result-keys";
 import { SarifLocation } from "./locations/SarifLocation";
 import { selectableZebraStripe } from "./result-table-utils";
 import { useCallback, useMemo } from "react";
+import { VerticalRule } from "../common/VerticalRule";
 
 interface Props {
   step: Sarif.ThreadFlowLocation;
@@ -54,10 +55,10 @@ export function AlertTablePathNodeRow(props: Props) {
       className={isSelected ? "vscode-codeql__selected-path-node" : undefined}
     >
       <td className="vscode-codeql__icon-cell">
-        <span className="vscode-codeql__vertical-rule"></span>
+        <VerticalRule />
       </td>
       <td className="vscode-codeql__icon-cell">
-        <span className="vscode-codeql__vertical-rule"></span>
+        <VerticalRule />
       </td>
       <td
         {...selectableZebraStripe(

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

@@ -5,6 +5,7 @@ import { selectableZebraStripe } from "./result-table-utils";
 import { AlertTablePathNodeRow } from "./AlertTablePathNodeRow";
 import { AlertTableDropdownIndicatorCell } from "./AlertTableDropdownIndicatorCell";
 import { useCallback, useMemo } from "react";
+import { VerticalRule } from "../common/VerticalRule";
 
 interface Props {
   path: Sarif.ThreadFlow;
@@ -53,7 +54,7 @@ export function AlertTablePathRow(props: Props) {
         {...selectableZebraStripe(isPathSpecificallySelected, resultIndex)}
       >
         <td className="vscode-codeql__icon-cell">
-          <span className="vscode-codeql__vertical-rule"></span>
+          <VerticalRule />
         </td>
         <AlertTableDropdownIndicatorCell
           expanded={currentPathExpanded}

extensions/ql-vscode/src/view/results/resultsView.css

@@ -145,14 +145,6 @@ td.vscode-codeql__path-index-cell {
   text-align: right !important;
 }
 
-.vscode-codeql__vertical-rule {
-  border-left: 1px solid var(--vscode-dropdown-border);
-  height: 100%;
-  position: absolute;
-  top: 0;
-  bottom: 0;
-}
-
 .octicon {
   fill: var(--vscode-editor-foreground);
   margin-top: 0.25em;