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

Author: robinrendle

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

@@ -92,6 +92,6 @@ export default function ActionTargetSelector(props: Props) {
       );
 
     default:
-      return <span />;
+      return null;
   }
 }

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

@@ -259,62 +259,79 @@ class ActionsPanel extends React.PureComponent<Props> {
                 );
 
                 return (
-                  <PanelItemGrid key={i}>
-                    <SelectControl
-                      name="select-level"
-                      aria-label={t('Select a status level')}
-                      isDisabled={disabled || loading}
-                      placeholder={t('Select Level')}
-                      onChange={this.handleChangeActionLevel.bind(this, triggerIndex, i)}
-                      value={triggerIndex}
-                      options={levels}
-                    />
-
-                    <SelectControl
-                      name="select-action"
-                      aria-label={t('Select an Action')}
-                      isDisabled={disabled || loading}
-                      placeholder={t('Select Action')}
-                      onChange={this.handleChangeActionType.bind(this, triggerIndex, i)}
-                      value={getActionUniqueKey(action)}
-                      options={items ?? []}
-                    />
-
-                    {availableAction && availableAction.allowedTargetTypes.length > 1 ? (
-                      <SelectControl
-                        isDisabled={disabled || loading}
-                        value={action.targetType}
-                        options={availableAction?.allowedTargetTypes?.map(
-                          allowedType => ({
-                            value: allowedType,
-                            label: TargetLabel[allowedType],
-                          })
-                        )}
-                        onChange={this.handleChangeTarget.bind(this, triggerIndex, i)}
-                      />
-                    ) : (
-                      <span />
-                    )}
-                    <ActionTargetSelector
-                      action={action}
-                      availableAction={availableAction}
-                      disabled={disabled}
-                      loading={loading}
-                      onChange={this.handleChangeTargetIdentifier.bind(
-                        this,
-                        triggerIndex,
-                        i
-                      )}
-                      organization={organization}
-                      project={project}
-                    />
-                    <DeleteActionButton
-                      triggerIndex={triggerIndex}
-                      index={i}
-                      onClick={this.handleDeleteAction}
-                      disabled={disabled}
-                    />
-                  </PanelItemGrid>
+                  <PanelItemWrapper key={i}>
+                    <RuleRowContainer>
+                      <PanelItemGrid>
+                        <PanelItemSelects>
+                          <SelectControl
+                            name="select-level"
+                            aria-label={t('Select a status level')}
+                            isDisabled={disabled || loading}
+                            placeholder={t('Select Level')}
+                            onChange={this.handleChangeActionLevel.bind(
+                              this,
+                              triggerIndex,
+                              i
+                            )}
+                            value={triggerIndex}
+                            options={levels}
+                          />
+
+                          <SelectControl
+                            name="select-action"
+                            aria-label={t('Select an Action')}
+                            isDisabled={disabled || loading}
+                            placeholder={t('Select Action')}
+                            onChange={this.handleChangeActionType.bind(
+                              this,
+                              triggerIndex,
+                              i
+                            )}
+                            value={getActionUniqueKey(action)}
+                            options={items ?? []}
+                          />
+
+                          {availableAction &&
+                          availableAction.allowedTargetTypes.length > 1 ? (
+                            <SelectControl
+                              isDisabled={disabled || loading}
+                              value={action.targetType}
+                              options={availableAction?.allowedTargetTypes?.map(
+                                allowedType => ({
+                                  value: allowedType,
+                                  label: TargetLabel[allowedType],
+                                })
+                              )}
+                              onChange={this.handleChangeTarget.bind(
+                                this,
+                                triggerIndex,
+                                i
+                              )}
+                            />
+                          ) : null}
+                          <ActionTargetSelector
+                            action={action}
+                            availableAction={availableAction}
+                            disabled={disabled}
+                            loading={loading}
+                            onChange={this.handleChangeTargetIdentifier.bind(
+                              this,
+                              triggerIndex,
+                              i
+                            )}
+                            organization={organization}
+                            project={project}
+                          />
+                        </PanelItemSelects>
+                        <DeleteActionButton
+                          triggerIndex={triggerIndex}
+                          index={i}
+                          onClick={this.handleDeleteAction}
+                          disabled={disabled}
+                        />
+                      </PanelItemGrid>
+                    </RuleRowContainer>
+                  </PanelItemWrapper>
                 );
               })
             );
@@ -327,7 +344,7 @@ class ActionsPanel extends React.PureComponent<Props> {
               icon={<IconAdd isCircled color="gray500" />}
               onClick={this.handleAddAction}
             >
-              Add Item
+              {t('Add New Action')}
             </Button>
           </StyledPanelItem>
         </PanelBody>
@@ -340,17 +357,38 @@ const ActionsPanelWithSpace = styled(ActionsPanel)`
   margin-top: ${space(4)};
 `;
 
+const PanelItemWrapper = styled(`div`)`
+  padding: ${space(0.5)} ${space(2)} ${space(1)};
+`;
+
 const PanelItemGrid = styled(PanelItem)`
-  display: grid;
-  grid-template-columns: 1fr 1fr 1fr 1fr min-content;
+  display: flex;
   align-items: center;
-  grid-gap: ${space(2)};
-  padding: ${space(0.5)} ${space(2)} ${space(1)};
+  padding: ${space(1)};
   border-bottom: 0;
 `;
 
+const PanelItemSelects = styled('div')`
+  display: flex;
+  width: 100%;
+  margin-right: ${space(1)};
+  > * {
+    flex: 0 1 200px;
+
+    &:not(:last-child) {
+      margin-right: ${space(1)};
+    }
+  }
+`;
+
 const StyledPanelItem = styled(PanelItem)`
   padding: ${space(1)} ${space(2)} ${space(2)};
 `;
 
+const RuleRowContainer = styled('div')`
+  background-color: ${p => p.theme.backgroundSecondary};
+  border-radius: ${p => p.theme.borderRadius};
+  border: 1px ${p => p.theme.borderLight} solid;
+`;
+
 export default withOrganization(ActionsPanelWithSpace);

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

@@ -100,7 +100,7 @@ describe('Incident Rules Details', function() {
       .simulate('change', {target: {value: 12}});
 
     // Create a new action
-    wrapper.find('button[aria-label="Add Item"]').simulate('click');
+    wrapper.find('button[aria-label="Add New Action"]').simulate('click');
 
     // Save Trigger
     wrapper.find('button[aria-label="Save Rule"]').simulate('submit');