Merge pull request #14974 from strapi/ML-listview/permissions

[features][ML listview] Permissions checboxes

packages/core/upload/admin/src/components/TableList/TableRows.js

@@ -19,7 +19,14 @@ import { CellContent } from './CellContent';
 import { AssetDefinition, FolderDefinition, tableHeaders as cells } from '../../constants';
 import { getFolderURL, getTrad } from '../../utils';
 
-export const TableRows = ({ onEditAsset, onEditFolder, onSelectOne, rows, selected }) => {
+export const TableRows = ({
+  canUpdate,
+  onEditAsset,
+  onEditFolder,
+  onSelectOne,
+  rows,
+  selected,
+}) => {
   const { formatMessage } = useIntl();
   const { pathname } = useLocation();
   const [{ query }] = useQueryParams();
@@ -57,6 +64,7 @@ export const TableRows = ({ onEditAsset, onEditFolder, onSelectOne, rows, select
                   },
                   { name }
                 )}
+                disabled={!canUpdate}
                 onValueChange={() => onSelectOne(element)}
                 checked={isSelected}
               />
@@ -115,11 +123,13 @@ export const TableRows = ({ onEditAsset, onEditFolder, onSelectOne, rows, select
 };
 
 TableRows.defaultProps = {
+  canUpdate: false,
   rows: [],
   selected: [],
 };
 
 TableRows.propTypes = {
+  canUpdate: PropTypes.bool,
   rows: PropTypes.arrayOf(AssetDefinition, FolderDefinition),
   onEditAsset: PropTypes.func.isRequired,
   onEditFolder: PropTypes.func.isRequired,

packages/core/upload/admin/src/components/TableList/index.js

@@ -15,6 +15,7 @@ import { TableRows } from './TableRows';
 
 export const TableList = ({
   assetCount,
+  canUpdate,
   folderCount,
   indeterminate,
   onChangeSort,
@@ -46,6 +47,7 @@ export const TableList = ({
                 id: getTrad('bulk.select.label'),
                 defaultMessage: 'Select all folders & assets',
               })}
+              disabled={!canUpdate}
               indeterminate={indeterminate}
               onChange={(e) => onSelectAll(e, rows)}
               value={
@@ -108,6 +110,7 @@ export const TableList = ({
         </Tr>
       </Thead>
       <TableRows
+        canUpdate={canUpdate}
         onEditAsset={onEditAsset}
         onEditFolder={onEditFolder}
         rows={rows}
@@ -120,6 +123,7 @@ export const TableList = ({
 
 TableList.defaultProps = {
   assetCount: 0,
+  canUpdate: false,
   folderCount: 0,
   indeterminate: false,
   onChangeSort: null,
@@ -132,6 +136,7 @@ TableList.defaultProps = {
 
 TableList.propTypes = {
   assetCount: PropTypes.number,
+  canUpdate: PropTypes.bool,
   folderCount: PropTypes.number,
   indeterminate: PropTypes.bool,
   onChangeSort: PropTypes.func,

packages/core/upload/admin/src/components/TableList/tests/TableList.test.js

@@ -13,6 +13,7 @@ jest.mock('@strapi/helper-plugin', () => ({
 }));
 
 const PROPS_FIXTURE = {
+  canUpdate: false,
   rows: [
     {
       alternativeText: 'alternative text',
@@ -100,6 +101,21 @@ describe('TableList', () => {
     expect(onChangeSortSpy).toHaveBeenCalledWith('name:ASC');
   });
 
+  it('should call onSelectAll callback when bulk selecting', () => {
+    const onSelectAllSpy = jest.fn();
+    const { getByRole } = setup({ onSelectAll: onSelectAllSpy });
+
+    fireEvent.click(getByRole('checkbox', { name: 'Select all folders & assets' }));
+
+    expect(onSelectAllSpy).toHaveBeenCalledTimes(1);
+  });
+
+  it('should disable bulk select when users do not have update permissions', () => {
+    const { getByRole } = setup({ canUpdate: false });
+
+    expect(getByRole('checkbox', { name: 'Select all folders & assets' })).toBeDisabled();
+  });
+
   it('should render assets', () => {
     const { getByText } = setup();
 

packages/core/upload/admin/src/components/TableList/tests/TableRows.test.js

@@ -12,6 +12,7 @@ jest.mock('@strapi/helper-plugin', () => ({
 }));
 
 const PROPS_FIXTURE = {
+  canUpdate: true,
   rows: [
     {
       alternativeText: 'alternative text',
@@ -103,6 +104,12 @@ describe('TableList | TableRows', () => {
       expect(getByRole('checkbox', { name: 'Select michka asset', hidden: true })).toBeChecked();
     });
 
+    it('should disable select asset checkbox when users do not have the permission to update', () => {
+      const { getByRole } = setup({ canUpdate: false });
+
+      expect(getByRole('checkbox', { name: 'Select michka asset', hidden: true })).toBeDisabled();
+    });
+
     it('should call onEditAsset callback', () => {
       const onEditAssetSpy = jest.fn();
       const { getByRole } = setup({ onEditAsset: onEditAssetSpy });
@@ -154,6 +161,14 @@ describe('TableList | TableRows', () => {
       expect(getByRole('checkbox', { name: 'Select folder 1 folder', hidden: true })).toBeChecked();
     });
 
+    it('should disable select folder checkbox when users do not have the permission to update', () => {
+      const { getByRole } = setup({ rows: [FOLDER_FIXTURE], canUpdate: false });
+
+      expect(
+        getByRole('checkbox', { name: 'Select folder 1 folder', hidden: true })
+      ).toBeDisabled();
+    });
+
     it('should not display size and ext', () => {
       const { getAllByText } = setup({ rows: [FOLDER_FIXTURE] });
 

packages/core/upload/admin/src/pages/App/MediaLibrary.js

@@ -273,6 +273,7 @@ export const MediaLibrary = () => {
           {canRead && !isGridView && (assetCount > 0 || folderCount > 0) && (
             <TableList
               assetCount={assetCount}
+              canUpdate={canUpdate}
               folderCount={folderCount}
               indeterminate={indeterminateBulkSelect}
               onChangeSort={handleChangeSort}