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>
(cherry picked from commit 1a73071)
Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

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';

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>