From 21c9cb69adf67ba42c14cbc9489c889ba8acecaf Mon Sep 17 00:00:00 2001
From: Fernando Chavez <fernando.chavez@strapi.io>
Date: Wed, 26 Apr 2023 11:57:05 +0200
Subject: [PATCH 1/7] Add a new bulkActionsBar prop to DynamicTable from
 helper-plugins and changes to the table on content manager to have the new
 bulk publish buttons

---
 .../DynamicTable/BulkActionsBar/index.js      | 85 +++++++++++++++++++
 .../components/DynamicTable/index.js          | 12 ++-
 .../src/components/DynamicTable/index.js      | 59 ++++++++-----
 3 files changed, 131 insertions(+), 25 deletions(-)
 create mode 100644 packages/core/admin/admin/src/content-manager/components/DynamicTable/BulkActionsBar/index.js

diff --git a/packages/core/admin/admin/src/content-manager/components/DynamicTable/BulkActionsBar/index.js b/packages/core/admin/admin/src/content-manager/components/DynamicTable/BulkActionsBar/index.js
new file mode 100644
index 0000000000..c06661b702
--- /dev/null
+++ b/packages/core/admin/admin/src/content-manager/components/DynamicTable/BulkActionsBar/index.js
@@ -0,0 +1,85 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { Button } from '@strapi/design-system';
+import { useIntl } from 'react-intl';
+import ConfirmDialogDeleteAll from '../ConfirmDialogDeleteAll';
+import { useTracking } from '@strapi/helper-plugin';
+
+const BulkActionsBar = ({
+  showPublish,
+  showDelete,
+  onConfirmDeleteAll,
+  selectedEntries,
+  clearSelectedEntries,
+}) => {
+  const { formatMessage } = useIntl();
+  const { trackUsage } = useTracking();
+
+  const [isConfirmButtonLoading, setIsConfirmButtonLoading] = useState(false);
+  const [showConfirmDeleteAll, setShowConfirmDeleteAll] = useState(false);
+
+  const handleToggleShowDeleteAllModal = () => {
+    if (!showConfirmDeleteAll) {
+      trackUsage('willBulkDeleteEntries');
+    }
+
+    setShowConfirmDeleteAll((prev) => !prev);
+  };
+
+  const handleConfirmDeleteAll = async () => {
+    try {
+      setIsConfirmButtonLoading(true);
+      await onConfirmDeleteAll(selectedEntries);
+      handleToggleShowDeleteAllModal();
+      clearSelectedEntries();
+      setIsConfirmButtonLoading(false);
+    } catch (err) {
+      setIsConfirmButtonLoading(false);
+      handleToggleShowDeleteAllModal();
+    }
+  };
+
+  return (
+    <>
+      {showPublish && (
+        <>
+          <Button variant="tertiary">
+            {formatMessage({ id: 'app.utils.publish', defaultMessage: 'Publish' })}
+          </Button>
+          <Button variant="tertiary">
+            {formatMessage({ id: 'app.utils.unpublish', defaultMessage: 'Unpublish' })}
+          </Button>
+        </>
+      )}
+      {showDelete && (
+        <>
+          <Button variant="danger-light" onClick={handleToggleShowDeleteAllModal}>
+            {formatMessage({ id: 'global.delete', defaultMessage: 'Delete' })}
+          </Button>
+          <ConfirmDialogDeleteAll
+            isOpen={showConfirmDeleteAll}
+            onToggleDialog={handleToggleShowDeleteAllModal}
+            isConfirmButtonLoading={isConfirmButtonLoading}
+            onConfirm={handleConfirmDeleteAll}
+          />
+        </>
+      )}
+    </>
+  );
+};
+
+BulkActionsBar.defaultProps = {
+  showPublishUnpublish: false,
+  showDelete: false,
+  onConfirmDeleteAll: () => {},
+};
+
+BulkActionsBar.propTypes = {
+  showPublishUnpublish: PropTypes.bool,
+  showDelete: PropTypes.bool,
+  onConfirmDeleteAll: PropTypes.func,
+  selectedEntries: PropTypes.array.isRequired,
+  clearSelectedEntries: PropTypes.func.isRequired,
+};
+
+export default BulkActionsBar;
diff --git a/packages/core/admin/admin/src/content-manager/components/DynamicTable/index.js b/packages/core/admin/admin/src/content-manager/components/DynamicTable/index.js
index 721dbd8fb5..77bcd4155a 100644
--- a/packages/core/admin/admin/src/content-manager/components/DynamicTable/index.js
+++ b/packages/core/admin/admin/src/content-manager/components/DynamicTable/index.js
@@ -9,9 +9,9 @@ import { INJECT_COLUMN_IN_TABLE } from '../../../exposedHooks';
 import { selectDisplayedHeaders } from '../../pages/ListView/selectors';
 import { getTrad } from '../../utils';
 import TableRows from './TableRows';
