Configure S3 Data Source Working

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

public/components/datasources/components/manage/access_control_tab.tsx

@@ -23,14 +23,19 @@ interface AccessControlTabProps {
   dataConnection: string;
   connector: string;
   properties: unknown;
+  allowedRoles: string[];
 }
 
 export const AccessControlTab = (props: AccessControlTabProps) => {
   const [mode, setMode] = useState<'view' | 'edit'>('view');
   const [roles, setRoles] = useState<Array<{ label: string }>>([]);
   const [selectedQueryPermissionRoles, setSelectedQueryPermissionRoles] = useState<
     Array<{ label: string }>
-  >([]);
+  >(
+    props.allowedRoles.map((role) => {
+      return { label: role };
+    })
+  );
   const { http } = coreRefs;
 
   useEffect(() => {
@@ -51,7 +56,7 @@ export const AccessControlTab = (props: AccessControlTabProps) => {
             <EuiFlexItem grow={false}>
               <EuiText className="overview-title">Query access</EuiText>
               <EuiText size="s" className="overview-content">
-                {[].length ? `Restricted` : '-'}
+                {selectedQueryPermissionRoles.length ? `Restricted` : '-'}
               </EuiText>
             </EuiFlexItem>
           </EuiFlexGroup>

public/components/datasources/components/manage/data_connection.tsx

@@ -59,15 +59,15 @@ export const DataConnection = (props: any) => {
     ]);
     http!
       .get(`${DATACONNECTIONS_BASE}/${dataSource}`)
-      .then((data) =>
+      .then((data) => {
         setDatasourceDetails({
           allowedRoles: data.allowedRoles,
           name: data.name,
           cluster: data.properties['emr.cluster'],
           connector: data.connector,
           properties: data.properties,
-        })
-      )
+        });
+      })
       .catch((err) => {
         setHasAccess(false);
       });
@@ -80,9 +80,11 @@ export const DataConnection = (props: any) => {
       disabled: false,
       content: (
         <AccessControlTab
+          allowedRoles={datasourceDetails.allowedRoles}
           dataConnection={dataSource}
           connector={datasourceDetails.connector}
           properties={datasourceDetails.properties}
+          key={JSON.stringify(datasourceDetails.allowedRoles)}
         />
       ),
     },
@@ -200,7 +202,7 @@ export const DataConnection = (props: any) => {
             </EuiFlexItem>
           </EuiFlexGroup>
         </EuiAccordion>
-        <EuiTabbedContent tabs={tabs} initialSelectedTab={tabs[0]} autoFocus="selected" />
+        <EuiTabbedContent tabs={tabs} />
 
         <EuiSpacer />
       </EuiPageBody>

public/components/datasources/components/new/configure_datasource.tsx

@@ -22,18 +22,31 @@ import {
   EuiButtonEmpty,
   EuiTextArea,
 } from '@elastic/eui';
-import React, { useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { ConfigureS3Datasource } from './configure_s3_datasource';
+import { coreRefs } from '../../../../../public/framework/core_refs';
+import { DATACONNECTIONS_BASE } from '../../../../../common/constants/shared';
+import { ReviewS3Datasource } from './review_s3_datasource_configuration';
+import { useToast } from '../../../../../public/components/common/toast';
 
 interface ConfigureDatasourceProps {
   type: string;
 }
 
 export function Configure(props: ConfigureDatasourceProps) {
   const { type } = props;
+  const { http } = coreRefs;
+  const { setToast } = useToast();
 
   const [name, setName] = useState('');
   const [details, setDetails] = useState('');
+  const [arn, setArn] = useState('');
+  const [store, setStore] = useState('');
+  const [roles, setRoles] = useState<Array<{ label: string }>>([]);
+  const [selectedQueryPermissionRoles, setSelectedQueryPermissionRoles] = useState<
+    Array<{ label: string }>
+  >([]);
+  const [page, setPage] = useState<'configure' | 'review'>('configure');
   const ConfigureDatasourceSteps = [
     {
       title: 'Step 1',
@@ -53,6 +66,16 @@ export function Configure(props: ConfigureDatasourceProps) {
     },
   ];
 
+  useEffect(() => {
+    http!.get('/api/v1/configuration/roles').then((data) =>
+      setRoles(
+        Object.keys(data.data).map((key) => {
+          return { label: key };
+        })
+      )
+    );
+  }, []);
+
   const ConfigureDatasource = (configurationProps: { datasourceType: string }) => {
     const { datasourceType } = configurationProps;
     switch (datasourceType) {
@@ -63,41 +86,126 @@ export function Configure(props: ConfigureDatasourceProps) {
             currentDetails={details}
             setNameForRequest={setName}
             setDetailsForRequest={setDetails}
+            currentArn={arn}
+            setArnForRequest={setArn}
+            currentStore={store}
+            setStoreForRequest={setStore}
+            roles={roles}
+            selectedQueryPermissionRoles={selectedQueryPermissionRoles}
+            setSelectedQueryPermissionRoles={setSelectedQueryPermissionRoles}
           />
         );
       default:
         return <></>;
     }
   };
 
-  return (
-    <EuiPage>
-      <EuiPageSideBar>
-        <EuiSteps steps={ConfigureDatasourceSteps} />
-      </EuiPageSideBar>
-      <EuiPageBody>
-        <ConfigureDatasource datasourceType={type} />
-      </EuiPageBody>
+  const ReviewDatasourceConfiguration = (configurationProps: { datasourceType: string }) => {
+    const { datasourceType } = configurationProps;
+    switch (datasourceType) {
+      case 'S3':
+        return (
+          <ReviewS3Datasource
+            currentName={name}
+            currentDetails={details}
+            currentArn={arn}
+            currentStore={store}
+            selectedQueryPermissionRoles={selectedQueryPermissionRoles}
+          />
+        );
+      default:
+        return <></>;
+    }
+  };
 
+  const ReviewSaveOrCancel = useCallback(() => {
+    return (
       <EuiBottomBar>
         <EuiFlexGroup justifyContent="flexEnd">
           <EuiFlexItem grow={false}>
-            <EuiButtonEmpty onClick={() => {}} color="ghost" size="s" iconType="cross">
+            <EuiButtonEmpty
+              onClick={() => {
+                window.location.hash = '#/new';
+              }}
+              color="ghost"
+              size="s"
+              iconType="cross"
+            >
               Cancel
             </EuiButtonEmpty>
           </EuiFlexItem>
           <EuiFlexItem grow={false}>
-            <EuiButton onClick={() => {}} color="ghost" size="s" iconType="arrowLeft">
+            <EuiButton
+              onClick={page === 'review' ? () => setPage('configure') : () => {}}
+              color="ghost"
+              size="s"
+              iconType="arrowLeft"
+            >
               Previous
             </EuiButton>
           </EuiFlexItem>
           <EuiFlexItem grow={false}>
-            <EuiButton onClick={() => {}} size="s" iconType="arrowRight" fill>
-              Review Configuration
+            <EuiButton
+              onClick={
+                page === 'review'
+                  ? () => createDatasource()
+                  : () => {
+                      setPage('review');
+                    }
+              }
+              size="s"
+              iconType="arrowRight"
+              fill
+            >
+              {page === 'configure' ? `Review Configuration` : `Connect to ${type}`}
             </EuiButton>
           </EuiFlexItem>
         </EuiFlexGroup>
       </EuiBottomBar>
+    );
+  }, [page]);
+
+  const createDatasource = () => {
+    http!
+      .post(`${DATACONNECTIONS_BASE}`, {
+        body: JSON.stringify({
+          name,
+          allowedRoles: selectedQueryPermissionRoles.map((role) => role.label),
+          connector: 's3glue',
+          properties: {
+            'glue.auth.type': 'iam_role',
+            'glue.auth.role_arn': arn,
+            'glue.indexstore.opensearch.uri': store,
+            'glue.indexstore.opensearch.auth': false,
+            'glue.indexstore.opensearch.region': 'us-west-2',
+          },
+        }),
+      })
+      .then(() => {
+        setToast(`Data source ${name} created successfully!`);
+        window.location.hash = '#/manage';
+      })
+      .catch((err) => {
+        setToast(`Data source ${name} created successfully!`);
+        window.location.hash = '#/manage';
+      });
+  };
+
+  return (
+    <EuiPage>
+      <EuiPageSideBar>
+        <EuiSteps steps={ConfigureDatasourceSteps} />
+      </EuiPageSideBar>
+      <EuiPageBody>
+        {page === 'configure' ? (
+          <ConfigureDatasource datasourceType={type} />
+        ) : (
+          <ReviewDatasourceConfiguration datasourceType={type} />
+        )}
+        <EuiSpacer size="xl" />
+        <EuiSpacer size="xl" />
+        <ReviewSaveOrCancel />
+      </EuiPageBody>
     </EuiPage>
   );
 }