Replace VSCodeBadge

Author: tuan-nguen

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 } from "@vscode/webview-ui-toolkit/react";
+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";
@@ -103,7 +103,7 @@ export const ModelAlertsResults = ({
         {!isExpanded && (
           <ExpandCollapseCodicon name="chevron-right" label="Expand" />
         )}
-        <VSCodeBadge>{formatDecimal(modelAlerts.alerts.length)}</VSCodeBadge>
+        <VscodeBadge>{formatDecimal(modelAlerts.alerts.length)}</VscodeBadge>
         <MethodName {...modelAlerts.model}></MethodName>
         <ModelTypeText>{modelAlerts.model.type}</ModelTypeText>
         <ViewLink

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

@@ -1,5 +1,4 @@
-import { VSCodeBadge } from "@vscode/webview-ui-toolkit/react";
-import { VscodeButton } from "@vscode-elements/react-elements";
+import { VscodeBadge, VscodeButton } from "@vscode-elements/react-elements";
 import {
   forwardRef,
   useCallback,
@@ -53,7 +52,7 @@ const ModelButtonsContainer = styled.div`
   gap: 1em;
 `;
 
-const UsagesButton = styled(VSCodeBadge)`
+const UsagesButton = styled(VscodeBadge)`
   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/webview-ui-toolkit/react";
+import { VscodeBadge } from "@vscode-elements/react-elements";
 import { vscode } from "../vscode-api";
 
-const ModelAlertsButton = styled(VSCodeBadge)`
+const ModelAlertsButton = styled(VscodeBadge)`
   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/webview-ui-toolkit/react";
+import { VscodeBadge } from "@vscode-elements/react-elements";
 
 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>
+              <VscodeBadge title="Shortest path">{shortestPath}</VscodeBadge>
             </td>
             <td colSpan={3}>{msg}</td>
           </>

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

@@ -1,7 +1,8 @@
 import type { ChangeEvent } from "react";
 import { useCallback, useEffect, useState } from "react";
 import { styled } from "styled-components";
-import { VSCodeBadge, VSCodeCheckbox } from "@vscode/webview-ui-toolkit/react";
+import { VSCodeCheckbox } from "@vscode/webview-ui-toolkit/react";
+import { VscodeBadge } from "@vscode-elements/react-elements";
 import type { VariantAnalysisScannedRepositoryState } from "../../variant-analysis/shared/variant-analysis";
 import {
   isCompletedAnalysisRepoStatus,
@@ -269,9 +270,9 @@ export const RepoRow = ({
           <ExpandCollapseCodicon name="chevron-right" label="Expand" />
         )}
         {resultsLoading && <LoadingIcon label="Results are loading" />}
-        <VSCodeBadge>
+        <VscodeBadge>
           {resultCount === undefined ? "-" : formatDecimal(resultCount)}
-        </VSCodeBadge>
+        </VscodeBadge>
         <span>{repository.fullName}</span>
         <Visibility isPrivate={repository.private} />
         <span>

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

@@ -2,11 +2,11 @@ import type { Dispatch, SetStateAction } from "react";
 import { useState } from "react";
 import { styled } from "styled-components";
 import {
-  VSCodeBadge,
   VSCodePanels,
   VSCodePanelTab,
   VSCodePanelView,
 } from "@vscode/webview-ui-toolkit/react";
+import { VscodeBadge } from "@vscode-elements/react-elements";
 import { formatDecimal } from "../../common/number";
 import type {
   VariantAnalysis,
@@ -158,25 +158,25 @@ export const VariantAnalysisOutcomePanels = ({
         {scannedReposCount > 0 && (
           <Tab>
             Analyzed
-            <VSCodeBadge appearance="secondary">
+            <VscodeBadge appearance="secondary">
               {formatDecimal(variantAnalysis.scannedRepos?.length ?? 0)}
-            </VSCodeBadge>
+            </VscodeBadge>
           </Tab>
         )}
         {notFoundRepos?.repositoryCount && (
           <Tab>
             No access
-            <VSCodeBadge appearance="secondary">
+            <VscodeBadge appearance="secondary">
               {formatDecimal(notFoundRepos.repositoryCount)}
-            </VSCodeBadge>
+            </VscodeBadge>
           </Tab>
         )}
         {noCodeqlDbRepos?.repositoryCount && (
           <Tab>
             No database
-            <VSCodeBadge appearance="secondary">
+            <VscodeBadge appearance="secondary">
               {formatDecimal(noCodeqlDbRepos.repositoryCount)}
-            </VSCodeBadge>
+            </VscodeBadge>
           </Tab>
         )}
         {scannedReposCount > 0 && (