[Backport 2.x] feat: provide new embeddable option to hide embeddable panel action button

changelogs/fragments/7503.yml

@@ -0,0 +1,2 @@
+feat:
+- Provide new embeddable option to hide embeddable panel action button ([#7503](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/7503))

src/plugins/embeddable/common/types.ts

@@ -48,6 +48,7 @@ export type EmbeddableInput = {
   id: string;
   lastReloadRequestTime?: number;
   hidePanelTitles?: boolean;
+  hidePanelActions?: boolean;
 
   /**
    * Reserved key for enhancements added by other plugins.

src/plugins/embeddable/public/lib/panel/embeddable_panel.test.tsx

@@ -407,6 +407,59 @@ test('Updates when hidePanelTitles is toggled', async () => {
   expect(title.length).toBe(1);
 });
 
+test('Updates when hidePanelActions is toggled', async () => {
+  const inspector = inspectorPluginMock.createStartContract();
+
+  const container = new HelloWorldContainer(
+    { id: '123', panels: {}, viewMode: ViewMode.VIEW, hidePanelActions: false },
+    { getEmbeddableFactory } as any
+  );
+
+  const embeddable = await container.addNewEmbeddable<
+    ContactCardEmbeddableInput,
+    ContactCardEmbeddableOutput,
+    ContactCardEmbeddable
+  >(CONTACT_CARD_EMBEDDABLE, {
+    firstName: 'Rob',
+    lastName: 'Stark',
+  });
+
+  const component = mount(
+    <I18nProvider>
+      <EmbeddablePanel
+        embeddable={embeddable}
+        getActions={() => Promise.resolve([])}
+        getAllEmbeddableFactories={start.getEmbeddableFactories}
+        getEmbeddableFactory={start.getEmbeddableFactory}
+        notifications={{} as any}
+        overlays={{} as any}
+        application={applicationMock}
+        inspector={inspector}
+        SavedObjectFinder={() => null}
+      />
+    </I18nProvider>
+  );
+
+  let actionButton = findTestSubject(component, 'embeddablePanelToggleMenuIcon');
+  expect(actionButton.length).toBe(1);
+
+  container.updateInput({ hidePanelActions: true });
+
+  await nextTick();
+  component.update();
+
+  actionButton = findTestSubject(component, 'embeddablePanelToggleMenuIcon');
+  expect(actionButton.length).toBe(0);
+
+  container.updateInput({ hidePanelActions: false });
+
+  await nextTick();
+  component.update();
+
+  actionButton = findTestSubject(component, 'embeddablePanelToggleMenuIcon');
+  expect(actionButton.length).toBe(1);
+});
+
 test('Check when hide header option is false', async () => {
   const inspector = inspectorPluginMock.createStartContract();
 

src/plugins/embeddable/public/lib/panel/embeddable_panel.tsx

@@ -94,6 +94,7 @@ interface State {
   focusedPanelIndex?: string;
   viewMode: ViewMode;
   hidePanelTitle: boolean;
+  hidePanelAction: boolean;
   closeContextMenu: boolean;
   badges: Array<Action<EmbeddableContext>>;
   notifications: Array<Action<EmbeddableContext>>;
@@ -112,15 +113,19 @@ export class EmbeddablePanel extends React.Component<Props, State> {
   constructor(props: Props) {
     super(props);
     const { embeddable } = this.props;
-    const viewMode = embeddable.getInput().viewMode ?? ViewMode.EDIT;
-    const hidePanelTitle =
-      Boolean(embeddable.parent?.getInput()?.hidePanelTitles) ||
-      Boolean(embeddable.getInput()?.hidePanelTitles);
+    const input = embeddable.getInput();
+    const parentInput = embeddable.parent?.getInput();
+
+    const viewMode = input?.viewMode ?? ViewMode.EDIT;
+    const hidePanelTitle = Boolean(parentInput?.hidePanelTitles) || Boolean(input?.hidePanelTitles);
+    const hidePanelAction =
+      Boolean(parentInput?.hidePanelActions) || Boolean(input?.hidePanelActions);
 
     this.state = {
       panels: [],
       viewMode,
       hidePanelTitle,
+      hidePanelAction,
       closeContextMenu: false,
       badges: [],
       notifications: [],
@@ -182,10 +187,15 @@ export class EmbeddablePanel extends React.Component<Props, State> {
     if (parent) {
       this.parentSubscription = parent.getInput$().subscribe(async () => {
         if (this.mounted && parent) {
+          const input = embeddable.getInput();
+          const parentInput = parent.getInput();
           this.setState({
             hidePanelTitle:
-              Boolean(embeddable.parent?.getInput()?.hidePanelTitles) ||
-              Boolean(embeddable.getInput()?.hidePanelTitles),
+              Boolean(parentInput?.hidePanelTitles) || Boolean(input?.hidePanelTitles),
+          });
+          this.setState({
+            hidePanelAction:
+              Boolean(parentInput?.hidePanelActions) || Boolean(input?.hidePanelActions),
           });
 
           this.refreshBadges();
@@ -245,6 +255,7 @@ export class EmbeddablePanel extends React.Component<Props, State> {
           <PanelHeader
             getActionContextMenuPanel={this.getActionContextMenuPanel}
             hidePanelTitle={this.state.hidePanelTitle}
+            hidePanelAction={this.state.hidePanelAction}
             isViewMode={viewOnlyMode}
             closeContextMenu={this.state.closeContextMenu}
             title={title}

src/plugins/embeddable/public/lib/panel/panel_header/panel_header.tsx

@@ -49,6 +49,7 @@ export interface PanelHeaderProps {
   title?: string;
   isViewMode: boolean;
   hidePanelTitle: boolean;
+  hidePanelAction: boolean;
   getActionContextMenuPanel: () => Promise<EuiContextMenuPanelDescriptor[]>;
   closeContextMenu: boolean;
   badges: Array<Action<EmbeddableContext>>;
@@ -129,6 +130,7 @@ export function PanelHeader({
   title,
   isViewMode,
   hidePanelTitle,
+  hidePanelAction,
   getActionContextMenuPanel,
   closeContextMenu,
   badges,
@@ -166,12 +168,14 @@ export function PanelHeader({
   if (!showPanelBar) {
     return (
       <div className={classes}>
-        <PanelOptionsMenu
-          getActionContextMenuPanel={getActionContextMenuPanel}
-          isViewMode={isViewMode}
-          closeContextMenu={closeContextMenu}
-          title={title}
-        />
+        {!hidePanelAction && (
+          <PanelOptionsMenu
+            getActionContextMenuPanel={getActionContextMenuPanel}
+            isViewMode={isViewMode}
+            closeContextMenu={closeContextMenu}
+            title={title}
+          />
+        )}
         <EuiScreenReaderOnly>{getAriaLabel()}</EuiScreenReaderOnly>
       </div>
     );
@@ -210,12 +214,14 @@ export function PanelHeader({
         {renderBadges(badges, embeddable)}
       </h2>
       {renderNotifications(notifications, embeddable)}
-      <PanelOptionsMenu
-        isViewMode={isViewMode}
-        getActionContextMenuPanel={getActionContextMenuPanel}
-        closeContextMenu={closeContextMenu}
-        title={title}
-      />
+      {!hidePanelAction && (
+        <PanelOptionsMenu
+          isViewMode={isViewMode}
+          getActionContextMenuPanel={getActionContextMenuPanel}
+          closeContextMenu={closeContextMenu}
+          title={title}
+        />
+      )}
     </figcaption>
   );
 }