fix: hide assigned employees from time-off add list (SDK-894) (#1843)

* fix: hide assigned employees from time-off add list (SDK-894)

Refactor SelectEmployees to be add-only with full client-side filter,
search, and pagination. Resolves the empty-page bug where server-paginated
results were filtered client-side, producing visually empty pages after
adding employees from the first page.

Also filters out employees with a future hire_date to prevent the
"ineligible employees" 422 from the add-employees endpoint.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

* refactor: gate DataTable select-all on row count, drop local override

Mirror DataCards' empty-data behavior in DataTable so the select-all
header checkbox auto-hides when there are no rows. Removes the
consumer-side hideSelectAll={employees.length === 0} from
SelectEmployeesPresentation since it's now automatic.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

* test: direct unit coverage for hideSelectAll/hideSearch/isStartedByToday + multi-page fetch

- DataTable & DataCards: tests for hideSelectAll opt-out and empty-data
  auto-hide of the select-all control.
- EmployeeTable: tests for hideSearch prop (search container hidden when
  true, rendered when false).
- isStartedByToday: edge-case unit tests (undefined, empty string,
  today exactly, past, +1 day, far future) with system time pinned.
- useSelectEmployeesData multi-page: integration tests covering the
  x-total-pages header branch — no extra queries when totalPages is 1,
  buildEmployeesListQuery fires for pages 2..N when >1, and pages merge
  into the displayed list.

Also documents the implicit per-origin concurrency ceiling in
useSelectEmployeesData (no explicit cap on parallel page fetches).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

* test: direct coverage for pagination handlers and safeCurrentPage clamp

renderHook-based tests for useSelectEmployeesData pagination state machine:
- handleFirstPage / handleLastPage / handleNextPage / handlePreviousPage
  including clamps at 1 and totalPages
- handleItemsPerPageChange resets currentPage to 1 and is a no-op when
  the value matches
- handleSearchChange / handleSearchClear reset currentPage to 1
- safeCurrentPage clamps when a search shrinks totalPages below the
  user's current page

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

* refactor: replace custom pagination with useClientPagination (#1887)

* refactor: replace custom pagination with useClientPagination

Drops the hand-rolled in-memory pagination/search state machine from
`useSelectEmployeesData` in favor of the newly merged `useClientPagination`
hook. Same external behavior — multi-page fetch, future-hire-date filter,
hide-assigned filter, search + pagination — but ~60 fewer lines and one
shared implementation across the SDK.

The hook's built-in 120ms search debounce is now active for this flow as
a bonus. Tests updated to wait for the debounce instead of asserting
synchronously after `userEvent.type`.

Co-authored-by: Cursor <cursoragent@cursor.com>

* docs: regenerate endpoint inventory after SelectEmployees add-only refactor

Aaron's #1843 dropped the `removeEmployees` mutations from
SelectEmployeesHoliday and SelectEmployeesTimeOff (the add-only flow per
SDK-894), but the derived endpoint inventory wasn't regenerated. Picked up
by the pre-commit hook on this stacked PR.

No source change here — just the output of `build/deriveEndpointInventory.ts`.

Co-authored-by: Cursor <cursoragent@cursor.com>

* fix: restore isHolidayPolicy prop on SelectEmployeesPresentation

When the SDK-894 branch was rebased onto main, the add-only SelectEmployees
components were checked out wholesale from the pre-rebase tip, which
predated Kristine's #1849 fix. That re-introduced the bug where the
description ternary keyed off `showReassignmentWarning` — meaning sick
and vacation policies (which often skip the reassignment warning) showed
the holiday description by mistake.

Reapply #1849's `isHolidayPolicy` prop:
- `SelectEmployeesPresentationTypes.ts`: add the prop
- `SelectEmployeesPresentation.tsx`: gate the description ternary on it
- `SelectEmployeesHoliday.tsx`: pass it
- stories: add a HolidayPolicy story
- tests: assert on `isHolidayPolicy` (and a default "renders description")

Co-authored-by: Cursor <cursoragent@cursor.com>

---------

Co-authored-by: Cursor <cursoragent@cursor.com>

* fix: improve HolidayPolicyDetail pagination test reliability

Replace waitFor + getByText with findByText for pagination assertions
to make the test more robust in CI environments. findByText has built-in
retrying and better timeout handling for async state updates.

* fix: correct API mock format in HolidayPolicyDetail tests

The embedded-api expects:
- Array response (not wrapped in object)
- snake_case field names (auto-transformed to camelCase)
- Pagination headers (x-total-pages, x-total-count)

Also improved test reliability by using findByText instead of
waitFor + getByText for better async handling in CI environments.

* fix: use findByText for all async assertions in pagination test

Changed Person11 assertion to also use findByText for consistent
async handling across all pagination-related assertions.

* fix: improve HolidayPolicyDetail test isolation

- Move userEvent.setup() into beforeEach for proper test isolation
- Increase findByText timeout to 5000ms for pagination tests to handle
  timing variations when running with full test suite
- Prevents test failures due to shared userEvent instance

* fix: use waitFor wrapper for findByText in pagination test

Wrap findByText in waitFor with explicit timeout to ensure proper
timing when navigating to second page in multi-test environment.

* fix: increase HolidayPolicyDetail pagination test timeout for CI

The pagination test timed out in CI (5s default) because Suspense
resolution + user interaction + state updates exceed that under load.

- Replace nested waitFor(findByText) antipattern with plain findByText
- Add explicit 15s test timeout to both pagination tests

---------

Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Co-authored-by: Jeffrey D Johnson <jeffredodd@users.noreply.github.com>
Co-authored-by: Cursor <cursoragent@cursor.com>
Co-authored-by: Kristine White <kristine.white@gusto.com>
Co-authored-by: Kristine White <kristinenicolemartin@gmail.com>

Author: 5 people

docs/reference/endpoint-inventory.json

@@ -1517,10 +1517,6 @@
         {
           "method": "PUT",
           "path": "/v1/time_off_policies/:timeOffPolicyUuid/add_employees"
-        },
-        {
-          "method": "PUT",
-          "path": "/v1/time_off_policies/:timeOffPolicyUuid/remove_employees"
         }
       ],
       "variables": [
@@ -1560,10 +1556,6 @@
         {
           "method": "PUT",
           "path": "/v1/companies/:companyUuid/holiday_pay_policy/add"
-        },
-        {
-          "method": "PUT",
-          "path": "/v1/companies/:companyUuid/holiday_pay_policy/remove"
         }
       ],
       "variables": [

docs/reference/endpoint-reference.md

@@ -286,14 +286,12 @@ import inventory from '@gusto/embedded-react-sdk/endpoint-inventory.json'
 |  | GET | `/v1/time_off_policies/:timeOffPolicyUuid` |
 |  | PUT | `/v1/time_off_policies/:timeOffPolicyUuid` |
 |  | PUT | `/v1/time_off_policies/:timeOffPolicyUuid/add_employees` |
-|  | PUT | `/v1/time_off_policies/:timeOffPolicyUuid/remove_employees` |
 | **TimeOff.HolidaySelectionForm** | GET | `/v1/companies/:companyUuid/holiday_pay_policy` |
 |  | POST | `/v1/companies/:companyUuid/holiday_pay_policy` |
 |  | PUT | `/v1/companies/:companyUuid/holiday_pay_policy` |
 | **TimeOff.AddEmployeesHoliday** | GET | `/v1/companies/:companyId/employees` |
 |  | GET | `/v1/companies/:companyUuid/holiday_pay_policy` |
 |  | PUT | `/v1/companies/:companyUuid/holiday_pay_policy/add` |
-|  | PUT | `/v1/companies/:companyUuid/holiday_pay_policy/remove` |
 | **TimeOff.ViewHolidayEmployees** | GET | `/v1/companies/:companyId/employees` |
 |  | GET | `/v1/companies/:companyUuid/holiday_pay_policy` |
 |  | PUT | `/v1/companies/:companyUuid/holiday_pay_policy/remove` |

src/components/Common/DataView/DataCards/DataCards.test.tsx

@@ -114,6 +114,13 @@ describe('DataCards', () => {
       await userEvent.click(screen.getAllByRole('checkbox')[0] as HTMLElement)
       expect(onSelectAllMock).toHaveBeenCalledWith(false, testData)
     })
+
+    test('does not render select-all checkbox when hideSelectAll is true', () => {
+      renderCards({ ...selectableProps, hideSelectAll: true })
+      expect(screen.queryByLabelText('Select all rows')).not.toBeInTheDocument()
+      // Per-row checkboxes should still render.
+      expect(screen.getAllByRole('checkbox')).toHaveLength(testData.length)
+    })
   })
 
   test('should render empty state with proper accessibility structure when emptyState is provided', () => {

src/components/Common/DataView/DataCards/DataCards.tsx

@@ -16,6 +16,7 @@ export type DataCardsProps<T> = {
   onSelect?: (item: T, checked: boolean) => void
   onSelectAll?: (checked: boolean, visibleData: T[]) => void
   getIsItemSelected?: (item: T) => boolean
+  hideSelectAll?: useDataViewPropReturn<T>['hideSelectAll']
   emptyState?: useDataViewPropReturn<T>['emptyState']
   footer?: useDataViewPropReturn<T>['footer']
   selectionMode?: SelectionMode
@@ -30,6 +31,7 @@ export const DataCards = <T,>({
   onSelect,
   onSelectAll,
   getIsItemSelected,
+  hideSelectAll,
   emptyState,
   footer,
   selectionMode = 'multiple',
@@ -73,15 +75,19 @@ export const DataCards = <T,>({
 
   return (
     <div className={cn(styles.root, isWithinBox && styles.withinBox)} data-testid="data-cards">
-      {onSelect && getIsItemSelected && selectionMode === 'multiple' && data.length > 0 && (
-        <div className={styles.selectAllRow}>
-          <Components.Checkbox
-            value={allSelected}
-            onChange={(checked: boolean) => onSelectAll?.(checked, data)}
-            label={t('card.selectAllRowsLabel')}
-          />
-        </div>
-      )}
+      {onSelect &&
+        getIsItemSelected &&
+        selectionMode === 'multiple' &&
+        !hideSelectAll &&
+        data.length > 0 && (
+          <div className={styles.selectAllRow}>
+            <Components.Checkbox
+              value={allSelected}
+              onChange={(checked: boolean) => onSelectAll?.(checked, data)}
+              label={t('card.selectAllRowsLabel')}
+            />
+          </div>
+        )}
       <div role="list" aria-label={label}>
         {data.length === 0 && emptyState && (
           <div role="listitem">

src/components/Common/DataView/DataTable/DataTable.test.tsx

@@ -141,6 +141,17 @@ describe('DataTable Component', () => {
       expect(screen.queryByRole('checkbox')).not.toBeInTheDocument()
       expect(screen.getAllByRole('radio')).toHaveLength(testData.length)
     })
+
+    test('does not render a header checkbox when hideSelectAll is true', () => {
+      renderTable({ ...selectableProps, hideSelectAll: true })
+      // Only the per-row checkboxes should be present.
+      expect(screen.getAllByRole('checkbox')).toHaveLength(testData.length)
+    })
+
+    test('does not render a header checkbox when data is empty', () => {
+      renderTable({ ...selectableProps, data: [] })
+      expect(screen.queryByRole('checkbox')).not.toBeInTheDocument()
+    })
   })
 
   test('should render itemMenu when provided', () => {

src/components/Common/DataView/DataTable/DataTable.tsx

@@ -14,6 +14,7 @@ export type DataTableProps<T> = {
   onSelect?: useDataViewPropReturn<T>['onSelect']
   onSelectAll?: (checked: boolean, visibleData: T[]) => void
   getIsItemSelected?: (item: T) => boolean
+  hideSelectAll?: useDataViewPropReturn<T>['hideSelectAll']
   emptyState?: useDataViewPropReturn<T>['emptyState']
   footer?: useDataViewPropReturn<T>['footer']
   isWithinBox?: TableProps['isWithinBox']
@@ -44,6 +45,7 @@ export const DataTable = <T,>({
   onSelect,
   onSelectAll,
   getIsItemSelected,
+  hideSelectAll,
   emptyState,
   footer,
   isWithinBox,
@@ -61,7 +63,10 @@ export const DataTable = <T,>({
           {
             key: 'select-header',
             content:
-              selectionMode === 'multiple' && getIsItemSelected ? (
+              selectionMode === 'multiple' &&
+              getIsItemSelected &&
+              !hideSelectAll &&
+              data.length > 0 ? (
                 // Stop propagation so the surrounding react-aria-components
                 // <Column> press handler doesn't intercept the checkbox click
                 // and desync the controlled DOM state. The inner <input> is

src/components/Common/DataView/DataView.tsx

@@ -17,6 +17,7 @@ export type DataViewProps<T> = {
   onSelect?: useDataViewPropReturn<T>['onSelect']
   onSelectAll?: useDataViewPropReturn<T>['onSelectAll']
   getIsItemSelected?: (item: T) => boolean
+  hideSelectAll?: useDataViewPropReturn<T>['hideSelectAll']
   breakAt?: string
   breakpoints?: useContainerBreakpointsProps['breakpoints']
   footer?: useDataViewPropReturn<T>['footer']

src/components/Common/DataView/useDataView.ts

@@ -25,6 +25,12 @@ type BaseDataViewProps<T> = {
   emptyState?: () => React.ReactNode
   footer?: () => Partial<Record<FooterKeys<T>, React.ReactNode>>
   isFetching?: boolean
+  /**
+   * When true, hides the select-all header checkbox (DataTable) and the
+   * select-all row (DataCards). Only meaningful with `selectionMode: 'multiple'`.
+   * Per-row checkboxes are unaffected.
+   */
+  hideSelectAll?: boolean
 }
 
 type NoSelectionProps = {
@@ -69,6 +75,7 @@ export type useDataViewPropReturn<T> = {
   onSelect?: (item: T, checked: boolean) => void
   onSelectAll?: (checked: boolean, visibleData: T[]) => void
   getIsItemSelected?: (item: T) => boolean
+  hideSelectAll?: boolean
   emptyState?: () => React.ReactNode
   footer?: () => Partial<Record<FooterKeys<T>, React.ReactNode>>
   isFetching?: boolean
@@ -82,6 +89,7 @@ export const useDataView = <T>({
   onSelect,
   onSelectAll,
   getIsItemSelected,
+  hideSelectAll,
   pagination,
   emptyState,
   footer,
@@ -97,6 +105,7 @@ export const useDataView = <T>({
       onSelect,
       onSelectAll,
       getIsItemSelected,
+      hideSelectAll,
       emptyState,
       footer,
       isFetching,
@@ -110,6 +119,7 @@ export const useDataView = <T>({
     onSelect,
     onSelectAll,
     getIsItemSelected,
+    hideSelectAll,
     emptyState,
     footer,
     isFetching,

src/components/TimeOff/HolidayPolicyDetail/HolidayPolicyDetail.test.tsx

@@ -64,7 +64,12 @@ describe('HolidayPolicyDetail', () => {
         return HttpResponse.json(mockHolidayPayPolicy)
       }),
       http.get(`${API_BASE_URL}/v1/companies/:companyId/employees`, () => {
-        return HttpResponse.json(mockEmployees)
+        return HttpResponse.json(mockEmployees, {
+          headers: {
+            'x-total-pages': '1',
+            'x-total-count': mockEmployees.length.toString(),
+          },
+        })
       }),
     )
   })

src/components/TimeOff/TimeOffManagement/SelectEmployees/SelectEmployeesHoliday.test.tsx

@@ -18,14 +18,14 @@ const mockEmployees = [
     uuid: '1',
     firstName: 'Alice',
     lastName: 'Smith',
-    jobs: [{ primary: true, title: 'Engineer' }],
+    jobs: [{ primary: true, title: 'Engineer', hireDate: '2024-01-01' }],
     department: 'Engineering',
   },
   {
     uuid: '2',
     firstName: 'Bob',
     lastName: 'Jones',
-    jobs: [{ primary: true, title: 'Designer' }],
+    jobs: [{ primary: true, title: 'Designer', hireDate: '2024-01-01' }],
     department: 'Design',
   },
 ]
@@ -71,13 +71,6 @@ vi.mock('@gusto/embedded-api/react-query/holidayPayPoliciesAddEmployees', () =>
   }),
 }))
 
-vi.mock('@gusto/embedded-api/react-query/holidayPayPoliciesRemoveEmployees', () => ({
-  useHolidayPayPoliciesRemoveEmployeesMutation: () => ({
-    mutateAsync: vi.fn(),
-    isPending: false,
-  }),
-}))
-
 vi.mock('@/components/Base/useBase', () => ({
   useBase: () => ({
     onEvent: mockOnEvent,
@@ -113,6 +106,7 @@ describe('SelectEmployeesHoliday', () => {
     mockAddEmployees.mockResolvedValue({
       holidayPayPolicy: { companyUuid: 'company-123', version: 'abc123' },
     })
+    mockHolidayPolicyEmployees.length = 0
   })
 
   it('renders employee names from API data', async () => {
@@ -150,10 +144,12 @@ describe('SelectEmployeesHoliday', () => {
     const input = screen.getByPlaceholderText('searchPlaceholder')
     await user.type(input, 'bob')
 
+    // useClientPagination debounces search by 120ms before the predicate runs,
+    // so wait for the filter to settle rather than asserting immediately.
     await waitFor(() => {
-      expect(screen.getByText('Bob Jones')).toBeInTheDocument()
+      expect(screen.queryByText('Alice Smith')).not.toBeInTheDocument()
     })
-    expect(screen.queryByText('Alice Smith')).not.toBeInTheDocument()
+    expect(screen.getByText('Bob Jones')).toBeInTheDocument()
   })
 
   it('fires CANCEL when Back is clicked', async () => {
@@ -205,7 +201,7 @@ describe('SelectEmployeesHoliday', () => {
       const user = userEvent.setup()
       renderComponent({ mode: 'standalone' })
 
-      // 1 select-all header + 2 employees = 3 checkboxes
+      // select-all header + 2 employees = 3
       await waitFor(() => {
         expect(screen.getAllByRole('checkbox').length).toBe(3)
       })
@@ -227,52 +223,40 @@ describe('SelectEmployeesHoliday', () => {
         })
       })
     })
-  })
 
-  describe('pre-selection', () => {
-    it('pre-selects employees already on the holiday policy', async () => {
-      mockHolidayPolicyEmployees.length = 0
-      mockHolidayPolicyEmployees.push({ uuid: '1' })
+    it('emits DONE without calling mutation when nothing is selected', async () => {
+      const user = userEvent.setup()
+      renderComponent({ mode: 'standalone' })
 
-      try {
-        renderComponent({ mode: 'standalone' })
+      await waitFor(() => {
+        expect(screen.getByRole('button', { name: 'continueCta' })).toBeInTheDocument()
+      })
 
-        await waitFor(() => {
-          expect(screen.getAllByRole('checkbox').length).toBe(3)
-        })
+      await user.click(screen.getByRole('button', { name: 'continueCta' }))
 
-        const checkboxes = screen.getAllByRole('checkbox') as HTMLInputElement[]
-        expect(checkboxes[FIRST_EMPLOYEE_CHECKBOX]).toBeChecked()
-        expect(checkboxes[SECOND_EMPLOYEE_CHECKBOX]).not.toBeChecked()
-      } finally {
-        mockHolidayPolicyEmployees.length = 0
-      }
+      await waitFor(() => {
+        expect(mockOnEvent).toHaveBeenCalledWith(
+          componentEvents.TIME_OFF_HOLIDAY_ADD_EMPLOYEES_DONE,
+        )
+      })
+      expect(mockAddEmployees).not.toHaveBeenCalled()
     })
+  })
 
-    it('emits done event without calling mutations when nothing changed', async () => {
-      mockHolidayPolicyEmployees.length = 0
+  describe('existing assignees', () => {
+    it('filters existing holiday policy assignees out of the selectable list', async () => {
       mockHolidayPolicyEmployees.push({ uuid: '1' })
 
-      try {
-        const user = userEvent.setup()
-        renderComponent({ mode: 'standalone' })
-
-        await waitFor(() => {
-          expect(screen.getByRole('button', { name: 'continueCta' })).toBeInTheDocument()
-        })
-
-        await user.click(screen.getByRole('button', { name: 'continueCta' }))
+      renderComponent({ mode: 'standalone' })
 
-        await waitFor(() => {
-          expect(mockOnEvent).toHaveBeenCalledWith(
-            componentEvents.TIME_OFF_HOLIDAY_ADD_EMPLOYEES_DONE,
-          )
-        })
+      await waitFor(() => {
+        expect(screen.getByText('Bob Jones')).toBeInTheDocument()
+      })
 
-        expect(mockAddEmployees).not.toHaveBeenCalled()
-      } finally {
-        mockHolidayPolicyEmployees.length = 0
-      }
+      // Alice is already on the holiday policy and must not appear in the add list
+      expect(screen.queryByText('Alice Smith')).not.toBeInTheDocument()
+      // select-all header + Bob = 2 (Alice already on policy)
+      expect(screen.getAllByRole('checkbox').length).toBe(2)
     })
   })
 
@@ -302,7 +286,7 @@ describe('SelectEmployeesHoliday', () => {
       const user = userEvent.setup()
       renderComponent({ mode: 'wizard' })
 
-      // 1 select-all header + 2 employees = 3 checkboxes
+      // select-all header + 2 employees = 3
       await waitFor(() => {
         expect(screen.getAllByRole('checkbox').length).toBe(3)
       })