feat(RulesTable): RHICOMPL-1550 selected filter switch

Add a Switch for selected rules vs. filter + filter chip Signed-off-by: Andrew Kofink <akofink@redhat.com>
Hyperkid123 · Apr 1, 2021 · 329d053 · 329d053
1 parent 7227d46
commit 329d053
Show file tree

Hide file tree

Showing 7 changed files with 55 additions and 124 deletions.
diff --git a/packages/inventory-compliance/src/SystemRulesTable/SystemRulesTable.js b/packages/inventory-compliance/src/SystemRulesTable/SystemRulesTable.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import propTypes from 'prop-types';
-import { Pagination, PaginationVariant, ToolbarItem } from '@patternfly/react-core';
+import { Pagination, PaginationVariant, Switch, ToolbarItem } from '@patternfly/react-core';
 import { CheckCircleIcon, ExclamationCircleIcon, AnsibeTowerIcon } from '@patternfly/react-icons';
 import { Table, TableHeader, TableBody, sortable, fitContent } from '@patternfly/react-table';
 import { PrimaryToolbar } from '@redhat-cloud-services/frontend-components/PrimaryToolbar';
@@ -32,7 +32,6 @@ class SystemRulesTable extends React.Component {
     remediationAvailableFilter = this.props.remediationAvailableFilter || this.props.remediationsEnabled;
 
     config = buildFilterConfig({
-        selectedFilter: this.props.selectedFilter,
         remediationAvailableFilter: this.remediationAvailableFilter,
         showPassFailFilter: (this.props.columns.filter((c) => (c.title === 'Passed')).length > 0)
     });
@@ -48,8 +47,8 @@ class SystemRulesTable extends React.Component {
         ruleCount: 0,
         selectedToRemediate: [],
         openIds: [],
+        selectedOnly: this.props.selectedFilter,
         activeFilters: this.filterConfigBuilder.initialDefaultState({
-            selected: this.props.selectedFilter ? [ 'selected' ] : undefined,
             passed: this.props.hidePassed ? 'failed' : undefined,
             remediationAvailable: this.remediationAvailableFilter ? 'true' : undefined
         })
@@ -158,7 +157,7 @@ class SystemRulesTable extends React.Component {
         )
     )
 
-    selectedRules = (rules) => {
+    addIsSelected = (rules) => {
         const { selectedRefIds, remediationsEnabled } = this.props;
         const { selectedToRemediate } = this.state;
 
@@ -172,6 +171,11 @@ class SystemRulesTable extends React.Component {
         });
     }
 
+    selectedRules = (rules) => {
+        rules = this.addIsSelected(rules);
+        return this.state.selectedOnly ? rules.filter(rule => rule.isSelected) : rules;
+    }
+
     openedRules = (rules) => (
         rules.map((rule) => ({
             ...rule,
@@ -182,8 +186,10 @@ class SystemRulesTable extends React.Component {
     getRules = () => {
         const rules = toRulesArray(this.props.profileRules);
         return this.sortedRules(
-            this.filteredRules(
-                this.selectedRules(this.openedRules(rules))
+            this.selectedRules(
+                this.filteredRules(
+                    this.openedRules(rules)
+                )
             )
         );
     }
@@ -315,7 +321,7 @@ class SystemRulesTable extends React.Component {
             sortBy, page, itemsPerPage, selectedToRemediate
         } = this.state;
         const {
-            remediationsEnabled, system, loading, columns, handleSelect
+            remediationsEnabled, system, loading, columns, handleSelect, selectedFilter
         } = this.props;
         const rules = this.getRules();
         const filterChips = this.chipBuilder.chipsFor(this.state.activeFilters);
@@ -365,6 +371,15 @@ class SystemRulesTable extends React.Component {
                                 selectedRules={ selectedRulesWithRemediations } />
                         </ToolbarItem>
                     }
+                    { selectedFilter &&
+                        <ToolbarItem>
+                            <Switch
+                                label='Selected only'
+                                isChecked={ this.state.selectedOnly }
+                                onChange={ isChecked => this.setState({ selectedOnly: isChecked }) }
+                            />
+                        </ToolbarItem>
+                    }
                     <ToolbarItem>
                         { ruleCount } results
                     </ToolbarItem>

diff --git a/packages/inventory-compliance/src/SystemRulesTable/SystemRulesTable.test.js b/packages/inventory-compliance/src/SystemRulesTable/SystemRulesTable.test.js
@@ -263,10 +263,9 @@ describe('SystemRulesTable component', () => {
                     ] }
                 />
             );
-            const instance = wrapper.instance();
-            await instance.onFilterUpdate('selected', [ 'selected' ]);
+            expect(wrapper.state.selectedOnly === true);
             expect(toJson(wrapper)).toMatchSnapshot();
-            await instance.onFilterUpdate('selected', undefined);
+            wrapper.setState({ selectedOnly: false });
             expect(toJson(wrapper)).toMatchSnapshot();
         });
     });

diff --git a/...ges/inventory-compliance/src/SystemRulesTable/__snapshots__/SystemRulesTable.test.js.snap b/...ges/inventory-compliance/src/SystemRulesTable/__snapshots__/SystemRulesTable.test.js.snap
@@ -5742,16 +5742,7 @@ exports[`SystemRulesTable component tailoring rules should be able to filter by
   <PrimaryToolbar
     activeFiltersConfig={
       Object {
-        "filters": Array [
-          Object {
-            "category": "Selected",
-            "chips": Array [
-              Object {
-                "name": "Show selected rules",
-              },
-            ],
-          },
-        ],
+        "filters": Array [],
         "onDelete": [Function],
       }
     }
@@ -5840,24 +5831,6 @@ exports[`SystemRulesTable component tailoring rules should be able to filter by
             "placeholder": "Filter by severity",
             "type": "checkbox",
           },
-          Object {
-            "filterValues": Object {
-              "items": Array [
-                Object {
-                  "label": "Show selected rules",
-                  "value": "selected",
-                },
-              ],
-              "onChange": [Function],
-              "value": Array [
-                "selected",
-              ],
-            },
-            "id": "selected",
-            "label": "Selected",
-            "placeholder": "Filter by selected",
-            "type": "checkbox",
-          },
           Object {
             "filterValues": Object {
               "items": Array [
@@ -5945,6 +5918,15 @@ exports[`SystemRulesTable component tailoring rules should be able to filter by
         selectedRules={Array []}
       />
     </ToolbarItem>
+    <ToolbarItem>
+      <Switch
+        aria-label=""
+        isChecked={true}
+        isDisabled={false}
+        label="Selected only"
+        onChange={[Function]}
+      />
+    </ToolbarItem>
     <ToolbarItem>
       0
        results
@@ -6183,22 +6165,6 @@ exports[`SystemRulesTable component tailoring rules should be able to filter by
             "placeholder": "Filter by severity",
             "type": "checkbox",
           },
-          Object {
-            "filterValues": Object {
-              "items": Array [
-                Object {
-                  "label": "Show selected rules",
-                  "value": "selected",
-                },
-              ],
-              "onChange": [Function],
-              "value": undefined,
-            },
-            "id": "selected",
-            "label": "Selected",
-            "placeholder": "Filter by selected",
-            "type": "checkbox",
-          },
           Object {
             "filterValues": Object {
               "items": Array [
@@ -6286,6 +6252,15 @@ exports[`SystemRulesTable component tailoring rules should be able to filter by
         selectedRules={Array []}
       />
     </ToolbarItem>
+    <ToolbarItem>
+      <Switch
+        aria-label=""
+        isChecked={false}
+        isDisabled={false}
+        label="Selected only"
+        onChange={[Function]}
+      />
+    </ToolbarItem>
     <ToolbarItem>
       52
        results
@@ -7057,16 +7032,7 @@ exports[`SystemRulesTable component tailoring rules should be able to show all s
   <PrimaryToolbar
     activeFiltersConfig={
       Object {
-        "filters": Array [
-          Object {
-            "category": "Selected",
-            "chips": Array [
-              Object {
-                "name": "Show selected rules",
-              },
-            ],
-          },
-        ],
+        "filters": Array [],
         "onDelete": [Function],
       }
     }
@@ -7155,24 +7121,6 @@ exports[`SystemRulesTable component tailoring rules should be able to show all s
             "placeholder": "Filter by severity",
             "type": "checkbox",
           },
-          Object {
-            "filterValues": Object {
-              "items": Array [
-                Object {
-                  "label": "Show selected rules",
-                  "value": "selected",
-                },
-              ],
-              "onChange": [Function],
-              "value": Array [
-                "selected",
-              ],
-            },
-            "id": "selected",
-            "label": "Selected",
-            "placeholder": "Filter by selected",
-            "type": "checkbox",
-          },
           Object {
             "filterValues": Object {
               "items": Array [
@@ -7260,6 +7208,15 @@ exports[`SystemRulesTable component tailoring rules should be able to show all s
         selectedRules={Array []}
       />
     </ToolbarItem>
+    <ToolbarItem>
+      <Switch
+        aria-label=""
+        isChecked={true}
+        isDisabled={false}
+        label="Selected only"
+        onChange={[Function]}
+      />
+    </ToolbarItem>
     <ToolbarItem>
       0
        results

diff --git a/packages/inventory-compliance/src/Utilities/FilterBuilderConfigBuilder.js b/packages/inventory-compliance/src/Utilities/FilterBuilderConfigBuilder.js
@@ -54,17 +54,6 @@ const PASS_FILTER_CONFIG = {
     ))
 };
 
-const SELECTED_FILTER_CONFIG = {
-    type: conditionalFilterType.checkbox,
-    label: 'Selected',
-    items: [
-        { label: 'Show selected rules', value: 'selected' }
-    ],
-    filter: (rules, value) => rules.filter((rule) => (
-        value[0] === 'selected' ? rule.isSelected === true : true
-    ))
-};
-
 export const POLICIES_FILTER_CONFIG = (policies) => ({
     type: conditionalFilterType.checkbox,
     label: 'Policy',
@@ -85,17 +74,13 @@ export const REMEDIATION_AVAILABLE_FILTER_CONFIG = {
     filter: (rules, value) => rules.filter(rule => rule.remediationAvailable)
 };
 
-const buildFilterConfig = ({ showPassFailFilter, policies, selectedFilter, remediationAvailableFilter }) => {
+const buildFilterConfig = ({ showPassFailFilter, policies, remediationAvailableFilter }) => {
     const config = [ ...BASE_FILTER_CONFIGURATION ];
 
     if (showPassFailFilter) {
         config.push(PASS_FILTER_CONFIG);
     }
 
-    if (selectedFilter) {
-        config.push(SELECTED_FILTER_CONFIG);
-    }
-
     if (policies && policies.length > 1) {
         config.push(POLICIES_FILTER_CONFIG(policies));
     }

diff --git a/packages/inventory-compliance/src/Utilities/FilterConfigBuilder.test.js b/packages/inventory-compliance/src/Utilities/FilterConfigBuilder.test.js
@@ -12,7 +12,7 @@ describe('FilterConfigBuilder', () => {
             ],
             filter: () => ([])
         },
-        ...buildFilterConfig({ selectedFilter: true, showPassFailFilter: true, policies: [] })
+        ...buildFilterConfig({ showPassFailFilter: true, policies: [] })
     ];
     let builder;
 

diff --git a/packages/inventory-compliance/src/Utilities/__snapshots__/ChipBuilder.test.js.snap b/packages/inventory-compliance/src/Utilities/__snapshots__/ChipBuilder.test.js.snap
@@ -20,13 +20,5 @@ Array [
       },
     ],
   },
-  Object {
-    "category": "Selected",
-    "chips": Array [
-      Object {
-        "name": "all",
-      },
-    ],
-  },
 ]
 `;
diff --git a/packages/inventory-compliance/src/Utilities/__snapshots__/FilterConfigBuilder.test.js.snap b/packages/inventory-compliance/src/Utilities/__snapshots__/FilterConfigBuilder.test.js.snap
@@ -11,7 +11,6 @@ Object {
   "filterwithmultiplespaces": Array [],
   "name": "",
   "passed": undefined,
-  "selected": Array [],
   "severity": Array [],
 }
 `;
@@ -144,22 +143,6 @@ Object {
       "placeholder": "Filter by passed",
       "type": "radio",
     },
-    Object {
-      "filterValues": Object {
-        "items": Array [
-          Object {
-            "label": "Show selected rules",
-            "value": "selected",
-          },
-        ],
-        "onChange": [Function],
-        "value": undefined,
-      },
-      "id": "selected",
-      "label": "Selected",
-      "placeholder": "Filter by selected",
-      "type": "checkbox",
-    },
   ],
   "name": "",
 }