[Search][ES3] Make Connector config a copyable codeblock (#201949)

## Summary Make the configuration for Connectors a copyable codeblock during create a connector flow.
elastic · Nov 29, 2024 · 0066cc1 · 0066cc1
1 parent f336993
commit 0066cc1
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 44 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
@@ -5,15 +5,7 @@
  * 2.0.
  */
 
-import {
-  EuiPanel,
-  EuiTitle,
-  EuiCode,
-  EuiSpacer,
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiText,
-} from '@elastic/eui';
+import { EuiPanel, EuiTitle, EuiCode, EuiSpacer, EuiText, EuiCodeBlock } from '@elastic/eui';
 import { ConnectorStatus } from '@kbn/search-connectors';
 import React from 'react';
 import { FormattedMessage } from '@kbn/i18n-react';
@@ -31,6 +23,14 @@ export const ConnectionDetails: React.FC<ConnectionDetailsProps> = ({
   status,
 }) => {
   const { elasticsearchUrl } = useElasticsearchUrl();
+  const codeBlock = `connectors:
+-
+  connector_id: ${connectorId}
+  service_type: ${serviceType}
+  api_key:
+elasticsearch:
+  host: ${elasticsearchUrl}
+  api_key:`;
   return (
     <EuiPanel hasBorder>
       <EuiTitle size="xs">
@@ -43,38 +43,19 @@ export const ConnectionDetails: React.FC<ConnectionDetailsProps> = ({
         </h3>
       </EuiTitle>
       <EuiSpacer />
-      <EuiFlexGroup justifyContent="spaceBetween" alignItems="center">
-        <EuiFlexItem grow={false}>
-          <EuiText size="s">
-            <strong>connector_id</strong>
-          </EuiText>
-        </EuiFlexItem>
-        <EuiFlexItem grow={false} data-test-subj="serverlessSearchConnectorConnectorId">
-          <EuiCode>{connectorId}</EuiCode>
-        </EuiFlexItem>
-      </EuiFlexGroup>
+      <EuiText color="subdued">
+        <FormattedMessage
+          id="xpack.serverlessSearch.connectors.config.apiKeyExplanation"
+          defaultMessage="You will need to fill in the {api_key} fields with an API key. One can be generated on the Getting Started page."
+          values={{
+            api_key: <EuiCode>api_key</EuiCode>,
+          }}
+        />
+      </EuiText>
       <EuiSpacer />
-      <EuiFlexGroup justifyContent="spaceBetween" alignItems="center">
-        <EuiFlexItem grow={false}>
-          <EuiText size="s">
-            <strong>service_type</strong>
-          </EuiText>
-        </EuiFlexItem>
-        <EuiFlexItem grow={false} data-test-subj="serverlessSearchConnectorServiceType">
-          {Boolean(serviceType) && <EuiCode>{serviceType}</EuiCode>}
-        </EuiFlexItem>
-      </EuiFlexGroup>
-      <EuiSpacer />
-      <EuiFlexGroup justifyContent="spaceBetween" alignItems="center">
-        <EuiFlexItem grow={false}>
-          <EuiText size="s">
-            <strong>elasticsearch.host</strong>
-          </EuiText>
-        </EuiFlexItem>
-        <EuiFlexItem grow={false}>
-          <EuiCode>{elasticsearchUrl}</EuiCode>
-        </EuiFlexItem>
-      </EuiFlexGroup>
+      <EuiCodeBlock language="yaml" isCopyable>
+        {codeBlock}
+      </EuiCodeBlock>
     </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
@@ -87,11 +87,28 @@ export const ConnectorLinkElasticsearch: React.FC<ConnectorLinkElasticsearchProp
           </EuiFlexItem>
         </EuiFlexGroup>
         <EuiSpacer />
-        <EuiFlexItem>
-          <ConnectionDetails connectorId={connectorId} serviceType={serviceType} status={status} />
-        </EuiFlexItem>
+        {Boolean(serviceType) ? (
+          <EuiFlexItem>
+            <ConnectionDetails
+              connectorId={connectorId}
+              serviceType={serviceType}
+              status={status}
+            />
+          </EuiFlexItem>
+        ) : (
+          <EuiFlexItem>
+            <EuiCallOut
+              title={i18n.translate('xpack.serverlessSearch.connectors.pleaseSelectServiceType', {
+                defaultMessage: 'Please select a connector type.',
+              })}
+              color="warning"
+              iconType="iInCircle"
+            />
+          </EuiFlexItem>
+        )}
         <EuiSpacer />
-        {status === ConnectorStatus.CREATED ? (
+        {Boolean(serviceType) &&
+        (status === ConnectorStatus.CREATED || status === ConnectorStatus.NEEDS_CONFIGURATION) ? (
           <EuiFlexItem>
             <EuiCallOut
               title={i18n.translate('xpack.serverlessSearch.connectors.waitingForConnection', {