fix(DualList): Distinguish between default hidden item to hidden by filterItems that were defaultly set to hidden, shouldn't be modified by the components filter. (#1911)

Author: ronlavi2412

packages/patternfly-3/patternfly-react/src/components/DualListSelector/DualList.js

@@ -18,7 +18,7 @@ import {
   isItemExistOnList,
   filterByHiding,
   getFilterredItemsLength,
-  makeAllItemsVisible,
+  makeAllHiddenFilteredItemsVisible,
   getSelectedFilterredItemsLength,
   isItemSelected,
   getFilterredItems
@@ -129,7 +129,7 @@ class DualList extends React.Component {
     } = this.props;
     const filterTerm = value.trim();
     if (!value) {
-      const items = makeAllItemsVisible(originalItems);
+      const items = makeAllHiddenFilteredItemsVisible(originalItems);
       const isMainChecked = isAllItemsChecked(items, selectCount);
       this.props.onFilterChange({ side, filterTerm, items, isMainChecked });
       return;

packages/patternfly-3/patternfly-react/src/components/DualListSelector/components/DualListItem.js

@@ -18,6 +18,7 @@ const DualListItem = ({
   onChange,
   side,
   hidden,
+  hiddenByFilter,
   disabled,
   tooltipID,
   tooltipText
@@ -29,7 +30,7 @@ const DualListItem = ({
     </span>
   );
   const item = (
-    <label className={cx} hidden={hidden}>
+    <label className={cx} hidden={hiddenByFilter || hidden}>
       <input
         type="checkbox"
         data-position={position}
@@ -80,6 +81,8 @@ DualListItem.propTypes = {
   /** The side of the selector. */
   side: PropTypes.string,
   /** Sets the item visibillity when filtering. */
+  hiddenByFilter: PropTypes.bool,
+  /** Sets the item default visibillity, can't be reverted. */
   hidden: PropTypes.bool,
   /** Disable the item to move between lists */
   disabled: PropTypes.bool,
@@ -99,6 +102,7 @@ DualListItem.defaultProps = {
   filterTerm: null,
   onChange: noop,
   side: null,
+  hiddenByFilter: false,
   hidden: false,
   disabled: false,
   tooltipID: null,

packages/patternfly-3/patternfly-react/src/components/DualListSelector/helpers.js

@@ -4,32 +4,33 @@ export const filterByHiding = (list, value) => {
     const itemLabel = item.label.toLowerCase();
     const included = itemLabel.includes(filterValue);
     // if the item label matches the filter value.
-    item.hidden = !included;
+    item.hiddenByFilter = !included;
     // if it is a parent and its label doesn't match the filter value.
     if (itemHasChildren(item)) {
-      if (isItemHidden(item)) {
+      if (isItemHiddenByFilter(item)) {
         let childrenIncludedAmount = 0;
         item.children.forEach(childItem => {
           const childLabel = childItem.label.toLowerCase();
           const childIncluded = childLabel.includes(filterValue);
-          childItem.hidden = !childIncluded;
+          childItem.hiddenByFilter = !childIncluded;
           childrenIncludedAmount += childIncluded ? 1 : 0;
         });
-        item.hidden = childrenIncludedAmount === 0;
+        item.hiddenByFilter = childrenIncludedAmount === 0;
       } else {
-        item.children = makeAllItemsVisible(item.children);
+        item.children = makeAllHiddenFilteredItemsVisible(item.children);
       }
     }
     return item;
   });
 };
 
-export const makeAllItemsVisible = list =>
+// We don't want to touch default hidden items that the consumer set to hidden.
+export const makeAllHiddenFilteredItemsVisible = list =>
   list.map(item => {
-    item.hidden = false;
+    item.hiddenByFilter = false;
     if (itemHasChildren(item)) {
       item.children.forEach(childItem => {
-        childItem.hidden = false;
+        childItem.hiddenByFilter = false;
       });
     }
     return item;
@@ -40,7 +41,7 @@ export const sortItems = (items, sortFactor = 'label') =>
 
 export const shouldItemBeChecked = (item, isMainChecked, resetAllSelected) => {
   let checked = item.checked || false;
-  const isItemEditable = !item.disabled || !item.hidden;
+  const isItemEditable = !item.disabled || !item.hidden || !item.isItemHiddenByFilter;
   if (!isItemEditable) {
     return checked;
   }
@@ -210,12 +211,12 @@ export const isItemExistOnList = (list, itemLabel) => {
 export const getFilterredItems = list => {
   const filteredItems = [];
   list.forEach(item => {
-    if (!isItemHidden(item)) {
+    if (!isItemHiddenByFilter(item)) {
       filteredItems.push(item);
     } else if (itemHasChildren(item)) {
       const filteredChildren = [];
       item.children.forEach(childItem => {
-        if (!isItemHidden(childItem)) {
+        if (!isItemHiddenByFilter(childItem)) {
           filteredChildren.push(childItem);
         }
       });
@@ -254,6 +255,6 @@ export const getSelectedFilterredItemsLength = list => {
 
 export const isItemSelected = item => item.checked;
 
-export const isItemHidden = item => item.hidden;
+export const isItemHiddenByFilter = item => item.hiddenByFilter;
 
 export const isItemDisabled = item => item.disabled;