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] });