Welcome Page AI Option Checkbox Should Always Be Visible and Reflect Tenant-Level State in VS Code IDEl AST-119974) (#1330)

Author: cx-rahul-pidde

media/icons/tabler-icon-check.svg

@@ -154,3 +154,9 @@ body[data-vscode-theme-kind*="light"] .feature-card {
   justify-content: flex-start;
   padding-left: 7px;
 }
+
+/* AI feature toggle checkbox styling */
+#aiFeatureToggle,
+.status-icon-checkbox {
+  transform: scale(1.25);
+}

media/icons/tabler-icon-uncheck.svg

@@ -5,8 +5,7 @@
   let serverEnabled = false;
 
   window.addEventListener("DOMContentLoaded", () => {
-    const checkIcon = document.getElementById("aiFeatureCheckIcon");
-    const uncheckIcon = document.getElementById("aiFeatureUncheckIcon");
+    const checkbox = document.getElementById("aiFeatureToggle");
     const loader = document.getElementById("aiFeatureLoader");
     const aiBoxInfo = document.getElementById("aiFeatureStatusBox");
     const aiFeatureBoxWrapper = document.getElementById("aiFeatureBoxWrapper");
@@ -25,37 +24,23 @@
 
       currentState = newState;
 
-      if (newState) {
-        checkIcon.classList.remove("hidden");
-        uncheckIcon.classList.add("hidden");
-      } else {
-        checkIcon.classList.add("hidden");
-        uncheckIcon.classList.remove("hidden");
+      if (checkbox) {
+        checkbox.checked = newState;
       }
 
-      checkIcon.setAttribute("aria-pressed", newState.toString());
-      uncheckIcon.setAttribute("aria-pressed", (!newState).toString());
-
       vscode.postMessage({ type: "changeAllScannersStatus", value: newState });
     }
 
-    checkIcon.addEventListener("click", () => toggleScannerState(false));
-    uncheckIcon.addEventListener("click", () => toggleScannerState(true));
-
-    function handleKeydown(event, targetState) {
-      if (event.key === "Enter" || event.key === " ") {
-        event.preventDefault();
-        toggleScannerState(targetState);
-      }
+    if (checkbox) {
+      checkbox.addEventListener("change", () => {
+        if (!serverEnabled) {
+          checkbox.checked = false;
+          return;
+        }
+        toggleScannerState(checkbox.checked);
+      });
     }
 
-    checkIcon.addEventListener("keydown", (event) =>
-      handleKeydown(event, false)
-    );
-    uncheckIcon.addEventListener("keydown", (event) =>
-      handleKeydown(event, true)
-    );
-
     if (previousState.aiFeatureLoaded) {
       loader.classList.add("hidden");
       handleSetAiFeatureState(previousState.lastAiState);
@@ -75,14 +60,21 @@
     function handleSetAiFeatureState(message) {
       loader.classList.add("hidden");
       serverEnabled = message.enabled;
+      if (checkbox) {
+        checkbox.classList.remove("hidden");
+      }
 
       if (message.enabled) {
         toggleScannerState(message.scannersSettings);
-
-        checkIcon.style.cursor = "pointer";
-        uncheckIcon.style.cursor = "pointer";
+        if (checkbox) {
+          checkbox.disabled = false;
+          checkbox.style.cursor = "pointer";
+        }
       } else {
         toggleScannerState(false);
+        if (checkbox) {
+          checkbox.disabled = true;
+        }
         aiBoxInfo.classList.remove("hidden");
         aiFeatureBoxWrapper.classList.remove("hidden");
       }

media/welcomePage.css

@@ -10,8 +10,6 @@ export class WelcomeWebview {
     bootstrapCssUri: vscode.Uri,
     scannerImgUri: vscode.Uri,
     aiBoxinfo: vscode.Uri,
-    checkSvgUri: vscode.Uri,
-    uncheckSvgUri: vscode.Uri,
     doubleCheckUri: vscode.Uri,
     cssUri: vscode.Uri,
     jsUri: vscode.Uri,
@@ -50,25 +48,12 @@ export class WelcomeWebview {
                   >
                     <span class="visually-hidden">Loading...</span>
                   </div>
-                  <img
-                    id="aiFeatureCheckIcon"
-                    class="status-icon-img hidden"
-                    src="${checkSvgUri}"
-                    alt="Real-time scanners enabled"
-                    role="button"
-                    tabindex="0"
-                    aria-pressed="true"
-                    aria-label="Real-time scanners are currently enabled. Click to disable all scanners."
-                  />
-                  <img
-                    id="aiFeatureUncheckIcon"
-                    class="status-icon-img hidden"
-                    src="${uncheckSvgUri}"
-                    alt="Real-time scanners disabled"
-                    role="button"
-                    tabindex="0"
-                    aria-pressed="false"
-                    aria-label="Real-time scanners are currently disabled. Click to enable all scanners."
+                  <input
+                    id="aiFeatureToggle"
+                    type="checkbox"
+                    class="status-icon-checkbox hidden"
+                    aria-label="Toggle real-time scanners"
+                    title="Toggle real-time scanners"
                   />
                 </div>
                 <span class="card-title">Code Smarter with Checkmarx One Assist</span>
@@ -175,23 +160,6 @@ export class WelcomeWebview {
       )
     );
 
-    const checkSvgUri = panel.webview.asWebviewUri(
-      vscode.Uri.joinPath(
-        context.extensionUri,
-        "media",
-        "icons",
-        "tabler-icon-check.svg"
-      )
-    );
-
-    const uncheckSvgUri = panel.webview.asWebviewUri(
-      vscode.Uri.joinPath(
-        context.extensionUri,
-        "media",
-        "icons",
-        "tabler-icon-uncheck.svg"
-      )
-    );
 
     const doubleCheckUri = panel.webview.asWebviewUri(
       vscode.Uri.joinPath(
@@ -227,8 +195,6 @@ export class WelcomeWebview {
       bootstrapCssUri,
       scannerImgUri,
       aiBoxinfo,
-      checkSvgUri,
-      uncheckSvgUri,
       doubleCheckUri,
       cssUri,
       jsUri,
@@ -272,8 +238,6 @@ export class WelcomeWebview {
         bootstrapCssUri,
         newScannerImgUri,
         newAiBoxinfo,
-        checkSvgUri,
-        uncheckSvgUri,
         newDoubleCheckUri,
         cssUri,
         jsUri,