From 4796c99e3fdece4b6334db7dc7974c85a812944a Mon Sep 17 00:00:00 2001
From: Jedr Blaszyk <jedr.blaszyk@elastic.co>
Date: Mon, 20 May 2024 14:49:37 +0200
Subject: [PATCH 1/3] improve-connector-overview-tab

---
 .../connector_detail/connector_stats.tsx      | 147 +++++++++++-------
 1 file changed, 92 insertions(+), 55 deletions(-)

diff --git a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/connector_detail/connector_stats.tsx b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/connector_detail/connector_stats.tsx
index ec2edf2df0450..bdc929568abeb 100644
--- a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/connector_detail/connector_stats.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/connector_detail/connector_stats.tsx
@@ -10,6 +10,9 @@ import { useValues } from 'kea';
 
 import {
   EuiBadge,
+  EuiButtonIcon,
+  EuiCode,
+  EuiCopy,
   EuiFlexGrid,
   EuiFlexGroup,
   EuiFlexItem,
@@ -127,40 +130,56 @@ export const ConnectorStats: React.FC<ConnectorStatsProps> = ({ connector, index
             </EuiFlexGroup>
           }
           footer={
-            <EuiFlexGroup justifyContent="spaceBetween" alignItems="center">
-              <EuiFlexItem>
-                <EuiFlexGroup alignItems="center" gutterSize="s" responsive={false}>
-                  <EuiFlexItem grow={false}>
-                    <EuiIcon type="documents" />
-                  </EuiFlexItem>
+            <EuiFlexGroup alignItems="center" justifyContent="spaceBetween">
+              <EuiFlexItem grow={false}>
+                <EuiFlexGroup alignItems="center" gutterSize="xs">
                   <EuiFlexItem grow={false}>
                     <EuiText size="s">
-                      <p>
-                        {i18n.translate(
-                          'xpack.enterpriseSearch.connectors.connectorStats.p.DocumentsLabel',
-                          {
-                            defaultMessage: '{documentAmount} Documents',
-                            values: {
-                              documentAmount: indexData?.count ?? 0,
-                            },
-                          }
-                        )}
-                      </p>
+                      <EuiText size="s">
+                        ID: <EuiCode>{connector.id}</EuiCode>
+                      </EuiText>
                     </EuiText>
                   </EuiFlexItem>
+                  <EuiFlexItem grow={false}>
+                    <EuiCopy textToCopy={connector.id}>
+                      {(copy) => (
+                        <EuiButtonIcon
+                          onClick={copy}
+                          color="text"
+                          iconType="copyClipboard"
+                          aria-label="Help"
+                        />
+                      )}
+                    </EuiCopy>
+                  </EuiFlexItem>
                 </EuiFlexGroup>
               </EuiFlexItem>
               <EuiFlexItem grow={false}>
-                <EuiButtonEmptyTo
-                  isDisabled={!(connector.index_name && indexData)}
-                  size="s"
-                  to={generateEncodedPath(CONNECTOR_DETAIL_TAB_PATH, {
-                    connectorId: connector.id,
-                    tabId: ConnectorDetailTabId.DOCUMENTS,
-                  })}
-                >
-                  {seeDocumentsLabel}
-                </EuiButtonEmptyTo>
+                {[ConnectorStatus.CONNECTED, ConnectorStatus.CONFIGURED].includes(
+                  connector.status
+                ) && connector.index_name ? (
+                  <EuiButtonEmptyTo
+                    size="s"
+                    to={generateEncodedPath(CONNECTOR_DETAIL_TAB_PATH, {
+                      connectorId: connector.id,
+                      tabId: ConnectorDetailTabId.CONFIGURATION,
+                    })}
+                  >
+                    {configureLabel}
+                  </EuiButtonEmptyTo>
+                ) : (
+                  <EuiButtonTo
+                    color="primary"
+                    size="s"
+                    fill
+                    to={generateEncodedPath(CONNECTOR_DETAIL_TAB_PATH, {
+                      connectorId: connector.id,
+                      tabId: ConnectorDetailTabId.CONFIGURATION,
+                    })}
+                  >
+                    {configureLabel}
+                  </EuiButtonTo>
+                )}
               </EuiFlexItem>
             </EuiFlexGroup>
           }
@@ -169,7 +188,7 @@ export const ConnectorStats: React.FC<ConnectorStatsProps> = ({ connector, index
       <EuiFlexItem>
         <StatCard
           title={i18n.translate('xpack.enterpriseSearch.connectors.connectorStats.indexTitle', {
-            defaultMessage: 'Index',
+            defaultMessage: 'Attached index',
           })}
           content={
             connector.index_name ? (
@@ -179,7 +198,18 @@ export const ConnectorStats: React.FC<ConnectorStatsProps> = ({ connector, index
                     <EuiBadge>{connector.index_name}</EuiBadge>
                   </EuiFlexItem>
                   <EuiFlexItem grow={false}>
-                    <EuiHealth color="success" />
+                    <EuiFlexGroup alignItems="center" gutterSize="xs">
+                      <EuiFlexItem grow={false}>
+                        <EuiHealth color="success" />
+                      </EuiFlexItem>
+                      <EuiFlexItem grow={false}>
+                        <EuiText size="s">
+                          {i18n.translate('xpack.enterpriseSearch.content.conectors.indexHealth', {
+                            defaultMessage: 'Healthy',
+                          })}
+                        </EuiText>
+                      </EuiFlexItem>
+                    </EuiFlexGroup>
                   </EuiFlexItem>
                 </EuiFlexGroup>
               ) : (
@@ -201,33 +231,40 @@ export const ConnectorStats: React.FC<ConnectorStatsProps> = ({ connector, index
             )
           }
           footer={
-            <EuiFlexGroup justifyContent="flexEnd">
+            <EuiFlexGroup justifyContent="spaceBetween" alignItems="center">
+              <EuiFlexItem>
+                <EuiFlexGroup alignItems="center" gutterSize="s" responsive={false}>
+                  <EuiFlexItem grow={false}>
+                    <EuiIcon type="documents" />
+                  </EuiFlexItem>
+                  <EuiFlexItem grow={false}>
+                    <EuiText size="s">
+                      <p>
+                        {i18n.translate(
+                          'xpack.enterpriseSearch.connectors.connectorStats.p.DocumentsLabel',
+                          {
+                            defaultMessage: '{documentAmount} Documents',
+                            values: {
+                              documentAmount: indexData?.count ?? 0,
+                            },
+                          }
+                        )}
+                      </p>
+                    </EuiText>
+                  </EuiFlexItem>
+                </EuiFlexGroup>
+              </EuiFlexItem>
               <EuiFlexItem grow={false}>
-                {[ConnectorStatus.CONNECTED, ConnectorStatus.CONFIGURED].includes(
-                  connector.status
-                ) && connector.index_name ? (
-                  <EuiButtonEmptyTo
-                    size="s"
-                    to={generateEncodedPath(CONNECTOR_DETAIL_TAB_PATH, {
-                      connectorId: connector.id,
-                      tabId: ConnectorDetailTabId.CONFIGURATION,
-                    })}
-                  >
-                    {configureLabel}
-                  </EuiButtonEmptyTo>
-                ) : (
-                  <EuiButtonTo
-                    color="primary"
-                    size="s"
-                    fill
-                    to={generateEncodedPath(CONNECTOR_DETAIL_TAB_PATH, {
-                      connectorId: connector.id,
-                      tabId: ConnectorDetailTabId.CONFIGURATION,
-                    })}
-                  >
-                    {configureLabel}
-                  </EuiButtonTo>
-                )}
+                <EuiButtonEmptyTo
+                  isDisabled={!(connector.index_name && indexData)}
+                  size="s"
+                  to={generateEncodedPath(CONNECTOR_DETAIL_TAB_PATH, {
+                    connectorId: connector.id,
+                    tabId: ConnectorDetailTabId.DOCUMENTS,
+                  })}
+                >
+                  {seeDocumentsLabel}
+                </EuiButtonEmptyTo>
               </EuiFlexItem>
             </EuiFlexGroup>
           }

From 41a86d9b86f5a8ff0445d09d5411e206b086e4a1 Mon Sep 17 00:00:00 2001
From: Jedr Blaszyk <jedr.blaszyk@elastic.co>
Date: Mon, 20 May 2024 14:54:51 +0200
Subject: [PATCH 2/3] Fix issues

---
 .../components/connector_detail/connector_stats.tsx       | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/connector_detail/connector_stats.tsx b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/connector_detail/connector_stats.tsx
index bdc929568abeb..86f69c149ff99 100644
--- a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/connector_detail/connector_stats.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/connector_detail/connector_stats.tsx
@@ -147,7 +147,13 @@ export const ConnectorStats: React.FC<ConnectorStatsProps> = ({ connector, index
                           onClick={copy}
                           color="text"
                           iconType="copyClipboard"
-                          aria-label="Help"
+                          aria-label={i18n.translate(
+                            'xpack.enterpriseSearch.connectors.connectorStats.copyConnectorIdButton',
+                            {
+                              defaultMessage: 'Copy Connector ID',
+                            }
+                          )}
+                          data-test-subj="copyConnectorIdButton"
                         />
                       )}
                     </EuiCopy>

From 98f62165e9cf82b929b79a2a72c2c350dba16077 Mon Sep 17 00:00:00 2001
From: Jedr Blaszyk <jedr.blaszyk@elastic.co>
Date: Mon, 20 May 2024 15:00:30 +0200
Subject: [PATCH 3/3] Fix warinings

---
 .../components/connector_detail/connector_stats.tsx   | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/connector_detail/connector_stats.tsx b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/connector_detail/connector_stats.tsx
index 86f69c149ff99..095844b4e04d4 100644
--- a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/connector_detail/connector_stats.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/connector_detail/connector_stats.tsx
@@ -24,6 +24,7 @@ import {
 } from '@elastic/eui';
 
 import { i18n } from '@kbn/i18n';
+import { FormattedMessage } from '@kbn/i18n-react';
 
 import { Connector, ConnectorStatus, ElasticsearchIndex } from '@kbn/search-connectors';
 
@@ -135,9 +136,13 @@ export const ConnectorStats: React.FC<ConnectorStatsProps> = ({ connector, index
                 <EuiFlexGroup alignItems="center" gutterSize="xs">
                   <EuiFlexItem grow={false}>
                     <EuiText size="s">
-                      <EuiText size="s">
-                        ID: <EuiCode>{connector.id}</EuiCode>
-                      </EuiText>
+                      <FormattedMessage
+                        id="xpack.enterpriseSearch.connectors.connectorStats.connectorIdLabel"
+                        defaultMessage="ID: {connectorId}"
+                        values={{
+                          connectorId: <EuiCode>{connector.id}</EuiCode>,
+                        }}
+                      />
                     </EuiText>
                   </EuiFlexItem>
                   <EuiFlexItem grow={false}>