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>>;
@@ -116,11 +117,15 @@ export class EmbeddablePanel extends React.Component<Props, State> {
     const hidePanelTitle =
       Boolean(embeddable.parent?.getInput()?.hidePanelTitles) ||
       Boolean(embeddable.getInput()?.hidePanelTitles);
+    const hidePanelAction =
+      Boolean(embeddable.parent?.getInput()?.hidePanelActions) ||
+      Boolean(embeddable.getInput()?.hidePanelActions);
 
     this.state = {
       panels: [],
       viewMode,
       hidePanelTitle,
+      hidePanelAction,
       closeContextMenu: false,
       badges: [],
       notifications: [],
@@ -187,6 +192,11 @@ export class EmbeddablePanel extends React.Component<Props, State> {
               Boolean(embeddable.parent?.getInput()?.hidePanelTitles) ||
               Boolean(embeddable.getInput()?.hidePanelTitles),
           });
+          this.setState({
+            hidePanelAction:
+              Boolean(embeddable.parent?.getInput()?.hidePanelActions) ||
+              Boolean(embeddable.getInput()?.hidePanelActions),
+          });
 
           this.refreshBadges();
           this.refreshNotifications();
@@ -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>
   );
 }