[Backport 2.x] Allow patch on allowedRoles

common/constants/shared.ts

@@ -15,6 +15,8 @@ export const OBSERVABILITY_BASE = '/api/observability';
 export const INTEGRATIONS_BASE = '/api/integrations';
 export const JOBS_BASE = '/query/jobs';
 export const DATACONNECTIONS_BASE = '/api/dataconnections';
+export const EDIT = '/edit';
+export const SECURITY_ROLES = '/api/v1/configuration/roles';
 export const EVENT_ANALYTICS = '/event_analytics';
 export const SAVED_OBJECTS = '/saved_objects';
 export const SAVED_QUERY = '/query';

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

@@ -297,6 +297,25 @@ exports[`Data Connection Page test Renders Prometheus data connection page with
                   Control which OpenSearch users have access to this data source.
                 </div>
               </div>
+              <div
+                class="euiFlexItem euiFlexItem--flexGrowZero"
+              >
+                <button
+                  class="euiButton euiButton--primary euiButton--fill"
+                  data-test-subj="createButton"
+                  type="button"
+                >
+                  <span
+                    class="euiButtonContent euiButton__content"
+                  >
+                    <span
+                      class="euiButton__text"
+                    >
+                      Edit
+                    </span>
+                  </span>
+                </button>
+              </div>
             </div>
             <hr
               class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginLarge"
@@ -763,6 +782,25 @@ exports[`Data Connection Page test Renders S3 data connection page with data 1`]
                   Control which OpenSearch users have access to this data source.
                 </div>
               </div>
+              <div
+                class="euiFlexItem euiFlexItem--flexGrowZero"
+              >
+                <button
+                  class="euiButton euiButton--primary euiButton--fill"
+                  data-test-subj="createButton"
+                  type="button"
+                >
+                  <span
+                    class="euiButtonContent euiButton__content"
+                  >
+                    <span
+                      class="euiButton__text"
+                    >
+                      Edit
+                    </span>
+                  </span>
+                </button>
+              </div>
             </div>
             <hr
               class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginLarge"

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

@@ -3,11 +3,22 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiText, EuiHorizontalRule } from '@elastic/eui';
-import React, { useState } from 'react';
+import {
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiSpacer,
+  EuiText,
+  EuiHorizontalRule,
+  EuiButton,
+} from '@elastic/eui';
+import React, { useEffect, useState } from 'react';
 import { EuiPanel } from '@elastic/eui';
 import { ConnectionManagementCallout } from './connection_management_callout';
 import { Role } from '../../../../../common/types/data_connections';
+import { coreRefs } from '../../../../../public/framework/core_refs';
+import { QueryPermissionsConfiguration } from '../new/query_permissions';
+import { DATACONNECTIONS_BASE, EDIT, SECURITY_ROLES } from '../../../../../common/constants/shared';
+import { SaveOrCancel } from '../save_or_cancel';
 
 interface AccessControlTabProps {
   dataConnection: string;
@@ -17,6 +28,24 @@ interface AccessControlTabProps {
 }
 
 export const AccessControlTab = (props: AccessControlTabProps) => {
+  const [mode, setMode] = useState<'view' | 'edit'>('view');
+  const [roles, setRoles] = useState<Role[]>([]);
+  const [hasSecurityAccess, setHasSecurityAccess] = useState(true);
+  const { http } = coreRefs;
+
+  useEffect(() => {
+    http!
+      .get(SECURITY_ROLES)
+      .then((data) =>
+        setRoles(
+          Object.keys(data.data).map((key) => {
+            return { label: key };
+          })
+        )
+      )
+      .catch((err) => setHasSecurityAccess(false));
+  }, []);
+
   const [selectedQueryPermissionRoles, setSelectedQueryPermissionRoles] = useState<Role[]>(
     props.allowedRoles.map((role) => {
       return { label: role };
@@ -44,6 +73,30 @@ export const AccessControlTab = (props: AccessControlTabProps) => {
     );
   };
 
+  const EditAccessControlDetails = () => {
+    return (
+      <EuiFlexGroup direction="column">
+        <QueryPermissionsConfiguration
+          roles={roles}
+          selectedRoles={selectedQueryPermissionRoles}
+          setSelectedRoles={setSelectedQueryPermissionRoles}
+          layout={'vertical'}
+          hasSecurityAccess={hasSecurityAccess}
+        />
+      </EuiFlexGroup>
+    );
+  };
+
+  const saveChanges = () => {
+    http!.post(`${DATACONNECTIONS_BASE}${EDIT}`, {
+      body: JSON.stringify({
+        name: props.dataConnection,
+        allowedRoles: selectedQueryPermissionRoles.map((role) => role.label),
+      }),
+    });
+    setMode('view');
+  };
+
   const AccessControlHeader = () => {
     return (
       <EuiFlexGroup direction="row">
@@ -53,6 +106,15 @@ export const AccessControlTab = (props: AccessControlTabProps) => {
             Control which OpenSearch users have access to this data source.
           </EuiText>
         </EuiFlexItem>
+        <EuiFlexItem grow={false}>
+          <EuiButton
+            data-test-subj="createButton"
+            onClick={() => setMode(mode === 'view' ? 'edit' : 'view')}
+            fill={mode === 'view' ? true : false}
+          >
+            {mode === 'view' ? 'Edit' : 'Cancel'}
+          </EuiButton>
+        </EuiFlexItem>
       </EuiFlexGroup>
     );
   };
@@ -65,9 +127,17 @@ export const AccessControlTab = (props: AccessControlTabProps) => {
       <EuiPanel>
         <AccessControlHeader />
         <EuiHorizontalRule />
-        <AccessControlDetails />
+        {mode === 'view' ? <AccessControlDetails /> : <EditAccessControlDetails />}
       </EuiPanel>
       <EuiSpacer />
+      {mode === 'edit' && (
+        <SaveOrCancel
+          onCancel={() => {
+            setMode('view');
+          }}
+          onSave={saveChanges}
+        />
+      )}
       <EuiSpacer />
     </>
   );

public/components/datasources/components/new/configure_datasource.tsx

@@ -18,7 +18,7 @@ import {
 import React, { useCallback, useEffect, useState } from 'react';
 import { ConfigureS3Datasource } from './configure_s3_datasource';
 import { coreRefs } from '../../../../../public/framework/core_refs';
-import { DATACONNECTIONS_BASE } from '../../../../../common/constants/shared';
+import { DATACONNECTIONS_BASE, SECURITY_ROLES } from '../../../../../common/constants/shared';
 import { ReviewS3Datasource } from './review_s3_datasource_configuration';
 import { useToast } from '../../../../../public/components/common/toast';
 import { DatasourceType, Role } from '../../../../../common/types/data_connections';
@@ -67,7 +67,7 @@ export function Configure(props: ConfigureDatasourceProps) {
 
   useEffect(() => {
     http!
-      .get('/api/v1/configuration/roles')
+      .get(SECURITY_ROLES)
       .then((data) =>
         setRoles(
           Object.keys(data.data).map((key) => {

public/components/datasources/components/new/query_permissions.tsx

@@ -82,7 +82,12 @@ export const QueryPermissionsConfiguration = (props: PermissionsConfigurationPro
           <EuiRadioGroup
             options={accessLevelOptions}
             idSelected={selectedAccessLevel}
-            onChange={(id) => setSelectedAccessLevel(id)}
+            onChange={(id) => {
+              if (id === QUERY_ALL) {
+                setSelectedRoles([]);
+              }
+              setSelectedAccessLevel(id);
+            }}
             name="query-radio-group"
             legend={{
               children: <span>Query access level</span>,

server/adaptors/ppl_plugin.ts

@@ -81,7 +81,7 @@ export const PPLPlugin = function (Client, config, components) {
       fmt: `${OPENSEARCH_DATACONNECTIONS_API.DATACONNECTION}`,
     },
     needBody: true,
-    method: 'PUT',
+    method: 'PATCH',
   });
 
   ppl.getDataConnections = ca({

server/routes/data_connections/data_connections_router.ts

@@ -9,7 +9,7 @@ import {
   IRouter,
   ResponseError,
 } from '../../../../../src/core/server';
-import { DATACONNECTIONS_BASE } from '../../../common/constants/shared';
+import { DATACONNECTIONS_BASE, EDIT } from '../../../common/constants/shared';
 
 export function registerDataConnectionsRoute(router: IRouter) {
   router.get(
@@ -70,15 +70,13 @@ export function registerDataConnectionsRoute(router: IRouter) {
     }
   );
 
-  router.put(
+  router.post(
     {
-      path: `${DATACONNECTIONS_BASE}`,
+      path: `${DATACONNECTIONS_BASE}${EDIT}`,
       validate: {
         body: schema.object({
           name: schema.string(),
-          connector: schema.string(),
           allowedRoles: schema.arrayOf(schema.string()),
-          properties: schema.any(),
         }),
       },
     },
@@ -89,9 +87,7 @@ export function registerDataConnectionsRoute(router: IRouter) {
           .callAsCurrentUser('ppl.modifyDataConnection', {
             body: {
               name: request.body.name,
-              connector: request.body.connector,
               allowedRoles: request.body.allowedRoles,
-              properties: request.body.properties,
             },
           });
         return response.ok({