From 8e9fe5edb011f903d41a76f578f1d81b03089b7c Mon Sep 17 00:00:00 2001
From: "opensearch-trigger-bot[bot]"
 <98922864+opensearch-trigger-bot[bot]@users.noreply.github.com>
Date: Mon, 30 Oct 2023 17:30:27 -0400
Subject: [PATCH] Link integrations from datasources UI (#1203) (#1207)

(cherry picked from commit 667bbb7a5ef22d05ebc1957fa3ffbeadafb46b62)

Signed-off-by: Derek Ho <dxho@amazon.com>
Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
---
 .../data_connection.test.tsx.snap             | 45 +++++++++++++++++++
 .../components/manage/data_connection.tsx     |  8 ++++
 .../manage/manage_data_connections_table.tsx  | 12 +++++
 3 files changed, 65 insertions(+)

diff --git a/public/components/datasources/components/__tests__/__snapshots__/data_connection.test.tsx.snap b/public/components/datasources/components/__tests__/__snapshots__/data_connection.test.tsx.snap
index 7a9dead8c..1b0f81471 100644
--- a/public/components/datasources/components/__tests__/__snapshots__/data_connection.test.tsx.snap
+++ b/public/components/datasources/components/__tests__/__snapshots__/data_connection.test.tsx.snap
@@ -675,6 +675,51 @@ exports[`Data Connection Page test Renders S3 data connection page with data 1`]
                     </div>
                   </div>
                 </div>
+                <div
+                  class="euiFlexItem"
+                >
+                  <div
+                    class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPanel--isClickable euiCard euiCard--centerAligned euiCard--isClickable euiCard--hasIcon"
+                  >
+                    <div
+                      class="euiCard__top"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        class="euiIcon euiIcon--xxLarge euiIcon-isLoading euiCard__icon"
+                        focusable="false"
+                        height="16"
+                        role="img"
+                        viewBox="0 0 16 16"
+                        width="16"
+                        xmlns="http://www.w3.org/2000/svg"
+                      />
+                    </div>
+                    <div
+                      class="euiCard__content"
+                    >
+                      <span
+                        class="euiTitle euiTitle--small euiCard__title"
+                        id="random_html_idTitle"
+                      >
+                        <button
+                          aria-describedby=" random_html_idDescription"
+                          class="euiCard__titleButton"
+                        >
+                          Integrate data
+                        </button>
+                      </span>
+                      <div
+                        class="euiText euiText--small euiCard__description"
+                        id="random_html_idDescription"
+                      >
+                        <p>
+                          Explore data faster through integrations
+                        </p>
+                      </div>
+                    </div>
+                  </div>
+                </div>
               </div>
             </div>
           </div>
diff --git a/public/components/datasources/components/manage/data_connection.tsx b/public/components/datasources/components/manage/data_connection.tsx
index 12b40df10..4c9da43a3 100644
--- a/public/components/datasources/components/manage/data_connection.tsx
+++ b/public/components/datasources/components/manage/data_connection.tsx
@@ -98,6 +98,14 @@ export const DataConnection = (props: any) => {
             }
           />
         </EuiFlexItem>
+        <EuiFlexItem>
+          <EuiCard
+            icon={<EuiIcon size="xxl" type="integrationGeneral" />}
+            title={'Integrate data'}
+            description="Explore data faster through integrations"
+            onClick={() => application!.navigateToApp(observabilityIntegrationsID)}
+          />
+        </EuiFlexItem>
       </EuiFlexGroup>
     );
   };
diff --git a/public/components/datasources/components/manage/manage_data_connections_table.tsx b/public/components/datasources/components/manage/manage_data_connections_table.tsx
index d2fe01326..4d8c65751 100644
--- a/public/components/datasources/components/manage/manage_data_connections_table.tsx
+++ b/public/components/datasources/components/manage/manage_data_connections_table.tsx
@@ -22,6 +22,7 @@ import { HomeProps } from '../../home';
 import { DataConnectionsDescription } from './manage_data_connections_description';
 import {
   DATACONNECTIONS_BASE,
+  observabilityIntegrationsID,
   observabilityLogsID,
   observabilityMetricsID,
 } from '../../../../../common/constants/shared';
@@ -137,6 +138,17 @@ export const ManageDataConnectionsTable = (props: HomeProps) => {
       },
       'data-test-subj': 'action-accelerate',
     },
+    {
+      name: 'Integrate data',
+      isPrimary: false,
+      icon: 'integrationGeneral',
+      type: 'icon',
+      available: (datasource: DataConnection) => datasource.connectionType !== 'PROMETHEUS',
+      onClick: () => {
+        application!.navigateToApp(observabilityIntegrationsID);
+      },
+      'data-test-subj': 'action-integrate',
+    },
     {
       name: 'Delete',
       description: 'Delete this data source',