From 0e0493aec09da3aaf3e367c003fbd432ab83e57d Mon Sep 17 00:00:00 2001
From: "opensearch-trigger-bot[bot]"
 <98922864+opensearch-trigger-bot[bot]@users.noreply.github.com>
Date: Wed, 26 Jul 2023 13:24:45 -0700
Subject: [PATCH] Refactor/remove breadcrumb styling main (#4621) (#4627)

* 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>

* 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>

* Update snapshot

Signed-off-by: Josh Romero <rmerqg@amazon.com>

* add changelog

Signed-off-by: Josh Romero <rmerqg@amazon.com>

* Update header snapshot

Signed-off-by: Josh Romero <rmerqg@amazon.com>

---------

Signed-off-by: Josh Romero <rmerqg@amazon.com>
(cherry picked from commit 983fc34bc2cf03e5106068c0b567fb993a7d9664)
Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

# Conflicts:
#	CHANGELOG.md

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
---
 src/core/public/_variables.scss               |   7 --
 .../chrome/public/assets/round_filter.svg     |   8 --
 .../header/__snapshots__/header.test.tsx.snap |  20 +---
 .../header_breadcrumbs.test.tsx.snap          |   6 +-
 src/core/public/chrome/ui/header/header.tsx   |   3 +-
 .../chrome/ui/header/header_breadcrumbs.scss  | 107 ------------------
 .../ui/header/header_breadcrumbs.test.tsx     |   6 +-
 .../chrome/ui/header/header_breadcrumbs.tsx   |  16 +--
 8 files changed, 13 insertions(+), 160 deletions(-)
 delete mode 100644 src/core/public/chrome/public/assets/round_filter.svg
 delete mode 100644 src/core/public/chrome/ui/header/header_breadcrumbs.scss

diff --git a/src/core/public/_variables.scss b/src/core/public/_variables.scss
index f77e2b4d2755..9d8077b50ad4 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 84cf36058553..000000000000
--- 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/__snapshots__/header.test.tsx.snap b/src/core/public/chrome/ui/header/__snapshots__/header.test.tsx.snap
index 806e99821270..9068e225c8ba 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
@@ -3614,19 +3614,16 @@ exports[`Header handles visibility and lock changes 1`] = `
                 "thrownError": null,
               }
             }
-            isDarkMode={false}
           >
             <EuiHeaderBreadcrumbs
               breadcrumbs={
                 Array [
                   Object {
-                    "className": "osdBreadcrumbs",
                     "data-test-subj": "breadcrumb first last",
                     "text": "test",
                   },
                 ]
               }
-              className="osdHeaderBreadcrumbs"
               data-test-subj="breadcrumbs"
               max={10}
             >
@@ -3634,20 +3631,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"
                 >
                   <div
@@ -3659,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"
                         >
@@ -8865,19 +8861,16 @@ exports[`Header renders condensed header 1`] = `
                 "thrownError": null,
               }
             }
-            isDarkMode={false}
           >
             <EuiHeaderBreadcrumbs
               breadcrumbs={
                 Array [
                   Object {
-                    "className": "osdBreadcrumbs",
                     "data-test-subj": "breadcrumb first",
                     "text": "test",
                   },
                 ]
               }
-              className="osdHeaderBreadcrumbs"
               data-test-subj="breadcrumbs"
               max={10}
             >
@@ -8885,20 +8878,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"
                 >
                   <div
@@ -8910,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"
                         >
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 2308839a19a9..5080b23e99c2 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.tsx b/src/core/public/chrome/ui/header/header.tsx
index 0e595001480d..9496b76b9980 100644
--- a/src/core/public/chrome/ui/header/header.tsx
+++ b/src/core/public/chrome/ui/header/header.tsx
@@ -115,7 +115,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;
 
   const headerTheme: EuiHeaderProps['theme'] = 'dark';
 
@@ -208,7 +208,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.scss b/src/core/public/chrome/ui/header/header_breadcrumbs.scss
deleted file mode 100644
index 5ac333e1615a..000000000000
--- 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.test.tsx b/src/core/public/chrome/ui/header/header_breadcrumbs.test.tsx
index d95e7881cf5a..2008a3f6c493 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 ba81b61e8bcd..ca50b15d5af6 100644
--- a/src/core/public/chrome/ui/header/header_breadcrumbs.tsx
+++ b/src/core/public/chrome/ui/header/header_breadcrumbs.tsx
@@ -35,18 +35,14 @@ 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$, []);
-  const className = isDarkMode ? 'osdHeaderBreadcrumbs--dark' : 'osdHeaderBreadcrumbs';
   let crumbs = breadcrumbs;
 
   if (breadcrumbs.length === 0 && appTitle) {
@@ -61,15 +57,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" />;
 }