Skip to content

fix: Data browser pagination is ignored when using browser navigation or page reload #3097

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
mtrezza merged 1 commit into from
Dec 28, 2025
Merged

fix: Data browser pagination is ignored when using browser navigation or page reload #3097

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
108 changes: 92 additions & 16 deletions src/dashboard/Data/Browser/Browser.react.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -203,6 +203,7 @@ class Browser extends DashboardView {
this.fetchRelationCount = this.fetchRelationCount.bind(this);
this.fetchNextPage = this.fetchNextPage.bind(this);
this.updateFilters = this.updateFilters.bind(this);
this.updateURL = this.updateURL.bind(this);
this.showRemoveColumn = this.showRemoveColumn.bind(this);
this.showDeleteRows = this.showDeleteRows.bind(this);
this.showDropClass = this.showDropClass.bind(this);
Expand Down Expand Up @@ -549,6 +550,7 @@ class Browser extends DashboardView {

async prefetchData(props, context) {
const filters = this.extractFiltersFromQuery(props);
const pagination = this.extractPaginationFromQuery(props);
const { className, entityId, relationName } = props.params;
const isRelationRoute = entityId && relationName;

Expand All @@ -563,6 +565,11 @@ class Browser extends DashboardView {
const parent = await parentObjectQuery.get(entityId, { useMasterKey });
relation = parent.relation(relationName);
}

// Use pagination from URL if available, otherwise keep current state or use defaults
const skip = pagination.skip;
const limit = pagination.limit !== null ? pagination.limit : this.state.limit;

this.setState(
{
data: isEditFilterMode ? [] : null, // Set empty array in edit mode to avoid loading
Expand All @@ -571,6 +578,8 @@ class Browser extends DashboardView {
ordering: ColumnPreferences.getColumnSort(false, context.applicationId, className),
selection: {},
relation: isRelationRoute ? relation : null,
skip,
limit,
},
() => {
// Only fetch data if not in edit filter mode
Expand Down Expand Up @@ -626,6 +635,66 @@ class Browser extends DashboardView {
return filters;
}

extractPaginationFromQuery(props) {
const pagination = { skip: 0, limit: null };
if (!props || !props.location || !props.location.search) {
return pagination;
}
const query = new URLSearchParams(props.location.search);
if (query.has('skip')) {
const skip = parseInt(query.get('skip'), 10);
if (!isNaN(skip) && skip >= 0) {
pagination.skip = skip;
}
}
if (query.has('limit')) {
const limit = parseInt(query.get('limit'), 10);
if (!isNaN(limit) && limit > 0) {
pagination.limit = limit;
}
}
return pagination;
}

updateURL(newSkip = null, newLimit = null) {
const source = this.props.params.className;
if (!source || this.state.relation) {
return; // Don't update URL for relations
}

const skip = newSkip !== null ? newSkip : this.state.skip;
const limit = newLimit !== null ? newLimit : this.state.limit;

// Build query parameters preserving existing ones
const currentUrlParams = new URLSearchParams(window.location.search);
const queryParams = new URLSearchParams();

// Preserve filters and filterId
if (currentUrlParams.has('filters')) {
queryParams.set('filters', currentUrlParams.get('filters'));
}
if (currentUrlParams.has('filterId')) {
queryParams.set('filterId', currentUrlParams.get('filterId'));
}
if (currentUrlParams.has('editFilter')) {
queryParams.set('editFilter', currentUrlParams.get('editFilter'));
}

// Add pagination parameters (only if non-default)
if (skip > 0) {
queryParams.set('skip', skip.toString());
}
if (limit !== 100) { // Only include limit if it's not the default
queryParams.set('limit', limit.toString());
}

const queryString = queryParams.toString();
const url = queryString ? `browser/${source}?${queryString}` : `browser/${source}`;

// Push new history entry instead of replacing to enable browser back button
this.props.navigate(generatePath(this.context, url));
}

redirectToFirstClass(classList, context) {
if (!classList.isEmpty()) {
const classes = Object.keys(classList.toObject());
Expand Down Expand Up @@ -1327,23 +1396,26 @@ class Browser extends DashboardView {
const currentUrlParams = new URLSearchParams(window.location.search);
const currentFilterId = currentUrlParams.get('filterId');

let url = `browser/${source}`;
if (filters.size === 0) {
// If no filters, don't include any query parameters
url = `browser/${source}`;
} else {
// Build query parameters
const queryParams = new URLSearchParams();
// Build query parameters
const queryParams = new URLSearchParams();

if (filters.size > 0) {
queryParams.set('filters', _filters);
}

// Preserve filterId if it exists in current URL
if (currentFilterId) {
queryParams.set('filterId', currentFilterId);
}
// Preserve filterId if it exists in current URL
if (currentFilterId) {
queryParams.set('filterId', currentFilterId);
}

url = `browser/${source}?${queryParams.toString()}`;
// Preserve pagination if not default (skip is reset to 0 when filters change)
if (this.state.limit !== 100) {
queryParams.set('limit', this.state.limit.toString());
}

const queryString = queryParams.toString();
const url = queryString ? `browser/${source}?${queryString}` : `browser/${source}`;

// filters param change is making the fetch call
this.props.navigate(generatePath(this.context, url));
}
Expand Down Expand Up @@ -2656,14 +2728,18 @@ class Browser extends DashboardView {
<BrowserFooter
skip={this.state.skip}
setSkip={skip => {
this.setState({ skip });
this.updateOrdering(this.state.ordering);
this.setState({ skip }, () => {
this.updateURL(skip, null);
this.updateOrdering(this.state.ordering);
});
}}
count={count}
limit={this.state.limit}
setLimit={limit => {
this.setState({ limit });
this.updateOrdering(this.state.ordering);
this.setState({ limit, skip: 0 }, () => {
this.updateURL(0, limit); // Reset to first page when limit changes
this.updateOrdering(this.state.ordering);
});
}}
hasSelectedRows={Object.keys(this.state.selection).length > 0}
selectedRowsMessage={SELECTED_ROWS_MESSAGE}
Expand Down
Loading