[Embedded Console] Introduce kbnSolutionNavOffset CSS variable #175348

TattdCodeMonkey · 2024-01-23T20:47:30Z

Summary

This PR updates the Kibana SolutionNav component to set a global CSS variable --kbnSolutionNavOffset with it's current width. This is modeled off of the EUI CSS variable --euiCollapsibleNavOffset that can be used in Serverless to get the current width of the side nav.

This will be used by the embedded dev console to ensure it is not rendered over the page side navigation, at least for pages that use the KibanaPageTemplate & SolutionNav.

Testing

The easiest way to verify this change is to check the values of --kbnSolutionNavOffset in the browser console, which can be done with the following command:
getComputedStyle(document.documentElement).getPropertyValue('--kbnSolutionNavOffset')

You can check this with the solution nav open and closed or on pages without a solution nav at all (/app/home for example)

Updated the SolutionNav component to set a global CSS variable, --kbnSolutionNavOffset, with the current width of the solution nav. This will allow components in Kibana to offset based on the current size of the solution nav if its rendered on the page.

Updated the embedded console to check the current chrome style and use the correct CSS variable for the side nav offset.

yuliacech

Tested locally, changes LGTM 👍

Dosant · 2024-01-24T15:21:28Z

packages/shared-ux/page/solution_nav/src/solution_nav.tsx

