[Dashboard] show fullscreen mode when url has fullScreenMode param

[lsq645599166]

Summary

Closes #174561

Show fullscreen mode when url has fullScreenMode param &_a=(fullScreenMode:!t)

Screenshot

[lsq645599166]

@elasticmachine merge upstream

[lsq645599166]

@elasticmachine merge upstream

[Heenawter]

@nreese I am defaulting to your opinion here :) I think that fullscreenMode belongs under InitialComponentState, but our current URL logic is tied to the old DashboardContainerInput type. What is the best way to handle this, do you think? Should we just keep it under DashboardContainerInput and you can address it in your refactor?

[lsq645599166]

@nreese I am defaulting to your opinion here :) I think that fullscreenMode belongs under InitialComponentState, but our current URL logic is tied to the old DashboardContainerInput type. What is the best way to handle this, do you think? Should we just keep it under DashboardContainerInput and you can address it in your refactor?

This involves a lot of parameters and attributes, so I can't give a precise answer. Maybe maintaining the status quo is a better choice.

[nreese]

@nreese I am defaulting to your opinion here :) I think that fullscreenMode belongs under InitialComponentState, but our current URL logic is tied to the old DashboardContainerInput type. What is the best way to handle this, do you think? Should we just keep it under DashboardContainerInput and you can address it in your refactor?

Putting fullscreenMode into InitialComponentState makes the most sense

[nreese]

This involves a lot of parameters and attributes, so I can't give a precise answer. Maybe maintaining the status quo is a better choice.

How about just putting fullScreenMode as a top level key in creationOptions, Then its value can just be read directly from the URL params instead of using loadAndRemoveDashboardState utility

See it will look something like this

const getCreationOptions = useCallback((): Promise<DashboardCreationOptions> => {
    const searchSessionIdFromURL = getSearchSessionIdFromURL(history);
    const getInitialInput = () => {
      const stateFromLocator = loadDashboardHistoryLocationState(getScopedHistory);
      const initialUrlState = loadAndRemoveDashboardState(kbnUrlStateStorage);

      // Override all state with URL + Locator input
      return {
        // State loaded from the dashboard app URL and from the locator overrides all other dashboard state.
        ...initialUrlState,
        ...stateFromLocator,

        // if print mode is active, force viewMode.PRINT
        ...(screenshotModeService.isScreenshotMode() &&
        screenshotModeService.getScreenshotContext('layout') === 'print'
          ? { viewMode: ViewMode.PRINT }
          : {}),
      };
    };

    return Promise.resolve<DashboardCreationOptions>({
      getIncomingEmbeddable: () =>
        embeddableService.getStateTransfer().getIncomingEmbeddablePackage(DASHBOARD_APP_ID, true),

      // integrations
      useSessionStorageIntegration: true,
      useUnifiedSearchIntegration: true,
      unifiedSearchSettings: {
        kbnUrlStateStorage,
      },
      useSearchSessionsIntegration: true,
      searchSessionSettings: {
        createSessionRestorationDataProvider,
        sessionIdToRestore: searchSessionIdFromURL,
        sessionIdUrlChangeObservable: getSessionURLObservable(history),
        getSearchSessionIdFromURL: () => getSearchSessionIdFromURL(history),
        removeSessionIdFromUrl: () => removeSearchSessionIdFromURL(kbnUrlStateStorage),
      },
      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,
        getCurrentPath: () => `#${createDashboardEditUrl(dashboardId)}`,
      }),
    });
  }, [history, embedSettings, validateOutcome, getScopedHistory, kbnUrlStateStorage]);

[lsq645599166]

This involves a lot of parameters and attributes, so I can't give a precise answer. Maybe maintaining the status quo is a better choice.

How about just putting fullScreenMode as a top level key in creationOptions, Then its value can just be read directly from the URL params instead of using loadAndRemoveDashboardState utility

See it will look something like this

