From 57ac2c6bacd7ca8dfab5d51d26f31a5e25ad14b3 Mon Sep 17 00:00:00 2001
From: Tatsinnit <tamishra@microsoft.com>
Date: Fri, 25 Oct 2024 19:36:23 +1300
Subject: [PATCH] Fix multiclick by disabling the button. (#1023)

Signed-off-by: Tatsat Mishra <tatsat.mishra@microsoft.com>
Co-authored-by: Tatsat Mishra <tatsat.mishra@microsoft.com>
---
 src/panels/KaitoPanel.ts       |  2 +-
 webview-ui/src/Kaito/Kaito.tsx | 11 ++++++++++-
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/panels/KaitoPanel.ts b/src/panels/KaitoPanel.ts
index 43d5214f..f57e598e 100644
--- a/src/panels/KaitoPanel.ts
+++ b/src/panels/KaitoPanel.ts
@@ -224,7 +224,7 @@ export class KaitoPanelDataProvider implements PanelDataProvider<"kaito"> {
         };
 
         try {
-            const poller = await longRunning(`Configuring the KAITO for ${this.clusterName} cluster.`, () => {
+            const poller = await longRunning("", () => {
                 return this.containerServiceClient.managedClusters.beginCreateOrUpdate(
                     this.resourceGroupName,
                     this.clusterName,
diff --git a/webview-ui/src/Kaito/Kaito.tsx b/webview-ui/src/Kaito/Kaito.tsx
index 7f326f74..622aa67f 100644
--- a/webview-ui/src/Kaito/Kaito.tsx
+++ b/webview-ui/src/Kaito/Kaito.tsx
@@ -3,11 +3,18 @@ import { InitialState, ProgressEventType } from "../../../src/webview-contract/w
 import { useStateManagement } from "../utilities/state";
 import styles from "./Kaito.module.css";
 import kaitoimage from "./kaitoimage.png";
+import { useState } from "react";
 
 // import { KaitoModels } from "./KaitoModels";
 import { stateUpdater, vscode } from "./state";
 export function Kaito(initialState: InitialState) {
     const { state } = useStateManagement(stateUpdater, initialState, vscode);
+    const [isDisabled, setIsDisabled] = useState(false);
+
+    const handleClick = () => {
+        onClickKaitoInstall();
+        setIsDisabled(true); // Disable the button after click
+    };
 
     function onClickKaitoInstall() {
         vscode.postInstallKaitoRequest();
@@ -51,7 +58,9 @@ export function Kaito(initialState: InitialState) {
                 </div>
                 <div>
                     {state.kaitoInstallStatus === ProgressEventType.NotStarted && (
-                        <VSCodeButton onClick={onClickKaitoInstall}>Install</VSCodeButton>
+                        <VSCodeButton onClick={handleClick} disabled={isDisabled}>
+                            Install
+                        </VSCodeButton>
                     )}
                     {state.kaitoInstallStatus === ProgressEventType.InProgress &&
                         state.operationDescription.includes("Installing Kaito") && (