@@ -259,62 +259,79 @@ class ActionsPanel extends React.PureComponent<Props> {
259
259
) ;
260
260
261
261
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 >
318
335
) ;
319
336
} )
320
337
) ;
@@ -327,7 +344,7 @@ class ActionsPanel extends React.PureComponent<Props> {
327
344
icon = { < IconAdd isCircled color = "gray500" /> }
328
345
onClick = { this . handleAddAction }
329
346
>
330
- Add Item
347
+ { t ( ' Add New Action' ) }
331
348
</ Button >
332
349
</ StyledPanelItem >
333
350
</ PanelBody >
@@ -340,17 +357,38 @@ const ActionsPanelWithSpace = styled(ActionsPanel)`
340
357
margin-top: ${ space ( 4 ) } ;
341
358
` ;
342
359
360
+ const PanelItemWrapper = styled ( `div` ) `
361
+ padding: ${ space ( 0.5 ) } ${ space ( 2 ) } ${ space ( 1 ) } ;
362
+ ` ;
363
+
343
364
const PanelItemGrid = styled ( PanelItem ) `
344
- display: grid;
345
- grid-template-columns: 1fr 1fr 1fr 1fr min-content;
365
+ display: flex;
346
366
align-items: center;
347
- grid-gap: ${ space ( 2 ) } ;
348
- padding: ${ space ( 0.5 ) } ${ space ( 2 ) } ${ space ( 1 ) } ;
367
+ padding: ${ space ( 1 ) } ;
349
368
border-bottom: 0;
350
369
` ;
351
370
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
+
352
384
const StyledPanelItem = styled ( PanelItem ) `
353
385
padding: ${ space ( 1 ) } ${ space ( 2 ) } ${ space ( 2 ) } ;
354
386
` ;
355
387
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
+
356
394
export default withOrganization ( ActionsPanelWithSpace ) ;
0 commit comments