From 7470ea8dac5f83e512cdae701007e9e8462d7161 Mon Sep 17 00:00:00 2001
From: RachelElysia <71795832+RachelElysia@users.noreply.github.com>
Date: Thu, 11 May 2023 15:25:56 -0400
Subject: [PATCH] Frontend: Consolidate table button props into objects
 (#11586)

---
 .../DataTable/ActionButton/ActionButton.tsx   |  8 +--
 .../DataTable/DataTable.tests.tsx             |  5 --
 .../TableContainer/DataTable/DataTable.tsx    | 25 +++------
 .../TableContainer/TableContainer.tsx         | 56 +++++++------------
 .../PackQueriesTable/PackQueriesTable.tsx     | 22 +++++---
 .../pages/DashboardPage/cards/MDM/MDM.tsx     |  4 --
 .../pages/DashboardPage/cards/Munki/Munki.tsx |  4 --
 .../OperatingSystems/OperatingSystems.tsx     |  2 -
 .../DashboardPage/cards/Software/Software.tsx |  4 --
 .../cards/Integrations/Integrations.tsx       | 11 ++--
 .../MembersPage/MembersPage.tsx               | 15 +++--
 .../TeamManagementPage/TeamManagementPage.tsx | 13 +++--
 .../components/UsersTable/UsersTable.tsx      |  7 ++-
 .../hosts/ManageHostsPage/ManageHostsPage.tsx | 22 +++++---
 .../components/PacksTable/PacksTable.tsx      | 11 ++--
 .../PoliciesTable/PoliciesTable.tsx           | 11 ++--
 .../PolicyQueriesErrorsTable.tsx              |  9 ++-
 .../PolicyQueriesTable/PolicyQueriesTable.tsx |  9 ++-
 .../components/QueriesTable/QueriesTable.tsx  | 11 ++--
 .../ScheduleTable/ScheduleTable.tsx           | 13 +++--
 .../ManageSoftwarePage/ManageSoftwarePage.tsx |  2 -
 21 files changed, 131 insertions(+), 133 deletions(-)

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()}
                     </div>
                     <div className={"active-selection__inner-right"}>
