Skip to content

fix(releases): Use query parameter when switching filters #52937

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
Jul 17, 2023
Merged

fix(releases): Use query parameter when switching filters #52937

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
8e9a83d
fix(releases): Use query parameter when switching filters
scttcper Jul 15, 2023
6c30332
unused
scttcper Jul 17, 2023
c45f623
change case
scttcper Jul 17, 2023
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
1 change: 0 additions & 1 deletion static/app/views/releases/detail/overview/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -544,7 +544,6 @@ class ReleaseOverview extends DeprecatedAsyncView<Props> {

<ReleaseIssues
organization={organization}
selection={selection}
version={version}
location={location}
releaseBounds={releaseBounds}
Expand Down
76 changes: 50 additions & 26 deletions ...es/detail/overview/releaseIssues.spec.jsx → ...es/detail/overview/releaseIssues.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ describe('ReleaseIssues', function () {
organization: TestStubs.Organization(),
version: '1.0.0',
selection: {projects: [], environments: [], datetime: {}},
location: {href: '', query: {}},
location: TestStubs.location({query: {}}),
releaseBounds: getReleaseBounds(TestStubs.Release({version: '1.0.0'})),
};

Expand Down Expand Up @@ -65,18 +65,28 @@ describe('ReleaseIssues', function () {
});

it('shows an empty state', async function () {
render(<ReleaseIssues {...props} />);
const {rerender} = render(<ReleaseIssues {...props} />);

expect(await screen.findByText('No new issues in this release.')).toBeInTheDocument();

await userEvent.click(screen.getByRole('radio', {name: 'Resolved 0'}));
// Simulate query change
rerender(
<ReleaseIssues
{...props}
location={TestStubs.location({query: {issuesType: 'resolved'}})}
/>
);
expect(
await screen.findByText('No resolved issues in this release.')
).toBeInTheDocument();
});

it('shows an empty sttate with stats period', async function () {
render(<ReleaseIssues {...props} location={{query: {pageStatsPeriod: '24h'}}} />);
const query = {pageStatsPeriod: '24h'};
const {rerender} = render(
<ReleaseIssues {...props} location={TestStubs.location({query})} />
);

expect(
await screen.findByText(
Expand All @@ -85,61 +95,75 @@ describe('ReleaseIssues', function () {
).toBeInTheDocument();

await userEvent.click(screen.getByRole('radio', {name: 'Unhandled 0'}));
// Simulate query change
rerender(
<ReleaseIssues
{...props}
location={TestStubs.location({query: {...query, issuesType: 'unhandled'}})}
/>
);
expect(
await screen.findByText(
textWithMarkupMatcher('No unhandled issues for the last 24 hours.')
)
).toBeInTheDocument();
});

it('filters the issues', async function () {
render(<ReleaseIssues {...props} />);

expect(screen.getAllByRole('radio')).toHaveLength(5);
await screen.findByRole('radio', {name: 'New Issues 0'});

await userEvent.click(screen.getByRole('radio', {name: 'New Issues 0'}));
expect(newIssuesEndpoint).toHaveBeenCalledTimes(1);

await userEvent.click(screen.getByRole('radio', {name: 'Resolved 0'}));
expect(resolvedIssuesEndpoint).toHaveBeenCalledTimes(1);

await userEvent.click(screen.getByRole('radio', {name: 'Unhandled 0'}));
expect(unhandledIssuesEndpoint).toHaveBeenCalledTimes(1);

await userEvent.click(screen.getByRole('radio', {name: 'All Issues 0'}));
expect(allIssuesEndpoint).toHaveBeenCalledTimes(1);
});

it('renders link to Issues', async function () {
it('can switch issue filters', async function () {
const {routerContext} = initializeOrg();

render(<ReleaseIssues {...props} />, {context: routerContext});
const {rerender} = render(<ReleaseIssues {...props} />, {context: routerContext});

// New
expect(await screen.findByRole('radio', {name: 'New Issues 0'})).toBeChecked();
expect(screen.getByRole('button', {name: 'Open in Issues'})).toHaveAttribute(
'href',
'/organizations/org-slug/issues/?end=2020-03-24T02%3A04%3A59Z&groupStatsPeriod=auto&query=firstRelease%3A1.0.0&sort=freq&start=2020-03-23T01%3A02%3A00Z'
);
expect(newIssuesEndpoint).toHaveBeenCalledTimes(1);

await screen.findByRole('radio', {name: 'Resolved 0'});

// Resolved
await userEvent.click(screen.getByRole('radio', {name: 'Resolved 0'}));
// Simulate query change
rerender(
<ReleaseIssues
{...props}
location={TestStubs.location({query: {issuesType: 'resolved'}})}
/>
);
expect(screen.getByRole('button', {name: 'Open in Issues'})).toHaveAttribute(
'href',
'/organizations/org-slug/issues/?end=2020-03-24T02%3A04%3A59Z&groupStatsPeriod=auto&query=release%3A1.0.0&sort=freq&start=2020-03-23T01%3A02%3A00Z'
);
expect(resolvedIssuesEndpoint).toHaveBeenCalledTimes(1);

// Unhandled
await userEvent.click(screen.getByRole('radio', {name: 'Unhandled 0'}));
rerender(
<ReleaseIssues
{...props}
location={TestStubs.location({query: {issuesType: 'unhandled'}})}
/>
);
expect(screen.getByRole('button', {name: 'Open in Issues'})).toHaveAttribute(
'href',
'/organizations/org-slug/issues/?end=2020-03-24T02%3A04%3A59Z&groupStatsPeriod=auto&query=release%3A1.0.0%20error.handled%3A0&sort=freq&start=2020-03-23T01%3A02%3A00Z'
);
expect(unhandledIssuesEndpoint).toHaveBeenCalledTimes(1);

// All
await userEvent.click(screen.getByRole('radio', {name: 'All Issues 0'}));
rerender(
<ReleaseIssues
{...props}
location={TestStubs.location({query: {issuesType: 'all'}})}
/>
);
expect(screen.getByRole('button', {name: 'Open in Issues'})).toHaveAttribute(
'href',
'/organizations/org-slug/issues/?end=2020-03-24T02%3A04%3A59Z&groupStatsPeriod=auto&query=release%3A1.0.0&sort=freq&start=2020-03-23T01%3A02%3A00Z'
);
expect(allIssuesEndpoint).toHaveBeenCalledTimes(1);
});

it('includes release context when linking to issue', async function () {
Expand Down
100 changes: 37 additions & 63 deletions static/app/views/releases/detail/overview/releaseIssues.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ import {SegmentedControl} from 'sentry/components/segmentedControl';
import {DEFAULT_RELATIVE_PERIODS} from 'sentry/constants';
import {t, tct} from 'sentry/locale';
import {space} from 'sentry/styles/space';
import {Organization, PageFilters} from 'sentry/types';
import {Organization} from 'sentry/types';
import {MutableSearch} from 'sentry/utils/tokenizeSearch';
import withApi from 'sentry/utils/withApi';
import withOrganization from 'sentry/utils/withOrganization';
Expand All @@ -33,13 +33,13 @@ enum IssuesType {
ALL = 'all',
}

enum IssuesQuery {
NEW = 'first-release',
UNHANDLED = 'error.handled:0',
REGRESSED = 'regressed_in_release',
RESOLVED = 'is:resolved',
ALL = 'release',
}
const IssuesQuery: Record<IssuesType, string> = {
Copy link
Member

Choose a reason for hiding this comment

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

nit: should this still be pascal case now that it's not an enum?

[IssuesType.NEW]: 'first-release',
[IssuesType.UNHANDLED]: 'error.handled:0',
[IssuesType.REGRESSED]: 'regressed_in_release',
[IssuesType.RESOLVED]: 'is:resolved',
[IssuesType.ALL]: 'release',
};

type IssuesQueryParams = {
limit: number;
Expand All @@ -56,7 +56,6 @@ type Props = {
location: Location;
organization: Organization;
releaseBounds: ReleaseBounds;
selection: PageFilters;
Copy link
Member Author

Choose a reason for hiding this comment

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

unused

version: string;
queryFilterDescription?: string;
} & Partial<typeof defaultProps>;
Expand All @@ -69,7 +68,6 @@ type State = {
resolved: number | null;
unhandled: number | null;
};
issuesType: IssuesType;
onCursor?: () => void;
pageLinks?: string;
};
Expand All @@ -79,24 +77,7 @@ class ReleaseIssues extends Component<Props, State> {
state: State = this.getInitialState();

getInitialState() {
const {location} = this.props;
const query = location.query ? location.query.issuesType : null;
const issuesTypeState = !query
? IssuesType.NEW
: query.includes(IssuesType.NEW)
? IssuesType.NEW
: query.includes(IssuesType.UNHANDLED)
? IssuesType.REGRESSED
: query.includes(IssuesType.REGRESSED)
? IssuesType.UNHANDLED
Comment on lines -90 to -91
Copy link
Member Author

Choose a reason for hiding this comment

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

This was the mistake, but the real mistake was this massive ternary

: query.includes(IssuesType.RESOLVED)
? IssuesType.RESOLVED
: query.includes(IssuesType.ALL)
? IssuesType.ALL
: IssuesType.ALL;

return {
issuesType: issuesTypeState,
count: {
new: null,
all: null,
Expand Down Expand Up @@ -128,9 +109,16 @@ class ReleaseIssues extends Component<Props, State> {
}
}

getActiveIssuesType(): IssuesType {
const query = (this.props.location.query?.issuesType as string) ?? '';
return Object.values<string>(IssuesType).includes(query)
? (query as IssuesType)
: IssuesType.NEW;
}

getIssuesUrl() {
const {version, organization} = this.props;
const {issuesType} = this.state;
const issuesType = this.getActiveIssuesType();
const {queryParams} = this.getIssuesEndpoint();
const query = new MutableSearch([]);

Expand Down Expand Up @@ -164,7 +152,7 @@ class ReleaseIssues extends Component<Props, State> {

getIssuesEndpoint(): {path: string; queryParams: IssuesQueryParams} {
const {version, organization, location, releaseBounds} = this.props;
const {issuesType} = this.state;
const issuesType = this.getActiveIssuesType();

const queryParams = {
...getReleaseParams({
Expand All @@ -183,7 +171,7 @@ class ReleaseIssues extends Component<Props, State> {
queryParams: {
...queryParams,
query: new MutableSearch([
`${IssuesQuery.ALL}:${version}`,
`${IssuesQuery.all}:${version}`,
'is:unresolved',
]).formatString(),
},
Expand All @@ -201,8 +189,8 @@ class ReleaseIssues extends Component<Props, State> {
queryParams: {
...queryParams,
query: new MutableSearch([
`${IssuesQuery.ALL}:${version}`,
IssuesQuery.UNHANDLED,
`${IssuesQuery.all}:${version}`,
IssuesQuery.unhandled,
'is:unresolved',
]).formatString(),
},
Expand All @@ -213,7 +201,7 @@ class ReleaseIssues extends Component<Props, State> {
queryParams: {
...queryParams,
query: new MutableSearch([
`${IssuesQuery.REGRESSED}:${version}`,
`${IssuesQuery.regressed}:${version}`,
]).formatString(),
},
};
Expand All @@ -224,7 +212,7 @@ class ReleaseIssues extends Component<Props, State> {
queryParams: {
...queryParams,
query: new MutableSearch([
`${IssuesQuery.NEW}:${version}`,
`${IssuesQuery.new}:${version}`,
'is:unresolved',
]).formatString(),
},
Expand All @@ -246,14 +234,14 @@ class ReleaseIssues extends Component<Props, State> {
]).then(([issueResponse, resolvedResponse]) => {
this.setState({
count: {
all: issueResponse[`${IssuesQuery.ALL}:"${version}" is:unresolved`] || 0,
new: issueResponse[`${IssuesQuery.NEW}:"${version}" is:unresolved`] || 0,
all: issueResponse[`${IssuesQuery.all}:"${version}" is:unresolved`] || 0,
new: issueResponse[`${IssuesQuery.new}:"${version}" is:unresolved`] || 0,
resolved: resolvedResponse.length,
unhandled:
issueResponse[
`${IssuesQuery.UNHANDLED} ${IssuesQuery.ALL}:"${version}" is:unresolved`
`${IssuesQuery.unhandled} ${IssuesQuery.all}:"${version}" is:unresolved`
] || 0,
regressed: issueResponse[`${IssuesQuery.REGRESSED}:"${version}"`] || 0,
regressed: issueResponse[`${IssuesQuery.regressed}:"${version}"`] || 0,
},
});
});
Expand All @@ -267,10 +255,10 @@ class ReleaseIssues extends Component<Props, State> {
const issuesCountPath = `/organizations/${organization.slug}/issues-count/`;

const params = [
`${IssuesQuery.NEW}:"${version}" is:unresolved`,
`${IssuesQuery.ALL}:"${version}" is:unresolved`,
`${IssuesQuery.UNHANDLED} ${IssuesQuery.ALL}:"${version}" is:unresolved`,
`${IssuesQuery.REGRESSED}:"${version}"`,
`${IssuesQuery.new}:"${version}" is:unresolved`,
`${IssuesQuery.all}:"${version}" is:unresolved`,
`${IssuesQuery.unhandled} ${IssuesQuery.all}:"${version}" is:unresolved`,
`${IssuesQuery.regressed}:"${version}"`,
];
const queryParams = params.map(param => param);
const queryParameters = {
Expand All @@ -286,29 +274,14 @@ class ReleaseIssues extends Component<Props, State> {

handleIssuesTypeSelection = (issuesType: IssuesType) => {
const {location} = this.props;
const issuesTypeQuery =
issuesType === IssuesType.ALL
? IssuesType.ALL
: issuesType === IssuesType.NEW
? IssuesType.NEW
: issuesType === IssuesType.RESOLVED
? IssuesType.RESOLVED
: issuesType === IssuesType.UNHANDLED
? IssuesType.UNHANDLED
: issuesType === IssuesType.REGRESSED
? IssuesType.REGRESSED
: '';

const to = {

browserHistory.replace({
...location,
query: {
...location.query,
issuesType: issuesTypeQuery,
issuesType,
},
};

browserHistory.replace(to);
this.setState({issuesType});
});
};

handleFetchSuccess = (groupListState, onCursor) => {
Expand All @@ -317,7 +290,7 @@ class ReleaseIssues extends Component<Props, State> {

renderEmptyMessage = () => {
const {location, releaseBounds} = this.props;
const {issuesType} = this.state;
const issuesType = this.getActiveIssuesType();
const isEntireReleasePeriod =
!location.query.pageStatsPeriod && !location.query.pageStart;

Expand Down Expand Up @@ -367,7 +340,8 @@ class ReleaseIssues extends Component<Props, State> {
};

render() {
const {issuesType, count, pageLinks, onCursor} = this.state;
const {count, pageLinks, onCursor} = this.state;
const issuesType = this.getActiveIssuesType();
const {organization, queryFilterDescription, withChart, version} = this.props;
const {path, queryParams} = this.getIssuesEndpoint();
const issuesTypes = [
Expand Down