Migrate uses of <VSCodeBadge>

Summary:
Use <Badge> instead. All the uses of this seem very straightforward, nothing tricky here.

The coloring debug perf was applied with css, let's use stylex instead.

Reviewed By: quark-zju

Differential Revision: D54663801

fbshipit-source-id: aca5204bf1367f7f9e81d46cb90ab3778a25bbec

addons/isl/src/CommitInfoView/CommitInfoView.tsx

@@ -31,6 +31,7 @@ import {
   latestCommitMessageFields,
 } from '../codeReview/CodeReviewInfo';
 import {submitAsDraft, SubmitAsDraftCheckbox} from '../codeReview/DraftCheckbox';
+import {Badge} from '../components/Badge';
 import {FoldButton, useRunFoldPreview} from '../fold';
 import {t, T} from '../i18n';
 import {readAtom, writeAtom} from '../jotaiUtils';
@@ -73,7 +74,6 @@ import {
 import {FillCommitMessage} from './FillCommitMessage';
 import {CommitTitleByline, getTopmostEditedField, Section, SmallCapsTitle} from './utils';
 import {
-  VSCodeBadge,
   VSCodeButton,
   VSCodeDivider,
   VSCodeLink,
@@ -299,7 +299,7 @@ export function CommitInfoDetails({commit}: {commit: CommitInfo}) {
           <Section data-testid="changes-to-amend">
             <SmallCapsTitle>
               {isCommitMode ? <T>Changes to Commit</T> : <T>Changes to Amend</T>}
-              <VSCodeBadge>{uncommittedChanges.length}</VSCodeBadge>
+              <Badge>{uncommittedChanges.length}</Badge>
             </SmallCapsTitle>
             {uncommittedChanges.length === 0 ? (
               <Subtle>
@@ -314,7 +314,7 @@ export function CommitInfoDetails({commit}: {commit: CommitInfo}) {
           <Section data-testid="committed-changes">
             <SmallCapsTitle>
               <T>Files Changed</T>
-              <VSCodeBadge>{commit.totalFileCount}</VSCodeBadge>
+              <Badge>{commit.totalFileCount}</Badge>
             </SmallCapsTitle>
             <div className="changed-file-list">
               <div className="button-row">

addons/isl/src/CwdSelector.tsx

@@ -13,13 +13,13 @@ import {useCommandEvent} from './ISLShortcuts';
 import {Kbd} from './Kbd';
 import {Tooltip} from './Tooltip';
 import {codeReviewProvider} from './codeReview/CodeReviewInfo';
+import {Badge} from './components/Badge';
 import {T} from './i18n';
 import {lazyAtom, writeAtom} from './jotaiUtils';
 import {serverCwd} from './repositoryData';
 import {repositoryInfo} from './serverAPIState';
 import {registerCleanup, registerDisposable} from './utils';
 import {
-  VSCodeBadge,
   VSCodeButton,
   VSCodeDivider,
   VSCodeRadio,
@@ -97,7 +97,7 @@ function CwdDetails({dismiss}: {dismiss: () => unknown}) {
       {provider != null ? (
         <DropdownField title={<T>Code Review Provider</T>}>
           <span>
-            <VSCodeBadge>{provider?.name}</VSCodeBadge> <provider.RepoInfo />
+            <Badge>{provider?.name}</Badge> <provider.RepoInfo />
           </span>
         </DropdownField>
       ) : null}

addons/isl/src/UncommittedChanges.tsx

@@ -37,6 +37,7 @@ import {useGeneratedFileStatuses} from './GeneratedFile';
 import {Internal} from './Internal';
 import {DOCUMENTATION_DELAY, Tooltip} from './Tooltip';
 import {latestCommitMessageFields} from './codeReview/CodeReviewInfo';
+import {Badge} from './components/Badge';
 import {islDrawerState} from './drawerState';
 import {T, t} from './i18n';
 import {localStorageBackedAtom, readAtom, writeAtom} from './jotaiUtils';
@@ -64,7 +65,7 @@ import {
   useRunOperation,
 } from './serverAPIState';
 import {GeneratedStatus} from './types';
-import {VSCodeBadge, VSCodeButton, VSCodeTextField} from '@vscode/webview-ui-toolkit/react';
+import {VSCodeButton, VSCodeTextField} from '@vscode/webview-ui-toolkit/react';
 import {useAtom, useAtomValue} from 'jotai';
 import React, {useCallback, useMemo, useEffect, useRef, useState} from 'react';
 import {ComparisonType} from 'shared/Comparison';
@@ -376,7 +377,7 @@ function LinearFileList(props: {
         title={
           <T
             replace={{
-              $count: <VSCodeBadge>{group.length}</VSCodeBadge>,
+              $count: <Badge>{group.length}</Badge>,
             }}>
             {status === GeneratedStatus.PartiallyGenerated
               ? 'Partially Generated Files $count'

addons/isl/src/__mocks__/@vscode/webview-ui-toolkit/react.tsx

@@ -10,7 +10,6 @@ import type {
   VSCodeCheckbox as VSCodeCheckboxType,
   VSCodeLink as VSCodeLinkType,
   VSCodeDivider as VSCodeDividerType,
-  VSCodeBadge as VSCodeBadgeType,
   VSCodeRadio as VSCodeRadioType,
   VSCodeRadioGroup as VSCodeRadioGroupType,
 } from '@vscode/webview-ui-toolkit/react';
@@ -22,7 +21,6 @@ import React, {useEffect, useRef, forwardRef} from 'react';
 // We need to provide mock verison of these components for now
 
 export const VSCodeLink = (p: React.PropsWithChildren<typeof VSCodeLinkType>) => <a {...p} />;
-export const VSCodeBadge = (p: React.PropsWithChildren<typeof VSCodeBadgeType>) => <div {...p} />;
 export const VSCodeButton = forwardRef(
   (
     p: React.PropsWithChildren<typeof VSCodeButtonType>,

addons/isl/src/debug/DebugToolsMenu.css

@@ -20,17 +20,3 @@
   gap: var(--pad);
   align-items: center;
 }
-
-.fetch-duration-slow vscode-badge::part(control) {
-  color: var(--signal-fg);
-  background-color: var(--signal-bad-bg);
-}
-.fetch-duration-ok vscode-badge::part(control) {
-  color: var(--signal-fg);
-  background-color: var(--scm-modified-foreground);
-  background-color: var(--signal-medium-bg);
-}
-.fetch-duration-fast vscode-badge::part(control) {
-  color: var(--signal-fg);
-  background-color: var(--signal-good-bg);
-}

addons/isl/src/debug/DebugToolsMenu.tsx

@@ -18,6 +18,7 @@ import messageBus from '../MessageBus';
 import {Subtle} from '../Subtle';
 import {Tooltip} from '../Tooltip';
 import {enableReactTools, enableReduxTools} from '../atoms/debugToolAtoms';
+import {Badge} from '../components/Badge';
 import {DagCommitInfo} from '../dag/dagCommitInfo';
 import {useHeartbeat} from '../heartbeat';
 import {t, T} from '../i18n';
@@ -34,10 +35,12 @@ import {
   useRunOperation,
 } from '../serverAPIState';
 import {useShowToast} from '../toast';
+import {colors} from '../tokens.stylex';
 import {isDev} from '../utils';
 import {ComponentExplorerButton} from './ComponentExplorer';
 import {readInterestingAtoms, serializeAtomsState} from './getInterestingAtoms';
-import {VSCodeBadge, VSCodeButton, VSCodeCheckbox} from '@vscode/webview-ui-toolkit/react';
+import * as stylex from '@stylexjs/stylex';
+import {VSCodeButton, VSCodeCheckbox} from '@vscode/webview-ui-toolkit/react';
 import {atom, useAtom, useAtomValue} from 'jotai';
 import {useState, useCallback, useEffect} from 'react';
 
@@ -215,17 +218,38 @@ function DebugPerfInfo() {
   );
 }
 
+const styles = stylex.create({
+  slow: {
+    color: colors.signalFg,
+    backgroundColor: colors.signalBadBg,
+  },
+  ok: {
+    color: colors.signalFg,
+    backgroundColor: colors.signalMediumBg,
+  },
+  fast: {
+    color: colors.signalFg,
+    backgroundColor: colors.signalGoodBg,
+  },
+});
+
 function FetchDurationInfo(
   props: {name: ReactNode} & ExclusiveOr<{start?: number; end?: number}, {duration: number}>,
 ) {
   const {name} = props;
   const {end, start, duration} = props;
   const deltaMs = duration != null ? duration : end == null || start == null ? null : end - start;
-  const assessment =
-    deltaMs == null ? 'none' : deltaMs < 1000 ? 'fast' : deltaMs < 3000 ? 'ok' : 'slow';
+  const xstyle =
+    deltaMs == null
+      ? undefined
+      : deltaMs < 1000
+      ? styles.fast
+      : deltaMs < 3000
+      ? styles.ok
+      : styles.slow;
   return (
-    <div className={`fetch-duration-info fetch-duration-${assessment}`}>
-      {name} <VSCodeBadge>{deltaMs == null ? 'N/A' : `${deltaMs}ms`}</VSCodeBadge>
+    <div className={`fetch-duration-info`}>
+      {name} <Badge xstyle={xstyle}>{deltaMs == null ? 'N/A' : `${deltaMs}ms`}</Badge>
       {end == null ? null : (
         <Subtle>
           <Tooltip title={new Date(end).toLocaleString()} placement="right">