Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Dashboard] show fullscreen mode when url has fullScreenMode param #196275

Merged
merged 7 commits into from
Oct 24, 2024
Merged

[Dashboard] show fullscreen mode when url has fullScreenMode param #196275

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
0efa4eb
[Dashboard] show fullscreen mode when url has fullScreenMode param
lsq645599166 Oct 15, 2024
772e8a3
[Dashboard] save fullScreenMode state in type InitialComponentState
lsq645599166 Oct 18, 2024
4489813
Merge branch 'main' into fix/fullscreen_url_param
elasticmachine Oct 18, 2024
78fd591
Merge branch 'main' into fix/fullscreen_url_param
elasticmachine Oct 21, 2024
267aab2
[Dashboard] put fullScreenMode as a top level key in creationOptions
lsq645599166 Oct 21, 2024
3bd11ce
[Dashboard] fix type lint
lsq645599166 Oct 22, 2024
2d5faf3
Merge branch 'main' into fix/fullscreen_url_param
Heenawter Oct 24, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion src/plugins/dashboard/public/dashboard_api/get_dashboard_api.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,14 +19,15 @@ export interface InitialComponentState {
lastSavedInput: DashboardContainerInput;
lastSavedId: string | undefined;
managed: boolean;
fullScreenMode: boolean;
}

export function getDashboardApi(
initialComponentState: InitialComponentState,
untilEmbeddableLoaded: (id: string) => Promise<unknown>
) {
const animatePanelTransforms$ = new BehaviorSubject(false); // set panel transforms to false initially to avoid panels animating on initial render.
const fullScreenMode$ = new BehaviorSubject(false);
const fullScreenMode$ = new BehaviorSubject(initialComponentState.fullScreenMode);
const managed$ = new BehaviorSubject(initialComponentState.managed);
const savedObjectId$ = new BehaviorSubject<string | undefined>(initialComponentState.lastSavedId);

Expand Down
1 change: 1 addition & 0 deletions src/plugins/dashboard/public/dashboard_api/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,6 +68,7 @@ export interface DashboardCreationOptions {

validateLoadedSavedObject?: (result: LoadDashboardReturn) => 'valid' | 'invalid' | 'redirected';

fullScreenMode?: boolean;
isEmbeddedExternally?: boolean;

getEmbeddableAppContext?: (dashboardId?: string) => EmbeddableAppContext;
Expand Down
3 changes: 3 additions & 0 deletions src/plugins/dashboard/public/dashboard_app/dashboard_app.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -157,6 +157,9 @@ export function DashboardApp({
},
getInitialInput,
validateLoadedSavedObject: validateOutcome,
fullScreenMode:
kbnUrlStateStorage.get<{ fullScreenMode?: boolean }>(DASHBOARD_STATE_STORAGE_KEY)
?.fullScreenMode ?? false,
isEmbeddedExternally: Boolean(embedSettings), // embed settings are only sent if the dashboard URL has `embed=true`
getEmbeddableAppContext: (dashboardId) => ({
currentAppId: DASHBOARD_APP_ID,
Expand Down
1 change: 1 addition & 0 deletions src/plugins/dashboard/public/dashboard_container/embeddable/create/create_dashboard.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -110,6 +110,7 @@ export const createDashboard = async (
},
lastSavedId: savedObjectId,
managed: savedObjectResult.managed ?? false,
fullScreenMode: creationOptions?.fullScreenMode ?? false,
};

const dashboardContainer = new DashboardContainer(
Expand Down
1 change: 1 addition & 0 deletions src/plugins/dashboard/public/dashboard_container/embeddable/dashboard_container.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -178,6 +178,7 @@ test('searchSessionId propagates to children', async () => {
lastSavedInput: sampleInput,
lastSavedId: undefined,
managed: false,
fullScreenMode: false,
}
);
container?.setControlGroupApi(mockControlGroupApi);
Expand Down
1 change: 1 addition & 0 deletions src/plugins/dashboard/public/dashboard_container/embeddable/dashboard_container.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -314,6 +314,7 @@ export class DashboardContainer
isEmbeddedExternally: false,
lastSavedInput: initialInput,
lastSavedId: undefined,
fullScreenMode: false,
managed: false,
},
(id: string) => this.untilEmbeddableLoaded(id)
Expand Down
7 changes: 0 additions & 7 deletions src/plugins/dashboard/public/dashboard_top_nav/internal_dashboard_top_nav.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -123,13 +123,6 @@ export function InternalDashboardTopNav({
dashboardTitleRef.current?.focus();
}, [title, viewMode]);

/**
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why is this removed?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If keep this, the top nav will disappear and reappear like below

20241023-001416.mp4

And for embed mode, this function will ensure it works fine

kibana/packages/core/chrome/core-chrome-browser-internal/src/chrome_service.tsx

Lines 111 to 134 in 3bd11ce

private initVisibility(application: StartDeps['application']) {
// Start off the chrome service hidden if "embed" is in the hash query string.
const isEmbedded = 'embed' in parse(location.hash.slice(1), true).query;
this.isForceHidden$ = new BehaviorSubject(isEmbedded);
const appHidden$ = merge(
// For the isVisible$ logic, having no mounted app is equivalent to having a hidden app
// in the sense that the chrome UI should not be displayed until a non-chromeless app is mounting or mounted
of(true),
application.currentAppId$.pipe(
mergeMap((appId) =>
application.applications$.pipe(
map((applications) => {
return !!appId && applications.has(appId) && !!applications.get(appId)!.chromeless;
})
)
)
)
);
this.isVisible$ = combineLatest([appHidden$, this.isForceHidden$]).pipe(
map(([appHidden, forceHidden]) => !appHidden && !forceHidden),
takeUntil(this.stop$)
);
}

If there is a better way, I will fix it.

* Manage chrome visibility when dashboard is embedded.
*/
useEffect(() => {
if (!embedSettings) coreServices.chrome.setIsVisible(viewMode !== 'print');
}, [embedSettings, viewMode]);

/**
* populate recently accessed, and set is chrome visible.
*/
Expand Down
1 change: 1 addition & 0 deletions src/plugins/dashboard/public/mocks.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,6 +99,7 @@ export function buildMockDashboard({
lastSavedInput: initialInput,
lastSavedId: savedObjectId,
managed: false,
fullScreenMode: false,
}
);
dashboardContainer?.setControlGroupApi(mockControlGroupApi);
Expand Down