fix: checkboxes in the webui session list are unchecked on auto-refre…

…sh, or clicks are not scoped (#2660)

### TL;DR

Refactored event listener placement and removed auto-select from grid selection column.

### What changed?

- Moved the 'selected-items-changed' event listener from `_refreshJobData` to `_handleSelectedItems` method.
- Added optional chaining to the event listener in `firstUpdated` method.
- Removed `auto-select` attribute from the `vaadin-grid-selection-column`.
- Removed `_clearCheckboxes` call after terminating sessions.

### How to test?

1. Open the session list page.
2.Verify that all existing behaviors are working correctly.
3. Verify that the checkbox is enabled when you click on something other than the checkbox portion.
4. Verify that receiving an auto-refresh network request response does not clear the checkbox.

### Why make this change?

- Prevent clicking on a non-checkbox part of the webui session list to activate the checkbox, and prevent the checkbox from being unchecked on auto-refresh.
---

<!--
Please precisely, concisely, and concretely describe what this PR changes, the rationale behind codes,
and how it affects the users and other developers.
-->

**Checklist:** (if applicable)

- [ ] Mention to the original issue
- [ ] Documentation
- [ ] Minium required manager version
- [ ] Specific setting for review (eg., KB link, endpoint or how to setup)
- [ ] Minimum requirements to check during review
- [ ] Test case(s) to demonstrate the difference of before/after

src/components/backend-ai-session-list.ts

@@ -595,7 +595,7 @@ export default class BackendAISessionList extends BackendAIPage {
   }
 
   firstUpdated() {
-    this._grid.addEventListener('selected-items-changed', () => {
+    this._grid?.addEventListener('selected-items-changed', () => {
       this._selected_items = this._grid.selectedItems;
       if (this._selected_items.length > 0) {
         this.multipleActionButtons.style.display = 'flex';
@@ -733,15 +733,6 @@ export default class BackendAISessionList extends BackendAIPage {
    * @param {boolean} repeat - repeat the job data reading. Set refreshTime to 5000 for running list else 30000
    * */
   async _refreshJobData(refresh = false, repeat = true) {
-    this._grid?.addEventListener('selected-items-changed', () => {
-      this._selected_items = this._grid.selectedItems;
-      if (this._selected_items.length > 0) {
-        this.multipleActionButtons.style.display = 'flex';
-      } else {
-        this.multipleActionButtons.style.display = 'none';
-      }
-    });
-
     await this.updateComplete;
     if (this.active !== true) {
       return;
@@ -1339,7 +1330,6 @@ export default class BackendAISessionList extends BackendAIPage {
           this.notification.show(true, err);
         }
       });
-    this._clearCheckboxes();
   }
 
   /**
@@ -2090,6 +2080,14 @@ export default class BackendAISessionList extends BackendAIPage {
   }
 
   _handleSelectedItems() {
+    this._grid?.addEventListener('selected-items-changed', () => {
+      this._selected_items = this._grid.selectedItems;
+      if (this._selected_items.length > 0) {
+        this.multipleActionButtons.style.display = 'flex';
+      } else {
+        this.multipleActionButtons.style.display = 'none';
+      }
+    });
     if (this._selected_items.length === 0) return;
 
     const selectedItems = this.compute_sessions.filter((item) =>
@@ -4356,7 +4354,6 @@ ${rowData.item[this.sessionNameField]}</pre
                     ? html`
                         <vaadin-grid-selection-column
                           frozen
-                          auto-select
                         ></vaadin-grid-selection-column>
                       `
                     : html``}