const getCreationOptions = useCallback((): Promise<DashboardCreationOptions> => {
    const searchSessionIdFromURL = getSearchSessionIdFromURL(history);
    const getInitialInput = () => {
      const stateFromLocator = loadDashboardHistoryLocationState(getScopedHistory);
      const initialUrlState = loadAndRemoveDashboardState(kbnUrlStateStorage);

      // Override all state with URL + Locator input
      return {
        // State loaded from the dashboard app URL and from the locator overrides all other dashboard state.
        ...initialUrlState,
        ...stateFromLocator,

        // if print mode is active, force viewMode.PRINT
        ...(screenshotModeService.isScreenshotMode() &&
        screenshotModeService.getScreenshotContext('layout') === 'print'
          ? { viewMode: ViewMode.PRINT }
          : {}),
      };
    };

    return Promise.resolve<DashboardCreationOptions>({
      getIncomingEmbeddable: () =>
        embeddableService.getStateTransfer().getIncomingEmbeddablePackage(DASHBOARD_APP_ID, true),

      // integrations
      useSessionStorageIntegration: true,
      useUnifiedSearchIntegration: true,
      unifiedSearchSettings: {
        kbnUrlStateStorage,
      },
      useSearchSessionsIntegration: true,
      searchSessionSettings: {
        createSessionRestorationDataProvider,
        sessionIdToRestore: searchSessionIdFromURL,
        sessionIdUrlChangeObservable: getSessionURLObservable(history),
        getSearchSessionIdFromURL: () => getSearchSessionIdFromURL(history),
        removeSessionIdFromUrl: () => removeSearchSessionIdFromURL(kbnUrlStateStorage),
      },
      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,
        getCurrentPath: () => `#${createDashboardEditUrl(dashboardId)}`,
      }),
    });
  }, [history, embedSettings, validateOutcome, getScopedHistory, kbnUrlStateStorage]);

Thanks, I fixed it and can you take a look

[elasticmachine]

Pinging @elastic/kibana-presentation (Team:Presentation)

[Heenawter]

buildkite test this

[Heenawter]

@elasticmachine run buildkite/docs-build-pr

[Heenawter]

@lsq645599166 Here's a screenshot of the type errors:

[lsq645599166]

@lsq645599166 Here's a screenshot of the type errors:

Thanks and fixed

[Heenawter]

buildkite test this

[Heenawter]

@elasticmachine run buildkite/docs-build-pr

[nreese]

Why is this removed?

[lsq645599166]

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.

[Heenawter]

buildkite test this

[Heenawter]

@elasticmachine run buildkite/docs-build-pr

[elasticmachine]

💚 Build Succeeded

• Buildkite Build
• Commit: 2d5faf3

Metrics [docs]

Public APIs missing comments

Total count of every public API that lacks a comment. Target amount is 0. Run node scripts/build_api_docs --plugin [yourplugin] --stats comments for more detailed information.

id	before	after	diff
dashboard	124	125	+1

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id	before	after	diff
dashboard	643.0KB	643.2KB	+139.0B

Unknown metric groups

API count

id	before	after	diff
dashboard	129	130	+1

History

• 💚 Build #244682 succeeded 3bd11ce
• 💔 Build #244379 failed 267aab2

[Heenawter]

Changes LGTM - code review + local testing. Thanks so much for tackling this 🙇

[kibanamachine]

Starting backport for target branches: 8.15, 8.16, 8.x

https://github.com/elastic/kibana/actions/runs/11507245328

[kibanamachine]

💔 Some backports could not be created

Status	Branch	Result
❌	8.15	Backport failed because of merge conflicts
✅	8.16
✅	8.x

Note: Successful backport PRs will be merged automatically after passing CI.

Manual backport

To create the backport manually run:

node scripts/backport --pr 196275

Questions ?

Please refer to the Backport tool documentation

[kibanamachine]

Starting backport for target branches: 8.x

https://github.com/elastic/kibana/actions/runs/11507553634

[kibanamachine]

💚 All backports created successfully

Status	Branch	Result
✅	8.x

Note: Successful backport PRs will be merged automatically after passing CI.

Questions ?

Please refer to the Backport tool documentation