@strapi/admin 4.11.2 → 4.11.4

package/admin/src/content-manager/components/RelationInputDataManager/utils/select.js

@@ -2,6 +2,7 @@ import { useMemo } from 'react';
 
 import { useCMEditViewDataManager } from '@strapi/helper-plugin';
 import get from 'lodash/get';
+import { useRouteMatch } from 'react-router-dom';
 
 import { getRequestUrl } from '../../../utils';
 
@@ -21,6 +22,16 @@ function useSelect({
     modifiedData,
   } = useCMEditViewDataManager();
 
+  /**
+   * This is our cloning route because the EditView & CloneView share the same UI component
+   * We need the origin ID to pre-load the relations into the modifiedData of the new
+   * to-be-cloned entity.
+   */
+  const { params } =
+    useRouteMatch('/content-manager/collectionType/:collectionType/create/clone/:origin') ?? {};
+
+  const { origin } = params ?? {};
+
   const isFieldAllowed = useMemo(() => {
     if (isUserAllowedToEditField === true) {
       return true;
@@ -54,9 +65,11 @@ function useSelect({
     componentId = get(modifiedData, fieldNameKeys.slice(0, -1))?.id;
   }
 
+  const entityId = origin || modifiedData.id;
+
   // /content-manager/relations/[model]/[id]/[field-name]
   const relationFetchEndpoint = useMemo(() => {
-    if (isCreatingEntry) {
+    if (isCreatingEntry && !origin) {
       return null;
     }
 
@@ -69,8 +82,8 @@ function useSelect({
         : null;
     }
 
-    return getRequestUrl(`relations/${slug}/${modifiedData.id}/${name.split('.').at(-1)}`);
-  }, [isCreatingEntry, componentUid, slug, modifiedData.id, name, componentId, fieldNameKeys]);
+    return getRequestUrl(`relations/${slug}/${entityId}/${name.split('.').at(-1)}`);
+  }, [isCreatingEntry, origin, componentUid, slug, entityId, name, componentId, fieldNameKeys]);
 
   // /content-manager/relations/[model]/[field-name]
   const relationSearchEndpoint = useMemo(() => {
@@ -82,6 +95,7 @@ function useSelect({
   }, [componentUid, slug, name]);
 
   return {
+    entityId,
     componentId,
     isComponentRelation: Boolean(componentUid),
     queryInfos: {
@@ -91,6 +105,7 @@ function useSelect({
         relation: relationFetchEndpoint,
       },
     },
+    isCloningEntry: Boolean(origin),
     isCreatingEntry,
     isFieldAllowed,
     isFieldReadable,

package/admin/src/content-manager/pages/App/index.js

@@ -10,10 +10,11 @@ import {
 import sortBy from 'lodash/sortBy';
 import { Helmet } from 'react-helmet';
 import { useIntl } from 'react-intl';
+import { useSelector } from 'react-redux';
 import { Redirect, Route, Switch, useLocation, useRouteMatch } from 'react-router-dom';
 
 import { DragLayer } from '../../../components/DragLayer';
-import permissions from '../../../permissions';
+import { selectAdminPermissions } from '../../../pages/App/selectors';
 import ModelsContext from '../../contexts/ModelsContext';
 import getTrad from '../../utils/getTrad';
 import ItemTypes from '../../utils/ItemTypes';
@@ -29,8 +30,6 @@ import { RelationDragPreview } from './components/RelationDragPreview';
 import LeftMenu from './LeftMenu';
 import useContentManagerInitData from './useContentManagerInitData';
 
-const cmPermissions = permissions.contentManager;
-
 function renderDraglayerItem({ type, item }) {
   if ([ItemTypes.EDIT_FIELD, ItemTypes.FIELD].includes(type)) {
     return <CardDragPreview labelField={item.labelField} />;
@@ -73,6 +72,7 @@ const App = () => {
   const { formatMessage } = useIntl();
   const { startSection } = useGuidedTour();
   const startSectionRef = useRef(startSection);
+  const permissions = useSelector(selectAdminPermissions);
 
   useEffect(() => {
     if (startSectionRef.current) {
@@ -127,7 +127,7 @@ const App = () => {
       <ModelsContext.Provider value={{ refetchData }}>
         <Switch>
           <Route path="/content-manager/components/:uid/configurations/edit">
-            <CheckPagePermissions permissions={cmPermissions.componentsConfigurations}>
+            <CheckPagePermissions permissions={permissions.contentManager.componentsConfigurations}>
               <ComponentSettingsView />
             </CheckPagePermissions>
           </Route>

package/admin/src/content-manager/pages/CollectionTypeRecursivePath/index.js

@@ -3,9 +3,10 @@ import React, { memo, useMemo } from 'react';
 import { CheckPagePermissions, LoadingIndicatorPage } from '@strapi/helper-plugin';
 import PropTypes from 'prop-types';
 import { ErrorBoundary } from 'react-error-boundary';
+import { useSelector } from 'react-redux';
 import { Route, Switch } from 'react-router-dom';
 
-import permissions from '../../../permissions';
+import { selectAdminPermissions } from '../../../pages/App/selectors';
 import { ContentTypeLayoutContext } from '../../contexts';
 import { useFetchContentTypeLayout } from '../../hooks';
 import { formatLayoutToApi } from '../../utils';
@@ -16,14 +17,13 @@ import ListViewLayout from '../ListViewLayoutManager';
 
 import ErrorFallback from './components/ErrorFallback';
 
-const cmPermissions = permissions.contentManager;
-
 const CollectionTypeRecursivePath = ({
   match: {
     params: { slug },
     url,
   },
 }) => {
+  const permissions = useSelector(selectAdminPermissions);
   const { isLoading, layout, updateLayout } = useFetchContentTypeLayout(slug);
 
   const { rawContentTypeLayout, rawComponentsLayouts } = useMemo(() => {
@@ -92,7 +92,9 @@ const CollectionTypeRecursivePath = ({
       <ContentTypeLayoutContext.Provider value={layout}>
         <Switch>
           <Route path={`${url}/configurations/list`}>
-            <CheckPagePermissions permissions={cmPermissions.collectionTypesConfigurations}>
+            <CheckPagePermissions
+              permissions={permissions.contentManager.collectionTypesConfigurations}
+            >
               <ListSettingsView
                 layout={rawContentTypeLayout}
                 slug={slug}
@@ -101,7 +103,9 @@ const CollectionTypeRecursivePath = ({
             </CheckPagePermissions>
           </Route>
           <Route path={`${url}/configurations/edit`}>
-            <CheckPagePermissions permissions={cmPermissions.collectionTypesConfigurations}>
+            <CheckPagePermissions
+              permissions={permissions.contentManager.collectionTypesConfigurations}
+            >
               <EditSettingsView
                 components={rawComponentsLayouts}
                 isContentTypeView

package/admin/src/content-manager/pages/ComponentSetttingsView/index.js

@@ -5,19 +5,18 @@ import axios from 'axios';
 import { shallowEqual, useSelector } from 'react-redux';
 import { useParams } from 'react-router-dom';
 
-import permissions from '../../../permissions';
+import { selectAdminPermissions } from '../../../pages/App/selectors';
 import { getData, getDataSucceeded } from '../../sharedReducers/crudReducer/actions';
 import crudReducer, { crudInitialState } from '../../sharedReducers/crudReducer/reducer';
 import { mergeMetasWithSchema } from '../../utils';
 import { makeSelectModelAndComponentSchemas } from '../App/selectors';
 import EditSettingsView from '../EditSettingsView';
 
-const cmPermissions = permissions.contentManager;
-
 const ComponentSettingsView = () => {
   const [{ isLoading, data: layout }, dispatch] = useReducer(crudReducer, crudInitialState);
   const schemasSelector = useMemo(makeSelectModelAndComponentSchemas, []);
   const { schemas } = useSelector((state) => schemasSelector(state), shallowEqual);
+  const permissions = useSelector(selectAdminPermissions);
   const { uid } = useParams();
   const { get } = useFetchClient();
 
@@ -54,7 +53,7 @@ const ComponentSettingsView = () => {
   }
 
   return (
-    <CheckPagePermissions permissions={cmPermissions.componentsConfigurations}>
+    <CheckPagePermissions permissions={permissions.contentManager.componentsConfigurations}>
       <EditSettingsView components={layout.components} mainLayout={layout.component} slug={uid} />
     </CheckPagePermissions>
   );

package/admin/src/content-manager/pages/EditView/hooks/useOnce.js

@@ -0,0 +1,14 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import { useEffect } from 'react';
+
+/**
+ *
+ * @param {import('react').EffectCallback} effect
+ * @returns void
+ */
+export const useOnce = (effect) => useEffect(effect, emptyDeps);
+
+/**
+ * @type {import('react').DependencyList}
+ */
+const emptyDeps = [];

package/admin/src/content-manager/pages/EditView/index.js

@@ -1,10 +1,11 @@
-import React, { memo } from 'react';
+import * as React from 'react';
 
-import { Box, ContentLayout, Flex, Grid, GridItem, Main } from '@strapi/design-system';
+import { Main, ContentLayout, Grid, GridItem, Flex, Box } from '@strapi/design-system';
 import {
   CheckPermissions,
   LinkButton,
   LoadingIndicatorPage,
+  useNotification,
   useTracking,
 } from '@strapi/helper-plugin';
 import { Layer, Pencil } from '@strapi/icons';
@@ -12,8 +13,9 @@ import InformationBox from 'ee_else_ce/content-manager/pages/EditView/Informatio
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 import { useSelector } from 'react-redux';
+import { useLocation } from 'react-router-dom';
 
-import permissions from '../../../permissions';
+import { selectAdminPermissions } from '../../../pages/App/selectors';
 import { InjectionZone } from '../../../shared/components';
 import CollectionTypeFormWrapper from '../../components/CollectionTypeFormWrapper';
 import { DynamicZone } from '../../components/DynamicZone';
@@ -26,16 +28,35 @@ import DeleteLink from './DeleteLink';
 import DraftAndPublishBadge from './DraftAndPublishBadge';
 import GridRow from './GridRow';
 import Header from './Header';
-import { selectAttributesLayout, selectCurrentLayout, selectCustomFieldUids } from './selectors';
+import { useOnce } from './hooks/useOnce';
+import { selectCurrentLayout, selectAttributesLayout, selectCustomFieldUids } from './selectors';
 import { getFieldsActionMatchingPermissions } from './utils';
 
-const cmPermissions = permissions.contentManager;
-const ctbPermissions = [{ action: 'plugin::content-type-builder.read', subject: null }];
+// TODO: this seems suspicious
+const CTB_PERMISSIONS = [{ action: 'plugin::content-type-builder.read', subject: null }];
 
 /* eslint-disable  react/no-array-index-key */
 const EditView = ({ allowedActions, isSingleType, goBack, slug, id, origin, userPermissions }) => {
   const { trackUsage } = useTracking();
   const { formatMessage } = useIntl();
+  const permissions = useSelector(selectAdminPermissions);
+  const location = useLocation();
+  const toggleNotification = useNotification();
+
+  useOnce(() => {
+    /**
+     * We only ever want to fire the notification once otherwise
+     * whenever the app re-renders it'll pop up regardless of
+     * what we do because the state comes from react-router-dom
+     */
+    if (location?.state && 'error' in location.state) {
+      toggleNotification({
+        type: 'warning',
+        message: location.state.error,
+        timeout: 5000,
+      });
+    }
+  });
 
   const { layout, formattedContentTypeLayout, customFieldUids } = useSelector((state) => ({
     layout: selectCurrentLayout(state),
@@ -49,8 +70,8 @@ const EditView = ({ allowedActions, isSingleType, goBack, slug, id, origin, user
     getFieldsActionMatchingPermissions(userPermissions, slug);
 
   const configurationPermissions = isSingleType
-    ? cmPermissions.singleTypesConfigurations
-    : cmPermissions.collectionTypesConfigurations;
+    ? permissions.contentManager.singleTypesConfigurations
+    : permissions.contentManager.collectionTypesConfigurations;
 
   // // FIXME when changing the routing
   const configurationsURL = `/content-manager/${
@@ -188,7 +209,7 @@ const EditView = ({ allowedActions, isSingleType, goBack, slug, id, origin, user
                         <Flex direction="column" alignItems="stretch" gap={2}>
                           <InjectionZone area="contentManager.editView.right-links" slug={slug} />
                           {slug !== 'strapi::administrator' && (
-                            <CheckPermissions permissions={ctbPermissions}>
+                            <CheckPermissions permissions={CTB_PERMISSIONS}>
                               <LinkButton
                                 onClick={() => {
                                   trackUsage('willEditEditLayout');
@@ -261,4 +282,4 @@ EditView.propTypes = {
   userPermissions: PropTypes.array,
 };
 
-export default memo(EditView);
+export default EditView;

package/admin/src/content-manager/{components/DynamicTable → pages/ListView/components}/CellContent/RelationMultiple/index.js

@@ -16,7 +16,7 @@ import { useIntl } from 'react-intl';
 import { useQuery } from 'react-query';
 import styled from 'styled-components';
 
-import { getRequestUrl, getTrad } from '../../../../utils';
+import { getRequestUrl, getTrad } from '../../../../../utils';
 import CellValue from '../CellValue';
 
 const TypographyMaxWidth = styled(Typography)`

package/admin/src/content-manager/{components/DynamicTable → pages/ListView/components}/CellContent/utils/hasContent.js

@@ -1,7 +1,7 @@
 import isEmpty from 'lodash/isEmpty';
 import isNumber from 'lodash/isNumber';
 
-import isFieldTypeNumber from '../../../../utils/isFieldTypeNumber';
+import isFieldTypeNumber from '../../../../../utils/isFieldTypeNumber';
 
 import isSingleRelation from './isSingleRelation';
 

package/admin/src/content-manager/{components/DynamicTable → pages/ListView/components}/ConfirmDialogDelete/index.js

@@ -5,9 +5,14 @@ import { ExclamationMarkCircle, Trash } from '@strapi/icons';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 
-import InjectionZoneList from '../../InjectionZoneList';
+import InjectionZoneList from '../../../../components/InjectionZoneList';
 
-const ConfirmDialogDelete = ({ isConfirmButtonLoading, isOpen, onToggleDialog, onConfirm }) => {
+export const ConfirmDialogDelete = ({
+  isConfirmButtonLoading,
+  isOpen,
+  onToggleDialog,
+  onConfirm,
+}) => {
   const { formatMessage } = useIntl();
 
   return (
@@ -70,5 +75,3 @@ ConfirmDialogDelete.propTypes = {
   onConfirm: PropTypes.func.isRequired,
   onToggleDialog: PropTypes.func.isRequired,
 };
-
-export default ConfirmDialogDelete;

package/admin/src/content-manager/pages/ListView/components/ConfirmDialogDeleteAll/index.js

@@ -0,0 +1,78 @@
+import React from 'react';
+
+import { Dialog, DialogBody, DialogFooter, Flex, Typography, Button } from '@strapi/design-system';
+import { ExclamationMarkCircle, Trash } from '@strapi/icons';
+import PropTypes from 'prop-types';
+import { useIntl } from 'react-intl';
+
+import InjectionZoneList from '../../../../components/InjectionZoneList';
+import { getTrad } from '../../../../utils';
+
+export const ConfirmDialogDeleteAll = ({
+  isConfirmButtonLoading,
+  isOpen,
+  onToggleDialog,
+  onConfirm,
+}) => {
+  const { formatMessage } = useIntl();
+
+  return (
+    <Dialog
+      onClose={onToggleDialog}
+      title={formatMessage({
+        id: 'app.components.ConfirmDialog.title',
+        defaultMessage: 'Confirmation',
+      })}
+      labelledBy="confirmation"
+      describedBy="confirm-description"
+      isOpen={isOpen}
+    >
+      <DialogBody icon={<ExclamationMarkCircle />}>
+        <Flex direction="column" alignItems="stretch" gap={2}>
+          <Flex justifyContent="center">
+            <Typography id="confirm-description">
+              {formatMessage({
+                id: getTrad('popUpWarning.bodyMessage.contentType.delete.all'),
+                defaultMessage: 'Are you sure you want to delete these entries?',
+              })}
+            </Typography>
+          </Flex>
+          <Flex>
+            <InjectionZoneList area="contentManager.listView.deleteModalAdditionalInfos" />
+          </Flex>
+        </Flex>
+      </DialogBody>
+      <DialogFooter
+        startAction={
+          <Button onClick={onToggleDialog} variant="tertiary">
+            {formatMessage({
+              id: 'app.components.Button.cancel',
+              defaultMessage: 'Cancel',
+            })}
+          </Button>
+        }
+        endAction={
+          <Button
+            onClick={onConfirm}
+            variant="danger-light"
+            startIcon={<Trash />}
+            id="confirm-delete"
+            loading={isConfirmButtonLoading}
+          >
+            {formatMessage({
+              id: 'app.components.Button.confirm',
+              defaultMessage: 'Confirm',
+            })}
+          </Button>
+        }
+      />
+    </Dialog>
+  );
+};
+
+ConfirmDialogDeleteAll.propTypes = {
+  isConfirmButtonLoading: PropTypes.bool.isRequired,
+  isOpen: PropTypes.bool.isRequired,
+  onConfirm: PropTypes.func.isRequired,
+  onToggleDialog: PropTypes.func.isRequired,
+};

package/admin/src/content-manager/pages/ListView/{FieldPicker → components/FieldPicker}/index.js

@@ -1,18 +1,16 @@
-import React, { memo } from 'react';
+import React from 'react';
 
-import { Box, Option, Select } from '@strapi/design-system';
+import { Select, Option, Box } from '@strapi/design-system';
 import { useTracking } from '@strapi/helper-plugin';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 import { useDispatch, useSelector } from 'react-redux';
 
-import getTrad from '../../../utils/getTrad';
-import { onChangeListHeaders } from '../actions';
-import { selectDisplayedHeaders } from '../selectors';
+import { getTrad, checkIfAttributeIsDisplayable } from '../../../../utils';
+import { onChangeListHeaders } from '../../actions';
+import { selectDisplayedHeaders } from '../../selectors';
 
-import getAllAllowedHeaders from './utils/getAllAllowedHeader';
-
-const FieldPicker = ({ layout }) => {
+export const FieldPicker = ({ layout }) => {
   const dispatch = useDispatch();
   const displayedHeaders = useSelector(selectDisplayedHeaders);
   const { trackUsage } = useTracking();
@@ -26,6 +24,7 @@ const FieldPicker = ({ layout }) => {
       intlLabel: { id: metadatas.label, defaultMessage: metadatas.label },
     };
   });
+
   const values = displayedHeaders.map(({ name }) => name);
 
   const handleChange = (updatedValues) => {
@@ -94,4 +93,16 @@ FieldPicker.propTypes = {
   }).isRequired,
 };
 
-export default memo(FieldPicker);
+const getAllAllowedHeaders = (attributes) => {
+  const allowedAttributes = Object.keys(attributes).reduce((acc, current) => {
+    const attribute = attributes[current];
+
+    if (checkIfAttributeIsDisplayable(attribute)) {
+      acc.push(current);
+    }
+
+    return acc;
+  }, []);
+
+  return allowedAttributes.sort();
+};

package/admin/src/content-manager/{components/DynamicTable → pages/ListView/components}/TableRows/index.js

@@ -1,17 +1,19 @@
 import React from 'react';
 
-import { BaseCheckbox, Box, Flex, IconButton, Tbody, Td, Tr } from '@strapi/design-system';
-import { onRowClick, stopPropagation, useTracking } from '@strapi/helper-plugin';
-import { Duplicate, Pencil, Trash } from '@strapi/icons';
+import { BaseCheckbox, IconButton, Tbody, Td, Tr, Flex } from '@strapi/design-system';
+import { useTracking, useFetchClient, useAPIErrorHandler } from '@strapi/helper-plugin';
+import { Trash, Duplicate, Pencil } from '@strapi/icons';
+import { AxiosError } from 'axios';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 import { Link, useHistory } from 'react-router-dom';
 
-import { getFullName } from '../../../../utils';
-import { usePluginsQueryParams } from '../../../hooks';
+import { getFullName } from '../../../../../utils';
+import { usePluginsQueryParams } from '../../../../hooks';
+import { getTrad } from '../../../../utils';
 import CellContent from '../CellContent';
 
-const TableRows = ({
+export const TableRows = ({
   canCreate,
   canDelete,
   contentType,
@@ -23,19 +25,63 @@ const TableRows = ({
   withBulkActions,
   rows,
 }) => {
-  const {
-    push,
-    location: { pathname },
-  } = useHistory();
+  const { push, location } = useHistory();
+  const { pathname } = location;
   const { formatMessage } = useIntl();
+  const { post } = useFetchClient();
 
   const { trackUsage } = useTracking();
   const pluginsQueryParams = usePluginsQueryParams();
+  const { formatAPIError } = useAPIErrorHandler(getTrad);
 
+  /**
+   *
+   * @param {string} id
+   * @returns void
+   */
+  const handleRowClick = (id) => () => {
+    if (!withBulkActions) return;
+
+    trackUsage('willEditEntryFromList');
+    push({
+      pathname: `${pathname}/${id}`,
+      state: { from: pathname },
+      search: pluginsQueryParams,
+    });
+  };
+
+  const handleCloneClick = (id) => async () => {
+    try {
+      const { data } = await post(
+        `/content-manager/collection-types/${contentType.uid}/auto-clone/${id}?${pluginsQueryParams}`
+      );
+
+      if ('id' in data) {
+        push({
+          pathname: `${pathname}/${data.id}`,
+          state: { from: pathname },
+          search: pluginsQueryParams,
+        });
+      }
+    } catch (err) {
+      if (err instanceof AxiosError) {
+        push({
+          pathname: `${pathname}/create/clone/${id}`,
+          state: { from: pathname, error: formatAPIError(err) },
+          search: pluginsQueryParams,
+        });
+      }
+    }
+  };
+
+  /**
+   * Table Cells with actions e.g edit, delete, duplicate have `stopPropagation`
+   * to prevent the row from being selected.
+   */
   return (
     <Tbody>
       {rows.map((data, index) => {
-        const isChecked = entriesToDelete.findIndex((id) => id === data.id) !== -1;
+        const isChecked = entriesToDelete.includes(data.id);
         const itemLineText = formatMessage(
           {
             id: 'content-manager.components.DynamicTable.row-line',
@@ -46,21 +92,12 @@ const TableRows = ({
 
         return (
           <Tr
+            cursor={withBulkActions ? 'pointer' : 'default'}
             key={data.id}
-            {...onRowClick({
-              fn() {
-                trackUsage('willEditEntryFromList');
-                push({
-                  pathname: `${pathname}/${data.id}`,
-                  state: { from: pathname },
-                  search: pluginsQueryParams,
-                });
-              },
-              condition: withBulkActions,
-            })}
+            onClick={handleRowClick(data.id)}
           >
             {withMainAction && (
-              <Td {...stopPropagation}>
+              <Td onClick={(e) => e.stopPropagation()}>
                 <BaseCheckbox
                   aria-label={formatMessage(
                     {
@@ -96,7 +133,7 @@ const TableRows = ({
 
             {withBulkActions && (
               <Td>
-                <Flex justifyContent="end" {...stopPropagation}>
+                <Flex as="span" justifyContent="end" gap={1} onClick={(e) => e.stopPropagation()}>
                   <IconButton
                     forwardedAs={Link}
                     onClick={() => {
@@ -112,46 +149,40 @@ const TableRows = ({
                       { target: itemLineText }
                     )}
                     noBorder
-                    icon={<Pencil />}
-                  />
+                  >
+                    <Pencil />
+                  </IconButton>
 
                   {canCreate && (
-                    <Box paddingLeft={1}>
-                      <IconButton
-                        forwardedAs={Link}
-                        to={{
-                          pathname: `${pathname}/create/clone/${data.id}`,
-                          state: { from: pathname },
-                          search: pluginsQueryParams,
-                        }}
-                        label={formatMessage(
-                          {
-                            id: 'app.component.table.duplicate',
-                            defaultMessage: 'Duplicate {target}',
-                          },
-                          { target: itemLineText }
-                        )}
-                        noBorder
-                        icon={<Duplicate />}
-                      />
-                    </Box>
+                    <IconButton
+                      onClick={handleCloneClick(data.id)}
+                      label={formatMessage(
+                        {
+                          id: 'app.component.table.duplicate',
+                          defaultMessage: 'Duplicate {target}',
+                        },
+                        { target: itemLineText }
+                      )}
+                      noBorder
+                    >
+                      <Duplicate />
+                    </IconButton>
                   )}
 
                   {canDelete && (
-                    <Box paddingLeft={1}>
-                      <IconButton
-                        onClick={() => {
-                          trackUsage('willDeleteEntryFromList');
-                          onClickDelete(data.id);
-                        }}
-                        label={formatMessage(
-                          { id: 'global.delete-target', defaultMessage: 'Delete {target}' },
-                          { target: itemLineText }
-                        )}
-                        noBorder
-                        icon={<Trash />}
-                      />
-                    </Box>
+                    <IconButton
+                      onClick={() => {
+                        trackUsage('willDeleteEntryFromList');
+                        onClickDelete(data.id);
+                      }}
+                      label={formatMessage(
+                        { id: 'global.delete-target', defaultMessage: 'Delete {target}' },
+                        { target: itemLineText }
+                      )}
+                      noBorder
+                    >
+                      <Trash />
+                    </IconButton>
                   )}
                 </Flex>
               </Td>
@@ -188,5 +219,3 @@ TableRows.propTypes = {
   withBulkActions: PropTypes.bool,
   withMainAction: PropTypes.bool,
 };
-
-export default TableRows;