Enhance tableProps, implement select none/page

RedHatInsights · Mar 13, 2023 · aa160ec · aa160ec
1 parent 45dd464
commit aa160ec
Showing 1 changed file with 62 additions and 15 deletions.
diff --git a/src/components/GroupSystems/GroupSystems.js b/src/components/GroupSystems/GroupSystems.js
@@ -1,6 +1,10 @@
 import { fitContent, TableVariant } from '@patternfly/react-table';
+import difference from 'lodash/difference';
+import map from 'lodash/map';
 import PropTypes from 'prop-types';
 import React from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { selectEntity } from '../../store/inventory-actions';
 import InventoryTable from '../InventoryTable/InventoryTable';
 
 const prepareColumns = (initialColumns) => {
@@ -26,21 +30,64 @@ const prepareColumns = (initialColumns) => {
 };
 
 const GroupSystems = ({ groupName }) => {
-    return <InventoryTable
-        columns={prepareColumns}
-        getEntities={async (items, config, showTags, defaultGetEntities) =>
-            await defaultGetEntities(
-                items,
-                // filter systems by the group name
-                { ...config, filters: { ...config.filters, groupName: [groupName] } },
-                showTags
-            )
-        }
-        tableProps={{
-            isStickyHeader: true,
-            variant: TableVariant.compact
-        }}
-    />;
+    const dispatch = useDispatch();
+
+    const selected = useSelector(
+        (state) => state?.entities?.selected || new Map()
+    );
+    const rows = useSelector(({ entities }) => entities?.rows || []);
+
+    const noneSelected = selected.size === 0;
+    const displayedIds = map(rows, 'id');
+    const pageSelected =
+    difference(displayedIds, [...selected.keys()]).length === 0;
+
+    return (
+        <InventoryTable
+            columns={prepareColumns}
+            getEntities={async (items, config, showTags, defaultGetEntities) =>
+                await defaultGetEntities(
+                    items,
+                    // filter systems by the group name
+                    {
+                        ...config,
+                        filters: {
+                            ...config.filters,
+                            groupName: [groupName] // TODO: the param is not yet supported by `apiHostGetHostList`
+                        }
+                    },
+                    showTags
+                )
+            }
+            tableProps={{
+                isStickyHeader: true,
+                variant: TableVariant.compact,
+                canSelectAll: false
+            }}
+            bulkSelect={{
+                count: selected.size,
+                id: 'bulk-select-groups',
+                items: [
+                    {
+                        title: 'Select none (0)',
+                        onClick: () => dispatch(selectEntity(-1, false)),
+                        props: { isDisabled: noneSelected }
+                    },
+                    {
+                        title: `${pageSelected ? 'Deselect' : 'Select'} page (${
+              rows.length
+            } items)`,
+                        onClick: () => dispatch(selectEntity(0, !pageSelected))
+                    }
+                    // TODO: Implement "select all"
+                ],
+                onSelect: (value) => {
+                    dispatch(selectEntity(0, value));
+                },
+                checked: selected.size > 0 // TODO: support partial selection (dash sign) in FEC BulkSelect
+            }}
+        />
+    );
 };
 
 GroupSystems.propTypes = {