Skip to content

Commit cf1ca91

Browse files
authored
fix(ui):tidied up metric alert actions (#20829)
* fix(ui):tidied up metric alert actions * replaced flex-gap and fixed test for copy of button * fixed bugs
1 parent 709d8bb commit cf1ca91

File tree

3 files changed

+101
-63
lines changed

3 files changed

+101
-63
lines changed

src/sentry/static/sentry/app/views/settings/incidentRules/triggers/actionsPanel/actionTargetSelector.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -92,6 +92,6 @@ export default function ActionTargetSelector(props: Props) {
9292
);
9393

9494
default:
95-
return <span />;
95+
return null;
9696
}
9797
}

src/sentry/static/sentry/app/views/settings/incidentRules/triggers/actionsPanel/index.tsx

Lines changed: 99 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -259,62 +259,79 @@ class ActionsPanel extends React.PureComponent<Props> {
259259
);
260260

261261
return (
262-
<PanelItemGrid key={i}>
263-
<SelectControl
264-
name="select-level"
265-
aria-label={t('Select a status level')}
266-
isDisabled={disabled || loading}
267-
placeholder={t('Select Level')}
268-
onChange={this.handleChangeActionLevel.bind(this, triggerIndex, i)}
269-
value={triggerIndex}
270-
options={levels}
271-
/>
272-
273-
<SelectControl
274-
name="select-action"
275-
aria-label={t('Select an Action')}
276-
isDisabled={disabled || loading}
277-
placeholder={t('Select Action')}
278-
onChange={this.handleChangeActionType.bind(this, triggerIndex, i)}
279-
value={getActionUniqueKey(action)}
280-
options={items ?? []}
281-
/>
282-
283-
{availableAction && availableAction.allowedTargetTypes.length > 1 ? (
284-
<SelectControl
285-
isDisabled={disabled || loading}
286-
value={action.targetType}
287-
options={availableAction?.allowedTargetTypes?.map(
288-
allowedType => ({
289-
value: allowedType,
290-
label: TargetLabel[allowedType],
291-
})
292-
)}
293-
onChange={this.handleChangeTarget.bind(this, triggerIndex, i)}
294-
/>
295-
) : (
296-
<span />
297-
)}
298-
<ActionTargetSelector
299-
action={action}
300-
availableAction={availableAction}
301-
disabled={disabled}
302-
loading={loading}
303-
onChange={this.handleChangeTargetIdentifier.bind(
304-
this,
305-
triggerIndex,
306-
i
307-
)}
308-
organization={organization}
309-
project={project}
310-
/>
311-
<DeleteActionButton
312-
triggerIndex={triggerIndex}
313-
index={i}
314-
onClick={this.handleDeleteAction}
315-
disabled={disabled}
316-
/>
317-
</PanelItemGrid>
262+
<PanelItemWrapper key={i}>
263+
<RuleRowContainer>
264+
<PanelItemGrid>
265+
<PanelItemSelects>
266+
<SelectControl
267+
name="select-level"
268+
aria-label={t('Select a status level')}
269+
isDisabled={disabled || loading}
270+
placeholder={t('Select Level')}
271+
onChange={this.handleChangeActionLevel.bind(
272+
this,
273+
triggerIndex,
274+
i
275+
)}
276+
value={triggerIndex}
277+
options={levels}
278+
/>
279+
280+
<SelectControl
281+
name="select-action"
282+
aria-label={t('Select an Action')}
283+
isDisabled={disabled || loading}
284+
placeholder={t('Select Action')}
285+
onChange={this.handleChangeActionType.bind(
286+
this,
287+
triggerIndex,
288+
i
289+
)}
290+
value={getActionUniqueKey(action)}
291+
options={items ?? []}
292+
/>
293+
294+
{availableAction &&
295+
availableAction.allowedTargetTypes.length > 1 ? (
296+
<SelectControl
297+
isDisabled={disabled || loading}
298+
value={action.targetType}
299+
options={availableAction?.allowedTargetTypes?.map(
300+
allowedType => ({
301+
value: allowedType,
302+
label: TargetLabel[allowedType],
303+
})
304+
)}
305+
onChange={this.handleChangeTarget.bind(
306+
this,
307+
triggerIndex,
308+
i
309+
)}
310+
/>
311+
) : null}
312+
<ActionTargetSelector
313+
action={action}
314+
availableAction={availableAction}
315+
disabled={disabled}
316+
loading={loading}
317+
onChange={this.handleChangeTargetIdentifier.bind(
318+
this,
319+
triggerIndex,
320+
i
321+
)}
322+
organization={organization}
323+
project={project}
324+
/>
325+
</PanelItemSelects>
326+
<DeleteActionButton
327+
triggerIndex={triggerIndex}
328+
index={i}
329+
onClick={this.handleDeleteAction}
330+
disabled={disabled}
331+
/>
332+
</PanelItemGrid>
333+
</RuleRowContainer>
334+
</PanelItemWrapper>
318335
);
319336
})
320337
);
@@ -327,7 +344,7 @@ class ActionsPanel extends React.PureComponent<Props> {
327344
icon={<IconAdd isCircled color="gray500" />}
328345
onClick={this.handleAddAction}
329346
>
330-
Add Item
347+
{t('Add New Action')}
331348
</Button>
332349
</StyledPanelItem>
333350
</PanelBody>
@@ -340,17 +357,38 @@ const ActionsPanelWithSpace = styled(ActionsPanel)`
340357
margin-top: ${space(4)};
341358
`;
342359

360+
const PanelItemWrapper = styled(`div`)`
361+
padding: ${space(0.5)} ${space(2)} ${space(1)};
362+
`;
363+
343364
const PanelItemGrid = styled(PanelItem)`
344-
display: grid;
345-
grid-template-columns: 1fr 1fr 1fr 1fr min-content;
365+
display: flex;
346366
align-items: center;
347-
grid-gap: ${space(2)};
348-
padding: ${space(0.5)} ${space(2)} ${space(1)};
367+
padding: ${space(1)};
349368
border-bottom: 0;
350369
`;
351370

371+
const PanelItemSelects = styled('div')`
372+
display: flex;
373+
width: 100%;
374+
margin-right: ${space(1)};
375+
> * {
376+
flex: 0 1 200px;
377+
378+
&:not(:last-child) {
379+
margin-right: ${space(1)};
380+
}
381+
}
382+
`;
383+
352384
const StyledPanelItem = styled(PanelItem)`
353385
padding: ${space(1)} ${space(2)} ${space(2)};
354386
`;
355387

388+
const RuleRowContainer = styled('div')`
389+
background-color: ${p => p.theme.backgroundSecondary};
390+
border-radius: ${p => p.theme.borderRadius};
391+
border: 1px ${p => p.theme.borderLight} solid;
392+
`;
393+
356394
export default withOrganization(ActionsPanelWithSpace);

tests/js/spec/views/settings/incidentRules/details.spec.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -100,7 +100,7 @@ describe('Incident Rules Details', function() {
100100
.simulate('change', {target: {value: 12}});
101101

102102
// Create a new action
103-
wrapper.find('button[aria-label="Add Item"]').simulate('click');
103+
wrapper.find('button[aria-label="Add New Action"]').simulate('click');
104104

105105
// Save Trigger
106106
wrapper.find('button[aria-label="Save Rule"]').simulate('submit');

0 commit comments

Comments
 (0)