[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 <[email protected]>
darnautov · May 22, 2024 · e8c82e2 · e8c82e2
1 parent 685aadc
commit e8c82e2
Show file tree

Hide file tree

Showing 6 changed files with 29 additions and 23 deletions.
diff --git a/...ch/public/application/components/connectors/connector_config/connection_details_panel.tsx b/...ch/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/...rless_search/public/application/components/connectors/connector_config/connector_link.tsx b/...rless_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/...k/plugins/serverless_search/public/application/components/connectors/connectors_table.tsx b/...k/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
@@ -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/.../plugins/serverless_search/public/application/components/connectors/edit_service_type.tsx b/.../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
@@ -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'),
   });
 };