-import ConfirmDialogDeleteAll from './ConfirmDialogDeleteAll';
 import ConfirmDialogDelete from './ConfirmDialogDelete';
 import { PublicationState } from './CellContent/PublicationState/PublicationState';
+import BulkActionsBar from './BulkActionsBar';
 
 const DynamicTable = ({
   canCreate,
@@ -89,17 +89,23 @@ const DynamicTable = ({
 
   return (
     <Table
-      components={{ ConfirmDialogDelete, ConfirmDialogDeleteAll }}
+      components={{ ConfirmDialogDelete }}
       contentType={contentTypeName}
       action={action}
       isLoading={isLoading}
       headers={tableHeaders}
       onConfirmDelete={onConfirmDelete}
-      onConfirmDeleteAll={onConfirmDeleteAll}
       onOpenDeleteAllModalTrackedEvent="willBulkDeleteEntries"
       rows={rows}
       withBulkActions
       withMainAction={canDelete && isBulkable}
+      bulkActionsBar={
+        <BulkActionsBar
+          showPublish={hasDraftAndPublish}
+          showDelete={canDelete}
+          onConfirmDeleteAll={onConfirmDeleteAll}
+        />
+      }
     >
       <TableRows
         canCreate={canCreate}
diff --git a/packages/core/helper-plugin/src/components/DynamicTable/index.js b/packages/core/helper-plugin/src/components/DynamicTable/index.js
index c77a66f8e4..ede73e22a3 100644
--- a/packages/core/helper-plugin/src/components/DynamicTable/index.js
+++ b/packages/core/helper-plugin/src/components/DynamicTable/index.js
@@ -32,9 +32,10 @@ const Table = ({
   rows,
   withBulkActions,
   withMainAction,
+  bulkActionsBar,
   ...rest
 }) => {
-  const [entriesToDelete, setEntriesToDelete] = useState([]);
+  const [selectedEntries, setSelectedEntries] = useState([]);
   const [showConfirmDeleteAll, setShowConfirmDeleteAll] = useState(false);
   const [showConfirmDelete, setShowConfirmDelete] = useState(false);
   const [isConfirmButtonLoading, setIsConfirmButtonLoading] = useState(false);
@@ -44,7 +45,7 @@ const Table = ({
   const ROW_COUNT = rows.length + 1;
   const COL_COUNT = headers.length + (withBulkActions ? 1 : 0) + (withMainAction ? 1 : 0);
   const hasFilters = query?.filters !== undefined;
-  const areAllEntriesSelected = entriesToDelete.length === rows.length && rows.length > 0;
+  const areAllEntriesSelected = selectedEntries.length === rows.length && rows.length > 0;
 
   const content = hasFilters
     ? {
@@ -57,9 +58,9 @@ const Table = ({
   const handleConfirmDeleteAll = async () => {
     try {
       setIsConfirmButtonLoading(true);
-      await onConfirmDeleteAll(entriesToDelete);
+      await onConfirmDeleteAll(selectedEntries);
       handleToggleConfirmDeleteAll();
-      setEntriesToDelete([]);
+      setSelectedEntries([]);
       setIsConfirmButtonLoading(false);
     } catch (err) {
       setIsConfirmButtonLoading(false);
@@ -71,7 +72,7 @@ const Table = ({
     try {
       setIsConfirmButtonLoading(true);
       // await onConfirmDeleteAll(entriesToDelete);
-      await onConfirmDelete(entriesToDelete[0]);
+      await onConfirmDelete(selectedEntries[0]);
       handleToggleConfirmDelete();
       setIsConfirmButtonLoading(false);
     } catch (err) {
@@ -82,9 +83,9 @@ const Table = ({
 
   const handleSelectAll = () => {
     if (!areAllEntriesSelected) {
-      setEntriesToDelete(rows.map((row) => row.id));
+      setSelectedEntries(rows.map((row) => row.id));
     } else {
-      setEntriesToDelete([]);
+      setSelectedEntries([]);
     }
   };
 
@@ -98,19 +99,19 @@ const Table = ({
 
   const handleToggleConfirmDelete = () => {
     if (showConfirmDelete) {
-      setEntriesToDelete([]);
+      setSelectedEntries([]);
     }
     setShowConfirmDelete((prev) => !prev);
   };
 
   const handleClickDelete = (id) => {
-    setEntriesToDelete([id]);
+    setSelectedEntries([id]);
 
     handleToggleConfirmDelete();
   };
 
   const handleSelectRow = ({ name, value }) => {
-    setEntriesToDelete((prev) => {
+    setSelectedEntries((prev) => {
       if (value) {
         return prev.concat(name);
       }
@@ -119,6 +120,10 @@ const Table = ({
     });
   };
 
+  const clearSelectedEntries = () => {
+    setSelectedEntries([]);
+  };
+
   const ConfirmDeleteAllComponent = components?.ConfirmDialogDeleteAll
     ? components.ConfirmDialogDeleteAll
     : ConfirmDialog;
@@ -129,7 +134,7 @@ const Table = ({
 
   return (
     <>
-      {entriesToDelete.length > 0 && (
+      {selectedEntries.length > 0 && (
         <Box>
           <Box paddingBottom={4}>
             <Flex justifyContent="space-between">
@@ -140,17 +145,25 @@ const Table = ({
                       id: 'content-manager.components.TableDelete.label',
                       defaultMessage: '{number, plural, one {# entry} other {# entries}} selected',
                     },
-                    { number: entriesToDelete.length }
+                    { number: selectedEntries.length }
                   )}
                 </Typography>
-                <Button
-                  onClick={handleToggleConfirmDeleteAll}
-                  startIcon={<Trash />}
-                  size="L"
-                  variant="danger-light"
-                >
-                  {formatMessage({ id: 'global.delete', defaultMessage: 'Delete' })}
-                </Button>
+                {bulkActionsBar ? (
+                  React.cloneElement(bulkActionsBar, {
+                    ...bulkActionsBar.props,
+                    selectedEntries,
+                    clearSelectedEntries,
+                  })
+                ) : (
+                  <Button
+                    onClick={handleToggleConfirmDeleteAll}
+                    startIcon={<Trash />}
+                    size="L"
+                    variant="danger-light"
+                  >
+                    {formatMessage({ id: 'global.delete', defaultMessage: 'Delete' })}
+                  </Button>
+                )}
               </BlockActions>
             </Flex>
           </Box>
@@ -159,7 +172,7 @@ const Table = ({
       <TableCompo colCount={COL_COUNT} rowCount={ROW_COUNT} footer={footer}>
         <TableHead
           areAllEntriesSelected={areAllEntriesSelected}
-          entriesToDelete={entriesToDelete}
+          entriesToDelete={selectedEntries}
           headers={headers}
           onSelectAll={handleSelectAll}
           withMainAction={withMainAction}
@@ -175,7 +188,7 @@ const Table = ({
         ) : (
           Children.toArray(children).map((child) =>
             cloneElement(child, {
-              entriesToDelete,
+              entriesToDelete: selectedEntries,
               onClickDelete: handleClickDelete,
               onSelectRow: handleSelectRow,
               headers,
@@ -219,6 +232,7 @@ Table.defaultProps = {
   rows: [],
   withBulkActions: false,
   withMainAction: false,
+  bulkActionsBar: undefined,
 };
 
 Table.propTypes = {
@@ -248,6 +262,7 @@ Table.propTypes = {
   rows: PropTypes.array,
   withBulkActions: PropTypes.bool,
   withMainAction: PropTypes.bool,
+  bulkActionsBar: PropTypes.node,
 };
 
 export default Table;

From e0e272fedeebc5b186b3601f77b9bd0e79d0bb0f Mon Sep 17 00:00:00 2001
From: Fernando Chavez <fernando.chavez@strapi.io>
Date: Wed, 26 Apr 2023 12:10:49 +0200
Subject: [PATCH 2/7] Send the canPublish permissions to the DynamicTable on
 content manager

---
 .../admin/src/content-manager/components/DynamicTable/index.js | 3 ++-
 .../admin/admin/src/content-manager/pages/ListView/index.js    | 3 +++
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/core/admin/admin/src/content-manager/components/DynamicTable/index.js b/packages/core/admin/admin/src/content-manager/components/DynamicTable/index.js
index 77bcd4155a..863ded72f0 100644
--- a/packages/core/admin/admin/src/content-manager/components/DynamicTable/index.js
+++ b/packages/core/admin/admin/src/content-manager/components/DynamicTable/index.js
@@ -16,6 +16,7 @@ import BulkActionsBar from './BulkActionsBar';
 const DynamicTable = ({
   canCreate,
   canDelete,
+  canPublish,
   contentTypeName,
   action,
   isBulkable,
@@ -101,7 +102,7 @@ const DynamicTable = ({
       withMainAction={canDelete && isBulkable}
       bulkActionsBar={
         <BulkActionsBar
-          showPublish={hasDraftAndPublish}
+          showPublish={canPublish && hasDraftAndPublish}
           showDelete={canDelete}
           onConfirmDeleteAll={onConfirmDeleteAll}
         />
diff --git a/packages/core/admin/admin/src/content-manager/pages/ListView/index.js b/packages/core/admin/admin/src/content-manager/pages/ListView/index.js
index c60295aba1..0ab7b436dd 100644
--- a/packages/core/admin/admin/src/content-manager/pages/ListView/index.js
+++ b/packages/core/admin/admin/src/content-manager/pages/ListView/index.js
@@ -64,6 +64,7 @@ function ListView({
   canCreate,
   canDelete,
   canRead,
+  canPublish,
   data,
   getData,
   getDataSucceeded,
@@ -331,6 +332,7 @@ function ListView({
             <DynamicTable
               canCreate={canCreate}
               canDelete={canDelete}
+              canPublish={canPublish}
               contentTypeName={headerLayoutTitle}
               onConfirmDeleteAll={handleConfirmDeleteAllData}
               onConfirmDelete={handleConfirmDeleteData}
@@ -355,6 +357,7 @@ ListView.propTypes = {
   canCreate: PropTypes.bool.isRequired,
   canDelete: PropTypes.bool.isRequired,
   canRead: PropTypes.bool.isRequired,
+  canPublish: PropTypes.bool.isRequired,
   data: PropTypes.array.isRequired,
   layout: PropTypes.exact({
     components: PropTypes.object.isRequired,

From ace5e1bef364d4c8c63a2f810bd6b84d04059163 Mon Sep 17 00:00:00 2001
From: Fernando Chavez <fernando.chavez@strapi.io>
Date: Wed, 26 Apr 2023 12:20:38 +0200
Subject: [PATCH 3/7] add canPublish to conditions to show the bulk buttons

---
 .../admin/src/content-manager/components/DynamicTable/index.js  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/core/admin/admin/src/content-manager/components/DynamicTable/index.js b/packages/core/admin/admin/src/content-manager/components/DynamicTable/index.js
index 863ded72f0..b6d36f9b21 100644
--- a/packages/core/admin/admin/src/content-manager/components/DynamicTable/index.js
+++ b/packages/core/admin/admin/src/content-manager/components/DynamicTable/index.js
@@ -99,7 +99,7 @@ const DynamicTable = ({
       onOpenDeleteAllModalTrackedEvent="willBulkDeleteEntries"
       rows={rows}
       withBulkActions
-      withMainAction={canDelete && isBulkable}
+      withMainAction={(canDelete || canPublish) && isBulkable}
       bulkActionsBar={
         <BulkActionsBar
           showPublish={canPublish && hasDraftAndPublish}

From 93497de25af7cf40e9856729428f02d9e78bb840 Mon Sep 17 00:00:00 2001
From: Fernando Chavez <fernando.chavez@strapi.io>
Date: Wed, 26 Apr 2023 14:22:29 +0200
Subject: [PATCH 4/7] change cloneElement for a render function on
 helper-plugin's dynamicTable

---
 .../components/DynamicTable/index.js               |  6 ++++--
 .../src/components/DynamicTable/index.js           | 14 +++++---------
 2 files changed, 9 insertions(+), 11 deletions(-)

diff --git a/packages/core/admin/admin/src/content-manager/components/DynamicTable/index.js b/packages/core/admin/admin/src/content-manager/components/DynamicTable/index.js
index b6d36f9b21..c684d508d3 100644
--- a/packages/core/admin/admin/src/content-manager/components/DynamicTable/index.js
+++ b/packages/core/admin/admin/src/content-manager/components/DynamicTable/index.js
@@ -100,13 +100,15 @@ const DynamicTable = ({
       rows={rows}
       withBulkActions
       withMainAction={(canDelete || canPublish) && isBulkable}
-      bulkActionsBar={
+      renderBulkActionsBar={({ selectedEntries, clearSelectedEntries }) => (
         <BulkActionsBar
           showPublish={canPublish && hasDraftAndPublish}
           showDelete={canDelete}
           onConfirmDeleteAll={onConfirmDeleteAll}
+          selectedEntries={selectedEntries}
+          clearSelectedEntries={clearSelectedEntries}
         />
-      }
+      )}
     >
       <TableRows
         canCreate={canCreate}
diff --git a/packages/core/helper-plugin/src/components/DynamicTable/index.js b/packages/core/helper-plugin/src/components/DynamicTable/index.js
index ede73e22a3..d7b9d93089 100644
--- a/packages/core/helper-plugin/src/components/DynamicTable/index.js
+++ b/packages/core/helper-plugin/src/components/DynamicTable/index.js
@@ -32,7 +32,7 @@ const Table = ({
   rows,
   withBulkActions,
   withMainAction,
-  bulkActionsBar,
+  renderBulkActionsBar,
   ...rest
 }) => {
   const [selectedEntries, setSelectedEntries] = useState([]);
@@ -148,12 +148,8 @@ const Table = ({
                     { number: selectedEntries.length }
                   )}
                 </Typography>
-                {bulkActionsBar ? (
-                  React.cloneElement(bulkActionsBar, {
-                    ...bulkActionsBar.props,
-                    selectedEntries,
-                    clearSelectedEntries,
-                  })
+                {renderBulkActionsBar ? (
+                  renderBulkActionsBar({ selectedEntries, clearSelectedEntries })
                 ) : (
                   <Button
                     onClick={handleToggleConfirmDeleteAll}
@@ -232,7 +228,7 @@ Table.defaultProps = {
   rows: [],
   withBulkActions: false,
   withMainAction: false,
-  bulkActionsBar: undefined,
+  renderBulkActionsBar: undefined,
 };
 
 Table.propTypes = {
@@ -262,7 +258,7 @@ Table.propTypes = {
   rows: PropTypes.array,
   withBulkActions: PropTypes.bool,
   withMainAction: PropTypes.bool,
-  bulkActionsBar: PropTypes.node,
+  renderBulkActionsBar: PropTypes.func,
 };
 
 export default Table;

From e4234f056898c4508555c3fd7d0c610ca9ae429e Mon Sep 17 00:00:00 2001
From: Fernando Chavez <fernando.chavez@strapi.io>
Date: Wed, 26 Apr 2023 16:20:35 +0200
Subject: [PATCH 5/7] fix names on proptypes of new bulk actions bar component

---
 .../components/DynamicTable/BulkActionsBar/index.js           | 4 ++--
 .../src/content-manager/components/DynamicTable/index.js      | 1 +
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/core/admin/admin/src/content-manager/components/DynamicTable/BulkActionsBar/index.js b/packages/core/admin/admin/src/content-manager/components/DynamicTable/BulkActionsBar/index.js
index c06661b702..67ce4b6681 100644
--- a/packages/core/admin/admin/src/content-manager/components/DynamicTable/BulkActionsBar/index.js
+++ b/packages/core/admin/admin/src/content-manager/components/DynamicTable/BulkActionsBar/index.js
@@ -69,13 +69,13 @@ const BulkActionsBar = ({
 };
 
 BulkActionsBar.defaultProps = {
-  showPublishUnpublish: false,
+  showPublish: false,
   showDelete: false,
   onConfirmDeleteAll: () => {},
 };
 
 BulkActionsBar.propTypes = {
-  showPublishUnpublish: PropTypes.bool,
+  showPublish: PropTypes.bool,
   showDelete: PropTypes.bool,
   onConfirmDeleteAll: PropTypes.func,
   selectedEntries: PropTypes.array.isRequired,
diff --git a/packages/core/admin/admin/src/content-manager/components/DynamicTable/index.js b/packages/core/admin/admin/src/content-manager/components/DynamicTable/index.js
index c684d508d3..15f439be18 100644
--- a/packages/core/admin/admin/src/content-manager/components/DynamicTable/index.js
+++ b/packages/core/admin/admin/src/content-manager/components/DynamicTable/index.js
@@ -130,6 +130,7 @@ DynamicTable.defaultProps = {
 DynamicTable.propTypes = {
   canCreate: PropTypes.bool.isRequired,
   canDelete: PropTypes.bool.isRequired,
+  canPublish: PropTypes.bool.isRequired,
   contentTypeName: PropTypes.string.isRequired,
   action: PropTypes.node,
   isBulkable: PropTypes.bool.isRequired,

From 6c105bc10e4a0be019f8e06b403bf58150171fb4 Mon Sep 17 00:00:00 2001
From: Fernando Chavez <fernando.chavez@strapi.io>
Date: Wed, 26 Apr 2023 16:55:10 +0200
Subject: [PATCH 6/7] fix lint error

---
 .../components/DynamicTable/BulkActionsBar/index.js           | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/core/admin/admin/src/content-manager/components/DynamicTable/BulkActionsBar/index.js b/packages/core/admin/admin/src/content-manager/components/DynamicTable/BulkActionsBar/index.js
index 67ce4b6681..b163a2e598 100644
--- a/packages/core/admin/admin/src/content-manager/components/DynamicTable/BulkActionsBar/index.js
+++ b/packages/core/admin/admin/src/content-manager/components/DynamicTable/BulkActionsBar/index.js
@@ -2,8 +2,8 @@ import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import { Button } from '@strapi/design-system';
 import { useIntl } from 'react-intl';
-import ConfirmDialogDeleteAll from '../ConfirmDialogDeleteAll';
 import { useTracking } from '@strapi/helper-plugin';
+import ConfirmDialogDeleteAll from '../ConfirmDialogDeleteAll';
 
 const BulkActionsBar = ({
   showPublish,
@@ -71,7 +71,7 @@ const BulkActionsBar = ({
 BulkActionsBar.defaultProps = {
   showPublish: false,
   showDelete: false,
-  onConfirmDeleteAll: () => {},
+  onConfirmDeleteAll() {},
 };
 
 BulkActionsBar.propTypes = {

From 8905c4be285b9982bb471061c58a685537b03645 Mon Sep 17 00:00:00 2001
From: Fernando Chavez <fernando.chavez@strapi.io>
Date: Thu, 27 Apr 2023 10:54:45 +0200
Subject: [PATCH 7/7] add test file for BulkActionsBar new component

---
 .../BulkActionsBar/tests/index.test.js        | 87 +++++++++++++++++++
 1 file changed, 87 insertions(+)
 create mode 100644 packages/core/admin/admin/src/content-manager/components/DynamicTable/BulkActionsBar/tests/index.test.js

diff --git a/packages/core/admin/admin/src/content-manager/components/DynamicTable/BulkActionsBar/tests/index.test.js b/packages/core/admin/admin/src/content-manager/components/DynamicTable/BulkActionsBar/tests/index.test.js
new file mode 100644
index 0000000000..90202ed36b
--- /dev/null
+++ b/packages/core/admin/admin/src/content-manager/components/DynamicTable/BulkActionsBar/tests/index.test.js
@@ -0,0 +1,87 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { ThemeProvider, lightTheme } from '@strapi/design-system';
+import { IntlProvider } from 'react-intl';
+import BulkActionsBar from '../index';
+import { act } from 'react-dom/test-utils';
+
+jest.mock('@strapi/helper-plugin', () => ({
+  ...jest.requireActual('@strapi/helper-plugin'),
+  useTracking: () => ({
+    trackUsage: jest.fn(),
+  }),
+}));
+
+jest.mock('../../../../../shared/hooks', () => ({
+  ...jest.requireActual('../../../../../shared/hooks'),
+  useInjectionZone: () => [],
+}));
+
+describe('BulkActionsBar', () => {
+  const requiredProps = {
+    selectedEntries: [],
+    clearSelectedEntries: jest.fn(),
+  };
+
+  const TestComponent = (props) => (
+    <ThemeProvider theme={lightTheme}>
+      <IntlProvider locale="en" messages={{}} defaultLocale="en">
+        <BulkActionsBar {...requiredProps} {...props} />
+      </IntlProvider>
+    </ThemeProvider>
+  );
+
+  const setup = (props) => render(<TestComponent {...props} />);
+
+  it('should render publish buttons if showPublish is true', () => {
+    setup({ showPublish: true });
+
+    expect(screen.getByRole('button', { name: /\bPublish\b/ })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /\bUnpublish\b/ })).toBeInTheDocument();
+  });
+
+  it('should not render publish buttons if showPublish is false', () => {
+    setup({ showPublish: false });
+
+    expect(screen.queryByRole('button', { name: /\bPublish\b/ })).not.toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: /\bUnpublish\b/ })).not.toBeInTheDocument();
+  });
+
+  it('should render delete button if showDelete is true', () => {
+    setup({ showDelete: true });
+
+    expect(screen.getByRole('button', { name: /\bDelete\b/ })).toBeInTheDocument();
+  });
+
+  it('should not render delete button if showDelete is false', () => {
+    setup({ showDelete: false });
+
+    expect(screen.queryByRole('button', { name: /\bDelete\b/ })).not.toBeInTheDocument();
+  });
+
+  it('should show delete modal if delete button is clicked', () => {
+    setup({ showDelete: true });
+
+    act(() => {
+      fireEvent.click(screen.getByRole('button', { name: /\bDelete\b/ }));
+    });
+
+    expect(screen.getByText('Confirmation')).toBeInTheDocument();
+  });
+
+  it('should call confirm delete all if confirmation button is clicked', async () => {
+    const mockConfirmDeleteAll = jest.fn();
+
+    setup({
+      showDelete: true,
+      onConfirmDeleteAll: mockConfirmDeleteAll,
+    });
+
+    await act(async () => {
+      await fireEvent.click(screen.getByRole('button', { name: /\bDelete\b/ }));
+      fireEvent.click(screen.getByRole('button', { name: /confirm/i }));
+    });
+
+    expect(mockConfirmDeleteAll).toHaveBeenCalledWith([]);
+  });
+});