diff --git a/packages/core/upload/admin/src/components/TableList/TableRows.js b/packages/core/upload/admin/src/components/TableList/TableRows.js
index 540311cc3b..07ad4ccd92 100644
--- a/packages/core/upload/admin/src/components/TableList/TableRows.js
+++ b/packages/core/upload/admin/src/components/TableList/TableRows.js
@@ -1,18 +1,29 @@
import React from 'react';
import PropTypes from 'prop-types';
import { useIntl } from 'react-intl';
-import { getFileExtension } from '@strapi/helper-plugin';
+import { useHistory, useLocation, Link } from 'react-router-dom';
+import {
+ getFileExtension,
+ onRowClick,
+ stopPropagation,
+ useQueryParams,
+} from '@strapi/helper-plugin';
import { BaseCheckbox } from '@strapi/design-system/BaseCheckbox';
+import { Flex } from '@strapi/design-system/Flex';
import { IconButton } from '@strapi/design-system/IconButton';
import { Tbody, Td, Tr } from '@strapi/design-system/Table';
import Pencil from '@strapi/icons/Pencil';
+import Eye from '@strapi/icons/Eye';
import { CellContent } from './CellContent';
import { AssetDefinition, FolderDefinition, tableHeaders as cells } from '../../constants';
-import { getTrad } from '../../utils';
+import { getFolderURL, getTrad } from '../../utils';
export const TableRows = ({ onEditAsset, onEditFolder, onSelectOne, rows, selected }) => {
const { formatMessage } = useIntl();
+ const { pathname } = useLocation();
+ const [{ query }] = useQueryParams();
+ const { push } = useHistory();
return (
@@ -22,7 +33,15 @@ export const TableRows = ({ onEditAsset, onEditFolder, onSelectOne, rows, select
const isSelected = !!selected.find((currentRow) => currentRow.id === id);
return (
-
+
+ elementType === 'asset'
+ ? onEditAsset(element)
+ : push(getFolderURL(pathname, query, element)),
+ })}
+ >
onSelectOne({ ...element, elementType })}
+ onValueChange={() => onSelectOne(element)}
checked={isSelected}
/>
|
@@ -53,23 +72,40 @@ export const TableRows = ({ onEditAsset, onEditFolder, onSelectOne, rows, select
);
})}
- {((elementType === 'asset' && onEditAsset) ||
- (elementType === 'folder' && onEditFolder)) && (
-
-
- elementType === 'asset' ? onEditAsset(element) : onEditFolder(element)
- }
- noBorder
- >
-
-
- |
- )}
+
+
+
+ {elementType === 'folder' && (
+
+
+
+ )}
+ {((elementType === 'asset' && onEditAsset) ||
+ (elementType === 'folder' && onEditFolder)) && (
+
+ elementType === 'asset' ? onEditAsset(element) : onEditFolder(element)
+ }
+ noBorder
+ >
+
+
+ )}
+
+ |
);
})}
diff --git a/packages/core/upload/admin/src/components/TableList/tests/TableList.test.js b/packages/core/upload/admin/src/components/TableList/tests/TableList.test.js
index 5936932d10..969a28445c 100644
--- a/packages/core/upload/admin/src/components/TableList/tests/TableList.test.js
+++ b/packages/core/upload/admin/src/components/TableList/tests/TableList.test.js
@@ -1,5 +1,6 @@
import React from 'react';
import { IntlProvider } from 'react-intl';
+import { MemoryRouter } from 'react-router-dom';
import { render } from '@testing-library/react';
import { ThemeProvider, lightTheme } from '@strapi/design-system';
@@ -8,6 +9,7 @@ import { TableList } from '..';
jest.mock('@strapi/helper-plugin', () => ({
...jest.requireActual('@strapi/helper-plugin'),
useTracking: jest.fn(() => ({ trackUsage: jest.fn() })),
+ useQueryParams: jest.fn(() => [{ query: {} }]),
}));
const PROPS_FIXTURE = {
@@ -43,11 +45,13 @@ const ComponentFixture = (props) => {
};
return (
-
-
-
-
-
+
+
+
+
+
+
+
);
};
diff --git a/packages/core/upload/admin/src/components/TableList/tests/TableRows.test.js b/packages/core/upload/admin/src/components/TableList/tests/TableRows.test.js
index 51d433aed6..d8d9df532b 100644
--- a/packages/core/upload/admin/src/components/TableList/tests/TableRows.test.js
+++ b/packages/core/upload/admin/src/components/TableList/tests/TableRows.test.js
@@ -1,10 +1,16 @@
import React from 'react';
import { IntlProvider } from 'react-intl';
+import { MemoryRouter } from 'react-router-dom';
import { render, fireEvent } from '@testing-library/react';
import { ThemeProvider, lightTheme } from '@strapi/design-system';
import { TableRows } from '../TableRows';
+jest.mock('@strapi/helper-plugin', () => ({
+ ...jest.requireActual('@strapi/helper-plugin'),
+ useQueryParams: jest.fn(() => [{ query: {} }]),
+}));
+
const PROPS_FIXTURE = {
rows: [
{
@@ -46,13 +52,15 @@ const ComponentFixture = (props) => {
};
return (
-
-
-
-
-
+
+
+
+
+
+
+
);
};
@@ -97,7 +105,7 @@ describe('TableList | TableRows', () => {
const onEditAssetSpy = jest.fn();
const { getByRole } = setup({ onEditAsset: onEditAssetSpy });
- fireEvent.click(getByRole('button', { name: 'Edit' }));
+ fireEvent.click(getByRole('button', { name: 'Edit', hidden: true }));
expect(onEditAssetSpy).toHaveBeenCalledTimes(1);
});
@@ -119,11 +127,17 @@ describe('TableList | TableRows', () => {
onEditFolder: onEditFolderSpy,
});
- fireEvent.click(getByRole('button', { name: 'Edit' }));
+ fireEvent.click(getByRole('button', { name: 'Edit', hidden: true }));
expect(onEditFolderSpy).toHaveBeenCalledTimes(1);
});
+ it('should display folder link', () => {
+ const { getByRole } = setup({ rows: [FOLDER_FIXTURE] });
+
+ expect(getByRole('link', { name: 'Access folder', hidden: true })).toBeInTheDocument();
+ });
+
it('should reflect non selected folder state', () => {
const { getByRole } = setup({ rows: [FOLDER_FIXTURE] });