[Security Solution][Detection Rules] Fixes rules table tag display bug (#85229) (#85354)

Author: dplumlee

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

@@ -503,6 +503,7 @@ export const AllRules = React.memo<AllRulesProps>(
                 onFilterChanged={onFilterChangedCallback}
                 rulesCustomInstalled={rulesCustomInstalled}
                 rulesInstalled={rulesInstalled}
+                currentFilterTags={filterOptions.tags ?? []}
               />
             </HeaderSection>
 

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

@@ -18,6 +18,7 @@ describe('RulesTableFilters', () => {
           onFilterChanged={jest.fn()}
           rulesCustomInstalled={null}
           rulesInstalled={null}
+          currentFilterTags={[]}
         />
       );
 
@@ -37,6 +38,7 @@ describe('RulesTableFilters', () => {
           onFilterChanged={jest.fn()}
           rulesCustomInstalled={10}
           rulesInstalled={9}
+          currentFilterTags={[]}
         />
       );
 

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

@@ -25,6 +25,7 @@ interface RulesTableFiltersProps {
   onFilterChanged: (filterOptions: Partial<FilterOptions>) => void;
   rulesCustomInstalled: number | null;
   rulesInstalled: number | null;
+  currentFilterTags: string[];
 }
 
 /**
@@ -37,6 +38,7 @@ const RulesTableFiltersComponent = ({
   onFilterChanged,
   rulesCustomInstalled,
   rulesInstalled,
+  currentFilterTags,
 }: RulesTableFiltersProps) => {
   const [filter, setFilter] = useState<string>('');
   const [selectedTags, setSelectedTags] = useState<string[]>([]);
@@ -94,6 +96,7 @@ const RulesTableFiltersComponent = ({
             onSelectedTagsChanged={handleSelectedTags}
             selectedTags={selectedTags}
             tags={tags}
+            currentFilterTags={currentFilterTags}
             data-test-subj="allRulesTagPopover"
           />
         </EuiFilterGroup>

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

@@ -16,6 +16,7 @@ describe('TagsFilterPopover', () => {
         tags={[]}
         selectedTags={[]}
         onSelectedTagsChanged={jest.fn()}
+        currentFilterTags={[]}
         isLoading={false}
       />
     );

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

@@ -33,6 +33,7 @@ interface TagsFilterPopoverProps {
   selectedTags: string[];
   tags: string[];
   onSelectedTagsChanged: Dispatch<SetStateAction<string[]>>;
+  currentFilterTags: string[];
   // eslint-disable-next-line react/no-unused-prop-types
   isLoading: boolean; // TO DO reimplement?
 }
@@ -62,8 +63,12 @@ const TagsFilterPopoverComponent = ({
   tags,
   selectedTags,
   onSelectedTagsChanged,
+  currentFilterTags,
 }: TagsFilterPopoverProps) => {
-  const sortedTags = useMemo(() => caseInsensitiveSort(tags), [tags]);
+  const sortedTags = useMemo(
+    () => caseInsensitiveSort(Array.from(new Set([...tags, ...currentFilterTags]))),
+    [tags, currentFilterTags]
+  );
   const [isTagPopoverOpen, setIsTagPopoverOpen] = useState(false);
   const [searchInput, setSearchInput] = useState('');
   const [filterTags, setFilterTags] = useState(sortedTags);