[SecuritySolution] Dashboard listing UI

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

@@ -13,6 +13,8 @@ import {
   type TableListViewTableProps,
   type UserContentCommonSchema,
 } from '@kbn/content-management-table-list-view-table';
+import { EuiPaddingSize } from '@elastic/eui';
+import { SavedObjectsReference } from '@kbn/content-management-content-editor/src/services';
 
 export type TableListViewProps<T extends UserContentCommonSchema = UserContentCommonSchema> = Pick<
   TableListViewTableProps<T>,
@@ -46,6 +48,10 @@ export type TableListViewProps<T extends UserContentCommonSchema = UserContentCo
    */
   additionalRightSideActions?: ReactNode[];
   children?: ReactNode | undefined;
+  tagReferences?: SavedObjectsReference[] | undefined;
+  withPageTemplateHeader?: boolean;
+  restrictPageSectionWidth?: boolean;
+  pageSectionPadding?: EuiPaddingSize;
 };
 
 export const TableListView = <T extends UserContentCommonSchema>({
@@ -73,6 +79,10 @@ export const TableListView = <T extends UserContentCommonSchema>({
   titleColumnName,
   additionalRightSideActions,
   withoutPageTemplateWrapper,
+  tagReferences,
+  withPageTemplateHeader,
+  restrictPageSectionWidth,
+  pageSectionPadding,
 }: TableListViewProps<T>) => {
   const PageTemplate = withoutPageTemplateWrapper
     ? (React.Fragment as unknown as typeof KibanaPageTemplate)
@@ -83,13 +93,19 @@ export const TableListView = <T extends UserContentCommonSchema>({
 
   return (
     <PageTemplate panelled data-test-subj={pageDataTestSubject}>
-      <KibanaPageTemplate.Header
-        pageTitle={<span id={headingId}>{title}</span>}
-        description={description}
-        rightSideItems={additionalRightSideActions?.slice(0, 2)}
-        data-test-subj="top-nav"
-      />
-      <KibanaPageTemplate.Section aria-labelledby={hasInitialFetchReturned ? headingId : undefined}>
+      {withPageTemplateHeader && (
+        <KibanaPageTemplate.Header
+          pageTitle={<span id={headingId}>{title}</span>}
+          description={description}
+          rightSideItems={additionalRightSideActions?.slice(0, 2)}
+          data-test-subj="top-nav"
+        />
+      )}
+      <KibanaPageTemplate.Section
+        aria-labelledby={hasInitialFetchReturned ? headingId : undefined}
+        restrictWidth={restrictPageSectionWidth}
+        paddingSize={pageSectionPadding}
+      >
         {/* Any children passed to the component */}
         {children}
 
@@ -121,6 +137,7 @@ export const TableListView = <T extends UserContentCommonSchema>({
             }
           }}
           setPageDataTestSubject={setPageDataTestSubject}
+          tagReferences={tagReferences}
         />
       </KibanaPageTemplate.Section>
     </PageTemplate>

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

@@ -22,7 +22,7 @@ import {
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 
-import { useServices } from '../services';
+import { SavedObjectsReference, useServices } from '../services';
 import type { Action } from '../actions';
 import type {
   State as TableListViewState,
@@ -61,6 +61,7 @@ interface Props<T extends UserContentCommonSchema> extends State<T>, TagManageme
   onTableChange: (criteria: CriteriaWithPagination<T>) => void;
   onTableSearchChange: (arg: { query: Query | null; queryText: string }) => void;
   clearTagSelection: () => void;
+  tagReferences?: SavedObjectsReference[] | undefined;
 }
 
 export function Table<T extends UserContentCommonSchema>({
@@ -86,6 +87,7 @@ export function Table<T extends UserContentCommonSchema>({
   addOrRemoveExcludeTagFilter,
   addOrRemoveIncludeTagFilter,
   clearTagSelection,
+  tagReferences,
 }: Props<T>) {
   const { getTagList } = useServices();
 
@@ -150,7 +152,12 @@ export function Table<T extends UserContentCommonSchema>({
     totalActiveFilters,
   } = useTagFilterPanel({
     query: searchQuery.query,
-    getTagList,
+    getTagList: useCallback(() => {
+      const tags = getTagList();
+
+      return tags;
+    }, [getTagList]),
+    tagReferences,
     tagsToTableItemMap,
     addOrRemoveExcludeTagFilter,
     addOrRemoveIncludeTagFilter,

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

@@ -122,6 +122,7 @@ 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}>
@@ -156,6 +157,7 @@ export const TagFilterPanel: FC<Props> = ({
             );
           }}
         </EuiSelectable>
+
         <EuiPopoverFooter paddingSize="m">
           <EuiFlexGroup direction="column" alignItems="center" gutterSize="s">
             <EuiFlexItem>

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

@@ -5,12 +5,13 @@
  * 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 { SavedObjectsReference } from '../services';
 
 const isMac = navigator.platform.toLowerCase().indexOf('mac') >= 0;
 
@@ -36,6 +37,7 @@ export interface Params {
   getTagList: () => Tag[];
   addOrRemoveIncludeTagFilter: (tag: Tag) => void;
   addOrRemoveExcludeTagFilter: (tag: Tag) => void;
+  tagReferences?: SavedObjectsReference[] | undefined;
 }
 
 export const useTagFilterPanel = ({
@@ -44,6 +46,7 @@ export const useTagFilterPanel = ({
   getTagList,
   addOrRemoveExcludeTagFilter,
   addOrRemoveIncludeTagFilter,
+  tagReferences,
 }: 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.
@@ -52,8 +55,26 @@ export const useTagFilterPanel = ({
   // "isInUse" state which disable the transition.
   const [isInUse, setIsInUse] = useState(false);
   const [options, setOptions] = useState<TagOptionItem[]>([]);
-  const [tagSelection, setTagSelection] = useState<TagSelection>({});
-  const totalActiveFilters = Object.keys(tagSelection).length;
+  const [tagSelection, setTagSelection] = useState<TagSelection>(
+    tagReferences
+      ? tagReferences.reduce((acc, obj) => {
+          acc[obj.name] = 'include';
+          return acc;
+        }, {} as TagSelection)
+      : {}
+  );
+  const totalActiveFilters = useMemo(
+    () =>
+      Object.keys(tagSelection).reduce((acc, currentOption) => {
+        const inTagReferences = tagReferences?.find((ref) => ref.name === currentOption);
+        acc +=
+          inTagReferences != null
+            ? tagReferences?.filter((ref) => ref.name === currentOption).length ?? 0
+            : 1;
+        return acc;
+      }, 0),
+    [tagReferences, tagSelection]
+  );
 
   const onSelectChange = useCallback(
     (updatedOptions: TagOptionItem[]) => {
@@ -76,7 +97,7 @@ export const useTagFilterPanel = ({
         addOrRemoveIncludeTagFilter(tag);
       }
     },
-    [addOrRemoveIncludeTagFilter, addOrRemoveExcludeTagFilter]
+    [addOrRemoveExcludeTagFilter, addOrRemoveIncludeTagFilter]
   );
 
   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);

packages/content-management/table_list_view_table/src/table_list_view_table.tsx

@@ -20,6 +20,7 @@ import {
   CriteriaWithPagination,
   Query,
   Ast,
+  EuiPaddingSize,
 } from '@elastic/eui';
 import { keyBy, uniq, get } from 'lodash';
 import { i18n } from '@kbn/i18n';
@@ -91,7 +92,7 @@ export interface TableListViewTableProps<
    */
   editItem?(item: T): void;
   /**
-   * Handler to set edit action visiblity per item.
+   * Handler to set edit action visibility per item.
    */
   showEditActionForItem?(item: T): boolean;
   /**
@@ -105,12 +106,16 @@ export interface TableListViewTableProps<
    * @deprecated
    */
   withoutPageTemplateWrapper?: boolean;
+  withPageTemplateHeader?: boolean;
   contentEditor?: ContentEditorConfig;
 
   tableCaption: string;
   refreshListBouncer?: boolean;
   onFetchSuccess: () => void;
   setPageDataTestSubject: (subject: string) => void;
+  restrictPageSectionWidth?: boolean;
+  pageSectionPadding?: EuiPaddingSize;
+  tagReferences?: SavedObjectsReference[] | undefined;
 }
 
 export interface State<T extends UserContentCommonSchema = UserContentCommonSchema> {
@@ -184,7 +189,7 @@ const urlStateDeserializer = (params: URLQueryParams): URLState => {
     }
   });
 
-  // For backward compability with the Dashboard app we will support both "s" and "title" passed
+  // For backward compatibility with the Dashboard app we will support both "s" and "title" passed
   // in the query params. We might want to stop supporting both in a future release (v9.0?)
   stateFromURL.s = sanitizedParams.s ?? sanitizedParams.title;
 
@@ -242,6 +247,35 @@ const tableColumnMetadata = {
   },
 } as const;
 
+const appendQuery = (q: Query, tagName: string) => {
+  return q.addOrFieldValue('tag', tagName, true, 'eq');
+};
+
+const getDefaultQuery = (
+  initialQuery: string,
+  tagReferences: SavedObjectsReference[] | null | undefined
+) => {
+  const query = new Query(Ast.create([]), undefined, initialQuery);
+  const uniqueQueryArray = tagReferences?.reduce<string[]>((acc, { name }) => {
+    if (name && acc.indexOf(name) === -1) {
+      acc.push(name);
+    }
+    return acc;
+  }, []);
+  return (
+    uniqueQueryArray?.reduce((q, ref) => {
+      return appendQuery(q, ref);
+    }, query) ?? query
+  );
+};
+
+const getFindItemReference = (
+  references: SavedObjectsFindOptionsReference[] | undefined,
+  tagReferences?: SavedObjectsReference[] | undefined
+): SavedObjectsFindOptionsReference[] | undefined => {
+  return [...(references ?? []), ...(tagReferences?.map(({ id, type }) => ({ id, type })) ?? [])];
+};
+
 function TableListViewTableComp<T extends UserContentCommonSchema>({
   tableCaption,
   entityName,
@@ -268,6 +302,7 @@ function TableListViewTableComp<T extends UserContentCommonSchema>({
   onFetchSuccess,
   refreshListBouncer,
   setPageDataTestSubject,
+  tagReferences,
 }: TableListViewTableProps<T>) {
   useEffect(() => {
     setPageDataTestSubject(`${entityName}LandingPage`);
@@ -304,6 +339,12 @@ function TableListViewTableComp<T extends UserContentCommonSchema>({
     getTagList,
   } = useServices();
 
+  const getTagListing = useCallback(() => {
+    const tags = getTagList();
+
+    return tags;
+  }, [getTagList]);
+
   const openContentEditor = useOpenContentEditor();
 
   const isInRouterContext = useInRouterContext();
@@ -335,7 +376,7 @@ function TableListViewTableComp<T extends UserContentCommonSchema>({
       selectedIds: [],
       searchQuery:
         initialQuery !== undefined
-          ? { text: initialQuery, query: new Query(Ast.create([]), undefined, initialQuery) }
+          ? { text: initialQuery, query: getDefaultQuery(initialQuery, tagReferences) }
           : { text: '', query: new Query(Ast.create([]), undefined, '') },
       pagination: {
         pageIndex: 0,
@@ -348,7 +389,7 @@ function TableListViewTableComp<T extends UserContentCommonSchema>({
         direction: 'asc',
       },
     }),
-    [initialPageSize, initialQuery]
+    [initialPageSize, initialQuery, tagReferences]
   );
 
   const [state, dispatch] = useReducer(reducer, initialState);
@@ -385,9 +426,16 @@ function TableListViewTableComp<T extends UserContentCommonSchema>({
         referencesToExclude,
       } = searchQueryParser
         ? await searchQueryParser(searchQuery.text)
-        : { searchQuery: searchQuery.text, references: undefined, referencesToExclude: undefined };
-
-      const response = await findItems(searchQueryParsed, { references, referencesToExclude });
+        : {
+            searchQuery: searchQuery.text,
+            references: tagReferences ?? undefined,
+            referencesToExclude: undefined,
+          };
+
+      const response = await findItems(searchQueryParsed, {
+        references: getFindItemReference(references, tagReferences),
+        referencesToExclude,
+      });
 
       if (!isMounted.current) {
         return;
@@ -409,7 +457,7 @@ function TableListViewTableComp<T extends UserContentCommonSchema>({
         data: err,
       });
     }
-  }, [searchQueryParser, searchQuery.text, findItems, onFetchSuccess]);
+  }, [searchQueryParser, searchQuery.text, findItems, onFetchSuccess, tagReferences]);
 
   useEffect(() => {
     fetchItems();
@@ -444,7 +492,9 @@ function TableListViewTableComp<T extends UserContentCommonSchema>({
   const inspectItem = useCallback(
     (item: T) => {
       const tags = getTagIdsFromReferences(item.references).map((_id) => {
-        return item.references.find(({ id: refId }) => refId === _id) as SavedObjectsReference;
+        return item.references.find(({ id: refId }) => {
+          return refId === _id;
+        }) as SavedObjectsReference;
       });
 
       const close = openContentEditor({
@@ -823,7 +873,7 @@ function TableListViewTableComp<T extends UserContentCommonSchema>({
         termMatch = searchTerm;
 
         if (references?.length || referencesToExclude?.length) {
-          const allTags = getTagList();
+          const allTags = getTagListing();
 
           if (references?.length) {
             references.forEach(({ id: refId }) => {
@@ -879,7 +929,7 @@ function TableListViewTableComp<T extends UserContentCommonSchema>({
 
     updateQueryFromURL(urlState.s);
     updateSortFromURL(urlState.sort);
-  }, [urlState, searchQueryParser, getTagList, urlStateEnabled]);
+  }, [urlState, searchQueryParser, getTagListing, urlStateEnabled]);
 
   useEffect(() => {
     isMounted.current = true;
@@ -969,6 +1019,7 @@ function TableListViewTableComp<T extends UserContentCommonSchema>({
           addOrRemoveIncludeTagFilter={addOrRemoveIncludeTagFilter}
           addOrRemoveExcludeTagFilter={addOrRemoveExcludeTagFilter}
           clearTagSelection={clearTagSelection}
+          tagReferences={tagReferences}
         />
 
         {/* Delete modal */}