Replace VsCodeLink with Link

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/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/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:

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

@@ -1,10 +1,9 @@
-import { VSCodeLink } from "@vscode/webview-ui-toolkit/react";
-
 import type { CellValue } from "../../common/raw-result-types";
 import { sendTelemetry } from "../common/telemetry";
 import { convertNonPrintableChars } from "../../common/text-utils";
 import { tryGetRemoteLocation } from "../../common/bqrs-utils";
 import { RawNumberValue } from "../common/RawNumberValue";
+import { Link } from "../common/Link";
 
 type CellProps = {
   value: CellValue;
@@ -35,9 +34,9 @@ export const RawResultCell = ({
       const safeLabel = convertNonPrintableChars(value.value.label);
       if (url) {
         return (
-          <VSCodeLink onClick={sendRawResultsLinkTelemetry} href={url}>
+          <Link onClick={sendRawResultsLinkTelemetry} href={url}>
             {safeLabel}
-          </VSCodeLink>
+          </Link>
         );
       } else {
         return <span>{safeLabel}</span>;

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

@@ -1,7 +1,7 @@
 import { styled } from "styled-components";
-import { VSCodeLink } from "@vscode/webview-ui-toolkit/react";
 import { formatDate } from "../../common/date";
 import { VariantAnalysisStatus } from "../../variant-analysis/shared/variant-analysis";
+import { Link } from "../common/Link";
 
 export type VariantAnalysisStatusStatsProps = {
   variantAnalysisStatus: VariantAnalysisStatus;
@@ -37,7 +37,7 @@ export const VariantAnalysisStatusStats = ({
         <span>{completedAt !== undefined ? formatDate(completedAt) : "-"}</span>
       )}
       {onViewLogsClick && (
-        <VSCodeLink onClick={onViewLogsClick}>View actions logs</VSCodeLink>
+        <Link onClick={onViewLogsClick}>View actions logs</Link>
       )}
     </Container>
   );