added onRowClick and folder link

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 (
     <Tbody>
@@ -22,7 +33,15 @@ export const TableRows = ({ onEditAsset, onEditFolder, onSelectOne, rows, select
         const isSelected = !!selected.find((currentRow) => currentRow.id === id);
 
         return (
-          <Tr key={id}>
+          <Tr
+            key={id}
+            {...onRowClick({
+              fn: () =>
+                elementType === 'asset'
+                  ? onEditAsset(element)
+                  : push(getFolderURL(pathname, query, element)),
+            })}
+          >
             <Td>
               <BaseCheckbox
                 aria-label={formatMessage(
@@ -33,7 +52,7 @@ export const TableRows = ({ onEditAsset, onEditFolder, onSelectOne, rows, select
                   },
                   { name }
                 )}
-                onValueChange={() => onSelectOne({ ...element, elementType })}
+                onValueChange={() => onSelectOne(element)}
                 checked={isSelected}
               />
             </Td>
@@ -53,23 +72,40 @@ export const TableRows = ({ onEditAsset, onEditFolder, onSelectOne, rows, select
                 </Td>
               );
             })}
-            {((elementType === 'asset' && onEditAsset) ||
+
-              (elementType === 'folder' && onEditFolder)) && (
+            <Td {...stopPropagation}>
-              <Td>
+              <Flex justifyContent="flex-end">
-                <IconButton
+                {elementType === 'folder' && (
-                  label={formatMessage({
+                  <IconButton
-                    id: getTrad('control-card.edit'),
+                    forwardedAs={Link}
-                    defaultMessage: 'Edit',
+                    label={formatMessage({
-                  })}
+                      // TODO: fix trad
-                  onClick={() =>
+                      id: getTrad('app'),
-                    elementType === 'asset' ? onEditAsset(element) : onEditFolder(element)
+                      defaultMessage: 'Access folder',
-                  }
+                    })}
-                  noBorder
+                    to={getFolderURL(pathname, query, element)}
-                >
+                    noBorder
-                  <Pencil />
+                  >
-                </IconButton>
+                    <Eye />
-              </Td>
+                  </IconButton>
-            )}
+                )}
+                {((elementType === 'asset' && onEditAsset) ||
+                  (elementType === 'folder' && onEditFolder)) && (
+                  <IconButton
+                    label={formatMessage({
+                      id: getTrad('control-card.edit'),
+                      defaultMessage: 'Edit',
+                    })}
+                    onClick={() =>
+                      elementType === 'asset' ? onEditAsset(element) : onEditFolder(element)
+                    }
+                    noBorder
+                  >
+                    <Pencil />
+                  </IconButton>
+                )}
+              </Flex>
+            </Td>
           </Tr>
         );
       })}

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 (
-    <IntlProvider locale="en" messages={{}}>
+    <MemoryRouter>
-      <ThemeProvider theme={lightTheme}>
+      <IntlProvider locale="en" messages={{}}>
-        <TableList {...customProps} />
+        <ThemeProvider theme={lightTheme}>
-      </ThemeProvider>
+          <TableList {...customProps} />
-    </IntlProvider>
+        </ThemeProvider>
+      </IntlProvider>
+    </MemoryRouter>
   );
 };
 

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 (
-    <IntlProvider locale="en" messages={{}}>
+    <MemoryRouter>
-      <ThemeProvider theme={lightTheme}>
+      <IntlProvider locale="en" messages={{}}>
-        <table>
+        <ThemeProvider theme={lightTheme}>
-          <TableRows {...customProps} />
+          <table>
-        </table>
+            <TableRows {...customProps} />
-      </ThemeProvider>
+          </table>
-    </IntlProvider>
+        </ThemeProvider>
+      </IntlProvider>
+    </MemoryRouter>
   );
 };
 
@@ -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] });