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

[amanmaurya92]

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

Description

Currently, the ListView component for displaying instances maintains internal component state for pagination, sorting, and filtering parameters while also trying to sync these with the URL search parameters. This dual-state management is flagged by an inline TODO and can lead to state desynchronization.

The Problem

In frontend/src/components/Instances/List.tsx, around line 157, the component initializes several local states via React.useState:

  /*TODO: use the URL as the single source of truth and remove states */
  const [page, setPage] = React.useState(0);
  const [rowsPerPage, setRowsPerPage] = React.useState(10);
  const [isDescSortOrder, setIsDescSortOrder] = React.useState(false);
  const [sortQuery, setSortQuery] = React.useState(InstanceSortFilters['last-check']);
  const [filters, setFilters] = React.useState<{ [key: string]: any }>({
    status: '',
    version: '',
// ...

By keeping these values in local state, the component risks falling out of sync with the URL. This can cause bugs when:

1. A user shares a link with specific filters/pagination, but the local state overrides it upon initial render.
2. A user uses the browser's "Back" or "Forward" buttons, changing the URL but not triggering a local state update.

Proposed Solution

To follow React best practices, the URL should act as the single source of truth for all shareable UI states (pagination, sorting, filtering).

1. Remove the React.useState hooks for page, rowsPerPage, isDescSortOrder, sortQuery, and filters.
2. Refactor the component to read its initial and ongoing state exclusively from React Router's URL parameters (e.g., using useSearchParams or useLocation).
3. Update the interaction handlers (e.g., when a user clicks "Next Page" or selects a filter) to update the URL directly via React Router navigation instead of setting local state.

Affected Files

• frontend/src/components/Instances/List.tsx

[amanmaurya92]

/assign