[7.x] Add exact match filtering to in memory tables (#81539)

x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/agent_policy/details_page/components/package_policies/package_policies_table.tsx

@@ -22,7 +22,6 @@ import { useCapabilities, useLink } from '../../../../../hooks';
 import { useAgentPolicyRefresh } from '../../hooks';
 
 interface InMemoryPackagePolicy extends PackagePolicy {
-  inputTypes: string[];
   packageName?: string;
   packageTitle?: string;
   packageVersion?: string;
@@ -56,11 +55,7 @@ export const PackagePoliciesTable: React.FunctionComponent<Props> = ({
   // With the package policies provided on input, generate the list of package policies
   // used in the InMemoryTable (flattens some values for search) as well as
   // the list of options that will be used in the filters dropdowns
-  const [packagePolicies, namespaces, inputTypes] = useMemo((): [
-    InMemoryPackagePolicy[],
-    FilterOption[],
-    FilterOption[]
-  ] => {
+  const [packagePolicies, namespaces] = useMemo((): [InMemoryPackagePolicy[], FilterOption[]] => {
     const namespacesValues: string[] = [];
     const inputTypesValues: string[] = [];
     const mappedPackagePolicies = originalPackagePolicies.map<InMemoryPackagePolicy>(
@@ -69,13 +64,8 @@ export const PackagePoliciesTable: React.FunctionComponent<Props> = ({
           namespacesValues.push(packagePolicy.namespace);
         }
 
-        const dsInputTypes: string[] = [];
-
-        dsInputTypes.sort(stringSortAscending);
-
         return {
           ...packagePolicy,
-          inputTypes: dsInputTypes,
           packageName: packagePolicy.package?.name ?? '',
           packageTitle: packagePolicy.package?.title ?? '',
           packageVersion: packagePolicy.package?.version ?? '',
@@ -86,11 +76,7 @@ export const PackagePoliciesTable: React.FunctionComponent<Props> = ({
     namespacesValues.sort(stringSortAscending);
     inputTypesValues.sort(stringSortAscending);
 
-    return [
-      mappedPackagePolicies,
-      namespacesValues.map(toFilterOption),
-      inputTypesValues.map(toFilterOption),
-    ];
+    return [mappedPackagePolicies, namespacesValues.map(toFilterOption)];
   }, [originalPackagePolicies]);
 
   const columns = useMemo(
@@ -273,13 +259,7 @@ export const PackagePoliciesTable: React.FunctionComponent<Props> = ({
             name: 'Namespace',
             options: namespaces,
             multiSelect: 'or',
-          },
-          {
-            type: 'field_value_selection',
-            field: 'inputTypes',
-            name: 'Input types',
-            options: inputTypes,
-            multiSelect: 'or',
+            operator: 'exact',
           },
         ],
       }}

x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/data_stream/list_page/index.tsx

@@ -182,29 +182,50 @@ export const DataStreamListPage: React.FunctionComponent<{}> = () => {
     []
   );
 
-  const filterOptions: { [key: string]: string[] } = {
+  const filterOptions: {
+    [key: string]: Array<{
+      value: string;
+      name: string;
+    }>;
+  } = {
     dataset: [],
     type: [],
     namespace: [],
     package: [],
   };
 
   if (dataStreamsData && dataStreamsData.data_streams.length) {
+    const dataValues: {
+      [key: string]: string[];
+    } = {
+      dataset: [],
+      type: [],
+      namespace: [],
+      package: [],
+    };
     dataStreamsData.data_streams.forEach((stream) => {
       const { dataset, type, namespace, package: pkg } = stream;
-      if (!filterOptions.dataset.includes(dataset)) {
-        filterOptions.dataset.push(dataset);
+      if (!dataValues.dataset.includes(dataset)) {
+        dataValues.dataset.push(dataset);
       }
-      if (!filterOptions.type.includes(type)) {
-        filterOptions.type.push(type);
+      if (!dataValues.type.includes(type)) {
+        dataValues.type.push(type);
       }
-      if (!filterOptions.namespace.includes(namespace)) {
-        filterOptions.namespace.push(namespace);
+      if (!dataValues.namespace.includes(namespace)) {
+        dataValues.namespace.push(namespace);
       }
-      if (!filterOptions.package.includes(pkg)) {
-        filterOptions.package.push(pkg);
+      if (!dataValues.package.includes(pkg)) {
+        dataValues.package.push(pkg);
       }
     });
+    for (const field in dataValues) {
+      if (filterOptions[field]) {
+        filterOptions[field] = dataValues[field].sort().map((option) => ({
+          value: option,
+          name: option,
+        }));
+      }
+    }
   }
 
   return (
@@ -266,10 +287,8 @@ export const DataStreamListPage: React.FunctionComponent<{}> = () => {
                 defaultMessage: 'Dataset',
               }),
               multiSelect: 'or',
-              options: filterOptions.dataset.map((option) => ({
-                value: option,
-                name: option,
-              })),
+              operator: 'exact',
+              options: filterOptions.dataset,
             },
             {
               type: 'field_value_selection',
@@ -278,10 +297,8 @@ export const DataStreamListPage: React.FunctionComponent<{}> = () => {
                 defaultMessage: 'Type',
               }),
               multiSelect: 'or',
-              options: filterOptions.type.map((option) => ({
-                value: option,
-                name: option,
-              })),
+              operator: 'exact',
+              options: filterOptions.type,
             },
             {
               type: 'field_value_selection',
@@ -290,10 +307,8 @@ export const DataStreamListPage: React.FunctionComponent<{}> = () => {
                 defaultMessage: 'Namespace',
               }),
               multiSelect: 'or',
-              options: filterOptions.namespace.map((option) => ({
-                value: option,
-                name: option,
-              })),
+              operator: 'exact',
+              options: filterOptions.namespace,
             },
             {
               type: 'field_value_selection',
@@ -302,10 +317,8 @@ export const DataStreamListPage: React.FunctionComponent<{}> = () => {
                 defaultMessage: 'Integration',
               }),
               multiSelect: 'or',
-              options: filterOptions.package.map((option) => ({
-                value: option,
-                name: option,
-              })),
+              operator: 'exact',
+              options: filterOptions.package,
             },
           ],
         }}