Adds multi-datasource support in Resource Access Management app

DarshitChanpura · DarshitChanpura · commit 5f1d21477314 · 2025-12-11T18:01:12.000-08:00
Signed-off-by: Darshit Chanpura &lt;dchanp@amazon.com&gt;
diff --git a/public/apps/resource-sharing/resource-access-management-app.tsx b/public/apps/resource-sharing/resource-access-management-app.tsx
@@ -15,27 +15,28 @@
 
 import './_index.scss';
 
-import React from 'react';
-import ReactDOM from 'react-dom';
+import React, { useContext, useState, createContext } from 'react';
+import { createRoot } from 'react-dom/client';
 import { I18nProvider } from '@osd/i18n/react';
-
-import {
-  EuiPage,
-  EuiPageBody,
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiPageHeader,
-  EuiTitle,
-  EuiText,
-  EuiSpacer,
-} from '@elastic/eui';
+import { EuiPageHeader, EuiText, EuiSpacer } from '@elastic/eui';
+import { DataSourceOption } from 'src/plugins/data_source_management/public';
 
 import { AppMountParameters, CoreStart } from '../../../../../src/core/public';
 import { DataSourceManagementPluginSetup } from '../../../../../src/plugins/data_source_management/public';
 import { SecurityPluginStartDependencies, ClientConfigType } from '../../types';
 
 import { ResourceSharingPanel } from './resource-sharing-panel';
 import { buildResourceApi } from '../../utils/resource-sharing-utils';
