[Security Solutions][Detection Engine] Fixes button group alignments …

…in machine learning and tags (#105166) (#105168)

## Summary

See:
#104055

For more issue details. This is deemed embarrassing enough to be critical for a fix for 7.14.0 before shipping.

EUI looks to have updated its self and added a new attribute that it wants us to use called `numFIlters` which when set will show the total number of filter items before they are selected. Once selected the number and look and feel change.

```ts
numFilters
```

Before:
<img width="717" alt="Screen Shot 2021-07-09 at 5 45 08 PM" src="https://user-images.githubusercontent.com/1151048/125145520-c0fb7a80-e0de-11eb-9540-17bb999a069d.png">

After before selections:
<img width="716" alt="Screen Shot 2021-07-09 at 5 48 43 PM" src="https://user-images.githubusercontent.com/1151048/125145576-fa33ea80-e0de-11eb-8dfe-2d83849696f4.png">

After once you have selections:
<img width="720" alt="Screen Shot 2021-07-09 at 5 49 44 PM" src="https://user-images.githubusercontent.com/1151048/125145610-19327c80-e0df-11eb-8c2a-2ac2c881bc96.png">


Before:
<img width="846" alt="Screen Shot 2021-07-09 at 5 42 01 PM" src="https://user-images.githubusercontent.com/1151048/125145537-cc4ea600-e0de-11eb-92d3-6caad4897a3c.png">

After before selections:
<img width="859" alt="Screen Shot 2021-07-09 at 5 42 27 PM" src="https://user-images.githubusercontent.com/1151048/125145554-d96b9500-e0de-11eb-8abe-35a65c005d5e.png">

After once you have selections:
<img width="873" alt="Screen Shot 2021-07-09 at 5 49 36 PM" src="https://user-images.githubusercontent.com/1151048/125145616-264f6b80-e0df-11eb-9453-575b15c6001e.png">

### Checklist

- [x] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios

Co-authored-by: Frank Hassanabad <[email protected]>

x-pack/plugins/security_solution/public/common/components/ml_popover/jobs_table/filters/groups_filter_popover.tsx

@@ -59,6 +59,7 @@ export const GroupsFilterPopoverComponent = ({
  iconType="arrowDown"
  onClick={() => setIsGroupPopoverOpen(!isGroupPopoverOpen)}
  isSelected={isGroupPopoverOpen}
+ numFilters={uniqueGroups.length}
  hasActiveFilters={selectedGroups.length > 0}
  numActiveFilters={selectedGroups.length}
  >

x-pack/plugins/security_solution/public/detections/pages/detection_engine/rules/all/rules_table_filters/tags_filter_popover.tsx

@@ -102,9 +102,11 @@ const TagsFilterPopoverComponent = ({
  ownFocus
  button={
  <EuiFilterButton
+ grow={true}
  data-test-subj={'tags-filter-popover-button'}
  iconType="arrowDown"
  onClick={() => setIsTagPopoverOpen(!isTagPopoverOpen)}
+ numFilters={tags.length}
  isSelected={isTagPopoverOpen}
  hasActiveFilters={selectedTags.length > 0}
  numActiveFilters={selectedTags.length}