From ef41d6ead59dc7a9d6e99d667846f7bfe8693533 Mon Sep 17 00:00:00 2001
From: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
Date: Thu, 24 Oct 2024 03:03:35 +1100
Subject: [PATCH] [8.x] [Search][Connectors] Links and icons review (#197214)
 (#197426)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

# Backport

This will backport the following commits from `main` to `8.x`:
- [[Search][Connectors] Links and icons review
(#197214)](https://github.com/elastic/kibana/pull/197214)

<!--- Backport version: 9.4.3 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"José Luis
González","email":"joseluisgj@gmail.com"},"sourceCommit":{"committedDate":"2024-10-23T12:32:18Z","message":"[Search][Connectors]
Links and icons review (#197214)\n\n## Summary\r\n\r\nThis PR fixes a
few UX issue:\r\n\r\nAll links after generating config elements are
external links in order\r\nto don't lose the context:\r\n![CleanShot
2024-10-22 at 13
14\r\n43@2x](https://github.com/user-attachments/assets/99e05d93-6149-4b3c-9fe7-4192e8870d22)\r\n\r\nUsing
proper Connectors logo and better size:\r\n\r\n![CleanShot 2024-10-22 at
13
15\r\n55@2x](https://github.com/user-attachments/assets/9e524870-7102-44d3-94d2-d7eb1d1f6b41)\r\n\r\nFinish
up footer links take us to respective sections:\r\n\r\n![CleanShot
2024-10-22 at 13
16\r\n35@2x](https://github.com/user-attachments/assets/deb36a7e-a49f-40a0-9e75-957af6cda751)\r\n\r\n---------\r\n\r\nCo-authored-by:
Sander Philipse
<94373878+sphilipse@users.noreply.github.com>","sha":"d8149bf55712b57f6ebc9f27b73681a1c9eccddf","branchLabelMapping":{"^v9.0.0$":"main","^v8.17.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["bug","release_note:skip","v9.0.0","backport:prev-major"],"title":"[Search][Connectors]
Links and icons
review","number":197214,"url":"https://github.com/elastic/kibana/pull/197214","mergeCommit":{"message":"[Search][Connectors]
Links and icons review (#197214)\n\n## Summary\r\n\r\nThis PR fixes a
few UX issue:\r\n\r\nAll links after generating config elements are
external links in order\r\nto don't lose the context:\r\n![CleanShot
2024-10-22 at 13
14\r\n43@2x](https://github.com/user-attachments/assets/99e05d93-6149-4b3c-9fe7-4192e8870d22)\r\n\r\nUsing
proper Connectors logo and better size:\r\n\r\n![CleanShot 2024-10-22 at
13
15\r\n55@2x](https://github.com/user-attachments/assets/9e524870-7102-44d3-94d2-d7eb1d1f6b41)\r\n\r\nFinish
up footer links take us to respective sections:\r\n\r\n![CleanShot
2024-10-22 at 13
16\r\n35@2x](https://github.com/user-attachments/assets/deb36a7e-a49f-40a0-9e75-957af6cda751)\r\n\r\n---------\r\n\r\nCo-authored-by:
Sander Philipse
<94373878+sphilipse@users.noreply.github.com>","sha":"d8149bf55712b57f6ebc9f27b73681a1c9eccddf"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/197214","number":197214,"mergeCommit":{"message":"[Search][Connectors]
Links and icons review (#197214)\n\n## Summary\r\n\r\nThis PR fixes a
few UX issue:\r\n\r\nAll links after generating config elements are
external links in order\r\nto don't lose the context:\r\n![CleanShot
2024-10-22 at 13
14\r\n43@2x](https://github.com/user-attachments/assets/99e05d93-6149-4b3c-9fe7-4192e8870d22)\r\n\r\nUsing
proper Connectors logo and better size:\r\n\r\n![CleanShot 2024-10-22 at
13
15\r\n55@2x](https://github.com/user-attachments/assets/9e524870-7102-44d3-94d2-d7eb1d1f6b41)\r\n\r\nFinish
up footer links take us to respective sections:\r\n\r\n![CleanShot
2024-10-22 at 13
16\r\n35@2x](https://github.com/user-attachments/assets/deb36a7e-a49f-40a0-9e75-957af6cda751)\r\n\r\n---------\r\n\r\nCo-authored-by:
Sander Philipse
<94373878+sphilipse@users.noreply.github.com>","sha":"d8149bf55712b57f6ebc9f27b73681a1c9eccddf"}}]}]
BACKPORT-->

Co-authored-by: José Luis González <joseluisgj@gmail.com>
---
 .../components/generated_config_fields.tsx    |  6 +++++
 .../connector_description_popover.tsx         | 24 +++++++++----------
 .../create_connector/finish_up_step.tsx       | 15 +++++++++---
 3 files changed, 30 insertions(+), 15 deletions(-)

diff --git a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/connector_detail/components/generated_config_fields.tsx b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/connector_detail/components/generated_config_fields.tsx
index 50deb269e5629..133c15f97f61c 100644
--- a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/connector_detail/components/generated_config_fields.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/connector_detail/components/generated_config_fields.tsx
@@ -121,6 +121,8 @@ export const GeneratedConfigFields: React.FC<GeneratedConfigFieldsProps> = ({
           </EuiFlexItem>
           <EuiFlexItem>
             <EuiLinkTo
+              external
+              target="_blank"
               to={generateEncodedPath(CONNECTOR_DETAIL_PATH, {
                 connectorId: connector.id,
               })}
@@ -137,6 +139,8 @@ export const GeneratedConfigFields: React.FC<GeneratedConfigFieldsProps> = ({
             >
               <EuiFlexItem grow={false}>
                 <EuiLinkTo
+                  external
+                  target="_blank"
                   to={generateEncodedPath(CONNECTOR_DETAIL_PATH, {
                     connectorId: connector.id,
                   })}
@@ -174,6 +178,8 @@ export const GeneratedConfigFields: React.FC<GeneratedConfigFieldsProps> = ({
           <EuiFlexItem>
             {connector.index_name && (
               <EuiLinkTo
+                external
+                target="_blank"
                 to={generateEncodedPath(SEARCH_INDEX_PATH, {
                   indexName: connector.index_name,
                 })}
diff --git a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/connectors/create_connector/components/connector_description_popover.tsx b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/connectors/create_connector/components/connector_description_popover.tsx
index b19a5ac8ddba5..9e0aed3fa75f0 100644
--- a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/connectors/create_connector/components/connector_description_popover.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/connectors/create_connector/components/connector_description_popover.tsx
@@ -19,7 +19,7 @@ import {
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 
-import connectorLogo from '../../../../../../assets/images/connector_logo_network_drive_version.svg';
+import connectorLogo from '../../../../../../assets/images/connector.svg';
 
 const nativePopoverPanels = [
   {
@@ -27,7 +27,7 @@ const nativePopoverPanels = [
       'xpack.enterpriseSearch.connectorDescriptionPopover.connectorDescriptionBadge.native.chooseADataSourceLabel',
       { defaultMessage: 'Choose a data source you would like to sync' }
     ),
-    icons: [<EuiIcon type="documents" />],
+    icons: [<EuiIcon size="l" type="documents" />],
     id: 'native-choose-source',
   },
   {
@@ -35,7 +35,7 @@ const nativePopoverPanels = [
       'xpack.enterpriseSearch.connectorDescriptionPopover.connectorDescriptionBadge.native.configureConnectorLabel',
       { defaultMessage: 'Configure your connector using our Kibana UI' }
     ),
-    icons: [<EuiIcon type={connectorLogo} />, <EuiIcon type="logoElastic" />],
+    icons: [<EuiIcon size="l" type={connectorLogo} />, <EuiIcon size="l" type="logoElastic" />],
     id: 'native-configure-connector',
   },
 ];
@@ -46,7 +46,7 @@ const connectorClientPopoverPanels = [
       'xpack.enterpriseSearch.connectorDescriptionPopover.connectorDescriptionBadge.client.chooseADataSourceLabel',
       { defaultMessage: 'Choose a data source you would like to sync' }
     ),
-    icons: [<EuiIcon type="documents" />],
+    icons: [<EuiIcon size="l" type="documents" />],
     id: 'client-choose-source',
   },
   {
@@ -58,9 +58,9 @@ const connectorClientPopoverPanels = [
       }
     ),
     icons: [
-      <EuiIcon type={connectorLogo} />,
-      <EuiIcon type="sortRight" />,
-      <EuiIcon type="launch" />,
+      <EuiIcon size="l" type={connectorLogo} />,
+      <EuiIcon size="l" type="sortRight" />,
+      <EuiIcon size="l" type="launch" />,
     ],
     id: 'client-deploy',
   },
@@ -72,11 +72,11 @@ const connectorClientPopoverPanels = [
       }
     ),
     icons: [
-      <EuiIcon type="documents" />,
-      <EuiIcon type="sortRight" />,
-      <EuiIcon type={connectorLogo} />,
-      <EuiIcon type="sortRight" />,
-      <EuiIcon type="logoElastic" />,
+      <EuiIcon size="l" type="documents" />,
+      <EuiIcon size="l" type="sortRight" />,
+      <EuiIcon size="l" type={connectorLogo} />,
+      <EuiIcon size="l" type="sortRight" />,
+      <EuiIcon size="l" type="logoElastic" />,
     ],
     id: 'client-configure-connector',
   },
diff --git a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/connectors/create_connector/finish_up_step.tsx b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/connectors/create_connector/finish_up_step.tsx
index 28d5387ae4b70..c2f27bde80408 100644
--- a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/connectors/create_connector/finish_up_step.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/connectors/create_connector/finish_up_step.tsx
@@ -30,13 +30,15 @@ import { i18n } from '@kbn/i18n';
 
 import { useKibana } from '@kbn/kibana-react-plugin/public';
 
-import { APPLICATIONS_PLUGIN } from '../../../../../../common/constants';
+import { APPLICATIONS_PLUGIN, ELASTICSEARCH_PLUGIN } from '../../../../../../common/constants';
 
 import { KibanaDeps } from '../../../../../../common/types';
 
 import { PLAYGROUND_PATH } from '../../../../applications/routes';
 import { generateEncodedPath } from '../../../../shared/encode_path_params';
+import { HttpLogic } from '../../../../shared/http';
 import { KibanaLogic } from '../../../../shared/kibana';
+import { DEV_TOOLS_CONSOLE_PATH } from '../../../routes';
 
 import { CONNECTOR_DETAIL_TAB_PATH } from '../../../routes';
 import { ConnectorDetailTabId } from '../../connector_detail/connector_detail';
@@ -62,6 +64,9 @@ export const FinishUpStep: React.FC<FinishUpStepProps> = ({ title }) => {
   const { startSync } = useActions(SyncsLogic);
 
   const isSyncing = isWaitingForSync || isSyncingProp;
+
+  const { http } = useValues(HttpLogic);
+  const { application } = useValues(KibanaLogic);
   useEffect(() => {
     setTimeout(() => {
       window.scrollTo({
@@ -307,7 +312,9 @@ export const FinishUpStep: React.FC<FinishUpStepProps> = ({ title }) => {
                         'Use your favorite language client to query your data in your app',
                     }
                   )}
-                  onClick={() => {}}
+                  onClick={() => {
+                    application.navigateToUrl(http.basePath.prepend(ELASTICSEARCH_PLUGIN.URL));
+                  }}
                   display="subdued"
                 />
               </EuiFlexItem>
@@ -335,7 +342,9 @@ export const FinishUpStep: React.FC<FinishUpStepProps> = ({ title }) => {
                         'Tools for interacting with your data, such as console, profiler, Grok debugger and more',
                     }
                   )}
-                  onClick={() => {}}
+                  onClick={() => {
+                    application.navigateToUrl(http.basePath.prepend(DEV_TOOLS_CONSOLE_PATH));
+                  }}
                   display="subdued"
                 />
               </EuiFlexItem>