Migrate breadcrumb to PF4

frontend/__tests__/components/utils/page-heading.spec.tsx

@@ -20,7 +20,7 @@ describe(BreadCrumbs.displayName, () => {
 
   it('renders each given breadcrumb', () => {
     const links: ShallowWrapper<any> = wrapper.find(Link);
-    const nonLink: ShallowWrapper<any> = wrapper.find('li.active');
+    const nonLink: ShallowWrapper<any> = wrapper.findWhere(BreadcrumbItem => BreadcrumbItem.props().isActive === true);
 
     expect(links.length + nonLink.length).toEqual(breadcrumbs.length);
 
@@ -29,7 +29,7 @@ describe(BreadCrumbs.displayName, () => {
         expect(links.at(i).props().to).toEqual(crumb.path);
         expect(links.at(i).childAt(0).text()).toEqual(crumb.name);
       } else {
-        expect(nonLink.text()).toEqual(crumb.name);
+        expect(nonLink.render().text()).toEqual(crumb.name);
       }
     });
   });

frontend/public/components/sidebars/explore-type-sidebar.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import * as _ from 'lodash-es';
-import * as classNames from 'classnames';
+import { Breadcrumb, BreadcrumbItem } from '@patternfly/react-core';
 
 import { getDefinitionKey, getStoredSwagger, K8sKind, SwaggerDefinition, SwaggerDefinitions } from '../../module/k8s';
 import { ResourceSidebarWrapper, sidebarScrollTop } from './resource-sidebar';
@@ -78,16 +78,16 @@ export const ExploreType: React.FC<ExploreTypeProps> = (props) => {
 
   return (
     <React.Fragment>
-      <ol className="breadcrumb">
+      <Breadcrumb>
         {breadcrumbs.map((crumb, i) => {
           const isLast = i === breadcrumbs.length - 1;
-          return <li key={i} className={classNames({'active': isLast})}>
+          return <BreadcrumbItem key={i} isActive={isLast}>
             {isLast
               ? crumb
               : <button type="button" className="btn btn-link btn-link--no-btn-default-values" onClick={e => breadcrumbClicked(e, i)}>{crumb}</button>}
-          </li>;
+          </BreadcrumbItem>;
         })}
-      </ol>
+      </Breadcrumb>
       {description && <p className="co-break-word co-pre-line"><LinkifyExternal>{description}</LinkifyExternal></p>}
       {_.isEmpty(currentDefinition.properties)
         ? <EmptyBox label="Properties" />

frontend/public/components/utils/headings.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import * as classNames from 'classnames';
 import * as _ from 'lodash-es';
 import { Link } from 'react-router-dom';
-import { Button, SplitItem, Split } from '@patternfly/react-core';
+import { Breadcrumb, BreadcrumbItem, Button, SplitItem, Split } from '@patternfly/react-core';
 import { ActionsMenu, ResourceIcon, KebabAction, resourcePath, FirehoseResult, KebabOption } from './index';
 import { ClusterServiceVersionLogo } from '../operator-lifecycle-manager';
 import { connectToModel } from '../../kinds';
@@ -16,23 +16,23 @@ import {
 import { ResourceItemDeleting } from '../overview/project-overview';
 
 export const BreadCrumbs: React.SFC<BreadCrumbsProps> = ({ breadcrumbs }) => (
-  <ol className="breadcrumb">
+  <Breadcrumb>
     {breadcrumbs.map((crumb, i, { length }) => {
       const isLast = i === length - 1;
+
       return (
-        <li key={i} className={classNames({ active: isLast })}>
+        <BreadcrumbItem key={i} isActive={isLast}>
           {isLast ? (
             crumb.name
           ) : (
-            <Link className="breadcrumb-link" to={crumb.path} data-test-id={`breadcrumb-link-${i}`}>
+            <Link className="pf-c-breadcrumb__link" to={crumb.path} data-test-id={`breadcrumb-link-${i}`}>
               {crumb.name}
             </Link>
           )}
-        </li>
+        </BreadcrumbItem>
       );
     })}
-  </ol>
-);
+  </Breadcrumb>);
 
 const ActionButtons: React.SFC<ActionButtonsProps> = ({actionButtons}) => <div className="co-action-buttons">
   {_.map(actionButtons, (actionButton, i) => {

frontend/public/style/_overrides.scss

@@ -1,17 +1,6 @@
 // Use this file to override styles from 3rd party dependencies
 $pf-4-nav-bar-height: 76px; // Height of the PatternFly 4 masthead
 
-.breadcrumb {
-  margin-bottom: 0;
-  padding-bottom: 12px;
-  padding-top: 25px;
-  > li + li:before {
-    @include font-awesome-free-solid;
-    content: fa-content($fa-var-angle-right);
-    font-size: 12px;
-  }
-}
-
 // account for collapsing space between .btn
 .btn + .btn {
   margin-left: 3px;
@@ -121,6 +110,11 @@ h6 {
   padding-right: 0;
 }
 
+.pf-c-breadcrumb {
+  padding-bottom: 12px;
+  padding-top: 25px;
+}
+
 .pf-c-button--align-right {
   margin-left: auto !important;
 }

frontend/public/vendor.scss

@@ -20,7 +20,6 @@
 @import "~bootstrap-sass/assets/stylesheets/bootstrap/component-animations";
 @import "~bootstrap-sass/assets/stylesheets/bootstrap/button-groups";
 @import "~bootstrap-sass/assets/stylesheets/bootstrap/input-groups";
-@import "~bootstrap-sass/assets/stylesheets/bootstrap/breadcrumbs";
 @import "~bootstrap-sass/assets/stylesheets/bootstrap/labels";
 @import "~bootstrap-sass/assets/stylesheets/bootstrap/list-group";
 @import "~bootstrap-sass/assets/stylesheets/bootstrap/close";
@@ -33,7 +32,6 @@
 @import "~patternfly/dist/sass/patternfly/mixins";  // Including this file breaks sourcemaps
 @import '~patternfly/dist/sass/patternfly/buttons';
 @import '~patternfly/dist/sass/patternfly/dropdowns'; // required by @patternfly/react-console
-@import '~patternfly/dist/sass/patternfly/breadcrumbs';
 @import '~patternfly/dist/sass/patternfly/modals';
 @import '~patternfly/dist/sass/patternfly/toolbar';
 @import '~patternfly/dist/sass/patternfly/list-view';