Merge pull request #3983 from github/tuan-nguen/remove-vscode-tags

Remove the use of `VSCodeTag`

Author: tuan-nguen

Diff for: extensions/ql-vscode/src/view/common/CodePaths/ThreadPath.tsx

@@ -1,5 +1,5 @@
 import { styled } from "styled-components";
-import { VSCodeTag } from "@vscode/webview-ui-toolkit/react";
+import { Tag } from "../Tag";
 
 import type {
   AnalysisMessage,
@@ -56,12 +56,12 @@ export const ThreadPath = ({
       </TitleContainer>
       {isSource && (
         <TagContainer>
-          <VSCodeTag>Source</VSCodeTag>
+          <Tag>Source</Tag>
         </TagContainer>
       )}
       {isSink && (
         <TagContainer>
-          <VSCodeTag>Sink</VSCodeTag>
+          <Tag>Sink</Tag>
         </TagContainer>
       )}
     </HeaderContainer>

Diff for: extensions/ql-vscode/src/view/common/Tag.tsx

@@ -0,0 +1,14 @@
+import { styled } from "styled-components";
+
+export const Tag = styled.span`
+  background-color: var(--vscode-badge-background);
+  border: 1px solid var(--vscode-button-border, transparent);
+  border-radius: 2px;
+  color: var(--vscode-badge-foreground);
+  padding: 2px 4px;
+  text-transform: uppercase;
+  box-sizing: border-box;
+  font-family: var(--vscode-font-family);
+  font-size: 11px;
+  line-height: 16px;
+`;

Diff for: extensions/ql-vscode/src/view/method-modeling/MethodModeling.tsx

@@ -4,7 +4,7 @@ import { ModelingStatusIndicator } from "../model-editor/ModelingStatusIndicator
 import type { Method } from "../../model-editor/method";
 import { MethodName } from "../model-editor/MethodName";
 import type { ModeledMethod } from "../../model-editor/modeled-method";
-import { VSCodeTag } from "@vscode/webview-ui-toolkit/react";
+import { Tag } from "../common/Tag";
 import { ReviewInEditorButton } from "./ReviewInEditorButton";
 import { MultipleModeledMethodsPanel } from "./MultipleModeledMethodsPanel";
 import type { QueryLanguage } from "../../common/query-language";
@@ -39,14 +39,12 @@ const DependencyContainer = styled.div`
   margin-bottom: 0.8rem;
 `;
 
-const StyledVSCodeTag = styled(VSCodeTag)<{ $visible: boolean }>`
+const StyledTag = styled(Tag)<{ $visible: boolean }>`
   visibility: ${(props) => (props.$visible ? "visible" : "hidden")};
 `;
 
 const UnsavedTag = ({ modelingStatus }: { modelingStatus: ModelingStatus }) => (
-  <StyledVSCodeTag $visible={modelingStatus === "unsaved"}>
-    Unsaved
-  </StyledVSCodeTag>
+  <StyledTag $visible={modelingStatus === "unsaved"}>Unsaved</StyledTag>
 );
 
 export type MethodModelingProps = {

Diff for: extensions/ql-vscode/src/view/model-editor/LibraryRow.tsx

@@ -7,14 +7,11 @@ import { calculateModeledPercentage } from "../../model-editor/shared/modeled-pe
 import { percentFormatter } from "./formatters";
 import { Codicon } from "../common";
 import { Mode } from "../../model-editor/shared/mode";
-import {
-  VSCodeButton,
-  VSCodeDivider,
-  VSCodeTag,
-} from "@vscode/webview-ui-toolkit/react";
+import { VSCodeButton, VSCodeDivider } from "@vscode/webview-ui-toolkit/react";
 import type { ModelEditorViewState } from "../../model-editor/shared/view-state";
 import type { AccessPathSuggestionOptions } from "../../model-editor/suggestions";
 import type { ModelEvaluationRunState } from "../../model-editor/shared/model-evaluation-run-state";
+import { Tag } from "../common/Tag";
 
 const LibraryContainer = styled.div`
   background-color: var(--vscode-peekViewResult-background);
@@ -169,7 +166,7 @@ export const LibraryRow = ({
           <ModeledPercentage>
             {percentFormatter.format(modeledPercentage / 100)} modeled
           </ModeledPercentage>
-          {hasUnsavedChanges ? <VSCodeTag>UNSAVED</VSCodeTag> : null}
+          {hasUnsavedChanges ? <Tag>UNSAVED</Tag> : null}
         </NameContainer>
         {viewState.showGenerateButton &&
           viewState.mode === Mode.Application && (

Diff for: extensions/ql-vscode/src/view/model-editor/MethodClassifications.tsx

@@ -1,16 +1,16 @@
 import { useMemo } from "react";
 import type { Method } from "../../model-editor/method";
 import { CallClassification } from "../../model-editor/method";
-import { VSCodeTag } from "@vscode/webview-ui-toolkit/react";
 import { styled } from "styled-components";
+import { Tag } from "../common/Tag";
 
 const ClassificationsContainer = styled.div`
   display: inline-flex;
   flex-direction: row;
   gap: 0.5rem;
 `;
 
-const ClassificationTag = styled(VSCodeTag)`
+const ClassificationTag = styled(Tag)`
   font-size: 0.75em;
   white-space: nowrap;
 `;

Diff for: extensions/ql-vscode/src/view/model-editor/ModelEditor.tsx

@@ -1,10 +1,6 @@
 import { useCallback, useEffect, useMemo, useState } from "react";
 import type { ToModelEditorMessage } from "../../common/interface-types";
-import {
-  VSCodeButton,
-  VSCodeCheckbox,
-  VSCodeTag,
-} from "@vscode/webview-ui-toolkit/react";
+import { VSCodeButton, VSCodeCheckbox } from "@vscode/webview-ui-toolkit/react";
 import { styled } from "styled-components";
 import type { Method } from "../../model-editor/method";
 import type { ModeledMethod } from "../../model-editor/modeled-method";
@@ -22,6 +18,7 @@ import type { AccessPathSuggestionOptions } from "../../model-editor/suggestions
 import type { ModelEvaluationRunState } from "../../model-editor/shared/model-evaluation-run-state";
 import { ModelEvaluation } from "./ModelEvaluation";
 import { useMessageFromExtension } from "../common/useMessageFromExtension";
+import { Tag } from "../common/Tag";
 
 const LoadingContainer = styled.div`
   text-align: center;
@@ -305,9 +302,9 @@ export function ModelEditor({
             <ViewTitle>
               {getLanguageDisplayName(viewState.extensionPack.language)}
             </ViewTitle>
-            <VSCodeTag>
+            <Tag>
               {percentFormatter.format(modeledPercentage / 100)} modeled
-            </VSCodeTag>
+            </Tag>
           </HeaderRow>
           <HeaderRow>
             <>{viewState.extensionPack.name}</>