diff --git a/changelogs/fragments/7503.yml b/changelogs/fragments/7503.yml new file mode 100644 index 000000000000..5f33fce038f7 --- /dev/null +++ b/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)) \ No newline at end of file diff --git a/src/plugins/embeddable/common/types.ts b/src/plugins/embeddable/common/types.ts index c513d2dcea04..7c2a04a6b2ec 100644 --- a/src/plugins/embeddable/common/types.ts +++ b/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. diff --git a/src/plugins/embeddable/public/lib/panel/embeddable_panel.test.tsx b/src/plugins/embeddable/public/lib/panel/embeddable_panel.test.tsx index 4db6b30c9b57..a1480177e0ab 100644 --- a/src/plugins/embeddable/public/lib/panel/embeddable_panel.test.tsx +++ b/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( + + Promise.resolve([])} + getAllEmbeddableFactories={start.getEmbeddableFactories} + getEmbeddableFactory={start.getEmbeddableFactory} + notifications={{} as any} + overlays={{} as any} + application={applicationMock} + inspector={inspector} + SavedObjectFinder={() => null} + /> + + ); + + 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(); diff --git a/src/plugins/embeddable/public/lib/panel/embeddable_panel.tsx b/src/plugins/embeddable/public/lib/panel/embeddable_panel.tsx index 5a340d3a701c..02ebf8b7f567 100644 --- a/src/plugins/embeddable/public/lib/panel/embeddable_panel.tsx +++ b/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>; notifications: Array>; @@ -112,15 +113,19 @@ export class EmbeddablePanel extends React.Component { 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 { 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 { Promise; closeContextMenu: boolean; badges: Array>; @@ -129,6 +130,7 @@ export function PanelHeader({ title, isViewMode, hidePanelTitle, + hidePanelAction, getActionContextMenuPanel, closeContextMenu, badges, @@ -166,12 +168,14 @@ export function PanelHeader({ if (!showPanelBar) { return (
- + {!hidePanelAction && ( + + )} {getAriaLabel()}
); @@ -210,12 +214,14 @@ export function PanelHeader({ {renderBadges(badges, embeddable)} {renderNotifications(notifications, embeddable)} - + {!hidePanelAction && ( + + )} ); }