Skip to content

Conversation

@armenzg
Copy link
Member

@armenzg armenzg commented Nov 22, 2024

Similar Issues changes:

  • Show "issues with similar stack trace" before "issues with same root cause"
  • Rename "issues with same root cause" with "issues with similar titles"
  • Added description to the section
  • Removed events, users and assignee
  • Reduce title font

Next steps:

  • Bring further UI & style consistency between the two sections
  • Refactor the code into the same directory

Before:
image
After:
image

Narrow view:
image

Wide view:
image

There's is also various style changes to have a similar feel between the two sections.
@github-actions github-actions bot added the Scope: Frontend Automatically applied to PRs that change frontend components label Nov 22, 2024
@armenzg armenzg self-assigned this Nov 22, 2024
let extraInfo: React.ReactNode = null;
let openIssuesButton: React.ReactNode = null;
if (relationType === 'trace_connected' && traceMeta) {
title = t('Issues in the same trace');
Copy link
Member Author

Choose a reason for hiding this comment

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

Moved these lines into a function.

>
{t('Open in Issues')}
</LinkButton>
title = t('Issues with similar titles');
Copy link
Member Author

Choose a reason for hiding this comment

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

Renamed the section.

extraInfo = t(
'These issues have the same title and may have been caused by the same root cause.'
);
openIssuesButton = getLinkButton(
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're now using a function to generate the button to share functionality.

);
}

const getTraceConnectedContent = (
Copy link
Member Author

Choose a reason for hiding this comment

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

The code here is the same as what I grabbed from above.

export {GroupRelatedIssues};

const Title = styled('h4')`
font-size: ${p => p.theme.fontSizeLarge};
Copy link
Member Author

Choose a reason for hiding this comment

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

Make it the same size as issue with similar stack traces header.

<Panel>
<EmptyStateWarning>
<p>{t("There don't seem to be any similar issues.")}</p>
<Title>{t("There don't seem to be any similar issues.")}</Title>
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:
image

vs this:
image

Copy link
Contributor

Choose a reason for hiding this comment

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

We should change the font for similarity embeddings as well here to match

@armenzg armenzg requested a review from jangjodi November 22, 2024 16:14
@armenzg armenzg marked this pull request as ready for review November 22, 2024 16:14
@armenzg armenzg requested a review from a team as a code owner November 22, 2024 16:14
@jangjodi
Copy link
Contributor

jangjodi commented Nov 22, 2024

Just wondering, why are we removing events? I think these counts would be useful for a user to determine the the impact of a group, which may affect their decision to merge or not.

Also do you have a screenshot for the ui for the 'similarity-embeddings' feature flag? This ui should already not have the users columns

@armenzg
Copy link
Member Author

armenzg commented Nov 22, 2024

Just wondering, why are we removing events? I think these counts would be useful for a user to determine the the impact of a group, which may affect their decision to merge or not.

Also do you have a screenshot for the ui for the 'similarity-embeddings' feature flag? This ui should already not have the users columns

I removed the columns just so it would look a little less crowded but perhaps that can be handled later with some UI improvements.

I will DM me about the flag.

Copy link
Contributor

@jangjodi jangjodi left a comment

Choose a reason for hiding this comment

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

looks good! we chatted about keeping the events column offline

@armenzg armenzg enabled auto-merge (squash) November 22, 2024 18:38
@armenzg armenzg merged commit 9ec2d07 into master Nov 22, 2024
44 checks passed
@armenzg armenzg deleted the feat/move_same_root_issues/ui/armenzg branch November 22, 2024 18:52
harshithadurai pushed a commit that referenced this pull request Nov 25, 2024
…es (#81177)

Similar Issues changes:
* Show "issues with similar stack trace" before "issues with same root
cause"
* Rename "issues with same root cause" with "issues with similar titles"
* Added description to the section
* Removed events, users and assignee
* Reduce title font

Next steps:
* Bring further UI & style consistency between the two sections
* Refactor the code into the same directory

Before:
<img width="463" alt="image"
src="https://github.com/user-attachments/assets/6ff67422-e145-46d7-a3bd-2d79d227ee23">
After:
<img width="922" alt="image"
src="https://github.com/user-attachments/assets/0015bc20-37c9-4f19-b7d7-6b0bad22cb1a">


Narrow view:
<img width="463" alt="image"
src="https://github.com/user-attachments/assets/ce13c37f-199d-46f3-a855-afd3023bda94">

Wide view:
<img width="942" alt="image"
src="https://github.com/user-attachments/assets/c1faab56-c96c-42e0-91e2-f5715cefd0a6">
evanh pushed a commit that referenced this pull request Nov 25, 2024
…es (#81177)

Similar Issues changes:
* Show "issues with similar stack trace" before "issues with same root
cause"
* Rename "issues with same root cause" with "issues with similar titles"
* Added description to the section
* Removed events, users and assignee
* Reduce title font

Next steps:
* Bring further UI & style consistency between the two sections
* Refactor the code into the same directory

Before:
<img width="463" alt="image"
src="https://github.com/user-attachments/assets/6ff67422-e145-46d7-a3bd-2d79d227ee23">
After:
<img width="922" alt="image"
src="https://github.com/user-attachments/assets/0015bc20-37c9-4f19-b7d7-6b0bad22cb1a">


Narrow view:
<img width="463" alt="image"
src="https://github.com/user-attachments/assets/ce13c37f-199d-46f3-a855-afd3023bda94">

Wide view:
<img width="942" alt="image"
src="https://github.com/user-attachments/assets/c1faab56-c96c-42e0-91e2-f5715cefd0a6">
andrewshie-sentry pushed a commit that referenced this pull request Dec 2, 2024
…es (#81177)

Similar Issues changes:
* Show "issues with similar stack trace" before "issues with same root
cause"
* Rename "issues with same root cause" with "issues with similar titles"
* Added description to the section
* Removed events, users and assignee
* Reduce title font

Next steps:
* Bring further UI & style consistency between the two sections
* Refactor the code into the same directory

Before:
<img width="463" alt="image"
src="https://github.com/user-attachments/assets/6ff67422-e145-46d7-a3bd-2d79d227ee23">
After:
<img width="922" alt="image"
src="https://github.com/user-attachments/assets/0015bc20-37c9-4f19-b7d7-6b0bad22cb1a">


Narrow view:
<img width="463" alt="image"
src="https://github.com/user-attachments/assets/ce13c37f-199d-46f3-a855-afd3023bda94">

Wide view:
<img width="942" alt="image"
src="https://github.com/user-attachments/assets/c1faab56-c96c-42e0-91e2-f5715cefd0a6">
@github-actions github-actions bot locked and limited conversation to collaborators Dec 8, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

Scope: Frontend Automatically applied to PRs that change frontend components

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants