Feat: Removing components from ASO, Detectors, Kubectl, & Periscope commands (#1261)

Signed-off-by: Tejhan Diallo <82427254+tejhan@users.noreply.github.com>

Author: tejhan

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 } 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,30 +68,30 @@ 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}>
                     Enter App ID of service principal:
                 </label>
-                <VSCodeTextField
+                <input
+                    type="text"
                     value={appId || ""}
                     readOnly={!canEditSP}
                     required
                     id="spappid"
                     onInput={handleAppIdChange}
                     className={styles.control}
                     size={50}
-                    type="text"
                     placeholder="e.g. 041ccd53-e72f-45d1-bbff-382c82f6f9a1"
                 />
 
                 <label htmlFor="spcred" className={styles.label}>
                     Enter Password of Service Principal:
                 </label>
-                <VSCodeTextField
+                <input
                     value={appSecret || ""}
                     readOnly={!canEditSP}
                     required
@@ -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/Detector/Detector.tsx

@@ -1,4 +1,3 @@
-import { VSCodeDivider, VSCodeLink } from "@vscode/webview-ui-toolkit/react";
 import { InitialState } from "../../../src/webview-contract/webviewDefinitions/detector";
 import { SingleDetector } from "./SingleDetector";
 import { useStateManagement } from "../utilities/state";
