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')`