[explore]Add resultsActionBar slot to explore plugin (#10842)

* Add resultsActionBar slot to explore plugin

Signed-off-by: Lin Wang <[email protected]>

* Changeset file for PR #10842 created/updated

---------

Signed-off-by: Lin Wang <[email protected]>
Co-authored-by: opensearch-changeset-bot[bot] <154024398+opensearch-changeset-bot[bot]@users.noreply.github.com>

Author: wanglam

changelogs/fragments/10842.yml

@@ -0,0 +1,2 @@
+feat:
+- Add resultsActionBar slot to explore plugin ([#10842](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/10842))

src/plugins/explore/public/build_services.ts

@@ -16,6 +16,7 @@ import { TabRegistryService } from './services/tab_registry/tab_registry_service
 import { VisualizationRegistryService } from './services/visualization_registry_service';
 import { AppStore } from './application/utils/state_management/store';
 import { QueryPanelActionsRegistryService } from './services/query_panel_actions_registry';
+import { SlotRegistryService } from './services/slot_registry';
 
 export function buildServices(
   core: CoreStart,
@@ -24,7 +25,8 @@ export function buildServices(
   tabRegistry: TabRegistryService,
   visualizationRegistry: VisualizationRegistryService,
   queryPanelActionsRegistry: QueryPanelActionsRegistryService,
-  isDatasetManagementEnabled: boolean
+  isDatasetManagementEnabled: boolean,
+  slotRegistry: SlotRegistryService
 ): ExploreServices {
   const config = context.config.get<ConfigSchema>();
   const supportedTypes = config.supportedTypes;
@@ -91,6 +93,7 @@ export function buildServices(
     tabRegistry,
     visualizationRegistry,
     queryPanelActionsRegistry,
+    slotRegistry,
     expressions: plugins.expressions,
 
     dashboard: plugins.dashboard,

src/plugins/explore/public/components/tabs/action_bar/action_bar.test.tsx

@@ -45,6 +45,11 @@ jest.mock('../../../../../opensearch_dashboards_react/public', () => ({
           },
         },
       },
+      slotRegistry: {
+        getSortedItems$: () => ({
+          subscribe: jest.fn(() => ({ unsubscribe: jest.fn() })),
+        }),
+      },
     },
   }),
   withOpenSearchDashboards: jest.fn((component: any) => component),

src/plugins/explore/public/components/tabs/action_bar/action_bar.tsx

@@ -2,7 +2,8 @@
  * Copyright OpenSearch Contributors
  * SPDX-License-Identifier: Apache-2.0
  */
-import React, { memo } from 'react';
+import React, { memo, useMemo } from 'react';
+import { useObservable } from 'react-use';
 import { DiscoverResultsActionBar } from './results_action_bar/results_action_bar';
 import { ExploreServices } from '../../../types';
 import { useOpenSearchDashboards } from '../../../../../opensearch_dashboards_react/public';
@@ -22,9 +23,14 @@ const ActionBarComponent = () => {
   const { dataset } = useDatasetContext();
   const { results } = useTabResults();
   const { results: histogramResults } = useHistogramResults();
-  const { core, inspector, inspectorAdapters } = services;
+  const { core, inspector, inspectorAdapters, slotRegistry } = services;
   const savedSearch = useSelector(selectSavedSearch);
 
+  const sortedSlotItems$ = useMemo(() => {
+    return slotRegistry.getSortedItems$('resultsActionBar');
+  }, [slotRegistry]);
+  const slotItems = useObservable(sortedSlotItems$, []);
+
   const openInspector = () => {
     if (inspector) {
       inspector.open(inspectorAdapters, {
@@ -50,6 +56,7 @@ const ActionBarComponent = () => {
       elapsedMs={elapsedMs}
       dataset={dataset}
       inspectionHanlder={openInspector}
+      extraActions={slotItems}
     />
   );
 };

src/plugins/explore/public/components/tabs/action_bar/results_action_bar/results_action_bar.tsx

@@ -18,6 +18,7 @@ import { SaveAndAddButtonWithModal } from '../../../visualizations/add_to_dashbo
 import { selectActiveTabId } from '../../../../application/utils/state_management/selectors';
 import { PatternsSettingsPopoverButton } from '../patterns_settings/patterns_settings_popover_button';
 import { getVisualizationBuilder } from '../../../visualizations/visualization_builder';
+import { SlotItemsForType } from '../../../../services/slot_registry';
 
 export interface DiscoverResultsActionBarProps {
   hits?: number;
@@ -27,6 +28,7 @@ export interface DiscoverResultsActionBarProps {
   elapsedMs?: number;
   dataset?: Dataset;
   inspectionHanlder?: () => void;
+  extraActions?: Array<SlotItemsForType<'resultsActionBar'>>;
 }
 
 export const DiscoverResultsActionBar = ({
@@ -37,6 +39,7 @@ export const DiscoverResultsActionBar = ({
   elapsedMs,
   dataset,
   inspectionHanlder,
+  extraActions,
 }: DiscoverResultsActionBarProps) => {
   const currentTab = useSelector(selectActiveTabId);
   const shouldShowAddToDashboardButton = currentTab !== 'explore_patterns_tab';
@@ -127,6 +130,11 @@ export const DiscoverResultsActionBar = ({
                     <SaveAndAddButtonWithModal dataset={dataset} />
                   </EuiFlexItem>
                 )}
+                {extraActions?.map((item) => (
+                  <EuiFlexItem grow={false} key={item.id}>
+                    {item.render()}
+                  </EuiFlexItem>
+                ))}
               </EuiFlexGroup>
             ) : null}
           </EuiFlexItem>

src/plugins/explore/public/plugin.ts

@@ -70,6 +70,7 @@ import { createAbortDataQueryAction } from './application/utils/state_management
 import { ABORT_DATA_QUERY_TRIGGER } from '../../ui_actions/public';
 import { abortAllActiveQueries } from './application/utils/state_management/actions/query_actions';
 import { setServices } from './services/services';
+import { SlotRegistryService } from './services/slot_registry';
 
 // Log Actions
 import { logActionRegistry } from './services/log_action_registry';
@@ -103,6 +104,7 @@ export class ExplorePlugin
   private tabRegistry: TabRegistryService = new TabRegistryService();
   private visualizationRegistryService = new VisualizationRegistryService();
   private queryPanelActionsRegistryService = new QueryPanelActionsRegistryService();
+  private slotRegistryService = new SlotRegistryService();
 
   constructor(private readonly initializerContext: PluginInitializerContext) {
     this.config = initializerContext.config.get<ConfigSchema>();
@@ -315,7 +317,8 @@ export class ExplorePlugin
           this.tabRegistry,
           this.visualizationRegistryService,
           this.queryPanelActionsRegistryService,
-          this.isDatasetManagementEnabled
+          this.isDatasetManagementEnabled,
+          this.slotRegistryService
         );
 
         // Add osdUrlStateStorage to services (like VisBuilder and DataExplorer)
@@ -481,7 +484,8 @@ export class ExplorePlugin
         this.tabRegistry,
         this.visualizationRegistryService,
         this.queryPanelActionsRegistryService,
-        this.isDatasetManagementEnabled
+        this.isDatasetManagementEnabled,
+        this.slotRegistryService
       );
       setLegacyServices({
         ...services,
@@ -514,6 +518,7 @@ export class ExplorePlugin
       savedSearchLoader: savedExploreLoader, // For backward compatibility
       savedExploreLoader,
       visualizationRegistry: this.visualizationRegistryService.start(),
+      slotRegistry: this.slotRegistryService.start(),
     };
   }
 

src/plugins/explore/public/services/slot_registry/index.ts

@@ -0,0 +1,12 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export {
+  SlotRegistryService,
+  SlotRegistryServiceStart,
+  SlotItemConfig,
+  SlotTypeDefinitions,
+  SlotItemsForType,
+} from './slot_registry_service';

src/plugins/explore/public/services/slot_registry/slot_registry_service.test.ts

@@ -0,0 +1,161 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { SlotRegistryService, SlotItemConfig } from './slot_registry_service';
+import { take } from 'rxjs/operators';
+
+describe('SlotRegistryService', () => {
+  let service: SlotRegistryService;
+
+  beforeEach(() => {
+    service = new SlotRegistryService();
+  });
+
+  it('registers and retrieves slot items', (done) => {
+    const start = service.start();
+    const slotItems: Array<SlotItemConfig<'resultsActionBar'>> = [
+      {
+        id: 'test-action-bar-1',
+        order: 1,
+        slotType: 'resultsActionBar',
+        render: () => null as any,
+      },
+      {
+        id: 'test-action-bar-2',
+        order: 2,
+        slotType: 'resultsActionBar',
+        render: () => null as any,
+      },
+    ];
+
+    start.register(slotItems);
+
+    service
+      .getAllItems$()
+      .pipe(take(1))
+      .subscribe((items) => {
+        expect(items).toHaveLength(2);
+        expect(items[0]).toEqual(slotItems[0]);
+        expect(items[1]).toEqual(slotItems[1]);
+        done();
+      });
+  });
+
+  it('throws error when registering duplicate slot item id', () => {
+    const start = service.start();
+    const slotItem: SlotItemConfig<'resultsActionBar'> = {
+      id: 'duplicate-id',
+      order: 1,
+      slotType: 'resultsActionBar',
+      render: () => null as any,
+    };
+
+    start.register(slotItem);
+
+    expect(() => {
+      start.register(slotItem);
+    }).toThrow('Slot item with id "duplicate-id" is already registered');
+  });
+
+  it('filters and sorts items by slot type', (done) => {
+    const start = service.start();
+    const actionBarItem: SlotItemConfig<'resultsActionBar'> = {
+      id: 'test-action-bar',
+      order: 20,
+      slotType: 'resultsActionBar',
+      render: () => null as any,
+    };
+    const anotherActionBarItem: SlotItemConfig<'resultsActionBar'> = {
+      id: 'another-action-bar',
+      order: 10,
+      slotType: 'resultsActionBar',
+      render: () => null as any,
+    };
+
+    start.register([actionBarItem, anotherActionBarItem]);
+
+    service
+      .getSortedItems$('resultsActionBar')
+      .pipe(take(1))
+      .subscribe((items) => {
+        expect(items).toHaveLength(2);
+        expect(items[0].id).toBe('another-action-bar');
+        expect(items[1].id).toBe('test-action-bar');
+        done();
+      });
+  });
+
+  it('handles negative order values correctly', (done) => {
+    const start = service.start();
+    const items: Array<SlotItemConfig<'resultsActionBar'>> = [
+      {
+        id: 'item-1',
+        order: 10,
+        slotType: 'resultsActionBar',
+        render: () => null as any,
+      },
+      {
+        id: 'item-2',
+        order: -5,
+        slotType: 'resultsActionBar',
+        render: () => null as any,
+      },
+      {
+        id: 'item-3',
+        order: 0,
+        slotType: 'resultsActionBar',
+        render: () => null as any,
+      },
+    ];
+
+    start.register(items);
+
+    service
+      .getSortedItems$('resultsActionBar')
+      .pipe(take(1))
+      .subscribe((sortedItems) => {
+        expect(sortedItems).toHaveLength(3);
+        expect(sortedItems[0].id).toBe('item-2');
+        expect(sortedItems[1].id).toBe('item-3');
+        expect(sortedItems[2].id).toBe('item-1');
+        done();
+      });
+  });
+
+  it('emits updates when new items are registered', (done) => {
+    const start = service.start();
+    const emissions: Array<Array<SlotItemConfig<'resultsActionBar'>>> = [];
+
+    const subscription = service.getSortedItems$('resultsActionBar').subscribe((items) => {
+      emissions.push(items);
+
+      if (emissions.length === 3) {
+        expect(emissions[0]).toHaveLength(0);
+        expect(emissions[1]).toHaveLength(1);
+        expect(emissions[2]).toHaveLength(2);
+        subscription.unsubscribe();
+        done();
+      }
+    });
+
+    setTimeout(() => {
+      start.register({
+        id: 'item-1',
+        order: 1,
+        slotType: 'resultsActionBar',
+        render: () => null as any,
+      });
+    }, 10);
+
+    setTimeout(() => {
+      start.register({
+        id: 'item-2',
+        order: 2,
+        slotType: 'resultsActionBar',
+        render: () => null as any,
+      });
+    }, 20);
+  });
+});