From e8c82e2528383ffcc55aef23c825978c856e59db Mon Sep 17 00:00:00 2001
From: Sander Philipse <94373878+sphilipse@users.noreply.github.com>
Date: Wed, 22 May 2024 12:19:05 +0200
Subject: [PATCH] [Search] Add callout for unconnected connectors (#181166)

## Summary

This moves a callout for connectors that haven't been connected. It also
makes the service type change local instead of remote. This does two
things:
1) Make changing the service type not remove the callout (this happened
because the API changes the status)
2) Prevent conflicts between the connector's local config and the
service type in the document (the connector itself should set the
service type)

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
---
 .../connection_details_panel.tsx              | 14 ------------
 .../connector_config/connector_link.tsx       | 22 ++++++++++++++++++-
 .../connectors/connectors_table.tsx           |  4 ++--
 .../components/connectors/edit_name.tsx       |  2 +-
 .../connectors/edit_service_type.tsx          |  2 ++
 .../application/hooks/api/use_connectors.tsx  |  8 +++----
 6 files changed, 29 insertions(+), 23 deletions(-)

diff --git a/x-pack/plugins/serverless_search/public/application/components/connectors/connector_config/connection_details_panel.tsx b/x-pack/plugins/serverless_search/public/application/components/connectors/connector_config/connection_details_panel.tsx
index db4af56993d76c..20a48b3e3076d0 100644
--- a/x-pack/plugins/serverless_search/public/application/components/connectors/connector_config/connection_details_panel.tsx
+++ b/x-pack/plugins/serverless_search/public/application/components/connectors/connector_config/connection_details_panel.tsx
@@ -13,9 +13,7 @@ import {
   EuiFlexGroup,
   EuiFlexItem,
   EuiText,
-  EuiCallOut,
 } from '@elastic/eui';
-import { i18n } from '@kbn/i18n';
 import { ConnectorStatus } from '@kbn/search-connectors';
 import React from 'react';
 import { FormattedMessage } from '@kbn/i18n-react';
@@ -77,18 +75,6 @@ export const ConnectionDetails: React.FC<ConnectionDetailsProps> = ({
           <EuiCode>{elasticsearchUrl}</EuiCode>
         </EuiFlexItem>
       </EuiFlexGroup>
-      {status === ConnectorStatus.CREATED && (
-        <>
-          <EuiSpacer />
-          <EuiCallOut
-            title={i18n.translate('xpack.serverlessSearch.connectors.waitingForConnection', {
-              defaultMessage: 'Waiting for connection',
-            })}
-            color="warning"
-            iconType="iInCircle"
-          />
-        </>
-      )}
     </EuiPanel>
   );
 };
diff --git a/x-pack/plugins/serverless_search/public/application/components/connectors/connector_config/connector_link.tsx b/x-pack/plugins/serverless_search/public/application/components/connectors/connector_config/connector_link.tsx
index b0d1b412526ca6..29bbc55d4cd714 100644
--- a/x-pack/plugins/serverless_search/public/application/components/connectors/connector_config/connector_link.tsx
+++ b/x-pack/plugins/serverless_search/public/application/components/connectors/connector_config/connector_link.tsx
@@ -5,7 +5,15 @@
  * 2.0.
  */
 
-import { EuiButton, EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiText, EuiTitle } from '@elastic/eui';
+import {
+  EuiButton,
+  EuiCallOut,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiSpacer,
+  EuiText,
+  EuiTitle,
+} from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { ConnectorStatus } from '@kbn/search-connectors';
 import React from 'react';
@@ -82,6 +90,18 @@ export const ConnectorLinkElasticsearch: React.FC<ConnectorLinkElasticsearchProp
         <EuiFlexItem>
           <ConnectionDetails connectorId={connectorId} serviceType={serviceType} status={status} />
         </EuiFlexItem>
+        <EuiSpacer />
+        {status === ConnectorStatus.CREATED ? (
+          <EuiFlexItem>
+            <EuiCallOut
+              title={i18n.translate('xpack.serverlessSearch.connectors.waitingForConnection', {
+                defaultMessage: 'Waiting for connection',
+              })}
+              color="warning"
+              iconType="iInCircle"
+            />
+          </EuiFlexItem>
+        ) : null}
       </EuiFlexItem>
     </EuiFlexGroup>
   );
