Move DynamicTable to helper plugin

Signed-off-by: soupette <cyril@strapi.io>

packages/core/admin/admin/src/pages/SettingsPage/pages/Users/ListPage/DynamicTable/TableRows/index.js

@@ -86,6 +86,7 @@ const TableRows = ({
 
 TableRows.defaultProps = {
   canDelete: false,
+  entriesToDelete: [],
   onClickDelete: () => {},
   onSelectRow: () => {},
   rows: [],
@@ -95,7 +96,7 @@ TableRows.defaultProps = {
 
 TableRows.propTypes = {
   canDelete: PropTypes.bool,
-  entriesToDelete: PropTypes.array.isRequired,
+  entriesToDelete: PropTypes.array,
   headers: PropTypes.array.isRequired,
   onClickDelete: PropTypes.func,
   onSelectRow: PropTypes.func,

packages/core/admin/admin/src/pages/SettingsPage/pages/Users/ListPage/index.js

@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import {
   CustomContentLayout,
+  DynamicTable,
   Search,
   SettingsPageTitle,
   useRBAC,
@@ -14,7 +15,7 @@ import { useIntl } from 'react-intl';
 import { useMutation, useQuery, useQueryClient } from 'react-query';
 import get from 'lodash/get';
 import adminPermissions from '../../../../../permissions';
-import DynamicTable from './DynamicTable';
+import TableRows from './DynamicTable/TableRows';
 import Filters from './Filters';
 import ModalForm from './ModalForm';
 import PaginationFooter from './PaginationFooter';
@@ -117,15 +118,25 @@ const ListPage = () => {
         {canRead && (
           <>
             <DynamicTable
-              canCreate={canCreate}
+              contentType="Users"
-              canDelete={canDelete}
               isLoading={isLoading}
               onConfirmDeleteAll={deleteAllMutation.mutateAsync}
               headers={tableHeaders}
               rows={data?.results}
               withBulkActions
               withMainAction={canDelete}
+            >
+              <TableRows
+                canDelete={canDelete}
+                // entriesToDelete={entriesToDelete}
+                headers={tableHeaders}
+                // onClickDelete={handleClickDelete}
+                // onSelectRow={handleSelectRow}
+                rows={data?.results || []}
+                withBulkActions
+                withMainAction={canDelete}
               />
+            </DynamicTable>
             <PaginationFooter pagination={data?.pagination} />
           </>
         )}

packages/core/helper-plugin/lib/src/components/DynamicTable/TableHead/index.js

@@ -9,9 +9,10 @@ import {
   Tooltip,
   VisuallyHidden,
 } from '@strapi/parts';
-import { SortIcon, useQueryParams } from '@strapi/helper-plugin';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
+import SortIcon from '../../../icons/SortIcon';
+import useQueryParams from '../../../hooks/useQueryParams';
 
 const TableHead = ({
   areAllEntriesSelected,

packages/core/helper-plugin/lib/src/components/DynamicTable/index.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { Children, cloneElement, useState } from 'react';
 import PropTypes from 'prop-types';
 import { Box, Row, Button, Table as TableCompo, Subtitle } from '@strapi/parts';
 import { ConfirmDialog, EmptyBodyTable, useQueryParams } from '@strapi/helper-plugin';
@@ -6,7 +6,6 @@ import { useIntl } from 'react-intl';
 import { DeleteIcon } from '@strapi/icons';
 import styled from 'styled-components';
 import TableHead from './TableHead';
-import TableRows from './TableRows';
 
 const BlockActions = styled(Row)`
   & > * + * {
@@ -17,7 +16,8 @@ const BlockActions = styled(Row)`
 `;
 
 const Table = ({
-  canDelete,
+  children,
+  contentType,
   headers,
   isLoading,
   onConfirmDeleteAll,
@@ -40,7 +40,7 @@ const Table = ({
     ? {
         id: 'content-manager.components.TableEmpty.withFilters',
         defaultMessage: 'There are no {contentType} with the applied filters...',
-        values: { contentType: 'Users' },
+        values: { contentType },
       }
     : undefined;
 
@@ -145,16 +145,13 @@ const Table = ({
         {!rows.length || isLoading ? (
           <EmptyBodyTable colSpan={COL_COUNT} content={content} isLoading={isLoading} />
         ) : (
-          <TableRows
+          Children.toArray(children).map(child =>
-            canDelete={canDelete}
+            cloneElement(child, {
-            entriesToDelete={entriesToDelete}
+              entriesToDelete,
-            headers={headers}
+              onClickDelete: handleClickDelete,
-            onClickDelete={handleClickDelete}
+              onSelectRow: handleSelectRow,
-            onSelectRow={handleSelectRow}
+            })
-            rows={rows}
+          )
-            withBulkActions={withBulkActions}
-            withMainAction={withMainAction}
-          />
         )}
       </TableCompo>
       <ConfirmDialog
@@ -174,6 +171,7 @@ const Table = ({
 };
 
 Table.defaultProps = {
+  children: undefined,
   headers: [],
   isLoading: false,
   onConfirmDeleteAll: () => {},
@@ -183,7 +181,8 @@ Table.defaultProps = {
 };
 
 Table.propTypes = {
-  canDelete: PropTypes.bool.isRequired,
+  children: PropTypes.node,
+  contentType: PropTypes.string.isRequired,
   headers: PropTypes.array,
   isLoading: PropTypes.bool,
   onConfirmDeleteAll: PropTypes.func,

packages/core/helper-plugin/lib/src/index.js

@@ -182,6 +182,7 @@ export { default as CheckPermissions } from './components/CheckPermissions';
 export { default as ConfirmDialog } from './components/ConfirmDialog';
 export { default as ContentBox } from './components/ContentBox';
 export { default as CustomContentLayout } from './components/CustomContentLayout';
+export { default as DynamicTable } from './components/DynamicTable';
 export { default as EmptyStateLayout } from './components/EmptyStateLayout';
 export { default as EmptyBodyTable } from './components/EmptyBodyTable';
 export { default as GenericInput } from './components/GenericInput';