Add access control tab content

common/constants/data_connections.ts

@@ -8,3 +8,8 @@ export const OPENSEARCH_DOCUMENTATION_URL =
 
 export const OPENSEARCH_ACC_DOCUMENTATION_URL =
   'https://opensearch.org/docs/latest/data-acceleration/index';
+
+export const QUERY_RESTRICT = 'query-restrict';
+export const QUERY_ALL = 'query-all';
+export const ACCELERATION_RESTRICT = 'acceleration-restrict';
+export const ACCELERATION_ALL = 'acceleration-all';

common/types/data_connections.ts

@@ -0,0 +1,15 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { EuiRadioGroupOption } from '@elastic/eui';
+
+export interface PermissionsFlexItem {
+  roles: Array<{ label: string }>;
+  selectedRoles: Array<{ label: string }>;
+  selectedRadio: string;
+  setSelectedRoles: (selectedRoles: Array<{ label: string }>) => void;
+  setSelectedRadio: (selectedRadio: string) => void;
+  radios: EuiRadioGroupOption[];
+}

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

@@ -259,46 +259,59 @@ exports[`Datasource Page test Renders datasource 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__/__snapshots__/manage_datasource_table.test.tsx.snap

@@ -37,8 +37,8 @@ exports[`Manage Datasource Table test Renders manage datasource table with data
             <a
               class="euiLink euiLink--primary"
               href="https://opensearch.org/docs/latest/data-connections/index"
-              rel="noreferrer"
-              target="blank"
+              rel="noopener noreferrer"
+              target="_blank"
             >
               Learn more
               <svg
@@ -52,6 +52,11 @@ exports[`Manage Datasource Table test Renders manage datasource table with data
                 width="16"
                 xmlns="http://www.w3.org/2000/svg"
               />
+              <span
+                class="euiScreenReaderOnly"
+              >
+                (opens in a new tab or window)
+              </span>
             </a>
           </div>
         </div>

public/components/data_connections/components/acceleration_permissions_flex_item.tsx

@@ -0,0 +1,70 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {
+  EuiComboBox,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiLink,
+  EuiRadioGroup,
+  EuiSpacer,
+  EuiText,
+} from '@elastic/eui';
+import React from 'react';
+import { PermissionsFlexItem } from '../../../../common/types/data_connections';
+import {
+  OPENSEARCH_DOCUMENTATION_URL,
+  QUERY_ALL,
+} from '../../../../common/constants/data_connections';
+
+export const AccelerationPermissionsFlexItem = (props: PermissionsFlexItem) => {
+  const { roles, setSelectedRoles, selectedRoles, selectedRadio, radios, setSelectedRadio } = props;
+  return (
+    <EuiFlexItem>
+      <EuiFlexGroup direction="row">
+        <EuiFlexItem>
+          <EuiText className="overview-title">Acceleration Permissions</EuiText>
+          <EuiText size="s" className="overview-content">
+            Control which OpenSearch roles have permissions to accelerate external data through
+            OpenSearch indexing.{' '}
+            <EuiLink external={true} href={OPENSEARCH_DOCUMENTATION_URL} target="_blank">
+              Learn more
+            </EuiLink>
+          </EuiText>
+        </EuiFlexItem>
+        <EuiFlexItem>
+          <EuiRadioGroup
+            options={radios}
+            idSelected={selectedRadio}
+            onChange={(id) => setSelectedRadio(id)}
+            name="acceleration-radio-group"
+            legend={{
+              children: <span>Access level</span>,
+            }}
+          />
+          {selectedRadio === QUERY_ALL ? (
+            <div>
+              <EuiSpacer size="s" />
+              <EuiText>OpenSearch Roles</EuiText>
+              <EuiText size="xs">
+                Select one or more OpenSearch roles that can query this data connection.
+              </EuiText>
+              <EuiComboBox
+                placeholder="Select one or more options"
+                options={roles}
+                selectedOptions={selectedRoles}
+                onChange={setSelectedRoles}
+                isClearable={true}
+                data-test-subj="query-permissions-combo-box"
+              />
+            </div>
+          ) : (
+            <></>
+          )}
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    </EuiFlexItem>
+  );
+};

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>
+  );
+};