@oneuptime/common 12.0.8 → 12.0.9

package/UI/Components/ProjectInvitations/PendingProjectInvitations.tsx

@@ -0,0 +1,442 @@
+import API from "../../Utils/API/API";
+import ModelAPI, { ListResult } from "../../Utils/ModelAPI/ModelAPI";
+import ProjectInvitationDisplay from "../../Utils/ProjectInvitationDisplay";
+import User from "../../Utils/User";
+import Button, { ButtonSize, ButtonStyleType } from "../Button/Button";
+import ErrorMessage from "../ErrorMessage/ErrorMessage";
+import Icon, { SizeProp } from "../Icon/Icon";
+import ConfirmModal from "../Modal/ConfirmModal";
+import TeamMember from "../../../Models/DatabaseModels/TeamMember";
+import TeamMembersByProject, {
+  UserProjectMembership,
+} from "../../../Utils/TeamMembersByProject";
+import SortOrder from "../../../Types/BaseDatabase/SortOrder";
+import { LIMIT_PER_PROJECT } from "../../../Types/Database/LimitMax";
+import OneUptimeDate from "../../../Types/Date";
+import { PromiseVoidFunction } from "../../../Types/FunctionTypes";
+import IconProp from "../../../Types/Icon/IconProp";
+import ObjectID from "../../../Types/ObjectID";
+import React, { FunctionComponent, ReactElement, useState } from "react";
+import useAsyncEffect from "use-async-effect";
+
+export interface ComponentProps {
+  /**
+   * Called after every membership of the accepted project has been accepted,
+   * with the project the user has just joined. The caller decides what happens
+   * next - the dashboard reloads into that project - because navigating from in
+   * here would make this component unusable anywhere but the welcome page.
+   */
+  onInvitationAccepted?: ((projectId: ObjectID) => void) | undefined;
+  /**
+   * How many invitations are pending, reported after every load - including the
+   * first one, including zero, and including a load that failed (as zero).
+   *
+   * This is the only signal a caller gets that the fetch has finished, and the
+   * welcome page needs it: until it knows, it cannot tell whether to offer
+   * "create your first project" or to step out of the way of an invitation.
+   * That is also why a failed load reports zero rather than staying silent - a
+   * user whose invitations cannot be read must still be offered the way
+   * forward that does not depend on them.
+   */
+  onInvitationsLoaded?: ((invitationCount: number) => void) | undefined;
+  className?: string | undefined;
+}
+
+/*
+ * Every project the signed-in user has been invited to and has not accepted
+ * yet, offered for acceptance in place.
+ *
+ * The list is memberships grouped into projects, not memberships: a person
+ * invited to three teams of one project is invited to ONE project, and asking
+ * them to press Accept three times to get in reads as three separate invites
+ * from the same company. Accepting a card therefore accepts every membership
+ * behind it, and declining deletes every one of them.
+ *
+ * Nothing is rendered until the first load finishes (and nothing at all when
+ * there is nothing pending), so a page can mount this unconditionally without
+ * a loader flashing at the majority of users, who have no invitations.
+ */
+const PendingProjectInvitations: FunctionComponent<ComponentProps> = (
+  props: ComponentProps,
+): ReactElement => {
+  const [invitations, setInvitations] = useState<Array<UserProjectMembership>>(
+    [],
+  );
+  const [isLoading, setIsLoading] = useState<boolean>(true);
+  const [loadError, setLoadError] = useState<string>("");
+  const [refreshToggle, setRefreshToggle] = useState<boolean>(false);
+
+  /*
+   * The row key of the card currently mid-request, so only that card's buttons
+   * go busy. A single boolean would disable every Accept on the page while one
+   * of them is in flight.
+   */
+  const [busyRowKey, setBusyRowKey] = useState<string>("");
+  const [actionError, setActionError] = useState<string>("");
+  const [invitationToDecline, setInvitationToDecline] =
+    useState<UserProjectMembership | null>(null);
+
+  const fetchInvitations: PromiseVoidFunction = async (): Promise<void> => {
+    setIsLoading(true);
+    setLoadError("");
+
+    try {
+      const listResult: ListResult<TeamMember> =
+        await ModelAPI.getList<TeamMember>({
+          modelType: TeamMember,
+          query: {
+            userId: User.getUserId(),
+            hasAcceptedInvitation: false,
+          },
+          select: {
+            _id: true,
+            createdAt: true,
+            projectId: true,
+            project: {
+              _id: true,
+              name: true,
+            },
+            teamId: true,
+            team: {
+              _id: true,
+              name: true,
+            },
+          },
+          sort: {
+            createdAt: SortOrder.Ascending,
+          },
+          limit: LIMIT_PER_PROJECT,
+          skip: 0,
+          /*
+           * A pending invitation is the one thing a user reads about a project
+           * they are not yet a member of, so it cannot be scoped to the project
+           * currently selected in the dashboard - on the welcome page there is
+           * no selected project at all.
+           */
+          requestOptions: {
+            isMultiTenantRequest: true,
+          },
+        });
+
+      const rows: Array<UserProjectMembership> =
+        TeamMembersByProject.sortByProjectName(
+          TeamMembersByProject.groupByProject(listResult.data),
+        );
+
+      setInvitations(rows);
+      setIsLoading(false);
+
+      if (props.onInvitationsLoaded) {
+        props.onInvitationsLoaded(rows.length);
+      }
+    } catch (err) {
+      setInvitations([]);
+      setLoadError(API.getFriendlyMessage(err));
+      setIsLoading(false);
+
+      if (props.onInvitationsLoaded) {
+        props.onInvitationsLoaded(0);
+      }
+    }
+  };
+
+  useAsyncEffect(async () => {
+    await fetchInvitations();
+  }, [refreshToggle]);
+
+  type InvitationActionFunction = (
+    invitation: UserProjectMembership,
+  ) => Promise<void>;
+
+  const acceptInvitation: InvitationActionFunction = async (
+    invitation: UserProjectMembership,
+  ): Promise<void> => {
+    setBusyRowKey(ProjectInvitationDisplay.getRowKey(invitation));
+    setActionError("");
+
+    try {
+      /*
+       * One request per membership, in sequence. There is no bulk accept, and
+       * a card stands for at most a handful of teams; running them in sequence
+       * keeps a failure attributable to the membership that caused it.
+       *
+       * A failure part-way through leaves the user accepted into the teams
+       * already updated - which does put them in the project - so the list is
+       * reloaded below rather than left as it was, and what is still pending
+       * comes back as a smaller invitation they can accept again.
+       */
+      for (const teamMemberId of invitation.teamMemberIds) {
+        await ModelAPI.updateById({
+          modelType: TeamMember,
+          id: new ObjectID(teamMemberId),
+          data: {
+            hasAcceptedInvitation: true,
+            invitationAcceptedAt: OneUptimeDate.getCurrentDate(),
+          },
+          requestOptions: {
+            isMultiTenantRequest: true,
+          },
+        });
+      }
+
+      if (props.onInvitationAccepted && invitation.projectId) {
+        props.onInvitationAccepted(invitation.projectId);
+      }
+
+      /*
+       * The caller normally reloads the dashboard into the project it was just
+       * handed, and this never runs. It is here for the case where it does not
+       * - an invitation with no project id to hand over, or a caller that only
+       * wants to be told - so the accepted card leaves the list either way.
+       */
+      setBusyRowKey("");
+      setRefreshToggle((toggle: boolean) => {
+        return !toggle;
+      });
+    } catch (err) {
+      setActionError(API.getFriendlyMessage(err));
+      setBusyRowKey("");
+      setRefreshToggle((toggle: boolean) => {
+        return !toggle;
+      });
+    }
+  };
+
+  const declineInvitation: InvitationActionFunction = async (
+    invitation: UserProjectMembership,
+  ): Promise<void> => {
+    setBusyRowKey(ProjectInvitationDisplay.getRowKey(invitation));
+    setActionError("");
+    setInvitationToDecline(null);
+
+    try {
+      for (const teamMemberId of invitation.teamMemberIds) {
+        await ModelAPI.deleteItem({
+          modelType: TeamMember,
+          id: new ObjectID(teamMemberId),
+          requestOptions: {
+            isMultiTenantRequest: true,
+          },
+        });
+      }
+    } catch (err) {
+      setActionError(API.getFriendlyMessage(err));
+    }
+
+    setBusyRowKey("");
+    setRefreshToggle((toggle: boolean) => {
+      return !toggle;
+    });
+  };
+
+  type RenderInvitationFunction = (
+    invitation: UserProjectMembership,
+  ) => ReactElement;
+
+  const renderInvitation: RenderInvitationFunction = (
+    invitation: UserProjectMembership,
+  ): ReactElement => {
+    const rowKey: string = ProjectInvitationDisplay.getRowKey(invitation);
+    const projectName: string =
+      ProjectInvitationDisplay.getProjectName(invitation);
+    const teamNames: Array<string> =
+      ProjectInvitationDisplay.getTeamNames(invitation);
+    const isBusy: boolean = Boolean(rowKey) && busyRowKey === rowKey;
+
+    return (
+      <li
+        key={rowKey}
+        data-testid="project-invitation"
+        className="px-5 py-4 transition-colors duration-200 hover:bg-gray-50 md:px-6"
+      >
+        <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
+          <div className="flex min-w-0 items-center gap-4">
+            {/* Decorative: the project name sits right next to it. */}
+            <div
+              aria-hidden="true"
+              className="flex h-11 w-11 flex-shrink-0 items-center justify-center rounded-xl bg-indigo-600 text-sm font-semibold tracking-wide text-white shadow-sm"
+            >
+              {ProjectInvitationDisplay.getInitials(projectName)}
+            </div>
+            <div className="min-w-0">
+              <p className="truncate text-sm font-semibold text-gray-900">
+                {projectName}
+              </p>
+              {teamNames.length > 0 ? (
+                <div className="mt-1.5 flex flex-wrap items-center gap-1.5">
+                  {teamNames.map((teamName: string) => {
+                    return (
+                      <span
+                        key={teamName}
+                        className="inline-flex items-center rounded-md bg-gray-100 px-2 py-0.5 text-xs font-medium text-gray-600 ring-1 ring-inset ring-gray-200"
+                      >
+                        {teamName}
+                      </span>
+                    );
+                  })}
+                </div>
+              ) : (
+                <p className="mt-1 text-xs text-gray-500">
+                  {`You have been invited to ${ProjectInvitationDisplay.getTeamCountLabel(
+                    invitation,
+                  )} in this project.`}
+                </p>
+              )}
+              {invitation.joinedAt ? (
+                <p className="mt-1.5 text-xs text-gray-400">
+                  {`Invited ${OneUptimeDate.fromNow(invitation.joinedAt)}`}
+                </p>
+              ) : (
+                <></>
+              )}
+            </div>
+          </div>
+          <div className="flex flex-shrink-0 items-center gap-2 md:justify-end">
+            {/*
+             * NORMAL, not OUTLINE: the OUTLINE style is carried by a
+             * `btn-outline-secondary` class no stylesheet in this repo
+             * defines, so it renders as bare text - and "Decline" reading as
+             * a caption rather than a control is how somebody presses it by
+             * accident.
+             */}
+            <Button
+              title="Decline"
+              buttonStyle={ButtonStyleType.NORMAL}
+              buttonSize={ButtonSize.Small}
+              /*
+               * Both buttons carry `w-full` below the md breakpoint, so on a
+               * phone they share the row and "Accept & Join" breaks across two
+               * lines inside its own box. They fit side by side unwrapped at
+               * 375px; this is what stops them being wrapped anyway.
+               */
+              className="whitespace-nowrap"
+              disabled={isBusy}
+              dataTestId="decline-invitation-button"
+              ariaLabel={`Decline invitation to ${projectName}`}
+              onClick={() => {
+                setInvitationToDecline(invitation);
+              }}
+            />
+            <Button
+              title="Accept & Join"
+              icon={IconProp.Check}
+              buttonStyle={ButtonStyleType.PRIMARY}
+              buttonSize={ButtonSize.Small}
+              className="whitespace-nowrap"
+              isLoading={isBusy}
+              disabled={isBusy}
+              dataTestId="accept-invitation-button"
+              ariaLabel={`Accept invitation to ${projectName}`}
+              onClick={() => {
+                acceptInvitation(invitation).catch(() => {
+                  /*
+                   * acceptInvitation reports its own failures into the card;
+                   * this only stops an unhandled rejection reaching the console.
+                   */
+                });
+              }}
+            />
+          </div>
+        </div>
+      </li>
+    );
+  };
+
+  /*
+   * Nothing at all until the first load lands. Most people who reach the
+   * welcome page have no invitation waiting, and a loader that resolves to an
+   * empty region is a flash of furniture they never needed.
+   */
+  if (isLoading) {
+    return <></>;
+  }
+
+  if (loadError) {
+    return (
+      <div className={props.className || ""} data-testid="invitations-error">
+        <ErrorMessage
+          message={loadError}
+          onRefreshClick={() => {
+            setRefreshToggle((toggle: boolean) => {
+              return !toggle;
+            });
+          }}
+        />
+      </div>
+    );
+  }
+
+  if (invitations.length === 0) {
+    return <></>;
+  }
+
+  return (
+    <div className={props.className || ""} data-testid="pending-invitations">
+      <div className="overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm">
+        <div className="flex items-start gap-4 border-b border-gray-200 bg-gradient-to-r from-indigo-50 to-white px-5 py-5 md:px-6">
+          <div className="flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full bg-indigo-600 shadow-sm">
+            <Icon
+              icon={IconProp.Email}
+              size={SizeProp.Five}
+              className="h-5 w-5 text-white"
+            />
+          </div>
+          <div className="min-w-0">
+            <h2 className="text-lg font-semibold leading-6 text-gray-900">
+              {invitations.length === 1
+                ? "You have been invited to a project"
+                : `You have been invited to ${invitations.length} projects`}
+            </h2>
+            <p className="mt-1 text-sm leading-relaxed text-gray-500">
+              Accept an invitation to join right away. There is nothing to set
+              up.
+            </p>
+          </div>
+        </div>
+
+        {actionError ? (
+          <div
+            data-testid="invitation-action-error"
+            role="alert"
+            className="border-b border-red-200 bg-red-50 px-5 py-3 text-sm text-red-700 md:px-6"
+          >
+            {actionError}
+          </div>
+        ) : (
+          <></>
+        )}
+
+        <ul role="list" className="divide-y divide-gray-200">
+          {invitations.map(renderInvitation)}
+        </ul>
+      </div>
+
+      {invitationToDecline ? (
+        <ConfirmModal
+          title={`Decline invitation`}
+          description={`Are you sure you want to decline the invitation to ${ProjectInvitationDisplay.getProjectName(
+            invitationToDecline,
+          )}? You will lose access to ${ProjectInvitationDisplay.getTeamCountLabel(
+            invitationToDecline,
+          )} in this project, and will need a new invitation to join.`}
+          submitButtonText={`Decline`}
+          submitButtonType={ButtonStyleType.DANGER}
+          onSubmit={() => {
+            const invitation: UserProjectMembership = invitationToDecline;
+
+            declineInvitation(invitation).catch(() => {
+              // declineInvitation reports its own failures into the card.
+            });
+          }}
+          onClose={() => {
+            setInvitationToDecline(null);
+          }}
+        />
+      ) : (
+        <></>
+      )}
+    </div>
+  );
+};
+
+export default PendingProjectInvitations;

