Configure S3 datasource flow

common/constants/shared.ts

@@ -58,8 +58,8 @@ export const observabilityIntegrationsID = 'integrations';
 export const observabilityIntegrationsTitle = 'Integrations';
 export const observabilityIntegrationsPluginOrder = 9020;
 
-export const observabilityDataConnectionsID = 'dataconnections';
-export const observabilityDataConnectionsTitle = 'Data Connections';
+export const observabilityDataConnectionsID = 'datasources';
+export const observabilityDataConnectionsTitle = 'Data sources';
 export const observabilityDataConnectionsPluginOrder = 9030;
 
 // Shared Constants

common/types/data_connections.ts

@@ -3,8 +3,15 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import { EuiComboBoxOptionOption } from '@elastic/eui';
+
 export interface PermissionsConfigurationProps {
-  roles: Array<{ label: string }>;
-  selectedRoles: Array<{ label: string }>;
-  setSelectedRoles: React.Dispatch<React.SetStateAction<Array<{ label: string }>>>;
+  roles: Role[];
+  selectedRoles: Role[];
+  setSelectedRoles: React.Dispatch<React.SetStateAction<Role[]>>;
+  layout: 'horizontal' | 'vertical';
 }
+
+export type Role = EuiComboBoxOptionOption;
+
+export type DatasourceType = 'SPARK' | 'S3GLUE' | 'OPENSEARCH';

public/components/app.tsx

@@ -19,7 +19,7 @@ import { EventAnalytics } from './event_analytics';
 import { Home as MetricsHome } from './metrics/index';
 import { Main as NotebooksHome } from './notebooks/components/main';
 import { Home as TraceAnalyticsHome } from './trace_analytics/home';
