Fixes #29332 - update the breadcrumbs to pf4

theforeman · Jul 27, 2020 · e6ff2d6 · e6ff2d6
1 parent d994ed1
commit e6ff2d6
Show file tree

Hide file tree

Showing 9 changed files with 67 additions and 60 deletions.
diff --git a/app/assets/stylesheets/base.scss b/app/assets/stylesheets/base.scss
@@ -197,18 +197,6 @@ select {
   padding-bottom: 12px;
 }
 
-.breadcrumb-line {
-  margin-top: -15px;
-  margin-right: -60px;
-  margin-left: -60px;
-}
-
-.breadcrumb-switcher {
-  display: inline-block;
-  vertical-align: middle;
-  margin-left: 10px;
-}
-
 .grey,
 .gray {
   color: #808080 !important;

diff --git a/webpack/assets/javascripts/react_app/components/BreadcrumbBar/BreadcrumbBar.js b/webpack/assets/javascripts/react_app/components/BreadcrumbBar/BreadcrumbBar.js
@@ -4,7 +4,7 @@ import { BreadcrumbSwitcher } from 'patternfly-react';
 
 import { noop } from '../../common/helpers';
 import Breadcrumb from './components/Breadcrumb';
-import './breadcrumbswitcher.scss';
+import './BreadcrumbBar.scss';
 
 class BreadcrumbBar extends React.Component {
   handleOpen() {
@@ -65,6 +65,7 @@ class BreadcrumbBar extends React.Component {
           items={breadcrumbItems}
           isTitle={isTitle}
           titleReplacement={titleReplacement}
+          className="breadcrumbs-list"
         >
           {isSwitchable && (
             <BreadcrumbSwitcher

diff --git a/webpack/assets/javascripts/react_app/components/BreadcrumbBar/BreadcrumbBar.scss b/webpack/assets/javascripts/react_app/components/BreadcrumbBar/BreadcrumbBar.scss
@@ -0,0 +1,23 @@
+.breadcrumb-bar {
+  padding-top: 20px;
+
+  .breadcrumb-line {
+    margin-right: -60px;
+    margin-left: -60px;
+  }
+
+  .breadcrumbs-list {
+    display: block;
+
+    .breadcrumb-switcher {
+      position: relative;
+      display: inline-block;
+      vertical-align: middle;
+      margin-left: 10px;
+
+      .spinner {
+        float: unset;
+      }
+    }
+  }
+}
diff --git a/...ack/assets/javascripts/react_app/components/BreadcrumbBar/__tests__/BreadcrumbBar.test.js b/...ack/assets/javascripts/react_app/components/BreadcrumbBar/__tests__/BreadcrumbBar.test.js
@@ -76,7 +76,7 @@ describe('BreadcrumbBar', () => {
 
       // test breadcrumb item click
       component
-        .find('.breadcrumbs-pf-title.breadcrumb a')
+        .find('.breadcrumbs-list li.breadcrumb-item')
         .at(1)
         .simulate('click');
       expect(mockBreadcrumbItemOnClick.mock.calls).toHaveLength(1);

diff --git a/...pts/react_app/components/BreadcrumbBar/__tests__/__snapshots__/BreadcrumbBar.test.js.snap b/...pts/react_app/components/BreadcrumbBar/__tests__/__snapshots__/BreadcrumbBar.test.js.snap
@@ -5,6 +5,7 @@ exports[`BreadcrumbBar rendering renders breadcrumb-bar 1`] = `
   className="breadcrumb-bar"
 >
   <Breadcrumb
+    className="breadcrumbs-list"
     isTitle={false}
     items={
       Array [
@@ -35,6 +36,7 @@ exports[`BreadcrumbBar rendering renders switchable breadcrumb-bar 1`] = `
   className="breadcrumb-bar"
 >
   <Breadcrumb
+    className="breadcrumbs-list"
     isTitle={false}
     items={
       Array [

diff --git a/webpack/assets/javascripts/react_app/components/BreadcrumbBar/breadcrumbswitcher.scss b/webpack/assets/javascripts/react_app/components/BreadcrumbBar/breadcrumbswitcher.scss
diff --git a/webpack/assets/javascripts/react_app/components/BreadcrumbBar/components/Breadcrumb.js b/webpack/assets/javascripts/react_app/components/BreadcrumbBar/components/Breadcrumb.js
@@ -1,6 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Breadcrumb as PfBreadcrumb } from 'patternfly-react';
+import classNames from 'classnames';
+import {
+  Breadcrumb as PfBreadcrumb,
+  BreadcrumbItem,
+} from '@patternfly/react-core';
 import EllipsisWithTooltip from 'react-ellipsis-with-tooltip';
 import './Breadcrumbs.scss';
 
@@ -21,7 +25,7 @@ const Breadcrumb = ({
   }
 
   return (
-    <PfBreadcrumb title={title} {...props}>
+    <PfBreadcrumb {...props}>
       {items.map((item, index) => {
         const active = index === items.length - 1;
         const {
@@ -39,20 +43,22 @@ const Breadcrumb = ({
         );
 
         return (
-          <PfBreadcrumb.Item
+          <BreadcrumbItem
             key={index}
-            active={active}
+            isActive={active}
             onClick={item.onClick}
-            href={item.url}
-            title={itemTitle}
-            className={icon && active && 'breadcrumb-item-with-icon'}
+            to={item.url}
+            className={classNames('breadcrumb-item', {
+              active,
+              'breadcrumb-item-with-icon': icon && active,
+            })}
           >
             {icon && <img src={icon.url} alt={icon.alt} title={icon.alt} />}{' '}
             {inner}
-          </PfBreadcrumb.Item>
+            {active && children}
+          </BreadcrumbItem>
         );
       })}
-      {children}
     </PfBreadcrumb>
   );
 };

diff --git a/webpack/assets/javascripts/react_app/components/BreadcrumbBar/components/Breadcrumbs.scss b/webpack/assets/javascripts/react_app/components/BreadcrumbBar/components/Breadcrumbs.scss
@@ -1,12 +1,14 @@
-.breadcrumbs-pf-title .active span {
+.breadcrumb-item {
+  align-items: center;
+}
+
+.breadcrumb-item.active {
   display: inline-flex;
   max-width: 50%;
 }
 
-.breadcrumbs-pf-title li.breadcrumb-item-with-icon span {
-  vertical-align: middle;
-
+.breadcrumb-item-with-icon {
   img {
-    align-self: center;
+    margin-right: 8px;
   }
 }
diff --git a/...ripts/react_app/components/BreadcrumbBar/components/__snapshots__/Breadcrumb.test.js.snap b/...ripts/react_app/components/BreadcrumbBar/components/__snapshots__/Breadcrumb.test.js.snap
@@ -1,31 +1,29 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Breadcrumbs renders breadcrumbs menu 1`] = `
-<Breadcrumb
-  title={false}
->
+<Breadcrumb>
   <BreadcrumbItem
-    active={false}
-    href="/some-url"
+    className="breadcrumb-item"
+    isActive={false}
     key="0"
-    title="root"
+    to="/some-url"
   >
      
     root
   </BreadcrumbItem>
   <BreadcrumbItem
-    active={false}
+    className="breadcrumb-item"
+    isActive={false}
     key="1"
     onClick={[MockFunction]}
-    title="child with onClick"
   >
      
     child with onClick
   </BreadcrumbItem>
   <BreadcrumbItem
-    active={true}
+    className="breadcrumb-item active"
+    isActive={true}
     key="2"
-    title="active child"
   >
      
     <EllipisWithTooltip
@@ -38,13 +36,11 @@ exports[`Breadcrumbs renders breadcrumbs menu 1`] = `
 `;
 
 exports[`Breadcrumbs renders h1 title 1`] = `
-<Breadcrumb
-  title={false}
->
+<Breadcrumb>
   <BreadcrumbItem
-    active={true}
+    className="breadcrumb-item active"
+    isActive={true}
     key="0"
-    title="title"
   >
      
     <EllipisWithTooltip
@@ -57,22 +53,20 @@ exports[`Breadcrumbs renders h1 title 1`] = `
 `;
 
 exports[`Breadcrumbs renders title override 1`] = `
-<Breadcrumb
-  title={false}
->
+<Breadcrumb>
   <BreadcrumbItem
-    active={false}
-    href="/some-url"
+    className="breadcrumb-item"
+    isActive={false}
     key="0"
-    title="root"
+    to="/some-url"
   >
      
     root
   </BreadcrumbItem>
   <BreadcrumbItem
-    active={true}
+    className="breadcrumb-item active"
+    isActive={true}
     key="1"
-    title="override title"
   >
      
     <EllipisWithTooltip