Skip to content

ref(insights): Update laravel/nextjs cursor logic #102303

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
merged 3 commits into from
Oct 30, 2025
+17 −75
Merged

ref(insights): Update laravel/nextjs cursor logic #102303

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
7735cad
ref(insights): Update laravel/nextjs cursor logic
priscilawebdev Oct 29, 2025
ffd6ca8
Merge branch 'master' into priscila/ref/insights/update-laravel-and-n…
priscilawebdev Oct 29, 2025
17c3212
cursor feedback
priscilawebdev Oct 29, 2025
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
13 changes: 6 additions & 7 deletions static/app/views/insights/agents/components/headSortCell.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import SortLink from 'sentry/components/tables/gridEditable/sortLink';
import type {QueryValue} from 'sentry/utils/queryString';
import useLocationQuery from 'sentry/utils/url/useLocationQuery';
import {useLocation} from 'sentry/utils/useLocation';
import {TableUrlParams} from 'sentry/views/insights/agents/utils/urlParams';

function decodeSortField(value: QueryValue): string {
if (typeof value === 'string') {
Expand All @@ -27,8 +28,8 @@ function decodeSortOrder(value: QueryValue): 'asc' | 'desc' {
export function useTableSortParams() {
const {field: sortField, order: sortOrder} = useLocationQuery({
fields: {
field: decodeSortField,
order: decodeSortOrder,
[TableUrlParams.SORT_FIELD]: decodeSortField,
[TableUrlParams.SORT_ORDER]: decodeSortOrder,
},
});
return {sortField, sortOrder};
Expand All @@ -39,13 +40,11 @@ export const HeadSortCell = memo(function HeadCell({
children,
align = 'left',
forceCellGrow = false,
cursorParamName = 'cursor',
onClick,
}: {
children: React.ReactNode;
sortKey: string;
align?: 'left' | 'right';
cursorParamName?: string;
forceCellGrow?: boolean;
onClick?: (sortKey: string, newDirection: 'asc' | 'desc') => void;
}) {
Expand All @@ -64,9 +63,9 @@ export const HeadSortCell = memo(function HeadCell({
...location,
query: {
...location.query,
[cursorParamName]: undefined,
field: sortKey,
order: newDirection,
[TableUrlParams.CURSOR]: undefined,
[TableUrlParams.SORT_FIELD]: sortKey,
[TableUrlParams.SORT_ORDER]: newDirection,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Bug: URL Param Mismatch Breaks Table Sorting

The HeadSortCell component now writes sort parameters to the URL using TableUrlParams.SORT_FIELD and TableUrlParams.SORT_ORDER. However, the useTableSortParams hook still reads from hardcoded 'field' and 'order' keys. This mismatch means the component writes to one set of URL parameters but reads from another, causing sorting functionality to break.

Fix in Cursor Fix in Web

},
})}
onClick={() => onClick?.(sortKey, newDirection)}
Expand Down
2 changes: 0 additions & 2 deletions static/app/views/insights/agents/components/modelsTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,6 @@ import {ErrorCell} from 'sentry/views/insights/agents/utils/cells';
import {formatLLMCosts} from 'sentry/views/insights/agents/utils/formatLLMCosts';
import {getAIGenerationsFilter} from 'sentry/views/insights/agents/utils/query';
import {Referrer} from 'sentry/views/insights/agents/utils/referrers';
import {TableUrlParams} from 'sentry/views/insights/agents/utils/urlParams';
import {ChartType} from 'sentry/views/insights/common/components/chart';
import {TextAlignRight} from 'sentry/views/insights/common/components/textAlign';
import {useSpans} from 'sentry/views/insights/common/queries/useDiscover';
Expand Down Expand Up @@ -155,7 +154,6 @@ export function ModelsTable() {
return (
<HeadSortCell
sortKey={column.key}
cursorParamName={TableUrlParams.CURSOR}
forceCellGrow={column.key === 'model'}
align={rightAlignColumns.has(column.key) ? 'right' : undefined}
onClick={handleSort}
Expand Down
2 changes: 0 additions & 2 deletions static/app/views/insights/agents/components/toolsTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,6 @@ import {useCombinedQuery} from 'sentry/views/insights/agents/hooks/useCombinedQu
import {useTableCursor} from 'sentry/views/insights/agents/hooks/useTableCursor';
import {ErrorCell} from 'sentry/views/insights/agents/utils/cells';
import {Referrer} from 'sentry/views/insights/agents/utils/referrers';
import {TableUrlParams} from 'sentry/views/insights/agents/utils/urlParams';
import {ChartType} from 'sentry/views/insights/common/components/chart';
import {useSpans} from 'sentry/views/insights/common/queries/useDiscover';
import {DurationCell} from 'sentry/views/insights/pages/platform/shared/table/DurationCell';
Expand Down Expand Up @@ -120,7 +119,6 @@ export function ToolsTable() {
return (
<HeadSortCell
sortKey={column.key}
cursorParamName={TableUrlParams.CURSOR}
forceCellGrow={column.key === 'tool'}
align={rightAlignColumns.has(column.key) ? 'right' : undefined}
onClick={handleSort}
Expand Down
4 changes: 0 additions & 4 deletions static/app/views/insights/mcp/components/mcpPromptsTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,6 @@ import {Mode} from 'sentry/views/explore/contexts/pageParamsContext/mode';
import {getExploreUrl} from 'sentry/views/explore/utils';
import {HeadSortCell} from 'sentry/views/insights/agents/components/headSortCell';
import {useCombinedQuery} from 'sentry/views/insights/agents/hooks/useCombinedQuery';
import {TableUrlParams} from 'sentry/views/insights/agents/utils/urlParams';
import {ChartType} from 'sentry/views/insights/common/components/chart';
import {MCPReferrer} from 'sentry/views/insights/mcp/utils/referrer';
import {PlatformInsightsTable} from 'sentry/views/insights/pages/platform/shared/table';
Expand Down Expand Up @@ -56,7 +55,6 @@ export function McpPromptsTable() {
AVG_DURATION,
P95_DURATION,
],
cursorParamName: TableUrlParams.CURSOR,
referrer: MCPReferrer.MCP_PROMPT_TABLE,
});

Expand All @@ -79,7 +77,6 @@ export function McpPromptsTable() {
sortKey={column.key}
align={rightAlignColumns.has(column.key) ? 'right' : 'left'}
forceCellGrow={column.key === SpanFields.MCP_PROMPT_NAME}
cursorParamName={TableUrlParams.CURSOR}
onClick={handleSort}
>
{column.name}
Expand Down Expand Up @@ -132,7 +129,6 @@ export function McpPromptsTable() {
renderBodyCell,
renderHeadCell,
}}
cursorParamName={TableUrlParams.CURSOR}
pageLinks={tableDataRequest.pageLinks}
isPlaceholderData={tableDataRequest.isPlaceholderData}
/>
Expand Down
4 changes: 0 additions & 4 deletions static/app/views/insights/mcp/components/mcpResourcesTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,6 @@ import {Mode} from 'sentry/views/explore/contexts/pageParamsContext/mode';
import {getExploreUrl} from 'sentry/views/explore/utils';
import {HeadSortCell} from 'sentry/views/insights/agents/components/headSortCell';
import {useCombinedQuery} from 'sentry/views/insights/agents/hooks/useCombinedQuery';
import {TableUrlParams} from 'sentry/views/insights/agents/utils/urlParams';
import {ChartType} from 'sentry/views/insights/common/components/chart';
import {MCPReferrer} from 'sentry/views/insights/mcp/utils/referrer';
import {PlatformInsightsTable} from 'sentry/views/insights/pages/platform/shared/table';
Expand Down Expand Up @@ -56,7 +55,6 @@ export function McpResourcesTable() {
AVG_DURATION,
P95_DURATION,
],
cursorParamName: TableUrlParams.CURSOR,
referrer: MCPReferrer.MCP_RESOURCE_TABLE,
});

Expand All @@ -79,7 +77,6 @@ export function McpResourcesTable() {
sortKey={column.key}
align={rightAlignColumns.has(column.key) ? 'right' : 'left'}
forceCellGrow={column.key === SpanFields.MCP_RESOURCE_URI}
cursorParamName={TableUrlParams.CURSOR}
onClick={handleSort}
>
{column.name}
Expand Down Expand Up @@ -132,7 +129,6 @@ export function McpResourcesTable() {
renderBodyCell,
renderHeadCell,
}}
cursorParamName={TableUrlParams.CURSOR}
pageLinks={tableDataRequest.pageLinks}
isPlaceholderData={tableDataRequest.isPlaceholderData}
/>
Expand Down
4 changes: 0 additions & 4 deletions static/app/views/insights/mcp/components/mcpToolsTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,6 @@ import {Mode} from 'sentry/views/explore/contexts/pageParamsContext/mode';
import {getExploreUrl} from 'sentry/views/explore/utils';
import {HeadSortCell} from 'sentry/views/insights/agents/components/headSortCell';
import {useCombinedQuery} from 'sentry/views/insights/agents/hooks/useCombinedQuery';
import {TableUrlParams} from 'sentry/views/insights/agents/utils/urlParams';
import {ChartType} from 'sentry/views/insights/common/components/chart';
import {MCPReferrer} from 'sentry/views/insights/mcp/utils/referrer';
import {PlatformInsightsTable} from 'sentry/views/insights/pages/platform/shared/table';
Expand Down Expand Up @@ -56,7 +55,6 @@ export function McpToolsTable() {
AVG_DURATION,
P95_DURATION,
],
cursorParamName: TableUrlParams.CURSOR,
referrer: MCPReferrer.MCP_TOOL_TABLE,
});

Expand All @@ -79,7 +77,6 @@ export function McpToolsTable() {
sortKey={column.key}
align={rightAlignColumns.has(column.key) ? 'right' : 'left'}
forceCellGrow={column.key === SpanFields.MCP_TOOL_NAME}
cursorParamName={TableUrlParams.CURSOR}
onClick={handleSort}
>
{column.name}
Expand Down Expand Up @@ -132,7 +129,6 @@ export function McpToolsTable() {
renderBodyCell,
renderHeadCell,
}}
cursorParamName={TableUrlParams.CURSOR}
pageLinks={tableDataRequest.pageLinks}
isPlaceholderData={tableDataRequest.isPlaceholderData}
/>
Expand Down
3 changes: 0 additions & 3 deletions static/app/views/insights/pages/platform/laravel/commandsTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,6 @@ export function CommandsTable() {
'p95(span.duration)',
'sum(span.duration)',
],
cursorParamName: 'commandsCursor',
referrer: Referrer.PATHS_TABLE,
});

Expand All @@ -65,7 +64,6 @@ export function CommandsTable() {
sortKey={column.key}
align={rightAlignColumns.has(column.key) ? 'right' : 'left'}
forceCellGrow={column.key === 'command'}
cursorParamName="commandsCursor"
>
{column.name}
</HeadSortCell>
Expand Down Expand Up @@ -115,7 +113,6 @@ export function CommandsTable() {
renderBodyCell,
renderHeadCell,
}}
cursorParamName="commandsCursor"
pageLinks={tableDataRequest.pageLinks}
isPlaceholderData={tableDataRequest.isPlaceholderData}
/>
Expand Down
9 changes: 4 additions & 5 deletions static/app/views/insights/pages/platform/laravel/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import {trackAnalytics} from 'sentry/utils/analytics';
import {useLocation} from 'sentry/utils/useLocation';
import {useNavigate} from 'sentry/utils/useNavigate';
import useOrganization from 'sentry/utils/useOrganization';
import {TableUrlParams} from 'sentry/views/insights/agents/utils/urlParams';
import OverviewApiLatencyChartWidget from 'sentry/views/insights/common/components/widgets/overviewApiLatencyChartWidget';
import OverviewCacheMissChartWidget from 'sentry/views/insights/common/components/widgets/overviewCacheMissChartWidget';
import OverviewJobsChartWidget from 'sentry/views/insights/common/components/widgets/overviewJobsChartWidget';
Expand Down Expand Up @@ -66,12 +67,10 @@ export function LaravelOverviewPage() {
query: {
...location.query,
// Reset cursors when view changes
pathsCursor: undefined,
commandsCursor: undefined,
jobsCursor: undefined,
[TableUrlParams.CURSOR]: undefined,
// Reset sort parameters when view changes
field: undefined,
order: undefined,
[TableUrlParams.SORT_FIELD]: undefined,
[TableUrlParams.SORT_ORDER]: undefined,
view,
},
},
Expand Down
3 changes: 0 additions & 3 deletions static/app/views/insights/pages/platform/laravel/jobsTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,6 @@ export function JobsTable() {
'failure_rate()',
'sum(span.duration)',
],
cursorParamName: 'jobsCursor',
referrer: Referrer.PATHS_TABLE,
});

