From b3fcc97f9333fd5f1fb4f5012addfbd8e58ebdee Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nuno=20G=C3=B3is?= <github@nunogois.com>
Date: Mon, 16 Jan 2023 12:09:38 +0000
Subject: [PATCH] fix: small breadcrumb adjustments (#2893)

https://linear.app/unleash/issue/2-577/small-breadcrumb-adjustments

Includes small adjustments to the breadcrumb navigation component.

### Long chain path (ellipts if width > 200px)

![image](https://user-images.githubusercontent.com/14320932/212155100-973c2b31-d990-4c0a-a67b-3d3110231569.png)

### Long final path (no longer ellipts as long as it has enough
remaining space)

![image](https://user-images.githubusercontent.com/14320932/212156184-041f671a-6bf5-4e43-9ef0-4c89015837cc.png)

### Long final path with resized window (still ellipts when needed)

![image](https://user-images.githubusercontent.com/14320932/212157091-6453c881-1c0f-4785-935e-4993ed479280.png)
---
 .../common/BreadcrumbNav/BreadcrumbNav.tsx    | 36 +++++++++----------
 frontend/src/themes/theme.ts                  |  4 +--
 frontend/src/themes/themeStyles.ts            |  6 ++++
 3 files changed, 24 insertions(+), 22 deletions(-)

diff --git a/frontend/src/component/common/BreadcrumbNav/BreadcrumbNav.tsx b/frontend/src/component/common/BreadcrumbNav/BreadcrumbNav.tsx
index 3b73339550..dc60d88274 100644
--- a/frontend/src/component/common/BreadcrumbNav/BreadcrumbNav.tsx
+++ b/frontend/src/component/common/BreadcrumbNav/BreadcrumbNav.tsx
@@ -3,27 +3,29 @@ import { Link, useLocation } from 'react-router-dom';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import AccessContext from 'contexts/AccessContext';
 import { useContext } from 'react';
-import StringTruncator from '../StringTruncator/StringTruncator';
 import { styled } from '@mui/material';
+import { textTruncated } from 'themes/themeStyles';
 
 const StyledBreadcrumbContainer = styled('div')(({ theme }) => ({
     height: theme.spacing(2.5),
     margin: theme.spacing(2, 0),
 }));
 
-const StyledParagraph = styled('p')({
-    color: 'inherit',
-    '& > *': {
-        verticalAlign: 'middle',
+const StyledBreadcrumbs = styled(Breadcrumbs)({
+    '& > ol': {
+        flexWrap: 'nowrap',
+        '& > li:last-child': {
+            minWidth: 0,
+        },
     },
 });
 
+const StyledParagraph = styled('p')(textTruncated);
+
 const StyledLink = styled(Link)(({ theme }) => ({
-    textDecoration: 'none',
     '& > *': {
-        verticalAlign: 'middle',
+        maxWidth: theme.spacing(25),
     },
-    color: theme.palette.primary.main,
 }));
 
 const BreadcrumbNav = () => {
@@ -60,17 +62,13 @@ const BreadcrumbNav = () => {
                     <ConditionallyRender
                         condition={paths.length > 1}
                         show={
-                            <Breadcrumbs aria-label="Breadcrumbs">
+                            <StyledBreadcrumbs aria-label="Breadcrumbs">
                                 {paths.map((path, index) => {
                                     const lastItem = index === paths.length - 1;
                                     if (lastItem) {
                                         return (
                                             <StyledParagraph key={path}>
-                                                <StringTruncator
-                                                    text={path}
-                                                    maxWidth="200"
-                                                    maxLength={25}
-                                                />
+                                                {path}
                                             </StyledParagraph>
                                         );
                                     }
@@ -87,15 +85,13 @@ const BreadcrumbNav = () => {
 
                                     return (
                                         <StyledLink key={path} to={link}>
-                                            <StringTruncator
-                                                maxLength={25}
-                                                text={path}
-                                                maxWidth="200"
-                                            />
+                                            <StyledParagraph>
+                                                {path}
+                                            </StyledParagraph>
                                         </StyledLink>
                                     );
                                 })}
-                            </Breadcrumbs>
+                            </StyledBreadcrumbs>
                         }
                     />
                 }
diff --git a/frontend/src/themes/theme.ts b/frontend/src/themes/theme.ts
index a885e11c26..e929184c6d 100644
--- a/frontend/src/themes/theme.ts
+++ b/frontend/src/themes/theme.ts
@@ -190,9 +190,9 @@ export default createTheme({
                     fontSize: '0.875rem',
                     '& a': {
                         color: colors.purple[900],
-                        textDecoration: 'underline',
+                        textDecoration: 'none',
                         '&:hover': {
-                            textDecoration: 'none',
+                            textDecoration: 'underline',
                         },
                     },
                 },
diff --git a/frontend/src/themes/themeStyles.ts b/frontend/src/themes/themeStyles.ts
index 55fb615692..923de4e369 100644
--- a/frontend/src/themes/themeStyles.ts
+++ b/frontend/src/themes/themeStyles.ts
@@ -29,6 +29,12 @@ export const textCenter = {
     textAlign: 'center',
 } as const;
 
+export const textTruncated = {
+    textOverflow: 'ellipsis',
+    overflow: 'hidden',
+    whiteSpace: 'nowrap',
+} as const;
+
 export const flexRow = {
     display: 'flex',
     alignItems: 'center',