Replace button from webview-ui-toolkit to react-elements

tuan-nguen · Tuan Nguen · commit c08b087838ad · 2025-03-25T10:22:26.000Z
diff --git a/extensions/ql-vscode/src/stories/common/Alert.stories.tsx b/extensions/ql-vscode/src/stories/common/Alert.stories.tsx
@@ -1,5 +1,6 @@
 import type { Meta, StoryFn } from "@storybook/react";
-import { VSCodeButton, VSCodeLink } from "@vscode/webview-ui-toolkit/react";
+import { VSCodeLink } from "@vscode/webview-ui-toolkit/react";
+import { VscodeButton } from "@vscode-elements/react-elements";
 
 import { VariantAnalysisContainer } from "../../view/variant-analysis/VariantAnalysisContainer";
 import { Alert } from "../../view/common";
@@ -84,8 +85,8 @@ ErrorWithButtons.args = {
     "Request to https://api.github.com/repos/octodemo/Hello-World/code-scanning/codeql/queries failed. Try running this query again.",
   actions: (
     <>
-      <VSCodeButton appearance="secondary">View actions logs</VSCodeButton>
-      <VSCodeButton>Retry</VSCodeButton>
+      <VscodeButton appearance="secondary">View actions logs</VscodeButton>
+      <VscodeButton>Retry</VscodeButton>
     </>
   ),
 };
diff --git a/extensions/ql-vscode/src/stories/model-editor/LibraryRow.stories.tsx b/extensions/ql-vscode/src/stories/model-editor/LibraryRow.stories.tsx
@@ -220,6 +220,7 @@ LibraryRow.args = {
     ],
   },
   modifiedSignatures: new Set(["org.sql2o.Sql2o#Sql2o(String)"]),
+  selectedSignatures: new Set(["org.sql2o.Sql2o#Sql2o(String)"]),
   viewState: createMockModelEditorViewState({
     showGenerateButton: true,
   }),
diff --git a/extensions/ql-vscode/src/view/compare-performance/RenamingInput.tsx b/extensions/ql-vscode/src/view/compare-performance/RenamingInput.tsx
@@ -1,9 +1,7 @@
 import type { ChangeEvent } from "react";
 import { styled } from "styled-components";
-import {
-  VSCodeButton,
-  VSCodeTextField,
-} from "@vscode/webview-ui-toolkit/react";
+import { VSCodeTextField } from "@vscode/webview-ui-toolkit/react";
+import { VscodeButton } from "@vscode-elements/react-elements";
 import { Codicon } from "../common";
 
 export class Renaming {
@@ -86,21 +84,21 @@ export function RenamingInput(props: RenamingInputProps) {
               setRenamings(newRenamings);
             }}
           ></Input>
-          <VSCodeButton
+          <VscodeButton
             onClick={() =>
               setRenamings(renamings.filter((_, i) => i !== index))
             }
           >
             <Codicon name="trash" />
-          </VSCodeButton>
+          </VscodeButton>
           <br />
         </Row>
       ))}
-      <VSCodeButton
+      <VscodeButton
         onClick={() => setRenamings([...renamings, new Renaming("", "")])}
       >
         Add renaming rule
-      </VSCodeButton>
+      </VscodeButton>
     </Details>
   );
 }
diff --git a/extensions/ql-vscode/src/view/method-modeling/MultipleModeledMethodsPanel.tsx b/extensions/ql-vscode/src/view/method-modeling/MultipleModeledMethodsPanel.tsx
@@ -7,14 +7,14 @@ import {
 } from "../../model-editor/shared/multiple-modeled-methods";
 import { styled } from "styled-components";
 import { MethodModelingInputs } from "./MethodModelingInputs";
-import { VSCodeButton } from "@vscode/webview-ui-toolkit/react";
 import { Codicon } from "../common";
 import { validateModeledMethods } from "../../model-editor/shared/validation";
 import { ModeledMethodAlert } from "./ModeledMethodAlert";
 import type { QueryLanguage } from "../../common/query-language";
 import { createEmptyModeledMethod } from "../../model-editor/modeled-method-empty";
 import { sendTelemetry } from "../common/telemetry";
 import type { ModelConfig } from "../../model-editor/languages";