-import { Home as DataConnectionsHome } from './data_connections/home';
+import { Home as DataConnectionsHome } from './datasources/home';
 
 interface ObservabilityAppDeps {
   CoreStartProp: CoreStart;

public/components/data_connections/components/__tests__/__snapshots__/manage_data_connections_description.test.tsx.snap → public/components/datasources/components/__tests__/__snapshots__/manage_data_connections_description.test.tsx.snap

@@ -9,7 +9,7 @@ exports[`Manage Data Connections Description test Renders manage data connection
       <h2
         className="euiTitle euiTitle--small"
       >
-        Manage existing data connections
+        Manage existing data sources
       </h2>
     </EuiTitle>
     <EuiSpacer
@@ -33,7 +33,7 @@ exports[`Manage Data Connections Description test Renders manage data connection
           <div
             className="euiTextColor euiTextColor--subdued"
           >
-            Manage already created data connections.
+            Manage already created data sources.
           </div>
         </EuiTextColor>
       </div>

public/components/data_connections/components/__tests__/__snapshots__/manage_data_connections_table.test.tsx.snap → public/components/datasources/components/__tests__/__snapshots__/manage_data_connections_table.test.tsx.snap

@@ -19,7 +19,7 @@ exports[`Manage Data Connections Table test Renders manage data connections tabl
               class="euiTitle euiTitle--large"
               data-test-subj="dataconnections-header"
             >
-              Data connections
+              Data sources
             </h1>
           </div>
         </header>
@@ -32,7 +32,7 @@ exports[`Manage Data Connections Table test Renders manage data connections tabl
           <div
             class="euiTextColor euiTextColor--subdued"
           >
-            Connect and manage compatible OpenSearch and OpenSearch Dashboard data connections.
+            Connect and manage compatible OpenSearch and OpenSearch Dashboard data sources.
 
             <a
               class="euiLink euiLink--primary"
@@ -58,6 +58,38 @@ exports[`Manage Data Connections Table test Renders manage data connections tabl
         <div
           class="euiSpacer euiSpacer--l"
         />
+        <div
+          class="euiTabs euiTabs--condensed"
+          role="tablist"
+        >
+          <button
+            aria-selected="true"
+            class="euiTab euiTab-isSelected"
+            role="tab"
+            type="button"
+          >
+            <span
+              class="euiTab__content"
+            >
+              Manage data source
+            </span>
+          </button>
+          <button
+            aria-selected="false"
+            class="euiTab"
+            role="tab"
+            type="button"
+          >
+            <span
+              class="euiTab__content"
+            >
+              New data source
+            </span>
+          </button>
+        </div>
+        <div
+          class="euiSpacer euiSpacer--s"
+        />
       </div>
       <div
         class="euiPanel euiPanel--paddingLarge euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPageContent"
@@ -68,7 +100,7 @@ exports[`Manage Data Connections Table test Renders manage data connections tabl
           <h2
             class="euiTitle euiTitle--small"
           >
-            Manage existing data connections
+            Manage existing data sources
           </h2>
           <div
             class="euiSpacer euiSpacer--s"
@@ -79,7 +111,7 @@ exports[`Manage Data Connections Table test Renders manage data connections tabl
             <div
               class="euiTextColor euiTextColor--subdued"
             >
-              Manage already created data connections.
+              Manage already created data sources.
             </div>
           </div>
           <hr

public/components/data_connections/components/__tests__/data_connection.test.tsx → public/components/datasources/components/__tests__/data_connection.test.tsx

@@ -8,7 +8,7 @@ import Adapter from 'enzyme-adapter-react-16';
 import { act } from '@testing-library/react';
 import React from 'react';
 import { describeDataConnection, mockRoleData } from '../../../../../test/datasources';
-import { DataConnection } from '../data_connection';
+import { DataConnection } from '../manage/data_connection';
 import ReactDOM from 'react-dom';
 
 jest.mock('../../../../../public/framework/core_refs', () => ({

public/components/data_connections/components/__tests__/manage_data_connections_description.test.tsx → public/components/datasources/components/__tests__/manage_data_connections_description.test.tsx

@@ -7,7 +7,7 @@ import { configure, mount } from 'enzyme';
 import Adapter from 'enzyme-adapter-react-16';
 import { waitFor } from '@testing-library/react';
 import React from 'react';
-import { DataConnectionsDescription } from '../manage_data_connections_description';
+import { DataConnectionsDescription } from '../manage/manage_data_connections_description';
 
 describe('Manage Data Connections Description test', () => {
   configure({ adapter: new Adapter() });

public/components/data_connections/components/__tests__/manage_data_connections_table.test.tsx → public/components/datasources/components/__tests__/manage_data_connections_table.test.tsx

@@ -7,10 +7,17 @@ import { configure } from 'enzyme';
 import Adapter from 'enzyme-adapter-react-16';
 import { act } from '@testing-library/react';
 import React from 'react';
-import { ManageDataConnectionsTable } from '../manage_data_connections_table';
+import { ManageDataConnectionsTable } from '../manage/manage_data_connections_table';
 import { showDataConnectionsData } from '../../../../../test/datasources';
 import ReactDOM from 'react-dom';
 
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useLocation: () => ({
+    pathname: '/manage',
+  }),
+}));
+
 describe('Manage Data Connections Table test', () => {
   configure({ adapter: new Adapter() });
 

public/components/datasources/components/data_connections_header.tsx

@@ -0,0 +1,77 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {
+  EuiLink,
+  EuiPageHeader,
+  EuiPageHeaderSection,
+  EuiSpacer,
+  EuiTab,
+  EuiTabs,
+  EuiText,
+  EuiTitle,
+} from '@elastic/eui';
+import React, { useState } from 'react';
+import { useLocation } from 'react-router-dom';
+import { OPENSEARCH_DOCUMENTATION_URL } from '../../../../common/constants/data_connections';
+
+const tabs = [
+  {
+    id: 'manage',
+    name: 'Manage data source',
+    disabled: false,
+  },
+  {
+    id: 'new',
+    name: 'New data source',
+    disabled: false,
+  },
+];
+
+export const DataConnectionsHeader = () => {
+  const location = useLocation().pathname.substring(1);
+
+  const [selectedTabId, setSelectedTabId] = useState(location ? location : 'manage');
+
+  const onSelectedTabChanged = (id) => {
+    setSelectedTabId(id);
+    window.location.hash = id;
+  };
+
+  const renderTabs = () => {
+    return tabs.map((tab, index) => (
+      <EuiTab
+        onClick={() => onSelectedTabChanged(tab.id)}
+        isSelected={tab.id === selectedTabId}
+        disabled={tab.disabled}
+        key={index}
+      >
+        {tab.name}
+      </EuiTab>
+    ));
+  };
+
+  return (
+    <div>
+      <EuiPageHeader>
+        <EuiPageHeaderSection>
+          <EuiTitle size="l" data-test-subj="dataconnections-header">
+            <h1>Data sources</h1>
+          </EuiTitle>
+        </EuiPageHeaderSection>
+      </EuiPageHeader>
+      <EuiSpacer size="s" />
+      <EuiText size="s" color="subdued">
+        Connect and manage compatible OpenSearch and OpenSearch Dashboard data sources.{' '}
+        <EuiLink external={true} href={OPENSEARCH_DOCUMENTATION_URL} target="blank">
+          Learn more
+        </EuiLink>
+      </EuiText>
+      <EuiSpacer size="l" />
+      <EuiTabs display="condensed">{renderTabs()}</EuiTabs>
+      <EuiSpacer size="s" />
+    </div>
+  );
+};

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

@@ -14,23 +14,27 @@ import {
 import React, { useEffect, useState } from 'react';
 import { EuiPanel } from '@elastic/eui';
 import { ConnectionManagementCallout } from './connection_management_callout';
-import { coreRefs } from '../../../../public/framework/core_refs';
+import { coreRefs } from '../../../../framework/core_refs';
 import { QueryPermissionsConfiguration } from './query_permissions';
-import { DATACONNECTIONS_BASE } from '../../../../common/constants/shared';
-import { SaveOrCancel } from './save_or_cancel';
+import { DATACONNECTIONS_BASE } from '../../../../../common/constants/shared';
+import { SaveOrCancel } from '../save_or_cancel';
+import { Role } from '../../../../../common/types/data_connections';
 
 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 }>
-  >([]);
+  const [roles, setRoles] = useState<Role[]>([]);
+  const [selectedQueryPermissionRoles, setSelectedQueryPermissionRoles] = useState<Role[]>(
+    props.allowedRoles.map((role) => {
+      return { label: role };
+    })
+  );
   const { http } = coreRefs;
 
   useEffect(() => {
@@ -51,7 +55,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>
@@ -67,6 +71,7 @@ export const AccessControlTab = (props: AccessControlTabProps) => {
           roles={roles}
           selectedRoles={selectedQueryPermissionRoles}
           setSelectedRoles={setSelectedQueryPermissionRoles}
+          layout={'vertical'}
         />
       </EuiFlexGroup>
     );

public/components/data_connections/components/connection_details.tsx → public/components/datasources/components/manage/connection_details.tsx

@@ -14,9 +14,9 @@ import {
 import React, { useState } from 'react';
 import { EuiPanel } from '@elastic/eui';
 import { ConnectionManagementCallout } from './connection_management_callout';
-import { coreRefs } from '../../../../public/framework/core_refs';
-import { DATACONNECTIONS_BASE } from '../../../../common/constants/shared';
-import { SaveOrCancel } from './save_or_cancel';
+import { coreRefs } from '../../../../framework/core_refs';
+import { DATACONNECTIONS_BASE } from '../../../../../common/constants/shared';
+import { SaveOrCancel } from '../save_or_cancel';
 import { ConnectionConfiguration } from './connection_configuration';
 
 interface ConnectionDetailProps {