[Security Solution][Bug] Pagination is not working consistently, does not retain the checked or selected rules on Translated Rules page

[divyaaghi-qasource]

Describe the bug:
User selects the rule from page 1 and then select the Rule from page 2. On navigating back to page 1 the selected rule is not checked. Pagination is not working consistenly.

Kibana/Elasticsearch Stack version:

VERSION: 9.2.0

BUILD: 91544

COMMIT: 0c40a02e995201d9395473309adda6cd020d56ca

Pre Conditions:
1.Kibana 9.2.0 must be running.
2.Automatic Migration Rules feature must be available.
3.Valid rules json files, macros and lookup files must be available.

Steps to reproduce:

1.1.Navigate to Launchpad > Get started > Automatic Migration.
2.Click on 'Migrate your existing Splunk® SIEM rules to Elastic' option and a flyout opens up.
3.Upload required json files as per steps and click on translate
4.After successfully translation, go to translated rules page.
5.Select any affected rules on page 1
6. Select some rules on page 2 also.
7.Now navigate back to page 1
8.Observe that On navigating back to page 1 the selected rule is not checked. Pagination is not working consistenly.

Current behavior:
Pagination is not working consistenly, does not retain the checked or selected rules on Translated Rules page

Expected behavior:
Pagination should work consistenly, and should retain the checked or selected rules on Translated Rules page

Screen recording:

Translated.rules.-.Kibana.-.Google.Chrome.2025-10-15.10-00-50.mp4

[elasticmachine]

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

[divyaaghi-qasource]

AI Model Used: Chat GPT-4:

Thank you for reporting this issue regarding pagination and rule selection persistence on the Translated Rules page in the Automatic Migration workflow. Here’s how you can fix the problem, along with steps and filename references.

Root Cause

Typically, this issue arises if:

• The "selected rules" state is maintained only in the current page’s component, and not in a central/global store (e.g., React Context, Redux, or component-level state that persists across pagination).
• On page change, the selected state is reset or not correctly rehydrated from a persistent source.

Solution

Persist selected rule IDs in a central/global state that is independent of pagination. When rendering each page, check if rules are selected by referencing this central state.

Steps to Fix

1. Identify the Translated Rules Page Component

   • Likely located at:
     x-pack/plugins/security_solution/public/pages/translated_rules/translated_rules_page.tsx
     or in a similar path under x-pack/plugins/security_solution/.

2. Find the Selection State Logic

   • Look for logic handling rule selection (checkboxes, selection handlers).
   • Typically, you’ll see useState, useReducer, or Redux selectors for selected rules.

3. Lift Selection State

   • Move the selected rules state to a parent component or a context provider.
   • For large apps, consider using Redux or Context API.

4. Modify Selection Handlers

   • Ensure selecting/unselecting a rule updates the global selected rules list.
   • When rendering each page, checkboxes for rules should be checked based on their presence in the global selected rules list.

5. Update Pagination Logic

   • When paginating, always reference the global selected rules state to determine which rules are checked.

Example Code Change

Suppose you have:

// Before (Selection state per page)
const [selectedRuleIds, setSelectedRuleIds] = useState<string[]>([]);

Change to:

// After (Selection state lifted to parent or context)
const [selectedRuleIds, setSelectedRuleIds] = useState<string[]>([]);

// Pass selectedRuleIds and setSelectedRuleIds as props/context to child components

// In pagination/page change handler, DO NOT reset selectedRuleIds
// In rule row render:
<Checkbox
  checked={selectedRuleIds.includes(rule.id)}
  onChange={() => handleRuleSelect(rule.id)}
/>

If using Redux or Context, lift selectedRuleIds there.

Files Likely to Change

• x-pack/plugins/security_solution/public/pages/translated_rules/translated_rules_page.tsx
• Any related subcomponents handling rule row and selection
• (Optional) Context or Redux store files if global state is used

Additional Notes

• Test the fix: Select rules across multiple pages, navigate back and forth, and verify selections persist.
• Edge Cases: Ensure that deselecting on any page correctly updates the global state.

---

Summary of Steps:

1. Move selected rule state to a persistent/global store.
2. Reference this store when rendering rules/checkboxes.
3. Update selection handlers to modify this store.
4. Test pagination and selection persistence.

[divyaaghi-qasource]

@chetnarajput-qasource Kindly Review!

[chetnarajput-qasource]

Reviewed and assigned to @vgomez-el