refactor: migrate options and datalist query hooks

[jonny5203]

Summary

• Add an optionsApi client and core query hooks for options and data lists.
• Move feature consumers from useAppQueries().fetchOptions / fetchDataList to the new query hook path while preserving URL construction, option normalization, headers, pagination, sorting, mappings, and query parameters.
• Update test helpers and component tests to mock through ApiProvider / optionsApi instead of legacy query functions.

Validation

• rg -n "fetchOptions|fetchDataList" src/App/frontend/src returns no matches.
• rg -n "useAppQueries" src/App/frontend/src/features/options src/App/frontend/src/features/dataLists returns no matches.
• yarn tsc
• yarn test src/features/options/useGetOptions.test.tsx src/layout/Dropdown/DropdownComponent.test.tsx src/layout/List/ListComponent.test.tsx src/layout/Checkboxes/CheckboxesContainerComponent.test.tsx src/layout/RadioButtons/ControlledRadioGroup.test.tsx src/layout/FileUpload/FileUploadComponent.test.tsx src/layout/FileUpload/Summary/AttachmentWithTagSummaryComponent.test.tsx src/layout/Likert/LikertComponent.test.tsx --runInBand

Note: the focused Jest run still prints existing jsdom window.getComputedStyle(elt, pseudoElt) console errors from design system popover code, but all listed suites pass.

Summary by CodeRabbit

• New Features

  • Added a central Options API client plus hooks to fetch option lists and data lists.

• Refactor

  • Unified option/data-list fetching across the app to use the new client and shared query factories.

• Tests

  • Updated test helpers and mocks to use the Options API client instead of legacy query mocks.

• Chores

  • Removed legacy fetch helpers and cleaned up related imports.

[coderabbitai]

Caution

Review failed

An error occurred during the review process. Please try again later.

📝 Walkthrough

Walkthrough

Centralises options fetching into a new OptionsApi client, exposes it via ApiProvider/useOptionsApi, adds React Query factories and core hooks, removes legacy fetchOptions/fetchDataList, refactors feature hooks to use core hooks, and updates tests and test utilities to mock the new API.

Changes

Options API Refactoring

