Migrate ListView from patternfly-react

Resolves https://jira.coreos.com/browse/CONSOLE-1721

frontend/public/components/overview/_project-overview.scss

@@ -49,16 +49,6 @@
 
   .project-overview__item {
     min-height: 71px;
-
-    &.list-group-item {
-      background-clip: initial;
-      border-bottom: 1px solid $color-pf-black-200;
-      border-left: 0;
-      border-right: 0;
-      border-top: 1px solid $color-pf-black-200;
-      cursor: pointer;
-      position: relative;
-    }
   }
 
   .project-overview__item--selected {
@@ -128,17 +118,6 @@
   }
 
   @media (min-width: $screen-md-min) {
-    // Override Patternfly list view styles so that the additional info has a
-    // little more space for alerts, metrics, and pod status.
-    .list-view-pf-additional-info {
-      width: 62%;
-    }
-
-    .list-view-pf-description {
-      flex-basis: 38%;
-      width: 38%;
-    }
-
     .project-overview__detail--cpu,
     .project-overview__detail--memory {
       text-align: right;

frontend/public/components/overview/list-view/ListView.jsx

@@ -0,0 +1,60 @@
+import classNames from 'classnames';
+import React from 'react';
+import ListViewAdditionalInfo from './ListViewAdditionalInfo';
+import ListViewBody from './ListViewBody';
+import ListViewDescription from './ListViewDescription';
+import ListViewDescriptionHeading from './ListViewDescriptionHeading';
+import ListViewGroupItem from './ListViewGroupItem';
+import ListViewItem from './ListViewItem';
+import ListViewMainInfo from './ListViewMainInfo';
+import ListViewRow from './ListViewRow';
+
+/**
+ * Components in this module are used as building blocks for ListViewItem and
+ * ListViewRow. If needed, components can be used to create custom ListViewItem
+ *
+ * Custom ListView example:
+ *
+ * <ListView>
+ *   <ListViewItem>
+ *     <ListViewGroupItem>
+ *       <ListViewRow>
+ *          <ListViewMainInfo>
+ *            <ListViewBody>
+ *              <ListViewDescription>
+ *                <ListViewDescriptionHeading>
+ *                  {name}
+ *                </ListViewDescriptionHeading>
+ *              </ListViewDescription>
+ *              <ListViewAdditionalInfo />
+ *            </ListViewBody>
+ *          </ListViewMainInfo>
+ *       </ListViewRow>
+ *    </ListViewGroupItem>
+ *  </ListViewItem>
+ *   ...
+ * </ListView>
+ */
+
+/**
+ * ListView component wraps ListViewItems
+ */
+const ListView = ({ children, className, ...props }) => {
+  const classes = classNames('list-group list-view-pf list-view-pf-view', className);
+  return (
+    <div className={classes} {...props}>
+      {children}
+    </div>
+  );
+};
+
+ListView.AdditionalInfo = ListViewAdditionalInfo;
+ListView.Body = ListViewBody;
+ListView.Description = ListViewDescription;
+ListView.DescriptionHeading = ListViewDescriptionHeading;
+ListView.GroupItem = ListViewGroupItem;
+ListView.Item = ListViewItem;
+ListView.MainInfo = ListViewMainInfo;
+ListView.Row = ListViewRow;
+
+export default ListView;

frontend/public/components/overview/list-view/ListViewAdditionalInfo.jsx

@@ -0,0 +1,10 @@
+import React from 'react';
+
+/**
+ * ListViewAdditionalInfo defines additional info section
+ */
+const ListViewAdditionalInfo = ({ children }) => (
+  <div className="list-view-pf-additional-info">{children}</div>
+);
+
+export default ListViewAdditionalInfo;

frontend/public/components/overview/list-view/ListViewBody.jsx

@@ -0,0 +1,8 @@
+import React from 'react';
+
+/**
+ * ListViewBody wraps the central section of ListViewItem
+ */
+const ListViewBody = ({ children }) => <div className="list-view-pf-body">{children}</div>;
+
+export default ListViewBody;

frontend/public/components/overview/list-view/ListViewDescription.jsx

@@ -0,0 +1,10 @@
+import React from 'react';
+
+/**
+ * ListViewDescription wraps Heading
+ */
+const ListViewDescription = ({ children }) => (
+  <div className="list-view-pf-description">{children}</div>
+);
+
+export default ListViewDescription;

frontend/public/components/overview/list-view/ListViewDescriptionHeading.jsx

@@ -0,0 +1,10 @@
+import React from 'react';
+
+/**
+ * ListViewDescriptionHeading renders ListViewItem heading
+ */
+const ListViewDescriptionHeading = ({ children }) => (
+  <div className="list-group-item-heading">{children}</div>
+);
+
+export default ListViewDescriptionHeading;

frontend/public/components/overview/list-view/ListViewGroupItem.jsx

@@ -0,0 +1,16 @@
+import classNames from 'classnames';
+import React from 'react';
+
+/**
+ * ListViewGroupItem is a root node of each ListViewItem
+ */
+const ListViewGroupItem = ({ children, className, ...props }) => {
+  const classes = classNames('list-group-item', className);
+  return (
+    <div className={classes} {...props}>
+      {children}
+    </div>
+  );
+};
+
+export default ListViewGroupItem;

frontend/public/components/overview/list-view/ListViewItem.jsx

@@ -0,0 +1,16 @@
+import React from 'react';
+
+import ListViewGroupItem from './ListViewGroupItem';
+import ListViewRow from './ListViewRow';
+
+/**
+ * ListViewItem - main ListViewItem component.
+ */
+
+const ListViewItem = ({ additionalInfo, heading, ...other }) => (
+  <ListViewGroupItem {...other}>
+    <ListViewRow heading={heading} additionalInfo={additionalInfo} />
+  </ListViewGroupItem>
+);
+
+export default ListViewItem;

frontend/public/components/overview/list-view/ListViewMainInfo.jsx

@@ -0,0 +1,8 @@
+import React from 'react';
+
+/**
+ * ListViewMainInfo wraps the informational content of the ListViewItem
+ */
+const ListViewMainInfo = ({ children }) => <div className="list-view-pf-main-info">{children}</div>;
+
+export default ListViewMainInfo;

frontend/public/components/overview/list-view/ListViewRow.jsx

@@ -0,0 +1,32 @@
+import React from 'react';
+
+import ListViewAdditionalInfo from './ListViewAdditionalInfo';
+import ListViewBody from './ListViewBody';
+import ListViewDescription from './ListViewDescription';
+import ListViewDescriptionHeading from './ListViewDescriptionHeading';
+import ListViewMainInfo from './ListViewMainInfo';
+
+/**
+ * ListViewRow wraps the ListViewItem row, conditionally renders sections
+ * based on availability of individual props, maintains the ListItem row structure
+ */
+const ListViewRow = ({ additionalInfo, heading }) => {
+  const items = [];
+
+  items.push(
+    <ListViewMainInfo key="main_info">
+      <ListViewBody>
+        {heading && (
+          <ListViewDescription>
+            {heading && <ListViewDescriptionHeading>{heading}</ListViewDescriptionHeading>}
+          </ListViewDescription>
+        )}
+        {additionalInfo && <ListViewAdditionalInfo>{additionalInfo}</ListViewAdditionalInfo>}
+      </ListViewBody>
+    </ListViewMainInfo>,
+  );
+
+  return items;
+};
+
+export default ListViewRow;

frontend/public/components/overview/list-view/_list-view.scss

@@ -0,0 +1,91 @@
+.list-view-pf {
+  .list-group-item {
+    align-items: flex-start;
+    border: 1px solid $color-pf-black-200;
+    border-left: 0;
+    border-right: 0;
+    @include clearfix(); //IE9 fallback
+    cursor: pointer;
+    display: flex;
+    flex-wrap: wrap;
+    padding-bottom: 0;
+    padding-top: 0;
+    position: relative;
+    &:hover {
+      background-color: $list-view-hover-bg;
+    }
+    @media (min-width: $screen-md-min) {
+      align-items: center;
+    }
+  }
+  .list-group-item-heading {
+    font-size: $font-size-h3;
+    small {
+      display: block;
+      font-size: ($font-size-base * .8);
+      font-weight: 400;
+    }
+    @media (min-width: $screen-md-min) {
+      flex: 1 0 unquote("calc(25% - 20px)");
+      float: left; // IE9 fallback
+      font-size: $font-size-base;
+      margin: 0 ($grid-gutter-width/2) 0 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      width: unquote("calc(25% - 20px)"); // IE9 fallback
+    }
+  }
+}
+.list-view-pf-additional-info {
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+  @media (min-width: $screen-md-min) {
+    flex: 1 0 auto; // it covers whats left from summary
+    float: left; // IE9 fallback
+    width: 62%; // IE9 fallback
+  }
+}
+.list-view-pf-body {
+  align-items: center;
+  display: table-cell; //IE9 fallback
+  flex: 1;
+  min-width: 0;
+  vertical-align: top; //IE9 fallback
+  width: 100%; // IE9 fallback, it extends the cell to size of the container
+  @media (min-width: $screen-md-min) {
+    align-items: center;
+    display: flex;
+    flex-direction: row;
+  }
+}
+.list-view-pf-description {
+  flex: 1 0 50%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  @media (min-width: $screen-md-min) {
+    align-items: center;
+    display: flex;
+    flex-basis: 38%;
+    float: left; //IE9 fallback
+    width: 38%; //IE9 fallback
+  }
+}
+.list-view-pf-main-info {
+  align-items: flex-start;
+  display: flex;
+  flex: 1;
+  min-width: 0;
+  padding-bottom: ($grid-gutter-width/2);
+  padding-top: ($grid-gutter-width/2);
+  @media (min-width: $screen-md-min) {
+    align-items: center;
+    .list-view-pf-top-align & {
+      align-items: flex-start;
+    }
+  }
+}
+.list-view-pf-view {
+  margin-top: 30px;
+}

frontend/public/components/overview/list-view/index.jsx

@@ -0,0 +1,21 @@
+import ListView from './ListView';
+import ListViewAdditionalInfo from './ListViewAdditionalInfo';
+import ListViewBody from './ListViewBody';
+import ListViewDescription from './ListViewDescription';
+import ListViewDescriptionHeading from './ListViewDescriptionHeading';
+import ListViewGroupItem from './ListViewGroupItem';
+import ListViewItem from './ListViewItem';
+import ListViewMainInfo from './ListViewMainInfo';
+import ListViewRow from './ListViewRow';
+
+export {
+  ListView,
+  ListViewAdditionalInfo,
+  ListViewBody,
+  ListViewDescription,
+  ListViewDescriptionHeading,
+  ListViewGroupItem,
+  ListViewItem,
+  ListViewMainInfo,
+  ListViewRow,
+};

frontend/public/components/overview/project-overview.tsx

@@ -3,9 +3,9 @@ import * as classnames from 'classnames';
 import * as React from 'react';
 import { connect } from 'react-redux';
 import { Link } from 'react-router-dom';
-import { ListView } from 'patternfly-react';
 import { Button, Tooltip } from '@patternfly/react-core';
 
+import { ListView } from './list-view';
 import {
   Status as TooltipStatus,
   YellowExclamationTriangleIcon,

frontend/public/style.scss

@@ -85,8 +85,8 @@
 @import "components/cluster-service-instance";
 @import "components/overview/build-overview";
 @import "components/overview/overview";
+@import "components/overview/list-view/list-view";
 @import "components/overview/project-overview";
-@import "components/list-view";
 @import "components/deploy-image";
 @import "components/instantiate-template";
 @import "components/routes/create-route";

frontend/public/vendor.scss

@@ -32,7 +32,6 @@
 @import '~patternfly/dist/sass/patternfly/dropdowns'; // required by @patternfly/react-console
 @import '~patternfly/dist/sass/patternfly/modals';
 @import '~patternfly/dist/sass/patternfly/toolbar';
-@import '~patternfly/dist/sass/patternfly/list-view';
 @import '~patternfly/dist/sass/patternfly/forms';
 @import "~xterm/dist/addons/fullscreen/fullscreen";
 @import '~patternfly-react-extensions/dist/sass/variables';