From 1a73071f49836aa88cae5a39807907013f554ec1 Mon Sep 17 00:00:00 2001
From: Derek Ho <dxho@amazon.com>
Date: Wed, 11 Oct 2023 15:31:18 -0400
Subject: [PATCH] Add callout and modify content for S3 datasource (#1111)

* Add callout and modify content for S3 datasource

Signed-off-by: Derek Ho <dxho@amazon.com>

* Update s3 documentation

Signed-off-by: Derek Ho <dxho@amazon.com>

---------

Signed-off-by: Derek Ho <dxho@amazon.com>
---
 common/constants/data_connections.ts             |  3 +++
 .../components/new/configure_s3_datasource.tsx   | 16 +++++++++++++---
 2 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/common/constants/data_connections.ts b/common/constants/data_connections.ts
index 04aac36ed..a0862e646 100644
--- a/common/constants/data_connections.ts
+++ b/common/constants/data_connections.ts
@@ -8,6 +8,9 @@ import { DatasourceType } from '../../common/types/data_connections';
 export const OPENSEARCH_DOCUMENTATION_URL =
   'https://opensearch.org/docs/latest/dashboards/management/data-sources/';
 
+export const OPENSEARCH_S3_DOCUMENTATION_URL =
+  'https://opensearch.org/docs/latest/dashboards/management/S3-data-source/';
+
 export const OPENSEARCH_ACC_DOCUMENTATION_URL =
   'https://opensearch.org/docs/latest/data-acceleration/index';
 export const QUERY_RESTRICTED = 'query-restricted';
diff --git a/public/components/datasources/components/new/configure_s3_datasource.tsx b/public/components/datasources/components/new/configure_s3_datasource.tsx
index f35cc4d7d..344252d4a 100644
--- a/public/components/datasources/components/new/configure_s3_datasource.tsx
+++ b/public/components/datasources/components/new/configure_s3_datasource.tsx
@@ -13,11 +13,12 @@ import {
   EuiFieldText,
   EuiTextArea,
   EuiSelect,
+  EuiCallOut,
 } from '@elastic/eui';
 import React, { useState } from 'react';
 import {
   AuthMethod,
-  OPENSEARCH_DOCUMENTATION_URL,
+  OPENSEARCH_S3_DOCUMENTATION_URL,
 } from '../../../../../common/constants/data_connections';
 import { QueryPermissionsConfiguration } from './query_permissions';
 import { Role } from '../../../../../common/types/data_connections';
@@ -87,11 +88,20 @@ export const ConfigureS3Datasource = (props: ConfigureS3DatasourceProps) => {
         </EuiTitle>
         <EuiSpacer size="s" />
         <EuiText size="s" color="subdued">
-          {`Connect to S3 with OpenSearch and OpenSearch Dashboards. `}
-          <EuiLink external={true} href={OPENSEARCH_DOCUMENTATION_URL} target="blank">
+          {`Connect to Amazon S3 via AWS Glue with Amazon EMR as an execution engine. `}
+          <EuiLink external={true} href={OPENSEARCH_S3_DOCUMENTATION_URL} target="blank">
             Learn more
           </EuiLink>
         </EuiText>
+        <EuiSpacer size="s" />
+        <EuiCallOut title="Setup Amazon EMR as execution engine first" iconType="iInCircle">
+          <EuiText size="s" color="subdued">
+            {`Connect to Amazon S3 via AWS Glue with Amazon EMR as an execution engine. `}
+            <EuiLink external={true} href={OPENSEARCH_S3_DOCUMENTATION_URL} target="blank">
+              Learn more
+            </EuiLink>
+          </EuiText>
+        </EuiCallOut>
         <EuiSpacer />
         <EuiText>
           <h3>Data source details</h3>