[Security Solution] [Bug] Apply Tag button remains enabled without any selection under Alert Page.

[kishorkumar-qasource]

Describe the bug:
The Apply Tag button under the Apply Alert Tag feature remains enabled even when no items are selected.

Build Details

VERSION: 9.3.0
BUILD: 94544
COMMIT: bf8c75b853e390db94045bdc41c8fc553ac848b9

Browser and Browser OS versions:
Google Chrome Version 142.0.7444.176 (Official Build) (64-bit)

Pre-conditions:

1. Kibana 9.3.0 must be running.
2. Alerts should be generated.

Steps to reproduce:

1. Navigate to Security > Alerts.
2. Click on the three dots of any Alert.
3. Click on the "Apply Alert Tag" button.
4. Observe that Apply Alert Tag feature remains enabled even when no items are selected.

Current behavior:
The “Apply Tag” button is enabled even when no option is selected.

Expected behavior:
The “Apply Tag” button should be disabled until at least one option is selected.

Screenshots (if relevant):

20251217-0805-08.4718708.mp4

[elasticmachine]

Pinging @elastic/security-solution (Team: SecuritySolution)

[kishorkumar-qasource]

Suggestion to address the issue:
Version: Copilot- GPT-4.1

To address the issue where the "Apply Tag" button remains enabled even without any selection under the Alert Page's "Apply Alert Tag" feature, follow these steps:

---

Steps to Fix the Issue

1. Identify the Component Handling the Button Logic
   • The "Apply Tag" button is likely rendered in the SecuritySolution plugin under the Alerts page.
   • The relevant components are probably located in x-pack/plugins/security_solution.
2. Update Form State Validation for the Button
   • The button's disabled property should be tied to the state indicating that at least one selection has been made.
   • Update the logic to ensure it becomes disabled when no selection is available.
3. Steps to Modify Files

   File: Check the UI Component Rendering "Apply Tag" Button

   Locate the React component that renders the button. Search files like apply_alert_tag_component.tsx (or a similar file in the alerts folder).
   • File Path (Estimation):
     x-pack/plugins/security_solution/public/detections/components/alerts/alert_management/apply_alert_tag_component.tsx.
   • Here's an example how you might apply the button control logic:

     // Ensure state management tracks the selected items
     const buttonDisabled = selectedItems.length === 0;
     <EuiButton
       isDisabled={buttonDisabled}
       onClick={handleApplyTag}>
         Apply Tag
     </EuiButton>

4. Add Unit and Functional Tests
   • Ensure that the button is disabled when no tags are selected and becomes enabled when one or more tags are selected.

   Test File:

   • Relevant test files are likely in /x-pack/plugins/security_solution/public/detections/components/alerts/alert_management/apply_alert_tag_component.test.tsx.
     Example unit test:

   test('Apply Tag button is disabled when no options are selected', () => {
     const { getByText } = render(<ApplyAlertTagComponent selection={[]} />); // No selection
     const applyTagButton = getByText('Apply Tag');
     expect(applyTagButton).toBeDisabled();
   });
   test('Apply Tag button is enabled when options are selected', () => {
     const { getByText } = render(<ApplyAlertTagComponent selection={[{ id: 'tag-1' }]} />);
     const applyTagButton = getByText('Apply Tag');
     expect(applyTagButton).not.toBeDisabled();
   });

5. Lint and Build the Code
   • Confirm the changes follow Kibana's TypeScript and ESLint guidelines.
   • Run the build to ensure the application compiles successfully.
6. Manual Testing
   • Start the development server.
   • Navigate to Security > Alerts.
   • Open the "Apply Alert Tag" dialog and test the button's behavior with/without selections.

---

Files Likely Impacted

1. Primary Component:
   • x-pack/plugins/security_solution/public/detections/components/alerts/alert_management/apply_alert_tag_component.tsx
2. State Management (if using Redux or similar):
   • x-pack/plugins/security_solution/public/detections/store/
3. Unit Tests:
   • x-pack/plugins/security_solution/public/detections/components/alerts/alert_management/apply_alert_tag_component.test.tsx
4. E2E Tests:
   • x-pack/test/security_solution_cypress/integration/alerts/apply_alert_tag.spec.ts

---

[kishorkumar-qasource]

Hi @arvindersingh-qasource , Kindly review this.

[elasticmachine]

Pinging @elastic/security-detections-response (Team:Detections and Resp)

[arvindersingh-qasource]

Reviewed and Assigned to @MadameSheema

[elasticmachine]

Pinging @elastic/security-detection-engine (Team:Detection Engine)