+import { VscodeButton } from "@vscode-elements/react-elements";
 
 export type MultipleModeledMethodsPanelProps = {
   language: QueryLanguage;
@@ -168,20 +168,20 @@ export const MultipleModeledMethodsPanel = ({
       )}
       <Footer>
         <PaginationActions>
-          <VSCodeButton
+          <VscodeButton
             appearance="icon"
             aria-label="Previous modeling"
             onClick={handlePreviousClick}
             disabled={modeledMethods.length < 2 || selectedIndex === 0}
           >
             <Codicon name="chevron-left" />
-          </VSCodeButton>
+          </VscodeButton>
           {modeledMethods.length > 1 && (
             <div>
               {selectedIndex + 1}/{modeledMethods.length}
             </div>
           )}
-          <VSCodeButton
+          <VscodeButton
             appearance="icon"
             aria-label="Next modeling"
             onClick={handleNextClick}
@@ -191,25 +191,25 @@ export const MultipleModeledMethodsPanel = ({
             }
           >
             <Codicon name="chevron-right" />
-          </VSCodeButton>
+          </VscodeButton>
         </PaginationActions>
         <ModificationActions>
-          <VSCodeButton
+          <VscodeButton
             appearance="icon"
             aria-label="Delete modeling"
             onClick={handleRemoveClick}
             disabled={!canRemoveModeledMethod(modeledMethods)}
           >
             <Codicon name="trash" />
-          </VSCodeButton>
-          <VSCodeButton
+          </VscodeButton>
+          <VscodeButton
             appearance="icon"
             aria-label="Add modeling"
             onClick={handleAddClick}
             disabled={!canAddNewModeledMethod(modeledMethods)}
           >
             <Codicon name="add" />
-          </VSCodeButton>
+          </VscodeButton>
         </ModificationActions>
       </Footer>
     </Container>
diff --git a/extensions/ql-vscode/src/view/model-alerts/ModelAlertsActions.tsx b/extensions/ql-vscode/src/view/model-alerts/ModelAlertsActions.tsx
@@ -1,5 +1,5 @@
 import { styled } from "styled-components";
-import { VSCodeButton } from "@vscode/webview-ui-toolkit/react";
+import { VscodeButton } from "@vscode-elements/react-elements";
 import { VariantAnalysisStatus } from "../../variant-analysis/shared/variant-analysis";
 
 type ModelAlertsActionsProps = {
@@ -14,7 +14,7 @@ const Container = styled.div`
   gap: 1em;
 `;
 
-const Button = styled(VSCodeButton)`
+const Button = styled(VscodeButton)`
   white-space: nowrap;
 `;
 
diff --git a/extensions/ql-vscode/src/view/model-editor/LibraryRow.tsx b/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 { VSCodeDivider, VSCodeTag } 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 { VscodeButton } from "@vscode-elements/react-elements";
 
 const LibraryContainer = styled.div`
   background-color: var(--vscode-peekViewResult-background);
@@ -173,16 +170,16 @@ export const LibraryRow = ({
         </NameContainer>
         {viewState.showGenerateButton &&
           viewState.mode === Mode.Application && (
-            <VSCodeButton appearance="icon" onClick={handleModelFromSource}>
+            <VscodeButton appearance="icon" onClick={handleModelFromSource}>
               <Codicon name="code" label="Model from source" />
               &nbsp;Model from source
-            </VSCodeButton>
+            </VscodeButton>
           )}
         {viewState.mode === Mode.Application && (
-          <VSCodeButton appearance="icon" onClick={handleModelDependency}>
+          <VscodeButton appearance="icon" onClick={handleModelDependency}>
             <Codicon name="references" label="Model dependency" />
             &nbsp;Model dependency
-          </VSCodeButton>
+          </VscodeButton>
         )}
       </TitleContainer>
       {isExpanded && (
@@ -203,9 +200,9 @@ export const LibraryRow = ({
           />
           <SectionDivider />
           <ButtonsContainer>
-            <VSCodeButton onClick={handleSave} disabled={!hasUnsavedChanges}>
+            <VscodeButton onClick={handleSave} disabled={!hasUnsavedChanges}>
               {selectedSignatures.size === 0 ? "Save" : "Save selected"}
-            </VSCodeButton>
+            </VscodeButton>
           </ButtonsContainer>
         </>
       )}
diff --git a/extensions/ql-vscode/src/view/model-editor/MethodRow.tsx b/extensions/ql-vscode/src/view/model-editor/MethodRow.tsx
@@ -1,8 +1,5 @@
-import {
-  VSCodeBadge,
-  VSCodeButton,
-  VSCodeLink,
-} from "@vscode/webview-ui-toolkit/react";
+import { VSCodeBadge, VSCodeLink } from "@vscode/webview-ui-toolkit/react";
+import { VscodeButton } from "@vscode-elements/react-elements";
 import {
   forwardRef,
   useCallback,
@@ -63,7 +60,7 @@ const ViewLink = styled(VSCodeLink)`
   white-space: nowrap;
 `;
 
-const CodiconRow = styled(VSCodeButton)`
+const CodiconRow = styled(VscodeButton)`
   min-height: calc(var(--input-height) * 1px);
   align-items: center;
 `;
diff --git a/extensions/ql-vscode/src/view/model-editor/ModelEditor.tsx b/extensions/ql-vscode/src/view/model-editor/ModelEditor.tsx
@@ -1,10 +1,7 @@
 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 { VSCodeCheckbox, VSCodeTag } from "@vscode/webview-ui-toolkit/react";
+import { VscodeButton } from "@vscode-elements/react-elements";
 import { styled } from "styled-components";
 import type { Method } from "../../model-editor/method";
 import type { ModeledMethod } from "../../model-editor/modeled-method";
@@ -334,27 +331,27 @@ export function ModelEditor({
           </HeaderRow>
           <HeaderRow>
             <ButtonsContainer>
-              <VSCodeButton
+              <VscodeButton
                 onClick={onSaveAllClick}
                 disabled={modifiedSignatures.size === 0}
               >
                 {selectedSignatures.size === 0 ? "Save all" : "Save selected"}
-              </VSCodeButton>
-              <VSCodeButton
+              </VscodeButton>
+              <VscodeButton
                 appearance="secondary"
                 onClick={onDeselectAllClick}
                 disabled={selectedSignatures.size === 0}
               >
                 Deselect all
-              </VSCodeButton>
-              <VSCodeButton appearance="secondary" onClick={onRefreshClick}>
+              </VscodeButton>
+              <VscodeButton appearance="secondary" onClick={onRefreshClick}>
                 Refresh
-              </VSCodeButton>
+              </VscodeButton>
               {viewState.showGenerateButton &&
                 viewState.mode === Mode.Framework && (
-                  <VSCodeButton onClick={onGenerateFromSourceClick}>
+                  <VscodeButton onClick={onGenerateFromSourceClick}>
                     Generate
-                  </VSCodeButton>
+                  </VscodeButton>
                 )}
               <ModelEvaluation
                 viewState={viewState}
diff --git a/extensions/ql-vscode/src/view/model-editor/ModelEvaluation.tsx b/extensions/ql-vscode/src/view/model-editor/ModelEvaluation.tsx
@@ -1,5 +1,6 @@
 import { styled } from "styled-components";
-import { VSCodeButton, VSCodeLink } from "@vscode/webview-ui-toolkit/react";
+import { VSCodeLink } from "@vscode/webview-ui-toolkit/react";
+import { VscodeButton } from "@vscode-elements/react-elements";
 import type { ModeledMethod } from "../../model-editor/modeled-method";
 import type { ModelEditorViewState } from "../../model-editor/shared/view-state";
 import type { ModelEvaluationRunState } from "../../model-editor/shared/model-evaluation-run-state";
@@ -52,19 +53,19 @@ export const ModelEvaluation = ({
   return (
     <>
       {shouldShowEvaluateButton && (
-        <VSCodeButton
+        <VscodeButton
           onClick={onStartEvaluation}
           appearance="secondary"
           disabled={!customModelsExist || unsavedChanges}
         >
           Evaluate
-        </VSCodeButton>
+        </VscodeButton>
       )}
       {shouldShowStopButton && (
-        <VSCodeButton onClick={onStopEvaluation} appearance="secondary">
+        <VscodeButton onClick={onStopEvaluation} appearance="secondary">
           <ModelEditorProgressRing />
           Stop evaluation
-        </VSCodeButton>
+        </VscodeButton>
       )}
       {shouldShowEvaluationRunLink && (
         <RunLink>
diff --git a/extensions/ql-vscode/src/view/variant-analysis/VariantAnalysisActions.tsx b/extensions/ql-vscode/src/view/variant-analysis/VariantAnalysisActions.tsx
@@ -1,5 +1,5 @@
 import { styled } from "styled-components";
-import { VSCodeButton } from "@vscode/webview-ui-toolkit/react";
+import { VscodeButton } from "@vscode-elements/react-elements";
 import { VariantAnalysisStatus } from "../../variant-analysis/shared/variant-analysis";
 
 export type VariantAnalysisActionsProps = {
@@ -24,7 +24,7 @@ const Container = styled.div`
   gap: 1em;
 `;
 
-const Button = styled(VSCodeButton)`
+const Button = styled(VscodeButton)`
   white-space: nowrap;
 `;
 
