[SecuritySolution] Replace dashboard listing with Kibana dashboard listing

packages/content-management/table_list/src/components/table.tsx

@@ -28,7 +28,8 @@ import type {
   Props as TableListViewProps,
   UserContentCommonSchema,
 } from '../table_list_view';
-import type { TableItemsRowActions } from '../types';
+import type { TableItemsRowActions, TagReference } from '../types';
+
 import { TableSortSelect } from './table_sort_select';
 import { TagFilterPanel } from './tag_filter_panel';
 import { useTagFilterPanel } from './use_tag_filter_panel';
@@ -46,43 +47,45 @@ type TagManagementProps = Pick<
 >;
 
 interface Props<T extends UserContentCommonSchema> extends State<T>, TagManagementProps {
+  clearTagSelection: () => void;
+  deleteItems: TableListViewProps<T>['deleteItems'];
   dispatch: Dispatch<Action<T>>;
   entityName: string;
   entityNamePlural: string;
-  isFetchingItems: boolean;
-  tableCaption: string;
-  tableColumns: Array<EuiBasicTableColumn<T>>;
   hasUpdatedAtMetadata: boolean;
-  deleteItems: TableListViewProps<T>['deleteItems'];
-  tableItemsRowActions: TableItemsRowActions;
+  isFetchingItems: boolean;
   onSortChange: (column: SortColumnField, direction: Direction) => void;
   onTableChange: (criteria: CriteriaWithPagination<T>) => void;
   onTableSearchChange: (arg: { query: Query | null; queryText: string }) => void;
-  clearTagSelection: () => void;
+  tableCaption: string;
+  tableColumns: Array<EuiBasicTableColumn<T>>;
+  tableItemsRowActions: TableItemsRowActions;
+  fixedTagReferences?: TagReference[] | null;
 }
 
 export function Table<T extends UserContentCommonSchema>({
+  addOrRemoveExcludeTagFilter,
+  addOrRemoveIncludeTagFilter,
+  clearTagSelection,
+  deleteItems,
   dispatch,
-  items,
+  entityName,
+  entityNamePlural,
+  hasUpdatedAtMetadata,
   isFetchingItems,
+  items,
+  onSortChange,
+  onTableChange,
+  onTableSearchChange,
+  pagination,
   searchQuery,
   selectedIds,
-  pagination,
+  tableCaption,
   tableColumns,
+  tableItemsRowActions,
   tableSort,
-  hasUpdatedAtMetadata,
-  entityName,
-  entityNamePlural,
   tagsToTableItemMap,
-  tableItemsRowActions,
-  deleteItems,
-  tableCaption,
-  onTableChange,
-  onTableSearchChange,
-  onSortChange,
-  addOrRemoveExcludeTagFilter,
-  addOrRemoveIncludeTagFilter,
-  clearTagSelection,
+  fixedTagReferences,
 }: Props<T>) {
   const { getTagList } = useServices();
 
@@ -151,6 +154,7 @@ export function Table<T extends UserContentCommonSchema>({
     tagsToTableItemMap,
     addOrRemoveExcludeTagFilter,
     addOrRemoveIncludeTagFilter,
+    fixedTagReferences,
   });
 
   const tableSortSelectFilter = useMemo<SearchFilterConfig>(() => {
@@ -172,6 +176,7 @@ export function Table<T extends UserContentCommonSchema>({
     return {
       type: 'custom_component',
       component: () => {
+        const disableActions = fixedTagReferences != null;
         return (
           <TagFilterPanel
             isPopoverOpen={isPopoverOpen}
@@ -182,11 +187,13 @@ export function Table<T extends UserContentCommonSchema>({
             onFilterButtonClick={onFilterButtonClick}
             onSelectChange={onSelectChange}
             clearTagSelection={clearTagSelection}
+            disableActions={disableActions}
           />
         );
       },
     };
   }, [
+    fixedTagReferences,
     isPopoverOpen,
     isInUse,
     closePopover,

packages/content-management/table_list/src/components/tag_filter_panel.tsx

@@ -46,23 +46,25 @@ const saveBtnWrapperCSS = css`
 interface Props {
   clearTagSelection: () => void;
   closePopover: () => void;
-  isPopoverOpen: boolean;
+  disableActions?: boolean;
   isInUse: boolean;
-  options: TagOptionItem[];
-  totalActiveFilters: number;
+  isPopoverOpen: boolean;
   onFilterButtonClick: () => void;
   onSelectChange: (updatedOptions: TagOptionItem[]) => void;
+  options: TagOptionItem[];
+  totalActiveFilters: number;
 }
 
 export const TagFilterPanel: FC<Props> = ({
-  isPopoverOpen,
+  clearTagSelection,
+  closePopover,
+  disableActions,
   isInUse,
-  options,
-  totalActiveFilters,
+  isPopoverOpen,
   onFilterButtonClick,
   onSelectChange,
-  closePopover,
-  clearTagSelection,
+  options,
+  totalActiveFilters,
 }) => {
   const { euiTheme } = useEuiTheme();
   const { navigateToUrl, currentAppId$, getTagManagementUrl } = useServices();
@@ -122,18 +124,24 @@ export const TagFilterPanel: FC<Props> = ({
         <EuiPopoverTitle paddingSize="m" css={popoverTitleCSS}>
           <EuiFlexGroup>
             <EuiFlexItem>Tags</EuiFlexItem>
-            <EuiFlexItem grow={false}>
-              {totalActiveFilters > 0 && (
-                <EuiButtonEmpty flush="both" onClick={clearTagSelection} css={clearSelectionBtnCSS}>
-                  {i18n.translate(
-                    'contentManagement.tableList.tagFilterPanel.clearSelectionButtonLabelLabel',
-                    {
-                      defaultMessage: 'Clear selection',
-                    }
-                  )}
-                </EuiButtonEmpty>
-              )}
-            </EuiFlexItem>
+            {!disableActions && (
+              <EuiFlexItem grow={false}>
+                {totalActiveFilters > 0 && (
+                  <EuiButtonEmpty
+                    flush="both"
+                    onClick={clearTagSelection}
+                    css={clearSelectionBtnCSS}
+                  >
+                    {i18n.translate(
+                      'contentManagement.tableList.tagFilterPanel.clearSelectionButtonLabelLabel',
+                      {
+                        defaultMessage: 'Clear selection',
+                      }
+                    )}
+                  </EuiButtonEmpty>
+                )}
+              </EuiFlexItem>
+            )}
           </EuiFlexGroup>
         </EuiPopoverTitle>
         <EuiSelectable<any>
@@ -156,6 +164,7 @@ export const TagFilterPanel: FC<Props> = ({
             );
           }}
         </EuiSelectable>
+
         <EuiPopoverFooter paddingSize="m">
           <EuiFlexGroup direction="column" alignItems="center" gutterSize="s">
             <EuiFlexItem>

packages/content-management/table_list/src/components/use_tag_filter_panel.tsx

@@ -5,12 +5,12 @@
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
-import React, { useEffect, useState, useCallback } from 'react';
+import React, { useEffect, useState, useCallback, useMemo } from 'react';
 import type { MouseEvent } from 'react';
 import { Query, EuiFlexGroup, EuiFlexItem, EuiText, EuiHealth, EuiBadge } from '@elastic/eui';
 import type { FieldValueOptionType } from '@elastic/eui';
 
-import type { Tag } from '../types';
+import type { Tag, TagReference } from '../types';
 
 const isMac = navigator.platform.toLowerCase().indexOf('mac') >= 0;
 
@@ -36,14 +36,25 @@ export interface Params {
   getTagList: () => Tag[];
   addOrRemoveIncludeTagFilter: (tag: Tag) => void;
   addOrRemoveExcludeTagFilter: (tag: Tag) => void;
+  fixedTagReferences?: TagReference[] | null;
 }
 
+const getTotalActiveFilters = (
+  options: TagOptionItem[],
+  fixedTagReferences?: TagReference[] | null
+) =>
+  Math.max(
+    fixedTagReferences?.length ?? 0,
+    options.filter((option) => option.checked === 'on').length ?? 0
+  );
+
 export const useTagFilterPanel = ({
   query,
   tagsToTableItemMap,
   getTagList,
   addOrRemoveExcludeTagFilter,
   addOrRemoveIncludeTagFilter,
+  fixedTagReferences,
 }: Params) => {
   const [isPopoverOpen, setIsPopoverOpen] = useState(false);
   // When the panel is "in use" it means that it is opened and the user is interacting with it.
@@ -53,21 +64,31 @@ export const useTagFilterPanel = ({
   const [isInUse, setIsInUse] = useState(false);
   const [options, setOptions] = useState<TagOptionItem[]>([]);
   const [tagSelection, setTagSelection] = useState<TagSelection>({});
-  const totalActiveFilters = Object.keys(tagSelection).length;
+  const totalActiveFilters = useMemo(
+    () => getTotalActiveFilters(options, fixedTagReferences),
+    [fixedTagReferences, options]
+  );
 
   const onSelectChange = useCallback(
     (updatedOptions: TagOptionItem[]) => {
       // Note: see data flow comment in useEffect() below
       const diff = updatedOptions.find((item, index) => item.checked !== options[index].checked);
+
+      if (fixedTagReferences?.find((ref) => ref.name === diff?.tag.name)) {
+        return;
+      }
       if (diff) {
         addOrRemoveIncludeTagFilter(diff.tag);
       }
     },
-    [options, addOrRemoveIncludeTagFilter]
+    [fixedTagReferences, options, addOrRemoveIncludeTagFilter]
   );
 
   const onOptionClick = useCallback(
     (tag: Tag) => (e: MouseEvent) => {
+      if (fixedTagReferences?.find((ref) => ref.name === tag.name)) {
+        return;
+      }
       const withModifierKey = (isMac && e.metaKey) || (!isMac && e.ctrlKey);
 
       if (withModifierKey) {
@@ -76,7 +97,7 @@ export const useTagFilterPanel = ({
         addOrRemoveIncludeTagFilter(tag);
       }
     },
-    [addOrRemoveIncludeTagFilter, addOrRemoveExcludeTagFilter]
+    [addOrRemoveExcludeTagFilter, addOrRemoveIncludeTagFilter, fixedTagReferences]
   );
 
   const updateTagList = useCallback(() => {
@@ -118,7 +139,7 @@ export const useTagFilterPanel = ({
     });
 
     setOptions(tagsToSelectOptions);
-  }, [getTagList, tagsToTableItemMap, tagSelection, onOptionClick]);
+  }, [getTagList, tagSelection, onOptionClick, tagsToTableItemMap]);
 
   const onFilterButtonClick = useCallback(() => {
     setIsPopoverOpen((prev) => !prev);