From 2aa57f79a1fe5d38bf2058bc7be86bf952354092 Mon Sep 17 00:00:00 2001 From: Yulong Ruan Date: Thu, 25 Jul 2024 18:13:24 +0800 Subject: [PATCH 1/3] feat: provide new embeddable option to hide embeddable panel action button Signed-off-by: Yulong Ruan --- src/plugins/embeddable/common/types.ts | 1 + .../lib/panel/embeddable_panel.test.tsx | 53 +++++++++++++++++++ .../public/lib/panel/embeddable_panel.tsx | 11 ++++ .../lib/panel/panel_header/panel_header.tsx | 30 ++++++----- 4 files changed, 83 insertions(+), 12 deletions(-) diff --git a/src/plugins/embeddable/common/types.ts b/src/plugins/embeddable/common/types.ts index c513d2dcea0..7c2a04a6b2e 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 4db6b30c9b5..a1480177e0a 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 5a340d3a701..02580452f66 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>; @@ -116,11 +117,15 @@ export class EmbeddablePanel extends React.Component { 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 { 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 { 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 && ( + + )} ); } From c7573174effe89032b488850124f17ec33f0e9a3 Mon Sep 17 00:00:00 2001 From: "opensearch-changeset-bot[bot]" <154024398+opensearch-changeset-bot[bot]@users.noreply.github.com> Date: Fri, 26 Jul 2024 03:12:26 +0000 Subject: [PATCH 2/3] Changeset file for PR #7503 created/updated --- changelogs/fragments/7503.yml | 2 ++ 1 file changed, 2 insertions(+) create mode 100644 changelogs/fragments/7503.yml diff --git a/changelogs/fragments/7503.yml b/changelogs/fragments/7503.yml new file mode 100644 index 00000000000..5f33fce038f --- /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 From 70ce43fd35b5cecd8cdfa470f8e4729f5a34a0b1 Mon Sep 17 00:00:00 2001 From: Yulong Ruan Date: Wed, 7 Aug 2024 11:22:54 +0800 Subject: [PATCH 3/3] cleanup unnecessary getInput() calls Signed-off-by: Yulong Ruan --- .../public/lib/panel/embeddable_panel.tsx | 20 +++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/src/plugins/embeddable/public/lib/panel/embeddable_panel.tsx b/src/plugins/embeddable/public/lib/panel/embeddable_panel.tsx index 02580452f66..02ebf8b7f56 100644 --- a/src/plugins/embeddable/public/lib/panel/embeddable_panel.tsx +++ b/src/plugins/embeddable/public/lib/panel/embeddable_panel.tsx @@ -113,13 +113,13 @@ 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(embeddable.parent?.getInput()?.hidePanelActions) || - Boolean(embeddable.getInput()?.hidePanelActions); + Boolean(parentInput?.hidePanelActions) || Boolean(input?.hidePanelActions); this.state = { panels: [], @@ -187,15 +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(embeddable.parent?.getInput()?.hidePanelActions) || - Boolean(embeddable.getInput()?.hidePanelActions), + Boolean(parentInput?.hidePanelActions) || Boolean(input?.hidePanelActions), }); this.refreshBadges();