package/UI/Components/SimpleLogViewer/SimpleLogViewer.tsx

@@ -1,10 +1,20 @@
-import React, { FunctionComponent, ReactElement } from "react";
+import React, {
+  FunctionComponent,
+  ReactElement,
+  useEffect,
+  useRef,
+} from "react";
 
 export interface ComponentProps {
   children: ReactElement | string | Array<ReactElement>;
   showLineNumbers?: boolean | undefined;
   height?: string | undefined;
   title?: string | undefined;
+  /**
+   * Keep the newest lines in view as they arrive. For a log that is still
+   * being written — the tail is the part worth reading.
+   */
+  autoScrollToBottom?: boolean | undefined;
 }
 
 const SimpleLogViewer: FunctionComponent<ComponentProps> = (
@@ -73,6 +83,17 @@ const SimpleLogViewer: FunctionComponent<ComponentProps> = (
     );
   };
 
+  const contentRef: React.RefObject<HTMLDivElement> =
+    useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!props.autoScrollToBottom || !contentRef.current) {
+      return;
+    }
+
+    contentRef.current.scrollTop = contentRef.current.scrollHeight;
+  }, [props.autoScrollToBottom, props.children]);
+
   const scrollbarStyles: React.CSSProperties = {
     maxHeight: height,
     scrollbarWidth: "thin",
@@ -89,6 +110,7 @@ const SimpleLogViewer: FunctionComponent<ComponentProps> = (
       )}
       {/* Log Content */}
       <div