@@ -11,9 +10,8 @@ export function Detector(initialState: InitialState) {
         <>
             <h2>{state.name}</h2>
             {state.description && state.description !== "test" && <p>{state.description}</p>}
-            To perform more checks on your cluster, visit{" "}
-            <VSCodeLink href={state.portalDetectorUrl}>AKS Diagnostics</VSCodeLink>.
-            <VSCodeDivider style={{ marginTop: "16px" }} />
+            To perform more checks on your cluster, visit <a href={state.portalDetectorUrl}>AKS Diagnostics</a>.
+            <hr style={{ marginTop: "16px" }} />
             {state.detectors.map((detector) => (
                 <SingleDetector key={detector.name} {...detector}></SingleDetector>
             ))}

webview-ui/src/Kubectl/CommandInput.tsx

@@ -1,4 +1,3 @@
-import { VSCodeButton, VSCodeTextField } from "@vscode/webview-ui-toolkit/react";
 import styles from "./Kubectl.module.css";
 import { FormEvent } from "react";
 
@@ -32,18 +31,19 @@ export function CommandInput(props: CommandInputProps) {
             <label htmlFor="command-input" className={styles.label}>
                 Command
             </label>
-            <VSCodeTextField
+            <input
+                type="text"
                 id="command-input"
                 className={styles.control}
                 value={props.command}
                 onInput={handleCommandChange}
                 onKeyUp={onKeyPress}
             />
             <div className={styles.commands}>
-                <VSCodeButton disabled={!canRun} onClick={() => props.onRunCommand(props.command)}>
+                <button disabled={!canRun} onClick={() => props.onRunCommand(props.command)}>
                     Run
-                </VSCodeButton>
-                {!props.matchesExisting && <VSCodeButton onClick={props.onSaveRequest}>Save</VSCodeButton>}
+                </button>
+                {!props.matchesExisting && <button onClick={props.onSaveRequest}>Save</button>}
             </div>
         </div>
     );

webview-ui/src/Kubectl/Kubectl.tsx

@@ -1,4 +1,3 @@
-import { VSCodeDivider } from "@vscode/webview-ui-toolkit/react";
 import { CommandCategory, InitialState, PresetCommand } from "../../../src/webview-contract/webviewDefinitions/kubectl";
 import styles from "./Kubectl.module.css";
 import { CommandList } from "./CommandList";
@@ -75,7 +74,7 @@ export function Kubectl(initialState: InitialState) {
         <div className={styles.wrapper}>
             <header className={styles.mainHeading}>
                 <h2>Kubectl Command Run for {state.clusterName}</h2>
-                <VSCodeDivider />
+                <hr />
             </header>
             <nav className={styles.commandNav}>
                 <CommandList
@@ -93,7 +92,7 @@ export function Kubectl(initialState: InitialState) {
                     onRunCommand={handleRunCommand}
                     onSaveRequest={handleSaveRequest}
                 />
-                <VSCodeDivider />
+                <hr />
                 <CommandOutput
                     isCommandRunning={state.isCommandRunning}
                     output={state.output}

webview-ui/src/Kubectl/SaveCommandDialog.tsx

@@ -1,6 +1,5 @@
 import { FormEvent, useState } from "react";
 import { Dialog } from "../components/Dialog";
-import { VSCodeButton, VSCodeDivider, VSCodeTextField } from "@vscode/webview-ui-toolkit/react";
 import styles from "./Kubectl.module.css";
 
 type ChangeEvent = Event | FormEvent<HTMLElement>;
@@ -41,27 +40,28 @@ export function SaveCommandDialog(props: SaveCommandDialogProps) {
             <h2>Save Command As</h2>
 
             <form onSubmit={handleSubmit}>
-                <VSCodeDivider />
+                <hr />
 
                 <div className={styles.inputContainer}>
                     <label htmlFor="cmd-name-input" className={styles.label}>
                         Name
                     </label>
-                    <VSCodeTextField
+                    <input
+                        type="text"
                         id="command-input"
                         className={styles.control}
                         value={name}
                         onInput={handleNameChange}
                     />
                 </div>
 
-                <VSCodeDivider />
+                <hr />
 
                 <div className={styles.buttonContainer}>
-                    <VSCodeButton type="submit" disabled={!canSave()}>
+                    <button type="submit" disabled={!canSave()}>
                         Ok
-                    </VSCodeButton>
-                    <VSCodeButton onClick={props.onCancel}>Cancel</VSCodeButton>
+                    </button>
+                    <button onClick={props.onCancel}>Cancel</button>
                 </div>
             </form>
         </Dialog>

webview-ui/src/Periscope/ErrorView.tsx

@@ -1,4 +1,3 @@
-import { VSCodeDivider } from "@vscode/webview-ui-toolkit/react";
 import { KustomizeConfig } from "../../../src/webview-contract/webviewDefinitions/periscope";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faTimesCircle } from "@fortawesome/free-solid-svg-icons";
@@ -15,7 +14,7 @@ export function ErrorView(props: ErrorViewProps) {
         <>
             <FontAwesomeIcon className={styles.errorIndicator} icon={faTimesCircle} />
             AKS Periscope failed to run on &#39;{props.clusterName}&#39;. Please see the error below for more details.
-            <VSCodeDivider />
+            <hr />
             <h3>Periscope settings (from VS Code Configuration)</h3>
             <dl className={styles.settinglist}>
                 <dt>GitHub organisation (containing aks-periscope repo with Kustomize base)</dt>
@@ -30,7 +29,7 @@ export function ErrorView(props: ErrorViewProps) {
                 <dt>Release tag (for {props.config.repoOrg}/aks-periscope GitHub repo)</dt>
                 <dd>{props.config.releaseTag}</dd>
             </dl>
-            <VSCodeDivider />
+            <hr />
             <pre>{props.message}</pre>
         </>
     );

webview-ui/src/Periscope/NodeActions.tsx

@@ -1,4 +1,3 @@
-import { VSCodeButton, VSCodeLink } from "@vscode/webview-ui-toolkit/react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faClone, faDownload } from "@fortawesome/free-solid-svg-icons";
 
@@ -20,16 +19,16 @@ export function NodeActions(props: NodeActionsProps) {
 
     return (
         <>
-            <VSCodeButton onClick={copyShareLink}>
+            <button onClick={copyShareLink}>
                 <FontAwesomeIcon icon={faClone} />
                 &nbsp;Copy 7-Day Shareable Link
-            </VSCodeButton>
+            </button>
             &nbsp;
             {props.isUploaded && (
-                <VSCodeLink href={shareableLink} title={shareableLink} target="_blank">
+                <a href={shareableLink} title={shareableLink} target="_blank" rel="noreferrer">
                     <FontAwesomeIcon icon={faDownload} />
                     &nbsp;Download Zip
-                </VSCodeLink>
+                </a>
             )}
         </>
     );

webview-ui/src/Periscope/Periscope.tsx

@@ -1,4 +1,3 @@
-import { VSCodeDivider, VSCodeLink } from "@vscode/webview-ui-toolkit/react";
 import { useEffect } from "react";
 import { InitialState } from "../../../src/webview-contract/webviewDefinitions/periscope";
 import { ErrorView } from "./ErrorView";
@@ -30,11 +29,9 @@ export function Periscope(initialState: InitialState) {
                 AKS Periscope collects and exports node and pod logs into an Azure Blob storage account to help you
                 analyse and identify potential problems or easily share the information during the troubleshooting
                 process.
-                <VSCodeLink href="https://azure.github.io/vscode-aks-tools/features/aks-periscope.html">
-                    &nbsp;Learn more
-                </VSCodeLink>
+                <a href="https://azure.github.io/vscode-aks-tools/features/aks-periscope.html">&nbsp;Learn more</a>
             </p>
-            <VSCodeDivider />
+            <hr />
             {
                 {
                     error: (

webview-ui/src/Periscope/SuccessView.tsx

@@ -1,4 +1,4 @@
-import { VSCodeDivider, VSCodeProgressRing } from "@vscode/webview-ui-toolkit/react";
+import { VSCodeProgressRing } from "@vscode/webview-ui-toolkit/react";
 import { useEffect } from "react";
 import { NodeUploadStatus, PodLogs } from "../../../src/webview-contract/webviewDefinitions/periscope";
 import { NodeActions } from "./NodeActions";
@@ -87,7 +87,7 @@ export function SuccessView(props: SuccessViewProps) {
                 </tbody>
             </table>
 
-            <VSCodeDivider />
+            <hr />
 
             {props.selectedNode && props.nodePodLogs && (
                 <NodeLogs node={props.selectedNode} podLogs={props.nodePodLogs} />