From 4d6f4afe7a88a8f806ffad16bcce015be3eda164 Mon Sep 17 00:00:00 2001
From: Josh Romero <rmerqg@amazon.com>
Date: Tue, 30 May 2023 19:00:32 +0000
Subject: [PATCH 1/5] chore(chrome): Remove OSD breadcrumb styling and classes

Now that the breacrumb styling is coming from OUI

Signed-off-by: Josh Romero <rmerqg@amazon.com>
---
 .../header/__snapshots__/header.test.tsx.snap |  14 +--
 .../header_breadcrumbs.test.tsx.snap          |   6 +-
 .../chrome/ui/header/header_breadcrumbs.scss  | 107 ------------------
 .../chrome/ui/header/header_breadcrumbs.tsx   |  11 +-
 4 files changed, 8 insertions(+), 130 deletions(-)
 delete mode 100644 src/core/public/chrome/ui/header/header_breadcrumbs.scss

diff --git a/src/core/public/chrome/ui/header/__snapshots__/header.test.tsx.snap b/src/core/public/chrome/ui/header/__snapshots__/header.test.tsx.snap
index 4c2beb329a9..bc52d44ef90 100644
--- a/src/core/public/chrome/ui/header/__snapshots__/header.test.tsx.snap
+++ b/src/core/public/chrome/ui/header/__snapshots__/header.test.tsx.snap
@@ -3600,13 +3600,11 @@ exports[`Header handles visibility and lock changes 1`] = `
               breadcrumbs={
                 Array [
                   Object {
-                    "className": "osdBreadcrumbs",
                     "data-test-subj": "breadcrumb first last",
                     "text": "test",
                   },
                 ]
               }
-              className="osdHeaderBreadcrumbs"
               data-test-subj="breadcrumbs"
               max={10}
             >
@@ -3614,20 +3612,19 @@ exports[`Header handles visibility and lock changes 1`] = `
                 breadcrumbs={
                   Array [
                     Object {
-                      "className": "osdBreadcrumbs",
                       "data-test-subj": "breadcrumb first last",
                       "text": "test",
                     },
                   ]
                 }
-                className="euiHeaderBreadcrumbs osdHeaderBreadcrumbs"
+                className="euiHeaderBreadcrumbs"
                 data-test-subj="breadcrumbs"
                 max={10}
                 truncate={true}
               >
                 <nav
                   aria-label="breadcrumb"
-                  className="euiBreadcrumbs euiHeaderBreadcrumbs osdHeaderBreadcrumbs euiBreadcrumbs--truncate"
+                  className="euiBreadcrumbs euiHeaderBreadcrumbs euiBreadcrumbs--truncate"
                   data-test-subj="breadcrumbs"
                 >
                   <EuiInnerText>
@@ -8843,13 +8840,11 @@ exports[`Header renders condensed header 1`] = `
               breadcrumbs={
                 Array [
                   Object {
-                    "className": "osdBreadcrumbs",
                     "data-test-subj": "breadcrumb first",
                     "text": "test",
                   },
                 ]
               }
-              className="osdHeaderBreadcrumbs"
               data-test-subj="breadcrumbs"
               max={10}
             >
@@ -8857,20 +8852,19 @@ exports[`Header renders condensed header 1`] = `
                 breadcrumbs={
                   Array [
                     Object {
-                      "className": "osdBreadcrumbs",
                       "data-test-subj": "breadcrumb first",
                       "text": "test",
                     },
                   ]
                 }
-                className="euiHeaderBreadcrumbs osdHeaderBreadcrumbs"
+                className="euiHeaderBreadcrumbs"
                 data-test-subj="breadcrumbs"
                 max={10}
                 truncate={true}
               >
                 <nav
                   aria-label="breadcrumb"
-                  className="euiBreadcrumbs euiHeaderBreadcrumbs osdHeaderBreadcrumbs euiBreadcrumbs--truncate"
+                  className="euiBreadcrumbs euiHeaderBreadcrumbs euiBreadcrumbs--truncate"
                   data-test-subj="breadcrumbs"
                 >
                   <EuiInnerText>
