feat(inventoryList): issues/476 activate display name search (#554)

RedHatInsights · Jan 19, 2021 · 4a6de88 · 4a6de88
1 parent 6842bb5
commit 4a6de88
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 20 deletions.
diff --git a/src/components/inventoryList/__tests__/__snapshots__/inventoryList.test.js.snap b/src/components/inventoryList/__tests__/__snapshots__/inventoryList.test.js.snap
@@ -225,10 +225,17 @@ exports[`InventoryList Component should handle variations in data: filtered data
     updateOnContent={true}
     updateOnResize={true}
   >
-    <CardHeader>
-      <CardActions
-        className=""
-      >
+    <CardHeader
+      className=""
+    >
+      <CardHeaderMain>
+        <ToolbarFieldDisplayName
+          t={[Function]}
+          value={null}
+          viewId="inventoryList"
+        />
+      </CardHeaderMain>
+      <CardActions>
         <Pagination
           dropDirection="down"
           isCompact={true}
@@ -332,10 +339,17 @@ exports[`InventoryList Component should handle variations in data: variable data
     updateOnContent={true}
     updateOnResize={true}
   >
-    <CardHeader>
-      <CardActions
-        className=""
-      >
+    <CardHeader
+      className=""
+    >
+      <CardHeaderMain>
+        <ToolbarFieldDisplayName
+          t={[Function]}
+          value={null}
+          viewId="inventoryList"
+        />
+      </CardHeaderMain>
+      <CardActions>
         <Pagination
           dropDirection="down"
           isCompact={true}
@@ -435,10 +449,17 @@ exports[`InventoryList Component should render a non-connected component: non-co
     updateOnContent={true}
     updateOnResize={true}
   >
-    <CardHeader>
-      <CardActions
-        className=""
-      >
+    <CardHeader
+      className=""
+    >
+      <CardHeaderMain>
+        <ToolbarFieldDisplayName
+          t={[Function]}
+          value={null}
+          viewId="inventoryList"
+        />
+      </CardHeaderMain>
+      <CardActions>
         <Pagination
           dropDirection="down"
           isCompact={true}

diff --git a/src/components/inventoryList/inventoryList.js b/src/components/inventoryList/inventoryList.js
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import _isEqual from 'lodash/isEqual';
 import { SortByDirection, TableVariant } from '@patternfly/react-table';
-import { Bullseye, Card, CardActions, CardBody, CardFooter, CardHeader } from '@patternfly/react-core';
+import { Bullseye, Card, CardActions, CardBody, CardFooter, CardHeader, CardHeaderMain } from '@patternfly/react-core';
 import { TableToolbar } from '@redhat-cloud-services/frontend-components/components/cjs/TableToolbar';
 import _camelCase from 'lodash/camelCase';
 import { helpers } from '../../common';
@@ -13,6 +13,7 @@ import { MinHeight } from '../minHeight/minHeight';
 import GuestsList from '../guestsList/guestsList';
 import { inventoryListHelpers } from './inventoryListHelpers';
 import Pagination from '../pagination/pagination';
+import { ToolbarFieldDisplayName } from '../toolbar/toolbarFieldDisplayName';
 import { paginationHelpers } from '../pagination/paginationHelpers';
 import {
   RHSM_API_QUERY_SORT_DIRECTION_TYPES as SORT_DIRECTION_TYPES,
@@ -194,7 +195,8 @@ class InventoryList extends React.Component {
       pending,
       perPageDefault,
       query,
-      t
+      t,
+      viewId
     } = this.props;
 
     if (isDisabled) {
@@ -220,8 +222,11 @@ class InventoryList extends React.Component {
     return (
       <Card className="curiosity-inventory-card">
         <MinHeight key="headerMinHeight" updateOnContent>
-          <CardHeader>
-            <CardActions className={(error && 'blur') || ''}>
+          <CardHeader className={(error && 'hidden') || ''}>
+            <CardHeaderMain>
+              <ToolbarFieldDisplayName viewId={viewId} />
+            </CardHeaderMain>
+            <CardActions>
               <Pagination
                 isCompact
                 isDisabled={pending || error}
@@ -279,7 +284,7 @@ class InventoryList extends React.Component {
  *
  * @type {{settings:object, productId: string, listData: Array, session: object, pending: boolean,
  *     query: object, fulfilled: boolean, getHostsInventory: Function, error: boolean,
- *     itemCount: number, t: Function, filterInventoryData: Array, filterGuestsData: Array,
+ *     itemCount: number, viewId: string, t: Function, filterInventoryData: Array, filterGuestsData: Array,
  *     perPageDefault: number, isDisabled: boolean}}
  */
 InventoryList.propTypes = {
@@ -317,14 +322,15 @@ InventoryList.propTypes = {
   settings: PropTypes.shape({
     hasGuests: PropTypes.func
   }),
-  t: PropTypes.func
+  t: PropTypes.func,
+  viewId: PropTypes.string
 };
 
 /**
  * Default props.
  *
  * @type {{settings: object, listData: Array, session: object, pending: boolean, fulfilled: boolean,
- *     getHostsInventory: Function, error: boolean, itemCount: number, t: translate,
+ *     getHostsInventory: Function, error: boolean, itemCount: number, viewId: string, t: translate,
  *     filterInventoryData: Array, filterGuestsData: Array, perPageDefault: number, isDisabled: boolean}}
  */
 InventoryList.defaultProps = {
@@ -340,7 +346,8 @@ InventoryList.defaultProps = {
   perPageDefault: 10,
   session: {},
   settings: {},
-  t: translate
+  t: translate,
+  viewId: 'inventoryList'
 };
 
 /**

diff --git a/src/styles/_inventory-list.scss b/src/styles/_inventory-list.scss
@@ -16,6 +16,11 @@
       padding: 0;
     }
 
+    .pf-c-card__actions {
+      margin: inherit;
+      margin-left: auto;
+    }
+
     .pf-c-card__body {
       padding-left: 0;
       padding-right: 0;