APPDUX-228: Fixes to incorporate latest PF4 breaking change release (#…

…596) * fixes to incorporate latest pf4 * update to latest PF versions * style changes from code review
integr8ly · Jul 7, 2020 · d354905 · d354905
1 parent bab3d79
commit d354905
Show file tree

Hide file tree

Showing 14 changed files with 266 additions and 1,102 deletions.
diff --git a/package.json b/package.json
@@ -1,13 +1,12 @@
 {
   "name": "integreatly-web-app",
-  "version": "2.26.0",
+  "version": "2.26.1",
   "private": true,
   "proxy": "http://localhost:5001/",
   "dependencies": {
     "@fortawesome/fontawesome-free": "5.7.2",
-    "@patternfly/patternfly": "2.43.1",
-    "@patternfly/react-core": "3.124.1",
-    "@patternfly/react-icons": "^3.14.23",
+    "@patternfly/patternfly": "4.16.7",
+    "@patternfly/react-core": "4.23.1",
     "asciidoctor.js": "1.5.7",
     "axios": "^0.19.0",
     "body-parser": "^1.18.3",

diff --git a/src/components/aboutModal/__tests__/__snapshots__/aboutModal.test.js.snap b/src/components/aboutModal/__tests__/__snapshots__/aboutModal.test.js.snap
@@ -29,8 +29,8 @@ exports[`AboutModal Component should render a non-connected component: hidden mo
       containerInfo={<div />}
     >
       <AboutModalContainer
-        ariaDescribedById="pf-about-modal-content-0"
-        ariaLabelledbyId="pf-about-modal-title-0"
+        aboutModalBoxContentId="pf-about-modal-content-0"
+        aboutModalBoxHeaderId="pf-about-modal-title-0"
         backgroundImageSrc="PF4DownstreamBG.svg"
         brandImageAlt="Red Hat logo"
         brandImageSrc=""
@@ -75,8 +75,8 @@ exports[`AboutModal Component should render a non-connected component: show moda
       containerInfo={<div />}
     >
       <AboutModalContainer
-        ariaDescribedById="pf-about-modal-content-0"
-        ariaLabelledbyId="pf-about-modal-title-0"
+        aboutModalBoxContentId="pf-about-modal-content-0"
+        aboutModalBoxHeaderId="pf-about-modal-title-0"
         backgroundImageSrc="PF4DownstreamBG.svg"
         brandImageAlt="Red Hat logo"
         brandImageSrc=""

diff --git a/src/components/breadcrumb/__tests__/__snapshots__/breadcrumb.test.js.snap b/src/components/breadcrumb/__tests__/__snapshots__/breadcrumb.test.js.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Breadcrumb component should handle home clicked 1`] = `
-<Component
+<Breadcrumb
   aria-label="Breadcrumb"
 >
   <BreadcrumbItem
@@ -22,11 +22,11 @@ exports[`Breadcrumb component should handle home clicked 1`] = `
   >
     Task 1 of 3
   </BreadcrumbItem>
-</Component>
+</Breadcrumb>
 `;
 
 exports[`Breadcrumb component should render breadcrumb with props 1`] = `
-<Component
+<Breadcrumb
   aria-label="Breadcrumb"
 >
   <BreadcrumbItem
@@ -47,11 +47,11 @@ exports[`Breadcrumb component should render breadcrumb with props 1`] = `
   >
     Task 1 of 3
   </BreadcrumbItem>
-</Component>
+</Breadcrumb>
 `;
 
 exports[`Breadcrumb component should render default breadcrumb 1`] = `
-<Component
+<Breadcrumb
   aria-label="Breadcrumb"
 >
   <BreadcrumbItem
@@ -61,5 +61,5 @@ exports[`Breadcrumb component should render default breadcrumb 1`] = `
   >
     Home
   </BreadcrumbItem>
-</Component>
+</Breadcrumb>
 `;
diff --git a/src/components/masthead/masthead.js b/src/components/masthead/masthead.js
@@ -8,9 +8,9 @@ import {
   DropdownItem,
   DropdownSeparator,
   PageHeader,
-  Toolbar,
-  ToolbarGroup,
-  ToolbarItem,
+  PageHeaderTools,
+  PageHeaderToolsGroup,
+  PageHeaderToolsItem,
   Tooltip,
   TooltipPosition
 } from '@patternfly/react-core';
@@ -239,9 +239,9 @@ class Masthead extends React.Component {
 
     const MastheadToolbar = (
       <React.Fragment>
-        <Toolbar>
-          <ToolbarGroup className={css(accessibleStyles.screenReader, accessibleStyles.visibleOnLg)}>
-            <ToolbarItem className={css(accessibleStyles.screenReader, accessibleStyles.visibleOnMd)}>
+        <PageHeaderTools>
+          <PageHeaderToolsGroup className={css(accessibleStyles.screenReader, accessibleStyles.visibleOnLg)}>
+            <PageHeaderToolsItem className={css(accessibleStyles.screenReader, accessibleStyles.visibleOnMd)}>
               {isAdmin ? (
                 <Button
                   className="pf-c-button pf-m-plain"
@@ -263,16 +263,16 @@ class Masthead extends React.Component {
                   </Button>
                 </Tooltip>
               )}
-            </ToolbarItem>
-            <ToolbarItem className={css(accessibleStyles.screenReader, accessibleStyles.visibleOnMd)}>
+            </PageHeaderToolsItem>
+            <PageHeaderToolsItem className={css(accessibleStyles.screenReader, accessibleStyles.visibleOnMd)}>
               <Dropdown
                 isPlain
                 position="right"
                 onSelect={this.onHelpDropdownSelect}
                 isOpen={isHelpDropdownOpen}
                 toggle={
                   <DropdownToggle
-                    iconComponent={null}
+                    toggleIndicator={null}
                     onToggle={this.onHelpDropdownToggle}
                     aria-label="Link to Help page"
                   >
@@ -282,10 +282,10 @@ class Masthead extends React.Component {
                 autoFocus={false}
                 dropdownItems={this.getDeveloperResources(gsUrl, riUrl, csUrl)}
               />
-            </ToolbarItem>
-          </ToolbarGroup>
-          <ToolbarGroup className={css(accessibleStyles.screenReader, accessibleStyles.visibleOnSm)}>
-            <ToolbarItem className={css(accessibleStyles.screenReader, accessibleStyles.visibleOnSm)}>
+            </PageHeaderToolsItem>
+          </PageHeaderToolsGroup>
+          <PageHeaderToolsGroup className={css(accessibleStyles.screenReader, accessibleStyles.visibleOnSm)}>
+            <PageHeaderToolsItem className={css(accessibleStyles.screenReader, accessibleStyles.visibleOnSm)}>
               <Dropdown
                 className="pf-c-dropdown pf-c-dropdown--user"
                 isPlain
@@ -300,9 +300,9 @@ class Masthead extends React.Component {
                 autoFocus={false}
                 dropdownItems={this.getUserMenuResources(isAdmin)}
               />
-            </ToolbarItem>
-          </ToolbarGroup>
-        </Toolbar>
+            </PageHeaderToolsItem>
+          </PageHeaderToolsGroup>
+        </PageHeaderTools>
         {showAboutModal && <AboutModal isOpen={showAboutModal} closeAboutModal={this.closeAboutModal} />}
       </React.Fragment>
     );
@@ -311,7 +311,7 @@ class Masthead extends React.Component {
       <PageHeader
         logo={<Brand src={this.getLogo()} alt="Red Hat Solution Explorer" />}
         logoProps={logoProps}
-        toolbar={MastheadToolbar}
+        headerTools={MastheadToolbar}
       />
     );
   }

diff --git a/src/components/tutorialCard/tutorialCard.js b/src/components/tutorialCard/tutorialCard.js
@@ -2,9 +2,9 @@ import React from 'react';
 import {
   Button,
   Card,
-  CardHeader,
   CardBody,
   CardFooter,
+  CardTitle,
   Progress,
   ProgressMeasureLocation
 } from '@patternfly/react-core';
@@ -25,9 +25,9 @@ const TutorialCard = props => (
       props.history.push(props.getStartedLink);
     }}
   >
-    <CardHeader>
+    <CardTitle>
       <h3 className="pf-c-title pf-m-xl">{props.title}</h3>
-    </CardHeader>
+    </CardTitle>
     <CardBody>{props.children}</CardBody>
     <CardFooter>
       <div className="integr8ly-c-card__info pf-u-w-100">

diff --git a/src/components/tutorialDashboard/tutorialDashboard.js b/src/components/tutorialDashboard/tutorialDashboard.js
@@ -128,11 +128,7 @@ const TutorialDashboard = props => {
         </div>
       );
       htmlSnippet.push(
-        <Gallery
-          gutter="md"
-          key={`gallery-${allRepos[i]}`}
-          className="pf-u-mt-sm pf-u-mb-md integr8ly-gallery-override"
-        >
+        <Gallery hasGutter key={`gallery-${allRepos[i]}`} className="pf-u-mt-sm pf-u-mb-md integr8ly-gallery-override">
           {cards}
         </Gallery>
       );

diff --git a/src/pages/devResources/devResources.js b/src/pages/devResources/devResources.js
@@ -5,9 +5,9 @@ import {
   Grid,
   GridItem,
   Card,
-  CardHeader,
   CardBody,
   CardFooter,
+  CardTitle,
   ClipboardCopy,
   Page,
   PageSection,
@@ -78,16 +78,16 @@ class DevResourcesPage extends React.Component {
         <RoutedConnectedMasthead />
         <PageSection variant={PageSectionVariants.default}>
           <Breadcrumb homeClickedCallback={() => {}} threadName="Developer resources" />
-          <Grid gutter="md">
+          <Grid hasGutter>
             <GridItem mdOffset={4} md={12}>
               <h1 id="main-content" className="pf-c-title pf-m-2xl pf-u-mt-sm">
                 Developer resources
               </h1>
               <Card className="pf-u-w-50 pf-u-my-xl">
                 <div className="integr8ly-dev-resources-content">
-                  <CardHeader>
+                  <CardTitle>
                     <h2 className="pf-m-lg integr8ly-dev-resources-title">Cluster URLs</h2>
-                  </CardHeader>
+                  </CardTitle>
                   <CardBody>
                     <h4 className="pf-m-lg integr8ly-dev-resources-resource-title">
                       Logging

diff --git a/src/pages/error/error.js b/src/pages/error/error.js
@@ -35,7 +35,7 @@ class ErrorPage extends React.Component {
             <Bullseye>
               <EmptyState variant={EmptyStateVariant.full}>
                 <img src={errorImage} alt="" className="integr8ly-error-image pf-u-mb-2xl" />
-                <Title id="main-content" size="lg">
+                <Title headingLevel="h2" id="main-content" size="lg">
                   Error 404
                 </Title>
                 <EmptyStateBody>Requested page not found:</EmptyStateBody>

diff --git a/src/pages/landing/landingPage.js b/src/pages/landing/landingPage.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { Grid, GridItem, Page, PageSection, PageSectionVariants, Tabs, Tab } from '@patternfly/react-core';
+import { Grid, GridItem, Page, PageSection, PageSectionVariants, Tabs, Tab, TabContent } from '@patternfly/react-core';
 import { noop } from '../../common/helpers';
 import TutorialDashboard from '../../components/tutorialDashboard/tutorialDashboard';
 import InstalledAppsView from '../../components/installedAppsView/InstalledAppsView';
@@ -85,55 +85,76 @@ class LandingPage extends React.Component {
     const { walkthroughServices, middlewareServices, user } = this.props;
     const launchFn = isOpenShift4() ? this.handleServiceLaunchV4.bind(this) : this.handleServiceLaunch.bind(this);
     const openshiftHost = getOpenshiftHost(middlewareServices);
+    this.contentRef1 = React.createRef();
+    this.contentRef2 = React.createRef();
 
     return (
-      <React.Fragment>
-        <Page className="pf-u-h-100vh" onLoad={this.handleLoad}>
-          <RoutedConnectedMasthead currentUserName={this.state.currentUserName} />
-          <PageSection variant={PageSectionVariants.light} className="pf-u-py-0 pf-u-pl-lg pf-u-pr-0">
-            <h1 className="pf-c-title pf-m-4xl pf-c-landing__heading">Welcome to the Solution Explorer</h1>
-            <p className="pf-c-landing__content">
-              Quickly access consoles for all your Red Hat managed services, and learn how to easily implement
-              integrations with Solution Pattern examples.
-            </p>
-          </PageSection>
+      <Page className="pf-u-h-100vh" onLoad={this.handleLoad}>
+        <RoutedConnectedMasthead currentUserName={this.state.currentUserName} />
+        <PageSection variant={PageSectionVariants.light} className="pf-u-py-0 pf-u-pl-lg pf-u-pr-0">
+          <h1 className="pf-c-title pf-m-4xl pf-c-landing__heading">Welcome to the Solution Explorer</h1>
+          <p className="pf-c-landing__content">
+            Quickly access consoles for all your Red Hat managed services, and learn how to easily implement
+            integrations with Solution Pattern examples.
+          </p>
           <Tabs activeKey={this.state.activeTabKey} onSelect={this.handleTabClick}>
-            <Tab id="servicesTab" eventKey={0} title="All services" tabContentId="servicesTabSection">
-              <PageSection className="pf-u-py-0 pf-u-pl-lg pf-u-pr-0">
-                <div>
-                  <Grid>
-                    <GridItem sm={12} md={12}>
-                      <InstalledAppsView
-                        apps={Object.values(middlewareServices.data)}
-                        username={this.state.currentUserName}
-                        openshiftHost={openshiftHost}
-                        enableLaunch={!window.OPENSHIFT_CONFIG.mockData}
-                        showUnready={middlewareServices.customServices.showUnreadyServices || DISPLAY_SERVICES}
-                        customApps={middlewareServices.customServices.services}
-                        handleLaunch={svcName => launchFn(svcName)}
-                      />
-                    </GridItem>
-                  </Grid>
-                </div>
-              </PageSection>
-            </Tab>
+            <Tab
+              id="servicesTab"
+              eventKey={0}
+              title="All services"
+              tabContentId="servicesTabSection"
+              tabContentRef={this.contentRef1}
+            />
             <Tab
               id="solutionPatternsTab"
               eventKey={1}
               title="All Solution Patterns"
               tabContentId="solutionPatternsTabSection"
-            >
-              <PageSection className="pf-u-py-0 pf-u-pl-lg pf-u-pr-0">
-                <Grid gutter="md">
-                  <GridItem sm={12} md={12}>
-                    <TutorialDashboard userProgress={user.userProgress} walkthroughs={walkthroughServices.data} />
-                  </GridItem>
-                </Grid>
-              </PageSection>
-            </Tab>
+              tabContentRef={this.contentRef2}
+            />
           </Tabs>
-        </Page>
-      </React.Fragment>
+        </PageSection>
+        <PageSection className="pf-u-py-0 pf-u-pl-lg pf-u-pr-lg">
+          <React.Fragment>
+            <TabContent
+              className="integr8ly__tab-content"
+              eventKey={0}
+              id="refTab1Section"
+              ref={this.contentRef1}
+              aria-label="Tab item 1"
+            >
+              <Grid>
+                <GridItem sm={12} md={12}>
+                  <InstalledAppsView
+                    apps={Object.values(middlewareServices.data)}
+                    username={this.state.currentUserName}
+                    openshiftHost={openshiftHost}
+                    enableLaunch={!window.OPENSHIFT_CONFIG.mockData}
+                    showUnready={middlewareServices.customServices.showUnreadyServices || DISPLAY_SERVICES}
+                    customApps={middlewareServices.customServices.services}
+                    handleLaunch={svcName => launchFn(svcName)}
+                  />
+                </GridItem>
+              </Grid>
+            </TabContent>
+
+            <TabContent
+              className="integr8ly__tab-content"
+              eventKey={1}
+              id="refTab2Section"
+              ref={this.contentRef2}
+              aria-label="Tab item 2"
+              hidden
+            >
+              <Grid hasGutter>
+                <GridItem sm={12} md={12}>
+                  <TutorialDashboard userProgress={user.userProgress} walkthroughs={walkthroughServices.data} />
+                </GridItem>
+              </Grid>
+            </TabContent>
+          </React.Fragment>
+        </PageSection>
+      </Page>
     );
   }
 }