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

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

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 ?? '' : ''}
  />
  ),
  },