feat(ws): Notebooks 2.0 // Frontend // Workspaces table // Selectable rows

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

Author: paulovmr

workspaces/frontend/src/app/pages/Workspaces/DetailsAggregated/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/DetailsAggregated/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/DetailsAggregated/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/ExpandedWorkspaceRow.tsx

@@ -1,37 +1,25 @@
 import * as React from 'react';
 import { ExpandableRowContent, Td, Tr } from '@patternfly/react-table';
-import { Workspace, WorkspacesColumnNames } from '~/shared/types';
+import { Workspace } from '~/shared/types';
 import { DataVolumesList } from '~/app/pages/Workspaces/DataVolumesList';
 
 interface ExpandedWorkspaceRowProps {
   workspace: Workspace;
-  columnNames: WorkspacesColumnNames;
 }
 
 export const ExpandedWorkspaceRow: React.FC<ExpandedWorkspaceRowProps> = ({
-  workspace,
-  columnNames,
+  workspace
 }) => {
-  const renderExpandedData = () =>
-    Object.keys(columnNames).map((colName) => {
-      switch (colName) {
-        case 'name':
-          return (
-            <Td noPadding colSpan={1}>
-              <ExpandableRowContent>
-                <DataVolumesList workspace={workspace} />
-              </ExpandableRowContent>
-            </Td>
-          );
-        default:
-          return <Td />;
-      }
-    });
-
   return (
     <Tr>
       <Td />
-      {renderExpandedData()}
+      <Td />
+      <Td noPadding colSpan={3}>
+        <ExpandableRowContent>
+          <DataVolumesList workspace={workspace} />
+        </ExpandableRowContent>
+      </Td>
+      <Td colSpan={8} />
     </Tr>
   );
 };

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

@@ -34,6 +34,7 @@ import DeleteModal from '~/shared/components/DeleteModal';
 import { buildKindLogoDictionary } from '~/app/actions/WorkspaceKindsActions';
 import useWorkspaceKinds from '~/app/hooks/useWorkspaceKinds';
 import { WorkspaceConnectAction } from '~/app/pages/Workspaces/WorkspaceConnectAction';
+import { WorkspaceAggregatedDetails } from '~/app/pages/Workspaces/DetailsAggregated/WorkspaceAggregatedDetails';
 import Filter, { FilteredColumn } from 'shared/components/Filter';
 import { formatRam } from 'shared/utilities/WorkspaceResources';
 
@@ -170,7 +171,7 @@ export const Workspaces: React.FunctionComponent = () => {
     lastActivity: 'Last Activity',
   };
 
-  const filterableColumns: WorkspacesColumnNames = {
+  const filterableColumns = {
     name: 'Name',
     kind: 'Kind',
     image: 'Image',
@@ -387,22 +388,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}>
-      <DrawerContent panelContent={workspaceDetailsContent}>
+    <Drawer isInline isExpanded={selectedWorkspaceNames.length >= 1}>
+      <DrawerContent panelContent={workspaceDetailsContent()}>
         <DrawerContentBody>
           <PageSection isFilled>
             <Content>
@@ -420,6 +448,13 @@ export const Workspaces: React.FunctionComponent = () => {
               <Thead>
                 <Tr>
                   <Th />
+                  <Th
+                    select={{
+                      onSelect: (_event, isSelecting) => selectAllWorkspaces(isSelecting),
+                      isSelected: areAllWorkspacesSelected,
+                    }}
+                    aria-label="Row select"
+                  />
                   {Object.values(columnNames).map((columnName, index) => (
                     <Th key={`${columnName}-col-name`} sort={getSortParams(index)}>
                       {columnName}
@@ -444,6 +479,14 @@ export const Workspaces: React.FunctionComponent = () => {
                           setWorkspaceExpanded(workspace, !isWorkspaceExpanded(workspace)),
                       }}
                     />
+                    <Td
+                      select={{
+                        rowIndex,
+                        onSelect: (_event, isSelecting) =>
+                          setWorkspaceSelected(workspace, isSelecting),
+                        isSelected: isWorkspaceSelected(workspace),
+                      }}
+                    />
                     <Td dataLabel={columnNames.name}>{workspace.name}</Td>
                     <Td dataLabel={columnNames.kind}>
                       {kindLogoDict[workspace.kind] ? (
@@ -491,7 +534,7 @@ export const Workspaces: React.FunctionComponent = () => {
                     </Td>
                   </Tr>
                   {isWorkspaceExpanded(workspace) && (
-                    <ExpandedWorkspaceRow workspace={workspace} columnNames={columnNames} />
+                    <ExpandedWorkspaceRow workspace={workspace} />
                   )}
                 </Tbody>
               ))}