Add multi-select and active toggle to Users Table

src/Messages.js

@@ -144,6 +144,27 @@ export default defineMessages({
     description: 'activate users button text',
     defaultMessage: 'Activate users',
   },
+  activateUsersConfirmationModalTitle: {
+    id: 'activateUsersConfirmationModalTitle',
+    description: 'activate users confirmation modal title text',
+    defaultMessage: 'Activate users',
+  },
+  activateUsersConfirmationModalDescription: {
+    id: 'activateUsersConfirmationModalDescription',
+    description: 'activate users confirmation modal description text',
+    defaultMessage: 'Are you sure you want to activate the user(s) below for your Red Hat organization?',
+  },
+  activateUsersConfirmationModalCheckboxText: {
+    id: 'activateUsersConfirmationModalCheckboxText',
+    description: 'activate users confirmation modal checkbox text',
+    defaultMessage: 'Yes, I confirm that I want to add these users',
+  },
+  activateUsersConfirmationButton: {
+    id: 'activateUsersConfirmationButton',
+    description: 'activate users confirmation button text',
+    defaultMessage: 'Activate user(s)',
+  },
+
   deactivateUsersButton: {
     id: 'deactivateUsersButton',
     description: 'deactivate users button text',

src/presentational-components/shared/table-composable-toolbar-view.tsx

@@ -1,4 +1,4 @@
-import React, { Fragment } from 'react';
+import React, { Fragment, ReactNode } from 'react';
 import { useIntl } from 'react-intl';
 import messages from '../../Messages';
 import { TableVariant, Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
@@ -10,14 +10,18 @@ import Toolbar, { paginationBuilder } from './toolbar';
 import EmptyWithAction from './empty-state';
 import './table-toolbar-view.scss';
 import { ISortBy, OnSort } from '@patternfly/react-table';
-import { CellObject } from '../../smart-components/user/user-table-helpers';
+import { CellObject, CellType, SelectCell } from '../../smart-components/user/user-table-helpers';
 
 interface FilterProps {
   username?: string;
   email?: string;
   status?: string[];
 }
 
+function isSelectCell(cell: any): cell is SelectCell {
+  return typeof cell === 'object' && typeof cell.select !== 'undefined';
+}
+
 interface FetchDataProps {
   limit?: number;
   offset?: number;
@@ -54,7 +58,9 @@ interface MainTableProps {
   setFilterValue: (value: FilterProps) => void;
   pagination: { limit?: number; offset?: number; count?: number; noBottom?: boolean };
   fetchData: (config: FetchDataProps) => void;
-  toolbarButtons?: () => (React.JSX.Element | React.ReactNode)[];
+  toolbarButtons?: () => (React.JSX.Element | { label: string; props: unknown; onClick: () => void })[];
+  setCheckedItems?: (callback: (selected: unknown[]) => void) => void;
+  checkedRows?: unknown[];
   filterPlaceholder?: string;
   filters: Array<{
     value: string | number | Array<unknown>;
@@ -90,13 +96,14 @@ const MainTable = ({
   isSelectable,
   isLoading,
   noData,
-  data,
   title,
   filterValue,
   setFilterValue,
   pagination,
   fetchData,
   toolbarButtons,
+  setCheckedItems,
+  checkedRows,
   filterPlaceholder,
   filters,
   isFilterable,
@@ -125,10 +132,12 @@ const MainTable = ({
       <Toolbar
         isSelectable={isSelectable}
         isLoading={isLoading || noData}
-        data={data}
+        data={rows}
         titleSingular={title.singular}
         filterValue={filterValue}
         setFilterValue={setFilterValue}
+        setCheckedItems={setCheckedItems}
+        checkedRows={checkedRows}
         sortBy={orderBy}
         pagination={pagination}
         fetchData={fetchData}
@@ -167,10 +176,10 @@ const MainTable = ({
             {rows?.length > 0 ? (
               rows?.map((row, i) => (
                 <Tr key={i}>
-                  {row.cells.map((cell: CellObject, j: number) => (
-                    <Td key={j} dataLabel={columns[j].title}>
+                  {row.cells.map((cell: CellType, j: number) => (
+                    <Td key={j} dataLabel={columns[j].title} {...(isSelectCell(cell) && cell)}>
                       {/* TODO: make more general */}
-                      {isCellObject(cell) ? (cell.title as string) : (cell as unknown as React.ReactNode)}
+                      {isCellObject(cell) ? (cell.title as string) : isSelectCell(cell) ? null : (cell as unknown as React.ReactNode)}
                     </Td>
                   ))}
                 </Tr>
@@ -240,6 +249,8 @@ export const TableComposableToolbarView = ({
   isLoading,
   emptyFilters,
   setFilterValue,
+  setCheckedItems,
+  checkedRows,
   isSelectable = false,
   fetchData,
   emptyProps,
@@ -272,11 +283,12 @@ export const TableComposableToolbarView = ({
             intl.formatMessage(messages.toConfigureUserAccess),
             intl.formatMessage(messages.createAtLeastOneItem, { item: title.singular }),
           ]}
-          actions={toolbarButtons ? toolbarButtons()[0] : false}
+          actions={toolbarButtons ? (toolbarButtons()[0] as ReactNode) : false}
           {...(typeof emptyProps === 'object' ? emptyProps : {})}
         />
       ) : (
         <MainTable
+          setCheckedItems={setCheckedItems}
           columns={columns}
           isSelectable={isSelectable}
           isLoading={isLoading}
@@ -307,6 +319,7 @@ export const TableComposableToolbarView = ({
           ouiaId={ouiaId}
           noDataDescription={noDataDescription}
           emptyFilters={emptyFilters}
+          checkedRows={checkedRows}
         />
       )}
     </Fragment>

src/smart-components/group/add-group/users-list.js

@@ -104,6 +104,7 @@ const UsersList = ({ selectedUsers, setSelectedUsers, userLinks, usesMetaInURL,
     usesMetaInURL && updateStateFilters(payload);
     setFilters({ username: '', ...payload });
   };
+
   return (
     <TableToolbarView
       isCompact

src/smart-components/user/ActivateToggle.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { IntlShape } from 'react-intl';
+import messages from '../../Messages';
+import { Switch } from '@patternfly/react-core';
+import { UserProps } from './user-table-helpers';
+
+const ActivateToggle: React.FC<{
+  user: UserProps;
+  handleToggle: (_ev: unknown, isActive: boolean, updatedUsers: any[]) => void;
+  intl: IntlShape;
+}> = ({ user, handleToggle, intl }) => {
+  return user.external_source_id ? (
+    <Switch
+      id={user.username}
+      key={user.uuid}
+      isChecked={user.is_active}
+      onChange={(e, value) => handleToggle(e, value, [user])}
+      label={intl.formatMessage(messages['usersAndUserGroupsActive'])}
+      labelOff={intl.formatMessage(messages['usersAndUserGroupsInactive'])}
+    ></Switch>
+  ) : (
+    <></>
+  );
+};
+
+export default ActivateToggle;

src/smart-components/user/user-table-helpers.tsx

@@ -1,13 +1,14 @@
 import React, { Fragment } from 'react';
-import { Label } from '@patternfly/react-core';
 import { IntlShape } from 'react-intl';
 import messages from '../../Messages';
 import pathnames from '../../utilities/pathnames';
 import AppLink from '../../presentational-components/shared/AppLink';
 import OrgAdminDropdown from './OrgAdminDropdown';
 import { CheckIcon, CloseIcon } from '@patternfly/react-icons';
-
+import ActivateToggle from './ActivateToggle';
+import { Label } from '@patternfly/react-core';
 export interface UserProps {
+  isSelected: boolean;
   email: string;
   first_name: string;
   is_active: boolean;
@@ -19,17 +20,18 @@ export interface UserProps {
 }
 
 export type CellObject = { title: string | React.RefAttributes<HTMLAnchorElement>; props?: { 'data-is-active': boolean } };
+export type SelectCell = {
+  select: {
+    rowIndex: number;
+    onSelect: (_event: unknown, isSelecting: boolean) => void;
+    isSelected: boolean;
+  };
+};
+export type CellType = SelectCell | React.ReactNode | CellObject | string;
 
 export interface RowProps {
   uuid: string; // username
-  cells: [
-    React.ReactNode, // yes or no for isOrgAdmin
-    CellObject, // link to user or just username
-    string, // email
-    string, // firstName
-    string, // lastName
-    CellObject // status
-  ];
+  cells: CellType[];
   selected: boolean;
   authModel?: boolean;
   orgAdmin?: boolean;
@@ -42,15 +44,43 @@ export const createRows = (
   intl: IntlShape,
   checkedRows = [],
   isSelectable = false,
+  onSelectUser?: (user: UserProps, isSelecting: boolean) => void,
+  handleToggle?: (_ev: unknown, isActive: boolean, updatedUsers: any[]) => void,
   authModel?: boolean,
   orgAdmin?: boolean,
   fetchData?: () => void
-): RowProps[] =>
-  data?.reduce<RowProps[]>(
-    (acc, { username, is_active: isActive, email, first_name: firstName, last_name: lastName, is_org_admin: isOrgAdmin, external_source_id }) => {
+): RowProps[] => {
+  return data?.reduce<RowProps[]>(
+    (
+      acc,
+      { isSelected, username, is_active: isActive, email, first_name: firstName, last_name: lastName, is_org_admin: isOrgAdmin, external_source_id },
+      rowIndex
+    ) => {
+      const user = {
+        isSelected,
+        username,
+        is_active: isActive,
+        email,
+        first_name: firstName,
+        last_name: lastName,
+        is_org_admin: isOrgAdmin,
+        external_source_id,
+        uuid: username,
+      };
       const newEntry: RowProps = {
         uuid: username,
         cells: [
+          ...(onSelectUser && isOrgAdmin && authModel
+            ? [
+                {
+                  select: {
+                    rowIndex,
+                    onSelect: (_event: unknown, isSelecting: boolean) => onSelectUser(user, isSelecting),
+                    isSelected: isSelected,
+                  },
+                },
+              ]
+            : []),
           authModel && orgAdmin ? (
             <OrgAdminDropdown
               key={`dropdown-${username}`}
@@ -81,16 +111,20 @@ export const createRows = (
           email,
           firstName,
           lastName,
-          {
-            title: (
-              <Label key="status" color={isActive ? 'green' : 'grey'}>
-                {intl.formatMessage(isActive ? messages.active : messages.inactive)}
-              </Label>
-            ),
-            props: {
-              'data-is-active': isActive,
-            },
-          },
+          ...(handleToggle && isOrgAdmin && authModel
+            ? [<ActivateToggle key="active-toggle" user={user} handleToggle={handleToggle} intl={intl} />]
+            : [
+                {
+                  title: (
+                    <Label key="status" color={isActive ? 'green' : 'grey'}>
+                      {intl.formatMessage(isActive ? messages.active : messages.inactive)}
+                    </Label>
+                  ),
+                  props: {
+                    'data-is-active': isActive,
+                  },
+                },
+              ]),
         ],
         selected: isSelectable ? Boolean(checkedRows?.find?.(({ uuid }) => uuid === username)) : false,
       };
@@ -99,3 +133,4 @@ export const createRows = (
     },
     []
   );
+};