Skip to content

Commit 120dd0c

Browse files
jpuzz0jpuzz0
committed
[MTV-1969] Add bulk select dropdown for selectable tables
Signed-off-by: Jeff Puzzo <[email protected]>
1 parent e763870 commit 120dd0c

File tree

11 files changed

+359
-90
lines changed

11 files changed

+359
-90
lines changed

‎.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ openapitools.json
88
tsconfig.tsbuildinfo
99

1010
cypress/videos
11+
cypress/screenshots
1112
ci/yaml/openapi.yaml
1213

1314
**/mockServiceWorker.js

‎packages/forklift-console-plugin/locales/en/plugin__forklift-console-plugin.json

-1
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,6 @@
1414
"{{total}} VM": "{{total}} VM",
1515
"{{total}} VM_plural": "{{total}} VMs",
1616
"{{total}} VMs": "{{total}} VMs",
17-
"{{vmCount}} VMs selected": "{{vmCount}} VMs selected",
1817
"{children}": "{children}",
1918
"24 hours": "24 hours",
2019
"31 days": "31 days",

‎packages/forklift-console-plugin/package.json

+1
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@
3232
"@kubev2v/types": "0.0.20",
3333
"@openshift-console/dynamic-plugin-sdk": "1.6.0",
3434
"@patternfly/react-charts": "7.4.1",
35+
"@patternfly/react-component-groups": "^5.5.8",
3536
"@patternfly/react-core": "^5.1.1",
3637
"@patternfly/react-icons": "^5.1.1",
3738
"@patternfly/react-table": "^5.1.1",

‎packages/forklift-console-plugin/src/components/page/StandardPage.tsx

