From 274b4f4a368673aa988e7e8001c20d626046602f Mon Sep 17 00:00:00 2001
From: Anton Dosov <anton.dosov@elastic.co>
Date: Thu, 23 Nov 2023 16:12:55 +0100
Subject: [PATCH] [Serverless] Fix truncation in breadcrumbs (#171770)

## Summary

Fix truncation in breadcrumbs when the header doesn't fit:
https://css-tricks.com/flexbox-truncated-text/
I noticed this issue while working on
https://github.com/elastic/kibana/issues/170758

(look at breadcrumbs)


https://github.com/elastic/kibana/assets/7784120/921339be-c018-4370-be2c-54ced982d0b2


Note: the root breadcrumb will be fixed with EUI update
https://github.com/elastic/eui/pull/7375
---
 .../src/ui/project/header.tsx                 | 20 ++++++++++++++++---
 .../impl/src/redirect_app_links.component.tsx |  2 ++
 .../impl/src/redirect_app_links.container.tsx | 10 ++++++++--
 .../impl/src/redirect_app_links.tsx           | 12 +++++++----
 .../link/redirect_app/types/index.d.ts        |  6 +++++-
 5 files changed, 40 insertions(+), 10 deletions(-)

diff --git a/packages/core/chrome/core-chrome-browser-internal/src/ui/project/header.tsx b/packages/core/chrome/core-chrome-browser-internal/src/ui/project/header.tsx
index 30fe35be0b551..80f108c8be784 100644
--- a/packages/core/chrome/core-chrome-browser-internal/src/ui/project/header.tsx
+++ b/packages/core/chrome/core-chrome-browser-internal/src/ui/project/header.tsx
@@ -62,6 +62,17 @@ const getHeaderCss = ({ size }: EuiThemeComputed) => ({
       top: 2px;
     `,
   },
+  leftHeaderSection: css`
+    // needed to enable breadcrumbs truncation
+    min-width: 0;
+    flex-shrink: 1;
+  `,
+  breadcrumbsSectionItem: css`
+    min-width: 0; // needed to enable breadcrumbs truncation
+  `,
+  redirectAppLinksContainer: css`
+    min-width: 0; // needed to enable breadcrumbs truncation
+  `,
 });
 
 type HeaderCss = ReturnType<typeof getHeaderCss>;
@@ -181,7 +192,7 @@ export const ProjectHeader = ({
       <header data-test-subj="kibanaProjectHeader">
         <div id="globalHeaderBars" data-test-subj="headerGlobalNav" className="header__bars">
           <EuiHeader position="fixed" className="header__firstBar">
-            <EuiHeaderSection grow={false}>
+            <EuiHeaderSection grow={false} css={headerCss.leftHeaderSection}>
               <Router history={application.history}>
                 <ProjectNavigation toggleSideNav={toggleSideNav}>{children}</ProjectNavigation>
               </Router>
@@ -196,8 +207,11 @@ export const ProjectHeader = ({
                 />
               </EuiHeaderSectionItem>
 
-              <EuiHeaderSectionItem>
-                <RedirectAppLinks coreStart={{ application }}>
+              <EuiHeaderSectionItem css={headerCss.breadcrumbsSectionItem}>
+                <RedirectAppLinks
+                  coreStart={{ application }}
+                  css={headerCss.redirectAppLinksContainer}
+                >
                   <Breadcrumbs breadcrumbs$={observables.breadcrumbs$} />
                 </RedirectAppLinks>
               </EuiHeaderSectionItem>
diff --git a/packages/shared-ux/link/redirect_app/impl/src/redirect_app_links.component.tsx b/packages/shared-ux/link/redirect_app/impl/src/redirect_app_links.component.tsx
index 96e80af246511..3705b5885f1ab 100644
--- a/packages/shared-ux/link/redirect_app/impl/src/redirect_app_links.component.tsx
+++ b/packages/shared-ux/link/redirect_app/impl/src/redirect_app_links.component.tsx
@@ -29,6 +29,7 @@ export const RedirectAppLinks: FC<RedirectAppLinksComponentProps> = ({
   children,
   navigateToUrl,
   currentAppId,
+  ...containerProps
 }) => {
   const containerRef = useRef<HTMLDivElement>(null);
 
@@ -50,6 +51,7 @@ export const RedirectAppLinks: FC<RedirectAppLinksComponentProps> = ({
       ref={containerRef}
       css={redirectAppLinksStyles}
       data-test-subj="kbnRedirectAppLink"
+      {...containerProps}
     >
       {children}
     </div>
diff --git a/packages/shared-ux/link/redirect_app/impl/src/redirect_app_links.container.tsx b/packages/shared-ux/link/redirect_app/impl/src/redirect_app_links.container.tsx
index 9a069881b2128..da227ab023cbb 100644
--- a/packages/shared-ux/link/redirect_app/impl/src/redirect_app_links.container.tsx
+++ b/packages/shared-ux/link/redirect_app/impl/src/redirect_app_links.container.tsx
@@ -7,6 +7,7 @@
  */
 
 import React, { FC } from 'react';
+import type { RedirectAppLinksComponentProps } from '@kbn/shared-ux-link-redirect-app-types';
 
 import { useServices } from './services';
 import { RedirectAppLinks as Component } from './redirect_app_links.component';
@@ -22,6 +23,11 @@ import { RedirectAppLinks as Component } from './redirect_app_links.component';
  * </RedirectAppLinks>
  * ```
  */
-export const RedirectAppLinks: FC<{}> = ({ children }) => (
-  <Component {...useServices()}>{children}</Component>
+export const RedirectAppLinks: FC<Omit<RedirectAppLinksComponentProps, 'navigateToUrl'>> = ({
+  children,
+  ...props
+}) => (
+  <Component {...useServices()} {...props}>
+    {children}
+  </Component>
 );
diff --git a/packages/shared-ux/link/redirect_app/impl/src/redirect_app_links.tsx b/packages/shared-ux/link/redirect_app/impl/src/redirect_app_links.tsx
index 2909dcdbda17d..89d8a61531e9b 100644
--- a/packages/shared-ux/link/redirect_app/impl/src/redirect_app_links.tsx
+++ b/packages/shared-ux/link/redirect_app/impl/src/redirect_app_links.tsx
@@ -25,10 +25,11 @@ const isKibanaContract = (services: any): services is RedirectAppLinksKibanaDepe
  * with which consumers can wrap their components or solutions.
  */
 export const RedirectAppLinks: FC<RedirectAppLinksProps> = ({ children, ...props }) => {
-  const container = <RedirectAppLinksContainer>{children}</RedirectAppLinksContainer>;
-
   if (isKibanaContract(props)) {
-    const { coreStart } = props;
+    const { coreStart, ...containerProps } = props;
+    const container = (
+      <RedirectAppLinksContainer {...containerProps}>{children}</RedirectAppLinksContainer>
+    );
     return (
       <RedirectAppLinksKibanaProvider {...{ coreStart }}>
         {container}
@@ -36,7 +37,10 @@ export const RedirectAppLinks: FC<RedirectAppLinksProps> = ({ children, ...props
     );
   }
 
-  const { navigateToUrl, currentAppId } = props;
+  const { navigateToUrl, currentAppId, ...containerProps } = props;
+  const container = (
+    <RedirectAppLinksContainer {...containerProps}>{children}</RedirectAppLinksContainer>
+  );
   return (
     <RedirectAppLinksProvider {...{ currentAppId, navigateToUrl }}>
       {container}
diff --git a/packages/shared-ux/link/redirect_app/types/index.d.ts b/packages/shared-ux/link/redirect_app/types/index.d.ts
index 186e86af89435..01899edea65d3 100644
--- a/packages/shared-ux/link/redirect_app/types/index.d.ts
+++ b/packages/shared-ux/link/redirect_app/types/index.d.ts
@@ -32,7 +32,11 @@ export interface RedirectAppLinksKibanaDependencies {
 }
 
 /** Props for the `RedirectAppLinks` component. */
-export type RedirectAppLinksProps = RedirectAppLinksServices | RedirectAppLinksKibanaDependencies;
+export type RedirectAppLinksProps = (
+  | RedirectAppLinksServices
+  | RedirectAppLinksKibanaDependencies
+) &
+  DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
 
 /** Props for the `RedirectAppLinksComponent`. */
 export interface RedirectAppLinksComponentProps