Add registrable DiscoverActions to discover page

changelogs/fragments/7793.yml

@@ -0,0 +1,2 @@
+feat:
+- Add registrable DiscoverActions to discover page ([#7793](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/7793))

src/plugins/data_explorer/public/index.ts

@@ -20,3 +20,4 @@ export {
   setIndexPattern,
   setDataSet,
 } from './utils/state_management';
+export { DiscoverAction, DiscoverActionContext } from './types';

src/plugins/data_explorer/public/plugin.ts

@@ -20,6 +20,7 @@ import {
   DataExplorerPluginStart,
   DataExplorerPluginStartDependencies,
   DataExplorerServices,
+  DiscoverAction,
 } from './types';
 import { PLUGIN_ID, PLUGIN_NAME } from '../common';
 import { ViewService } from './services/view_service';
@@ -43,6 +44,7 @@ export class DataExplorerPlugin
   private appStateUpdater = new BehaviorSubject<AppUpdater>(() => ({}));
   private stopUrlTracking?: () => void;
   private currentHistory?: ScopedHistory;
+  private discoverActions: DiscoverAction[] = [];
 
   public setup(
     core: CoreSetup<DataExplorerPluginStartDependencies, DataExplorerPluginStart>,
@@ -105,6 +107,7 @@ export class DataExplorerPlugin
             ...withNotifyOnErrors(coreStart.notifications.toasts),
           }),
           viewRegistry: viewService.start(),
+          actions: this.discoverActions,
         };
 
         // Get start services as specified in opensearch_dashboards.json
@@ -124,7 +127,10 @@ export class DataExplorerPlugin
     });
 
     return {
-      ...this.viewService.setup(),
+      registerView: this.viewService.setup().registerView,
+      registerDiscoverAction: (discoverAction: DiscoverAction) => {
+        this.discoverActions.push(discoverAction);
+      },
     };
   }
 

src/plugins/data_explorer/public/types.ts

@@ -8,10 +8,12 @@ import { EmbeddableStart } from '../../embeddable/public';
 import { ExpressionsStart } from '../../expressions/public';
 import { ViewServiceStart, ViewServiceSetup } from './services/view_service';
 import { IOsdUrlStateStorage } from '../../opensearch_dashboards_utils/public';
-import { DataPublicPluginSetup, DataPublicPluginStart } from '../../data/public';
+import { DataPublicPluginSetup, DataPublicPluginStart, IndexPattern } from '../../data/public';
 import { Store } from './utils/state_management';
 
-export type DataExplorerPluginSetup = ViewServiceSetup;
+export type DataExplorerPluginSetup = ViewServiceSetup & {
+  registerDiscoverAction: (discoverAction: DiscoverAction) => void;
+};
 
 // eslint-disable-next-line @typescript-eslint/no-empty-interface
 export interface DataExplorerPluginStart {}
@@ -34,4 +36,16 @@ export interface DataExplorerServices extends CoreStart {
   data: DataPublicPluginStart;
   scopedHistory: ScopedHistory;
   osdUrlStateStorage: IOsdUrlStateStorage;
+  actions?: DiscoverAction[];
+}
+
+export interface DiscoverActionContext {
+  indexPattern: IndexPattern | undefined;
+}
+
+export interface DiscoverAction {
+  order: number;
+  name: string;
+  iconType: string;
+  onClick: (context: DiscoverActionContext) => void;
 }

src/plugins/discover/public/application/view_components/canvas/discover_actions.test.tsx