+67-43
Original file line numberDiff line numberDiff line change
@@ -29,11 +29,13 @@ import {
2929
ValueMatcher,
3030
withTr,
3131
} from '@kubev2v/common';
32+
import { BulkSelect, BulkSelectValue } from '@patternfly/react-component-groups';
3233
import {
3334
Level,
3435
LevelItem,
3536
PageSection,
3637
Pagination,
38+
Split,
3739
Title,
3840
Toolbar,
3941
ToolbarContent,
@@ -224,11 +226,6 @@ export interface StandardPageProps<T> {
224226
* Expanded ids
225227
*/
226228
expandedIds?: string[];
227-
228-
/**
229-
* Label to show count of selected items
230-
*/
231-
selectedCountLabel?: (selectedIdCount: number) => string;
232229
}
233230

234231
/**
@@ -285,8 +282,8 @@ export function StandardPage<T>({
285282
toId,
286283
expandedIds,
287284
className,
288-
selectedIds,
289-
selectedCountLabel,
285+
selectedIds = [],
286+
onSelect,
290287
}: StandardPageProps<T>) {
291288
const { t } = useForkliftTranslation();
292289
const [sortedData, setSortedData] = useState([]);
@@ -341,6 +338,14 @@ export function StandardPage<T>({
341338
const noResults = loaded && !error && sortedData.length == 0;
342339
const noMatchingResults = loaded && !error && filteredData.length === 0 && sortedData.length > 0;
343340

341+
let pageDataIds = [];
342+
let filteredDataIds = [];
343+
344+
if (selectedIds.length && pageData?.length && filteredData?.length) {
345+
pageDataIds = pageData.map(toId);
346+
filteredDataIds = filteredData.map(toId);
347+
}
348+
344349
const primaryFilters = fields
345350
.filter((field) => field.filter?.primary)
346351
.map(toFieldFilter(sortedData));
@@ -366,6 +371,15 @@ export function StandardPage<T>({
366371
setPage(page);
367372
};
368373

374+
const onBulkSelect = (value: BulkSelectValue) => {
375+
value === BulkSelectValue.none && onSelect([]);
376+
value === BulkSelectValue.all && onSelect(filteredDataIds);
377+
value === BulkSelectValue.nonePage &&
378+
onSelect(selectedIds.filter((item) => !pageDataIds.includes(item)));
379+
value === BulkSelectValue.page &&
380+
onSelect(Array.from(new Set([...selectedIds, ...pageDataIds])));
381+
};
382+
369383
return (
370384
<span className={className}>
371385
{title && (
@@ -382,49 +396,59 @@ export function StandardPage<T>({
382396
<PageSection variant="light">
383397
<Toolbar clearAllFilters={clearAllFilters} clearFiltersButtonText={t('Clear all filters')}>
384398
<ToolbarContent>
385-
<ToolbarToggleGroup toggleIcon={<FilterIcon />} breakpoint="xl">
386-
{primaryFilters.length > 0 && (
387-
<FilterGroup
388-
fieldFilters={primaryFilters}
389-
onFilterUpdate={setSelectedFilters}
390-
selectedFilters={selectedFilters}
391-
supportedFilterTypes={supportedFilters}
392-
/>
393-
)}
394-
<AttributeValueFilter
395-
fieldFilters={fields
396-
.filter(({ filter }) => filter && !filter.primary && !filter.standalone)
397-
.map(toFieldFilter(flatData))}
398-
onFilterUpdate={setSelectedFilters}
399-
selectedFilters={selectedFilters}
400-
supportedFilterTypes={supportedFilters}
399+
<Split hasGutter>
400+
<BulkSelect
401+
canSelectAll
402+
selectedCount={selectedIds.length}
403+
pageCount={pageDataIds.length}
404+
totalCount={filteredDataIds.length}
405+
onSelect={onBulkSelect}
406+
{...(pageDataIds.length && {
407+
pageSelected: pageDataIds.every((item) => selectedIds.includes(item)),
408+
pagePartiallySelected:
409+
pageDataIds.some((item) => selectedIds.includes(item)) &&
410+
!pageDataIds.every((item) => selectedIds.includes(item)),
411+
})}
401412
/>
402-
{!!fields.find((field) => field.filter?.standalone) && (
403-
<FilterGroup
413+
414+
<ToolbarToggleGroup toggleIcon={<FilterIcon />} breakpoint="xl">
415+
{primaryFilters.length > 0 && (
416+
<FilterGroup
417+
fieldFilters={primaryFilters}
418+
onFilterUpdate={setSelectedFilters}
419+
selectedFilters={selectedFilters}
420+
supportedFilterTypes={supportedFilters}
421+
/>
422+
)}
423+
<AttributeValueFilter
404424
fieldFilters={fields
405-
.filter((field) => field.filter?.standalone)
425+
.filter(({ filter }) => filter && !filter.primary && !filter.standalone)
406426
.map(toFieldFilter(flatData))}
407427
onFilterUpdate={setSelectedFilters}
408428
selectedFilters={selectedFilters}
409429
supportedFilterTypes={supportedFilters}
410430
/>
411-
)}
412-
<ManageColumnsToolbar
413-
resourceFields={fields}
414-
defaultColumns={fieldsMetadata}
415-
setColumns={setFields}
416-
/>
417-
{GlobalActionToolbarItems?.length > 0 &&
418-
GlobalActionToolbarItems.map((Action, index) => (
419-
<Action key={index} dataOnScreen={showPagination ? pageData : filteredData} />
420-
))}
421-
</ToolbarToggleGroup>
422-
423-
{selectedCountLabel && (
424-
<ToolbarItem className="forklift-page__toolbar-item__selected-count">
425-
{selectedCountLabel(selectedIds.length ?? 0)}
426-
</ToolbarItem>
427-
)}
431+
{!!fields.find((field) => field.filter?.standalone) && (
432+
<FilterGroup
433+
fieldFilters={fields
434+
.filter((field) => field.filter?.standalone)
435+
.map(toFieldFilter(flatData))}
436+
onFilterUpdate={setSelectedFilters}
437+
selectedFilters={selectedFilters}
438+
supportedFilterTypes={supportedFilters}
439+
/>
440+
)}
441+
<ManageColumnsToolbar
442+
resourceFields={fields}
443+
defaultColumns={fieldsMetadata}
444+
setColumns={setFields}
445+
/>
446+
{GlobalActionToolbarItems?.length > 0 &&
447+
GlobalActionToolbarItems.map((Action, index) => (
448+
<Action key={index} dataOnScreen={showPagination ? pageData : filteredData} />
449+
))}
450+
</ToolbarToggleGroup>
451+
</Split>
428452

429453
{showPagination && (
430454
<ToolbarItem variant="pagination">

‎packages/forklift-console-plugin/src/components/page/StandardPageWithSelection.tsx

+2-21
Original file line numberDiff line numberDiff line change
@@ -47,28 +47,11 @@ export function withRowSelection<T>({
4747
return Enhanced;
4848
}
4949

50-
export function withHeaderSelection<T>({
51-
HeaderMapper,
52-
isSelected,
53-
isExpanded,
54-
toggleSelectFor,
55-
canSelect,
56-
}) {
50+
export function withHeaderSelection<T>({ HeaderMapper, isExpanded }) {
5751
const Enhanced = ({ dataOnScreen, ...other }: TableViewHeaderProps<T>) => {
58-
const selectableItems = dataOnScreen.filter(canSelect);
59-
const allSelected = selectableItems.every((it) => isSelected(it));
6052
return (
6153
<>
6254
{isExpanded && <Th />}
63-
{isSelected && (
64-
<Th
65-
select={{
66-
onSelect: () => toggleSelectFor(selectableItems),
67-
isSelected: allSelected,
68-
isHeaderSelectDisabled: !selectableItems?.length, // Disable if no selectable items
69-
}}
70-
/>
71-
)}
7255
<HeaderMapper {...{ ...other, dataOnScreen }} />
7356
</>
7457
);
@@ -181,17 +164,15 @@ export function withIdBasedSelection<T>({
181164

182165
const HeaderMapper = withHeaderSelection({
183166
HeaderMapper: props.HeaderMapper ?? DefaultHeader,
184-
canSelect,
185-
isSelected,
186167
isExpanded,
187-
toggleSelectFor,
188168
});
189169

190170
return (
191171
<StandardPage
192172
{...rest}
193173
expandedIds={expandedIds}
194174
selectedIds={selectedIds}
175+
onSelect={setSelectedIds}
195176
toId={toId}
196177
RowMapper={RowMapper}
197178
HeaderMapper={HeaderMapper}

‎packages/forklift-console-plugin/src/modules/Plans/views/create/components/ProvidersVirtualMachinesList.tsx

+1-12
Original file line numberDiff line numberDiff line change
@@ -16,17 +16,7 @@ export const ProviderVirtualMachinesList: React.FC<{
1616
initialSelectedIds?: string[];
1717
showActions: boolean;
1818
className?: string;
19-
selectedCountLabel?: (selectedIdCount: number) => string;
20-
}> = ({
21-
title,
22-
name,
23-
namespace,
24-
onSelect,
25-
initialSelectedIds,
26-
showActions,
27-
className,
28-
selectedCountLabel,
29-
}) => {
19+
}> = ({ title, name, namespace, onSelect, initialSelectedIds, showActions, className }) => {
3020
const [provider, providerLoaded, providerLoadError] = useK8sWatchResource<V1beta1Provider>({
3121
groupVersionKind: ProviderModelGroupVersionKind,
3222
namespaced: true,
@@ -47,7 +37,6 @@ export const ProviderVirtualMachinesList: React.FC<{
4737
initialSelectedIds={initialSelectedIds}
4838
showActions={showActions}
4939
className={className}
50-
selectedCountLabel={selectedCountLabel}
5140
/>
5241
);
5342
};

‎packages/forklift-console-plugin/src/modules/Plans/views/create/steps/SelectSourceProvider/MemoizedProviderVirtualMachinesList.tsx

-3
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,6 @@ export interface ProviderVirtualMachinesListProps {
1010
onSelect: (selectedVms: VmData[]) => void;
1111
initialSelectedIds: string[];
1212
showActions: boolean;
13-
selectedCountLabel?: (selectedIdCount: number) => string;
1413
}
1514

1615
export const MemoizedProviderVirtualMachinesList = memo(
@@ -21,7 +20,6 @@ export const MemoizedProviderVirtualMachinesList = memo(
2120
onSelect,
2221
initialSelectedIds,
2322
showActions,
24-
selectedCountLabel,
2523
}: ProviderVirtualMachinesListProps) => {
2624
return (
2725
<ProviderVirtualMachinesList
@@ -31,7 +29,6 @@ export const MemoizedProviderVirtualMachinesList = memo(
3129
onSelect={onSelect}
3230
initialSelectedIds={initialSelectedIds}
3331
showActions={showActions}
34-
selectedCountLabel={selectedCountLabel}
3532
/>
3633
);
3734
},

‎packages/forklift-console-plugin/src/modules/Plans/views/create/steps/SelectSourceProvider/SelectSourceProvider.tsx

-3
Original file line numberDiff line numberDiff line change
@@ -71,9 +71,6 @@ export const SelectSourceProvider: React.FC<{
7171
}
7272
initialSelectedIds={filterState.selectedVMs.map((vm) => vm.vm.id)}
7373
showActions={false}
74-
selectedCountLabel={(selectedIdCount) =>
75-
t('{{vmCount}} VMs selected', { vmCount: selectedIdCount })
76-
}
7774
/>
7875
</>
7976
)}

‎packages/forklift-console-plugin/src/modules/Providers/views/details/tabs/VirtualMachines/ProviderVirtualMachines.tsx

-1
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,6 @@ export interface ProviderVirtualMachinesProps {
2424
initialSelectedIds?: string[];
2525
showActions: boolean;
2626
className?: string;
27-
selectedCountLabel?: (selectedIdCount: number) => string;
2827
}
2928

3029
export const ProviderVirtualMachines: React.FC<{ name: string; namespace: string }> = ({

‎packages/forklift-console-plugin/src/modules/Providers/views/details/tabs/VirtualMachines/components/ProviderVirtualMachinesList.tsx

-3
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,6 @@ export interface ProviderVirtualMachinesListProps {
3232
initialSelectedIds?: string[];
3333
showActions: boolean;
3434
className?: string;
35-
selectedCountLabel?: (selectedIdCount: number) => string;
3635
}
3736

3837
export const toId = (item: VmData) => item.vm.id;
@@ -47,7 +46,6 @@ export const ProviderVirtualMachinesList: FC<ProviderVirtualMachinesListProps> =
4746
initialSelectedIds,
4847
showActions,
4948
className,
50-
selectedCountLabel,
5149
}) => {
5250
const { t } = useForkliftTranslation();
5351

@@ -98,7 +96,6 @@ export const ProviderVirtualMachinesList: FC<ProviderVirtualMachinesListProps> =
9896
page={1}
9997
expandedIds={initialExpandedIds_}
10098
ExpandedComponent={ConcernsTable}
101-
selectedCountLabel={selectedCountLabel}
10299
/>
103100
);
104101
};

0 commit comments

Comments
 (0)