web/elements: add Paginator component and revise Table and DualSelect to use them.

[kensternberg-authentik]

web/elements/paginator: Add “paginator” to list of standarized elements

What

This commit adds a new element, ak-paginator, and replaces the two uses of pagination in our product: the progressive reveal in DualSelect, and the page selector in Table.

The Paginator is a revision of the React version component. It has been cut down to our use case, and the term “bottom” has been replaced with “compact”; a “compact” paginator has only the summary (hidden below 640px) and the next/prev indicators; a full size one has the summary, the “first/prev/next/last” indicators, and an input box so the user can navigate to any page. A pair of helper functions convert from the Django paginator format to the one used by Patternfly’s paginator. The paginator emits an event that clients are expected to respond to, and then update the paginator component when the page is valid and has been changed to.

The converters have 10 tests; there are 30 unit tests covering edge cases, keyboard interaction, and ARIA validation.

Both Table and DualSelect have had their ad-hoc implementations replaced with Paginator. The DualSelect storybook has been updated to work correctly with the PageChangeEvent.

Why

Well, for one thing, it’s not a great idea to multiple incompatible versions of the same component lying around.

For another, I’m about to add a third component that uses a paginator, and I didn’t want to add yet another paginator implementation to the mix. May as well clean it all up now.

---

Checklist

• [📖 The project has been linted, built, and tested (make all)
• [📖] The documentation has been updated and formatted (make docs)
• [📖] I have read the AI usage policy.

[netlify]

✅ Deploy Preview for authentik-docs ready!

Name	Link
🔨 Latest commit	b669ea0
🔍 Latest deploy log	https://app.netlify.com/projects/authentik-docs/deploys/6ab1b9d982873600080b4ee6
😎 Deploy Preview	https://deploy-preview-26327--authentik-docs.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 92.11%. Comparing base (f7fdbab) to head (580ac50).
⚠️ Report is 17 commits behind head on main.
✅ All tests successful. No failed tests found.

Additional details and impacted files

@@            Coverage Diff             @@
##             main   #26327      +/-   ##
==========================================
+ Coverage   92.02%   92.11%   +0.09%     
==========================================
  Files        1175     1176       +1     
  Lines       76438    76768     +330     
  Branches     4056     4121      +65     
==========================================
+ Hits        70343    70718     +375     
+ Misses       6053     5997      -56     
- Partials       42       53      +11     

Flag	Coverage Δ
conformance	33.34% <ø> (-0.11%)	⬇️
e2e	38.12% <ø> (-0.09%)	⬇️
integration	30.09% <ø> (-0.09%)	⬇️
rust	44.79% <ø> (+1.89%)	⬆️
unit	93.61% <ø> (+0.02%)	⬆️
unit-migrate	93.62% <ø> (+0.03%)	⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

[kensternberg-authentik]

There is a test to make sure there's no infinite loop.

[kensternberg-authentik]

Should fall through immediately instead of being trapped. Checks to make sure that a "change to the same page" event doesn't cause an infinite loop.

[github-actions]

Playwright e2e

Download this run's HTML report, traces and server logs, then open the report:

gh run download 35753422049 -D playwright-artifacts
npx playwright show-report playwright-artifacts/playwright-report

Installation instructions

Instructions for docker-compose

Add the following block to your .env file:

AUTHENTIK_IMAGE=ghcr.io/goauthentik/dev-server
AUTHENTIK_TAG=gh-580ac50fa8fc4f597bd8139c2d6f0f41c006878a
AUTHENTIK_OUTPOSTS__CONTAINER_IMAGE_BASE=ghcr.io/goauthentik/dev-%(type)s:gh-%(build_hash)s

Afterwards, run the upgrade commands from the latest release notes.

Instructions for Kubernetes

Add the following block to your values.yml file:

authentik:
    outposts:
        container_image_base: ghcr.io/goauthentik/dev-%(type)s:gh-%(build_hash)s
global:
    image:
        repository: ghcr.io/goauthentik/dev-server
        tag: gh-580ac50fa8fc4f597bd8139c2d6f0f41c006878a

Afterwards, run the upgrade commands from the latest release notes.