Replace @vscode/webview-ui-toolkit (#15440)

Closes #15264 Addresses #15143 Closes #13771 ###### Microsoft Reviewers: [Open in CodeFlow](https://microsoft.github.io/open-pr/?codeflow=https://github.com/Azure/bicep/pull/15440)
Azure · Oct 30, 2024 · 6bf7499 · 6bf7499
1 parent 0e7940b
commit 6bf7499
Show file tree

Hide file tree

Showing 18 changed files with 532 additions and 548 deletions.
diff --git a/src/vscode-bicep/package-lock.json b/src/vscode-bicep/package-lock.json
diff --git a/src/vscode-bicep/package.json b/src/vscode-bicep/package.json
@@ -811,7 +811,8 @@
     "@microsoft/vscode-azext-azureutils": "^3.1.1",
     "@microsoft/vscode-azext-utils": "^2.5.10",
     "@vscode-bicep-ui/components": "file:../vscode-bicep-ui/packages/components",
-    "@vscode/webview-ui-toolkit": "^1.4.0",
+    "@vscode-elements/react-elements": "^0.5.0",
+    "@vscode/codicons": "^0.0.36",
     "cytoscape": "^3.30.2",
     "cytoscape-elk": "^2.2.0",
     "fs-extra": "^11.2.0",

diff --git a/src/vscode-bicep/src/panes/deploy/app/components/App.tsx b/src/vscode-bicep/src/panes/deploy/app/components/App.tsx
@@ -1,6 +1,6 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
-import { VSCodeButton, VSCodeProgressRing } from "@vscode/webview-ui-toolkit/react";
+import { VscodeProgressRing, VscodeButton, VscodeIcon } from "@vscode-elements/react-elements";
 import { FC, useState } from "react";
 
 import "./index.css";
@@ -16,7 +16,6 @@ import { FormSection } from "./sections/FormSection";
 import { ParametersInputView } from "./sections/ParametersInputView";
 import { ResultsView } from "./sections/ResultsView";
 import { WhatIfChangesView } from "./sections/WhatIfChangesView";
-import { Codicon } from "@vscode-bicep-ui/components";
 
 export const App: FC = () => {
   const [errorMessage, setErrorMessage] = useState<string>();
@@ -29,6 +28,7 @@ export const App: FC = () => {
     parametersMetadata: messages.paramsMetadata,
     setErrorMessage,
   });
+  const isRunning = azure.deployState.status === "running" || localDeployRunning;
 
   function setParamValue(key: string, data: ParamData) {
     const parameters = Object.assign({}, messages.paramsMetadata.parameters, { [key]: data });
@@ -39,7 +39,7 @@ export const App: FC = () => {
     messages.setParamsMetadata({ ...messages.paramsMetadata, sourceFilePath: undefined });
   }
 
-  const azureDisabled = !messages.scope || !messages.templateMetadata || azure.running;
+  const azureDisabled = !messages.scope || !messages.templateMetadata || isRunning;
 
   async function handleDeployClick() {
     messages.publishTelemetry("deployPane/deploy", {});
@@ -62,7 +62,7 @@ export const App: FC = () => {
   }
 
   if (!messages.messageState.initialized) {
-    return <VSCodeProgressRing />;
+    return <VscodeProgressRing />;
   }
 
   const showLocalDeployControls =
@@ -76,7 +76,7 @@ export const App: FC = () => {
         <>
           <FormSection title="Experimental Warning">
             <div className="alert-error">
-              <Codicon name="beaker" size={14} />
+              <VscodeIcon name="beaker" size={14} />
               The Bicep Deployment Pane is an experimental feature.
               <br />
               Documentation is available{" "}
@@ -89,7 +89,7 @@ export const App: FC = () => {
           <ParametersInputView
             parameters={messages.paramsMetadata}
             template={messages.templateMetadata}
-            disabled={azure.running}
+            disabled={isRunning}
             onValueChange={setParamValue}
             onEnableEditing={handleEnableParamEditing}
             onPickParametersFile={messages.pickParamsFile}
@@ -98,27 +98,26 @@ export const App: FC = () => {
           <FormSection title="Actions">
             {errorMessage && (
               <div className="alert-error">
-                <Codicon name="error" size={14} />
+                <VscodeIcon name="error" size={14} />
                 {errorMessage}
               </div>
             )}
             <div className="controls">
-              <VSCodeButton onClick={handleDeployClick} disabled={azureDisabled}>
+              <VscodeButton onClick={handleDeployClick} disabled={azureDisabled}>
                 Deploy
-              </VSCodeButton>
-              <VSCodeButton onClick={handleValidateClick} disabled={azureDisabled}>
+              </VscodeButton>
+              <VscodeButton onClick={handleValidateClick} disabled={azureDisabled}>
                 Validate
-              </VSCodeButton>
-              <VSCodeButton onClick={handleWhatIfClick} disabled={azureDisabled}>
+              </VscodeButton>
+              <VscodeButton onClick={handleWhatIfClick} disabled={azureDisabled}>
                 What-If
-              </VSCodeButton>
+              </VscodeButton>
             </div>
-            {azure.running && <VSCodeProgressRing></VSCodeProgressRing>}
           </FormSection>
 
           {messages.scope && (
             <>
-              <ResultsView result={azure.result} />
+              <ResultsView scope={messages.scope} deployState={azure.deployState} />
               <DeploymentOperationsView scope={messages.scope} operations={azure.operations} />
               <DeploymentOutputsView outputs={azure.outputs} />
               <WhatIfChangesView changes={azure.whatIfChanges} />
@@ -131,7 +130,7 @@ export const App: FC = () => {
         <>
           <FormSection title="Experimental Warning">
             <div className="alert-error">
-                <Codicon name="error" size={14} />
+              <VscodeIcon name="error" size={14} />
               Local Deployment is an experimental feature.
             </div>
           </FormSection>
@@ -149,16 +148,16 @@ export const App: FC = () => {
               <FormSection title="Actions">
                 {errorMessage && (
                   <div className="alert-error">
-                    <Codicon name="error" size={14} />
+                    <VscodeIcon name="error" size={14} />
                     {errorMessage}
                   </div>
                 )}
                 <div className="controls">
-                  <VSCodeButton onClick={handleLocalDeployClick} disabled={localDeployRunning}>
+                  <VscodeButton onClick={handleLocalDeployClick} disabled={localDeployRunning}>
                     Deploy
-                  </VSCodeButton>
+                  </VscodeButton>
                 </div>
-                {localDeployRunning && <VSCodeProgressRing></VSCodeProgressRing>}
+                {localDeployRunning && <VscodeProgressRing></VscodeProgressRing>}
               </FormSection>
 
               {!localDeployRunning && messages.localDeployResult && (

diff --git a/src/vscode-bicep/src/panes/deploy/app/components/ParamInputBox.tsx b/src/vscode-bicep/src/panes/deploy/app/components/ParamInputBox.tsx
@@ -1,13 +1,14 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 import {
-  VSCodeButton,
-  VSCodeCheckbox,
-  VSCodeDropdown,
-  VSCodeOption,
-  VSCodeTextArea,
-  VSCodeTextField,
-} from "@vscode/webview-ui-toolkit/react";
+  VscodeButton,
+  VscodeCheckbox,
+  VscodeLabel,
+  VscodeOption,
+  VscodeSingleSelect,
+  VscodeTextarea,
+  VscodeTextfield
+} from "@vscode-elements/react-elements";
 import { FC } from "react";
 import { ParamData, ParamDefinition } from "../../models";
 
@@ -32,64 +33,71 @@ export const ParamInputBox: FC<ParamInputBoxProps> = (props) => {
   }
 
   function getInputBox() {
+    const inputHtmlId = `param-input-${name.toLowerCase()}`;
     switch (type) {
       case "bool":
         return (
-          <VSCodeCheckbox checked={!!value} onChange={() => handleValueChange(!value)} disabled={disabled}>
+          <VscodeCheckbox
+            id={inputHtmlId}
+            checked={!!value}
+            onChange={() => handleValueChange(!value)}
+            disabled={disabled}>
             {name}
-          </VSCodeCheckbox>
+          </VscodeCheckbox>
         );
       case "int":
         return (
-          <VSCodeTextField
-            value={`${value ?? 0}`}
-            onChange={(e) => handleValueChange(parseInt((e.currentTarget as HTMLInputElement).value, 10))}
-            disabled={disabled}
-          >
-            {name}
-          </VSCodeTextField>
+          <>
+            <VscodeLabel htmlFor={inputHtmlId}>{name}</VscodeLabel>
+            <VscodeTextfield
+              id={inputHtmlId}
+              value={`${value ?? 0}`}
+              onChange={(e) => handleValueChange(parseInt((e.currentTarget as HTMLInputElement).value, 10))}
+              disabled={disabled} />
+          </>
         );
       case "string":
         if (definition.allowedValues) {
-          const dropdownHtmlId = `param-input-${name.toLowerCase()}`;
           return (
-            <div className="dropdown-container">
-              <label htmlFor={dropdownHtmlId}>{name}</label>
-              <VSCodeDropdown
-                id={dropdownHtmlId}
+            <>
+              <VscodeLabel htmlFor={inputHtmlId}>{name}</VscodeLabel>
+              <VscodeSingleSelect
+                id={inputHtmlId}
                 onChange={(e) => handleValueChange((e.currentTarget as HTMLSelectElement).value)}
                 disabled={disabled}
               >
                 {definition.allowedValues.map((option) => (
-                  <VSCodeOption key={option} selected={value === option}>
+                  <VscodeOption key={option} selected={value === option}>
                     {option}
-                  </VSCodeOption>
+                  </VscodeOption>
                 ))}
-              </VSCodeDropdown>
-            </div>
+              </VscodeSingleSelect>
+            </>
           );
         } else {
           return (
-            <VSCodeTextField
-              value={`${value ?? ""}`}
-              onChange={(e) => handleValueChange((e.currentTarget as HTMLInputElement).value)}
-              disabled={disabled}
-            >
-              {name}
-            </VSCodeTextField>
+            <>
+              <VscodeLabel htmlFor={inputHtmlId}>{name}</VscodeLabel>
+              <VscodeTextfield
+                id={inputHtmlId}
+                value={`${value ?? ""}`}
+                onChange={(e) => handleValueChange((e.currentTarget as HTMLInputElement).value)}
+                disabled={disabled} />
+            </>
           );
         }
       default:
         return (
-          <VSCodeTextArea
-            className="code-textarea-container"
-            resize="vertical"
-            value={value ? JSON.stringify(value, null, 2) : ""}
-            onChange={(e) => handleValueChange(JSON.parse((e.currentTarget as HTMLInputElement).value))}
-            disabled={disabled}
-          >
-            {name}
-          </VSCodeTextArea>
+          <>
+            <VscodeLabel htmlFor={inputHtmlId}>{name}</VscodeLabel>
+            <VscodeTextarea
+              id={inputHtmlId}
+              className="code-textarea-container"
+              resize="vertical"
+              value={value ? JSON.stringify(value, null, 2) : ""}
+              onChange={(e) => handleValueChange(JSON.parse((e.currentTarget as HTMLInputElement).value))}
+              disabled={disabled} />
+          </>
         );
     }
   }
@@ -98,9 +106,9 @@ export const ParamInputBox: FC<ParamInputBoxProps> = (props) => {
     <span className="input-row">
       {getInputBox()}
       {defaultValue !== undefined && value !== defaultValue && (
-        <VSCodeButton onClick={handleResetToDefaultClick} disabled={disabled}>
+        <VscodeButton onClick={handleResetToDefaultClick} disabled={disabled}>
           Reset to default
-        </VSCodeButton>
+        </VscodeButton>
       )}
     </span>
   );