diff --git a/frontend/components/TableContainer/DataTable/ActionButton/ActionButton.tsx b/frontend/components/TableContainer/DataTable/ActionButton/ActionButton.tsx
index 0466c52158..843c18850d 100644
--- a/frontend/components/TableContainer/DataTable/ActionButton/ActionButton.tsx
+++ b/frontend/components/TableContainer/DataTable/ActionButton/ActionButton.tsx
@@ -1,5 +1,5 @@
import React, { useCallback } from "react";
-import { kebabCase } from "lodash";
+import { kebabCase, noop } from "lodash";
import PremiumFeatureIconWithTooltip from "components/PremiumFeatureIconWithTooltip";
import { ButtonVariant } from "components/buttons/Button/Button";
@@ -13,8 +13,8 @@ import TransferIcon from "../../../../../assets/images/icon-action-transfer-16x1
const baseClass = "action-button";
export interface IActionButtonProps {
name: string;
- buttonText: string;
- onActionButtonClick: (ids: number[]) => void | undefined;
+ buttonText: string | ((targetIds: number[]) => string);
+ onActionButtonClick?: (ids: number[]) => void;
targetIds?: number[]; // TODO figure out undefined case
variant?: ButtonVariant;
hideButton?: boolean | ((targetIds: number[]) => boolean);
@@ -46,7 +46,7 @@ const ActionButton = (buttonProps: IActionButtonProps): JSX.Element | null => {
iconPosition,
indicatePremiumFeature,
} = buttonProps;
- const onButtonClick = useActionCallback(onActionButtonClick);
+ const onButtonClick = useActionCallback(onActionButtonClick || noop);
const iconLink = ((iconProp) => {
// check if using pre-defined short-hand otherwise otherwise return the prop
diff --git a/frontend/components/TableContainer/DataTable/DataTable.tests.tsx b/frontend/components/TableContainer/DataTable/DataTable.tests.tsx
index 0f7f991e5a..dae0653945 100644
--- a/frontend/components/TableContainer/DataTable/DataTable.tests.tsx
+++ b/frontend/components/TableContainer/DataTable/DataTable.tests.tsx
@@ -31,7 +31,6 @@ describe("DataTable - component", () => {
resultsTitle="users"
defaultPageSize={DEFAULT_PAGE_SIZE}
disableMultiRowSelect={false}
- onPrimarySelectActionClick={noop}
/>
);
@@ -74,7 +73,6 @@ describe("DataTable - component", () => {
resultsTitle="users"
defaultPageSize={DEFAULT_PAGE_SIZE}
disableMultiRowSelect={false}
- onPrimarySelectActionClick={noop}
/>
);
@@ -101,7 +99,6 @@ describe("DataTable - component", () => {
resultsTitle="users"
defaultPageSize={DEFAULT_PAGE_SIZE}
disableMultiRowSelect={false}
- onPrimarySelectActionClick={noop}
/>
);
@@ -136,7 +133,6 @@ describe("DataTable - component", () => {
resultsTitle="users"
defaultPageSize={DEFAULT_PAGE_SIZE}
disableMultiRowSelect={false}
- onPrimarySelectActionClick={noop}
/>
);
@@ -160,7 +156,6 @@ describe("DataTable - component", () => {
resultsTitle="users"
defaultPageSize={DEFAULT_PAGE_SIZE}
disableMultiRowSelect={false}
- onPrimarySelectActionClick={noop}
/>
);
diff --git a/frontend/components/TableContainer/DataTable/DataTable.tsx b/frontend/components/TableContainer/DataTable/DataTable.tsx
index ceaf7edfc9..e0c77a57fe 100644
--- a/frontend/components/TableContainer/DataTable/DataTable.tsx
+++ b/frontend/components/TableContainer/DataTable/DataTable.tsx
@@ -48,10 +48,7 @@ interface IDataTableProps {
resultsTitle: string;
defaultPageSize: number;
defaultPageIndex?: number;
- primarySelectActionButtonVariant?: ButtonVariant;
- primarySelectActionButtonIcon?: string;
- primarySelectActionButtonText?: string | ((targetIds: number[]) => string);
- onPrimarySelectActionClick: any; // figure out type
+ primarySelectAction?: IActionButtonProps;
secondarySelectActions?: IActionButtonProps[];
isClientSidePagination?: boolean;
onClientSidePaginationChange?: (pageIndex: number) => void; // Used to set URL to correct path and include page query param
@@ -91,10 +88,7 @@ const DataTable = ({
resultsTitle,
defaultPageSize,
defaultPageIndex,
- primarySelectActionButtonIcon,
- primarySelectActionButtonVariant,
- onPrimarySelectActionClick,
- primarySelectActionButtonText,
+ primarySelectAction,
secondarySelectActions,
isClientSidePagination,
onClientSidePaginationChange,
@@ -403,18 +397,18 @@ const DataTable = ({
const renderPrimarySelectAction = (): JSX.Element | null => {
const targetIds = selectedFlatRows.map((row: any) => row.original.id);
const buttonText =
- typeof primarySelectActionButtonText === "function"
- ? primarySelectActionButtonText(targetIds)
- : primarySelectActionButtonText;
+ typeof primarySelectAction?.buttonText === "function"
+ ? primarySelectAction?.buttonText(targetIds)
+ : primarySelectAction?.buttonText;
const name = buttonText ? kebabCase(buttonText) : "primary-select-action";
const actionProps = {
name,
buttonText: buttonText || "",
- onActionButtonClick: onPrimarySelectActionClick,
+ onActionButtonClick: primarySelectAction?.onActionButtonClick || noop,
targetIds,
- variant: primarySelectActionButtonVariant,
- icon: primarySelectActionButtonIcon,
+ variant: primarySelectAction?.variant,
+ icon: primarySelectAction?.icon,
};
return !buttonText ? null : renderActionButton(actionProps);
@@ -482,8 +476,7 @@ const DataTable = ({
{secondarySelectActions && renderSecondarySelectActions()}
- {primarySelectActionButtonText &&
- renderPrimarySelectAction()}
+ {primarySelectAction && renderPrimarySelectAction()}
{toggleAllPagesSelected && renderAreAllSelected()}
{shouldRenderToggleAllPages && (
diff --git a/frontend/components/TableContainer/TableContainer.tsx b/frontend/components/TableContainer/TableContainer.tsx
index f5a1c2618c..bf0424f11a 100644
--- a/frontend/components/TableContainer/TableContainer.tsx
+++ b/frontend/components/TableContainer/TableContainer.tsx
@@ -36,10 +36,8 @@ interface ITableContainerProps {
defaultSortDirection?: string;
defaultSearchQuery?: string;
defaultPageIndex?: number;
- actionButtonText?: string;
- actionButtonIcon?: string;
- actionButtonVariant?: ButtonVariant;
- hideActionButton?: boolean;
+ /** Button visible above the table container next to search bar */
+ actionButton?: IActionButtonProps;
inputPlaceHolder?: string;
disableActionButton?: boolean;
disableMultiRowSelect?: boolean;
@@ -59,26 +57,26 @@ interface ITableContainerProps {
// The old page controls for server-side pagination render a no results screen
// with a back button. This fix instead disables the next button in that case.
disableCount?: boolean;
- primarySelectActionButtonVariant?: ButtonVariant;
- primarySelectActionButtonIcon?: string;
- primarySelectActionButtonText?: string | ((targetIds: number[]) => string);
- secondarySelectActions?: IActionButtonProps[]; // TODO create table actions interface
+ /** Main button after selecting a row */
+ primarySelectAction?: IActionButtonProps;
+ /** Secondary button/s after selecting a row */
+ secondarySelectActions?: IActionButtonProps[]; // TODO: Combine with primarySelectAction as these are all rendered in the same spot
filteredCount?: number;
searchToolTipText?: string;
searchQueryColumn?: string;
selectedDropdownFilter?: string;
isClientSidePagination?: boolean;
- onClientSidePaginationChange?: (pageIndex: number) => void; // Used to set URL to correct path and include page query param
+ /** Used to set URL to correct path and include page query param */
+ onClientSidePaginationChange?: (pageIndex: number) => void;
isClientSideFilter?: boolean;
- isMultiColumnFilter?: boolean; // isMultiColumnFilter is used to preserve the table headers
- // in lieu of displaying the empty component when client-side filtering yields zero results
+ /** isMultiColumnFilter is used to preserve the table headers
+ in lieu of displaying the empty component when client-side filtering yields zero results */
+ isMultiColumnFilter?: boolean;
disableHighlightOnHover?: boolean;
pageSize?: number;
- onActionButtonClick?: () => void;
onQueryChange?:
| ((queryData: ITableQueryData) => void)
| ((queryData: ITableQueryData) => number);
- onPrimarySelectActionClick?: (selectedItemIds: number[]) => void;
customControl?: () => JSX.Element;
stackControls?: boolean;
onSelectSingleRow?: (value: Row | IRowProps) => void;
@@ -113,10 +111,7 @@ const TableContainer = ({
className,
disableActionButton,
disableMultiRowSelect = false,
- actionButtonText,
- actionButtonIcon,
- actionButtonVariant = "brand",
- hideActionButton,
+ actionButton,
showMarkAllPages,
isAllPagesSelected,
toggleAllPagesSelected,
@@ -125,9 +120,7 @@ const TableContainer = ({
disablePagination,
disableNextPage,
disableCount,
- primarySelectActionButtonVariant = "brand",
- primarySelectActionButtonIcon,
- primarySelectActionButtonText,
+ primarySelectAction,
secondarySelectActions,
filteredCount,
searchToolTipText,
@@ -139,9 +132,7 @@ const TableContainer = ({
pageSize = DEFAULT_PAGE_SIZE,
selectedDropdownFilter,
searchQueryColumn,
- onActionButtonClick,
onQueryChange,
- onPrimarySelectActionClick,
customControl,
stackControls,
onSelectSingleRow,
@@ -333,19 +324,19 @@ const TableContainer = ({
)}
- {!hideActionButton && actionButtonText && (
+ {actionButton && !actionButton.hideButton && (