[8.16] [Search][Connectors] Fixing custom connector icon rendering (#212225) (#212485)

# Backport This will backport the following commits from `main` to `8.16`: - [[Search][Connectors] Fixing custom connector icon rendering (#212225)](https://github.com/elastic/kibana/pull/212225)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sorenlouv/backport)  --------- Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
2025-04-23 17:28:26 -04:00 · 2025-02-26 14:30:48 +01:00 · 2025-02-26 14:30:48 +01:00 · 67fd8495dd
commit 67fd8495dd
parent 279b42370e
4 changed files with 37 additions and 31 deletions
--- a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/connector_detail/connector_configuration.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/connector_detail/connector_configuration.tsx
@ -57,6 +57,12 @@ export const ConnectorConfiguration: React.FC = () => {
    [connectors]
  );

+  // TODO service_type === "" is considered unknown/custom connector multiple places replace all of them with a better solution
+  const CUSTOM_CONNECTOR = useMemo(
+    () => connectors.filter(({ serviceType }) => serviceType === ''),
+    [connectors]
+  );
+
  const { updateConnectorConfiguration } = useActions(ConnectorViewLogic);

  if (!connector) {
@ -69,19 +75,10 @@ export const ConnectorConfiguration: React.FC = () => {

  const isWaitingForConnector = !connector.status || connector.status === ConnectorStatus.CREATED;

-  const nativeConnector = NATIVE_CONNECTORS.find(
-    (connectorDefinition) => connectorDefinition.serviceType === connector.service_type
-  ) || {
-    docsUrl: '',
-    externalAuthDocsUrl: '',
-    externalDocsUrl: '',
-    iconPath: 'custom.svg',
-    isBeta: true,
-    isNative: false,
-    keywords: [],
-    name: connector.name,
-    serviceType: connector.service_type ?? '',
-  };
+  const nativeConnector =
+    NATIVE_CONNECTORS.find(
+      (connectorDefinition) => connectorDefinition.serviceType === connector.service_type
+    ) || CUSTOM_CONNECTOR[0];

  const iconPath = nativeConnector.iconPath;

--- a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/connector_detail/connector_stats.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/connector_detail/connector_stats.tsx
@ -4,7 +4,7 @@
 * 2.0; you may not use this file except in compliance with the Elastic License
 * 2.0.
 */
-import React, { ReactNode } from 'react';
+import React, { ReactNode, useMemo } from 'react';

 import { useValues } from 'kea';

@ -93,7 +93,13 @@ const configureLabel = i18n.translate(

 export const ConnectorStats: React.FC<ConnectorStatsProps> = ({ connector, indexData }) => {
  const { connectorTypes } = useValues(KibanaLogic);
-  const connectorDefinition = connectorTypes.find((c) => c.serviceType === connector.service_type);
+  // TODO service_type === "" is considered unknown/custom connector multiple places replace all of them with a better solution
+  const CUSTOM_CONNECTOR = useMemo(
+    () => connectorTypes.filter(({ serviceType }) => serviceType === ''),
+    [connectorTypes]
+  );
+  const connectorDefinition =
+    connectorTypes.find((c) => c.serviceType === connector.service_type) || CUSTOM_CONNECTOR[0];
  return (
    <EuiFlexGrid columns={3} direction="row">
      <EuiFlexItem>
--- a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/connector_detail/native_connector_configuration.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/connector_detail/native_connector_configuration.tsx
@ -47,30 +47,27 @@ export const NativeConnectorConfiguration: React.FC = () => {
    () => connectors.filter(({ isNative }) => isNative),
    [connectors]
  );
+
+  // TODO service_type === "" is considered unknown/custom connector multiple places replace all of them with a better solution
+  const CUSTOM_CONNECTOR = useMemo(
+    () => connectors.filter(({ serviceType }) => serviceType === ''),
+    [connectors]
+  );
+
  const BETA_CONNECTORS = useMemo(() => connectors.filter(({ isBeta }) => isBeta), [connectors]);

  if (!connector) {
    return <></>;
  }

-  const nativeConnector = NATIVE_CONNECTORS.find(
-    (connectorDefinition) => connectorDefinition.serviceType === connector.service_type
-  ) || {
-    docsUrl: '',
-    externalAuthDocsUrl: '',
-    externalDocsUrl: '',
-    iconPath: 'custom.svg',
-    isBeta: true,
-    isNative: true,
-    keywords: [],
-    name: connector.name,
-    serviceType: connector.service_type ?? '',
-  };
+  const nativeConnector =
+    NATIVE_CONNECTORS.find(
+      (connectorDefinition) => connectorDefinition.serviceType === connector.service_type
+    ) || CUSTOM_CONNECTOR[0];

  const iconPath = nativeConnector.iconPath;
  const hasApiKey = !!(connector.api_key_id ?? apiKeyData);

-  // TODO service_type === "" is considered unknown/custom connector multipleplaces replace all of them with a better solution
  const isBeta =
    !connector.service_type ||
    Boolean(BETA_CONNECTORS.find(({ serviceType }) => serviceType === connector.service_type));
--- a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/connectors/connector_type.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/connectors/connector_type.tsx
@ -5,7 +5,7 @@
 * 2.0.
 */

-import React from 'react';
+import React, { useMemo } from 'react';

 import { useValues } from 'kea';

@ -23,7 +23,13 @@ export interface ConnectorTypeProps {

 export const ConnectorType: React.FC<ConnectorTypeProps> = ({ serviceType }) => {
  const { connectorTypes } = useValues(KibanaLogic);
-  const connector = connectorTypes.find((c) => c.serviceType === serviceType);
+  // TODO service_type === "" is considered unknown/custom connector multiple places replace all of them with a better solution
+  const CUSTOM_CONNECTOR = useMemo(
+    () => connectorTypes.filter(({ serviceType: type }) => type === ''),
+    [connectorTypes]
+  );
+  const connector =
+    connectorTypes.find((c) => c.serviceType === serviceType) || CUSTOM_CONNECTOR[0];
  return (
    <EuiFlexGroup gutterSize="s" responsive={false} alignItems="center">
      {connector && connector.iconPath && (