Add clear all button to tag filter dropdown (#132433)

elastic · May 18, 2022 · afe71c7 · afe71c7
1 parent 74b73ad
commit afe71c7
Showing 1 changed file with 43 additions and 18 deletions.
diff --git a/...c/applications/fleet/sections/agents/agent_list_page/components/search_and_filter_bar.tsx b/...c/applications/fleet/sections/agents/agent_list_page/components/search_and_filter_bar.tsx
@@ -13,12 +13,15 @@ import {
   EuiFilterSelectItem,
   EuiFlexGroup,
   EuiFlexItem,
+  EuiHorizontalRule,
+  EuiIcon,
   EuiPopover,
   EuiPortal,
   EuiToolTip,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
+import styled from 'styled-components';
 
 import type { Agent, AgentPolicy } from '../../../../types';
 import { AgentEnrollmentFlyout, SearchBar } from '../../../../components';
@@ -62,6 +65,10 @@ const statusFilters = [
   },
 ];
 
+const ClearAllTagsFilterItem = styled(EuiFilterSelectItem)`
+  padding: ${(props) => props.theme.eui.paddingSizes.s};
+`;
+
 export const SearchAndFilterBar: React.FunctionComponent<{
   agentPolicies: AgentPolicy[];
   draftKuery: string;
@@ -222,27 +229,45 @@ export const SearchAndFilterBar: React.FunctionComponent<{
                   panelPaddingSize="none"
                 >
                   <div className="euiFilterSelect__items">
-                    {tags.map((tag, index) => (
-                      <EuiFilterSelectItem
-                        checked={selectedTags.includes(tag) ? 'on' : undefined}
-                        key={index}
+                    <>
+                      {tags.map((tag, index) => (
+                        <EuiFilterSelectItem
+                          checked={selectedTags.includes(tag) ? 'on' : undefined}
+                          key={index}
+                          onClick={() => {
+                            if (selectedTags.includes(tag)) {
+                              removeTagsFilter(tag);
+                            } else {
+                              addTagsFilter(tag);
+                            }
+                          }}
+                        >
+                          {tag.length > MAX_TAG_DISPLAY_LENGTH ? (
+                            <EuiToolTip content={tag}>
+                              <span>{truncateTag(tag)}</span>
+                            </EuiToolTip>
+                          ) : (
+                            tag
+                          )}
+                        </EuiFilterSelectItem>
+                      ))}
+
+                      <EuiHorizontalRule margin="none" />
+
+                      <ClearAllTagsFilterItem
+                        showIcons={false}
                         onClick={() => {
-                          if (selectedTags.includes(tag)) {
-                            removeTagsFilter(tag);
-                          } else {
-                            addTagsFilter(tag);
-                          }
+                          onSelectedTagsChange([]);
                         }}
                       >
-                        {tag.length > MAX_TAG_DISPLAY_LENGTH ? (
-                          <EuiToolTip content={tag}>
-                            <span>{truncateTag(tag)}</span>
-                          </EuiToolTip>
-                        ) : (
-                          tag
-                        )}
-                      </EuiFilterSelectItem>
-                    ))}
+                        <EuiFlexGroup alignItems="center" justifyContent="center" gutterSize="s">
+                          <EuiFlexItem grow={false}>
+                            <EuiIcon type="crossInACircleFilled" color="danger" size="s" />
+                          </EuiFlexItem>
+                          <EuiFlexItem grow={false}>Clear all</EuiFlexItem>
+                        </EuiFlexGroup>
+                      </ClearAllTagsFilterItem>
+                    </>
                   </div>
                 </EuiPopover>
                 <EuiPopover