diff --git a/x-pack/plugins/serverless_search/public/application/components/connectors/connectors_table.tsx b/x-pack/plugins/serverless_search/public/application/components/connectors/connectors_table.tsx
index 5efbb9dfb5b9c8..58f09994cf568f 100644
--- a/x-pack/plugins/serverless_search/public/application/components/connectors/connectors_table.tsx
+++ b/x-pack/plugins/serverless_search/public/application/components/connectors/connectors_table.tsx
@@ -256,8 +256,8 @@ export const ConnectorsTable: React.FC = () => {
             connectors: <strong>{CONNECTORS_LABEL}</strong>,
             items: (
               <strong>
-                <EuiI18nNumber value={pageIndex * pageSize + 1} />-
-                <EuiI18nNumber value={pageIndex * pageSize + 1 + items.length} />
+                <EuiI18nNumber value={pageIndex * pageSize} />-
+                <EuiI18nNumber value={pageIndex * pageSize + items.length} />
               </strong>
             ),
             count: <EuiI18nNumber value={data?.connectors.length ?? 0} />,
diff --git a/x-pack/plugins/serverless_search/public/application/components/connectors/edit_name.tsx b/x-pack/plugins/serverless_search/public/application/components/connectors/edit_name.tsx
index 85f7a097cb0890..b81fc51b07bcfe 100644
--- a/x-pack/plugins/serverless_search/public/application/components/connectors/edit_name.tsx
+++ b/x-pack/plugins/serverless_search/public/application/components/connectors/edit_name.tsx
@@ -48,7 +48,7 @@ export const EditName: React.FC<EditNameProps> = ({ connector }) => {
     },
     onSuccess: (successData) => {
       queryClient.setQueryData(queryKey, {
-        connector: { ...connector, service_type: successData },
+        connector: { ...connector, name: successData },
       });
       queryClient.invalidateQueries(queryKey);
       setIsEditing(false);
diff --git a/x-pack/plugins/serverless_search/public/application/components/connectors/edit_service_type.tsx b/x-pack/plugins/serverless_search/public/application/components/connectors/edit_service_type.tsx
index 0c7cfab2eca42b..fe4b6bd7e97683 100644
--- a/x-pack/plugins/serverless_search/public/application/components/connectors/edit_service_type.tsx
+++ b/x-pack/plugins/serverless_search/public/application/components/connectors/edit_service_type.tsx
@@ -76,6 +76,8 @@ export const EditServiceType: React.FC<EditServiceTypeProps> = ({ connector }) =
         })}
       </EuiFormLabel>
       <EuiSuperSelect
+        // We only want to allow people to set the service type once to avoid weird conflicts
+        disabled={Boolean(connector.service_type)}
         data-test-subj="serverlessSearchEditConnectorTypeChoices"
         isLoading={isLoading}
         onChange={(event) => mutate(event)}
diff --git a/x-pack/plugins/serverless_search/public/application/hooks/api/use_connectors.tsx b/x-pack/plugins/serverless_search/public/application/hooks/api/use_connectors.tsx
index c0708a0ace022c..f6de4223cfdced 100644
--- a/x-pack/plugins/serverless_search/public/application/hooks/api/use_connectors.tsx
+++ b/x-pack/plugins/serverless_search/public/application/hooks/api/use_connectors.tsx
@@ -9,13 +9,11 @@ import { Connector } from '@kbn/search-connectors';
 import { useQuery } from '@tanstack/react-query';
 import { useKibanaServices } from '../use_kibana';
 
-export const useConnectors = (from: number = 0, size: number = 10) => {
+export const useConnectors = () => {
   const { http } = useKibanaServices();
   return useQuery({
-    queryKey: ['fetchConnectors', from, size],
+    queryKey: ['fetchConnectors'],
     queryFn: () =>
-      http.fetch<{ connectors: Connector[] }>('/internal/serverless_search/connectors', {
-        query: { from, size },
-      }),
+      http.fetch<{ connectors: Connector[] }>('/internal/serverless_search/connectors'),
   });
 };