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/_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.tsx

@@ -0,0 +1,9 @@
+export * from './list-view';
+export * from './list-view-additional-info';
+export * from './list-view-body';
+export * from './list-view-description';
+export * from './list-view-description-heading';
+export * from './list-view-group-item';
+export * from './list-view-item';
+export * from './list-view-main-info';
+export * from './list-view-row';

frontend/public/components/overview/list-view/list-view-additional-info.tsx

@@ -0,0 +1,9 @@
+import * as React from 'react';
+
+export const ListViewAdditionalInfo: React.FC<ListViewAdditionalInfoProps> = ({ children }) => (
+  <div className="list-view-pf-additional-info">{children}</div>
+);
+
+type ListViewAdditionalInfoProps = {
+  children: React.ReactNode;
+};

frontend/public/components/overview/list-view/list-view-body.tsx

@@ -0,0 +1,9 @@
+import * as React from 'react';
+
+export const ListViewBody: React.FC<ListViewBodyProps> = ({ children }) => (
+  <div className="list-view-pf-body">{children}</div>
+);
+
+type ListViewBodyProps = {
+  children: React.ReactNode;
+};

frontend/public/components/overview/list-view/list-view-description-heading.tsx

@@ -0,0 +1,9 @@
+import * as React from 'react';
+
+export const ListViewDescriptionHeading: React.FC<ListViewDescriptionHeadingProps> = ({
+  children,
+}) => <div className="list-group-item-heading">{children}</div>;
+
+type ListViewDescriptionHeadingProps = {
+  children: React.ReactNode;
+};

frontend/public/components/overview/list-view/list-view-description.tsx

@@ -0,0 +1,9 @@
+import * as React from 'react';
+
+export const ListViewDescription: React.FC<ListViewDescriptionProps> = ({ children }) => (
+  <div className="list-view-pf-description">{children}</div>
+);
+
+type ListViewDescriptionProps = {
+  children: React.ReactNode;
+};

frontend/public/components/overview/list-view/list-view-group-item.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import * as classNames from 'classnames';
+
+export const ListViewGroupItem: React.FC<ListViewGroupItemProps> = ({
+  children,
+  className,
+  ...props
+}) => {
+  const classes = classNames('list-group-item', className);
+  return (
+    <div className={classes} {...props}>
+      {children}
+    </div>
+  );
+};
+
+type ListViewGroupItemProps = {
+  children: React.ReactNode;
+  className?: string;
+};

frontend/public/components/overview/list-view/list-view-item.tsx

@@ -0,0 +1,22 @@
+import * as React from 'react';
+
+import { ListViewGroupItem } from './list-view-group-item';
+import { ListViewRow } from './list-view-row';
+
+export const ListViewItem: React.FC<ListViewItemProps> = ({
+  additionalInfo,
+  heading,
+  ...props
+}) => (
+  <ListViewGroupItem {...props}>
+    <ListViewRow heading={heading} additionalInfo={additionalInfo} />
+  </ListViewGroupItem>
+);
+
+type ListViewItemProps = {
+  additionalInfo?: React.ReactNode[];
+  className?: string;
+  heading?: React.ReactNode;
+  id: string;
+  onClick: React.MouseEventHandler;
+};

frontend/public/components/overview/list-view/list-view-main-info.tsx

@@ -0,0 +1,9 @@
+import * as React from 'react';
+
+export const ListViewMainInfo: React.FC<ListViewMainInfoProps> = ({ children }) => (
+  <div className="list-view-pf-main-info">{children}</div>
+);
+
+type ListViewMainInfoProps = {
+  children: React.ReactNode;
+};

frontend/public/components/overview/list-view/list-view-row.tsx

@@ -0,0 +1,25 @@
+import * as React from 'react';
+
+import { ListViewAdditionalInfo } from './list-view-additional-info';
+import { ListViewBody } from './list-view-body';
+import { ListViewDescription } from './list-view-description';
+import { ListViewDescriptionHeading } from './list-view-description-heading';
+import { ListViewMainInfo } from './list-view-main-info';
+
+export const ListViewRow: React.FC<ListViewRowProps> = ({ additionalInfo, heading }) => (
+  <ListViewMainInfo key="main_info">
+    <ListViewBody>
+      {heading && (
+        <ListViewDescription>
+          {heading && <ListViewDescriptionHeading>{heading}</ListViewDescriptionHeading>}
+        </ListViewDescription>
+      )}
+      {additionalInfo && <ListViewAdditionalInfo>{additionalInfo}</ListViewAdditionalInfo>}
+    </ListViewBody>
+  </ListViewMainInfo>
+);
+
+type ListViewRowProps = {
+  additionalInfo?: React.ReactNode[];
+  heading?: React.ReactNode;
+};

frontend/public/components/overview/list-view/list-view.tsx

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import * as classNames from 'classnames';
+
+export const ListView: React.FC<ListViewProps> = ({ children, className, ...props }) => {
+  const classes = classNames('list-group list-view-pf list-view-pf-view', className);
+  return (
+    <div className={classes} {...props}>
+      {children}
+    </div>
+  );
+};
+
+type ListViewProps = {
+  children: React.ReactNode;
+  className?: string;
+};

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, ListViewItem } from './list-view';
 import {
   Status as TooltipStatus,
   YellowExclamationTriangleIcon,
@@ -324,7 +324,7 @@ const ProjectOverviewListItem = connect<
   );
 
   return (
-    <ListView.Item
+    <ListViewItem
       onClick={onClick}
       className={className}
       heading={heading}

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';