Add access control tab content

common/constants/data_connections.ts

@@ -8,3 +8,6 @@ export const OPENSEARCH_DOCUMENTATION_URL =
 
 export const OPENSEARCH_ACC_DOCUMENTATION_URL =
   'https://opensearch.org/docs/latest/data-acceleration/index';
+
+export const QUERY_RESTRICTED = 'query-restricted';
+export const QUERY_ALL = 'query-all';

common/types/data_connections.ts

@@ -0,0 +1,10 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export interface PermissionsConfigurationProps {
+  roles: Array<{ label: string }>;
+  selectedRoles: Array<{ label: string }>;
+  setSelectedRoles: React.Dispatch<React.SetStateAction<Array<{ label: string }>>>;
+}

public/components/data_connections/components/__tests__/__snapshots__/data_connection.test.tsx.snap

@@ -259,46 +259,59 @@ exports[`Data Connection Page test Renders data connection page with data 1`] =
           </div>
         </div>
       </div>
-      <div
-        class="euiTabs"
-        role="tablist"
-      >
-        <button
-          aria-selected="true"
-          class="euiTab euiTab-isSelected"
-          role="tab"
-          type="button"
+      <div>
+        <div
+          class="euiTabs"
+          role="tablist"
         >
-          <span
-            class="euiTab__content"
+          <button
+            aria-controls="random_html_id"
+            aria-selected="true"
+            class="euiTab euiTab-isSelected"
+            id="data"
+            role="tab"
+            type="button"
           >
-            Data
-          </span>
-        </button>
-        <button
-          aria-selected="false"
-          class="euiTab"
-          role="tab"
-          type="button"
-        >
-          <span
-            class="euiTab__content"
+            <span
+              class="euiTab__content"
+            >
+              Data
+            </span>
+          </button>
+          <button
+            aria-controls="random_html_id"
+            aria-selected="false"
+            class="euiTab"
+            id="access_control"
+            role="tab"
+            type="button"
           >
-            Access control
-          </span>
-        </button>
-        <button
-          aria-selected="false"
-          class="euiTab"
-          role="tab"
-          type="button"
-        >
-          <span
-            class="euiTab__content"
+            <span
+              class="euiTab__content"
+            >
+              Access control
+            </span>
+          </button>
+          <button
+            aria-controls="random_html_id"
+            aria-selected="false"
+            class="euiTab"
+            id="connection_configuration"
+            role="tab"
+            type="button"
           >
-            Connection configuration
-          </span>
-        </button>
+            <span
+              class="euiTab__content"
+            >
+              Connection configuration
+            </span>
+          </button>
+        </div>
+        <div
+          aria-labelledby="data"
+          id="random_html_id"
+          role="tabpanel"
+        />
       </div>
       <div
         class="euiSpacer euiSpacer--l"

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

@@ -11,28 +11,28 @@ import { describeDataConnection } from './testing_constants';
 import { DataConnection } from '../data_connection';
 import ReactDOM from 'react-dom';
 
