feat(ws): added selectable rows to workspace list

Signed-off-by: paulovmr <[email protected]>

Author: paulovmr

workspaces/frontend/src/app/pages/Workspaces/Details/WorkspaceAggregatedDetails.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import {
+  Button,
+  DrawerActions,
+  DrawerHead,
+  DrawerPanelBody,
+  DrawerPanelContent,
+  Title,
+} from '@patternfly/react-core';
+import { WorkspaceAggregatedDetailsActions } from '~/app/pages/Workspaces/Details/WorkspaceAggregatedDetailsActions';
+
+type WorkspaceAggregatedDetailsProps = {
+  workspaceNames: string[];
+  onCloseClick: React.MouseEventHandler;
+  onDeleteClick: React.MouseEventHandler;
+};
+
+export const WorkspaceAggregatedDetails: React.FunctionComponent<
+  WorkspaceAggregatedDetailsProps
+> = ({ workspaceNames, onCloseClick, onDeleteClick }) => (
+  <DrawerPanelContent>
+    <DrawerHead>
+      <Title headingLevel="h6">Multiple selected workspaces</Title>
+      <WorkspaceAggregatedDetailsActions onDeleteClick={onDeleteClick} />
+      <DrawerActions>
+        <Button onClick={onCloseClick} aria-label="Clear workspoaces selection" variant="link">
+          Clear selection
+        </Button>
+      </DrawerActions>
+    </DrawerHead>
+    <DrawerPanelBody>
+      <Title headingLevel="h6" size="md">
+        {'Selected workspaces: '}
+      </Title>
+      {workspaceNames.join(', ')}
+    </DrawerPanelBody>
+  </DrawerPanelContent>
+);

workspaces/frontend/src/app/pages/Workspaces/Details/WorkspaceAggregatedDetailsActions.tsx

@@ -0,0 +1,55 @@
+import * as React from 'react';
+import {
+  Dropdown,
+  DropdownList,
+  MenuToggle,
+  DropdownItem,
+  Flex,
+  FlexItem,
+} from '@patternfly/react-core';
+
+interface WorkspaceAggregatedDetailsActionsProps {
+  onDeleteClick: React.MouseEventHandler;
+}
+
+export const WorkspaceAggregatedDetailsActions: React.FC<
+  WorkspaceAggregatedDetailsActionsProps
+> = ({ onDeleteClick }) => {
+  const [isOpen, setOpen] = React.useState(false);
+
+  return (
+    <Flex>
+      <FlexItem>
+        <Dropdown
+          isOpen={isOpen}
+          onSelect={() => setOpen(false)}
+          onOpenChange={(open) => setOpen(open)}
+          popperProps={{ position: 'end' }}
+          toggle={(toggleRef) => (
+            <MenuToggle
+              variant="primary"
+              ref={toggleRef}
+              onClick={() => setOpen(!isOpen)}
+              isExpanded={isOpen}
+              aria-label="Workspace aggregated details action toggle"
+              data-testid="workspace-aggregated-details-action-toggle"
+            >
+              Actions
+            </MenuToggle>
+          )}
+        >
+          <DropdownList>
+            <DropdownItem
+              id="workspace-aggregated-details-action-delete-button"
+              aria-label="Delete selected workspace"
+              key="delete-aggregated-workspace-button"
+              onClick={onDeleteClick}
+            >
+              Delete selected
+            </DropdownItem>
+          </DropdownList>
+        </Dropdown>
+      </FlexItem>
+    </Flex>
+  );
+};

workspaces/frontend/src/app/pages/Workspaces/Workspaces.tsx

@@ -48,6 +48,7 @@ import { WorkspaceConnectAction } from '~/app/pages/Workspaces/WorkspaceConnectA
 import { WorkspaceStartActionModal } from '~/app/pages/Workspaces/workspaceActions/WorkspaceStartActionModal';
 import { WorkspaceRestartActionModal } from '~/app/pages/Workspaces/workspaceActions/WorkspaceRestartActionModal';
 import { WorkspaceStopActionModal } from '~/app/pages/Workspaces/workspaceActions/WorkspaceStopActionModal';
+import { WorkspaceAggregatedDetails } from '~/app/pages/Workspaces/Details/WorkspaceAggregatedDetails';
 import { useNamespaceContext } from '~/app/context/NamespaceContextProvider';
 import { WorkspacesColumnNames } from '~/app/types';
 import Filter, { FilteredColumn } from 'shared/components/Filter';
@@ -112,17 +113,6 @@ export const Workspaces: React.FunctionComponent = () => {
     setWorkspaces(initialWorkspaces ?? []);
   }, [initialWorkspaces, initialWorkspacesLoaded]);
 
