Skip to content

Commit

Permalink
[8.x] do not set full screen mode on ExitFullScreenButton re-render (e…
Browse files Browse the repository at this point in the history 
…lastic#198012) (elastic#198059)

# Backport

This will backport the following commits from `main` to `8.x`:
- [do not set full screen mode on ExitFullScreenButton re-render
(elastic#198012)](elastic#198012)

<!--- Backport version: 9.4.3 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Nathan
Reese","email":"[email protected]"},"sourceCommit":{"committedDate":"2024-10-28T17:21:25Z","message":"do
not set full screen mode on ExitFullScreenButton re-render
(elastic#198012)\n\n###
Background\r\nhttps://github.com/elastic/pull/194892 is
refactoring\r\n[DashboardRenderer](https://github.com/elastic/kibana/blob/3391344e8dc8377d359b918521b6c48838cde8ae/src/plugins/dashboard/public/dashboard_container/external_api/dashboard_renderer.tsx)\r\ncomponent
to replace Dashboard Embeddable with a plain old javascript\r\nobject.
Dashboard Embeddable rendered its contents in a new react tree.\r\nThe
new implementation does not. Since the new implementation does
not\r\nrender the dashboard in a new react tree, any re-render
in\r\n`DashboardViewport` parent components causes
`ExitFullScreenButton` to\r\nre-render. In its current form,
re-rendering `ExitFullScreenButton`\r\ncalls `onExit`, which causing
dashboard to exit full screen mode.\r\n\r\nThis PR makes use of
`useCallback` to fix the issue where
re-rending\r\n`ExitFullScreenButton` calls `onExit`.\r\n\r\n### Test
steps\r\n1) Open dashboard that ships with sample web logs data
set\r\n2) switch to view mode\r\n3) click \"Full screen\" button\r\n4)
Maximize a panel. Verify dashboard stays in full screen
mode.","sha":"9e9a6bb07dc3a5424a4a369709bf91f6d547361e","branchLabelMapping":{"^v9.0.0$":"main","^v8.17.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["Team:Presentation","release_note:skip","v9.0.0","project:embeddableRebuild","backport:version","v8.17.0"],"title":"do
not set full screen mode on ExitFullScreenButton
re-render","number":198012,"url":"https://github.com/elastic/kibana/pull/198012","mergeCommit":{"message":"do
not set full screen mode on ExitFullScreenButton re-render
(elastic#198012)\n\n###
Background\r\nhttps://github.com/elastic/pull/194892 is
refactoring\r\n[DashboardRenderer](https://github.com/elastic/kibana/blob/3391344e8dc8377d359b918521b6c48838cde8ae/src/plugins/dashboard/public/dashboard_container/external_api/dashboard_renderer.tsx)\r\ncomponent
to replace Dashboard Embeddable with a plain old javascript\r\nobject.
Dashboard Embeddable rendered its contents in a new react tree.\r\nThe
new implementation does not. Since the new implementation does
not\r\nrender the dashboard in a new react tree, any re-render
in\r\n`DashboardViewport` parent components causes
`ExitFullScreenButton` to\r\nre-render. In its current form,
re-rendering `ExitFullScreenButton`\r\ncalls `onExit`, which causing
dashboard to exit full screen mode.\r\n\r\nThis PR makes use of
`useCallback` to fix the issue where
re-rending\r\n`ExitFullScreenButton` calls `onExit`.\r\n\r\n### Test
steps\r\n1) Open dashboard that ships with sample web logs data
set\r\n2) switch to view mode\r\n3) click \"Full screen\" button\r\n4)
Maximize a panel. Verify dashboard stays in full screen
mode.","sha":"9e9a6bb07dc3a5424a4a369709bf91f6d547361e"}},"sourceBranch":"main","suggestedTargetBranches":["8.x"],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/198012","number":198012,"mergeCommit":{"message":"do
not set full screen mode on ExitFullScreenButton re-render
(elastic#198012)\n\n###
Background\r\nhttps://github.com/elastic/pull/194892 is
refactoring\r\n[DashboardRenderer](https://github.com/elastic/kibana/blob/3391344e8dc8377d359b918521b6c48838cde8ae/src/plugins/dashboard/public/dashboard_container/external_api/dashboard_renderer.tsx)\r\ncomponent
to replace Dashboard Embeddable with a plain old javascript\r\nobject.
Dashboard Embeddable rendered its contents in a new react tree.\r\nThe
new implementation does not. Since the new implementation does
not\r\nrender the dashboard in a new react tree, any re-render
in\r\n`DashboardViewport` parent components causes
`ExitFullScreenButton` to\r\nre-render. In its current form,
re-rendering `ExitFullScreenButton`\r\ncalls `onExit`, which causing
dashboard to exit full screen mode.\r\n\r\nThis PR makes use of
`useCallback` to fix the issue where
re-rending\r\n`ExitFullScreenButton` calls `onExit`.\r\n\r\n### Test
steps\r\n1) Open dashboard that ships with sample web logs data
set\r\n2) switch to view mode\r\n3) click \"Full screen\" button\r\n4)
Maximize a panel. Verify dashboard stays in full screen
mode.","sha":"9e9a6bb07dc3a5424a4a369709bf91f6d547361e"}},{"branch":"8.x","label":"v8.17.0","branchLabelMappingKey":"^v8.17.0$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->

Co-authored-by: Nathan Reese <[email protected]>
  • Loading branch information
@kibanamachine @nreese
kibanamachine and nreese authored Oct 28, 2024
1 parent 92f6a18 commit c735fcf
Show file tree
Hide file tree
Showing 2 changed files with 19 additions and 39 deletions.
12 changes: 8 additions & 4 deletions packages/shared-ux/button/exit_full_screen/src/services.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
* License v3.0 only", or the "Server Side Public License, v 1".
*/

import React, { FC, useContext, PropsWithChildren } from 'react';
import React, { FC, useContext, PropsWithChildren, useCallback } from 'react';

import type {
Services,
Expand Down Expand Up @@ -37,12 +37,16 @@ export const ExitFullScreenButtonProvider: FC<PropsWithChildren<ExitFullScreenBu
export const ExitFullScreenButtonKibanaProvider: FC<
PropsWithChildren<ExitFullScreenButtonKibanaDependencies>
> = ({ children, ...services }) => {
const setIsFullscreen = useCallback(
(isFullscreen: boolean) => {
services.coreStart.chrome.setIsVisible(!isFullscreen);
},
[services.coreStart.chrome]
);
return (
<ExitFullScreenButtonContext.Provider
value={{
setIsFullscreen: (isFullscreen: boolean) => {
services.coreStart.chrome.setIsVisible(!isFullscreen);
},
setIsFullscreen,
customBranding$: services.coreStart.customBranding.customBranding$,
}}
>
Expand Down
46 changes: 11 additions & 35 deletions src/plugins/dashboard/public/dashboard_container/component/viewport/dashboard_viewport.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
import { debounce } from 'lodash';
import classNames from 'classnames';
import useResizeObserver from 'use-resize-observer/polyfilled';
import React, { useEffect, useMemo, useState } from 'react';
import React, { useCallback, useEffect, useMemo, useState } from 'react';

import { EuiPortal } from '@elastic/eui';
import { ReactEmbeddableRenderer, ViewMode } from '@kbn/embeddable-plugin/public';
Expand All @@ -22,10 +22,7 @@ import {
ControlGroupSerializedState,
} from '@kbn/controls-plugin/public';
import { CONTROL_GROUP_TYPE } from '@kbn/controls-plugin/common';
import {
useBatchedPublishingSubjects,
useStateFromPublishingSubject,
} from '@kbn/presentation-publishing';
import { useBatchedPublishingSubjects } from '@kbn/presentation-publishing';
import { DashboardGrid } from '../grid';
import { useDashboardApi } from '../../../dashboard_api/use_dashboard_api';
import { DashboardEmptyScreen } from '../empty_screen/dashboard_empty_screen';
Expand All @@ -44,7 +41,7 @@ export const useDebouncedWidthObserver = (skipDebounce = false, wait = 100) => {
return { ref, width };
};

export const DashboardViewportComponent = () => {
export const DashboardViewport = () => {
const dashboardApi = useDashboardApi();
const [hasControls, setHasControls] = useState(false);
const [
Expand All @@ -70,6 +67,9 @@ export const DashboardViewportComponent = () => {
dashboardApi.uuid$,
dashboardApi.fullScreenMode$
);
const onExit = useCallback(() => {
dashboardApi.setFullScreenMode(false);
}, [dashboardApi]);

const panelCount = useMemo(() => {
return Object.keys(panels).length;
Expand Down Expand Up @@ -142,6 +142,11 @@ export const DashboardViewportComponent = () => {
/>
</div>
) : null}
{fullScreenMode && (
<EuiPortal>
<ExitFullScreenButton onExit={onExit} toggleChrome={!dashboardApi.isEmbeddedExternally} />
</EuiPortal>
)}
{panelCount === 0 && <DashboardEmptyScreen />}
<div
ref={resizeRef}
Expand All @@ -160,32 +165,3 @@ export const DashboardViewportComponent = () => {
</div>
);
};

// This fullscreen button HOC separates fullscreen button and dashboard content to reduce rerenders
// because ExitFullScreenButton sets isFullscreenMode to false on unmount while rerendering.
// This specifically fixed maximizing/minimizing panels without exiting fullscreen mode.
const WithFullScreenButton = ({ children }: { children: JSX.Element }) => {
const dashboardApi = useDashboardApi();

const isFullScreenMode = useStateFromPublishingSubject(dashboardApi.fullScreenMode$);

return (
<>
{children}
{isFullScreenMode && (
<EuiPortal>
<ExitFullScreenButton
onExit={() => dashboardApi.setFullScreenMode(false)}
toggleChrome={!dashboardApi.isEmbeddedExternally}
/>
</EuiPortal>
)}
</>
);
};

export const DashboardViewport = () => (
<WithFullScreenButton>
<DashboardViewportComponent />
</WithFullScreenButton>
);

0 comments on commit c735fcf

Please sign in to comment.