+jest.mock('../../../../../public/framework/core_refs', () => ({
+  coreRefs: {
+    chrome: {
+      setBreadcrumbs: jest.fn(),
+    },
+    http: {
+      get: jest.fn().mockResolvedValue(describeDataConnection),
+    },
+  },
+}));
+
 describe('Data Connection Page test', () => {
   configure({ adapter: new Adapter() });
 
   it('Renders data connection page with data', async () => {
-    const http = {
-      get: jest.fn().mockResolvedValue(describeDataConnection),
-    };
     const pplService = {
       fetch: jest.fn(),
     };
-    const mockChrome = {
-      setBreadcrumbs: jest.fn(),
-    };
-    const wrapper = mount(
-      <DataConnection http={http} pplService={pplService} chrome={mockChrome} />
-    );
+    const wrapper = mount(<DataConnection pplService={pplService} />);
     const container = document.createElement('div');
     await act(() => {
-      ReactDOM.render(
-        <DataConnection http={http} pplService={pplService} chrome={mockChrome} />,
-        container
-      );
+      ReactDOM.render(<DataConnection pplService={pplService} />, container);
     });
     expect(container).toMatchSnapshot();
   });

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

@@ -10,6 +10,18 @@ import React from 'react';
 import { ManageDataConnectionsTable } from '../manage_data_connections_table';
 import { showDataConnectionsData } from './testing_constants';
 import ReactDOM from 'react-dom';
+import { coreRefs } from '../../../../../public/framework/core_refs';
+
+jest.mock('../../../../../public/framework/core_refs', () => ({
+  coreRefs: {
+    chrome: {
+      setBreadcrumbs: jest.fn(),
+    },
+    http: {
+      get: jest.fn().mockResolvedValue(showDataConnectionsData),
+    },
+  },
+}));
 
 describe('Manage Data Connections Table test', () => {
   configure({ adapter: new Adapter() });
@@ -19,7 +31,7 @@ describe('Manage Data Connections Table test', () => {
       get: jest.fn().mockResolvedValue(showDataConnectionsData),
     };
     const pplService = {
-      fetch: jest.fn(),
+      fetch: jest.fn().mockResolvedValue(showDataConnectionsData),
     };
     const mockChrome = {
       setBreadcrumbs: jest.fn(),

public/components/data_connections/components/__tests__/testing_constants.ts

@@ -3,61 +3,43 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-export const showDataConnectionsData = [
-  {
-    name: 'my_spark3',
-    connector: 'SPARK',
-    allowedRoles: [],
-    properties: {
-      'spark.connector': 'emr',
-      'spark.datasource.flint.host': '0.0.0.0',
-      'spark.datasource.flint.integration':
-        'https://aws.oss.sonatype.org/content/repositories/snapshots/org/opensearch/opensearch-spark-standalone_2.12/0.1.0-SNAPSHOT/opensearch-spark-standalone_2.12-0.1.0-20230731.182705-3.jar',
-      'spark.datasource.flint.port': '9200',
-      'spark.datasource.flint.scheme': 'http',
-      'emr.cluster': 'j-3UNQLT1MPBGLG',
+export const showDataConnectionsData = {
+  schema: [
+    {
+      name: 'DATASOURCE_NAME',
+      type: 'string',
     },
-  },
-  {
-    name: 'my_spark4',
-    connector: 'SPARK',
-    allowedRoles: [],
-    properties: {
-      'spark.connector': 'emr',
-      'spark.datasource.flint.host': '15.248.1.68',
-      'spark.datasource.flint.integration':
-        'https://aws.oss.sonatype.org/content/repositories/snapshots/org/opensearch/opensearch-spark-standalone_2.12/0.1.0-SNAPSHOT/opensearch-spark-standalone_2.12-0.1.0-20230731.182705-3.jar',
-      'spark.datasource.flint.port': '9200',
-      'spark.datasource.flint.scheme': 'http',
-      'emr.cluster': 'j-3UNQLT1MPBGLG',
+    {
+      name: 'CONNECTOR_TYPE',
+      type: 'string',
     },
-  },
-  {
-    name: 'my_spark',
-    connector: 'SPARK',
-    allowedRoles: [],
-    properties: {
-      'spark.connector': 'emr',
-      'spark.datasource.flint.host': '0.0.0.0',
-      'spark.datasource.flint.port': '9200',
-      'spark.datasource.flint.scheme': 'http',
-      'spark.datasource.flint.region': 'xxx',
-      'emr.cluster': 'xxx',
+  ],
+  datarows: [
+    ['my_spark_actual', 'SPARK'],
+    ['@opensearch', 'OPENSEARCH'],
+    ['my_spark', 'SPARK'],
+  ],
+  total: 3,
+  size: 3,
+  jsonData: [
+    {
+      DATASOURCE_NAME: 'my_spark3',
+      CONNECTOR_TYPE: 'SPARK',
     },
-  },
-  {
-    name: 'my_spark2',
-    connector: 'SPARK',
-    allowedRoles: [],
-    properties: {
-      'spark.connector': 'emr',
-      'spark.datasource.flint.host': '0.0.0.0',
-      'spark.datasource.flint.port': '9200',
-      'spark.datasource.flint.scheme': 'http',
-      'emr.cluster': 'j-3UNQLT1MPBGLG',
+    {
+      DATASOURCE_NAME: 'my_spark4',
+      CONNECTOR_TYPE: 'SPARK',
     },
-  },
-];
+    {
+      DATASOURCE_NAME: 'my_spark',
+      CONNECTOR_TYPE: 'SPARK',
+    },
+    {
+      DATASOURCE_NAME: 'my_spark2',
+      CONNECTOR_TYPE: 'SPARK',
+    },
+  ],
+};
 
 export const describeDataConnection = {
   name: 'my_spark3',

public/components/data_connections/components/access_control_callout.tsx

@@ -0,0 +1,16 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { EuiCallOut } from '@elastic/eui';
+import React from 'react';
+
+export const AccessControlCallout = () => {
+  return (
+    <EuiCallOut title="Configurations may be managed elsewhere." iconType="iInCircle">
+      Access to data can be managed in other systems outside of OpenSearch. Check with your
+      administrator for additional configurations.
+    </EuiCallOut>
+  );
+};