Merge pull request #3981 from github/tuan-nguen/remove-vscode-links

Remove the use of `VSCodeLink`

Author: tuan-nguen

extensions/ql-vscode/src/stories/common/Alert.stories.tsx

@@ -1,8 +1,9 @@
 import type { Meta, StoryFn } from "@storybook/react";
-import { VSCodeButton, VSCodeLink } from "@vscode/webview-ui-toolkit/react";
+import { VSCodeButton } from "@vscode/webview-ui-toolkit/react";
 
 import { VariantAnalysisContainer } from "../../view/variant-analysis/VariantAnalysisContainer";
 import { Alert } from "../../view/common";
+import { Link } from "../../view/common/Link";
 
 export default {
   title: "Alert",
@@ -24,7 +25,7 @@ Warning.args = {
   title: "This query found a warning",
   message: (
     <>
-      Warning content with <VSCodeLink>links</VSCodeLink>
+      Warning content with <Link>links</Link>
     </>
   ),
 };
@@ -50,7 +51,7 @@ Error.args = {
   title: "This query found an error",
   message: (
     <>
-      Error content with <VSCodeLink>links</VSCodeLink>
+      Error content with <Link>links</Link>
     </>
   ),
 };
@@ -70,8 +71,7 @@ ErrorExample.args = {
     <>
       Request to
       https://api.github.com/repos/octodemo/Hello-World/code-scanning/codeql/queries
-      failed. <VSCodeLink>View actions logs</VSCodeLink> and try running this
-      query again.
+      failed. <Link>View actions logs</Link> and try running this query again.
     </>
   ),
 };

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

@@ -1,5 +1,5 @@
 import { styled } from "styled-components";
