Bump patternfly* to latest versions to pick up bug fixes

frontend/package.json

@@ -53,8 +53,8 @@
     ]
   },
   "dependencies": {
-    "@patternfly/patternfly-next": "^1.0.109",
-    "@patternfly/react-core": "^1.43.5",
+    "@patternfly/patternfly": "1.0.219",
+    "@patternfly/react-core": "2.4.1",
     "brace": "0.11.x",
     "classnames": "2.x",
     "core-js": "2.x",
@@ -69,8 +69,8 @@
     "murmurhash-js": "1.0.x",
     "openshift-logos-icon": "1.7.1",
     "patternfly": "^3.59.0",
-    "patternfly-react": "^2.29.1",
-    "patternfly-react-extensions": "2.14.1",
+    "patternfly-react": "2.29.17",
+    "patternfly-react-extensions": "2.16.19",
     "plotly.js": "1.44.4",
     "prop-types": "15.6.x",
     "react": "16.6.3",

frontend/public/components/about-modal.jsx

@@ -39,7 +39,6 @@ class AboutModal_ extends React.Component {
         brandImageAlt={details.logoAlt}
         logoImageSrc={details.logoImg}
         logoImageAlt={details.logoAlt}
-        heroImageSrc={details.backgroundImg}
       >
         <p>OpenShift is Red Hat&apos;s container application platform that allows developers to quickly develop, host,
           and scale applications in a cloud environment.</p>

frontend/public/components/masthead-toolbar.jsx

@@ -239,7 +239,7 @@ class MastheadToolbar_ extends React.Component {
     return (
       <React.Fragment>
         <Toolbar>
-          <ToolbarGroup className="pf-u-sr-only pf-u-visible-on-md">
+          <ToolbarGroup className="pf-u-screen-reader pf-u-visible-on-md">
             {/* desktop -- (updates button) */}
             <Firehose resources={resources}>
               <UpdatesAvailableButton onClick={this._onClusterUpdatesAvailable} />
@@ -285,9 +285,9 @@ class MastheadToolbar_ extends React.Component {
           </ToolbarGroup>
           <ToolbarGroup >
             {/* mobile -- kebab dropdown [(cluster manager |) documentation, about (| logout)] */}
-            <ToolbarItem className="pf-u-hidden-on-md pf-u-mr-0">{this._renderMenu(true)}</ToolbarItem>
+            <ToolbarItem className="pf-u-hidden-on-md">{this._renderMenu(true)}</ToolbarItem>
             {/* desktop -- (user dropdown [logout]) */}
-            <ToolbarItem className="pf-u-sr-only pf-u-visible-on-md">{this._renderMenu(false)}</ToolbarItem>
+            <ToolbarItem className="pf-u-screen-reader pf-u-visible-on-md">{this._renderMenu(false)}</ToolbarItem>
           </ToolbarGroup>
         </Toolbar>
         {showAboutModal && <AboutModal isOpen={showAboutModal} closeAboutModal={this._closeAboutModal} />}

frontend/public/components/masthead.jsx

@@ -10,49 +10,42 @@ import ocpLogoImg from '../imgs/openshift-platform-logo.svg';
 import onlineLogoImg from '../imgs/openshift-online-logo.svg';
 import dedicatedLogoImg from '../imgs/openshift-dedicated-logo.svg';
 import azureLogoImg from '../imgs/azure-red-hat-openshift-logo.svg';
-import * as pfBg992 from '../../public/imgs/pfbg_992.jpg';
 
 export const getBrandingDetails = () => {
-  let backgroundImg, logoImg, logoAlt, productTitle;
+  let logoImg, logoAlt, productTitle;
   // Webpack won't bundle these images if we don't directly reference them, hence the switch
   switch (window.SERVER_FLAGS.branding) {
     case 'openshift':
-      backgroundImg = pfBg992;
       logoImg = openshiftLogoImg;
       logoAlt = 'OpenShift';
       productTitle = 'Red Hat OpenShift';
       break;
     case 'ocp':
-      backgroundImg = pfBg992;
       logoImg = ocpLogoImg;
       logoAlt = 'OpenShift Container Platform';
       productTitle = 'Red Hat OpenShift Container Platform';
       break;
     case 'online':
-      backgroundImg = pfBg992;
       logoImg = onlineLogoImg;
       logoAlt = 'OpenShift Online';
       productTitle = 'Red Hat OpenShift Online';
       break;
     case 'dedicated':
-      backgroundImg = pfBg992;
       logoImg = dedicatedLogoImg;
       logoAlt = 'OpenShift Dedicated';
       productTitle = 'Red Hat OpenShift Dedicated';
       break;
     case 'azure':
-      backgroundImg = pfBg992;
       logoImg = azureLogoImg;
       logoAlt = 'Azure Red Hat OpenShift';
       productTitle = 'Azure Red Hat OpenShift';
       break;
     default:
-      backgroundImg = pfBg992;
       logoImg = okdLogoImg;
       logoAlt = 'OKD';
       productTitle = 'OKD';
   }
-  return { backgroundImg, logoImg, logoAlt, productTitle };
+  return { logoImg, logoAlt, productTitle };
 };
 
 export const Masthead = ({ onNavToggle }) => {

frontend/public/components/nav.jsx

@@ -55,13 +55,13 @@ class NavLink extends React.PureComponent {
   }
 
   render() {
-    const { isActive, id, name, onClick } = this.props;
+    const { isActive, isSeparated, id, name, onClick } = this.props;
 
     // onClick is now handled globally by the Nav's onSelect,
     // however onClick can still be passed if desired in certain cases
 
     return (
-      <NavItem isActive={isActive}>
+      <NavItem isActive={isActive} isSeparated={isSeparated}>
         <Link
           id={id}
           to={this.to}
@@ -155,6 +155,7 @@ const NavSection = connect(navSectionStateToProps)(
   class NavSection extends React.Component {
     constructor(props) {
       super(props);
+      this.toggle = (e, val) => this.toggle_(e, val);
       this.state = { isOpen: false, activeChild: null };
 
       const activeChild = this.getActiveChild();
@@ -215,6 +216,10 @@ const NavSection = connect(navSectionStateToProps)(
       this.setState(state);
     }
 
+    toggle_(e, expandState) {
+      this.setState({isOpen: expandState});
+    }
+
     render() {
       if (!this.props.canRender) {
         return null;
@@ -239,7 +244,7 @@ const NavSection = connect(navSectionStateToProps)(
       });
 
       return Children ? (
-        <NavExpandable title={title} isActive={isActive} isExpanded={isOpen}>
+        <NavExpandable title={title} isActive={isActive} isExpanded={isOpen} onExpand={this.toggle}>
           {Children}
         </NavExpandable>
       ) : null;
@@ -339,7 +344,7 @@ export const Navigation = ({ isNavOpen, onNavSelect }) => {
           <ResourceNSLink resource="deploymentconfigs" name={DeploymentConfigModel.labelPlural} required={FLAGS.OPENSHIFT} />
           <ResourceNSLink resource="statefulsets" name="Stateful Sets" />
           <ResourceNSLink resource="secrets" name="Secrets" />
-          <ResourceNSLink resource="configmaps" name="Config Maps" />
+          <ResourceNSLink resource="configmaps" name="Config Maps" isSeparated />
           <ResourceNSLink resource="cronjobs" name="Cron Jobs" />
           <ResourceNSLink resource="jobs" name="Jobs" />
           <ResourceNSLink resource="daemonsets" name="Daemon Sets" />

frontend/public/style/_layout.scss

@@ -10,6 +10,7 @@ body,
 #content {
   display: flex;
   flex-direction: column;
+  font-size: $font-size-base; // so PatternFly 4's PatternFly 3 shield rules don't override
 }
 
 #content-scrollable {
@@ -19,10 +20,6 @@ body,
   -webkit-overflow-scrolling: touch;
 }
 
-.pf-c-page__main-section {
-  --pf-global--FontSize--md: #{$font-size-base};
-}
-
 .absolute-zero {
   position: absolute;
   top: 0px;

frontend/public/style/_overrides.scss

@@ -227,8 +227,6 @@ tags-input .autocomplete .suggestion-item em {
   }
 }
 
-
-
 .modal.right-side-modal-pf {
   top: 76px; // since PatternFly 4's masthead is taller than PatternFly 3's
 
@@ -258,14 +256,26 @@ tags-input .autocomplete .suggestion-item em {
 
 // PatternFly 4 overrides
 
+// Webpack will not properly bundle the background-image from PatternFly
+@media only screen and (min-width: 576px) {
+  .pf-c-about-modal-box__hero {
+    background-image: url('../imgs/pfbg_992.jpg') !important;
+  }
+}
+
 .pf-c-dropdown__menu {
   list-style: none;
 }
 
-.pf-c-page {
-  // TEMP fix until https://github.com/patternfly/patternfly-next/issues/1174 is fixed upstream
-  height: 100% !important;
+// TEMP fix until https://github.com/patternfly/patternfly-next/issues/1543 is fixed upstream
+.pf-c-dropdown__menu-item {
+  &:focus,
+  &:hover {
+    color: var(--pf-global--Color--dark-100);
+  }
+}
 
+.pf-c-page {
   &__header {
     background-color: var(--pf-global--BackgroundColor--dark-200);
     background-image: url("../imgs/pfbg_2000.jpg");
@@ -280,11 +290,10 @@ tags-input .autocomplete .suggestion-item em {
 
   // `.pf-c-page` specificity required
   .pf-c-page__main-section {
-    --pf-c-page__main-section--Padding: 0;
-
-    @media screen and (min-width: $grid-float-breakpoint) {
-      --pf-c-page__main-section--Padding: 0;
-    }
+    --pf-c-page__main-section--PaddingBottom: 0;
+    --pf-c-page__main-section--PaddingLeft: 0;
+    --pf-c-page__main-section--PaddingRight: 0;
+    --pf-c-page__main-section--PaddingTop: 0;
   }
 
   .pf-c-page__sidebar {
@@ -336,42 +345,53 @@ tags-input .autocomplete .suggestion-item em {
     --pf-c-nav__simple-list-link--focus--BackgroundColor: var(--pf-c-nav__list-link--hover--BackgroundColor);
     --pf-c-nav__simple-list-link--focus--Color: var(--pf-c-nav__list-link--hover--Color);
     --pf-c-nav__simple-list-link--focus--FontWeight: var(--pf-global--FontWeight--normal);
+    --pf-c-nav__simple-list-link--hover--BackgroundColor: var(--pf-c-nav__list-link--hover--BackgroundColor);
+    --pf-c-nav__simple-list-link--hover--Color: var(--pf-c-nav__list-link--hover--Color);
     --pf-c-nav__simple-list-link--m-current--BackgroundColor: var(--pf-c-nav__list-link--hover--BackgroundColor);
     --pf-c-nav__simple-list-link--m-current--Color: var(--pf-c-nav__simple-list-link--active--Color);
     --pf-c-nav__simple-list-link--PaddingBottom: 2px;
     --pf-c-nav__simple-list-link--PaddingRight: 5px;
-    --pf-c-nav__simple-list-link--PaddingTop: 4px;
+    --pf-c-nav__simple-list-link--PaddingTop: 2px;
     // Subnav
     --pf-c-nav__subnav--MarginTop: 0;
     --pf-c-nav__subnav--MaxHeight: 100%;
     // Toggle
     --pf-c-nav__list-toggle--PaddingRight: 0;
   }
 
-  .pf-c-nav__item .pf-c-nav__simple-list .pf-c-nav__link {
-    --pf-c-nav__subnav-item--PaddingLeft: var(--pf-c-nav__list-link--PaddingLeft);
+  .pf-c-nav__item .pf-c-nav__simple-list .pf-c-nav__link.pf-m-separator::after {
+    --pf-c-nav__simple-list-link--m-separator--after--Left: var(--pf-c-nav__list-link--PaddingLeft);
+    right: var(--pf-c-nav__list-link--PaddingRight);
 
     @media screen and (min-width: $grid-float-breakpoint) {
-      --pf-c-nav__subnav-item--PaddingLeft: var(--pf-c-nav__list-link--md--PaddingLeft);
+      --pf-c-nav__simple-list-link--m-separator--after--Left: var(--pf-c-nav__list-link--md--PaddingLeft);
+      right: var(--pf-c-nav__list-link--md--PaddingRight);
     }
   }
 
   .pf-c-nav__list {
     list-style: none; // turn off list-styles to fix bug in Edge
     > .pf-c-nav__item {
       border-bottom: 1px solid #{$color-pf-black};
-      font-size: 14px;
       margin-top: 0;
 
+      &:not(.pf-m-current) > .pf-c-nav__link {
+        &:active,
+        &:focus,
+        &:hover {
+          background-color: var(--pf-c-nav__list-link--hover--BackgroundColor);
+        }
+      }
+
       &.pf-m-current {
         background-color: #{$color-pf-black-800};
 
-        &:not(.pf-m-expanded) {
-          .pf-c-nav__link {
-            &::after {
-              display: block;
-            }
-          }
+        &.pf-m-expanded > .pf-c-nav__link::after {
+          display: none;
+        }
+
+        .pf-c-nav__simple-list .pf-c-nav__link.pf-m-separator:after {
+          --pf-c-nav__simple-list-link--m-separator--after--Background: #292929;
         }
       }
 
@@ -385,22 +405,36 @@ tags-input .autocomplete .suggestion-item em {
 
     .pf-c-nav__link {
       align-items: center;
+      padding-left: var(--pf-c-nav__list-link--PaddingLeft);
 
-      &::after {
-        display: none;
+      @media screen and (min-width: $grid-float-breakpoint) {
+        padding-left: var(--pf-c-nav__list-link--md--PaddingLeft);
       }
     }
   }
 
-  .pf-c-nav__simple-list {
-    .pf-c-nav__link {
-      font-size: 14px;
-      line-height: 25px;
+  .pf-c-nav__simple-list .pf-c-nav__link {
+    font-size: $font-size-base;
+    line-height: 25px;
+
+    // use `::before` so as not to conflict with `.pf-m-separator::after`
+    &.pf-m-current::before {
+      background-color: var(--pf-c-nav__list-link--m-current--after--BackgroundColor);
+      bottom: 0;
+      content: "";
+      display: block;
+      height: var(--pf-c-nav__list-link--after--Height);
+      left: var(--pf-c-nav__list-link--after--Left);
+      position: absolute;
+      width: var(--pf-c-nav__list-link--after--Width);
+    }
 
-      &.pf-m-current {
-        &::after {
-          display: block;
-        }
+    &.pf-m-separator {
+      margin-bottom: 17px;
+
+      &::after {
+        --pf-c-nav__simple-list-link--m-separator--after--Background: #{$color-pf-black};
+        --pf-c-nav__simple-list-link--m-separator--after--Bottom: -9px;
       }
     }
   }

frontend/public/style/_vars.scss

@@ -22,7 +22,7 @@ $icon-font-path: $consoleWebFontPath + '/';
 // Disable PatternFly 4 reset.
 $pf-global--enable-reset: false;
 // PatternFly 4 font path.
-$pf-global--font-path: '~@patternfly/patternfly-next/assets/fonts';
+$pf-global--font-path: '~@patternfly/patternfly/assets/fonts';
 $popover-max-width: 325px;
 $table-border-color: $color-pf-black-200;
 

frontend/public/vendor.scss

@@ -57,10 +57,10 @@
 @import '~patternfly-react-extensions/dist/sass/filter-side-panel';
 @import '~patternfly-react-extensions/dist/sass/properties-side-panel';
 @import '~patternfly-react-extensions/dist/sass/vertical-tabs';
-@import '~@patternfly/patternfly-next/sass-utilities/all';
-@import "~@patternfly/patternfly-next/_variables";
-@import "~@patternfly/patternfly-next/_fonts";
-@import "~@patternfly/patternfly-next/_base";
-@import '~@patternfly/patternfly-next/utilities/Accessibility/accessibility';
-@import '~@patternfly/patternfly-next/utilities/Spacing/spacing';
-@import '~@patternfly/patternfly-next/components/Badge/badge';
+@import '~@patternfly/patternfly/sass-utilities/all';
+@import "~@patternfly/patternfly/_variables";
+@import "~@patternfly/patternfly/_fonts";
+@import "~@patternfly/patternfly/_base";
+@import '~@patternfly/patternfly/utilities/Accessibility/accessibility';
+@import '~@patternfly/patternfly/utilities/Spacing/spacing';
+@import '~@patternfly/patternfly/components/Badge/badge';