-                      {primarySelectActionButtonText &&
-                        renderPrimarySelectAction()}
+                      {primarySelectAction && renderPrimarySelectAction()}
                     </div>
                     {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 = ({
               )}
             </span>
             <span className={"controls"}>
-              {!hideActionButton && actionButtonText && (
+              {actionButton && !actionButton.hideButton && (
                 <Button
                   disabled={disableActionButton}
-                  onClick={onActionButtonClick}
-                  variant={actionButtonVariant}
+                  onClick={actionButton.onActionButtonClick}
+                  variant={actionButton.variant}
                   className={`${baseClass}__table-action-button`}
                 >
                   <>
-                    {actionButtonText}
-                    {actionButtonIcon && (
+                    {actionButton.buttonText}
+                    {actionButton.icon && (
                       <img
-                        src={actionButtonIcon}
-                        alt={`${actionButtonText} icon`}
+                        src={actionButton.icon}
+                        alt={`${actionButton.buttonText} icon`}
                       />
                     )}
                   </>
@@ -436,12 +427,7 @@ const TableContainer = ({
                 resultsTitle={resultsTitle}
                 defaultPageSize={pageSize}
                 defaultPageIndex={defaultPageIndex}
-                primarySelectActionButtonVariant={
-                  primarySelectActionButtonVariant
-                }
-                primarySelectActionButtonIcon={primarySelectActionButtonIcon}
-                primarySelectActionButtonText={primarySelectActionButtonText}
-                onPrimarySelectActionClick={onPrimarySelectActionClick}
+                primarySelectAction={primarySelectAction}
                 secondarySelectActions={secondarySelectActions}
                 onSelectSingleRow={onSelectSingleRow}
                 onResultsCountChange={onResultsCountChange}
diff --git a/frontend/components/queries/PackQueriesTable/PackQueriesTable.tsx b/frontend/components/queries/PackQueriesTable/PackQueriesTable.tsx
index f6f81caa82..9c1a245680 100644
--- a/frontend/components/queries/PackQueriesTable/PackQueriesTable.tsx
+++ b/frontend/components/queries/PackQueriesTable/PackQueriesTable.tsx
@@ -90,14 +90,20 @@ const PackQueriesTable = ({
             })
           }
           showMarkAllPages={false}
-          actionButtonText={"Add query"}
-          actionButtonIcon={AddQueryIcon}
-          actionButtonVariant={"text-icon"}
-          onActionButtonClick={onAddPackQuery}
-          onPrimarySelectActionClick={onRemovePackQueries}
-          primarySelectActionButtonVariant="text-icon"
-          primarySelectActionButtonIcon="close"
-          primarySelectActionButtonText={"Remove"}
+          actionButton={{
+            name: "add query",
+            buttonText: "Add query",
+            icon: AddQueryIcon,
+            variant: "text-icon",
+            onActionButtonClick: onAddPackQuery,
+          }}
+          primarySelectAction={{
+            name: "remove query",
+            buttonText: "Remove",
+            icon: "close",
+            variant: "text-icon",
+            onActionButtonClick: onRemovePackQueries,
+          }}
           searchable
           disablePagination
           isAllPagesSelected={false}
diff --git a/frontend/pages/DashboardPage/cards/MDM/MDM.tsx b/frontend/pages/DashboardPage/cards/MDM/MDM.tsx
index 1bce519618..45ce2788fc 100644
--- a/frontend/pages/DashboardPage/cards/MDM/MDM.tsx
+++ b/frontend/pages/DashboardPage/cards/MDM/MDM.tsx
@@ -117,14 +117,12 @@ const Mdm = ({
                   isLoading={isFetching}
                   defaultSortHeader={SOLUTIONS_DEFAULT_SORT_HEADER}
                   defaultSortDirection={DEFAULT_SORT_DIRECTION}
-                  hideActionButton
                   resultsTitle={"MDM"}
                   emptyComponent={EmptyMdmSolutions}
                   showMarkAllPages={false}
                   isAllPagesSelected={false}
                   isClientSidePagination
                   disableCount
-                  disableActionButton
                   pageSize={PAGE_SIZE}
                 />
               )}
@@ -139,13 +137,11 @@ const Mdm = ({
                   isLoading={isFetching}
                   defaultSortHeader={STATUS_DEFAULT_SORT_HEADER}
                   defaultSortDirection={STATUS_DEFAULT_SORT_DIRECTION}
-                  hideActionButton
                   resultsTitle={"MDM"}
                   emptyComponent={EmptyMdmStatus}
                   showMarkAllPages={false}
                   isAllPagesSelected={false}
                   disableCount
-                  disableActionButton
                   disablePagination
                   pageSize={PAGE_SIZE}
                 />
diff --git a/frontend/pages/DashboardPage/cards/Munki/Munki.tsx b/frontend/pages/DashboardPage/cards/Munki/Munki.tsx
index 126d6b3df8..8b1c7b05e4 100644
--- a/frontend/pages/DashboardPage/cards/Munki/Munki.tsx
+++ b/frontend/pages/DashboardPage/cards/Munki/Munki.tsx
@@ -74,7 +74,6 @@ const Munki = ({
                   isLoading={isMacAdminsFetching}
                   defaultSortHeader={DEFAULT_SORT_HEADER}
                   defaultSortDirection={DEFAULT_SORT_DIRECTION}
-                  hideActionButton
                   resultsTitle={"Munki"}
                   emptyComponent={() => (
                     <EmptyTable
@@ -87,7 +86,6 @@ const Munki = ({
                   isAllPagesSelected={false}
                   isClientSidePagination
                   disableCount
-                  disableActionButton
                   disablePagination
                   pageSize={PAGE_SIZE}
                 />
@@ -103,7 +101,6 @@ const Munki = ({
                   isLoading={isMacAdminsFetching}
                   defaultSortHeader={DEFAULT_SORT_HEADER}
                   defaultSortDirection={DEFAULT_SORT_DIRECTION}
-                  hideActionButton
                   resultsTitle={"Munki"}
                   emptyComponent={() => (
                     <EmptyTable
@@ -125,7 +122,6 @@ const Munki = ({
                   isAllPagesSelected={false}
                   isClientSidePagination
                   disableCount
-                  disableActionButton
                   disablePagination
                   pageSize={PAGE_SIZE}
                 />
diff --git a/frontend/pages/DashboardPage/cards/OperatingSystems/OperatingSystems.tsx b/frontend/pages/DashboardPage/cards/OperatingSystems/OperatingSystems.tsx
index bec35da1b7..7106057474 100644
--- a/frontend/pages/DashboardPage/cards/OperatingSystems/OperatingSystems.tsx
+++ b/frontend/pages/DashboardPage/cards/OperatingSystems/OperatingSystems.tsx
@@ -157,13 +157,11 @@ const OperatingSystems = ({
             isLoading={isFetching}
             defaultSortHeader={DEFAULT_SORT_HEADER}
             defaultSortDirection={DEFAULT_SORT_DIRECTION}
-            hideActionButton
             resultsTitle={"Operating systems"}
             emptyComponent={() => EmptyOperatingSystems(selectedPlatform)}
             showMarkAllPages={false}
             isAllPagesSelected={false}
             disableCount
-            disableActionButton
             isClientSidePagination={showPaginationControls}
             disablePagination={!showPaginationControls}
             pageSize={PAGE_SIZE}
diff --git a/frontend/pages/DashboardPage/cards/Software/Software.tsx b/frontend/pages/DashboardPage/cards/Software/Software.tsx
index ac97896bc2..41a9e9cd5b 100644
--- a/frontend/pages/DashboardPage/cards/Software/Software.tsx
+++ b/frontend/pages/DashboardPage/cards/Software/Software.tsx
@@ -94,7 +94,6 @@ const Software = ({
                   isLoading={isSoftwareFetching}
                   defaultSortHeader={SOFTWARE_DEFAULT_SORT_DIRECTION}
                   defaultSortDirection={SOFTWARE_DEFAULT_SORT_DIRECTION}
-                  hideActionButton
                   resultsTitle={"software"}
                   emptyComponent={() => (
                     <EmptySoftwareTable
@@ -105,7 +104,6 @@ const Software = ({
                   showMarkAllPages={false}
                   isAllPagesSelected={false}
                   disableCount
-                  disableActionButton
                   pageSize={SOFTWARE_DEFAULT_PAGE_SIZE}
                   onQueryChange={onQueryChange}
                   disableMultiRowSelect
@@ -123,7 +121,6 @@ const Software = ({
                   isLoading={isSoftwareFetching}
                   defaultSortHeader={SOFTWARE_DEFAULT_SORT_HEADER}
                   defaultSortDirection={SOFTWARE_DEFAULT_SORT_DIRECTION}
-                  hideActionButton
                   resultsTitle={"software"}
                   emptyComponent={() => (
                     <EmptySoftwareTable
@@ -135,7 +132,6 @@ const Software = ({
                   showMarkAllPages={false}
                   isAllPagesSelected={false}
                   disableCount
-                  disableActionButton
                   pageSize={SOFTWARE_DEFAULT_PAGE_SIZE}
                   onQueryChange={onQueryChange}
                   disableMultiRowSelect
diff --git a/frontend/pages/admin/IntegrationsPage/cards/Integrations/Integrations.tsx b/frontend/pages/admin/IntegrationsPage/cards/Integrations/Integrations.tsx
index e32945fbef..1fdf5f3993 100644
--- a/frontend/pages/admin/IntegrationsPage/cards/Integrations/Integrations.tsx
+++ b/frontend/pages/admin/IntegrationsPage/cards/Integrations/Integrations.tsx
@@ -412,10 +412,13 @@ const Integrations = (): JSX.Element => {
           isLoading={isLoadingIntegrations}
           defaultSortHeader={"name"}
           defaultSortDirection={"asc"}
-          actionButtonText={"Add integration"}
-          hideActionButton={!tableData?.length}
-          actionButtonVariant={"brand"}
-          onActionButtonClick={toggleAddIntegrationModal}
+          actionButton={{
+            name: "add integration",
+            buttonText: "Add integration",
+            variant: "brand",
+            onActionButtonClick: toggleAddIntegrationModal,
+            hideButton: !tableData?.length,
+          }}
           resultsTitle={"integrations"}
           emptyComponent={() =>
             EmptyTable({
diff --git a/frontend/pages/admin/TeamManagementPage/TeamDetailsWrapper/MembersPage/MembersPage.tsx b/frontend/pages/admin/TeamManagementPage/TeamDetailsWrapper/MembersPage/MembersPage.tsx
index a4c143e3c5..e4c389cb52 100644
--- a/frontend/pages/admin/TeamManagementPage/TeamDetailsWrapper/MembersPage/MembersPage.tsx
+++ b/frontend/pages/admin/TeamManagementPage/TeamDetailsWrapper/MembersPage/MembersPage.tsx
@@ -436,12 +436,15 @@ const MembersPage = ({ location, router }: IMembersPageProps): JSX.Element => {
           isLoading={isLoadingMembers}
           defaultSortHeader={"name"}
           defaultSortDirection={"asc"}
-          onActionButtonClick={
-            isGlobalAdmin ? toggleAddUserModal : toggleCreateMemberModal
-          }
-          actionButtonText={isGlobalAdmin ? "Add member" : "Create user"}
-          actionButtonVariant={"brand"}
-          hideActionButton={memberIds.length === 0 && searchString === ""}
+          actionButton={{
+            name: isGlobalAdmin ? "add member" : "create user",
+            buttonText: isGlobalAdmin ? "Add member" : "Create user",
+            variant: "brand",
+            onActionButtonClick: isGlobalAdmin
+              ? toggleAddUserModal
+              : toggleCreateMemberModal,
+            hideButton: memberIds.length === 0 && searchString === "",
+          }}
           onQueryChange={({ searchQuery }) => setSearchString(searchQuery)}
           inputPlaceHolder={"Search"}
           emptyComponent={() =>
diff --git a/frontend/pages/admin/TeamManagementPage/TeamManagementPage.tsx b/frontend/pages/admin/TeamManagementPage/TeamManagementPage.tsx
index fbf96a5579..373ffa523f 100644
--- a/frontend/pages/admin/TeamManagementPage/TeamManagementPage.tsx
+++ b/frontend/pages/admin/TeamManagementPage/TeamManagementPage.tsx
@@ -276,12 +276,13 @@ const TeamManagementPage = (): JSX.Element => {
             defaultSortHeader={"name"}
             defaultSortDirection={"asc"}
             inputPlaceHolder={"Search"}
-            actionButtonText={"Create team"}
-            actionButtonVariant={"brand"}
-            hideActionButton={
-              teams && teams.length === 0 && searchString === ""
-            }
-            onActionButtonClick={toggleCreateTeamModal}
+            actionButton={{
+              name: "create team",
+              buttonText: "Create team",
+              variant: "brand",
+              onActionButtonClick: toggleCreateTeamModal,
+              hideButton: teams && teams.length === 0 && searchString === "",
+            }}
             onQueryChange={onQueryChange}
             resultsTitle={"teams"}
             emptyComponent={() =>
diff --git a/frontend/pages/admin/UserManagementPage/components/UsersTable/UsersTable.tsx b/frontend/pages/admin/UserManagementPage/components/UsersTable/UsersTable.tsx
index 244aa84a28..99b732fe3c 100644
--- a/frontend/pages/admin/UserManagementPage/components/UsersTable/UsersTable.tsx
+++ b/frontend/pages/admin/UserManagementPage/components/UsersTable/UsersTable.tsx
@@ -538,8 +538,11 @@ const UsersTable = ({ router }: IUsersTableProps): JSX.Element => {
           defaultSortHeader={"name"}
           defaultSortDirection={"asc"}
           inputPlaceHolder={"Search"}
-          actionButtonText={"Create user"}
-          onActionButtonClick={toggleCreateUserModal}
+          actionButton={{
+            name: "create user",
+            buttonText: "Create user",
+            onActionButtonClick: toggleCreateUserModal,
+          }}
           onQueryChange={onTableQueryChange}
           resultsTitle={"users"}
           emptyComponent={() => EmptyTable(emptyState)}
diff --git a/frontend/pages/hosts/ManageHostsPage/ManageHostsPage.tsx b/frontend/pages/hosts/ManageHostsPage/ManageHostsPage.tsx
index 5df46aba59..f0a186e184 100644
--- a/frontend/pages/hosts/ManageHostsPage/ManageHostsPage.tsx
+++ b/frontend/pages/hosts/ManageHostsPage/ManageHostsPage.tsx
@@ -1448,14 +1448,22 @@ const ManageHostsPage = ({
         defaultPageIndex={page || DEFAULT_PAGE_INDEX}
         defaultSearchQuery={searchQuery}
         pageSize={50}
-        actionButtonText="Edit columns"
-        actionButtonIcon={EditColumnsIcon}
-        actionButtonVariant="text-icon"
         additionalQueries={JSON.stringify(selectedFilters)}
         inputPlaceHolder={HOSTS_SEARCH_BOX_PLACEHOLDER}
-        primarySelectActionButtonText="Delete"
-        primarySelectActionButtonIcon="delete"
-        primarySelectActionButtonVariant={"text-icon"}
+        actionButton={{
+          name: "edit columns",
+          buttonText: "Edit columns",
+          icon: EditColumnsIcon,
+          variant: "text-icon",
+          onActionButtonClick: toggleEditColumnsModal,
+        }}
+        primarySelectAction={{
+          name: "delete host",
+          buttonText: "Delete",
+          icon: "delete",
+          variant: "text-icon",
+          onActionButtonClick: onDeleteHostsClick,
+        }}
         secondarySelectActions={secondarySelectActions}
         showMarkAllPages
         isAllPagesSelected={isAllMatchingHostsSelected}
@@ -1469,8 +1477,6 @@ const ManageHostsPage = ({
           })
         }
         customControl={renderCustomControls}
-        onActionButtonClick={toggleEditColumnsModal}
-        onPrimarySelectActionClick={onDeleteHostsClick}
         onQueryChange={onTableQueryChange}
         toggleAllPagesSelected={toggleAllMatchingHosts}
         resetPageIndex={resetPageIndex}
diff --git a/frontend/pages/packs/ManagePacksPage/components/PacksTable/PacksTable.tsx b/frontend/pages/packs/ManagePacksPage/components/PacksTable/PacksTable.tsx
index e2b356b79b..a377a8922c 100644
--- a/frontend/pages/packs/ManagePacksPage/components/PacksTable/PacksTable.tsx
+++ b/frontend/pages/packs/ManagePacksPage/components/PacksTable/PacksTable.tsx
@@ -115,10 +115,13 @@ const PacksTable = ({
         inputPlaceHolder="Search by name"
         searchable={packs && packs.length > 0}
         disablePagination
-        onPrimarySelectActionClick={onDeletePackClick}
-        primarySelectActionButtonVariant="text-icon"
-        primarySelectActionButtonIcon="delete"
-        primarySelectActionButtonText={"Delete"}
+        primarySelectAction={{
+          name: "delete pack",
+          buttonText: "Delete",
+          icon: "delete",
+          variant: "text-icon",
+          onActionButtonClick: onDeletePackClick,
+        }}
         secondarySelectActions={secondarySelectActions}
         emptyComponent={() =>
           EmptyTable({
diff --git a/frontend/pages/policies/ManagePoliciesPage/components/PoliciesTable/PoliciesTable.tsx b/frontend/pages/policies/ManagePoliciesPage/components/PoliciesTable/PoliciesTable.tsx
index ab32667f84..baacec1c27 100644
--- a/frontend/pages/policies/ManagePoliciesPage/components/PoliciesTable/PoliciesTable.tsx
+++ b/frontend/pages/policies/ManagePoliciesPage/components/PoliciesTable/PoliciesTable.tsx
@@ -145,10 +145,13 @@ const PoliciesTable = ({
           manualSortBy
           showMarkAllPages={false}
           isAllPagesSelected={false}
-          onPrimarySelectActionClick={onDeletePolicyClick}
-          primarySelectActionButtonVariant="text-icon"
-          primarySelectActionButtonIcon="delete"
-          primarySelectActionButtonText={"Delete"}
+          primarySelectAction={{
+            name: "delete policy",
+            buttonText: "Delete",
+            icon: "delete",
+            variant: "text-icon",
+            onActionButtonClick: onDeletePolicyClick,
+          }}
           emptyComponent={() =>
             EmptyTable({
               iconName: emptyState().iconName,
diff --git a/frontend/pages/policies/PolicyPage/components/PolicyQueriesErrorsTable/PolicyQueriesErrorsTable.tsx b/frontend/pages/policies/PolicyPage/components/PolicyQueriesErrorsTable/PolicyQueriesErrorsTable.tsx
index 99d437efc7..c0887dc46a 100644
--- a/frontend/pages/policies/PolicyPage/components/PolicyQueriesErrorsTable/PolicyQueriesErrorsTable.tsx
+++ b/frontend/pages/policies/PolicyPage/components/PolicyQueriesErrorsTable/PolicyQueriesErrorsTable.tsx
@@ -49,9 +49,12 @@ const PoliciesTable = ({
         showMarkAllPages={false}
         isAllPagesSelected={false}
         disablePagination
-        primarySelectActionButtonVariant="text-icon"
-        primarySelectActionButtonIcon="delete"
-        primarySelectActionButtonText={"Delete"}
+        primarySelectAction={{
+          name: "delete policy",
+          buttonText: "Delete",
+          icon: "delete",
+          variant: "text-icon",
+        }}
         emptyComponent={NoPolicyQueries}
         onQueryChange={noop}
         disableCount
diff --git a/frontend/pages/policies/PolicyPage/components/PolicyQueriesTable/PolicyQueriesTable.tsx b/frontend/pages/policies/PolicyPage/components/PolicyQueriesTable/PolicyQueriesTable.tsx
index 49d9c7f6c2..1bbc755f0c 100644
--- a/frontend/pages/policies/PolicyPage/components/PolicyQueriesTable/PolicyQueriesTable.tsx
+++ b/frontend/pages/policies/PolicyPage/components/PolicyQueriesTable/PolicyQueriesTable.tsx
@@ -48,9 +48,12 @@ const PoliciesTable = ({
         showMarkAllPages={false}
         isAllPagesSelected={false}
         isClientSidePagination
-        primarySelectActionButtonVariant="text-icon"
-        primarySelectActionButtonIcon="delete"
-        primarySelectActionButtonText={"Delete"}
+        primarySelectAction={{
+          name: "delete policy",
+          buttonText: "Delete",
+          icon: "delete",
+          variant: "text-icon",
+        }}
         emptyComponent={NoPolicyQueries}
         onQueryChange={noop}
         disableCount
diff --git a/frontend/pages/queries/ManageQueriesPage/components/QueriesTable/QueriesTable.tsx b/frontend/pages/queries/ManageQueriesPage/components/QueriesTable/QueriesTable.tsx
index 85133e503e..e02dc64b3d 100644
--- a/frontend/pages/queries/ManageQueriesPage/components/QueriesTable/QueriesTable.tsx
+++ b/frontend/pages/queries/ManageQueriesPage/components/QueriesTable/QueriesTable.tsx
@@ -301,10 +301,13 @@ const QueriesTable = ({
         isClientSidePagination
         onClientSidePaginationChange={onClientSidePaginationChange}
         isClientSideFilter
-        onPrimarySelectActionClick={onDeleteQueryClick}
-        primarySelectActionButtonVariant="text-icon"
-        primarySelectActionButtonIcon="delete"
-        primarySelectActionButtonText="Delete"
+        primarySelectAction={{
+          name: "delete query",
+          buttonText: "Delete",
+          icon: "delete",
+          variant: "text-icon",
+          onActionButtonClick: onDeleteQueryClick,
+        }}
         selectedDropdownFilter={platform}
       />
     </div>
diff --git a/frontend/pages/schedule/ManageSchedulePage/components/ScheduleTable/ScheduleTable.tsx b/frontend/pages/schedule/ManageSchedulePage/components/ScheduleTable/ScheduleTable.tsx
index 8fdb13916f..65f37cee31 100644
--- a/frontend/pages/schedule/ManageSchedulePage/components/ScheduleTable/ScheduleTable.tsx
+++ b/frontend/pages/schedule/ManageSchedulePage/components/ScheduleTable/ScheduleTable.tsx
@@ -31,7 +31,7 @@ const TAGGED_TEMPLATES = {
 };
 interface IScheduleTableProps {
   router: InjectedRouter; // v3
-  onRemoveScheduledQueryClick?: (selectIds: number[]) => void;
+  onRemoveScheduledQueryClick?: (selectedIds: number[]) => void;
   onEditScheduledQueryClick?: (selectedQuery: IEditScheduledQuery) => void;
   onShowQueryClick?: (selectedQuery: IEditScheduledQuery) => void;
   allScheduledQueriesList: IScheduledQuery[];
@@ -198,10 +198,13 @@ const ScheduleTable = ({
         isAllPagesSelected={false}
         inputPlaceHolder="Search"
         searchable={false}
-        onPrimarySelectActionClick={onRemoveScheduledQueryClick}
-        primarySelectActionButtonVariant="text-icon"
-        primarySelectActionButtonIcon="remove"
-        primarySelectActionButtonText={"Remove"}
+        primarySelectAction={{
+          name: "remove scheduled query",
+          buttonText: "Remove",
+          icon: "remove",
+          variant: "text-icon",
+          onActionButtonClick: onRemoveScheduledQueryClick,
+        }}
         emptyComponent={() =>
           EmptyTable({
             iconName: emptyState().iconName,
diff --git a/frontend/pages/software/ManageSoftwarePage/ManageSoftwarePage.tsx b/frontend/pages/software/ManageSoftwarePage/ManageSoftwarePage.tsx
index 7de404011b..f17fe1ca4c 100644
--- a/frontend/pages/software/ManageSoftwarePage/ManageSoftwarePage.tsx
+++ b/frontend/pages/software/ManageSoftwarePage/ManageSoftwarePage.tsx
@@ -692,8 +692,6 @@ const ManageSoftwarePage = ({
               stackControls
               renderCount={renderSoftwareCount}
               renderFooter={renderTableFooter}
-              disableActionButton
-              hideActionButton
               disableMultiRowSelect
               onSelectSingleRow={handleRowSelect}
             />