[SecuritySolution] Replace dashboard listing with Kibana dashboard listing

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

@@ -28,7 +28,7 @@ import type {
   Props as TableListViewProps,
   UserContentCommonSchema,
 } from '../table_list_view';
-import type { TableItemsRowActions } from '../types';
+import type { TableItemsRowActions, Tag } from '../types';
 import { TableSortSelect } from './table_sort_select';
 import { TagFilterPanel } from './tag_filter_panel';
 import { useTagFilterPanel } from './use_tag_filter_panel';
@@ -46,43 +46,47 @@ 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>>;
+  fixedTag?: string;
   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?: Tag[] | null;
 }
 
 export function Table<T extends UserContentCommonSchema>({
+  addOrRemoveExcludeTagFilter,
+  addOrRemoveIncludeTagFilter,
+  clearTagSelection,
+  deleteItems,
   dispatch,
-  items,
+  entityName,
+  entityNamePlural,
+  fixedTag,
+  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 +155,7 @@ export function Table<T extends UserContentCommonSchema>({
     tagsToTableItemMap,
     addOrRemoveExcludeTagFilter,
     addOrRemoveIncludeTagFilter,
+    fixedTagReferences,
   });
 
   const tableSortSelectFilter = useMemo<SearchFilterConfig>(() => {
@@ -172,6 +177,7 @@ export function Table<T extends UserContentCommonSchema>({
     return {
       type: 'custom_component',
       component: () => {
+        const disableActions = fixedTagReferences != null;
         return (
           <TagFilterPanel
             isPopoverOpen={isPopoverOpen}
@@ -182,11 +188,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

@@ -36,6 +36,7 @@ export interface Params {
   getTagList: () => Tag[];
   addOrRemoveIncludeTagFilter: (tag: Tag) => void;
   addOrRemoveExcludeTagFilter: (tag: Tag) => void;
+  fixedTagReferences?: Tag[] | null;
 }
 
 export const useTagFilterPanel = ({
@@ -44,6 +45,7 @@ export const useTagFilterPanel = ({
   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.
@@ -59,15 +61,22 @@ export const useTagFilterPanel = ({
     (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 +85,7 @@ export const useTagFilterPanel = ({
         addOrRemoveIncludeTagFilter(tag);
       }
     },
-    [addOrRemoveIncludeTagFilter, addOrRemoveExcludeTagFilter]
+    [addOrRemoveExcludeTagFilter, addOrRemoveIncludeTagFilter, fixedTagReferences]
   );
 
   const updateTagList = useCallback(() => {
@@ -118,7 +127,7 @@ export const useTagFilterPanel = ({
     });
 
     setOptions(tagsToSelectOptions);
-  }, [getTagList, tagsToTableItemMap, tagSelection, onOptionClick]);
+  }, [getTagList, tagSelection, onOptionClick, tagsToTableItemMap]);
 
   const onFilterButtonClick = useCallback(() => {
     setIsPopoverOpen((prev) => !prev);

packages/content-management/table_list/src/table_list_view.test.tsx

@@ -610,7 +610,7 @@ describe('TableListView', () => {
       },
     ];
 
-    test('should have an "inpect" button if the content editor is enabled', async () => {
+    test('should have an "inspect" button if the content editor is enabled', async () => {
       let testBed: TestBed;
 
       await act(async () => {
@@ -629,6 +629,63 @@ describe('TableListView', () => {
     });
   });
 
+  describe('render PageTemplateHeader', () => {
+    const hits: UserContentCommonSchema[] = [
+      {
+        id: '123',
+        updatedAt: twoDaysAgo.toISOString(),
+        type: 'dashboard',
+        attributes: {
+          title: 'Item 1',
+          description: 'Item 1 description',
+        },
+        references: [],
+      },
+      {
+        id: '456',
+        // This is the latest updated and should come first in the table
+        updatedAt: yesterday.toISOString(),
+        type: 'dashboard',
+        attributes: {
+          title: 'Item 2',
+          description: 'Item 2 description',
+        },
+        references: [],
+      },
+    ];
+
+    test('should render PageTemplateHeader', async () => {
+      let testBed: TestBed;
+
+      await act(async () => {
+        testBed = await setup({
+          findItems: jest.fn().mockResolvedValue({ total: hits.length, hits }),
+        });
+      });
+
+      const { exists, component } = testBed!;
+      component.update();
+
+      expect(exists('top-nav')).toBeTruthy();
+    });
+
+    test('should not render PageTemplateHeader if withPageTemplateHeader is false', async () => {
+      let testBed: TestBed;
+
+      await act(async () => {
+        testBed = await setup({
+          findItems: jest.fn().mockResolvedValue({ total: hits.length, hits }),
+          withPageTemplateHeader: false,
+        });
+      });
+
+      const { exists, component } = testBed!;
+      component.update();
+
+      expect(exists('top-nav')).toBeFalsy();
+    });
+  });
+
   describe('tag filtering', () => {
     const setupTagFiltering = registerTestBed<string, TableListViewProps>(
       WithServices<TableListViewProps>(TableListView, {
@@ -671,6 +728,55 @@ describe('TableListView', () => {
       },
     ];
 
+    test('should render default query if fixedTagReferences is provided', async () => {
+      let testBed: TestBed;
+
+      const findItems = jest.fn().mockResolvedValue({ total: hits.length, hits });
+
+      await act(async () => {
+        testBed = await setupTagFiltering({
+          findItems,
+          fixedTagReferences: [{ id: 'id-tag-1', name: 'tag-1', description: '', color: '' }],
+        });
+      });
+
+      const { component, find } = testBed!;
+      component.update();
+
+      const getSearchBoxValue = () => find('tableListSearchBox').props().defaultValue;
+
+      const expected = 'tag:(tag-1)';
+
+      expect(getSearchBoxValue()).toBe(expected);
+    });
+
+    test('should not able to remove the default selected tag if fixedTagReferences is provided', async () => {
+      let testBed: TestBed;
+
+      const findItems = jest.fn().mockResolvedValue({ total: hits.length, hits });
+
+      await act(async () => {
+        testBed = await setupTagFiltering({
+          findItems,
+          fixedTagReferences: [{ id: 'id-tag-1', name: 'tag-1', description: '', color: '' }],
+        });
+      });
+
+      const { component, find } = testBed!;
+      component.update();
+
+      await act(async () => {
+        find('tag-id-tag-1').simulate('click');
+      });
+      component.update();
+
+      const getSearchBoxValue = () => find('tableListSearchBox').props().defaultValue;
+
+      const expected = 'tag:(tag-1)';
+
+      expect(getSearchBoxValue()).toBe(expected);
+    });
+
     test('should filter by tag from the table', async () => {
       let testBed: TestBed;