@@ -48,6 +48,7 @@ import { WorkspaceConnectAction } from '~/app/pages/Workspaces/WorkspaceConnectA
48
48
import { WorkspaceStartActionModal } from '~/app/pages/Workspaces/workspaceActions/WorkspaceStartActionModal' ;
49
49
import { WorkspaceRestartActionModal } from '~/app/pages/Workspaces/workspaceActions/WorkspaceRestartActionModal' ;
50
50
import { WorkspaceStopActionModal } from '~/app/pages/Workspaces/workspaceActions/WorkspaceStopActionModal' ;
51
+ import { WorkspaceAggregatedDetails } from '~/app/pages/Workspaces/Details/WorkspaceAggregatedDetails' ;
51
52
import { useNamespaceContext } from '~/app/context/NamespaceContextProvider' ;
52
53
import { WorkspacesColumnNames } from '~/app/types' ;
53
54
import Filter , { FilteredColumn } from 'shared/components/Filter' ;
@@ -112,17 +113,6 @@ export const Workspaces: React.FunctionComponent = () => {
112
113
setWorkspaces ( initialWorkspaces ?? [ ] ) ;
113
114
} , [ initialWorkspaces , initialWorkspacesLoaded ] ) ;
114
115
115
- const selectWorkspace = React . useCallback (
116
- ( newSelectedWorkspace : Workspace | null ) => {
117
- if ( selectedWorkspace ?. name === newSelectedWorkspace ?. name ) {
118
- setSelectedWorkspace ( null ) ;
119
- } else {
120
- setSelectedWorkspace ( newSelectedWorkspace ) ;
121
- }
122
- } ,
123
- [ selectedWorkspace ] ,
124
- ) ;
125
-
126
116
const setWorkspaceExpanded = ( workspace : Workspace , isExpanding = true ) =>
127
117
setExpandedWorkspacesNames ( ( prevExpanded ) => {
128
118
const newExpandedWorkspacesNames = prevExpanded . filter ( ( wsName ) => wsName !== workspace . name ) ;
@@ -239,11 +229,6 @@ export const Workspaces: React.FunctionComponent = () => {
239
229
240
230
// Actions
241
231
242
- const viewDetailsClick = React . useCallback ( ( workspace : Workspace ) => {
243
- setSelectedWorkspace ( workspace ) ;
244
- setActiveActionType ( ActionType . ViewDetails ) ;
245
- } , [ ] ) ;
246
-
247
232
const editAction = React . useCallback ( ( workspace : Workspace ) => {
248
233
setSelectedWorkspace ( workspace ) ;
249
234
setActiveActionType ( ActionType . Edit ) ;
@@ -280,11 +265,6 @@ export const Workspaces: React.FunctionComponent = () => {
280
265
281
266
const workspaceDefaultActions = ( workspace : Workspace ) : IActions => {
282
267
const workspaceActions = [
283
- {
284
- id : 'view-details' ,
285
- title : 'View Details' ,
286
- onClick : ( ) => viewDetailsClick ( workspace ) ,
287
- } ,
288
268
{
289
269
id : 'edit' ,
290
270
title : 'Edit' ,
@@ -427,25 +407,49 @@ export const Workspaces: React.FunctionComponent = () => {
427
407
setPage ( newPage ) ;
428
408
} ;
429
409
430
- const workspaceDetailsContent = (
431
- < >
432
- { selectedWorkspace && (
433
- < WorkspaceDetails
434
- workspace = { selectedWorkspace }
435
- onCloseClick = { ( ) => selectWorkspace ( null ) }
436
- onEditClick = { ( ) => editAction ( selectedWorkspace ) }
437
- onDeleteClick = { ( ) => handleDeleteClick ( selectedWorkspace ) }
438
- />
439
- ) }
440
- </ >
441
- ) ;
410
+ const [ selectedWorkspaceNames , setSelectedWorkspaceNames ] = React . useState < string [ ] > ( [ ] ) ;
411
+ const setWorkspaceSelected = ( workspace : Workspace , isSelecting = true ) =>
412
+ setSelectedWorkspaceNames ( ( prevSelected ) => {
413
+ const otherSelectedWorkspaceNames = prevSelected . filter ( ( w ) => w !== workspace . name ) ;
414
+ return isSelecting
415
+ ? [ ...otherSelectedWorkspaceNames , workspace . name ]
416
+ : otherSelectedWorkspaceNames ;
417
+ } ) ;
418
+ const selectAllWorkspaces = ( isSelecting = true ) =>
419
+ setSelectedWorkspaceNames ( isSelecting ? sortedWorkspaces . map ( ( r ) => r . name ) : [ ] ) ;
420
+ const areAllWorkspacesSelected = selectedWorkspaceNames . length === sortedWorkspaces . length ;
421
+ const isWorkspaceSelected = ( workspace : Workspace ) =>
422
+ selectedWorkspaceNames . includes ( workspace . name ) ;
423
+
424
+ const workspaceDetailsContent = ( ) => {
425
+ const selectedWorkspaceForDetails =
426
+ selectedWorkspaceNames . length === 1
427
+ ? sortedWorkspaces . find ( ( w ) => w . name === selectedWorkspaceNames [ 0 ] )
428
+ : undefined ;
429
+ return (
430
+ < >
431
+ { selectedWorkspaceForDetails && (
432
+ < WorkspaceDetails
433
+ workspace = { selectedWorkspaceForDetails }
434
+ onCloseClick = { ( ) => selectAllWorkspaces ( false ) }
435
+ onEditClick = { ( ) => editAction ( selectedWorkspaceForDetails ) }
436
+ onDeleteClick = { ( ) => handleDeleteClick ( selectedWorkspaceForDetails ) }
437
+ />
438
+ ) }
439
+ { selectedWorkspaceNames . length > 1 && (
440
+ < WorkspaceAggregatedDetails
441
+ workspaceNames = { selectedWorkspaceNames }
442
+ onCloseClick = { ( ) => selectAllWorkspaces ( false ) }
443
+ onDeleteClick = { ( ) => console . log ( 'Delete selected workspaces' ) }
444
+ />
445
+ ) }
446
+ </ >
447
+ ) ;
448
+ } ;
442
449
443
450
return (
444
- < Drawer
445
- isInline
446
- isExpanded = { selectedWorkspace != null && activeActionType === ActionType . ViewDetails }
447
- >
448
- < DrawerContent panelContent = { workspaceDetailsContent } >
451
+ < Drawer isInline isExpanded = { selectedWorkspaceNames . length >= 1 } >
452
+ < DrawerContent panelContent = { workspaceDetailsContent ( ) } >
449
453
< DrawerContentBody >
450
454
< PageSection isFilled >
451
455
< Content >
@@ -462,6 +466,13 @@ export const Workspaces: React.FunctionComponent = () => {
462
466
< Table aria-label = "Sortable table" ouiaId = "SortableTable" >
463
467
< Thead >
464
468
< Tr >
469
+ < Th
470
+ select = { {
471
+ onSelect : ( _event , isSelecting ) => selectAllWorkspaces ( isSelecting ) ,
472
+ isSelected : areAllWorkspacesSelected ,
473
+ } }
474
+ aria-label = "Row select"
475
+ />
465
476
< Th screenReaderText = "expand-action" />
466
477
{ Object . values ( columnNames ) . map ( ( columnName , index ) => (
467
478
< Th
@@ -482,6 +493,14 @@ export const Workspaces: React.FunctionComponent = () => {
482
493
data-testid = "table-body"
483
494
>
484
495
< Tr id = { `workspaces-table-row-${ rowIndex + 1 } ` } >
496
+ < Td
497
+ select = { {
498
+ rowIndex,
499
+ onSelect : ( _event , isSelecting ) =>
500
+ setWorkspaceSelected ( workspace , isSelecting ) ,
501
+ isSelected : isWorkspaceSelected ( workspace ) ,
502
+ } }
503
+ />
485
504
< Td
486
505
expand = { {
487
506
rowIndex,
0 commit comments