[EuiPagination] Add keys for i18n values in compressed count

[acstll]

Summary

This fixes #8235

I was able to test locally in Kibana, and this fix makes the console warning go away.

⚠️ I was not able to reproduce the error outside of Kibana, nor determine the real cause of it, see elastic/kibana#202287 — I do not fully yet understand how EuiI18n works.

I believe usage of EuiPortal, as suggested here, is not related to the issue.

QA

To trigger the warning, go to Discover and open a document (flyout).

Also maybe worth noting, the warning is only triggered the first time the flyout is open.

In order to test locally, you need to run EUI locally in Kibana, as explained here, taking into account the new workspace interdependency which is not yet documented. Follow these steps (thanks again @mgadewoll):

• in packages/eui change eui-theme-common in the package.json from dependency to devDependency and add it also as peerDependency
• run yarn build:workspaces in packages/eui
• create local packages of all 3 packages: eui-theme-common, eui-theme-borealis and eui by running yarn build-pack in each directory
• copy the created tgz packages to kibana root
• add the packages in the Kibana package.json, e.g. like this (the names of the packages don't matter, just make sure to update the name if you create new packages so that the Kibana bundler registers a change and doesn't load a cached package)

General checklist

• Browser QA
  • Checked in both light and dark modes
  • Checked in mobile
  • Checked in Chrome, Safari, Edge, and Firefox
  • Checked for accessibility including keyboard-only and screenreader modes
• Docs site QA
  • Added documentation
  • Props have proper autodocs (using @default if default values are missing) and playground toggles
  • Checked Code Sandbox works for any docs examples
• Code quality checklist
  • Added or updated jest and cypress tests
  • Updated visual regression tests
• Release checklist
  • A changelog entry exists and is marked appropriately.
  • If applicable, added the breaking change issue label (and filled out the breaking change checklist)
• Designer checklist
  • If applicable, file an issue to update EUI's Figma library with any corresponding UI changes. (This is an internal repo, if you are external to Elastic, ask a maintainer to submit this request)

[acstll]

Marking this as draft to do some more testing and make sure the fix is solid.

[acstll]

Quick status update: still making one last effort to reproduce the bug outside of Kibana 😅

[acstll]

On the one hand, I still couldn't reproduce this outside of Kibana. I tried:

• a production build in both Storybook and the (legacy) docs site
• this codesandbox, naively trying to reproduce the component in which the warning happens

On the other hand, I can confirm the fix is not causing any other issues even with multiple instances of EuiPagination on the same page.

I would suggest we go ahead with this, in order to remove the warning in Kibana; and create a ticket to further explore the bug later on. I'm guessing it's coming from the logic in EuiI18n…

@mgadewoll what do you think?

[mgadewoll]

@mgadewoll what do you think?

Yes, I'm fine with this. Adding keys should not be an issue. We can dig deeper if needed in the future.
Just to be sure: Did you confirm that multiple instances don't cause trouble in EUI and Kibana?

[acstll]

Just to be sure: Did you confirm that multiple instances don't cause trouble in EUI and Kibana?

I did in EUI but I'm not sure now if I actually did in Kibana… Will double-check to be extra sure 👍

[acstll]

@mgadewoll no trouble 👍

[mgadewoll]

🚢 🐈‍⬛ Thanks for digging into this! 🎉

[kibanamachine]

Preview staging links for this PR:

• Docs site: https://eui.elastic.co/pr_8243/
• Storybook: https://eui.elastic.co/pr_8243/storybook
• New docs: https://eui.elastic.co/pr_8243/new-docs

[elasticmachine]

💚 Build Succeeded

• Buildkite Build
• Commit: 2b005e1

History

• 💔 Build #3300 failed d3e7e5e
• 💚 Build #3267 succeeded cd1f9e9
• 💔 Build #3261 failed 9f0bbd7
• 💚 Build #3257 succeeded 13b99fd