Configure Datasource (Hard coded)

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

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,7 +7,7 @@ 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';
 

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 _ from 'lodash';
+import React, { useState } from 'react';
+import { OPENSEARCH_DOCUMENTATION_URL } from '../../../../common/constants/data_connections';
+
+export const DataConnectionsHeader = () => {
+  const tabs = [
+    {
+      id: 'manage',
+      name: 'Manage data source',
+      disabled: false,
+    },
+    {
+      id: 'new',
+      name: 'New data source',
+      disabled: false,
+    },
+  ];
+
+  const [selectedTabId, setSelectedTabId] = useState(
+    window.location.hash.substring(2) ? window.location.hash.substring(2) : '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,28 @@ 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';
 
 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/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 {

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

@@ -21,9 +21,9 @@ import {
 } from '@elastic/eui';
 import React, { useEffect, useState } from 'react';
 import { AccessControlTab } from './access_control_tab';
-import { NoAccess } from './no_access';
-import { DATACONNECTIONS_BASE } from '../../../../common/constants/shared';
-import { coreRefs } from '../../../../public/framework/core_refs';
+import { NoAccess } from '../no_access';
+import { DATACONNECTIONS_BASE } from '../../../../../common/constants/shared';
+import { coreRefs } from '../../../../framework/core_refs';
 import { ConnectionDetails } from './connection_details';
 
 interface DatasourceDetails {
@@ -49,7 +49,7 @@ export const DataConnection = (props: any) => {
   useEffect(() => {
     chrome!.setBreadcrumbs([
       {
-        text: 'Data Connections',
+        text: 'Data sources',
         href: '#/',
       },
       {
@@ -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/data_connections/components/manage_data_connections_description.tsx → public/components/datasources/components/manage/manage_data_connections_description.tsx

@@ -10,12 +10,12 @@ export const DataConnectionsDescription = () => {
   return (
     <div>
       <EuiTitle size="s">
-        <h2>Manage existing data connections</h2>
+        <h2>Manage existing data sources</h2>
       </EuiTitle>
 
       <EuiSpacer size="s" />
       <EuiText size="s" color="subdued">
-        Manage already created data connections.
+        Manage already created data sources.
       </EuiText>
       <EuiHorizontalRule size="full" />
     </div>