Use custom Badge component

Author: tuan-nguen

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

@@ -1,7 +1,6 @@
 import { styled } from "styled-components";
 import type { ModelAlerts } from "../../model-editor/model-alerts/model-alerts";
 import { Codicon } from "../common";
-import { VscodeBadge } from "@vscode-elements/react-elements";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { formatDecimal } from "../../common/number";
 import AnalysisAlertResult from "../variant-analysis/AnalysisAlertResult";
@@ -11,6 +10,7 @@ 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";
+import { Badge } from "../common/Badge";
 
 // This will ensure that these icons have a className which we can use in the TitleContainer
 const ExpandCollapseCodicon = styled(Codicon)``;
@@ -103,7 +103,7 @@ export const ModelAlertsResults = ({
         {!isExpanded && (
           <ExpandCollapseCodicon name="chevron-right" label="Expand" />
         )}
-        <VscodeBadge>{formatDecimal(modelAlerts.alerts.length)}</VscodeBadge>
+        <Badge>{formatDecimal(modelAlerts.alerts.length)}</Badge>
         <MethodName {...modelAlerts.model}></MethodName>
         <ModelTypeText>{modelAlerts.model.type}</ModelTypeText>
         <ViewLink

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

@@ -1,4 +1,4 @@
-import { VscodeBadge, VscodeButton } from "@vscode-elements/react-elements";
+import { VscodeButton } from "@vscode-elements/react-elements";
 import {
   forwardRef,
   useCallback,
@@ -35,6 +35,7 @@ import { ModelOutputSuggestBox } from "./ModelOutputSuggestBox";
 import { getModelsAsDataLanguage } from "../../model-editor/languages";
 import { ModelAlertsIndicator } from "./ModelAlertsIndicator";
 import type { ModelEvaluationRunState } from "../../model-editor/shared/model-evaluation-run-state";
+import { Badge } from "../common/Badge";
 
 const ApiOrMethodRow = styled.div`
   min-height: calc(var(--input-height) * 1px);
@@ -52,7 +53,7 @@ const ModelButtonsContainer = styled.div`
   gap: 1em;
 `;
 
-const UsagesButton = styled(VscodeBadge)`
+const UsagesButton = styled(Badge)`
   cursor: pointer;
 `;
 

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

@@ -2,10 +2,10 @@ import { styled } from "styled-components";
 import type { ModeledMethod } from "../../model-editor/modeled-method";
 import type { ModelEvaluationRunState } from "../../model-editor/shared/model-evaluation-run-state";
 import type { ModelEditorViewState } from "../../model-editor/shared/view-state";
-import { VscodeBadge } from "@vscode-elements/react-elements";
 import { vscode } from "../vscode-api";
+import { Badge } from "../common/Badge";
 
-const ModelAlertsButton = styled(VscodeBadge)`
+const ModelAlertsButton = styled(Badge)`
   cursor: pointer;
 `;
 

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

@@ -13,7 +13,7 @@ import { SarifLocation } from "./locations/SarifLocation";
 import { SarifMessageWithLocations } from "./locations/SarifMessageWithLocations";
 import { AlertTablePathRow } from "./AlertTablePathRow";
 import type { UserSettings } from "../../common/interface-types";
-import { VscodeBadge } from "@vscode-elements/react-elements";
+import { Badge } from "../common/Badge";
 
 export interface Props {
   result: Result;
@@ -109,7 +109,7 @@ export function AlertTableResultRow(props: Props) {
             />
             <td className="vscode-codeql__icon-cell">{listUnordered}</td>
             <td className="vscode-codeql__icon-cell">
-              <VscodeBadge title="Shortest path">{shortestPath}</VscodeBadge>
+              <Badge title="Shortest path">{shortestPath}</Badge>
             </td>
             <td colSpan={3}>{msg}</td>
           </>

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

@@ -1,7 +1,7 @@
 import type { ChangeEvent } from "react";
 import { useCallback, useEffect, useState } from "react";
 import { styled } from "styled-components";
-import { VscodeBadge, VscodeCheckbox } from "@vscode-elements/react-elements";
+import { VscodeCheckbox } from "@vscode-elements/react-elements";
 import type { VariantAnalysisScannedRepositoryState } from "../../variant-analysis/shared/variant-analysis";
 import {
   isCompletedAnalysisRepoStatus,
@@ -27,6 +27,7 @@ import StarCount from "../common/StarCount";
 import { useTelemetryOnChange } from "../common/telemetry";
 import { DeterminateProgressRing } from "../common/DeterminateProgressRing";
 import { ResultFormat } from "../../variant-analysis/shared/variant-analysis-result-format";
+import { Badge } from "../common/Badge";
 
 // This will ensure that these icons have a className which we can use in the TitleContainer
 const ExpandCollapseCodicon = styled(Codicon)``;
@@ -269,9 +270,9 @@ export const RepoRow = ({
           <ExpandCollapseCodicon name="chevron-right" label="Expand" />
         )}
         {resultsLoading && <LoadingIcon label="Results are loading" />}
-        <VscodeBadge>
+        <Badge>
           {resultCount === undefined ? "-" : formatDecimal(resultCount)}
-        </VscodeBadge>
+        </Badge>
         <span>{repository.fullName}</span>
         <Visibility isPrivate={repository.private} />
         <span>