[Search] Add callout for unconnected connectors (elastic#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>

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>
   );
 };

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>
   );

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} />,

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);

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)}

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'),
   });
 };