Fix tag filter button with incorrect styles (#133454)

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

x-pack/plugins/triggers_actions_ui/public/application/sections/rules_list/components/rule_tag_filter.test.tsx

@@ -7,7 +7,7 @@
 
 import React from 'react';
 import { mountWithIntl } from '@kbn/test-jest-helpers';
-import { EuiFilterButton, EuiSelectable } from '@elastic/eui';
+import { EuiFilterButton, EuiSelectable, EuiFilterGroup } from '@elastic/eui';
 import { RuleTagFilter } from './rule_tag_filter';
 
 const onChangeMock = jest.fn();
@@ -74,4 +74,18 @@ describe('rule_tag_filter', () => {
       tags.length + selectedTags.length
     );
   });
+
+  it('renders the tag filter with a EuiFilterGroup if isGrouped is false', async () => {
+    const wrapper = mountWithIntl(
+      <RuleTagFilter tags={tags} selectedTags={[]} onChange={onChangeMock} />
+    );
+
+    expect(wrapper.find(EuiFilterGroup).exists()).toBeTruthy();
+
+    wrapper.setProps({
+      isGrouped: true,
+    });
+
+    expect(wrapper.find(EuiFilterGroup).exists()).toBeFalsy();
+  });
 });

x-pack/plugins/triggers_actions_ui/public/application/sections/rules_list/components/rule_tag_filter.tsx

@@ -10,6 +10,7 @@ import { FormattedMessage } from '@kbn/i18n-react';
 import {
   EuiSelectable,
   EuiFilterButton,
+  EuiFilterGroup,
   EuiPopover,
   EuiSelectableProps,
   EuiSelectableOption,
@@ -19,6 +20,7 @@ import {
 export interface RuleTagFilterProps {
   tags: string[];
   selectedTags: string[];
+  isGrouped?: boolean; // Whether or not this should appear as the child of a EuiFilterGroup
   isLoading?: boolean;
   loadingMessage?: EuiSelectableProps['loadingMessage'];
   noMatchesMessage?: EuiSelectableProps['noMatchesMessage'];
@@ -37,6 +39,7 @@ export const RuleTagFilter = (props: RuleTagFilterProps) => {
   const {
     tags = [],
     selectedTags = [],
+    isGrouped = false,
     isLoading = false,
     loadingMessage,
     noMatchesMessage,
@@ -101,33 +104,42 @@ export const RuleTagFilter = (props: RuleTagFilterProps) => {
     );
   };
 
+  const Container = useMemo(() => {
+    if (isGrouped) {
+      return React.Fragment;
+    }
+    return EuiFilterGroup;
+  }, [isGrouped]);
+
   return (
-    <EuiPopover
-      data-test-subj={dataTestSubj}
-      isOpen={isPopoverOpen}
-      closePopover={onClosePopover}
-      button={renderButton()}
-    >
-      <EuiSelectable
-        searchable
-        data-test-subj={selectableDataTestSubj}
-        isLoading={isLoading}
-        options={options}
-        loadingMessage={loadingMessage}
-        noMatchesMessage={noMatchesMessage}
-        emptyMessage={emptyMessage}
-        errorMessage={errorMessage}
-        onChange={onChangeInternal}
+    <Container>
+      <EuiPopover
+        data-test-subj={dataTestSubj}
+        isOpen={isPopoverOpen}
+        closePopover={onClosePopover}
+        button={renderButton()}
       >
-        {(list, search) => (
-          <>
-            {search}
-            <EuiSpacer size="xs" />
-            {list}
-          </>
-        )}
-      </EuiSelectable>
-    </EuiPopover>
+        <EuiSelectable
+          searchable
+          data-test-subj={selectableDataTestSubj}
+          isLoading={isLoading}
+          options={options}
+          loadingMessage={loadingMessage}
+          noMatchesMessage={noMatchesMessage}
+          emptyMessage={emptyMessage}
+          errorMessage={errorMessage}
+          onChange={onChangeInternal}
+        >
+          {(list, search) => (
+            <>
+              {search}
+              <EuiSpacer size="xs" />
+              {list}
+            </>
+          )}
+        </EuiSelectable>
+      </EuiPopover>
+    </Container>
   );
 };
 

x-pack/plugins/triggers_actions_ui/public/application/sections/rules_list/components/rules_list.tsx

@@ -382,7 +382,9 @@ export const RulesList: React.FunctionComponent = () => {
 
   const getRuleTagFilter = () => {
     if (isRuleTagFilterEnabled) {
-      return [<RuleTagFilter tags={tags} selectedTags={tagsFilter} onChange={setTagsFilter} />];
+      return [
+        <RuleTagFilter isGrouped tags={tags} selectedTags={tagsFilter} onChange={setTagsFilter} />,
+      ];
     }
     return [];
   };