[Serverless Chrome] Polish of home logo and project switcher #158523

tsullivan · 2023-05-25T23:33:33Z

Closes #157810
Closes #158879

Summary

Moves the Logo icon out of the side nav and to the left of the breadcrumbs
Moves the project switcher from the right of the header to the just to the right of the logo
Removes the link to cloud from the side nav. Design is still TBD.
Adds new serverless.setProjectHome API since the home link is no longer in the side nav
Removes the linkToCloud prop from the Navigation component since design is still TBD.
Exposes the Global Search bar

Checklist

Delete any items that are not applicable to this PR.

Any text added follows EUI's writing guidelines, uses sentence case text and includes i18n support
Unit or functional tests were updated or added to match the most common scenarios

Screenshots

Default

Global search (not yet collapsed by default)

Collapsed side nav

elasticmachine · 2023-05-27T03:48:27Z

Pinging @elastic/appex-sharedux (Team:SharedUX)

sebelga · 2023-05-30T09:03:52Z

I wonder if we can wait for the "v2" UI to be merged (#158297) before this one as most of the changes will have re-done.

tsullivan · 2023-06-06T19:15:07Z

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

@@ -9,7 +9,7 @@
 import React from 'react';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { BehaviorSubject, combineLatest, merge, type Observable, of, ReplaySubject } from 'rxjs';
-import { flatMap, map, takeUntil } from 'rxjs/operators';
+import { mergeMap, map, takeUntil } from 'rxjs/operators';


flatMap is deprecated

tsullivan · 2023-06-06T19:15:29Z

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

@@ -177,25 +177,23 @@ export class ChromeService {
      chromeStyle$.next(style);
    };

-    const setProjectSideNavComponent = (component: ISideNavComponent | null) => {
+    const validateChromeStyle = () => {
      const chromeStyle = chromeStyle$.getValue();


changed the validation into a helper function

tsullivan · 2023-06-06T19:17:51Z

packages/core/chrome/core-chrome-browser-internal/src/ui/project/header.tsx

+  },
+  nav: {
+    toggleNavButton: css`
+      border-right: 1px solid #d3dae6;


Not sure if there is a cleaner way to do this in CSS. It may be better to leave the header style alone for now since changes will be coming to this area in an EUI update.

cc @cee-chen

You'll need to use the useEuiTheme hook to get the JS theme variables for border width/colors. But yeah I'll be working on EuiCollapsibleNav updates next week here, which will include this styling, so if you want you could leave this out!

@cee-chen thanks for the updates! I'm tempted to update this PR to use useEuiTheme and ensure the border for this header item (the nav show/hide button) is the right color, even if temporarily.

This discussion probably belongs here: elastic/eui#6759 (comment)

tsullivan · 2023-06-06T19:19:51Z

packages/core/chrome/core-chrome-browser-internal/src/ui/project/header.tsx

        <EuiHeaderSection side="right">
+          <EuiHeaderSectionItem>
+            <HeaderNavControls navControls$={observables.navControlsCenter$} />
+            <HeaderNavControls navControls$={observables.navControlsRight$} />


The global search bar is in the center slot, and the help menu is in the right.

tsullivan · 2023-06-06T19:20:37Z

packages/core/chrome/core-chrome-browser-internal/src/ui/project/header.tsx

-          {/* TODO: This puts a group of nav menu items on the right edge of the screen,
-              but it should be possible for apps customize the layout in a grid and use spacers between items.
-              https://github.com/elastic/kibana/issues/158034 */}
-          <EuiHeaderSection />


removed this comment since we won't focus on more work here in the short-term, and the design may change once we get to it.

tsullivan · 2023-06-06T19:22:18Z

x-pack/plugins/serverless/public/plugin.tsx

@@ -53,22 +53,23 @@ export class ServerlessPlugin
    if (developer && developer.projectSwitcher && developer.projectSwitcher.enabled) {
      const { currentType } = developer.projectSwitcher;

-      core.chrome.navControls.registerRight({
+      core.chrome.navControls.registerLeft({


moves the project switcher to a left-side slot of the header

gbamparop

Observability changes LGTM!

sphilipse

ent-search changes LGTM

semd

Security Solution LGTM!

tsullivan · 2023-06-13T16:47:17Z

I received feedback from @clintandrewhall the "project switcher" component was mistakenly moved in this PR. I'm working on resolving the fix and will hold off on merging for now.

clintandrewhall

Great work. Just resolve your conflicts, and you should be g2g. Thanks!

kibana-ci · 2023-06-14T02:24:59Z

💚 Build Succeeded

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
`serverlessObservability`	45	35	-10
`serverlessSearch`	89	81	-8
total			-18

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
`@kbn/shared-ux-chrome-navigation`	44	41	-3
`serverless`	13	15	+2
total			-1

Async chunks

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

id	before	after	diff
`serverlessSearch`	51.9KB	55.3KB	+3.4KB

Page load bundle

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

id	before	after	diff
`core`	367.7KB	369.3KB	+1.7KB
`serverless`	5.2KB	5.3KB	+110.0B
`serverlessObservability`	25.2KB	16.5KB	-8.7KB
`serverlessSearch`	28.5KB	19.8KB	-8.7KB
`serverlessSecurity`	68.3KB	68.4KB	+34.0B
total			-15.6KB

Unknown metric groups

API count

id	before	after	diff
`@kbn/core-chrome-browser`	150	149	-1
`@kbn/shared-ux-chrome-navigation`	68	62	-6
`serverless`	14	16	+2
total			-5

ESLint disabled line counts

id	before	after	diff
`enterpriseSearch`	13	15	+2
`securitySolution`	409	413	+4
total			+6

Total ESLint disabled count

id	before	after	diff
`enterpriseSearch`	14	16	+2
`securitySolution`	492	496	+4
total			+6

History

💔 Build #134943 failed 3cdb41a
💔 Build #134924 failed 2d61cca
💚 Build #134614 succeeded 2fba2ac
💚 Build #134602 succeeded 2fac0aa
💚 Build #134549 succeeded 20263e7

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

cc @tsullivan

## Summary This PR adjusts the `data-test-subj` for the global loading indicator in serverless projects such that at matches the stateful version. This makes sure that functional tests and corresponding test helper methods continue to work the same in stateful and serverless environments when comes to waiting for global loading to finish, which is a key mechanism to avoid test flakiness. ### Additional information - The serverless project specific global loading indicator was introduced with #158523 - The stateful loading indicator `data-test-subj` naming is implemented here: https://github.com/elastic/kibana/blob/main/packages/core/chrome/core-chrome-browser-internal/src/ui/loading_indicator.tsx#L61 Co-authored-by: Tim Sullivan <[email protected]>

…163697) ## Summary This PR adjusts the `data-test-subj` for the global loading indicator in serverless projects such that at matches the stateful version. This makes sure that functional tests and corresponding test helper methods continue to work the same in stateful and serverless environments when comes to waiting for global loading to finish, which is a key mechanism to avoid test flakiness. ### Additional information - The serverless project specific global loading indicator was introduced with elastic#158523 - The stateful loading indicator `data-test-subj` naming is implemented here: https://github.com/elastic/kibana/blob/main/packages/core/chrome/core-chrome-browser-internal/src/ui/loading_indicator.tsx#L61 Co-authored-by: Tim Sullivan <[email protected]> (cherry picked from commit fd08c62)

…63697) (#163745) # Backport This will backport the following commits from `main` to `8.9`: - [Adjust global loading indicator data-test-subj for projects (#163697)](#163697)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)  Co-authored-by: Robert Oskamp <[email protected]>

tsullivan force-pushed the shared-ux/chrome/navigation-polish-ii branch 2 times, most recently from 393890f to 34a6336 Compare May 27, 2023 03:48

tsullivan marked this pull request as ready for review May 27, 2023 03:48

tsullivan requested a review from a team as a code owner May 27, 2023 03:48

tsullivan requested a review from a team May 27, 2023 03:48

tsullivan added the Team:SharedUX Team label for AppEx-SharedUX (formerly Global Experience) label May 27, 2023

tsullivan self-assigned this May 27, 2023

tsullivan added Project:Serverless Work as part of the Serverless project for its initial release release_note:skip Skip the PR/issue when compiling release notes labels May 27, 2023

tsullivan force-pushed the shared-ux/chrome/navigation-polish-ii branch from 34a6336 to ae61074 Compare May 28, 2023 22:56

This was referenced May 30, 2023

[SharedUxChromeNavigation V2] Add EUI component to building blocks #158297

Merged

Add Global Search component to the serverless project header #158879

Closed

tsullivan requested a review from a team as a code owner June 2, 2023 22:15

tsullivan marked this pull request as draft June 2, 2023 22:15

tsullivan mentioned this pull request Jun 2, 2023

[Serverless] New UX for Global Search bar #158978

Merged

5 tasks

tsullivan force-pushed the shared-ux/chrome/navigation-polish-ii branch 3 times, most recently from 6c54ecc to 6727a4a Compare June 6, 2023 18:54

[Serverless Chrome] Polish of home logo and project switcher

2e904ff

tsullivan force-pushed the shared-ux/chrome/navigation-polish-ii branch from 6727a4a to 2e904ff Compare June 6, 2023 19:08

declare validateChromeStyle before it is used

8f785d1

tsullivan commented Jun 6, 2023

View reviewed changes

tsullivan added 3 commits June 12, 2023 17:04

Merge branch 'main' into shared-ux/chrome/navigation-polish-ii

3bbf1d6

fix misalignment of action menu

2fac0aa

correction to observability landing page

2fba2ac

kpatticha mentioned this pull request Jun 13, 2023

[Logs onboarding] Added give feedback button #159455

Merged

gbamparop approved these changes Jun 13, 2023

View reviewed changes

sphilipse approved these changes Jun 13, 2023

View reviewed changes

kpatticha approved these changes Jun 13, 2023

View reviewed changes

semd approved these changes Jun 13, 2023

View reviewed changes

tsullivan added 4 commits June 13, 2023 09:48

Merge branch 'main' into shared-ux/chrome/navigation-polish-ii

7328a7a

Revert project switcher

4da4059

restore cloud link

c808a4b

Merge branch 'main' into shared-ux/chrome/navigation-polish-ii

b7e3731

clintandrewhall approved these changes Jun 13, 2023

View reviewed changes

tsullivan added 4 commits June 13, 2023 10:27

fix ts for removed homeRef prop

2d61cca

update test fixture

3cdb41a

update test fixture II

cb5763f

Merge branch 'main' into shared-ux/chrome/navigation-polish-ii

3a68196

tsullivan enabled auto-merge (squash) June 14, 2023 01:24

tsullivan merged commit cabfebe into elastic:main Jun 14, 2023

kibanamachine added v8.9.0 backport:skip This commit does not require backporting labels Jun 14, 2023

This was referenced Aug 11, 2023

[Cases] Handle lens actions in Serverless #163581

Merged

Adjust global loading indicator data-test-subj for projects #163697

Merged

tsullivan deleted the shared-ux/chrome/navigation-polish-ii branch November 21, 2023 23:24

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Serverless Chrome] Polish of home logo and project switcher #158523

[Serverless Chrome] Polish of home logo and project switcher #158523

tsullivan commented May 25, 2023 •

edited

Loading

elasticmachine commented May 27, 2023

sebelga commented May 30, 2023 •

edited

Loading

tsullivan Jun 6, 2023

tsullivan Jun 6, 2023

tsullivan Jun 6, 2023

cee-chen Jun 6, 2023

tsullivan Jun 7, 2023 •

edited

Loading

tsullivan Jun 6, 2023 •

edited

Loading

tsullivan Jun 6, 2023

tsullivan Jun 6, 2023

gbamparop left a comment

sphilipse left a comment

semd left a comment

tsullivan commented Jun 13, 2023

clintandrewhall left a comment

kibana-ci commented Jun 14, 2023

API count

ESLint disabled line counts

Total ESLint disabled count

[Serverless Chrome] Polish of home logo and project switcher #158523

[Serverless Chrome] Polish of home logo and project switcher #158523

Conversation

tsullivan commented May 25, 2023 • edited Loading

Summary

Checklist

Screenshots

elasticmachine commented May 27, 2023

sebelga commented May 30, 2023 • edited Loading

tsullivan Jun 6, 2023

Choose a reason for hiding this comment

tsullivan Jun 6, 2023

Choose a reason for hiding this comment

tsullivan Jun 6, 2023

Choose a reason for hiding this comment

cee-chen Jun 6, 2023

Choose a reason for hiding this comment

tsullivan Jun 7, 2023 • edited Loading

Choose a reason for hiding this comment

tsullivan Jun 6, 2023 • edited Loading

Choose a reason for hiding this comment

tsullivan Jun 6, 2023

Choose a reason for hiding this comment

tsullivan Jun 6, 2023

Choose a reason for hiding this comment

gbamparop left a comment

Choose a reason for hiding this comment

sphilipse left a comment

Choose a reason for hiding this comment

semd left a comment

Choose a reason for hiding this comment

tsullivan commented Jun 13, 2023

clintandrewhall left a comment

Choose a reason for hiding this comment

kibana-ci commented Jun 14, 2023

💚 Build Succeeded

Metrics [docs]

Module Count

Public APIs missing comments

Async chunks

Page load bundle

API count

ESLint disabled line counts

Total ESLint disabled count

History

tsullivan commented May 25, 2023 •

edited

Loading

sebelga commented May 30, 2023 •

edited

Loading

tsullivan Jun 7, 2023 •

edited

Loading

tsullivan Jun 6, 2023 •

edited

Loading