+        ref={contentRef}
         className="overflow-auto font-mono text-sm leading-6 p-4 [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-track]:bg-slate-800 [&::-webkit-scrollbar-thumb]:bg-slate-600 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:hover:bg-slate-500"
         style={scrollbarStyles}
       >

package/UI/Components/Table/Table.tsx

@@ -92,6 +92,18 @@ export interface ComponentProps<T extends GenericObject> {
   isBulkSelectionTruncated?: boolean | undefined;
   bulkSelectionTotalCount?: number | undefined;
   matchBulkSelectedItemByField?: keyof T | undefined; // which field to use to match selected items. For exmaple this could be '_id'
+  /*
+   * Which rows may be ticked. Absent means all of them, so every existing table
+   * is unaffected.
+   *
+   * Supplying it locks the rest of the selection machinery to the same rule -
+   * the header's select-all covers only the selectable rows, and "all selected"
+   * is judged against those - because a header box that can never fill, or one
+   * that fills while leaving rows unticked, is worse than no header box at all.
+   */
+  isItemSelectable?: ((item: T) => boolean) | undefined;
+  /** Hover text for a locked row's checkbox. Says why, in the caller's words. */
+  itemNotSelectableReason?: ((item: T) => string) | undefined;
   onBulkActionEnd?: (() => void) | undefined;
   onBulkActionStart?: (() => void) | undefined;
   bulkItemToString?: ((item: T) => string) | undefined;
@@ -292,29 +304,49 @@ const Table: TableFunction = <T extends GenericObject>(
         }}
         selectedItems={bulkSelectedItems}
         matchBulkSelectedItemByField={props.matchBulkSelectedItemByField}
