Fix access control tab fetching for remote cluster (#7456)

Signed-off-by: Ryan Liang <jiallian@amazon.com>

Author: RyanL1997

src/plugins/data_source_management/public/components/direct_query_data_sources_components/connection_detail/access_control_tab.tsx

@@ -25,6 +25,7 @@ interface AccessControlTabProps {
   connector: string;
   properties: unknown;
   allowedRoles: string[];
+  dataSourceMDSId: string;
 }
 
 export const AccessControlTab = (props: AccessControlTabProps) => {
@@ -34,17 +35,17 @@ export const AccessControlTab = (props: AccessControlTabProps) => {
   const { http } = useOpenSearchDashboards<DataSourceManagementContext>().services;
 
   useEffect(() => {
-    http!
-      .get(SECURITY_ROLES)
-      .then((data) =>
+    http
+      .get(SECURITY_ROLES, { query: { dataSourceId: props.dataSourceMDSId } })
+      .then((data) => {
         setRoles(
           Object.keys(data.data).map((key) => {
             return { label: key };
           })
-        )
-      )
+        );
+      })
       .catch((err) => setHasSecurityAccess(false));
-  }, [http]);
+  }, [http, props.dataSourceMDSId]);
 
   const [selectedQueryPermissionRoles, setSelectedQueryPermissionRoles] = useState<Role[]>(
     props.allowedRoles.map((role) => {

src/plugins/data_source_management/public/components/direct_query_data_sources_components/connection_detail/direct_query_connection_detail.tsx

@@ -365,6 +365,7 @@ export const DirectQueryDataConnectionDetail: React.FC<DirectQueryDataConnection
           properties={datasourceDetails.properties}
           allowedRoles={datasourceDetails.allowedRoles}
           key={JSON.stringify(datasourceDetails.allowedRoles)}
+          dataSourceMDSId={featureFlagStatus ? dataSourceMDSId ?? '' : ''}
         />
       ),
     },