+import { SecurityPluginTopNavMenu } from '../configuration/top-nav-menu';
+import { PageHeader } from '../configuration/header/header-components';
+import { getDataSourceFromUrl, LocalCluster } from '../../utils/datasource-utils';
+
+export interface DataSourceContextType {
+  dataSource: DataSourceOption;
+  setDataSource: React.Dispatch<React.SetStateAction<DataSourceOption>>;
+}
+
+export const DataSourceContext = createContext<DataSourceContextType | null>(null);
 
 interface Props {
   coreStart: CoreStart;
@@ -46,44 +47,57 @@ interface Props {
   dataSourceManagement?: DataSourceManagementPluginSetup;
 }
 
-const ResourceAccessManagementApp: React.FC<Props> = ({ coreStart, depsStart }) => {
+const ResourceAccessManagementApp: React.FC<Props> = (props) => {
   const {
     http,
     notifications: { toasts },
-  } = coreStart;
-  const TopNav = depsStart?.navigation?.ui?.TopNavMenu;
+  } = props.coreStart;
+  const { dataSource, setDataSource } = useContext(DataSourceContext)!;
+
+  const api = React.useMemo(() => buildResourceApi(http, dataSource?.id) as any, [
+    http,
+    dataSource?.id,
+  ]);
 
   return (
-    <>
-      {TopNav ? (
-        <TopNav appName="resource-access" showSearchBar={false} useDefaultBehaviors={true} />
-      ) : null}
-      <EuiPage restrictWidth="2000px">
-        <EuiPageBody component="main">
-          <EuiPageHeader>
-            <EuiFlexGroup direction="column" gutterSize="xs">
-              <EuiFlexItem grow={false}>
-                <EuiTitle size="l">
-                  <h1>Resource Access Management</h1>
-                </EuiTitle>
-              </EuiFlexItem>
-              <EuiFlexItem grow={false}>
-                <EuiText color="subdued" size="s">
-                  Manage sharing for detectors, forecasters, and more.
-                </EuiText>
-              </EuiFlexItem>
-            </EuiFlexGroup>
-          </EuiPageHeader>
-
-          <EuiSpacer size="m" />
-
-          <ResourceSharingPanel api={buildResourceApi(http)} toasts={toasts} />
-        </EuiPageBody>
-      </EuiPage>
-    </>
+    <div className="panel-restrict-width">
+      <SecurityPluginTopNavMenu
+        {...(props as any)}
+        dataSourcePickerReadOnly={false}
+        setDataSource={setDataSource}
+        selectedDataSource={dataSource}
+      />
+      <PageHeader
+        coreStart={props.coreStart}
+        navigation={props.depsStart.navigation}
+        fallBackComponent={
+          <>
+            <EuiPageHeader>
+              <EuiText size="s">
+                <h1>Resource Access Management</h1>
+              </EuiText>
+            </EuiPageHeader>
+            <EuiSpacer />
+          </>
+        }
+      />
+      <ResourceSharingPanel api={api} toasts={toasts} />
+    </div>
   );
 };
 
+function ResourceAccessManagementAppWithContext(props: Props) {
+  const dataSourceEnabled = !!props.depsStart.dataSource?.dataSourceEnabled;
+  const dataSourceFromUrl = dataSourceEnabled ? getDataSourceFromUrl() : LocalCluster;
+  const [dataSource, setDataSource] = useState<DataSourceOption>(dataSourceFromUrl);
+
+  return (
+    <DataSourceContext.Provider value={{ dataSource, setDataSource }}>
+      <ResourceAccessManagementApp {...props} />
+    </DataSourceContext.Provider>
+  );
+}
+
 export function renderApp(
   coreStart: CoreStart,
   depsStart: SecurityPluginStartDependencies,
@@ -92,21 +106,17 @@ export function renderApp(
   redirect: string,
   dataSourceManagement?: DataSourceManagementPluginSetup
 ) {
-  const deps: Props = {
-    coreStart,
-    depsStart,
-    params,
-    config,
-    dataSourceManagement,
-    redirect,
-  };
-
-  ReactDOM.render(
+  const deps = { coreStart, depsStart, params, config, redirect, dataSourceManagement };
+
+  const element = (
+    // @ts-ignore
     <I18nProvider>
-      <ResourceAccessManagementApp {...deps} />
-    </I18nProvider>,
-    params.element
+      <ResourceAccessManagementAppWithContext {...deps} />
+    </I18nProvider>
   );
 
-  return () => ReactDOM.unmountComponentAtNode(params.element);
+  const root = createRoot(params.element);
+  root.render(element);
+
+  return () => root.unmount();
 }
diff --git a/public/apps/resource-sharing/test/resource-access-management-app.test.tsx b/public/apps/resource-sharing/test/resource-access-management-app.test.tsx
@@ -18,7 +18,6 @@
  */
 import '@testing-library/jest-dom';
 import { renderApp } from '../resource-access-management-app';
-import React from 'react';
 
 function mockCoreStart() {
   return {
@@ -27,49 +26,56 @@ function mockCoreStart() {
   } as any;
 }
 
-function mockDepsStart(withTopNav = true) {
-  const TopNavMenu = ({ appName }: any) => <div data-test-subj="top-nav">{appName}</div>;
-  return withTopNav
-    ? ({ navigation: { ui: { TopNavMenu } } } as any)
-    : ({ navigation: { ui: {} } } as any);
+function mockDepsStart(withDataSource = true) {
+  return {
+    navigation: { ui: {} } as any,
+    dataSource: withDataSource ? { dataSourceEnabled: true } : undefined,
+  } as any;
 }
 
 describe('ResourceAccessManagementApp', () => {
-  it('renders TopNav when present and the page title', () => {
+  it('renders the page title and data source picker when data source is enabled', () => {
     const elem = document.createElement('div');
-    document.body.appendChild(elem); // because we render a detached div, we need to attach it to the body for the test to work properly
-
-    // Render the app into the detached div
+    document.body.appendChild(elem);
 
     const unmount = renderApp(
       mockCoreStart(),
       mockDepsStart(true),
       { element: elem } as any,
       {} as any,
-      ''
+      '',
+      {} as any
     );
 
     // Rendered into elem, so query inside it
-    expect(elem.querySelector('[data-test-subj="top-nav"]')).toBeInTheDocument();
     expect(elem.textContent).toContain('Resource Access Management');
 
+    // Check for data source picker (SecurityPluginTopNavMenu renders when dataSourceEnabled is true)
+    const dataSourcePicker = elem.querySelector('[class*="dataSourceMenu"]');
+    expect(dataSourcePicker).toBeTruthy();
+
     unmount();
   });
 
-  it('omits TopNav when not provided', () => {
+  it('renders without data source picker when data source is disabled', () => {
     const elem = document.createElement('div');
+    document.body.appendChild(elem);
 
     const unmount = renderApp(
       mockCoreStart(),
       mockDepsStart(false),
       { element: elem } as any,
       {} as any,
-      ''
+      '',
+      {} as any
     );
 
-    expect(elem.querySelector('[data-test-subj="top-nav"]')).toBeNull();
     expect(elem.textContent).toContain('Resource Access Management');
 
+    // Check that data source picker is not rendered when dataSourceEnabled is false
+    const dataSourcePicker = elem.querySelector('[class*="dataSourceMenu"]');
+    expect(dataSourcePicker).toBeFalsy();
+
     unmount();
   });
 });
diff --git a/public/apps/resource-sharing/test/resource-sharing-panel.test.tsx b/public/apps/resource-sharing/test/resource-sharing-panel.test.tsx
@@ -24,6 +24,7 @@ import { ResourceSharingPanel } from '../resource-sharing-panel';
 import { I18nProvider } from '@osd/i18n/react';
 
 function renderWithI18n(ui: React.ReactElement) {
+  // @ts-ignore
   return render(<I18nProvider>{ui}</I18nProvider>);
 }
 
@@ -257,6 +258,35 @@ describe('ResourceSharingPanel', () => {
     expect(toasts.addSuccess).toHaveBeenCalledWith('Access updated.');
   });
 
+  it('passes dataSourceId to API calls when provided', async () => {
+    const api = {
+      listTypes: jest.fn().mockResolvedValue({ types: typesPayload }),
+      listSharingRecords: jest.fn().mockResolvedValue({ resources: rowsPayload }),
+      getSharingRecord: jest.fn(),
+      share: jest.fn(),
+      update: jest.fn(),
+    };
+
+    renderWithI18n(<ResourceSharingPanel api={api as any} toasts={toasts as any} />);
+
+    // listTypes should be called on mount
+    await waitFor(() => {
+      expect(api.listTypes).toHaveBeenCalledTimes(1);
+    });
+
+    // Select a type to trigger listSharingRecords
+    const selectTrigger = await screen.findByText('Select a type…');
+    await userEvent.click(selectTrigger);
+    await userEvent.click(await screen.findByText('Anomaly Detector'));
+
+    await waitFor(() => {
+      expect(api.listSharingRecords).toHaveBeenCalledWith('anomaly-detector');
+    });
+
+    // Verify the API was called (dataSourceId is passed internally via buildResourceApi)
+    expect(api.listSharingRecords).toHaveBeenCalled();
+  });
+
   it('renders friendly error lines when backend returns structured errors', async () => {
     const api = {
       listTypes: jest.fn().mockResolvedValue({ types: typesPayload }),
diff --git a/public/utils/resource-sharing-utils.tsx b/public/utils/resource-sharing-utils.tsx
@@ -14,14 +14,28 @@
  */
 
 import { CoreStart } from '../../../../src/core/public';
+import {
+  createRequestContextWithDataSourceId,
+  createLocalClusterRequestContext,
+} from '../apps/configuration/utils/request-utils';
 
-export const buildResourceApi = (http: CoreStart['http']) => ({
-  listTypes: () => http.get('/api/resource/types'),
-  listSharingRecords: (type: string) =>
-    http.get('/api/resource/list', { query: { resourceType: type } }),
-  getSharingRecord: (id: string, type: string) =>
-    http.get('/api/resource/view', { query: { resourceId: id, resourceType: type } }),
-  share: (payload: any) => http.put('/api/resource/share', { body: JSON.stringify(payload) }),
-  update: (payload: any) =>
-    http.post('/api/resource/update_sharing', { body: JSON.stringify(payload) }),
-});
+export const buildResourceApi = (http: CoreStart['http'], dataSourceId?: string) => {
+  const context = dataSourceId
+    ? createRequestContextWithDataSourceId(dataSourceId)
+    : createLocalClusterRequestContext();
+
+  return {
+    listTypes: () => context.httpGet({ http, url: '/api/resource/types' }),
+    listSharingRecords: (type: string) =>
+      context.httpGet({ http, url: '/api/resource/list', body: { resourceType: type } }),
+    getSharingRecord: (id: string, type: string) =>
+      context.httpGet({
+        http,
+        url: '/api/resource/view',
+        body: { resourceId: id, resourceType: type },
+      }),
+    share: (payload: any) => context.httpPut({ http, url: '/api/resource/share', body: payload }),
+    update: (payload: any) =>
+      context.httpPost({ http, url: '/api/resource/update_sharing', body: payload }),
+  };
+};
diff --git a/server/backend/opensearch_security_plugin.ts b/server/backend/opensearch_security_plugin.ts
@@ -84,4 +84,66 @@ export default function (Client: any, config: any, components: any) {
       fmt: '/_plugins/_security/api/tenancy/config',
     },
   });
+
+  /**
+   * Gets registered resource types.
+   */
+  Client.prototype.opensearch_security.prototype.listResourceTypes = ca({
+    url: {
+      fmt: '/_plugins/_security/api/resource/types',
+    },
+  });
+
+  /**
+   * Gets accessible shared resources filtered by resourceType.
+   */
+  Client.prototype.opensearch_security.prototype.listResourceSharing = ca({
+    url: {
+      fmt: '/_plugins/_security/api/resource/list',
+      req: {
+        resource_type: {
+          type: 'query',
+        },
+      },
+    },
+  });
+
+  /**
+   * Gets sharing info for a specific resource.
+   */
+  Client.prototype.opensearch_security.prototype.getResourceSharing = ca({
+    url: {
+      fmt: '/_plugins/_security/api/resource/share',
+      req: {
+        resource_id: {
+          type: 'query',
+        },
+        resource_type: {
+          type: 'query',
+        },
+      },
+    },
+  });
+
+  /**
+   * Shares a resource.
+   */
+  Client.prototype.opensearch_security.prototype.shareResource = ca({
+    method: 'PUT',
+    needBody: true,
+    url: {
+      fmt: '/_plugins/_security/api/resource/share',
+    },
+  });
+
+  /**
+   * Updates resource sharing.
+   */
+  Client.prototype.opensearch_security.prototype.updateResourceSharing = ca({
+    method: 'POST',
+    needBody: true,
+    url: {
+      fmt: '/_plugins/_security/api/resource/share',
+    },
+  });
 }
diff --git a/server/plugin.ts b/server/plugin.ts
@@ -146,7 +146,7 @@ export class SecurityPlugin implements Plugin<SecurityPluginSetup, SecurityPlugi
     // Register server side APIs
     defineRoutes(router, dataSourceEnabled);
     defineAuthTypeRoutes(router, config);
-    defineResourceAccessManagementRoutes(router);
+    defineResourceAccessManagementRoutes(router, dataSourceEnabled);
 
     // set up multi-tenant routes
     if (config.multitenancy?.enabled) {
diff --git a/server/routes/resource_access_management_routes.ts b/server/routes/resource_access_management_routes.ts
diff --git a/test/cypress/e2e/multi-datasources/multi_datasources_enabled.spec.js b/test/cypress/e2e/multi-datasources/multi_datasources_enabled.spec.js
diff --git a/test/cypress/e2e/resource-sharing/resource_access_management.spec.ts b/test/cypress/e2e/resource-sharing/resource_access_management.spec.ts