+        isItemSelectable={props.isItemSelectable}
+        itemNotSelectableReason={props.itemNotSelectableReason}
+        bulkItemToString={props.bulkItemToString}
         isMobile={isMobile}
       />
     );
   };
 
-  // check if all items on the page are selected.
-  let isAllItemsOnThePageSelected: boolean = true;
+  /*
+   * The rows on this page the header checkbox is actually talking about. With no
+   * isItemSelectable this is every row, which is what it has always been.
+   */
+  const selectableRowsOnThePage: Array<T> = props.isItemSelectable
+    ? props.data.filter(props.isItemSelectable)
+    : props.data;
 
-  props.data.forEach((item: T) => {
-    const index: number = bulkSelectedItems.findIndex((x: T) => {
-      if (props.matchBulkSelectedItemByField === undefined) {
-        return false;
-      }
-      return (
-        x[props.matchBulkSelectedItemByField]?.toString() ===
-        item[props.matchBulkSelectedItemByField]?.toString()
-      );
-    });
+  const isRowSelected: (item: T) => boolean = (item: T): boolean => {
+    const matchBy: keyof T | undefined = props.matchBulkSelectedItemByField;
 
-    if (index === -1) {
-      isAllItemsOnThePageSelected = false;
+    if (matchBy === undefined) {
+      return false;
     }
-  });
+
+    return bulkSelectedItems.some((selected: T) => {
+      return selected[matchBy]?.toString() === item[matchBy]?.toString();
+    });
+  };
+
+  const selectedRowsOnThePageCount: number =
+    selectableRowsOnThePage.filter(isRowSelected).length;
+
+  /*
+   * "All selected" means all of the SELECTABLE rows, and a page with none of
+   * those does not count as fully selected - otherwise a page of entirely locked
+   * rows would render a ticked header box above nothing that is ticked.
+   */
+  const isAllItemsOnThePageSelected: boolean =
+    selectableRowsOnThePage.length > 0 &&
+    selectedRowsOnThePageCount === selectableRowsOnThePage.length;
+
+  const isSomeItemsOnThePageSelected: boolean =
+    selectedRowsOnThePageCount > 0 &&
+    selectedRowsOnThePageCount < selectableRowsOnThePage.length;
 
   return (
     <div className={props.className}>
@@ -412,7 +444,8 @@ const Table: TableFunction = <T extends GenericObject>(
                       }
                     }}
                     isAllItemsOnThePageSelected={isAllItemsOnThePageSelected}
