@oneuptime/common 7.0.4220 → 7.0.4222

package/Types/BaseDatabase/LessThanOrNull.ts

@@ -0,0 +1,39 @@
+import CompareBase, { CompareType } from "../Database/CompareBase";
+import OneUptimeDate from "../Date";
+import BadDataException from "../Exception/BadDataException";
+import { JSONObject, ObjectType } from "../JSON";
+
+export default class LessThanOrNull<
+  T extends CompareType,
+> extends CompareBase<T> {
+  public constructor(value: T) {
+    super(value);
+  }
+
+  public override toJSON(): JSONObject {
+    return {
+      _type: ObjectType.LessThanOrNull,
+      value: (this as LessThanOrNull<T>).toString(),
+    };
+  }
+
+  public override toString(): string {
+    let value: T = this.value;
+
+    if (value instanceof Date) {
+      value = OneUptimeDate.asDateForDatabaseQuery(value) as T;
+    }
+
+    return value.toString();
+  }
+
+  public static override fromJSON<T extends CompareType>(
+    json: JSONObject,
+  ): LessThanOrNull<T> {
+    if (json["_type"] === ObjectType.LessThanOrNull) {
+      return new LessThanOrNull<T>(json["value"] as T);
+    }
+
+    throw new BadDataException("Invalid JSON: " + JSON.stringify(json));
+  }
+}

package/Types/Date.ts

