[TIP] Support category pre-selection inside the FieldsBrowser component

This resolves elastic/security-team#5007

x-pack/plugins/threat_intelligence/public/modules/indicators/components/table/components/field_browser/field_browser.test.tsx

@@ -36,7 +36,9 @@ describe('<IndicatorsFieldBrowser />', () => {
         columnIds: [],
         onResetColumns: stub,
         onToggleColumn: stub,
-        options: {},
+        options: {
+          preselectedCategoryIds: ['threat'],
+        },
       })
     );
   });

x-pack/plugins/threat_intelligence/public/modules/indicators/components/table/components/field_browser/field_browser.tsx

@@ -29,6 +29,8 @@ export const IndicatorsFieldBrowser: VFC<IndicatorsFieldBrowserProps> = ({
     columnIds,
     onResetColumns,
     onToggleColumn,
-    options: {},
+    options: {
+      preselectedCategoryIds: ['threat'],
+    },
   });
 };

x-pack/plugins/triggers_actions_ui/public/application/sections/field_browser/field_browser.test.tsx

@@ -121,4 +121,25 @@ describe('FieldsBrowser', () => {
     const result = renderComponent({ isEventViewer, width: FIELD_BROWSER_WIDTH });
     expect(result.getByTestId('show-field-browser')).toBeInTheDocument();
   });
+
+  describe('options.preselectedCategoryIds', () => {
+    it("should render fields list narrowed to preselected category id's", async () => {
+      const agentFieldsCount = Object.keys(mockBrowserFields.agent?.fields || {}).length;
+
+      // Narrowing the selection to 'agent' only
+      const result = renderComponent({ options: { preselectedCategoryIds: ['agent'] } });
+
+      result.getByTestId('show-field-browser').click();
+
+      // Wait for the modal to open
+      await waitFor(() => {
+        expect(result.getByTestId('fields-browser-container')).toBeInTheDocument();
+      });
+
+      // Check if there are only 4 fields in the table
+      expect(result.queryByTestId('field-table')?.querySelectorAll('tbody tr')).toHaveLength(
+        agentFieldsCount
+      );
+    });
+  });
 });

x-pack/plugins/triggers_actions_ui/public/application/sections/field_browser/field_browser.tsx

@@ -31,6 +31,11 @@ export const FieldBrowserComponent: React.FC<FieldBrowserProps> = ({
   options,
   width,
 }) => {
+  const initialCategories = useMemo(
+    () => options?.preselectedCategoryIds ?? [],
+    [options?.preselectedCategoryIds]
+  );
+
   const customizeColumnsButtonRef = useRef<HTMLButtonElement | null>(null);
   /** all field names shown in the field browser must contain this string (when specified) */
   const [filterInput, setFilterInput] = useState('');
@@ -43,7 +48,7 @@ export const FieldBrowserComponent: React.FC<FieldBrowserProps> = ({
   /** when true, show a spinner in the input to indicate the field browser is searching for matching field names */
   const [isSearching, setIsSearching] = useState(false);
   /** this category will be displayed in the right-hand pane of the field browser */
-  const [selectedCategoryIds, setSelectedCategoryIds] = useState<string[]>([]);
+  const [selectedCategoryIds, setSelectedCategoryIds] = useState<string[]>(initialCategories);
   /** show the field browser */
   const [show, setShow] = useState(false);
 
@@ -93,9 +98,9 @@ export const FieldBrowserComponent: React.FC<FieldBrowserProps> = ({
     setFilteredBrowserFields(null);
     setFilterSelectedEnabled(false);
     setIsSearching(false);
-    setSelectedCategoryIds([]);
+    setSelectedCategoryIds(initialCategories);
     setShow(false);
-  }, []);
+  }, [initialCategories]);
 
   /** Invoked when the user types in the filter input */
   const updateFilter = useCallback(

x-pack/plugins/triggers_actions_ui/public/application/sections/field_browser/types.ts

@@ -34,6 +34,10 @@ export type GetFieldTableColumns = (params: {
 export interface FieldBrowserOptions {
   createFieldButton?: CreateFieldComponent;
   getFieldTableColumns?: GetFieldTableColumns;
+  /**
+   * Categories that should be selected initially
+   */
+  preselectedCategoryIds?: string[];
 }
 
 export interface FieldBrowserProps {