-                    hasTableItems={props.data.length > 0}
+                    isSomeItemsOnThePageSelected={isSomeItemsOnThePageSelected}
+                    hasTableItems={selectableRowsOnThePage.length > 0}
                   />
                   {getTablebody()}
                 </table>

package/UI/Components/Table/TableBody.tsx

@@ -21,6 +21,15 @@ export interface ComponentProps<T extends GenericObject> {
   onItemDeselected?: undefined | ((item: T) => void);
   selectedItems: Array<T>;
   matchBulkSelectedItemByField: keyof T | undefined; // which field to use to match selected items. For exmaple this could be '_id'
+  /*
+   * Which rows may be ticked at all. Absent means every row, so a table that
+   * does not care is unaffected. See TableRow.isItemSelectable.
+   */
+  isItemSelectable?: ((item: T) => boolean) | undefined;
+  /** The accessible name for a row's checkbox: "Select {this}". */
+  bulkItemToString?: ((item: T) => string) | undefined;
+  /** Why a locked row is locked, in the caller's own words. */
+  itemNotSelectableReason?: ((item: T) => string) | undefined;
 
   // responsive
   isMobile?: boolean;
@@ -35,6 +44,48 @@ const TableBody: TableBodyFunction = <T extends GenericObject>(
 ): ReactElement => {
   type GetBodyFunction = (provided?: DroppableProvided) => ReactElement;
 
+  /*
+   * Everything about ONE row's checkbox, computed once and spread into both the
+   * desktop and the mobile TableRow. The selected-ness test used to be written
+   * out twice, identically, a hundred lines apart; adding three more selection
+   * props to both copies is how that kind of duplication turns into a row that
+   * is locked at one breakpoint and not the other.
+   */
+  type SelectionPropsFunction = (item: T) => {
+    isItemSelected: boolean;
+    isItemSelectable: boolean;
+    itemSelectLabel: string | undefined;
+    itemNotSelectableReason: string | undefined;
+  };
+
+  const getSelectionProps: SelectionPropsFunction = (item: T) => {
+    const matchBy: keyof T | undefined = props.matchBulkSelectedItemByField;
+
+    const isItemSelected: boolean = Boolean(
+      matchBy !== undefined &&
+        props.selectedItems?.some((selectedItem: T) => {
+          return (
+            selectedItem[matchBy]?.toString() === item[matchBy]?.toString()
+          );
+        }),
+    );
+
+    const label: string | undefined = props.bulkItemToString
+      ? `Select ${props.bulkItemToString(item)}`
+      : undefined;
+
+    return {
+      isItemSelected: isItemSelected,
+      isItemSelectable: props.isItemSelectable
+        ? props.isItemSelectable(item)
+        : true,
+      itemSelectLabel: label,
+      itemNotSelectableReason: props.itemNotSelectableReason
+        ? props.itemNotSelectableReason(item)
+        : undefined,
+    };
+  };
+
   const getBody: GetBodyFunction = (
     provided?: DroppableProvided,
   ): ReactElement => {
@@ -54,20 +105,7 @@ const TableBody: TableBodyFunction = <T extends GenericObject>(
                   isBulkActionsEnabled={props.isBulkActionsEnabled}
                   onItemSelected={props.onItemSelected}
                   onItemDeselected={props.onItemDeselected}
-                  isItemSelected={
-                    props.selectedItems?.filter((selectedItem: T) => {
-                      if (props.matchBulkSelectedItemByField === undefined) {
-                        return false;
-                      }
-
-                      return (
-                        selectedItem[
-                          props.matchBulkSelectedItemByField
-                        ]?.toString() ===
-                        item[props.matchBulkSelectedItemByField]?.toString()
-                      );
-                    }).length > 0 || false
-                  }
+                  {...getSelectionProps(item)}
                   dragAndDropScope={props.dragAndDropScope}
                   enableDragAndDrop={props.enableDragAndDrop}
                   key={i}
@@ -100,20 +138,7 @@ const TableBody: TableBodyFunction = <T extends GenericObject>(
                 isBulkActionsEnabled={props.isBulkActionsEnabled}
                 onItemSelected={props.onItemSelected}
                 onItemDeselected={props.onItemDeselected}
-                isItemSelected={
-                  props.selectedItems?.filter((selectedItem: T) => {
-                    if (props.matchBulkSelectedItemByField === undefined) {
-                      return false;
-                    }
-
-                    return (
-                      selectedItem[
-                        props.matchBulkSelectedItemByField
-                      ]?.toString() ===
-                      item[props.matchBulkSelectedItemByField]?.toString()
-                    );
-                  }).length > 0 || false
-                }
+                {...getSelectionProps(item)}
                 dragAndDropScope={props.dragAndDropScope}
                 enableDragAndDrop={props.enableDragAndDrop}
                 key={i}