[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 #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 elastic/eui#7375
elastic · Nov 23, 2023 · 274b4f4 · 274b4f4
1 parent 0e3351c
commit 274b4f4
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 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
@@ -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
@@ -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
@@ -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
@@ -25,18 +25,22 @@ 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}
       </RedirectAppLinksKibanaProvider>
     );
   }
 
-  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
@@ -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