Fix breadcrumb styles for Wazuh Dashboard based on OSD 2.3.x

CHANGELOG.md

@@ -16,8 +16,10 @@ All notable changes to the Wazuh app project will be documented in this file.
 - The endpoint `/agents/summary/status` response was adapted. [#3874](https://github.com/wazuh/wazuh-kibana-app/pull/3874)
 - Changed loading icons of the Agents Overview section to work independently [#4363](https://github.com/wazuh/wazuh-kibana-app/pull/4363)
 - Enhance the message shown when a mismatch between Wazuh API and Wazuh APP occurs [#4544](https://github.com/wazuh/wazuh-kibana-app/pull/4544)
+- Changed breadcrumb styling to support OpenSearch dashboard 2.x. [#4649](https://github.com/wazuh/wazuh-kibana-app/pull/4649)
 
 ### Removed
+
 - Removed custom styles from kibana 7.9.0 [#4491](https://github.com/wazuh/wazuh-kibana-app/pull/4491)
 
 ### Fixed

public/components/common/globalBreadcrumb/globalBreadcrumb.scss

@@ -1,8 +1,4 @@
-nav.euiBreadcrumbs.wz-global-breadcrumb span.euiBreadcrumb[title=""]:first-child{
-  display: none;
-}
-
-.euiBreadcrumbs--truncate .wz-global-breadcrumb .euiBreadcrumb:not(.euiBreadcrumb--collapsed) span.euiToolTipAnchor{
+.euiBreadcrumbs--truncate .wz-global-breadcrumb .euiBreadcrumb:not(.euiBreadcrumb--collapsed) span.euiToolTipAnchor {
   max-width: 100%;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -14,18 +10,29 @@ nav.euiBreadcrumbs.wz-global-breadcrumb span.euiBreadcrumb[title=""]:first-child
   padding: 0px;
 }
 
-.wz-global-breadcrumb-btn{
-  max-width: unset!important;
+.wz-global-breadcrumb-btn {
+  max-width: unset !important;
 }
 
 @media screen and (-webkit-min-device-pixel-ratio: 0) {
-  _::-webkit-full-page-media, _:future, :root , .wz-global-breadcrumb {
+
+  _::-webkit-full-page-media,
+  _:future,
+  :root,
+  .wz-global-breadcrumb {
     line-height: 1.5;
   }
 }
 
 @-moz-document url-prefix() {
   .wz-global-breadcrumb #breadcrumbNoTitle {
-    height: auto!important;
+    height: auto !important;
   }
 }
+
+// styles for opensearch >2.x
+
+.osdHeaderBreadcrumbs ,
+.osdHeaderBreadcrumbs--dark {
+  filter: none;
+}

public/components/common/globalBreadcrumb/globalBreadcrumb.tsx

@@ -1,12 +1,12 @@
 import React, { Component } from 'react';
-import { EuiBreadcrumbs, EuiToolTip } from '@elastic/eui';
+import { EuiBreadcrumbs } from '@elastic/eui';
 import { connect } from 'react-redux';
 import './globalBreadcrumb.scss';
 import { AppNavigate } from '../../../react-services/app-navigate';
 import { getAngularModule } from '../../../kibana-services';
 
 class WzGlobalBreadcrumb extends Component {
-  props: { state: { breadcrumb: [] } };
+  props: { state: { breadcrumb: [{ agent; text }] } };
   constructor(props) {
     super(props);
     this.props = props;
@@ -15,46 +15,57 @@ class WzGlobalBreadcrumb extends Component {
   async componentDidMount() {
     const $injector = getAngularModule().$injector;
     this.router = $injector.get('$route');
-    $('#breadcrumbNoTitle').attr("title", "");
-  }
-  componnedDidUpdate() {
-    $('#breadcrumbNoTitle').attr("title", "");
   }
+
+  crumbs = () => {
+    const breadcrumbs = this.props.state.breadcrumb.map((breadcrumb) =>
+      breadcrumb.agent
+        ? {
+            className: 'euiLink euiLink--subdued osdBreadcrumbs',
+            onClick: (ev) => {
+              ev.stopPropagation();
+              AppNavigate.navigateToModule(ev, 'agents', {
+                tab: 'welcome',
+                agent: breadcrumb.agent.id,
+              });
+              this.router.reload();
+            },
+            truncate: true,
+            text: breadcrumb.agent.name,
+          }
+        : {
+            ...breadcrumb,
+            className: 'osdBreadcrumbs',
+          }
+    );
+
+    // remove frist breadcrumb if it's empty
+    if (breadcrumbs?.[0]?.text === '') {
+      breadcrumbs.shift();
+    }
+
+    return breadcrumbs;
+  };
+
   render() {
     return (
       <div>
         {!!this.props.state.breadcrumb.length && (
           <EuiBreadcrumbs
-            className='wz-global-breadcrumb'
+            className="wz-global-breadcrumb"
             responsive={false}
             truncate={false}
             max={6}
-            breadcrumbs={this.props.state.breadcrumb.map(breadcrumb => breadcrumb.agent ? {
-              className: "euiLink euiLink--subdued ",
-              onClick: (ev) => {
-                ev.stopPropagation();
-                AppNavigate.navigateToModule(ev, 'agents', {
-                  "tab": "welcome", "agent": breadcrumb.agent.id
-                });
-                this.router.reload();
-              },
-              id: "breadcrumbNoTitle",
-              truncate: true,
-              text: (
-                <EuiToolTip position="top" content={"View agent summary"}>
-                  <span>{breadcrumb.agent.name}</span>
-                </EuiToolTip>
-              )
-            } : breadcrumb)}
+            breadcrumbs={this.crumbs()}
             aria-label="Wazuh global breadcrumbs"
           />
         )}
       </div>
-    )
+    );
   }
 }
 
-const mapStateToProps = state => {
+const mapStateToProps = (state) => {
   return {
     state: state.globalBreadcrumbReducers,
   };