Merge pull request #3110 from github/koesie10/result-styled

Switch to styled-components for some components in the results view

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/EmptyQueryResultsMessage.tsx

@@ -1,14 +1,28 @@
 import * as React from "react";
+import { styled } from "styled-components";
 import { sendTelemetry } from "../common/telemetry";
 
 function sendCodeQLLanguageGuidesTelemetry() {
   sendTelemetry("codeql-language-guides-link");
 }
 
+const Root = styled.div`
+  height: 300px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+
+const Container = styled.span`
+  max-width: 80%;
+  font-size: 14px;
+  text-align: center;
+`;
+
 export function EmptyQueryResultsMessage(): JSX.Element {
   return (
-    <div className="vscode-codeql__empty-query-message">
-      <span>
+    <Root>
+      <Container>
         This query returned no results. If this isn&apos;t what you were
         expecting, and for effective query-writing tips, check out the{" "}
         <a
@@ -18,7 +32,7 @@ export function EmptyQueryResultsMessage(): JSX.Element {
           CodeQL language guides
         </a>
         .
-      </span>
-    </div>
+      </Container>
+    </Root>
   );
 }

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

@@ -1,13 +1,22 @@
 import * as React from "react";
+import { styled } from "styled-components";
+
+const Octicon = styled.svg`
+  fill: var(--vscode-editor-foreground);
+  margin-top: 0.25em;
+`;
+
+const OcticonLight = styled(Octicon)`
+  opacity: 0.6;
+`;
 
 /**
  * These icons come from https://github.com/microsoft/vscode-icons
  * and are used under the Creative Commons License, see `LICENSE`
  * file in this directory.
  */
 export const chevronDown = (
-  <svg
-    className="octicon"
+  <Octicon
     width="16"
     height="16"
     viewBox="0 0 16 16"
@@ -19,25 +28,23 @@ export const chevronDown = (
       clipRule="evenodd"
       d="M7.976 10.072l4.357-4.357.62.618L8.284 11h-.618L3 6.333l.62-.618 4.356 4.357z"
     />
-  </svg>
+  </Octicon>
 );
 
 export const chevronRight = (
-  <svg
-    className="octicon"
+  <Octicon
     width="16"
     height="16"
     viewBox="0 0 16 16"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
   >
     <path d="M5.7 13.7L5 13l4.6-4.6L5 3.7l.7-.7 5 5v.7l-5 5z" />
-  </svg>
+  </Octicon>
 );
 
 export const listUnordered = (
-  <svg
-    className="octicon octicon-light"
+  <OcticonLight
     width="16"
     height="16"
     viewBox="0 0 16 16"
@@ -49,12 +56,11 @@ export const listUnordered = (
       clipRule="evenodd"
       d="M2 3H1v1h1V3zm0 3H1v1h1V6zM1 9h1v1H1V9zm1 3H1v1h1v-1zm2-9h11v1H4V3zm11 3H4v1h11V6zM4 9h11v1H4V9zm11 3H4v1h11v-1z"
     />
-  </svg>
+  </OcticonLight>
 );
 
 export const info = (
-  <svg
-    className="octicon octicon-light"
+  <OcticonLight
     width="16"
     height="16"
     viewBox="0 0 16 16"
@@ -66,5 +72,5 @@ export const info = (
       clipRule="evenodd"
       d="M8.568 1.03a6.8 6.8 0 0 1 4.192 2.02 7.06 7.06 0 0 1 .46 9.39 6.85 6.85 0 0 1-8.58 1.74 7 7 0 0 1-3.12-3.5 7.12 7.12 0 0 1-.23-4.71 7 7 0 0 1 2.77-3.79 6.8 6.8 0 0 1 4.508-1.15zm.472 12.85a5.89 5.89 0 0 0 3.41-2.07 6.07 6.07 0 0 0-.4-8.06 5.82 5.82 0 0 0-7.43-.74 6.06 6.06 0 0 0 .5 10.29 5.81 5.81 0 0 0 3.92.58zM8.51 7h-1v4h1V7zm0-2h-1v1h1V5z"
     />
-  </svg>
+  </OcticonLight>
 );

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

@@ -144,43 +144,3 @@ td.vscode-codeql__path-index-cell {
 .vscode-codeql__location-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;
-}
-
-.vscode-codeql__title {
-  /* Something that isn't a link, but which has a title attribute */
-  text-decoration-line: underline;
-  text-decoration-style: dotted;
-}
-
-.octicon {
-  fill: var(--vscode-editor-foreground);
-  margin-top: 0.25em;
-}
-
-.octicon-light {
-  opacity: 0.6;
-}
-
-.vscode-codeql__empty-query-message {
-  height: 300px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.vscode-codeql__empty-query-message > span {
-  max-width: 80%;
-  font-size: 14px;
-  text-align: center;
-}
-
-.vscode-codeql__result-table-location-link {
-  text-decoration: none;
-}