Skip to content
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.

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

feat(related_issues): Create separate sections for each relation type #70648

Merged
merged 2 commits into from May 13, 2024

Conversation

armenzg
Copy link
Member

@armenzg armenzg commented May 10, 2024

In #70504 I added support for the type parameter which allows getting the data for same-root issues vs trace-connected issues separately.

This UI change allows each related issues section to fetch and render the data independently, thus, making the page load faster.

These changes are required to support fetching trace-connected issues from the Issues Details page without also fetching same-root-connected data.

In #70504 I added support for the `type` parameter which allows getting separately the data for same-root issues vs trace-connected issues.

This UI change allows each related issues section to fetch and render the data independently, thus, making the page load faster.

These changes are required in order to support just fetching trace-connected issues from the Issues Details page.
@armenzg armenzg self-assigned this May 10, 2024
@github-actions github-actions bot added the Scope: Frontend Automatically applied to PRs that change frontend components label May 10, 2024

const params = {groupId: groupId};
const errorType = 'RuntimeError';
const noData = {
data: [
Copy link
Member Author

Choose a reason for hiding this comment

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

Now, the shape of the data returned by the endpoint will only contain one type of relation.

For instance:

{
  "type": "trace_connected",
  "data": [
    5290882209,
    5291204527,
    5298771767,
    4939519003,
    4808538909,
    5298771743
  ],
  "meta": {
    "event_id": "fe2c6fbf76ac4e1886e7e150a9f9b98d",
    "trace_id": "361d8fb1fb364a2693399b0a2541787e"
  }
}

@@ -99,8 +77,12 @@ describe('Related Issues View', function () {
});

it('renders with no data', async function () {
relatedIssuesMock = MockApiClient.addMockResponse({
Copy link
Member Author

Choose a reason for hiding this comment

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

We now need two different mocks.

function GroupRelatedIssues({params}: Props) {
const {groupId} = params;

const organization = useOrganization();
const orgSlug = organization.slug;

return (
<Fragment>
<RelatedIssuesSection
Copy link
Member Author

Choose a reason for hiding this comment

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

I have created a new component. Each component will do its fetches independently.

},
{same_root_cause: [], trace_connected: []}
} = useApiQuery<RelatedIssuesResponse>(
[`/issues/${groupId}/related-issues/?type=${relationType}`],
Copy link
Member Author

Choose a reason for hiding this comment

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

We now fetch with ?type=${relationType}.

let linkToTrace;
let openIssuesButton;
let title;
if (relationType === 'trace_connected' && traceMeta) {
Copy link
Member Author

Choose a reason for hiding this comment

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

In this block we initialize all the values specific to the trace-connected section.

@@ -17,48 +18,25 @@ describe('Related Issues View', function () {
const group2 = '20';
// query=issue.id:[15,20] -> query=issue.id%3A%5B15%2C20%5D
const orgIssuesEndpoint = `/organizations/${orgSlug}/issues/?query=issue.id%3A%5B${group1}%2C${group2}%5D`;
// const orgIssuesEndpoint = `/organizations/${orgSlug}/issues/?query=issue.id:[${group1},${group2}]`;
Copy link
Member Author

Choose a reason for hiding this comment

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

Suggested change
// const orgIssuesEndpoint = `/organizations/${orgSlug}/issues/?query=issue.id:[${group1},${group2}]`;

@armenzg armenzg marked this pull request as ready for review May 10, 2024 14:06
@armenzg armenzg requested a review from a team as a code owner May 10, 2024 14:06
@armenzg armenzg merged commit f80216c into master May 13, 2024
42 checks passed
@armenzg armenzg deleted the feat/separate-ui-calls/related_issues/armenzg branch May 13, 2024 12:12
@armenzg armenzg restored the feat/separate-ui-calls/related_issues/armenzg branch May 13, 2024 18:04
@armenzg armenzg deleted the feat/separate-ui-calls/related_issues/armenzg branch May 13, 2024 18:06
@armenzg armenzg restored the feat/separate-ui-calls/related_issues/armenzg branch May 13, 2024 18:06
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Scope: Frontend Automatically applied to PRs that change frontend components
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants