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

public/components/data_connections/components/access_control_tab.tsx

@@ -0,0 +1,205 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {
+  EuiButton,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiSpacer,
+  EuiText,
+  EuiHorizontalRule,
+  EuiBottomBar,
+  EuiButtonEmpty,
+} from '@elastic/eui';
+import React, { useEffect, useState } from 'react';
+import { EuiPanel } from '@elastic/eui';
+import {
+  ACCELERATION_ALL,
+  ACCELERATION_RESTRICT,
+  QUERY_ALL,
+  QUERY_RESTRICT,
+} from 'common/constants/data_connections';
+import { AccessControlCallout } from './access_control_callout';
+import { coreRefs } from '../../../../public/framework/core_refs';
+import { QueryPermissionsFlexItem } from './query_permissions_flex_item';
+import { AccelerationPermissionsFlexItem } from './acceleration_permissions_flex_item';
+
+export const AccessControlTab = () => {
+  const [mode, setMode] = useState<'view' | 'edit'>('view');
+  const [roles, setRoles] = useState<Array<{ label: string }>>([]);
+  const [selectedQueryPermissionRoles, setSelectedQueryPermissionRoles] = useState<
+    Array<{ label: string }>
+  >([]);
+  const [selectedAccelerationPermissionRoles, setSelectedAccelerationPermissionRoles] = useState<
+    Array<{ label: string }>
+  >([]);
+  const [queryPermissionRadioSelected, setQueryRadioIdSelected] = useState(`query-1`);
+  const [accelerationPermissionRadioSelected, setAccelerationRadioIdSelected] = useState(
+    `acceleration-1`
+  );
+
+  const [finalQueryPermissionsPlaceHolder, setFinalQueryPermissionsPlaceHolder] = useState<
+    Array<{ label: string }>
+  >([]);
+  const [
+    finalAccelerationPermissionsPlaceHolder,
+    setFinalAccelerationPermissionsPlaceHolder,
+  ] = useState<Array<{ label: string }>>([]);
+
+  useEffect(() => {
+    coreRefs.http!.get('/api/v1/configuration/roles').then((data) =>
+      setRoles(
+        Object.keys(data.data).map((key) => {
+          return { label: key };
+        })
+      )
+    );
+  }, []);
+
+  const queryRadios = [
+    {
+      id: QUERY_RESTRICT,
+      label: 'Restricted - accessible by users with specific OpenSearch roles',
+    },
+    {
+      id: QUERY_ALL,
+      label: 'Everyone - accessible by all users on this cluster',
+    },
+  ];
+  const accelerationRadios = [
+    {
+      id: ACCELERATION_RESTRICT,
+      label: 'Restricted - accessible by users with specific OpenSearch roles',
+    },
+    {
+      id: ACCELERATION_ALL,
+      label: 'Everyone - accessible by all users on this cluster',
+    },
+  ];
+
+  const renderViewAccessControlDetails = () => {
+    return (
+      <EuiFlexGroup>
+        <EuiFlexItem>
+          <EuiFlexGroup direction="column">
+            <EuiFlexItem grow={false}>
+              <EuiText className="overview-title">Query access</EuiText>
+              <EuiText size="s" className="overview-content">
+                {finalQueryPermissionsPlaceHolder.length
+                  ? `Restricted to ${finalQueryPermissionsPlaceHolder.map((role) => role.label)}`
+                  : '-'}
+              </EuiText>
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        </EuiFlexItem>
+        <EuiFlexItem>
+          <EuiFlexGroup direction="column">
+            <EuiFlexItem grow={false}>
+              <EuiText className="overview-title">Acceleration permissions</EuiText>
+              <EuiText size="s" className="overview-content">
+                {finalAccelerationPermissionsPlaceHolder.length
+                  ? `Restricted to ${finalAccelerationPermissionsPlaceHolder.map(
+                      (role) => role.label
+                    )}`
+                  : '-'}
+              </EuiText>
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    );
+  };
+
+  const renderEditAccessControlDetails = () => {
+    return (
+      <EuiFlexGroup direction="column">
+        <QueryPermissionsFlexItem
+          roles={roles}
+          selectedRoles={selectedQueryPermissionRoles}
+          setSelectedRoles={setSelectedQueryPermissionRoles}
+          selectedRadio={queryPermissionRadioSelected}
+          setSelectedRadio={setQueryRadioIdSelected}
+          radios={queryRadios}
+        />
+        <AccelerationPermissionsFlexItem
+          roles={roles}
+          selectedRoles={selectedAccelerationPermissionRoles}
+          setSelectedRoles={setSelectedAccelerationPermissionRoles}
+          selectedRadio={accelerationPermissionRadioSelected}
+          setSelectedRadio={setAccelerationRadioIdSelected}
+          radios={accelerationRadios}
+        />
+      </EuiFlexGroup>
+    );
+  };
+
+  const saveChanges = () => {
+    setFinalAccelerationPermissionsPlaceHolder(selectedAccelerationPermissionRoles);
+    setFinalQueryPermissionsPlaceHolder(selectedQueryPermissionRoles);
+    setMode('view');
+  };
+
+  return (
+    <>
+      <EuiSpacer />
+      <AccessControlCallout />
+      <EuiSpacer />
+      <EuiPanel>
+        <EuiFlexGroup direction="row">
+          <EuiFlexItem>
+            <EuiText size="m">
+              <h2 className="panel-title">Access Control</h2>
+              Control which OpenSearch users have access to this data source.
+            </EuiText>
+          </EuiFlexItem>
+
+          <EuiFlexItem grow={false}>
+            <EuiButton
+              data-test-subj="createButton"
+              onClick={
+                mode === 'view'
+                  ? () => {
+                      setMode('edit');
+                    }
+                  : () => {
+                      setMode('view');
+                    }
+              }
+              fill={mode === 'view' ? true : false}
+            >
+              {mode === 'view' ? 'Edit' : 'Cancel'}
+            </EuiButton>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+        <EuiHorizontalRule />
+        {mode === 'view' ? renderViewAccessControlDetails() : renderEditAccessControlDetails()}
+      </EuiPanel>
+      <EuiSpacer />
+      {mode === 'edit' ? (
+        <EuiBottomBar affordForDisplacement={false}>
+          <EuiFlexGroup justifyContent="flexEnd">
+            <EuiFlexItem grow={false}>
+              <EuiButtonEmpty
+                onClick={() => {
+                  setMode('view');
+                }}
+                color="ghost"
+                size="s"
+                iconType="cross"
+              >
+                Discard change(s)
+              </EuiButtonEmpty>
+            </EuiFlexItem>
+            <EuiFlexItem grow={false}>
+              <EuiButton onClick={saveChanges} size="s" iconType="check" fill>
+                Save
+              </EuiButton>
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        </EuiBottomBar>
+      ) : null}
+    </>
+  );
+};

