Broken breadcrumbs in Wazuh Dashboard 2.x

[yenienserrano]

Wazuh	OSD
4.4	2.2.1

Browser
Chrome, Firefox, Safari

Description
New styles added to the breadcrumbs in this OSD issue breaks our custom breadcrumbs, along with other issues:

• Logo rendering.
• API selector tag.
• Breadcrumbs.

This issue happens in OpenSearch Dashboards v2.2.1 and higher.

Preconditions

1. OSD 2.2.1 up and running

Steps to reproduce

1. Navigate to Wazuh
2. See the navigation bar

Expected Result

Actual Result

[Machi3mfl]

Task progress

Researching the styles in the Open search Navbar and I found:

• Problems with a class called osdBreadcrumbs that add a CSS filter and cover the entire navbar.
  If we remove this CSS property the breadcrumb is fixed but the problem is that is a default Open search style.

We cannot modify the style because is a native osd style. I'm researching how to fix it without overriding the style.

Differences between breadcrumb styles in <2.x and >2.x

Breadcrumbs inside plugins

• In Open Search dashboard 2.x
  

• In Open Search dashboard 1.x
  

The current style in the Breadcrumbs links has a rectangle with rounded borders. In our case, we have in the first link the wazuh logo and the dropdown menu. Then the navigation link.
If we remove and adjust some CSS styles the osdBreadcrumbs breadcrumb would be like this:

Important

We need to consider if we want to follow the OpenSearch style and add it to our breadcrumb.

[Machi3mfl]

We decided to replicate the OpenSearch 2.x Breadcrumb style in our Breadcrumb.

Next Steps

• Replicate the OSD style in this PR
• Verify how is the Breadcrumb style for Elastic and decide if we need to replace it.
• Decide if the style changes will be only applied to Wazuh Dashboard or Elastic too.

[yenienserrano]

The new form of the breadcrumb is