Skip to content

feat(issues): Avoid hiding unread indicator #92088

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

Open
wants to merge 5 commits into
base: master
Choose a base branch
from
+35 −22
Open

feat(issues): Avoid hiding unread indicator #92088

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
e2c5eea
feat(issues): Avoid hiding unread indicator
scttcper May 22, 2025
7aaefe4
break focus making checkbox appear
scttcper May 22, 2025
c7b37ce
Merge branch 'master' into scttcper/avoid-hiding-unread
scttcper May 22, 2025
600617a
click unread to toggle. min height group extra
scttcper May 22, 2025
769d81d
sad
scttcper May 22, 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
1 change: 1 addition & 0 deletions static/app/components/eventOrGroupExtraDetails.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -172,6 +172,7 @@ const GroupExtra = styled('div')`
font-size: ${p => p.theme.fontSizeSmall};
white-space: nowrap;
line-height: 1.2;
min-height: ${space(2)};
Copy link
Member Author

@scttcper scttcper May 22, 2025 •
edited
Loading

Choose a reason for hiding this comment

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

group extras were not the same height. extras were sometimes 12 or 16px depending on if they had replay indicator etc


& > a {
color: ${p => p.theme.subText};
Expand Down
56 changes: 34 additions & 22 deletions static/app/components/stream/group.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -95,11 +95,9 @@ function GroupCheckbox({
const {records: selectedGroupMap} = useLegacyStore(SelectedGroupStore);
const isSelected = selectedGroupMap.get(group.id) ?? false;

const onChange = useCallback(
(evt: React.ChangeEvent<HTMLInputElement>) => {
const mouseEvent = evt.nativeEvent as MouseEvent;

if (mouseEvent.shiftKey) {
const handleToggle = useCallback(
(isShiftClick: boolean) => {
if (isShiftClick) {
SelectedGroupStore.shiftToggleItems(group.id);
} else {
SelectedGroupStore.toggleSelect(group.id);
Expand All @@ -108,8 +106,28 @@ function GroupCheckbox({
[group.id]
);

const onChange = useCallback(
(evt: React.ChangeEvent<HTMLInputElement>) => {
const mouseEvent = evt.nativeEvent as MouseEvent;
handleToggle(mouseEvent.shiftKey);
},
[handleToggle]
);

return (
<GroupCheckBoxWrapper>
{group.hasSeen && (
<Tooltip title={t('Unread')} skipWrapper>
<UnreadIndicator
data-test-id="unread-issue-indicator"
onClick={(e: React.MouseEvent) => {
// Toggle checkbox on unread indicator misclick
e.stopPropagation();
handleToggle(e.shiftKey);
}}
/>
</Tooltip>
)}
<CheckboxLabel>
<CheckboxWithBackground
id={group.id}
Expand All @@ -119,11 +137,6 @@ function GroupCheckbox({
onChange={onChange}
/>
</CheckboxLabel>
{group.hasSeen ? null : (
<Tooltip title={t('Unread')} skipWrapper>
<UnreadIndicator data-test-id="unread-issue-indicator" />
</Tooltip>
)}
</GroupCheckBoxWrapper>
);
}
Expand Down Expand Up @@ -646,23 +659,26 @@ export default StreamGroup;

const CheckboxLabel = styled('label')`
position: absolute;
top: 0;
top: -1px;
left: 0;
bottom: 0;
height: 100%;
width: 32px;
padding-left: ${space(2)};
padding-top: 14px;
margin: 0;
margin-top: -1px;
display: flex;
align-items: center;
`;

const UnreadIndicator = styled('div')`
width: 8px;
height: 8px;
background-color: ${p => p.theme.purple400};
border-radius: 50%;
margin-left: ${space(3)};
margin-top: 10px;
margin-top: 1px;
margin-left: ${space(2)};
z-index: 1;
`;

// Position for wrapper is relative for overlay actions
Expand All @@ -675,19 +691,12 @@ const Wrapper = styled(PanelItem)<{
padding: ${space(1)} 0;
min-height: 82px;

&:not(:has(:hover)):not(:focus-within):not(:has(input:checked)) {
&:not(:hover):not(:has(input:checked)) {
${CheckboxLabel} {
${p => p.theme.visuallyHidden};
}
}

&:hover,
&:focus-within {
${UnreadIndicator} {
${p => p.theme.visuallyHidden};
}
}

[data-issue-title-link] {
&::before {
content: '';
Expand Down Expand Up @@ -757,7 +766,10 @@ const GroupCheckBoxWrapper = styled('div')`
align-self: flex-start;
width: 32px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding-top: ${space(1)};
z-index: 1;
`;

Expand Down
Loading