Update Versions screen with Patternfly 4

.gitignore

@@ -4,6 +4,8 @@
 /node_modules
 /.pnp
 .pnp.js
+package-lock.json
+yarn.lock
 
 # testing
 /coverage
@@ -24,3 +26,6 @@ yarn-error.log*
 
 #environment variable
 .env
+
+# vscode history
+.history

package.json

@@ -4,17 +4,19 @@
   "private": true,
   "dependencies": {
     "@patternfly/react-core": "^3.129.3",
+    "@patternfly/react-core-latest": "npm:@patternfly/react-core@^4.135.0",
     "@patternfly/react-topology": "^2.14.66",
+    "@patternfly/react-topology-latest": "npm:@patternfly/react-topology@^4.9.62",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
     "activestorage": "^5.2.4-1",
     "axios": "^0.19.1",
     "bootstrap": "^4.4.1",
     "dotenv": "^8.2.0",
-    "react": "^16.12.0",
+    "react": "^17.0.2",
     "react-bootstrap": "^1.0.1",
-    "react-dom": "^16.12.0",
+    "react-dom": "^17.0.2",
     "react-hook-form": "^6.0.8",
     "react-image": "^2.2.2",
     "react-image-mapper": "^0.0.15",

src/App.js

@@ -1,8 +1,8 @@
 import { Route, Switch, BrowserRouter } from "react-router-dom";
 import "@patternfly/react-core/dist/styles/base.css";
-import { PageHeader, Page } from "@patternfly/react-core";
+import { PageHeader, Page } from "@patternfly/react-core-latest";
 import React from "react";
-import Products from "./Screens/Products"
+import Products from "./Screens/Products";
 import Versions from "./Screens/Versions";
 
 export default function PageLayoutSimpleNav() {
@@ -12,16 +12,14 @@ export default function PageLayoutSimpleNav() {
   };
   return (
     <BrowserRouter>
-      <Switch>
-        <Page
-          header={<PageHeader logo={"LingoQA Dashboard"} logoProps={logoProps} />}>
+      <Page
+        header={<PageHeader logo={"LingoQA Dashboard"} logoProps={logoProps} />}
+      >
+        <Switch>
           <Route exact path="/" component={Products} />
-          <Route
-            path="/products/:productid/screenshots"
-            component={Versions}
-          />
-        </Page>
-      </Switch>
+          <Route path="/products/:productid/screenshots" component={Versions} />
+        </Switch>
+      </Page>
     </BrowserRouter>
   );
 }

src/Components/Breadcrumbs.js

@@ -1,23 +1,11 @@
 import React from "react";
-import { Link } from 'react-router-dom';
-import { AngleRightIcon } from '@patternfly/react-icons'
+import { Breadcrumb, BreadcrumbItem } from "@patternfly/react-core-latest";
 
 export default function Breadcrumbs() {
-    return (
-        <nav className="pf-c-breadcrumb" aria-label="breadcrumb">
-            <ol className="pf-c-breadcrumb__list">
-                <li className="pf-c-breadcrumb__item">
-                    <Link to="/" className="pf-c-breadcrumb__link">Products</Link>
-                    <span className="pf-c-breadcrumb__item-divider">
-                        <AngleRightIcon />
-                    </span>
-                </li>
-                <li className="pf-c-breadcrumb__item">
-                    <span className="pf-c-breadcrumb__link pf-m-current" aria-current="page">
-                        Versions
-                    </span>
-                </li>
-            </ol>
-        </nav>
-    )
+  return (
+      <Breadcrumb>
+        <BreadcrumbItem to="/"> Products </BreadcrumbItem>
+        <BreadcrumbItem isActive> Versions </BreadcrumbItem>
+      </Breadcrumb>
+  );
 }

src/Components/Paginate.js

@@ -1,6 +1,5 @@
 import React, { useState } from "react";
-import { Split, SplitItem } from "@patternfly/react-core";
-import { Pagination, PaginationVariant } from "@patternfly/react-core";
+import { Split, SplitItem, Pagination} from "@patternfly/react-core-latest";
 import SimpleEmptyState from "./SimpleEmptyState";
 
 export default function Paginate(props) {
@@ -15,36 +14,36 @@ export default function Paginate(props) {
 
   //Set the page
   const onSetPage = (_event, pageNumber) => {
-    setPage(pageNumber)
+    setPage(pageNumber);
   };
 
   //Items to be displayed per page
   const onPerPageSelect = (_event, perPage) => {
-    setPerPage(perPage)
+    setPerPage(perPage);
   };
 
-  //Next set of Items 
+  //Next set of Items
   const onNextClick = (_event, page) => {
-    setPage(page)
-    setOffset((page - 1) * (perPage))
+    setPage(page);
+    setOffset((page - 1) * perPage);
   };
 
   //Previous set of Items
   const onPreviousClick = (_event, page) => {
-    setPage(page)
-    setOffset((page - 1) * (perPage));
+    setPage(page);
+    setOffset((page - 1) * perPage);
   };
 
   //First set of Items
   const onFirstClick = (_event, page) => {
-    setPage(page)
-    setOffset(0)
+    setPage(page);
+    setOffset(0);
   };
 
   //Last set of items
   const onLastClick = (_event, page) => {
-    setPage(page)
-    setOffset((page - 1) * (perPage));
+    setPage(page);
+    setOffset((page - 1) * perPage);
   };
 
   React.useEffect(() => {
@@ -57,16 +56,29 @@ export default function Paginate(props) {
   React.useEffect(() => {
     const SetImages = () => {
       if (props.screenshotsEN.length !== 0) {
-        const elementsLeft = props.screenshotsEN[0].images.slice(offset, (offset + perPage));
-        setElementLeft(elementsLeft)
+        const elementsLeft = props.screenshotsEN[0].images.slice(
+          offset,
+          offset + perPage
+        );
+        setElementLeft(elementsLeft);
       }
       if (props.screenshotsOther.length !== 0) {
-        const elementsRight = props.screenshotsOther[0].images.slice(offset, (offset + perPage));
-        setElementRight(elementsRight)
+        const elementsRight = props.screenshotsOther[0].images.slice(
+          offset,
+          offset + perPage
+        );
+        setElementRight(elementsRight);
       }
-    }
+    };
     SetImages();
-  }, [offset, perPage, screenshotsEN, screenshotsOther])
+  }, [
+    offset,
+    perPage,
+    screenshotsEN,
+    screenshotsOther,
+    props.screenshotsEN,
+    props.screenshotsOther,
+  ]);
 
   const paginateEN = () => (
     <>
@@ -75,7 +87,6 @@ export default function Paginate(props) {
         itemCount={itemCount}
         perPage={perPage}
         page={page}
-        variant={PaginationVariant.bottom}
         onSetPage={onSetPage}
         onPerPageSelect={onPerPageSelect}
         onNextClick={onNextClick}
@@ -93,7 +104,6 @@ export default function Paginate(props) {
         itemCount={itemCount}
         perPage={perPage}
         page={page}
-        variant={PaginationVariant.bottom}
         onSetPage={onSetPage}
         onPerPageSelect={onPerPageSelect}
         onNextClick={onNextClick}
@@ -102,7 +112,7 @@ export default function Paginate(props) {
         onLastClick={onLastClick}
       />
     </>
-  )
+  );
 
   const paginateOther = () => (
     <>
@@ -111,7 +121,6 @@ export default function Paginate(props) {
         itemCount={itemCount}
         perPage={perPage}
         page={page}
-        variant={PaginationVariant.bottom}
         onSetPage={onSetPage}
         onPerPageSelect={onPerPageSelect}
         onNextClick={onNextClick}
@@ -121,29 +130,28 @@ export default function Paginate(props) {
       />
       {/* For screenshots display side by side */}
       <div id="image-compare">
-        <Split gutter="md">
+        <Split hasGutter gutter="md">
           <div>
-            {elementsLeft.length &&
+            {elementsLeft.length && (
               <SplitItem>
                 <div>
                   {elementsLeft.map((image, index) => (
                     <img src={image} alt="" key={index} className="image" />
                   ))}
                 </div>
               </SplitItem>
-
-            }
+            )}
           </div>
           <div>
-            {elementsRight.length &&
+            {elementsRight.length && (
               <SplitItem>
                 <div>
                   {elementsRight.map((image, index) => (
                     <img src={image} alt="" key={index} className="image" />
                   ))}
                 </div>
               </SplitItem>
-            }
+            )}
           </div>
         </Split>
       </div>
@@ -152,7 +160,6 @@ export default function Paginate(props) {
         itemCount={itemCount}
         perPage={perPage}
         page={page}
-        variant={PaginationVariant.bottom}
         onSetPage={onSetPage}
         onPerPageSelect={onPerPageSelect}
         onNextClick={onNextClick}
@@ -161,21 +168,23 @@ export default function Paginate(props) {
         onLastClick={onLastClick}
       />
     </>
-  )
+  );
 
   if (props.screenshotsEN.length === 0) {
     return <SimpleEmptyState />;
-  }
-  else if ((typeof itemCount !== "undefined") && (props.screenshotsOther.length === 0)) {
+  } else if (
+    typeof itemCount !== "undefined" &&
+    props.screenshotsOther.length === 0
+  ) {
     return <div className="mb-4">{paginateEN()}</div>;
-  }
-  else if ((typeof itemCount !== "undefined") && (props.screenshotsOther[0].id === props.screenshotsEN[0].id)) {
+  } else if (
+    typeof itemCount !== "undefined" &&
+    props.screenshotsOther[0].id === props.screenshotsEN[0].id
+  ) {
     return <div className="mb-4">{paginateEN()}</div>;
-  }
-  else {
+  } else {
     if (typeof itemCount !== "undefined")
-      return <div className="mb-4">{paginateOther()}</div>
-    else
-      return null
+      return <div className="mb-4">{paginateOther()}</div>;
+    else return null;
   }
 }