Layer / File(s)	Summary
API Client Definition src/App/frontend/src/core/api-client/options.api.ts	New OptionsApi and module-local OptionsResponse; exports optionsApi with getOptions(url) returning { data, headers } and getDataList(url) returning IDataList.
Context Integration src/App/frontend/src/core/contexts/ApiProvider.tsx	ApiClients extended with optionsApi; defaultApis and context default include optionsApi; new useOptionsApi() hook exported.
Query Option Factories src/App/frontend/src/core/queries/options/options.queries.ts	Adds optionsQueryKeys and factory functions optionsQuery() / dataListQuery() that build query keys and call the API when URL present, otherwise use skipToken.
Core Query Hooks src/App/frontend/src/core/queries/options/index.ts	Exports useOptionsQuery(url, select?) and useDataListQuery(url) which obtain optionsApi from context and call useQuery with the factory options.
Feature Hook Refactoring src/App/frontend/src/features/dataLists/useDataListQuery.tsx, src/App/frontend/src/features/options/useGetOptionsQuery.ts	Feature hooks now delegate to core hooks; inline useQuery and useAppQueries() usages removed.
Legacy Query Removal src/App/frontend/src/queries/queries.ts	Removed fetchOptions() and fetchDataList() exports; adjusted networking/imports and consolidated related type imports.
Test Framework Update src/App/frontend/src/test/renderWithProviders.tsx	ApiOverrides now supports optionsApi?: Partial<OptionsApi>; default query mocks for options removed; default optionsApi mocks added; setupFakeApp merges custom apis.optionsApi.
Test Coverage Updates multiple test files under src/App/frontend/src/features/* and src/App/frontend/src/layout/*	Tests updated to provide apis.optionsApi.getOptions() / getDataList() mocks instead of legacy query mocks; removed AxiosResponse type imports; assertions updated to check API client calls.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Poem

🐰 I hopped through code, fetched options anew,

Contexts snug, and queries tidy too,
Hooks now whisper where the calls should go,
Tests mock the rabbit and the garden grows,
A soft refactor—carrots in the flow.

🚥 Pre-merge checks | ✅ 4

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and concisely summarises the main refactoring work: migrating options and datalist query hooks from legacy query functions to a new API-based approach.
Description check	✅ Passed	The description covers the main changes, validation steps performed, and references the code search results confirming migration completion, but does not explicitly verify all template sections including manual testing.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

Tip

💬 Introducing Slack Agent: The best way for teams to turn conversations into code.

Slack Agent is built on CodeRabbit's deep understanding of your code, so your team can collaborate across the entire SDLC without losing context.

• Generate code and open pull requests
• Plan features and break down work
• Investigate incidents and troubleshoot customer tickets together
• Automate recurring tasks and respond to alerts with triggers
• Summarize progress and report instantly

Built for teams:

• Shared memory across your entire org—no repeating context
• Per-thread sandboxes to safely plan and execute work
• Governance built-in—scoped access, auditability, and budget controls

One agent for your entire SDLC. Right inside Slack.

👉 Get started

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 2

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@src/App/frontend/src/features/options/useGetOptionsQuery.ts`:
- Around line 20-29: Remove the `as UseQueryResult<...>` cast in
useGetOptionsQuery and instead make the function and upstream call(s) return the
correct typed result: update useOptionsQuery's generic/return type (or add a
properly typed intermediate variable) so that when you build the transformed
result (using castOptionsToStrings on result.data.data and preserving
result.data.headers) the TypeScript compiler infers the exact type { data:
IOptionInternal[]; headers: AxiosResponse['headers'] } | null; ensure
useGetOptionsQuery's signature reflects that return type and return the
transformed object without any `as` cast, referencing the functions
useGetOptionsQuery, useOptionsQuery, and castOptionsToStrings to locate the
change.

In `@src/App/frontend/src/queries/queries.ts`:
- Line 167: fetchProcessState references a missing helper and type:
getProcessStateUrl is not defined/exported from appUrlHelper and IProcess is not
imported here; either add a getProcessStateUrl(instanceId: string) export to
appUrlHelper (mirroring getProcessNextUrl semantics) and import IProcess from
src/types/shared into this file, or remove/replace fetchProcessState with the
correct existing call (e.g., use getProcessNextUrl if that was intended) and
remove the IProcess usage; update the import list and ensure fetchProcessState
uses the newly added getProcessStateUrl or the correct helper.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 4beb9134-610b-4293-953c-68eb1c6d7ed2

📥 Commits

Reviewing files that changed from the base of the PR and between a55c181 and 275c929.

📒 Files selected for processing (16)

• src/App/frontend/src/core/api-client/options.api.ts
• src/App/frontend/src/core/contexts/ApiProvider.tsx
• src/App/frontend/src/core/queries/options/index.ts
• src/App/frontend/src/core/queries/options/options.queries.ts
• src/App/frontend/src/features/dataLists/useDataListQuery.tsx
• src/App/frontend/src/features/options/useGetOptions.test.tsx
• src/App/frontend/src/features/options/useGetOptionsQuery.ts
• src/App/frontend/src/layout/Checkboxes/CheckboxesContainerComponent.test.tsx
• src/App/frontend/src/layout/Dropdown/DropdownComponent.test.tsx
• src/App/frontend/src/layout/FileUpload/FileUploadComponent.test.tsx
• src/App/frontend/src/layout/FileUpload/Summary/AttachmentWithTagSummaryComponent.test.tsx
• src/App/frontend/src/layout/Likert/LikertTestUtils.tsx
• src/App/frontend/src/layout/List/ListComponent.test.tsx
• src/App/frontend/src/layout/RadioButtons/ControlledRadioGroup.test.tsx
• src/App/frontend/src/queries/queries.ts
• src/App/frontend/src/test/renderWithProviders.tsx

[jonny5203]

Hi @adamhaeger can you take a look at this, it is a fix for issue #18175