Fixed breadcrumbs style compatibility for Kibana 7.14.2 (#3668)

* Parcial breadcrumb style fix * Improved beadcrumb styling and text overflow * Added changelog
wazuh · Nov 2, 2021 · 96e4566 · 96e4566
1 parent 025ce3e
commit 96e4566
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 49 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -13,6 +13,7 @@ All notable changes to the Wazuh app project will be documented in this file.
 
 - Fixed compatibility wazuh 4.2 - kibana 7.13.4 [#3653](https://github.com/wazuh/wazuh-kibana-app/pull/3653)
 - Fixed interative register windows agent screen error [#3654](https://github.com/wazuh/wazuh-kibana-app/pull/3654)
+- Fixed breadcrumbs style compatibility for Kibana 7.14.2 [#3668](https://github.com/wazuh/wazuh-kibana-app/pull/3668)
 
 ## Wazuh v4.2.4 - Kibana 7.10.2, 7.11.2, 7.12.1 - Revision 4205
 

diff --git a/public/components/common/globalBreadcrumb/globalBreadcrumb.scss b/public/components/common/globalBreadcrumb/globalBreadcrumb.scss
@@ -1,20 +1,23 @@
+nav.euiBreadcrumbs.wz-global-breadcrumb span.euiBreadcrumb[title=""]:first-child{
+    display: none;
+}
+
+.euiBreadcrumbs--truncate .wz-global-breadcrumb .euiBreadcrumb:not(.euiBreadcrumb--collapsed) span.euiToolTipAnchor{
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    vertical-align: text-bottom;
+}
+
 .wz-global-breadcrumb {
     font-size: 14px;
-    font-family: "Inter UI";
     padding: 0px;
 }
 
 .wz-global-breadcrumb-btn{
     max-width: unset!important;
-    height: 20px;
 }
 
-.wz-global-breadcrumb-btn{
-    height: 20px;
-    font-family: "Inter UI";
-}
-
-
 @media screen and (-webkit-min-device-pixel-ratio: 0) { 
     _::-webkit-full-page-media, _:future, :root , .wz-global-breadcrumb {
         line-height: 1.5;

diff --git a/public/components/common/globalBreadcrumb/globalBreadcrumb.tsx b/public/components/common/globalBreadcrumb/globalBreadcrumb.tsx
@@ -25,26 +25,24 @@ class WzGlobalBreadcrumb extends Component {
     return (
       <div>
         {!!this.props.state.breadcrumb.length && (
-            <EuiBreadcrumbs
-              className='wz-global-breadcrumb'
-              responsive={false}
-              truncate={false}
-              max={6}
-              breadcrumbs={this.props.state.breadcrumb.map(breadcrumb => breadcrumb.agent ? {
-                text: (
-                  <a
-                    style={{ margin: '0px 0px -5px 0px', height: 20 }}
-                    className="euiLink euiLink--subdued euiBreadcrumb "
-                    onClick={(ev) => { ev.stopPropagation(); AppNavigate.navigateToModule(ev, 'agents', { "tab": "welcome", "agent": breadcrumb.agent.id }); this.router.reload(); }}
-                    id="breadcrumbNoTitle"
-                  >
-                    <EuiToolTip position="top" content={"View agent summary"}>
-                      <span>{breadcrumb.agent.name}</span>
-                    </EuiToolTip>
-                  </a>)
-              } : breadcrumb)}
-              aria-label="Wazuh global breadcrumbs"
-            />
+          <EuiBreadcrumbs
+            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)}
+            aria-label="Wazuh global breadcrumbs"
+          />
         )}
       </div>
     )

diff --git a/public/components/common/modules/main-overview.tsx b/public/components/common/modules/main-overview.tsx
@@ -78,33 +78,29 @@ export class MainModuleOverview extends Component {
         },
       ];
       if (currentAgent.id) {
-        breadcrumb.push( {
+        breadcrumb.push({
+          className: "euiLink euiLink--subdued ",
+          onClick: (ev) => { ev.stopPropagation(); AppNavigate.navigateToModule(ev, 'agents', { "tab": "welcome", "agent": currentAgent.id }); this.router.reload(); },
+          id: "breadcrumbNoTitle",
+          truncate: true,
           text: (
-            <a
-              style={{ margin: '0px 0px -5px 0px', height: 20 }}
-              className="euiLink euiLink--subdued euiBreadcrumb "
-              onClick={(ev) => { ev.stopPropagation(); AppNavigate.navigateToModule(ev, 'agents', { "tab": "welcome", "agent": currentAgent.id }); this.router.reload(); }}
-              id="breadcrumbNoTitle"
-            >
-              <EuiToolTip position="bottom" content={"View agent summary"} display="inlineBlock">
-                <span>{currentAgent.name}</span>
-              </EuiToolTip>
-            </a>),
+            <EuiToolTip position="bottom" content={"View agent summary"} display="inlineBlock">
+              <span>{currentAgent.name}</span>
+            </EuiToolTip>
+          ),
         })
       }
       breadcrumb.push({
         text: (
-          <EuiFlexGroup gutterSize="xs" alignItems="center" responsive={false}>
-            <div style={{ margin: '0.8em 0em 0em 0.09em' }}>
-              <EuiToolTip position="top">
-                <div className="euiBreadcrumb euiBreadcrumb--last" title="">
-                  {WAZUH_MODULES[this.props.section].title}
-                </div>
-              </EuiToolTip>
-            </div>
+          <EuiFlexGroup gutterSize="none" alignItems="center" responsive={false}>
+            <EuiToolTip position="top">
+              <>
+                {WAZUH_MODULES[this.props.section].title}
+              </>
+            </EuiToolTip>
             <EuiToolTip content={WAZUH_MODULES[this.props.section].description}>
-                <EuiIcon style={{ margin: '0px 0px 1px 5px' }} type='iInCircle' />
-              </EuiToolTip>
+              <EuiIcon style={{ margin: '0px 0px 1px 5px' }} type='iInCircle' />
+            </EuiToolTip>
           </EuiFlexGroup>
         ),
         truncate: false,