+  useEffect(() => {
+    setGlobalCSSVariables({
+      '--kbnSolutionNavOffset': navWidth,
+    });


I guess this should be cleaned in the destroy callback?

I had that initially, but it didn't seem to change anything so I removed it as superfluous.

Also the eui code I modeled this off of does not have a destroy callback either.

it could be a problem when this variable is used with a fallback for the case when solution nav is not rendered, e.g.:

var(--kbnSolutionNavOffset, 0);

Dosant · 2024-01-24T15:26:36Z

packages/shared-ux/page/solution_nav/src/solution_nav.tsx

+    if (isMediumBreakpoint) {
+      return isSideNavOpenOnMobile || !canBeCollapsed
+        ? `${FLYOUT_SIZE}px`
+        : euiThemeVars.euiSizeXXL;


Looks like there is no way (or no straightforward way) to connect these widths with the widths that are actually set for the sidebar. Maybe it is worth at least adding a comment in the CSS where these widths are set, that this logic might also need an update in case the CSS is updated

like here

kibana/packages/shared-ux/page/solution_nav/src/with_solution_nav.tsx

Line 77 in 51569b4

minWidth: isSidebarShrunk ? euiTheme.size.xxl : undefined,

or here

kibana/packages/shared-ux/page/solution_nav/src/solution_nav.scss

Line 17 in c39352f

width: 248px;

Or maybe it is worth at least connecting them with css variable

@Dosant I added variables for the sizes and added a comment about it also being set in the tsx file.

I don't think there is way to read the variables from the scss file in the tsx file at compile time without configuration changes. But if I'm wrong about that let me know.

kibana-ci · 2024-01-24T17:26:47Z

💛 Build succeeded, but was flaky

Buildkite Build
Commit: 5a01641

Failed CI Steps

FTR Configs #11

Metrics [docs]

Async chunks

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

id	before	after	diff
`canvas`	1013.8KB	1014.1KB	+262.0B
`console`	424.2KB	424.7KB	+483.0B
`dashboard`	382.3KB	382.5KB	+259.0B
`enterpriseSearch`	2.7MB	2.7MB	+259.0B
`eventAnnotationListing`	196.9KB	197.2KB	+254.0B
`filesManagement`	89.9KB	90.2KB	+261.0B
`graph`	387.1KB	387.4KB	+261.0B
`home`	137.5KB	137.7KB	+261.0B
`indexManagement`	587.0KB	587.3KB	+262.0B
`infra`	1.3MB	1.3MB	+259.0B
`kibanaOverview`	49.9KB	50.1KB	+259.0B
`management`	77.5KB	77.8KB	+261.0B
`maps`	2.9MB	2.9MB	+262.0B
`metricsDataAccess`	85.3KB	85.6KB	+262.0B
`ml`	3.6MB	3.6MB	+262.0B
`observabilityShared`	36.4KB	36.7KB	+261.0B
`osquery`	1.0MB	1.0MB	+262.0B
`security`	579.7KB	580.0KB	+259.0B
`securitySolution`	11.1MB	11.1MB	+518.0B
`securitySolutionEss`	44.5KB	44.7KB	+262.0B
`securitySolutionServerless`	220.5KB	220.8KB	+259.0B
`spaces`	174.9KB	175.2KB	+261.0B
`visualizations`	270.4KB	270.6KB	+259.0B
total			+6.3KB

Page load bundle

Size of the bundles that are downloaded on every page load. Target size is below 100kb

id	before	after	diff
`esUiShared`	155.8KB	156.1KB	+262.0B

History

💔 Build #189016 failed 1e6fb1a
💔 Build #188846 failed 004ff2b

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream

* main: (520 commits) Update Kibana code editor dependencies (#171720) [SLOs] Hide view in app in slo alerts table in slo details page (#175441) [api-docs] 2024-01-25 Daily api_docs build (#175502) [DOCS] Add buildkite links to doc preview comments (#175463) skip flaky suite (#175443) [Security Solution][Timeline] refactor timeline modal save timeline button (#175343) [RAM] Stack Management::Rules loses user selections when navigating back (#174954) [Security Solution][Timeline] refactor timeline modal attach to case button (#175163) Upgrade EUI to v92.1.1 (#174955) [Fleet]: Beta label is shown inconsistently while selecting proxy under Fleet settings. (#170634) [Cloud Security] Rules Combo Box filters Custom component (#175175) skip flaky suite (#175407) [Security Solution][Timeline] refactor timeline modal open timeline button (#175335) [Embedded Console] Introduce kbnSolutionNavOffset CSS variable (#175348) [Console] disable access to embedded console without dev tools capability (#175321) fix(x-pack/reporting): use FIPS-compliant ID generator `uuidv4` in Reporting plugin (#174809) [Security Solution] Data quality dashboard persistence (#173185) [RAM][Observability] Add alert fields table to Observability flyout (#174685) test: add missing await for connector table disappearance (#175430) [RAM][Maintenance Window] Fix maintenance window FE types and transforms (#173888) ...

…ic#175348) ## Summary This PR updates the Kibana `SolutionNav` component to set a global CSS variable `--kbnSolutionNavOffset` with it's current width. This is modeled off of the EUI CSS variable `--euiCollapsibleNavOffset` that can be used in Serverless to get the current width of the side nav. This will be used by the embedded dev console to ensure it is not rendered over the page side navigation, at least for pages that use the `KibanaPageTemplate` & `SolutionNav`. ### Testing The easiest way to verify this change is to check the values of `--kbnSolutionNavOffset` in the browser console, which can be done with the following command: `getComputedStyle(document.documentElement).getPropertyValue('--kbnSolutionNavOffset')` You can check this with the solution nav open and closed or on pages without a solution nav at all (`/app/home` for example)

TattdCodeMonkey added release_note:skip Skip the PR/issue when compiling release notes Team:Search labels Jan 23, 2024

TattdCodeMonkey requested review from a team as code owners January 23, 2024 20:47

TattdCodeMonkey added 2 commits January 23, 2024 21:32

update embedded console to use correct offset

004ff2b

Updated the embedded console to check the current chrome style and use the correct CSS variable for the side nav offset.

TattdCodeMonkey force-pushed the rnorris/kbn-solution-nav-offset branch from dbc933f to 004ff2b Compare January 23, 2024 21:33

yuliacech approved these changes Jan 24, 2024

View reviewed changes

bump dataViewManagement 40B to account for SolutionNav change

1e6fb1a

TattdCodeMonkey requested a review from a team as a code owner January 24, 2024 15:17

Dosant approved these changes Jan 24, 2024

View reviewed changes

jbudz approved these changes Jan 24, 2024

View reviewed changes

TattdCodeMonkey added 3 commits January 24, 2024 16:00

use euiTheme for size instead of importing euiThemeVars

2fe79bf

doc: add comment about JS var for nav size

412d25f

css: introduce variables for solution nav widths

5a01641

julianrosado approved these changes Jan 24, 2024

View reviewed changes

TattdCodeMonkey merged commit 98cb0c2 into elastic:main Jan 24, 2024
19 checks passed

TattdCodeMonkey deleted the rnorris/kbn-solution-nav-offset branch January 24, 2024 19:22

kibanamachine added v8.13.0 backport:skip This commit does not require backporting labels Jan 24, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Embedded Console] Introduce kbnSolutionNavOffset CSS variable #175348

[Embedded Console] Introduce kbnSolutionNavOffset CSS variable #175348

TattdCodeMonkey commented Jan 23, 2024 •

edited

Loading

yuliacech left a comment

Dosant Jan 24, 2024

TattdCodeMonkey Jan 24, 2024 •

edited

Loading

Dosant Jan 24, 2024

Dosant Jan 24, 2024

Dosant Jan 24, 2024

TattdCodeMonkey Jan 24, 2024

kibana-ci commented Jan 24, 2024

[Embedded Console] Introduce kbnSolutionNavOffset CSS variable #175348

[Embedded Console] Introduce kbnSolutionNavOffset CSS variable #175348

Conversation

TattdCodeMonkey commented Jan 23, 2024 • edited Loading

Summary

Testing

yuliacech left a comment

Choose a reason for hiding this comment

Dosant Jan 24, 2024

Choose a reason for hiding this comment

TattdCodeMonkey Jan 24, 2024 • edited Loading

Choose a reason for hiding this comment

Dosant Jan 24, 2024

Choose a reason for hiding this comment

Dosant Jan 24, 2024

Choose a reason for hiding this comment

Dosant Jan 24, 2024

Choose a reason for hiding this comment

TattdCodeMonkey Jan 24, 2024

Choose a reason for hiding this comment

kibana-ci commented Jan 24, 2024

💛 Build succeeded, but was flaky

Failed CI Steps

Metrics [docs]

Async chunks

Page load bundle

History

TattdCodeMonkey commented Jan 23, 2024 •

edited

Loading

TattdCodeMonkey Jan 24, 2024 •

edited

Loading