[Enterprise Search] Search Applications - Switch to only show conflic…

…ts on schema page (#154149)

## Summary


https://user-images.githubusercontent.com/1699281/229123456-922093c2-3218-4fb5-b26e-548bfd670f45.mov


### Checklist

Delete any items that are not applicable to this PR.

- [x] Any text added follows [EUI's writing
guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses
sentence case text and includes [i18n
support](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md)
- [x] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios
- [x] Any UI touched in this PR is usable by keyboard only (learn more
about [keyboard accessibility](https://webaim.org/techniques/keyboard/))
- [x] Any UI touched in this PR does not create any new axe failures
(run axe in browser:
[FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/),
[Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US))
- [x] This renders correctly on smaller devices using a responsive
layout. (You can test this [in your
browser](https://www.browserstack.com/guide/responsive-testing-on-local-server))
- [x] This was checked for [cross-browser
compatibility](https://www.elastic.co/support/matrix#matrix_browsers)

x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/engine/engine_schema.tsx

@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useCallback, useMemo } from 'react';
 
 import { useActions, useValues } from 'kea';
 
@@ -19,6 +19,7 @@ import {
   EuiIcon,
   EuiLink,
   EuiPanel,
+  EuiSwitch,
   EuiText,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
@@ -143,12 +144,23 @@ const SchemaFieldDetails: React.FC<{ schemaField: SchemaField }> = ({ schemaFiel
 
 export const EngineSchema: React.FC = () => {
   const { engineName } = useValues(EngineIndicesLogic);
+  const [onlyShowConflicts, setOnlyShowConflicts] = useState<boolean>(false);
   const { isLoadingEngineSchema, schemaFields } = useValues(EngineViewLogic);
   const { fetchEngineSchema } = useActions(EngineViewLogic);
   const [itemIdToExpandedRowMap, setItemIdToExpandedRowMap] = useState<Record<string, JSX.Element>>(
     {}
   );
 
+  const toggleOnlyShowConflicts = useCallback(() => {
+    setOnlyShowConflicts(!onlyShowConflicts);
+    setItemIdToExpandedRowMap({});
+  }, [onlyShowConflicts]);
+
+  const filteredSchemaFields = useMemo(() => {
+    if (onlyShowConflicts) return schemaFields.filter((field) => field.type === 'conflict');
+    return schemaFields;
+  }, [onlyShowConflicts, schemaFields]);
+
   useEffect(() => {
     fetchEngineSchema({ engineName });
   }, [engineName]);
@@ -288,16 +300,28 @@ export const EngineSchema: React.FC = () => {
       }}
       engineName={engineName}
     >
-      <>
+      <EuiFlexGroup direction="column" gutterSize="l">
+        <EuiFlexGroup>
+          <EuiSwitch
+            label={i18n.translate(
+              'xpack.enterpriseSearch.content.engine.schema.onlyShowConflicts',
+              {
+                defaultMessage: 'Only show conflicts',
+              }
+            )}
+            checked={onlyShowConflicts}
+            onChange={toggleOnlyShowConflicts}
+          />
+        </EuiFlexGroup>
         <EuiBasicTable
-          items={schemaFields}
+          items={filteredSchemaFields}
           columns={columns}
           loading={isLoadingEngineSchema}
           itemId="name"
           itemIdToExpandedRowMap={itemIdToExpandedRowMap}
           isExpandable
         />
-      </>
+      </EuiFlexGroup>
     </EnterpriseSearchEnginesPageTemplate>
   );
 };