[Upgrade Assistant] Fix uniq keys bug in ES deprecations table (#227416)

sabarasaba · web-flow · commit 769404bd4ac3 · 2025-07-14T07:37:22.000-04:00
diff --git a/x-pack/platform/plugins/private/upgrade_assistant/__jest__/client_integration/es_deprecations/deprecations_list.test.ts b/x-pack/platform/plugins/private/upgrade_assistant/__jest__/client_integration/es_deprecations/deprecations_list.test.ts
@@ -294,6 +294,34 @@ describe('ES deprecations table', () => {
       expect(find('esDeprecationsPagination').find('.euiPagination__item').length).toEqual(1);
       expect(find('deprecationTableRow').length).toEqual(reindexDeprecations.length);
     });
+
+    it('maintains correct row state across pagination', async () => {
+      const { find, actions } = testBed;
+
+      // Verify we have multiple pages
+      expect(find('esDeprecationsPagination').find('.euiPagination__item').length).toBeGreaterThan(
+        1
+      );
+
+      // Get the message of the first deprecation on page 1
+      const firstDeprecationMessagePage1 = find('deprecationTableRow').at(0).text();
+
+      // Navigate to page 2
+      await actions.pagination.clickPaginationAt(1);
+
+      // Get the message of the first deprecation on page 2
+      const firstDeprecationMessagePage2 = find('deprecationTableRow').at(0).text();
+
+      // The first items on different pages should be different
+      expect(firstDeprecationMessagePage1).not.toEqual(firstDeprecationMessagePage2);
+
+      // Navigate back to page 1
+      await actions.pagination.clickPaginationAt(0);
+
+      // Verify the first deprecation on page 1 is still the same
+      const firstDeprecationMessagePage1Again = find('deprecationTableRow').at(0).text();
+      expect(firstDeprecationMessagePage1Again).toEqual(firstDeprecationMessagePage1);
+    });
   });
 
   describe('no deprecations', () => {
diff --git a/x-pack/platform/plugins/private/upgrade_assistant/public/application/components/es_deprecations/es_deprecations_table.tsx b/x-pack/platform/plugins/private/upgrade_assistant/public/application/components/es_deprecations/es_deprecations_table.tsx
@@ -385,9 +385,16 @@ export const EsDeprecationsTable: React.FunctionComponent<Props> = ({
         ) : (
           <EuiTableBody>
             {visibleDeprecations.map((deprecation, index) => {
+              // Calculate the absolute index in the full deprecations array
+              // This ensures stable keys across pagination
+              // For example: with 10 items per page:
+              // - Page 1: firstItemIndex=0, keys will be deprecation-row-0 to deprecation-row-9
+              // - Page 2: firstItemIndex=10, keys will be deprecation-row-10 to deprecation-row-19
+              // This prevents React from reusing components incorrectly when navigating between pages
+              const absoluteIndex = pager.firstItemIndex + index;
               return (
-                <React.Fragment key={`deprecation-row-${index}`}>
-                  {renderTableRow(deprecation, mlUpgradeModeEnabled, index)}
+                <React.Fragment key={`deprecation-row-${absoluteIndex}`}>
+                  {renderTableRow(deprecation, mlUpgradeModeEnabled, absoluteIndex)}
                 </React.Fragment>
               );
             })}