-import { VSCodeLink } from "@vscode/webview-ui-toolkit/react";
+import { Link } from "../Link";
 
 import type {
   AnalysisMessage,
@@ -8,7 +8,7 @@ import type {
 } from "../../../variant-analysis/shared/analysis-result";
 import { vscode } from "../../vscode-api";
 
-const ShowPathsLink = styled(VSCodeLink)`
+const ShowPathsLink = styled(Link)`
   cursor: pointer;
 `;
 

extensions/ql-vscode/src/view/common/FileCodeSnippet/CodeSnippetMessage.tsx

@@ -1,5 +1,5 @@
 import { styled } from "styled-components";
-import { VSCodeLink } from "@vscode/webview-ui-toolkit/react";
+import { Link } from "../Link";
 
 import type {
   AnalysisMessage,
@@ -39,7 +39,7 @@ const CodeSnippetMessageContainer = styled.div<CodeSnippetMessageContainerProps>
   padding-bottom: 1em;
 `;
 
-const LocationLink = styled(VSCodeLink)`
+const LocationLink = styled(Link)`
   font-family: var(--vscode-editor-font-family);
 `;
 

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

@@ -1,5 +1,4 @@
 import { styled } from "styled-components";
-import { VSCodeLink } from "@vscode/webview-ui-toolkit/react";
 
 import type {
   AnalysisMessage,
@@ -12,6 +11,7 @@ import { createRemoteFileRef } from "../../../common/location-link-utils";
 import { CodeSnippetMessage } from "./CodeSnippetMessage";
 import { CodeSnippetLine } from "./CodeSnippetLine";
 import { sendTelemetry } from "../telemetry";
+import { Link } from "../Link";
 
 const borderColor = "var(--vscode-editor-snippetFinalTabstopHighlightBorder)";
 
@@ -72,12 +72,9 @@ export const FileCodeSnippet = ({
     return (
       <Container>
         <TitleContainer>
-          <VSCodeLink
-            onClick={sendCodeSnippetTitleLinkTelemetry}
-            href={titleFileUri}
-          >
+          <Link onClick={sendCodeSnippetTitleLinkTelemetry} href={titleFileUri}>
             {fileLink.filePath}
-          </VSCodeLink>
+          </Link>
         </TitleContainer>
         {message && severity && (
           <CodeSnippetMessage message={message} severity={severity}>
@@ -93,12 +90,9 @@ export const FileCodeSnippet = ({
   return (
     <Container>
       <TitleContainer>
-        <VSCodeLink
-          onClick={sendCodeSnippetTitleLinkTelemetry}
-          href={titleFileUri}
-        >
+        <Link onClick={sendCodeSnippetTitleLinkTelemetry} href={titleFileUri}>
           {fileLink.filePath}
-        </VSCodeLink>
+        </Link>
       </TitleContainer>
       <CodeContainer>
         {code.map((line, index) => (

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

@@ -0,0 +1,25 @@
+import { styled } from "styled-components";
+
+export const Link = styled.a`
+  background: transparent;
+  box-sizing: border-box;
+  color: var(--link-foreground);
+  cursor: pointer;
+  fill: currentcolor;
+  font-family: var(--font-family);
+  font-size: var(--type-ramp-base-font-size);
+  line-height: var(--type-ramp-base-line-height);
+  outline: none;
+
+  &:hover {
+    text-decoration: underline;
+  }
+
+  &:focus-visible {
+    border: 1px solid var(--vscode-focusBorder);
+  }
+
+  &:focus {
+    border: 1px solid var(--vscode-focusBorder);
+  }
+`;

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

@@ -1,7 +1,7 @@
-import { VSCodeLink } from "@vscode/webview-ui-toolkit/react";
 import { styled } from "styled-components";
+import { Link } from "./Link";
 
-export const LinkIconButton = styled(VSCodeLink)`
+export const LinkIconButton = styled(Link)`
   .codicon {
     vertical-align: text-bottom;
   }

extensions/ql-vscode/src/view/model-alerts/ModelAlertsResults.tsx

@@ -1,7 +1,7 @@
 import { styled } from "styled-components";
 import type { ModelAlerts } from "../../model-editor/model-alerts/model-alerts";
 import { Codicon } from "../common";
-import { VSCodeBadge, VSCodeLink } from "@vscode/webview-ui-toolkit/react";
+import { VSCodeBadge } from "@vscode/webview-ui-toolkit/react";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { formatDecimal } from "../../common/number";
 import AnalysisAlertResult from "../variant-analysis/AnalysisAlertResult";
@@ -10,6 +10,7 @@ import { ModelDetails } from "./ModelDetails";
 import { vscode } from "../vscode-api";
 import { createModeledMethodKey } from "../../model-editor/modeled-method";
 import type { ModeledMethod } from "../../model-editor/modeled-method";
+import { Link } from "../common/Link";
 
 // This will ensure that these icons have a className which we can use in the TitleContainer
 const ExpandCollapseCodicon = styled(Codicon)``;
@@ -39,7 +40,7 @@ const ModelTypeText = styled.span`
   color: var(--vscode-descriptionForeground);
 `;
 
-const ViewLink = styled(VSCodeLink)`
+const ViewLink = styled(Link)`
   white-space: nowrap;
   padding: 0 0 0.25em 1em;
 `;

extensions/ql-vscode/src/view/model-editor/MethodRow.tsx

@@ -1,8 +1,4 @@
-import {
-  VSCodeBadge,
-  VSCodeButton,
-  VSCodeLink,
-} from "@vscode/webview-ui-toolkit/react";
+import { VSCodeBadge, VSCodeButton } from "@vscode/webview-ui-toolkit/react";
 import {
   forwardRef,
   useCallback,
@@ -13,6 +9,7 @@ import {
 } from "react";
 import { styled } from "styled-components";
 import { vscode } from "../vscode-api";
+import { Link } from "../common/Link";
 
 import type { Method } from "../../model-editor/method";
 import type { ModeledMethod } from "../../model-editor/modeled-method";
@@ -59,7 +56,7 @@ const UsagesButton = styled(VSCodeBadge)`
   cursor: pointer;
 `;
 
-const ViewLink = styled(VSCodeLink)`
+const ViewLink = styled(Link)`
   white-space: nowrap;
 `;
 

extensions/ql-vscode/src/view/model-editor/ModelEvaluation.tsx

@@ -1,11 +1,12 @@
 import { styled } from "styled-components";
-import { VSCodeButton, VSCodeLink } from "@vscode/webview-ui-toolkit/react";
+import { VSCodeButton } from "@vscode/webview-ui-toolkit/react";
 import type { ModeledMethod } from "../../model-editor/modeled-method";
 import type { ModelEditorViewState } from "../../model-editor/shared/view-state";
 import type { ModelEvaluationRunState } from "../../model-editor/shared/model-evaluation-run-state";
 import { modelEvaluationRunIsRunning } from "../../model-editor/shared/model-evaluation-run-state";
 import { ModelEditorProgressRing } from "./ModelEditorProgressRing";
 import { LinkIconButton } from "../common/LinkIconButton";
+import { Link } from "../common/Link";
 
 export type Props = {
   viewState: ModelEditorViewState;
@@ -17,7 +18,7 @@ export type Props = {
   evaluationRun: ModelEvaluationRunState | undefined;
 };
 
-const RunLink = styled(VSCodeLink)`
+const RunLink = styled(Link)`
   display: flex;
   align-items: center;
 `;

extensions/ql-vscode/src/view/variant-analysis/FailureReasonAlert.tsx

@@ -1,8 +1,8 @@
 import type { ReactNode } from "react";
-import { VSCodeLink } from "@vscode/webview-ui-toolkit/react";
 import { Alert } from "../common";
 import { vscode } from "../vscode-api";
 import { VariantAnalysisFailureReason } from "../../variant-analysis/shared/variant-analysis";
+import { Link } from "../common/Link";
 
 type Props = {
   failureReason: VariantAnalysisFailureReason;
@@ -33,8 +33,8 @@ const getMessage = (failureReason: VariantAnalysisFailureReason): ReactNode => {
       return (
         <>
           The GitHub Actions workflow run has failed.{" "}
-          <VSCodeLink onClick={openLogs}>View actions logs</VSCodeLink> and try
-          running this query again.
+          <Link onClick={openLogs}>View actions logs</Link> and try running this
+          query again.
         </>
       );
     case VariantAnalysisFailureReason.InternalError: