[Search] Add facets and search to connector selection (#163054)

## Summary
<img width="1097" alt="Screenshot 2023-08-03 at 13 47 39"
src="01e49dc6-821c-4add-9e5a-d0670b3a99fb">

This adds filtering to the Select A Connector pace in Search.

x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/new_index/select_connector/connector_checkable.tsx

@@ -124,7 +124,7 @@ export const ConnectorCheckable: React.FC<ConnectorCheckableProps> = ({
           >
             {showNativeBadge && (
               <EuiFlexItem grow={false}>
-                <EuiBadge color="hollow" isDisabled={disabled}>
+                <EuiBadge isDisabled={disabled}>
                   <EuiText size="xs">{NATIVE_LABEL}</EuiText>
                 </EuiBadge>
               </EuiFlexItem>

x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/new_index/select_connector/select_connector.tsx

@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import React, { useState } from 'react';
+import React, { useMemo, useState } from 'react';
 
 import { useLocation } from 'react-router-dom';
 
@@ -14,6 +14,9 @@ import { useValues } from 'kea';
 import {
   EuiButton,
   EuiCallOut,
+  EuiFacetButton,
+  EuiFacetGroup,
+  EuiFieldSearch,
   EuiFlexGrid,
   EuiFlexGroup,
   EuiFlexItem,
@@ -21,6 +24,7 @@ import {
   EuiFormFieldset,
   EuiLink,
   EuiSpacer,
+  EuiSwitch,
 } from '@elastic/eui';
 
 import { i18n } from '@kbn/i18n';
@@ -52,6 +56,20 @@ import { ConnectorCheckable } from './connector_checkable';
 export const SelectConnector: React.FC = () => {
   const { search } = useLocation();
   const { service_type: serviceType } = parseQueryParams(search);
+  const [useNativeFilter, setUseNativeFilter] = useState(false);
+  const [useNonGAFilter, setUseNonGAFilter] = useState(true);
+  const [searchTerm, setSearchTerm] = useState('');
+  const filteredConnectors = useMemo(
+    () =>
+      CONNECTORS.filter((connector) =>
+        useNonGAFilter ? true : !connector.isBeta && !connector.isTechPreview
+      )
+        .filter((connector) => (useNativeFilter ? connector.isNative : true))
+        .filter((connector) =>
+          searchTerm ? connector.name.toLowerCase().includes(searchTerm.toLowerCase()) : true
+        ),
+    [useNonGAFilter, useNativeFilter, searchTerm]
+  );
   const [selectedConnector, setSelectedConnector] = useState<string | null>(
     Array.isArray(serviceType) ? serviceType[0] : serviceType ?? null
   );
@@ -145,53 +163,106 @@ export const SelectConnector: React.FC = () => {
             ),
           }}
         >
-          <EuiSpacer size="s" />
-          <EuiFlexGrid columns={3}>
-            {CONNECTORS.map((connector) => (
-              <EuiFlexItem key={connector.serviceType} grow>
-                <ConnectorCheckable
-                  disabled={connector.platinumOnly && !hasPlatinumLicense}
-                  icon={connector.icon}
-                  isBeta={connector.isBeta}
-                  isTechPreview={Boolean(connector.isTechPreview)}
-                  showNativeBadge={connector.isNative && hasNativeAccess}
-                  name={connector.name}
-                  serviceType={connector.serviceType}
-                  onChange={() => {
-                    setSelectedConnector(connector.serviceType);
-                  }}
-                  documentationUrl={connector.docsUrl}
-                  checked={selectedConnector === connector.serviceType}
-                />
+          <EuiFlexGroup>
+            {/* Only facet is for native connectors, so only show facets if we can show native connectors */}
+            {hasNativeAccess && (
+              <EuiFlexItem grow={false}>
+                <EuiFacetGroup>
+                  <EuiFacetButton
+                    quantity={CONNECTORS.length}
+                    isSelected={!useNativeFilter}
+                    onClick={() => setUseNativeFilter(!useNativeFilter)}
+                  >
+                    {i18n.translate(
+                      'xpack.enterpriseSearch.content.indices.selectConnector.allConnectorsLabel',
+                      { defaultMessage: 'All connectors' }
+                    )}
+                  </EuiFacetButton>
+                  <EuiFacetButton
+                    quantity={CONNECTORS.filter((connector) => connector.isNative).length}
+                    isSelected={useNativeFilter}
+                    onClick={() => setUseNativeFilter(!useNativeFilter)}
+                  >
+                    {i18n.translate(
+                      'xpack.enterpriseSearch.content.indices.selectConnector.nativeLabel',
+                      { defaultMessage: 'Native connectors' }
+                    )}
+                  </EuiFacetButton>
+                </EuiFacetGroup>
               </EuiFlexItem>
-            ))}
-          </EuiFlexGrid>
-          <EuiSpacer />
-          <EuiFlexGroup justifyContent="spaceBetween" alignItems="center">
+            )}
             <EuiFlexItem>
-              <span>
-                <EuiButton
-                  data-telemetry-id="entSearchContent-connector-selectConnector-backButton"
-                  color="primary"
-                  onClick={() => KibanaLogic.values.navigateToUrl(NEW_INDEX_PATH)}
-                >
-                  {BACK_BUTTON_LABEL}
-                </EuiButton>
-              </span>
-            </EuiFlexItem>
-            <EuiFlexItem grow={false}>
-              <span>
-                <EuiButton
-                  data-test-subj="entSearchContent-connector-selectConnector-selectAndConfigure"
-                  data-telemetry-id="entSearchContent-connector-selectConnector-selectAndConfigure"
-                  disabled={selectedConnector === null}
-                  fill
-                  color="primary"
-                  type="submit"
-                >
-                  {CONTINUE_BUTTON_LABEL}
-                </EuiButton>
-              </span>
+              <EuiFieldSearch
+                aria-label={i18n.translate(
+                  'xpack.enterpriseSearch.content.indices.selectConnector.search.ariaLabel',
+                  { defaultMessage: 'Search through connectors' }
+                )}
+                isClearable
+                onChange={(event) => setSearchTerm(event.target.value)}
+                placeholder={i18n.translate(
+                  'xpack.enterpriseSearch.content.indices.selectConnector.searchPlaceholder',
+                  { defaultMessage: 'Search' }
+                )}
+                value={searchTerm}
+              />
+              <EuiSpacer size="s" />
+              <EuiSwitch
+                checked={useNonGAFilter}
+                label={i18n.translate(
+                  'xpack.enterpriseSearch.content.indices.selectConnector.showNonGALabel',
+                  { defaultMessage: 'Display Beta and Tech Preview connectors' }
+                )}
+                onChange={(e) => setUseNonGAFilter(e.target.checked)}
+              />
+              <EuiSpacer size="s" />
+              <EuiFlexGrid columns={3}>
+                {filteredConnectors.map((connector) => (
+                  <EuiFlexItem key={connector.serviceType} grow>
+                    <ConnectorCheckable
+                      disabled={connector.platinumOnly && !hasPlatinumLicense}
+                      icon={connector.icon}
+                      isBeta={connector.isBeta}
+                      isTechPreview={Boolean(connector.isTechPreview)}
+                      showNativeBadge={connector.isNative && hasNativeAccess}
+                      name={connector.name}
+                      serviceType={connector.serviceType}
+                      onChange={() => {
+                        setSelectedConnector(connector.serviceType);
+                      }}
+                      documentationUrl={connector.docsUrl}
+                      checked={selectedConnector === connector.serviceType}
+                    />
+                  </EuiFlexItem>
+                ))}
+              </EuiFlexGrid>
+              <EuiSpacer />
+              <EuiFlexGroup justifyContent="spaceBetween" alignItems="center">
+                <EuiFlexItem>
+                  <span>
+                    <EuiButton
+                      data-telemetry-id="entSearchContent-connector-selectConnector-backButton"
+                      color="primary"
+                      onClick={() => KibanaLogic.values.navigateToUrl(NEW_INDEX_PATH)}
+                    >
+                      {BACK_BUTTON_LABEL}
+                    </EuiButton>
+                  </span>
+                </EuiFlexItem>
+                <EuiFlexItem grow={false}>
+                  <span>
+                    <EuiButton
+                      data-test-subj="entSearchContent-connector-selectConnector-selectAndConfigure"
+                      data-telemetry-id="entSearchContent-connector-selectConnector-selectAndConfigure"
+                      disabled={selectedConnector === null}
+                      fill
+                      color="primary"
+                      type="submit"
+                    >
+                      {CONTINUE_BUTTON_LABEL}
+                    </EuiButton>
+                  </span>
+                </EuiFlexItem>
+              </EuiFlexGroup>
             </EuiFlexItem>
           </EuiFlexGroup>
         </EuiFormFieldset>