[bhavya-s-eightfold]

SUMMARY:

The page size dropdown in Pagination ("10 / page", "20 / page", ...) showed no visual
selected state: the current page size looked identical to the other options, so users
(especially those with low vision, cognitive or memory limitations) could not tell which
option was selected.

Root cause: Octuple's Pagination builds the page-size menu items without setting active,
so MenuItem never applies its existing .active style.

Fix (Octuple PR #1177): set
active: item === _pageSize on each page-size menu item. MenuItem then applies its existing
.active background (--grey-background2-color, #d9dce1). Keyboard focus styling is
unchanged and stays visually distinct from the selected state.

Because this is in the shared Octuple Pagination component, it fixes every paginated table
that uses the page-size dropdown (e.g. Skills Design table and Skills Design Activity Log).

JIRA TASK:

https://eightfoldai.atlassian.net/browse/ENG-209973

GATE/CONFIG:

NA

CHECKLIST:

• This change impacts the following product areas and test plan includes steps to test:
  • AI Platform
  • AI Recruiter
  • CI
  • DP
  • Mobile Platform
  • PCS
  • TA
  • TD
  • TM
  • WFX
  • RM
• TEST PLAN
  • The test plan contains eightfolddemo group_ids that can be used for testing above product scenarios
• Regression Testing
  • This change could affect the performance (eg page load time) of
    • TA Pipeline
    • TA Profile
    • TA Homepage
    • TA Events
    • PCS
    • TM Marketplace
    • TM Home
    • TM Profile
    • Other: _________
  • This change adds new react dependencies and the increase in JS bundle is: _______
  • This change modifies common backend/python package(s) and the output of performance benchmark is: _______
  • This change materially affects memory used on backend (eg loading many db objects) or user's browser: _____
  • The test plan contains Before vs After latency for affected pages measured using debug=1
  • The test plan contains steps for regression testing
  • Regression testing is not required because _______
• Gate Control
  • IF the change is gated, the test plan contains instructions for testing with and without the gate enabled. Make sure to run all related pytests locally with the gate enabled in config_local.py - this helps catch any related test failures on build, before the PR is merged.
  • IF the change is not gated, it is because:
    • It is a performance improvement that's safe to rollout
    • It is a critical security fix that's safe to rollout
    • It is a bug-fix/usability fix that is common for all group_ids and safe to rollout
    • There is no UX/functionality change/no customer impact
    • Other reason (justify): _____
• Keep it simple
  • This change is easy to read, review, debug and maintain
  • This is a small or medium sized change (less than 100 lines excluding tests)
  • This is a large change to support a new customer facing functionality
  • This is a large change for refactoring/internal monitoring/etc., and is discouraged unless absolutely necessary, with a very solid launch monitoring plan added to the TEST PLAN
• Handle Edge cases gracefully
  • None return values are handled gracefully
  • Undefined/Null return values are handled in react/JS gracefully
  • API errors have been handled in react to show correct user facing message
  • Backend service errors (search, microservice etc) have been handled correctly in python
• Product Security
  • User authentication is checked (eg @decorators.login_required)
  • User permissions are checked to avoid priviledge escalation (eg current_user.has_permissions etc)
  • User input is validated to avoid input with XSS (eg html string) or vulnerable file uploads
  • Not applicable
• Testing
  • Tests (Python, Selenium/Playwright) cover the exact changes being made in this PR and will avoid future breakage of this change.
    (Jest unit test added in Octuple Pagination.test.tsx; it fails without the fix.)
  • No additional tests are needed because _____
• UI-Visible Strings
  • User visible strings are introduced or modified in this PR.
    • All user visible strings have been tagged correctly for i18n.
    • All new user visible strings are behind a gate. (Translations are not immediately available.)
  • No user visible strings are introduced in this PR.
• A11y Compliance
  • This PR contains UI changes.
    • Author has tested the relevant page(s) using keyboard navigation and a screen reader (VoiceOver, NVDA, etc.).
    • [] Author has scanned pages with axe DevTools and included before/after screenshots in the PR description to ensure no new a11y issues are introduced.
  • This PR does not contain any UI changes.
• AI Recruiter
  • Not applicable - This change does not impact AI Recruiter functionality.
  • This change impacts AI Recruiter functionality and the end to end test plan has been verified.
• Sandbox Refresh
  • Not Applicable - This change is not related to DjSafe Schema.
  • The DjSafe Schema change has been tested according to this test plan
• This change is critical to be released in next push - eg., it fixes an important bug, or a customer is waiting for this change.
• PR Description for customer release
  • Description not required: Choose this option only if your change is minor and will not impact customer workings
  • Description [Choose this option if your change has a customer impact. Changelog message for the review of QA team, example: frontend changes, major bug fix, big feature addon etc]: Accessibility: the page-size dropdown in paginated tables (e.g. "10 / page") now visually highlights the currently selected option.
• The change requires deploying all the services. I've gone through the guidelines for deploying all the services

TEST PLAN:

group_id used: demo@eightfolddemo-bhavya.com

Unit (Octuple):

• npx jest src/components/Pagination → 11/11 pass. New test "Pagination should visually
  indicate the selected page size option" asserts the current size option has the active
  class and the other does not; it fails when the fix is removed.

Manual (local Octuple build synced into vscode, verified on dev box):

1. Login → App switcher → Job Intelligence Engine → Skills Design.
2. Scroll to the pagination at the bottom of the skills table, open "50 / page".
   Expected: "50 / page" has a grey highlight; other options do not.
3. Select "20 / page", reopen the dropdown. Expected: highlight moves to "20 / page".
4. Skills Design → ⋮ → Activity log (needs 11+ entries) → "10 / page" dropdown.
   Expected: same as steps 2–3.

Regression:

• Ran Octuple test suites for Table, Pagination, Menu, Dropdown, Select with the fix:
  28 suites / 393 tests / 71 snapshots passed.
• Table with Activity-Log-style pagination (sizes 10/20, 25 rows): page size change
  10 → 20 updates rows (10 → 20) and pages (3 → 2); selected option highlight
  follows the change.
• Verified on dev box: Skills Design table "/ page" dropdown (screenshots below).

Before (no selected indicator):

After (current page size highlighted):

Known note for reviewers: the selected background (#d9dce1) on white is ~1.4:1 contrast.
It reuses the existing Octuple Menu active token; a stronger indicator would need design input.

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

[bhavya-s-eightfold]

needs_sandbox:2

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 85.46%. Comparing base (f39c1bf) to head (4a6e37b).

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #1177   +/-   ##
=======================================
  Coverage   85.46%   85.46%           
=======================================
  Files        1231     1231           
  Lines       21780    21780           
  Branches     8295     8295           
=======================================
+ Hits        18614    18615    +1     
  Misses       3078     3078           
+ Partials       88       87    -1     

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

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.