diff --git a/static/app/components/events/autofix/autofixDiff.tsx b/static/app/components/events/autofix/autofixDiff.tsx index 3327bc835dadfc..6aee795375d2f7 100644 --- a/static/app/components/events/autofix/autofixDiff.tsx +++ b/static/app/components/events/autofix/autofixDiff.tsx @@ -896,6 +896,8 @@ const RemovedLine = styled('div')` background-color: ${DIFF_COLORS.removedRow}; color: ${p => p.theme.textColor}; padding: ${space(0.25)} ${space(0.5)}; + white-space: pre-wrap; + font-size: ${p => p.theme.fontSizeSmall}; `; const StyledTextArea = styled(TextArea)` diff --git a/static/app/components/events/autofix/autofixSolution.spec.tsx b/static/app/components/events/autofix/autofixSolution.spec.tsx index 1e2fc5a458385c..dbdb633a6d128a 100644 --- a/static/app/components/events/autofix/autofixSolution.spec.tsx +++ b/static/app/components/events/autofix/autofixSolution.spec.tsx @@ -301,12 +301,9 @@ describe('AutofixSolution', () => { const timelineItem = screen.getByTestId('autofix-solution-timeline-item-0'); expect(timelineItem).toBeInTheDocument(); - // Hover over the timeline item to reveal buttons - await userEvent.hover(timelineItem); - // Find and click the toggle button for deselecting the item const toggleButton = within(timelineItem).getByRole('button', { - name: 'Deselect item', + name: 'Remove from plan', }); expect(toggleButton).toBeInTheDocument(); await userEvent.click(toggleButton); @@ -478,11 +475,10 @@ describe('AutofixSolution', () => { ) as HTMLElement; expect(timelineItem).not.toBeNull(); - // Hover over the timeline item - await userEvent.hover(timelineItem); - - // Find the delete button - there should be only one button within the hovered item - const deleteButton = within(timelineItem).getByRole('button'); + // Find the delete button using the updated aria-label + const deleteButton = within(timelineItem).getByRole('button', { + name: 'Remove from plan', + }); expect(deleteButton).toBeInTheDocument(); // Click the delete button diff --git a/static/app/components/events/autofix/autofixSolution.tsx b/static/app/components/events/autofix/autofixSolution.tsx index 20d06904444491..bbe28c4e47a362 100644 --- a/static/app/components/events/autofix/autofixSolution.tsx +++ b/static/app/components/events/autofix/autofixSolution.tsx @@ -11,6 +11,7 @@ import {Alert} from 'sentry/components/core/alert'; import {Button} from 'sentry/components/core/button'; import {ButtonBar} from 'sentry/components/core/button/buttonBar'; import {Input} from 'sentry/components/core/input'; +import {Tooltip} from 'sentry/components/core/tooltip'; import {AutofixHighlightWrapper} from 'sentry/components/events/autofix/autofixHighlightWrapper'; import AutofixThumbsUpDownButtons from 'sentry/components/events/autofix/autofixThumbsUpDownButtons'; import { @@ -301,25 +302,33 @@ function SolutionEventList({ /> )} - { - e.stopPropagation(); - if (isHumanAction) { - onDeleteItem(index); - } else { - handleToggleActive(index); - } - }} - aria-label={isSelected ? t('Deselect item') : t('Select item')} + - {isHumanAction ? ( - - ) : isSelected ? ( - - ) : ( - - )} - + { + e.stopPropagation(); + if (isHumanAction) { + onDeleteItem(index); + } else { + handleToggleActive(index); + } + }} + aria-label={isSelected ? t('Remove from plan') : t('Add to plan')} + actionType={ + isHumanAction ? 'delete' : isSelected ? 'close' : 'add' + } + > + {isHumanAction ? ( + + ) : isSelected ? ( + + ) : ( + + )} + + @@ -792,25 +801,27 @@ const StyledTimelineHeader = styled('div')<{isSelected: boolean; isActive?: bool `; const IconWrapper = styled('div')` - position: relative; display: flex; align-items: center; justify-content: center; flex-shrink: 0; + gap: ${space(1)}; `; const SelectionButtonWrapper = styled('div')` - position: absolute; background: none; border: none; display: flex; align-items: center; - justify-content: flex-end; + justify-content: center; height: 100%; - right: 0; `; -const SelectionButton = styled('button')` +type SelectionButtonProps = React.ButtonHTMLAttributes & { + actionType: 'delete' | 'close' | 'add'; +}; + +const SelectionButton = styled('button')` background: none; border: none; display: flex; @@ -818,34 +829,23 @@ const SelectionButton = styled('button')` justify-content: center; cursor: pointer; color: ${p => p.theme.subText}; - opacity: 0; transition: - opacity 0.2s ease, color 0.2s ease, background-color 0.2s ease; border-radius: 5px; padding: 4px; - ${StyledTimelineHeader}:hover & { - opacity: 1; - } - &:hover { - color: ${p => p.theme.gray500}; - background-color: ${p => p.theme.background}; + color: ${p => + p.actionType === 'delete' || p.actionType === 'close' + ? p.theme.red400 + : p.theme.green400}; } `; const StyledIconChevron = styled(IconChevron)` color: ${p => p.theme.subText}; flex-shrink: 0; - opacity: 1; - transition: opacity 0.2s ease; - margin-right: ${space(0.25)}; - - ${StyledTimelineHeader}:hover & { - opacity: 0; - } `; const InstructionsInputWrapper = styled('form')`