[SharedUxChromeNavigation V2] Remove "v1" implementation

[sebelga]

This PR replaces the "v1" version of the shared ux chrome navigation package with the new "v2" components introduced in #158297.

Changes

• Replace old components with the new ones
• Added (temporarily) support for href along with link (deeplink id). This will be removed in a following PR
• Replaced the integration of the "v1" component in the serverless_search and serverless_observability side navigation.

Notes for reviewer

• Apart from replacing the existing component and allow a href prop to be passed (and fixing the tests) there hasn't been an changed in the implementation from [SharedUxChromeNavigation V2] Add EUI component to building blocks #158297. Meaning that all the "changes" in the navigation.stories.ts files are simply the result of overriding version 1 with version 2.
• How to test:
  • Launch kibana for search and observability yarn serverless oblt | yarn serverless es and make sure the side navigation works as expected.

Fixes #157707

[elasticmachine]

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

[tsullivan]

Left a few small comments about organization.

[tsullivan]

Left a few small comments about organization.

[tsullivan]

We must include the "recently accessed" slot in the solution navs

[sphilipse]

LGTM

[sebelga]

Thanks for the review @tsullivan ! I applied your changes, can you have another look? Cheers 👍

[jbudz]

limits.yml

[tsullivan]

LGTM!

[kpatticha]

Observability serverless changes LGTM.

I still see the bug #158376. Will be handled in a separate PR?

[kibana-ci]

💚 Build Succeeded

• Buildkite Build
• Commit: 400d23e
• Storybooks Preview

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
serverlessObservability	28	40	+12
serverlessSearch	73	85	+12
total			+24

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	20	46	+26

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.4KB	51.4KB	+6.0B

Public APIs missing exports

Total count of every type that is part of your API that should be exported but is not. This will cause broken links in the API documentation system. Target amount is 0. Run node scripts/build_api_docs --plugin [yourplugin] --stats exports for more detailed information.

id	before	after	diff
@kbn/shared-ux-chrome-navigation	3	7	+4

Page load bundle

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

id	before	after	diff
serverlessObservability	21.2KB	26.1KB	+4.9KB
serverlessSearch	26.1KB	30.1KB	+4.0KB
total			+8.9KB

Unknown metric groups

API count

id	before	after	diff
@kbn/core-chrome-browser	137	138	+1
@kbn/shared-ux-chrome-navigation	37	76	+39
total			+40

ESLint disabled line counts

id	before	after	diff
enterpriseSearch	19	21	+2
securitySolution	414	418	+4
total			+6

Total ESLint disabled count

id	before	after	diff
enterpriseSearch	20	22	+2
securitySolution	498	502	+4
total			+6

History

• 💚 Build #132584 succeeded b2ab7d7
• 💚 Build #132510 succeeded ad04a3e
• 💔 Build #132095 failed 558622c

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

[tsullivan]

It looks like #158376 requires a minimal fix, so we should do it in this PR

[tsullivan]

It looks like we should prepend the basePath to href in a single place, to solve #158376 and not repeat the code.

Maybe something like:

  const rootHref = item.deepLink?.href ?? item.href;
  const href = rootHref ? basePath.prepend(rootHref) : undefined;

[sebelga]

If you don't mind I will address this in a following PR. As I mentioned earlier the href are going away in the following PR so I don't think we should fix it.

[sebelga]

Thanks for the review @kpatticha

I still see the bug #158376. Will be handled in a separate PR?

I am working on #158658 which will remove support for href. All links will come from Deeplinks which should have the correct base path.

[tsullivan]

I'm approving this for @sebelga to be able to merge this in his working time. I think it's important to address the fix for opening links in a new tab, since solutions teams need that for testing. I took a few minutes with it, and can propose this patch:

commit bee6dabd4ae9ed73ce79908cb311ad946c837e4a
Author: Timothy Sullivan <tsullivan@elastic.co>
Date:   Mon Jun 5 10:46:08 2023 -0700

    fix open-in-new-tab

diff --git a/packages/shared-ux/chrome/navigation/src/ui/components/navigation_section_ui.tsx b/packages/shared-ux/chrome/navigation/src/ui/components/navigation_section_ui.tsx
index a592e6cc539..96913040494 100644
--- a/packages/shared-ux/chrome/navigation/src/ui/components/navigation_section_ui.tsx
+++ b/packages/shared-ux/chrome/navigation/src/ui/components/navigation_section_ui.tsx
@@ -23,19 +23,22 @@ const navigationNodeToEuiItem = (
   item: ChromeProjectNavigationNodeEnhanced,
   { navigateToUrl, basePath }: { navigateToUrl: NavigateToUrlFn; basePath: BasePathService }
 ): EuiSideNavItemType<unknown> => {
-  const href = item.deepLink?.href ?? item.href;
+  let href = item.deepLink?.href ?? item.href;
   const id = item.path ? item.path.join('.') : item.id;

+  let onClick: undefined | ((event: React.MouseEvent) => void);
+  if (href) {
+    const fullHref = (href = basePath.prepend(href));
+    onClick = (event: React.MouseEvent) => {
+      event.preventDefault();
+      navigateToUrl(fullHref);
+    };
+  }
+
   return {
     id,
     name: item.title,
-    onClick:
-      href !== undefined
-        ? (event: React.MouseEvent) => {
-            event.preventDefault();
-            navigateToUrl(basePath.prepend(href!));
-          }
-        : undefined,
+    onClick,
     href,
     renderItem: item.renderItem,
     items: item.children?.map((_item) =>