@@ -10,6 +10,24 @@ export const Moment: typeof moment = moment;
 
 export default class OneUptimeDate {
   // get date time from unix timestamp
+
+  public static getHoursAndMinutesFromMinutes(minutes: number): string {
+    const hours: number = Math.floor(minutes / 60);
+    const mins: number = minutes % 60;
+
+    let formattedString: string = "";
+
+    if (hours > 0) {
+      formattedString += hours + " hours ";
+    }
+
+    if (mins > 0) {
+      formattedString += mins + " minutes";
+    }
+
+    return formattedString.trim() || "0 minutes";
+  }
+
   public static fromUnixTimestamp(timestamp: number): Date {
     return new Date(timestamp * 1000);
   }

package/Types/JSON.ts

@@ -28,6 +28,8 @@ import StartAndEndTime from "./Time/StartAndEndTime";
 import Version from "./Version";
 import { BaseEntity } from "typeorm";
 import DashboardViewConfig from "./Dashboard/DashboardViewConfig";
+import LessThanOrNull from "./BaseDatabase/LessThanOrNull";
+import GreaterThanOrNull from "./BaseDatabase/GreaterThanOrNull";
 
 export enum ObjectType {
   ObjectID = "ObjectID",
@@ -54,6 +56,8 @@ export enum ObjectType {
   Search = "Search",
   GreaterThan = "GreaterThan",
   GreaterThanOrEqual = "GreaterThanOrEqual",
+  GreaterThanOrNull = "GreaterThanOrNull",
+  LessThanOrNull = "LessThanOrNull",
   LessThan = "LessThan",
   LessThanOrEqual = "LessThanOrEqual",
   Port = "Port",
@@ -119,6 +123,10 @@ export type JSONValue =
   | Array<GreaterThan<CompareType>>
   | GreaterThanOrEqual<CompareType>
   | Array<GreaterThanOrEqual<CompareType>>
+  | LessThanOrNull<CompareType>
+  | Array<LessThanOrNull<CompareType>>
+  | GreaterThanOrNull<CompareType>
+  | Array<GreaterThanOrNull<CompareType>>
   | PositiveNumber
   | Array<PositiveNumber>
   | LessThan<CompareType>

package/Types/Permission.ts

@@ -532,6 +532,8 @@ enum Permission {
   DeleteOnCallDutyPolicyUserOverride = "DeleteOnCallDutyPolicyUserOverride",
   ReadOnCallDutyPolicyUserOverride = "ReadOnCallDutyPolicyUserOverride",
 
+  ReadOnCallDutyPolicyTimeLog = "ReadOnCallDutyPolicyTimeLog",
+
   // Resource Permissions (Team Permission)
   CreateProjectOnCallDutyPolicyEscalationRuleUser = "CreateProjectOnCallDutyPolicyEscalationRuleUser",
   EditProjectOnCallDutyPolicyEscalationRuleUser = "EditProjectOnCallDutyPolicyEscalationRuleUser",
@@ -2424,6 +2426,15 @@ export class PermissionHelper {
         isAccessControlPermission: false,
       },
 
+      {
+        permission: Permission.ReadOnCallDutyPolicyTimeLog,
+        title: "Create On-Call Policy Time Log",
+        description:
+          "This permission can read on-call policy time log this project.",
+        isAssignableToTenant: true,
+        isAccessControlPermission: false,
+      },
+
       {
         permission: Permission.CreateOnCallDutyPolicyUserOverride,
         title: "Create On-Call Duty Policy User Override",

package/Types/SerializableObjectDictionary.ts

@@ -9,6 +9,8 @@ import Includes from "./BaseDatabase/Includes";
 import IsNull from "./BaseDatabase/IsNull";
 import LessThan from "./BaseDatabase/LessThan";
 import LessThanOrEqual from "./BaseDatabase/LessThanOrEqual";
+import LessThanOrNull from "./BaseDatabase/LessThanOrNull";
+import GreaterThanOrNull from "./BaseDatabase/GreaterThanOrNull";
 import NotEqual from "./BaseDatabase/NotEqual";
 import NotNull from "./BaseDatabase/NotNull";
 import Search from "./BaseDatabase/Search";
@@ -54,6 +56,8 @@ const SerializableObjectDictionary: Dictionary<any> = {
   [ObjectType.GreaterThanOrEqual]: GreaterThanOrEqual,
   [ObjectType.LessThan]: LessThan,
   [ObjectType.LessThanOrEqual]: LessThanOrEqual,
+  [ObjectType.LessThanOrNull]: LessThanOrNull,
+  [ObjectType.GreaterThanOrNull]: GreaterThanOrNull,
   [ObjectType.Port]: Port,
   [ObjectType.Hostname]: Hostname,
   [ObjectType.HashedString]: HashedString,

package/Types/Time/RangeStartAndEndDateTime.ts

@@ -0,0 +1,98 @@
+import InBetween from "Common/Types/BaseDatabase/InBetween";
+import TimeRange from "./TimeRange";
+import OneUptimeDate from "Common/Types/Date";
+
+export default interface RangeStartAndEndDateTime {
+  startAndEndDate?: InBetween<Date> | undefined;
+  range: TimeRange;
+}
+
+export class RangeStartAndEndDateTimeUtil {
+  public static getStartAndEndDate(
+    dashboardStartAndEndDate: RangeStartAndEndDateTime,
+  ): InBetween<Date> {
+    const currentDate: Date = OneUptimeDate.getCurrentDate();
+
+    // 30 mins.
+    if (dashboardStartAndEndDate.range === TimeRange.PAST_THIRTY_MINS) {
+      return new InBetween<Date>(
+        OneUptimeDate.addRemoveMinutes(currentDate, -30),
+        currentDate,
+      );
+    }
+
+    if (dashboardStartAndEndDate.range === TimeRange.PAST_ONE_HOUR) {
+      return new InBetween<Date>(
+        OneUptimeDate.addRemoveHours(currentDate, -1),
+        currentDate,
+      );
+    }
+
+    // two hours.
+    if (dashboardStartAndEndDate.range === TimeRange.PAST_TWO_HOURS) {
+      return new InBetween<Date>(
+        OneUptimeDate.addRemoveHours(currentDate, -2),
+        currentDate,
+      );
+    }
+
+    // three hours
+    if (dashboardStartAndEndDate.range === TimeRange.PAST_THREE_HOURS) {
+      return new InBetween<Date>(
+        OneUptimeDate.addRemoveHours(currentDate, -3),
+        currentDate,
+      );
+    }
+
+    if (dashboardStartAndEndDate.range === TimeRange.PAST_ONE_DAY) {
+      return new InBetween<Date>(
+        OneUptimeDate.addRemoveDays(currentDate, -1),
+        currentDate,
+      );
+    }
+
+    // two days .
+    if (dashboardStartAndEndDate.range === TimeRange.PAST_TWO_DAYS) {
+      return new InBetween<Date>(
+        OneUptimeDate.addRemoveDays(currentDate, -2),
+        currentDate,
+      );
+    }
+
+    if (dashboardStartAndEndDate.range === TimeRange.PAST_ONE_WEEK) {
+      return new InBetween<Date>(
+        OneUptimeDate.addRemoveDays(currentDate, -7),
+        currentDate,
+      );
+    }
+
+    // two weeks.
+    if (dashboardStartAndEndDate.range === TimeRange.PAST_TWO_WEEKS) {
+      return new InBetween<Date>(
+        OneUptimeDate.addRemoveDays(currentDate, -14),
+        currentDate,
+      );
+    }
+
+    if (dashboardStartAndEndDate.range === TimeRange.PAST_ONE_MONTH) {
+      return new InBetween<Date>(
+        OneUptimeDate.addRemoveMonths(currentDate, -1),
+        currentDate,
+      );
+    }
+
+    // three months.
+    if (dashboardStartAndEndDate.range === TimeRange.PAST_THREE_MONTHS) {
+      return new InBetween<Date>(
+        OneUptimeDate.addRemoveMonths(currentDate, -3),
+        currentDate,
+      );
+    }
+
+    // custom
+    return (
+      dashboardStartAndEndDate.startAndEndDate ||
+      new InBetween<Date>(currentDate, currentDate)
+    );
+  }
+}

package/Types/Time/TimeRange.ts

@@ -0,0 +1,15 @@
+enum Range {
+  PAST_THIRTY_MINS = "Past 30 Mins",
+  PAST_ONE_HOUR = "Past 1 Hour",
+  PAST_TWO_HOURS = "Past 2 Hours",
+  PAST_THREE_HOURS = "Past 3 Hours",
+  PAST_ONE_DAY = "Past 1 Day",
+  PAST_TWO_DAYS = "Past 2 Days",
+  PAST_ONE_WEEK = "Past 1 Week",
+  PAST_TWO_WEEKS = "Past 2 Weeks",
+  PAST_ONE_MONTH = "Past 1 Month",
+  PAST_THREE_MONTHS = "Past 3 Months",
+  CUSTOM = "Custom",
+}
+
+export default Range;

package/UI/Components/BulkUpdate/BulkUpdateForm.tsx

@@ -62,9 +62,9 @@ export interface ComponentProps<T extends GenericObject> {
   pluralLabel: string;
   onClearSelectionClick: () => void;
   buttons: Array<BulkActionButtonSchema<T>>;
-  onActionStart?: () => void;
-  onActionEnd?: () => void;
-  itemToString?: (item: T) => string;
+  onActionStart?: (() => void) | undefined;
+  onActionEnd?: (() => void) | undefined;
+  itemToString?: ((item: T) => string) | undefined;
 }
 
 const BulkUpdateForm: <T extends GenericObject>(

package/UI/Components/Date/RangeStartAndEndDateEdit.tsx

@@ -0,0 +1,64 @@
+import React, { FunctionComponent, ReactElement } from "react";
+import RangeStartAndEndDateTime from "Common/Types/Time/RangeStartAndEndDateTime";
+import StartAndEndDate, {
+  StartAndEndDateType,
+} from "Common/UI/Components/Date/StartAndEndDate";
+import InBetween from "Common/Types/BaseDatabase/InBetween";
+import TimeRange from "Common/Types/Time/TimeRange";
+import Dropdown, {
+  DropdownOption,
+  DropdownValue,
+} from "Common/UI/Components/Dropdown/Dropdown";
+import DropdownUtil from "Common/UI/Utils/Dropdown";
+
+export interface ComponentProps {
+  value?: RangeStartAndEndDateTime | undefined;
+  onChange: (startAndEndDate: RangeStartAndEndDateTime) => void;
+}
+
+const DashboardStartAndEndDateEditElement: FunctionComponent<ComponentProps> = (
+  props: ComponentProps,
+): ReactElement => {
+  const dropdownOptions: DropdownOption[] =
+    DropdownUtil.getDropdownOptionsFromEnum(TimeRange);
+  const defaultDropdownOption: DropdownOption =
+    dropdownOptions.find((option: DropdownOption) => {
+      return option.value === TimeRange.PAST_ONE_HOUR;
+    }) || dropdownOptions[0]!;
+  const selectedDropdownnOption: DropdownOption =
+    dropdownOptions.find((option: DropdownOption) => {
+      return option.value === props.value?.range;
+    }) || defaultDropdownOption;
+
+  return (
+    <div>
+      <Dropdown
+        value={selectedDropdownnOption}
+        onChange={(range: DropdownValue | Array<DropdownValue> | null) => {
+          props.onChange({
+            range: range as TimeRange,
+          });
+        }}
+        options={dropdownOptions}
+      />
+      {/* Start and End Date */}
+      {props.value?.range === TimeRange.CUSTOM && (
+        <StartAndEndDate
+          type={StartAndEndDateType.DateTime}
+          value={props.value?.startAndEndDate || undefined}
+          hideTimeButtons={true}
+          onValueChanged={(startAndEndDate: InBetween<Date> | null) => {
+            if (startAndEndDate) {
+              props.onChange({
+                range: TimeRange.CUSTOM,
+                startAndEndDate,
+              });
+            }
+          }}
+        />
+      )}
+    </div>
+  );
+};
+
+export default DashboardStartAndEndDateEditElement;

package/UI/Components/Date/RangeStartAndEndDateView.tsx

@@ -0,0 +1,86 @@
+import React, { FunctionComponent, ReactElement, useState } from "react";
+import RangeStartAndEndDateTime from "Common/Types/Time/RangeStartAndEndDateTime";
+import TimeRange from "Common/Types/Time/TimeRange";
+import OneUptimeDate from "Common/Types/Date";
+import IconProp from "Common/Types/Icon/IconProp";
+import { GetReactElementFunction } from "Common/UI/Types/FunctionTypes";
+import HeaderAlert, {
+  HeaderAlertType,
+} from "Common/UI/Components/HeaderAlert/HeaderAlert";
+import ColorSwatch from "Common/Types/ColorSwatch";
+import RangeStartAndEndDateEdit from "./RangeStartAndEndDateEdit";
+import Modal from "../Modal/Modal";
+
+export interface ComponentProps {
+  dashboardStartAndEndDate: RangeStartAndEndDateTime;
+  onChange: (startAndEndDate: RangeStartAndEndDateTime) => void;
+}
+
+const DashboardStartAndEndDateView: FunctionComponent<ComponentProps> = (
+  props: ComponentProps,
+): ReactElement => {
+  const [tempStartAndEndDate, setTempStartAndEndDate] =
+    useState<RangeStartAndEndDateTime | null>(null);
+  const [showTimeSelectModal, setShowTimeSelectModal] =
+    useState<boolean>(false);
+
+  const isCustomRange: boolean =
+    props.dashboardStartAndEndDate.range === TimeRange.CUSTOM;
+
+  const getContent: GetReactElementFunction = (): ReactElement => {
+    const title: string = isCustomRange
+      ? `${OneUptimeDate.getDateAsLocalFormattedString(
+          props.dashboardStartAndEndDate.startAndEndDate?.startValue ||
+            OneUptimeDate.getCurrentDate(),
+        )} - ${OneUptimeDate.getDateAsLocalFormattedString(
+          props.dashboardStartAndEndDate.startAndEndDate?.endValue ||
+            OneUptimeDate.getCurrentDate(),
+        )}`
+      : props.dashboardStartAndEndDate.range;
+
+    return (
+      <div>
+        <HeaderAlert
+          icon={IconProp.Clock}
+          onClick={() => {
+            setTempStartAndEndDate(props.dashboardStartAndEndDate);
+            setShowTimeSelectModal(true);
+          }}
+          title={title}
+          alertType={HeaderAlertType.INFO}
+          colorSwatch={ColorSwatch.Blue}
+          tooltip="Click to change the date and time range of data on this dashboard."
+        />
+        {showTimeSelectModal && (
+          <Modal
+            title="Select Start and End Time"
+            onClose={() => {
+              setTempStartAndEndDate(null);
+              setShowTimeSelectModal(false);
+            }}
+            onSubmit={() => {
+              if (tempStartAndEndDate) {
+                props.onChange(tempStartAndEndDate);
+              }
+              setShowTimeSelectModal(false);
+              setTempStartAndEndDate(null);
+            }}
+          >
+            <div className="mt-5">
+              <RangeStartAndEndDateEdit
+                value={tempStartAndEndDate || undefined}
+                onChange={(startAndEndDate: RangeStartAndEndDateTime) => {
+                  setTempStartAndEndDate(startAndEndDate);
+                }}
+              />
+            </div>
+          </Modal>
+        )}
+      </div>
+    );
+  };
+
+  return <div>{getContent()}</div>;
+};
+
+export default DashboardStartAndEndDateView;

package/UI/Components/Filters/FilterViewer.tsx

@@ -25,8 +25,8 @@ export interface ComponentProps<T extends GenericObject> {
   showFilterModal: boolean;
   onFilterChanged?: undefined | ((filterData: FilterData<T>) => void);
   filterError?: string | undefined;
-  onFilterModalClose: () => void;
-  onFilterModalOpen: () => void;
+  onFilterModalClose?: (() => void) | undefined;
+  onFilterModalOpen?: (() => void) | undefined;
   isModalLoading?: boolean;
   onFilterRefreshClick?: undefined | (() => void);
   filterData?: FilterData<T> | undefined;
@@ -399,7 +399,7 @@ const FilterComponent: FilterComponentFunction = <T extends GenericObject>(
               <Button
                 onClick={() => {
                   changeFilterData({});
-                  props.onFilterModalClose();
+                  props.onFilterModalClose && props.onFilterModalClose();
                 }}
                 className="font-medium text-gray-900"
                 icon={IconProp.Close}
@@ -421,7 +421,7 @@ const FilterComponent: FilterComponentFunction = <T extends GenericObject>(
           } by the following criteria:`}
           submitButtonText={`Apply Filters`}
           onClose={() => {
-            props.onFilterModalClose();
+            props.onFilterModalClose && props.onFilterModalClose();
           }}
           onSubmit={() => {
             setTempFilterDataForModal({});
@@ -430,7 +430,7 @@ const FilterComponent: FilterComponentFunction = <T extends GenericObject>(
                 ...tempFilterDataForModal,
               });
             }
-            props.onFilterModalClose();
+            props.onFilterModalClose && props.onFilterModalClose();
           }}
         >
           <FiltersForm

package/UI/Components/Table/LocalTable.tsx

@@ -0,0 +1,74 @@
+import React, { ReactElement } from "react";
+import GenericObject from "../../../Types/GenericObject";
+import Columns from "./Types/Columns";
+import Table from "./Table";
+import SortOrder from "../../../Types/BaseDatabase/SortOrder";
+
+export interface ComponentProps<T extends GenericObject> {
+  data: Array<T>;
+  columns: Columns<T>;
+  id: string;
+  singularLabel: string;
+  pluralLabel: string;
+}
+
+type TableFunction = <T extends GenericObject>(
+  props: ComponentProps<T>,
+) => ReactElement;
+
+const LocalTable: TableFunction = <T extends GenericObject>(
+  props: ComponentProps<T>,
+): ReactElement => {
+  const [currentPage, setCurrentPage] = React.useState<number>(1);
+  const [itemsPerPage, setItemsPerPage] = React.useState<number>(10);
+  const [sortOrder, setSortOrder] = React.useState<SortOrder>(
+    SortOrder.Ascending,
+  );
+  const [sortBy, setSortBy] = React.useState<keyof T | null>(null);
+
+  const [dataSlice, setDataSlice] = React.useState<Array<T>>(
+    props.data.slice(0, itemsPerPage),
+  );
+
+  React.useEffect(() => {
+    const startIndex: number = (currentPage - 1) * itemsPerPage;
+    const endIndex: number = startIndex + itemsPerPage;
+    setDataSlice(props.data.slice(startIndex, endIndex));
+  }, [currentPage, itemsPerPage, props.data]);
+
+  return (
+    <Table
+      data={dataSlice}
+      columns={props.columns}
+      totalItemsCount={props.data.length}
+      currentPageNumber={currentPage}
+      error={""}
+      isLoading={false}
+      itemsOnPage={itemsPerPage}
+      onNavigateToPage={(pageNumber: number, itemsPerPage: number) => {
+        setCurrentPage(pageNumber);
+        setItemsPerPage(itemsPerPage);
+      }}
+      id={props.id}
+      disablePagination={false}
+      singularLabel={props.singularLabel}
+      pluralLabel={props.pluralLabel}
+      sortOrder={sortOrder}
+      sortBy={sortBy}
+      onSortChanged={(sortBy: keyof T | null, sortOrder: SortOrder) => {
+        setSortOrder(sortOrder);
+        setSortBy(sortBy);
+        const sortedData: T[] = [...props.data].sort((a: T, b: T) => {
+          if (sortOrder === SortOrder.Ascending) {
+            return a[sortBy as keyof T] > b[sortBy as keyof T] ? 1 : -1;
+          }
+          return a[sortBy as keyof T] < b[sortBy as keyof T] ? 1 : -1;
+        });
+        setDataSlice(sortedData.slice(0, itemsPerPage));
+        setCurrentPage(1);
+      }}
+    />
+  );
+};
+
+export default LocalTable;

package/UI/Components/Table/Table.tsx

@@ -51,8 +51,8 @@ export interface ComponentProps<T extends GenericObject> {
   filterError?: string | undefined;
   onFilterChanged?: undefined | ((filterData: FilterData<T>) => void);
   onFilterRefreshClick?: undefined | (() => void);
-  onFilterModalClose: () => void;
-  onFilterModalOpen: () => void;
+  onFilterModalClose?: (() => void) | undefined;
+  onFilterModalOpen?: (() => void) | undefined;
   filterData?: undefined | FilterData<T>;
 
   enableDragAndDrop?: boolean | undefined;
@@ -61,17 +61,17 @@ export interface ComponentProps<T extends GenericObject> {
   onDragDrop?: ((id: string, newIndex: number) => void) | undefined;
 
   // bulk actions
-  bulkActions: BulkActionProps<T>;
-  bulkSelectedItems: Array<T>;
-  onBulkSelectedItemAdded: (item: T) => void;
-  onBulkSelectedItemRemoved: (item: T) => void;
-  onBulkSelectAllItems: () => void;
-  onBulkSelectItemsOnCurrentPage: () => void;
-  onBulkClearAllItems: () => void;
-  matchBulkSelectedItemByField: keyof T; // which field to use to match selected items. For exmaple this could be '_id'
-  onBulkActionEnd: () => void;
-  onBulkActionStart: () => void;
-  bulkItemToString: (item: T) => string;
+  bulkActions?: BulkActionProps<T> | undefined;
+  bulkSelectedItems?: Array<T> | undefined;
+  onBulkSelectedItemAdded?: ((item: T) => void) | undefined;
+  onBulkSelectedItemRemoved?: ((item: T) => void) | undefined;
+  onBulkSelectAllItems?: (() => void) | undefined;
+  onBulkSelectItemsOnCurrentPage?: (() => void) | undefined;
+  onBulkClearAllItems?: (() => void) | undefined;
+  matchBulkSelectedItemByField?: keyof T | undefined; // which field to use to match selected items. For exmaple this could be '_id'
+  onBulkActionEnd?: (() => void) | undefined;
+  onBulkActionStart?: (() => void) | undefined;
+  bulkItemToString?: ((item: T) => string) | undefined;
 }
 
 type TableFunction = <T extends GenericObject>(
@@ -81,7 +81,7 @@ type TableFunction = <T extends GenericObject>(
 const Table: TableFunction = <T extends GenericObject>(
   props: ComponentProps<T>,
 ): ReactElement => {
-  const isBulkActionsEnabled: boolean =
+  const isBulkActionsEnabled: boolean | undefined =
     props.bulkActions &&
     props.bulkActions.buttons &&
     props.bulkActions.buttons.length > 0;
@@ -90,7 +90,9 @@ const Table: TableFunction = <T extends GenericObject>(
   const [bulkSelectedItems, setBulkSelectedItems] = useState<Array<T>>([]);
 
   useEffect(() => {
-    setBulkSelectedItems(props.bulkSelectedItems);
+    if (props.bulkSelectedItems) {
+      setBulkSelectedItems(props.bulkSelectedItems);
+    }
   }, [props.bulkSelectedItems]);
 
   let colspan: number = props.columns.length || 0;
@@ -165,14 +167,17 @@ const Table: TableFunction = <T extends GenericObject>(
         onItemSelected={(item: T) => {
           // set bulk selected items.
           setBulkSelectedItems([...bulkSelectedItems, item]);
-          props.onBulkSelectedItemAdded(item);
+          props.onBulkSelectedItemAdded?.(item);
         }}
         onItemDeselected={(item: T) => {
           // set bulk selected items.
+          if (props.matchBulkSelectedItemByField === undefined) {
+            return;
+          }
           const index: number = bulkSelectedItems.findIndex((x: T) => {
             return (
-              x[props.matchBulkSelectedItemByField]?.toString() ===
-              item[props.matchBulkSelectedItemByField]?.toString()
+              x[props.matchBulkSelectedItemByField!]?.toString() ===
+              item[props.matchBulkSelectedItemByField!]?.toString()
             );
           });
 
@@ -180,7 +185,7 @@ const Table: TableFunction = <T extends GenericObject>(
             bulkSelectedItems.splice(index, 1);
           }
 
-          props.onBulkSelectedItemRemoved(item);
+          props.onBulkSelectedItemRemoved?.(item);
         }}
         selectedItems={bulkSelectedItems}
         matchBulkSelectedItemByField={props.matchBulkSelectedItemByField}
@@ -193,6 +198,9 @@ const Table: TableFunction = <T extends GenericObject>(
 
   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()
@@ -224,11 +232,11 @@ const Table: TableFunction = <T extends GenericObject>(
         <BulkUpdateForm
           buttons={props.bulkActions.buttons}
           onClearSelectionClick={() => {
-            props.onBulkClearAllItems();
+            props.onBulkClearAllItems && props.onBulkClearAllItems();
             setIsAllItemsSelected(false);
           }}
           onSelectAllClick={() => {
-            props.onBulkSelectAllItems();
+            props.onBulkSelectAllItems && props.onBulkSelectAllItems();
             setIsAllItemsSelected(true);
           }}
           selectedItems={bulkSelectedItems}
@@ -239,7 +247,7 @@ const Table: TableFunction = <T extends GenericObject>(
           onActionEnd={() => {
             setIsAllItemsSelected(false);
             setBulkSelectedItems([]);
-            props.onBulkActionEnd();
+            props.onBulkActionEnd && props.onBulkActionEnd();
           }}
           itemToString={props.bulkItemToString}
         />
@@ -271,10 +279,11 @@ const Table: TableFunction = <T extends GenericObject>(
                   isBulkActionsEnabled={isBulkActionsEnabled}
                   onAllItemsDeselected={() => {
                     setIsAllItemsSelected(false);
-                    props.onBulkClearAllItems();
+                    props.onBulkClearAllItems && props.onBulkClearAllItems();
                   }}
                   onAllItemsOnThePageSelected={() => {
-                    props.onBulkSelectItemsOnCurrentPage();
+                    props.onBulkSelectItemsOnCurrentPage &&
+                      props.onBulkSelectItemsOnCurrentPage();
                   }}
                   isAllItemsOnThePageSelected={isAllItemsOnThePageSelected}
                   hasTableItems={props.data.length > 0}