diff --git a/src/core/public/chrome/ui/header/__snapshots__/header_breadcrumbs.test.tsx.snap b/src/core/public/chrome/ui/header/__snapshots__/header_breadcrumbs.test.tsx.snap
index 2308839a19a..5080b23e99c 100644
--- a/src/core/public/chrome/ui/header/__snapshots__/header_breadcrumbs.test.tsx.snap
+++ b/src/core/public/chrome/ui/header/__snapshots__/header_breadcrumbs.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`HeaderBreadcrumbs renders updates to the breadcrumbs$ observable 1`] = `
 <span
   aria-current="page"
-  className="euiBreadcrumb osdBreadcrumbs euiBreadcrumb--last"
+  className="euiBreadcrumb euiBreadcrumb--last"
   data-test-subj="breadcrumb first last"
   title="First"
 >
@@ -15,7 +15,7 @@ exports[`HeaderBreadcrumbs renders updates to the breadcrumbs$ observable 2`] =
 Array [
   <span
     aria-current="false"
-    className="euiBreadcrumb osdBreadcrumbs"
+    className="euiBreadcrumb"
     data-test-subj="breadcrumb first"
     title="First"
   >
@@ -23,7 +23,7 @@ Array [
   </span>,
   <span
     aria-current="page"
-    className="euiBreadcrumb osdBreadcrumbs euiBreadcrumb--last"
+    className="euiBreadcrumb euiBreadcrumb--last"
     data-test-subj="breadcrumb last"
     title="Second"
   >
diff --git a/src/core/public/chrome/ui/header/header_breadcrumbs.scss b/src/core/public/chrome/ui/header/header_breadcrumbs.scss
deleted file mode 100644
index 5ac333e1615..00000000000
--- a/src/core/public/chrome/ui/header/header_breadcrumbs.scss
+++ /dev/null
@@ -1,107 +0,0 @@
-@import "../../../../public/variables";
-
-$firstBreadcrumbPolygon: polygon(
-  0% 0%,
-  100% 0%,
-  calc(100% - #{$euiSizeS}) 100%,
-  0% 100%
-);
-$breadcrumbPolygon: polygon(
-  $euiSizeS 0%,
-  100% 0%,
-  calc(100% - #{$euiSizeS}) 100%,
-  0% 100%
-);
-
-/* remove background color on autofocus for euiBreadcrumbs in Popover */
-.euiBreadcrumbs__inPopover {
-  .euiLink.euiLink--text:focus {
-    background: none;
-  }
-}
-
-.osdHeaderBreadcrumbs {
-  /* common for both light & dark theme */
-  .osdBreadcrumbs,
-  &--dark .osdBreadcrumbs {
-    clip-path: $breadcrumbPolygon;
-    padding: $euiSizeXS - 2.5 $euiSizeL - $euiSizeXS;
-
-    &:first-child {
-      clip-path: $firstBreadcrumbPolygon;
-    }
-  }
-
-  .osdBreadcrumbs {
-    background-color: $osdHeaderBreadcrumbGrayBackground;
-
-    &:last-child {
-      background-color: $osdHeaderBreadcrumbBlueBackground;
-    }
-  }
-
-  /* only light mode */
-  .euiBreadcrumb__collapsedLink {
-    color: $osdHeaderBreadcrumbCollapsedLink;
-    background: $euiColorEmptyShade;
-  }
-
-  .euiLink.euiLink--subdued:focus {
-    background: $euiColorEmptyShade;
-    outline: $euiSizeXS - 1 solid $osdHeaderBreadcrumbBlueBackground;
-  }
-
-  /* common for dark & light mode */
-  &,
-  &--dark {
-    /*
-  filter defines a custom filter effect by grouping atomic filter primitives!
-  here we are using Gaussian filter with stdDeviation for applying
-  border-radius on clipped background.
-  */
-    filter: url("../../public/assets/round_filter.svg#round");
-
-    button {
-      line-height: inherit;
-    }
-
-    .euiBreadcrumbSeparator {
-      display: none;
-    }
-
-    .euiPopover__anchor {
-      padding: 0 $euiSizeS;
-    }
-
-    .euiBreadcrumb:not(.euiBreadcrumb:last-child) {
-      margin-right: 0;
-    }
-  }
-
-  /* only dark mode */
-  &--dark {
-    .osdBreadcrumbs {
-      background-color: $osdHeaderBreadcrumbMidnightSkyMediumBackground;
-      color: $osdHeaderBreadcrumbMidnightSkyMediumLightColor;
-
-      &:hover {
-        color: $osdHeaderBreadcrumbMidnightSkyMediumLightHoverColor;
-      }
-
-      &:last-child {
-        background-color: $osdHeaderBreadcrumbPacificSkyDarkestBackground;
-        color: $euiColorFullShade;
-      }
-    }
-
-    .euiBreadcrumb__collapsedLink {
-      color: $euiColorGhost;
-      background: $euiColorEmptyShade;
-    }
-
-    .euiLink.euiLink--subdued:focus {
-      background: $euiColorEmptyShade;
-      outline: $euiSizeXS - 1 solid $osdHeaderBreadcrumbPacificSkyDarkestBackground;
-    }
-  }
-}
diff --git a/src/core/public/chrome/ui/header/header_breadcrumbs.tsx b/src/core/public/chrome/ui/header/header_breadcrumbs.tsx
index ba81b61e8bc..aa97e3c846d 100644
--- a/src/core/public/chrome/ui/header/header_breadcrumbs.tsx
+++ b/src/core/public/chrome/ui/header/header_breadcrumbs.tsx
@@ -46,7 +46,6 @@ interface Props {
 export function HeaderBreadcrumbs({ appTitle$, breadcrumbs$, isDarkMode }: Props) {
   const appTitle = useObservable(appTitle$, 'OpenSearch Dashboards');
   const breadcrumbs = useObservable(breadcrumbs$, []);
-  const className = isDarkMode ? 'osdHeaderBreadcrumbs--dark' : 'osdHeaderBreadcrumbs';
   let crumbs = breadcrumbs;
 
   if (breadcrumbs.length === 0 && appTitle) {
@@ -61,15 +60,7 @@ export function HeaderBreadcrumbs({ appTitle$, breadcrumbs$, isDarkMode }: Props
       i === 0 && 'first',
       i === breadcrumbs.length - 1 && 'last'
     ),
-    className: classNames('osdBreadcrumbs'),
   }));
 
-  return (
-    <EuiHeaderBreadcrumbs
-      breadcrumbs={crumbs}
-      max={10}
-      data-test-subj="breadcrumbs"
-      className={className}
-    />
-  );
+  return <EuiHeaderBreadcrumbs breadcrumbs={crumbs} max={10} data-test-subj="breadcrumbs" />;
 }

From 0268fe55aa70bfcc10d8648f2594edcd9cfd039a Mon Sep 17 00:00:00 2001
From: Josh Romero <rmerqg@amazon.com>
Date: Tue, 30 May 2023 22:27:31 +0000
Subject: [PATCH 2/5] chore (chrome): Remove other remnants of breadcrumb
 styling

Essentially reverting:
- https://github.com/opensearch-project/OpenSearch-Dashboards/pull/1954
- https://github.com/opensearch-project/OpenSearch-Dashboards/pull/2085

Signed-off-by: Josh Romero <rmerqg@amazon.com>
---
 src/core/public/_variables.scss                           | 7 -------
 src/core/public/chrome/public/assets/round_filter.svg     | 8 --------
 src/core/public/chrome/ui/header/header.tsx               | 3 +--
 .../public/chrome/ui/header/header_breadcrumbs.test.tsx   | 6 +-----
 src/core/public/chrome/ui/header/header_breadcrumbs.tsx   | 5 +----
 5 files changed, 3 insertions(+), 26 deletions(-)
 delete mode 100644 src/core/public/chrome/public/assets/round_filter.svg

diff --git a/src/core/public/_variables.scss b/src/core/public/_variables.scss
index f77e2b4d275..9d8077b50ad 100644
--- a/src/core/public/_variables.scss
+++ b/src/core/public/_variables.scss
@@ -1,10 +1,3 @@
 @import "@elastic/eui/src/global_styling/variables/header";
 
 $osdHeaderOffset: $euiHeaderHeightCompensation;
-$osdHeaderBreadcrumbBlueBackground: #b9d9eb;
-$osdHeaderBreadcrumbGrayBackground: #d9e1e2;
-$osdHeaderBreadcrumbCollapsedLink: #002a3a;
-$osdHeaderBreadcrumbPacificSkyDarkestBackground: #163f66;
-$osdHeaderBreadcrumbMidnightSkyMediumBackground: #4c636f;
-$osdHeaderBreadcrumbMidnightSkyMediumLightColor: #96a0a5;
-$osdHeaderBreadcrumbMidnightSkyMediumLightHoverColor: #b0b8bb;
diff --git a/src/core/public/chrome/public/assets/round_filter.svg b/src/core/public/chrome/public/assets/round_filter.svg
deleted file mode 100644
index 84cf3605855..00000000000
--- a/src/core/public/chrome/public/assets/round_filter.svg
+++ /dev/null
@@ -1,8 +0,0 @@
-<svg style="visibility: hidden; position: absolute;" width="0" height="0" xmlns="http://www.w3.org/2000/svg" version="1.1">
-  <defs>
-        <filter id="round"><feGaussianBlur in="SourceGraphic" stdDeviation="2"/>    
-            <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9" result="goo" />
-            <feComposite in="SourceGraphic" in2="goo" operator="atop"/>
-        </filter>
-    </defs>
-</svg>
\ No newline at end of file
diff --git a/src/core/public/chrome/ui/header/header.tsx b/src/core/public/chrome/ui/header/header.tsx
index a78371f4f26..f8eb7c9e705 100644
--- a/src/core/public/chrome/ui/header/header.tsx
+++ b/src/core/public/chrome/ui/header/header.tsx
@@ -114,7 +114,7 @@ export function Header({
   const toggleCollapsibleNavRef = createRef<HTMLButtonElement & { euiAnimate: () => void }>();
   const navId = htmlIdGenerator()();
   const className = classnames('hide-for-sharing', 'headerGlobalNav');
-  const { useExpandedHeader = true, darkMode } = branding;
+  const { useExpandedHeader = true } = branding;
 
   return (
     <>
@@ -202,7 +202,6 @@ export function Header({
             <HeaderBreadcrumbs
               appTitle$={observables.appTitle$}
               breadcrumbs$={observables.breadcrumbs$}
-              isDarkMode={darkMode}
             />
 
             <EuiHeaderSectionItem border="none">
diff --git a/src/core/public/chrome/ui/header/header_breadcrumbs.test.tsx b/src/core/public/chrome/ui/header/header_breadcrumbs.test.tsx
index d95e7881cf5..2008a3f6c49 100644
--- a/src/core/public/chrome/ui/header/header_breadcrumbs.test.tsx
+++ b/src/core/public/chrome/ui/header/header_breadcrumbs.test.tsx
@@ -38,11 +38,7 @@ describe('HeaderBreadcrumbs', () => {
   it('renders updates to the breadcrumbs$ observable', () => {
     const breadcrumbs$ = new BehaviorSubject([{ text: 'First' }]);
     const wrapper = mount(
-      <HeaderBreadcrumbs
-        appTitle$={new BehaviorSubject('')}
-        breadcrumbs$={breadcrumbs$}
-        isDarkMode={false}
-      />
+      <HeaderBreadcrumbs appTitle$={new BehaviorSubject('')} breadcrumbs$={breadcrumbs$} />
     );
     expect(wrapper.find('.euiBreadcrumb')).toMatchSnapshot();
 
diff --git a/src/core/public/chrome/ui/header/header_breadcrumbs.tsx b/src/core/public/chrome/ui/header/header_breadcrumbs.tsx
index aa97e3c846d..ca50b15d5af 100644
--- a/src/core/public/chrome/ui/header/header_breadcrumbs.tsx
+++ b/src/core/public/chrome/ui/header/header_breadcrumbs.tsx
@@ -35,15 +35,12 @@ import useObservable from 'react-use/lib/useObservable';
 import { Observable } from 'rxjs';
 import { ChromeBreadcrumb } from '../../chrome_service';
 
-import './header_breadcrumbs.scss';
-
 interface Props {
   appTitle$: Observable<string>;
   breadcrumbs$: Observable<ChromeBreadcrumb[]>;
-  isDarkMode?: boolean;
 }
 
-export function HeaderBreadcrumbs({ appTitle$, breadcrumbs$, isDarkMode }: Props) {
+export function HeaderBreadcrumbs({ appTitle$, breadcrumbs$ }: Props) {
   const appTitle = useObservable(appTitle$, 'OpenSearch Dashboards');
   const breadcrumbs = useObservable(breadcrumbs$, []);
   let crumbs = breadcrumbs;

From 770cff0f074b9cad12b6040eacb5fd94e6dfd235 Mon Sep 17 00:00:00 2001
From: Josh Romero <rmerqg@amazon.com>
Date: Wed, 21 Jun 2023 00:37:14 +0000
Subject: [PATCH 3/5] Update snapshot

Signed-off-by: Josh Romero <rmerqg@amazon.com>
---
 .../chrome/ui/header/__snapshots__/header.test.tsx.snap     | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/core/public/chrome/ui/header/__snapshots__/header.test.tsx.snap b/src/core/public/chrome/ui/header/__snapshots__/header.test.tsx.snap
index bc52d44ef90..23222d4ed7f 100644
--- a/src/core/public/chrome/ui/header/__snapshots__/header.test.tsx.snap
+++ b/src/core/public/chrome/ui/header/__snapshots__/header.test.tsx.snap
@@ -3594,7 +3594,6 @@ exports[`Header handles visibility and lock changes 1`] = `
                 "thrownError": null,
               }
             }