-  const selectWorkspace = React.useCallback(
-    (newSelectedWorkspace: Workspace | null) => {
-      if (selectedWorkspace?.name === newSelectedWorkspace?.name) {
-        setSelectedWorkspace(null);
-      } else {
-        setSelectedWorkspace(newSelectedWorkspace);
-      }
-    },
-    [selectedWorkspace],
-  );
-
   const setWorkspaceExpanded = (workspace: Workspace, isExpanding = true) =>
     setExpandedWorkspacesNames((prevExpanded) => {
       const newExpandedWorkspacesNames = prevExpanded.filter((wsName) => wsName !== workspace.name);
@@ -239,11 +229,6 @@ export const Workspaces: React.FunctionComponent = () => {
 
   // Actions
 
-  const viewDetailsClick = React.useCallback((workspace: Workspace) => {
-    setSelectedWorkspace(workspace);
-    setActiveActionType(ActionType.ViewDetails);
-  }, []);
-
   const editAction = React.useCallback((workspace: Workspace) => {
     setSelectedWorkspace(workspace);
     setActiveActionType(ActionType.Edit);
@@ -280,11 +265,6 @@ export const Workspaces: React.FunctionComponent = () => {
 
   const workspaceDefaultActions = (workspace: Workspace): IActions => {
     const workspaceActions = [
-      {
-        id: 'view-details',
-        title: 'View Details',
-        onClick: () => viewDetailsClick(workspace),
-      },
       {
         id: 'edit',
         title: 'Edit',
@@ -427,25 +407,49 @@ export const Workspaces: React.FunctionComponent = () => {
     setPage(newPage);
   };
 
-  const workspaceDetailsContent = (
-    <>
-      {selectedWorkspace && (
-        <WorkspaceDetails
-          workspace={selectedWorkspace}
-          onCloseClick={() => selectWorkspace(null)}
-          onEditClick={() => editAction(selectedWorkspace)}
-          onDeleteClick={() => handleDeleteClick(selectedWorkspace)}
-        />
-      )}
-    </>
-  );
+  const [selectedWorkspaceNames, setSelectedWorkspaceNames] = React.useState<string[]>([]);
+  const setWorkspaceSelected = (workspace: Workspace, isSelecting = true) =>
+    setSelectedWorkspaceNames((prevSelected) => {
+      const otherSelectedWorkspaceNames = prevSelected.filter((w) => w !== workspace.name);
+      return isSelecting
+        ? [...otherSelectedWorkspaceNames, workspace.name]
+        : otherSelectedWorkspaceNames;
+    });
+  const selectAllWorkspaces = (isSelecting = true) =>
+    setSelectedWorkspaceNames(isSelecting ? sortedWorkspaces.map((r) => r.name) : []);
+  const areAllWorkspacesSelected = selectedWorkspaceNames.length === sortedWorkspaces.length;
+  const isWorkspaceSelected = (workspace: Workspace) =>
+    selectedWorkspaceNames.includes(workspace.name);
+
+  const workspaceDetailsContent = () => {
+    const selectedWorkspaceForDetails =
+      selectedWorkspaceNames.length === 1
+        ? sortedWorkspaces.find((w) => w.name === selectedWorkspaceNames[0])
+        : undefined;
+    return (
+      <>
+        {selectedWorkspaceForDetails && (
+          <WorkspaceDetails
+            workspace={selectedWorkspaceForDetails}
+            onCloseClick={() => selectAllWorkspaces(false)}
+            onEditClick={() => editAction(selectedWorkspaceForDetails)}
+            onDeleteClick={() => handleDeleteClick(selectedWorkspaceForDetails)}
+          />
+        )}
+        {selectedWorkspaceNames.length > 1 && (
+          <WorkspaceAggregatedDetails
+            workspaceNames={selectedWorkspaceNames}
+            onCloseClick={() => selectAllWorkspaces(false)}
+            onDeleteClick={() => console.log('Delete selected workspaces')}
+          />
+        )}
+      </>
+    );
+  };
 
   return (
-    <Drawer
-      isInline
-      isExpanded={selectedWorkspace != null && activeActionType === ActionType.ViewDetails}
-    >
-      <DrawerContent panelContent={workspaceDetailsContent}>
+    <Drawer isInline isExpanded={selectedWorkspaceNames.length >= 1}>
+      <DrawerContent panelContent={workspaceDetailsContent()}>
         <DrawerContentBody>
           <PageSection isFilled>
             <Content>
@@ -462,6 +466,13 @@ export const Workspaces: React.FunctionComponent = () => {
             <Table aria-label="Sortable table" ouiaId="SortableTable">
               <Thead>
                 <Tr>
+                  <Th
+                    select={{
+                      onSelect: (_event, isSelecting) => selectAllWorkspaces(isSelecting),
+                      isSelected: areAllWorkspacesSelected,
+                    }}
+                    aria-label="Row select"
+                  />
                   <Th screenReaderText="expand-action" />
                   {Object.values(columnNames).map((columnName, index) => (
                     <Th
@@ -482,6 +493,14 @@ export const Workspaces: React.FunctionComponent = () => {
                   data-testid="table-body"
                 >
                   <Tr id={`workspaces-table-row-${rowIndex + 1}`}>
+                    <Td
+                      select={{
+                        rowIndex,
+                        onSelect: (_event, isSelecting) =>
+                          setWorkspaceSelected(workspace, isSelecting),
+                        isSelected: isWorkspaceSelected(workspace),
+                      }}
+                    />
                     <Td
                       expand={{
                         rowIndex,