@@ -0,0 +1,45 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { DiscoverActions } from './discover_actions';
+import {
+  DiscoverAction,
+  DiscoverActionContext,
+} from '../../../../../../plugins/data_explorer/public';
+
+jest.mock('@elastic/eui', () => ({
+  EuiButtonEmpty: jest.requireActual('@elastic/eui').EuiButtonEmpty,
+}));
+
+const mockActions: DiscoverAction[] = [
+  { order: 2, iconType: 'icon1', name: 'Action 2', onClick: jest.fn() },
+  { order: 1, iconType: 'icon2', name: 'Action 1', onClick: jest.fn() },
+  { order: 3, iconType: 'icon3', name: 'Action 3', onClick: jest.fn() },
+];
+
+const mockContext: DiscoverActionContext = {
+  indexPattern: undefined,
+};
+
+describe('DiscoverActions Component', () => {
+  it('renders all actions in the correct order', () => {
+    render(<DiscoverActions actions={mockActions} context={mockContext} />);
+
+    const buttons = screen.getAllByRole('button');
+    expect(buttons[0]).toHaveTextContent('Action 1');
+    expect(buttons[1]).toHaveTextContent('Action 2');
+    expect(buttons[2]).toHaveTextContent('Action 3');
+  });
+
+  it('calls the action onClick function with the correct context', () => {
+    render(<DiscoverActions actions={mockActions} context={mockContext} />);
+
+    const buttons = screen.getAllByRole('button');
+    fireEvent.click(buttons[0]);
+    expect(mockActions[0].onClick).toHaveBeenCalledWith(mockContext);
+  });
+});

src/plugins/discover/public/application/view_components/canvas/discover_actions.tsx

@@ -0,0 +1,41 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { EuiButtonEmpty } from '@elastic/eui';
+import {
+  DiscoverAction,
+  DiscoverActionContext,
+} from '../../../../../../plugins/data_explorer/public';
+
+interface DiscoverActionsProps {
+  actions: DiscoverAction[];
+  context: DiscoverActionContext;
+}
+
+const DiscoverActions: React.FC<DiscoverActionsProps> = ({ actions, context }) => {
+  actions.sort((a, b) => {
+    return a.order - b.order;
+  });
+
+  return (
+    <div className="dscCanvas_actions">
+      {actions.map((action) => (
+        <EuiButtonEmpty
+          key={action.order}
+          size="s"
+          iconType={action.iconType}
+          onClick={() => {
+            action.onClick(context);
+          }}
+        >
+          {action.name}
+        </EuiButtonEmpty>
+      ))}
+    </div>
+  );
+};
+
+export { DiscoverActions };

src/plugins/discover/public/application/view_components/canvas/discover_canvas.scss

@@ -12,6 +12,12 @@
     position: relative;
   }
 
+  &_actions {
+    position: absolute;
+    top: 0;
+    right: 30px;
+  }
+
   &_options {
     position: absolute;
     top: 0;

src/plugins/discover/public/application/view_components/canvas/index.tsx

@@ -13,7 +13,11 @@ import {
   EuiCompressedSwitch,
 } from '@elastic/eui';
 import { TopNav } from './top_nav';
-import { ViewProps } from '../../../../../data_explorer/public';
+import {
+  DataExplorerServices,
+  DiscoverAction,
+  ViewProps,
+} from '../../../../../data_explorer/public';
 import { DiscoverTable } from './discover_table';
 import { DiscoverChartContainer } from './discover_chart_container';
 import { useDiscoverContext } from '../context';
@@ -35,6 +39,7 @@ import { buildColumns } from '../../utils/columns';
 import './discover_canvas.scss';
 import { getNewDiscoverSetting, setNewDiscoverSetting } from '../../components/utils/local_storage';
 import { HeaderVariant } from '../../../../../../core/public';
+import { DiscoverActions } from './discover_actions';
 
 // eslint-disable-next-line import/no-default-export
 export default function DiscoverCanvas({ setHeaderActionMenu, history, optionalRef }: ViewProps) {
@@ -47,6 +52,10 @@ export default function DiscoverCanvas({ setHeaderActionMenu, history, optionalR
       chrome: { setHeaderVariant },
     },
   } = useOpenSearchDashboards<DiscoverViewServices>();
+  const {
+    services: { actions },
+  } = useOpenSearchDashboards<DataExplorerServices>();
+
   const { columns } = useSelector((state) => {
     const stateColumns = state.discover.columns;
 
@@ -166,6 +175,7 @@ export default function DiscoverCanvas({ setHeaderActionMenu, history, optionalR
         <EuiPanel hasShadow={false} paddingSize="none" className="dscCanvas_results">
           <MemoizedDiscoverChartContainer {...fetchState} />
           <MemoizedDiscoverTable rows={rows} scrollToTop={scrollToTop} />
+          <DiscoverActions actions={actions as DiscoverAction[]} context={{ indexPattern }} />
         </EuiPanel>
       )}
     </EuiPanel>