-            isDarkMode={false}
           >
             <EuiHeaderBreadcrumbs
               breadcrumbs={
@@ -3630,7 +3629,7 @@ exports[`Header handles visibility and lock changes 1`] = `
                   <EuiInnerText>
                     <span
                       aria-current="page"
-                      className="euiBreadcrumb osdBreadcrumbs euiBreadcrumb--last"
+                      className="euiBreadcrumb euiBreadcrumb--last"
                       data-test-subj="breadcrumb first last"
                       title="test"
                     >
@@ -8834,7 +8833,6 @@ exports[`Header renders condensed header 1`] = `
                 "thrownError": null,
               }
             }
-            isDarkMode={false}
           >
             <EuiHeaderBreadcrumbs
               breadcrumbs={
@@ -8870,7 +8868,7 @@ exports[`Header renders condensed header 1`] = `
                   <EuiInnerText>
                     <span
                       aria-current="page"
-                      className="euiBreadcrumb osdBreadcrumbs euiBreadcrumb--last"
+                      className="euiBreadcrumb euiBreadcrumb--last"
                       data-test-subj="breadcrumb first"
                       title="test"
                     >

From 80f633bb1e98ff155fb5f57b91ddc1f6460cef90 Mon Sep 17 00:00:00 2001
From: Josh Romero <rmerqg@amazon.com>
Date: Tue, 25 Jul 2023 22:20:17 +0000
Subject: [PATCH 4/5] add changelog

Signed-off-by: Josh Romero <rmerqg@amazon.com>
---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index a3c6af27a48..0752120c000 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -102,6 +102,7 @@ Inspired from [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 - [Console] Migrate `/lib/mappings/` module to TypeScript ([#4008](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4008))
 - [Console] Migrate `/lib/autocomplete/` module to TypeScript ([#4148](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4148))
 - [Dashboard] Restructure the `Dashboard` plugin folder to be more cohesive with the project ([#4575](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4575))
+- [Chrome] Remove breadcrumb style overrrides ([#4621](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4621))
 
 ### 🔩 Tests
 

From b92a0feb6d41fa5113fa802758a9e364c25515cb Mon Sep 17 00:00:00 2001
From: Josh Romero <rmerqg@amazon.com>
Date: Wed, 26 Jul 2023 17:39:21 +0000
Subject: [PATCH 5/5] Update header snapshot

Signed-off-by: Josh Romero <rmerqg@amazon.com>
---
 .../chrome/ui/header/__snapshots__/header.test.tsx.snap       | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/core/public/chrome/ui/header/__snapshots__/header.test.tsx.snap b/src/core/public/chrome/ui/header/__snapshots__/header.test.tsx.snap
index eb10f3710d9..9068e225c8b 100644
--- a/src/core/public/chrome/ui/header/__snapshots__/header.test.tsx.snap
+++ b/src/core/public/chrome/ui/header/__snapshots__/header.test.tsx.snap
@@ -3655,7 +3655,7 @@ exports[`Header handles visibility and lock changes 1`] = `
                       <EuiInnerText>
                         <span
                           aria-current="page"
-                          className="euiBreadcrumb osdBreadcrumbs euiBreadcrumb--last"
+                          className="euiBreadcrumb euiBreadcrumb--last"
                           data-test-subj="breadcrumb first last"
                           title="test"
                         >
@@ -8902,7 +8902,7 @@ exports[`Header renders condensed header 1`] = `
                       <EuiInnerText>
                         <span
                           aria-current="page"
-                          className="euiBreadcrumb osdBreadcrumbs euiBreadcrumb--last"
+                          className="euiBreadcrumb euiBreadcrumb--last"
                           data-test-subj="breadcrumb first"
                           title="test"
                         >