Expand All @@ -79,7 +78,6 @@ export function JobsTable() {
sortKey={column.key}
align={rightAlignColumns.has(column.key) ? 'right' : 'left'}
forceCellGrow={column.key === 'transaction'}
cursorParamName="jobsCursor"
>
{column.name}
</HeadSortCell>
Expand Down Expand Up @@ -132,7 +130,6 @@ export function JobsTable() {
renderBodyCell,
renderHeadCell,
}}
cursorParamName="jobsCursor"
pageLinks={tableDataRequest.pageLinks}
isPlaceholderData={tableDataRequest.isPlaceholderData}
/>
Expand Down
3 changes: 0 additions & 3 deletions static/app/views/insights/pages/platform/laravel/pathsTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,6 @@ export function PathsTable() {
'http.request.method',
'count_unique(user)',
],
cursorParamName: 'pathsCursor',
referrer: Referrer.PATHS_TABLE,
});

Expand All @@ -83,7 +82,6 @@ export function PathsTable() {
sortKey={column.key}
align={rightAlignColumns.has(column.key) ? 'right' : 'left'}
forceCellGrow={column.key === 'transaction'}
cursorParamName="pathsCursor"
>
{column.name}
</HeadSortCell>
Expand Down Expand Up @@ -157,7 +155,6 @@ export function PathsTable() {
renderBodyCell,
renderHeadCell,
}}
cursorParamName="pathsCursor"
pageLinks={tableDataRequest.pageLinks}
isPlaceholderData={tableDataRequest.isPlaceholderData}
/>
Expand Down
3 changes: 0 additions & 3 deletions static/app/views/insights/pages/platform/nextjs/apiTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,6 @@ export function ApiTable() {
'count()',
'sum(span.duration)',
],
cursorParamName: 'tableCursor',
referrer: Referrer.API_TABLE,
});

