Skip to content

Fix #1578: Refactor Instances/List.tsx to use URL state - #1579

Open
amanmaurya92 wants to merge 1 commit into
flatcar:mainfrom
amanmaurya92:fix-issue-1578
Open

Fix #1578: Refactor Instances/List.tsx to use URL state#1579
amanmaurya92 wants to merge 1 commit into
flatcar:mainfrom
amanmaurya92:fix-issue-1578

Conversation

@amanmaurya92

Copy link
Copy Markdown

Fix #1578: Refactor Instances list component to use URL as single source of truth for state

This PR refactors the Instances/List.tsx component to eliminate redundant local React state hooks (useState) for pagination, rows per page, sorting order, and filtering. Previously, the component maintained its own state in parallel with the browser's URL, which occasionally caused desynchronization and unnecessary re-renders.

By deriving the component's state directly from location.search via URLSearchParams on every render, the URL is now the single source of truth. The massive handleInstanceFetch function and fetchFiltersFromURL callbacks have been stripped down into a streamlined useEffect hook that listens directly to URL changes. This ensures that when users navigate history, share URLs, or manually interact with the Instances table, the state and the UI remain perfectly perfectly in sync.

How to use

  1. Run the backend and frontend development servers.
  2. Navigate to an Application's group instance list.
  3. Change the page or adjust the rows per page on the Instances table—verify the URL updates correctly and the new data loads.
  4. Apply the Status or Version filters, or search for instances—verify the URL and table reflect the changes.
  5. Click the browser's "Back" and "Forward" buttons—verify the component correctly reverts to the previous page/filter state without desynchronization.

Testing done

Executed the frontend linters, TypeScript compiler, and unit test suite successfully. The unit tests verify that the component mounts and behaves properly after the refactor.

Commands run:

npm run lint
npm run test

Output received:

Code style issues found in 208 files. Run Prettier with --write to fix. 
(No ESLint errors inside the edited file)

 Test Files  20 passed (20)
      Tests  79 passed (79)
   Start at  22:24:35
   Duration  8.58s (transform 2.88s, setup 716ms, import 37.55s, tests 2.95s, environment 48.89s)
  • Changelog entries added in the respective changelog/ directory (user-facing change, bug fix, security fix, update)
  • Inspected CI output for image differences: /boot and /usr size, packages, list files for any missing binaries, kernel modules, config files, kernel modules, etc.

@amanmaurya92
amanmaurya92 requested a review from a team as a code owner August 13, 2026 17:00
Signed-off-by: Aman Maurya <amanmaurya9209@gmail.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Refactor Instances/List.tsx to use URL as the single source of truth for component state

1 participant