public/components/data_connections/components/datasource.tsx

@@ -18,10 +18,11 @@ import {
   EuiIcon,
   EuiCard,
   EuiTab,
-  EuiTabs,
+  EuiTabbedContent,
 } from '@elastic/eui';
 import React, { useEffect, useState } from 'react';
 import { DATASOURCES_BASE } from '../../../../common/constants/shared';
+import { AccessControlTab } from './access_control_tab';
 
 interface DatasourceDetails {
   allowedRoles: string[];
@@ -52,16 +53,19 @@ export const DataSource = (props: any) => {
       id: 'data',
       name: 'Data',
       disabled: false,
+      content: <></>,
     },
     {
       id: 'access_control',
       name: 'Access control',
       disabled: false,
+      content: <AccessControlTab />,
     },
     {
       id: 'connection_configuration',
       name: 'Connection configuration',
       disabled: false,
+      content: <></>,
     },
   ];
 
@@ -169,7 +173,7 @@ export const DataSource = (props: any) => {
             </EuiFlexItem>
           </EuiFlexGroup>
         </EuiAccordion>
-        <EuiTabs>{renderTabs()}</EuiTabs>
+        <EuiTabbedContent tabs={tabs} initialSelectedTab={tabs[0]} autoFocus="selected" />
 
         <EuiSpacer />
       </EuiPageBody>

public/components/data_connections/components/datasources_header.tsx

@@ -28,7 +28,7 @@ export const DataConnectionsHeader = () => {
       <EuiSpacer size="s" />
       <EuiText size="s" color="subdued">
         Connect and manage compatible OpenSearch Dashboard data sources and compute.{' '}
-        <EuiLink external={true} href={OPENSEARCH_DOCUMENTATION_URL} target="blank">
+        <EuiLink external={true} href={OPENSEARCH_DOCUMENTATION_URL} target="_blank">
           Learn more
         </EuiLink>
       </EuiText>