Expand All @@ -68,7 +67,6 @@ export function ApiTable() {
sortKey={column.key}
align={rightAlignColumns.has(column.key) ? 'right' : 'left'}
forceCellGrow={column.key === 'transaction'}
cursorParamName="tableCursor"
>
{column.name}
</HeadSortCell>
Expand Down Expand Up @@ -132,7 +130,6 @@ export function ApiTable() {
renderBodyCell,
renderHeadCell,
}}
cursorParamName="tableCursor"
pageLinks={tableDataRequest.pageLinks}
isPlaceholderData={tableDataRequest.isPlaceholderData}
/>
Expand Down
3 changes: 0 additions & 3 deletions static/app/views/insights/pages/platform/nextjs/clientTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -85,7 +85,6 @@ export function ClientTable() {
'count_if(span.op,equals,navigation)',
'count_if(span.op,equals,pageload)',
],
cursorParamName: 'tableCursor',
referrer: Referrer.CLIENT_TABLE,
});

Expand All @@ -94,7 +93,6 @@ export function ClientTable() {
<HeadSortCell
sortKey={column.key}
align={rightAlignColumns.has(column.key) ? 'right' : 'left'}
cursorParamName="tableCursor"
forceCellGrow={column.key === 'transaction'}
>
{column.name}
Expand Down Expand Up @@ -193,7 +191,6 @@ export function ClientTable() {
data={tableDataRequest.data}
initialColumnOrder={pageloadColumnOrder as Array<GridColumnOrder<keyof TableData>>}
stickyHeader
cursorParamName="tableCursor"
pageLinks={pagesTablePageLinks}
isPlaceholderData={tableDataRequest.isPlaceholderData}
grid={{
Expand Down
25 changes: 4 additions & 21 deletions static/app/views/insights/pages/platform/shared/table/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,7 @@
import {Fragment, useCallback} from 'react';
import {Fragment} from 'react';
import styled from '@emotion/styled';

import EmptyMessage from 'sentry/components/emptyMessage';
import type {CursorHandler} from 'sentry/components/pagination';
import Pagination from 'sentry/components/pagination';
import type {
GridColumnOrder,
Expand All @@ -13,15 +12,14 @@ import useStateBasedColumnResize from 'sentry/components/tables/gridEditable/use
import {IconSearch} from 'sentry/icons';
import {t} from 'sentry/locale';
import {space} from 'sentry/styles/space';
import {useNavigate} from 'sentry/utils/useNavigate';
import {useTableSortParams} from 'sentry/views/insights/agents/components/headSortCell';
import {useTableCursor} from 'sentry/views/insights/agents/hooks/useTableCursor';

interface PlatformInsightsTableProps<DataRow extends Record<string, any>>
extends Omit<
React.ComponentProps<typeof GridEditable<DataRow>>,
'columnOrder' | 'columnSortBy'
> {
cursorParamName: string;
initialColumnOrder:
| Array<GridColumnOrder<keyof DataRow>>
| (() => Array<GridColumnOrder<keyof DataRow>>);
Expand All @@ -32,33 +30,18 @@ interface PlatformInsightsTableProps<DataRow extends Record<string, any>>
const COL_WIDTH_MINIMUM = 120;

export function PlatformInsightsTable<DataRow extends Record<string, any>>({
cursorParamName,
pageLinks,
isPlaceholderData,
initialColumnOrder,
...props
}: PlatformInsightsTableProps<DataRow>) {
const navigate = useNavigate();

const {sortField, sortOrder} = useTableSortParams();
const {setCursor} = useTableCursor();

const {columns: columnOrder, handleResizeColumn} = useStateBasedColumnResize({
columns: initialColumnOrder,
});

const handleCursor = useCallback<CursorHandler>(
(cursor, pathname, previousQuery) => {
navigate(
{
pathname,
query: {...previousQuery, [cursorParamName]: cursor},
},
{replace: true, preventScrollReset: true}
);
},
[cursorParamName, navigate]
);

return (
<Fragment>
<GridEditableContainer>
Expand All @@ -84,7 +67,7 @@ export function PlatformInsightsTable<DataRow extends Record<string, any>>({
/>
{isPlaceholderData && <LoadingOverlay />}
</GridEditableContainer>
<Pagination pageLinks={pageLinks} onCursor={handleCursor} />
<Pagination pageLinks={pageLinks} onCursor={setCursor} />
</Fragment>
);
}
Expand Down
Loading
Loading