Removing & replacing react elements from deprecated webview-ui-toolkit package.

webview-ui/src/AttachAcrToCluster/AttachAcrToCluster.tsx

@@ -18,7 +18,6 @@ import {
 import { AttachAcrToClusterState, stateUpdater, vscode } from "./state/state";
 import { distinct } from "../utilities/array";
 import { ResourceSelector } from "../components/ResourceSelector";
-import { VSCodeLink } from "@vscode/webview-ui-toolkit/react";
 import { faLink, faLinkSlash } from "@fortawesome/free-solid-svg-icons";
 import { AcrRoleState } from "./state/stateTypes";
 import { InlineAction, InlineActionProps, makeFixAction, makeInlineActionProps } from "../components/InlineAction";
@@ -96,16 +95,16 @@ export function AttachAcrToCluster(initialState: InitialState) {
                 <p className={styles.fullWidth}>
                     Select a cluster and Azure Container Registry (ACR) to attach. For more information on attaching an
                     ACR to a cluster, see{" "}
-                    <VSCodeLink href="https://learn.microsoft.com/en-us/azure/aks/cluster-container-registry-integration?tabs=azure-cli#configure-acr-integration-for-an-existing-aks-cluster">
+                    <a href="https://learn.microsoft.com/en-us/azure/aks/cluster-container-registry-integration?tabs=azure-cli#configure-acr-integration-for-an-existing-aks-cluster">
                         Configure ACR integration for an existing AKS cluster
-                    </VSCodeLink>
+                    </a>
                     .
                 </p>
                 <p className={styles.fullWidth}>
                     This operation assigns the{" "}
-                    <VSCodeLink href="https://learn.microsoft.com/en-us/azure/role-based-access-control/built-in-roles#acrpull">
+                    <a href="https://learn.microsoft.com/en-us/azure/role-based-access-control/built-in-roles#acrpull">
                         AcrPull
-                    </VSCodeLink>{" "}
+                    </a>{" "}
                     role to the Microsoft Entra ID managed identity associated with your AKS cluster.
                 </p>
 

webview-ui/src/AutomatedDeployments/AutomatedDeployments.tsx

@@ -1,6 +1,5 @@
 //import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { InitialState } from "../../../src/webview-contract/webviewDefinitions/automatedDeployments";
-//import { VSCodeButton, VSCodeTextField } from "@vscode/webview-ui-toolkit/react";
 //import { faFolder } from "@fortawesome/free-regular-svg-icons";
 
 import {
@@ -27,9 +26,6 @@ import {
 } from "../utilities/validation";
 import { ResourceSelector } from "../components/ResourceSelector";
 import {
-    VSCodeButton,
-    //VSCodeButton,
-    //VSCodeLink,
     //VSCodeRadio,
     //VSCodeRadioGroup,
     VSCodeTextField,
@@ -218,12 +214,12 @@ export function AutomatedDeployments(initialState: InitialState) {
                         onSelect={(g) => console.log("Selected Resource Group:", g)}
                     />
 
-                    <VSCodeButton
+                    <button
                         className={styles.sideControl}
                         onClick={() => eventHandlers.onSetIsNewResourceGroupDialogShown(true)}
                     >
                         Create New Resource Group
-                    </VSCodeButton>
+                    </button>
 
                     {state.isNewResourceGroupDialogShown && (
                         <CreateResourceGroupDialog
@@ -253,9 +249,9 @@ export function AutomatedDeployments(initialState: InitialState) {
             </form>
 
             <div className={styles.buttonContainer}>
-                <VSCodeButton type="submit" onClick={handleCreateWorkflowClick}>
+                <button type="submit" onClick={handleCreateWorkflowClick}>
                     Create DevHub Workflow
-                </VSCodeButton>
+                </button>
             </div>
         </>
     );

webview-ui/src/AzureServiceOperator/AzureServiceOperator.tsx

@@ -1,4 +1,3 @@
-import { VSCodeLink } from "@vscode/webview-ui-toolkit/react";
 import styles from "./AzureServiceOperator.module.css";
 import { InitialState } from "../../../src/webview-contract/webviewDefinitions/azureServiceOperator";
 import { useEffect } from "react";
@@ -64,7 +63,7 @@ export function AzureServiceOperator(initialState: InitialState) {
             <p>
                 The Azure Service Operator helps you provision Azure resources and connect your applications to them
                 from within Kubernetes.
-                <VSCodeLink href="https://aka.ms/aks/aso">&nbsp;Learn more</VSCodeLink>
+                <a href="https://aka.ms/aks/aso">&nbsp;Learn more</a>
             </p>
             <div className={styles.content}>
                 <div className={styles.inputPane}>

webview-ui/src/AzureServiceOperator/Inputs.tsx

@@ -1,10 +1,4 @@
-import {
-    VSCodeButton,
-    VSCodeDropdown,
-    VSCodeLink,
-    VSCodeOption,
-    VSCodeTextField,
-} from "@vscode/webview-ui-toolkit/react";
+import { VSCodeDropdown, VSCodeOption, VSCodeTextField } from "@vscode/webview-ui-toolkit/react";
 import styles from "./AzureServiceOperator.module.css";
 import { ASOState, EventDef, InstallStepStatus } from "./helpers/state";
 import { EventHandlers } from "../utilities/state";
@@ -74,9 +68,9 @@ export function Inputs(props: InputsProps) {
                     <FontAwesomeIcon className={styles.infoIndicator} icon={faInfoCircle} />
                     Provide the App ID and password of a Service Principal with Contributor permissions for your
                     subscription. This allows ASO to create resources in your subscription on your behalf.
-                    <VSCodeLink href="https://docs.microsoft.com/en-us/cli/azure/create-an-azure-service-principal-azure-cli">
+                    <a href="https://docs.microsoft.com/en-us/cli/azure/create-an-azure-service-principal-azure-cli">
                         &nbsp; Learn more
-                    </VSCodeLink>
+                    </a>
                 </p>
 
                 <label htmlFor="spappid" className={styles.label}>
@@ -109,9 +103,9 @@ export function Inputs(props: InputsProps) {
                     placeholder="Service principal password"
                 />
 
-                <VSCodeButton disabled={!canCheckSP} onClick={handleCheckSPClick}>
+                <button disabled={!canCheckSP} onClick={handleCheckSPClick}>
                     Check
-                </VSCodeButton>
+                </button>
             </div>
             {canViewSubscriptions && (
                 <div className={styles.inputContainer}>
@@ -121,9 +115,7 @@ export function Inputs(props: InputsProps) {
                         The supplied service principal has some role assignments on the following subscriptions. Please
                         ensure these are adequate for the Azure resources that ASO will be creating in your selected
                         subscription.
-                        <VSCodeLink href="https://azure.github.io/azure-service-operator/#installation">
-                            &nbsp; Learn more
-                        </VSCodeLink>
+                        <a href="https://azure.github.io/azure-service-operator/#installation">&nbsp; Learn more</a>
                     </p>
 
                     <label htmlFor="sub-select" className={styles.label}>
@@ -143,9 +135,9 @@ export function Inputs(props: InputsProps) {
                             </VSCodeOption>
                         ))}
                     </VSCodeDropdown>
-                    <VSCodeButton disabled={!canStartInstalling} type="submit">
+                    <button disabled={!canStartInstalling} type="submit">
                         Install
-                    </VSCodeButton>
+                    </button>
                 </div>
             )}
         </form>

webview-ui/src/ClusterProperties/AgentPoolDisplay.tsx

@@ -1,6 +1,5 @@
 import styles from "./ClusterProperties.module.css";
 import { AgentPoolProfileInfo, ClusterInfo } from "../../../src/webview-contract/webviewDefinitions/clusterProperties";
-import { VSCodeButton } from "@vscode/webview-ui-toolkit/react";
 import { EventDef, vscode } from "./state";
 import { EventHandlers } from "../utilities/state";
 
@@ -32,13 +31,13 @@ export function AgentPoolDisplay(props: AgentPoolDisplayProps) {
                 {showAbortButton && (
                     <>
                         &nbsp;
-                        <VSCodeButton
+                        <button
                             disabled={props.clusterOperationRequested}
                             onClick={() => handleAbortClick(props.profileInfo.name)}
-                            appearance="secondary"
+                            className="secondary-button"
                         >
                             Abort
-                        </VSCodeButton>
+                        </button>
                     </>
                 )}
             </dd>

webview-ui/src/ClusterProperties/ClusterDisplay.tsx

@@ -1,4 +1,3 @@
-import { VSCodeButton, VSCodeLink } from "@vscode/webview-ui-toolkit/react";
 import { ClusterInfo } from "../../../src/webview-contract/webviewDefinitions/clusterProperties";
 import { EventHandlers } from "../utilities/state";
 import styles from "./ClusterProperties.module.css";
@@ -73,25 +72,25 @@ export function ClusterDisplay(props: ClusterDisplayProps) {
                     {showAbortButton && (
                         <>
                             &nbsp;
-                            <VSCodeButton
+                            <button
                                 disabled={props.clusterOperationRequested}
                                 onClick={() => handleAbortClick()}
-                                appearance="secondary"
+                                className="secondary-button"
                             >
                                 Abort
-                            </VSCodeButton>
+                            </button>
                         </>
                     )}
                     {showReconcileButton && (
                         <>
                             &nbsp;
-                            <VSCodeButton
+                            <button
                                 disabled={props.clusterOperationRequested}
                                 onClick={() => handleReconcileClick()}
-                                appearance="secondary"
+                                className="secondary-button"
                             >
                                 Reconcile
-                            </VSCodeButton>
+                            </button>
                         </>
                     )}
                 </div>
@@ -111,31 +110,29 @@ export function ClusterDisplay(props: ClusterDisplayProps) {
                         It is important that you don&#39;t repeatedly start/stop your cluster. Repeatedly
                         starting/stopping your cluster may result in errors. Once your cluster is stopped, you should
                         wait 15-30 minutes before starting it up again. &nbsp;
-                        <VSCodeLink href="https://docs.microsoft.com/en-au/azure/aks/start-stop-cluster?tabs=azure-cli#start-an-aks-cluster">
+                        <a href="https://docs.microsoft.com/en-au/azure/aks/start-stop-cluster?tabs=azure-cli#start-an-aks-cluster">
                             Learn more
-                        </VSCodeLink>
+                        </a>
                     </span>
                 </span>
                 <div className={styles.buttonDiv}>
                     {startStopState === "Started" && (
-                        <VSCodeButton
+                        <button
                             disabled={props.clusterOperationRequested}
                             onClick={handleStopCluster}
-                            className={styles.controlButton}
-                            appearance="secondary"
+                            className={`${styles.controlButton} secondary-button`}
                         >
                             Stop Cluster
-                        </VSCodeButton>
+                        </button>
                     )}
                     {startStopState === "Stopped" && (
-                        <VSCodeButton
+                        <button
                             disabled={props.clusterOperationRequested}
                             onClick={handleStartCluster}
-                            className={styles.controlButton}
-                            appearance="secondary"
+                            className={`${styles.controlButton} secondary-button`}
                         >
                             Start Cluster
-                        </VSCodeButton>
+                        </button>
                     )}
                     {(startStopState === "Starting" || startStopState === "Stopping") && (
                         <span>{`Cluster is in ${startStopState} state`}</span>

webview-ui/src/ClusterProperties/ClusterDisplayToolTip.tsx

@@ -1,4 +1,3 @@
-import { VSCodeLink } from "@vscode/webview-ui-toolkit/react";
 import { ClusterInfo } from "../../../src/webview-contract/webviewDefinitions/clusterProperties";
 import styles from "./ClusterProperties.module.css";
 
@@ -42,9 +41,9 @@ export function ClusterDisplayToolTip(props: ClusterDisplayToolTipProps) {
                     <tfoot>
                         <tr>
                             <td colSpan={3} className={styles.textLeftAlign}>
-                                <VSCodeLink href="https://learn.microsoft.com/en-us/azure/aks/supported-kubernetes-versions?tabs=azure-cli#aks-kubernetes-release-calendar">
+                                <a href="https://learn.microsoft.com/en-us/azure/aks/supported-kubernetes-versions?tabs=azure-cli#aks-kubernetes-release-calendar">
                                     Learn more
-                                </VSCodeLink>
+                                </a>
                             </td>
                         </tr>
                     </tfoot>

webview-ui/src/CreateCluster/CreateCluster.tsx

@@ -3,7 +3,7 @@ import { CreateClusterInput } from "./CreateClusterInput";
 import { Success } from "./Success";
 import { InitialState } from "../../../src/webview-contract/webviewDefinitions/createCluster";
 import { Stage, stateUpdater, vscode } from "./helpers/state";
-import { VSCodeLink, VSCodeProgressRing } from "@vscode/webview-ui-toolkit/react";
+import { VSCodeProgressRing } from "@vscode/webview-ui-toolkit/react";
 import { useStateManagement } from "../utilities/state";
 
 export function CreateCluster(initialState: InitialState) {
@@ -45,8 +45,8 @@ export function CreateCluster(initialState: InitialState) {
                         </h3>
                         {state.deploymentPortalUrl && (
                             <p>
-                                Click <VSCodeLink href={state.deploymentPortalUrl}>here</VSCodeLink> to view the
-                                deployment in the Azure Portal.
+                                Click <a href={state.deploymentPortalUrl}>here</a> to view the deployment in the Azure
+                                Portal.
                             </p>
                         )}
 

webview-ui/src/CreateCluster/CreateClusterInput.tsx

@@ -1,6 +1,6 @@
 import { faTimesCircle } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { VSCodeButton, VSCodeDropdown, VSCodeOption, VSCodeTextField } from "@vscode/webview-ui-toolkit/react";
+import { VSCodeDropdown, VSCodeOption, VSCodeTextField } from "@vscode/webview-ui-toolkit/react";
 import { FormEvent, useState } from "react";
 import { MessageSink } from "../../../src/webview-contract/messaging";
 import {
@@ -164,9 +164,9 @@ export function CreateClusterInput(props: CreateClusterInputProps) {
                         )}
                     </VSCodeDropdown>
 
-                    <VSCodeButton className={styles.sideControl} onClick={() => setIsNewResourceGroupDialogShown(true)}>
+                    <button className={styles.sideControl} onClick={() => setIsNewResourceGroupDialogShown(true)}>
                         Create New
-                    </VSCodeButton>
+                    </button>
                     {hasMessage(existingResourceGroup) && (
                         <span className={styles.validationMessage}>
                             <FontAwesomeIcon className={styles.errorIndicator} icon={faTimesCircle} />
@@ -216,7 +216,7 @@ export function CreateClusterInput(props: CreateClusterInputProps) {
                 </div>
 
                 <div className={styles.buttonContainer}>
-                    <VSCodeButton type="submit">Create</VSCodeButton>
+                    <button type="submit">Create</button>
                 </div>
             </form>
 

webview-ui/src/CreateCluster/CreateResourceGroup.tsx

@@ -1,6 +1,5 @@
 import { faTimesCircle } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { VSCodeButton, VSCodeTextField } from "@vscode/webview-ui-toolkit/react";
 import { FormEvent, useState } from "react";
 import { Dialog } from "../components/Dialog";
 import { Validatable, hasMessage, invalid, isValid, isValueSet, unset, valid } from "../utilities/validation";
@@ -54,7 +53,8 @@ export function CreateResourceGroupDialog(props: CreateResourceGroupDialogProps)
                     <label htmlFor="rg-name-input" className={styles.label}>
                         Name*
                     </label>
-                    <VSCodeTextField
+                    <input
+                        type="text"
                         id="rg-name-input"
                         value={isValueSet(name) ? name.value : ""}
                         className={`${styles.longControl} ${styles.validatable}`}
@@ -70,8 +70,8 @@ export function CreateResourceGroupDialog(props: CreateResourceGroupDialogProps)
                 </div>
 
                 <div className={styles.buttonContainer} style={{ justifyContent: "flex-end" }}>
-                    <VSCodeButton type="submit">Create</VSCodeButton>
-                    <VSCodeButton onClick={props.onCancel}>Cancel</VSCodeButton>
+                    <button type="submit">Create</button>
+                    <button onClick={props.onCancel}>Cancel</button>
                 </div>
             </form>
         </Dialog>

webview-ui/src/CreateCluster/Success.tsx

@@ -1,5 +1,3 @@
-import { VSCodeLink } from "@vscode/webview-ui-toolkit/react";
-
 interface SuccessProps {
     portalClusterUrl: string;
     name: string;
@@ -10,8 +8,7 @@ export function Success(props: SuccessProps) {
         <>
             <h3>Cluster {props.name} was created successfully</h3>
             <p>
-                Click <VSCodeLink href={props.portalClusterUrl}>here</VSCodeLink> to view your cluster in the Azure
-                Portal.
+                Click <a href={props.portalClusterUrl}>here</a> to view your cluster in the Azure Portal.
             </p>
         </>
     );

webview-ui/src/CreateFleet/CreateFleet.tsx

@@ -3,7 +3,7 @@ import { InitialState } from "../../../src/webview-contract/webviewDefinitions/c
 import { CreateFleetInput } from "./CreateFleetInput";
 import { useStateManagement } from "../utilities/state";
 import { Stage, stateUpdater, vscode } from "./helpers/state";
-import { VSCodeLink, VSCodeProgressRing } from "@vscode/webview-ui-toolkit/react";
+import { VSCodeProgressRing } from "@vscode/webview-ui-toolkit/react";
 
 export function CreateFleet(initialState: InitialState) {
     const { state, eventHandlers } = useStateManagement(stateUpdater, initialState, vscode);
@@ -60,8 +60,8 @@ export function CreateFleet(initialState: InitialState) {
                     <>
                         <h3>Fleet {state.createParams!.name} was created successfully</h3>
                         <p>
-                            Click <VSCodeLink href={state.createdFleet?.portalUrl}>here</VSCodeLink> to view your fleet
-                            in the Azure Portal.
+                            Click <a href={state.createdFleet?.portalUrl}>here</a> to view your fleet in the Azure
+                            Portal.
                         </p>
                     </>
                 );