@strapi/admin 4.10.0-beta.0 → 4.10.0

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

@@ -16,51 +16,72 @@ import {
   SubNavSections,
   SubNavLink,
 } from '@strapi/design-system/v2';
+import { useFilter, useCollator } from '@strapi/helper-plugin';
 
-import { matchByTitle } from './utils';
 import getTrad from '../../../utils/getTrad';
 import { makeSelectModelLinks } from '../selectors';
 
 const LeftMenu = () => {
   const [search, setSearch] = useState('');
-  const { formatMessage } = useIntl();
+  const { formatMessage, locale } = useIntl();
   const modelLinksSelector = useMemo(makeSelectModelLinks, []);
-  const { collectionTypeLinks, singleTypeLinks } = useSelector(
-    (state) => modelLinksSelector(state),
-    shallowEqual
-  );
+  const { collectionTypeLinks, singleTypeLinks } = useSelector(modelLinksSelector, shallowEqual);
 
-  const toIntl = (links) =>
-    links.map((link) => {
-      return {
-        ...link,
-        title: formatMessage({ id: link.title, defaultMessage: link.title }),
-      };
-    });
+  const { startsWith } = useFilter(locale, {
+    sensitivity: 'base',
+  });
 
-  const intlCollectionTypeLinks = toIntl(collectionTypeLinks);
-  const intlSingleTypeLinks = toIntl(singleTypeLinks);
+  /**
+   * @type {Intl.Collator}
+   */
+  const formatter = useCollator(locale, {
+    sensitivity: 'base',
+  });
 
-  const menu = [
-    {
-      id: 'collectionTypes',
-      title: {
-        id: getTrad('components.LeftMenu.collection-types'),
-        defaultMessage: 'Collection Types',
-      },
-      searchable: true,
-      links: matchByTitle(intlCollectionTypeLinks, search),
-    },
-    {
-      id: 'singleTypes',
-      title: {
-        id: getTrad('components.LeftMenu.single-types'),
-        defaultMessage: 'Single Types',
-      },
-      searchable: true,
-      links: matchByTitle(intlSingleTypeLinks, search),
-    },
-  ];
+  const menu = useMemo(
+    () =>
+      [
+        {
+          id: 'collectionTypes',
+          title: {
+            id: getTrad('components.LeftMenu.collection-types'),
+            defaultMessage: 'Collection Types',
+          },
+          searchable: true,
+          links: collectionTypeLinks,
+        },
+        {
+          id: 'singleTypes',
+          title: {
+            id: getTrad('components.LeftMenu.single-types'),
+            defaultMessage: 'Single Types',
+          },
+          searchable: true,
+          links: singleTypeLinks,
+        },
+      ].map((section) => ({
+        ...section,
+        links: section.links
+          /**
+           * Filter by the search value
+           */
+          .filter((link) => startsWith(link.title, search))
+          /**
+           * Sort correctly using the language
+           */
+          .sort((a, b) => formatter.compare(a.title, b.title))
+          /**
+           * Apply the formated strings to the links from react-intl
+           */
+          .map((link) => {
+            return {
+              ...link,
+              title: formatMessage({ id: link.title, defaultMessage: link.title }),
+            };
+          }),
+      })),
+    [collectionTypeLinks, search, singleTypeLinks, startsWith, formatMessage, formatter]
+  );
 
   const handleClear = () => {
     setSearch('');

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

@@ -1,12 +1,24 @@
-import { GET_DATA, RESET_PROPS, SET_CONTENT_TYPE_LINKS } from './constants';
+import { GET_INIT_DATA, RESET_INIT_DATA, SET_INIT_DATA } from './constants';
 
-export const getData = () => ({
-  type: GET_DATA,
+export const getInitData = () => ({
+  type: GET_INIT_DATA,
 });
 
-export const resetProps = () => ({ type: RESET_PROPS });
+export const resetInitData = () => ({ type: RESET_INIT_DATA });
 
-export const setContentTypeLinks = (authorizedCtLinks, authorizedStLinks, models, components) => ({
-  type: SET_CONTENT_TYPE_LINKS,
-  data: { authorizedCtLinks, authorizedStLinks, components, contentTypeSchemas: models },
+export const setInitData = ({
+  authorizedCollectionTypeLinks,
+  authorizedSingleTypeLinks,
+  contentTypeSchemas,
+  components,
+  fieldSizes,
+}) => ({
+  type: SET_INIT_DATA,
+  data: {
+    authorizedCollectionTypeLinks,
+    authorizedSingleTypeLinks,
+    components,
+    contentTypeSchemas,
+    fieldSizes,
+  },
 });

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

@@ -1,3 +1,3 @@
-export const GET_DATA = 'ContentManager/App/GET_DATA';
-export const RESET_PROPS = 'ContentManager/App/RESET_PROPS';
-export const SET_CONTENT_TYPE_LINKS = 'ContentManager/App/SET_CONTENT_TYPE_LINKS';
+export const GET_INIT_DATA = 'ContentManager/App/GET_INIT_DATA';
+export const RESET_INIT_DATA = 'ContentManager/App/RESET_INIT_DATA';
+export const SET_INIT_DATA = 'ContentManager/App/SET_INIT_DATA';

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

@@ -4,7 +4,7 @@ import { Switch, Route, useRouteMatch, Redirect, useLocation } from 'react-route
 import {
   CheckPagePermissions,
   LoadingIndicatorPage,
-  NotFound,
+  AnErrorOccurred,
   useGuidedTour,
 } from '@strapi/helper-plugin';
 import { Layout, HeaderLayout, Main } from '@strapi/design-system';
@@ -20,13 +20,14 @@ import NoContentType from '../NoContentType';
 import NoPermissions from '../NoPermissions';
 import SingleTypeRecursivePath from '../SingleTypeRecursivePath';
 import LeftMenu from './LeftMenu';
-import useModels from './useModels';
+import useContentManagerInitData from './useContentManagerInitData';
 
 const cmPermissions = permissions.contentManager;
 
 const App = () => {
   const contentTypeMatch = useRouteMatch(`/content-manager/:kind/:uid`);
-  const { status, collectionTypeLinks, singleTypeLinks, models, refetchData } = useModels();
+  const { status, collectionTypeLinks, singleTypeLinks, models, refetchData } =
+    useContentManagerInitData();
   const authorisedModels = sortBy([...collectionTypeLinks, ...singleTypeLinks], (model) =>
     model.title.toLowerCase()
   );
@@ -104,7 +105,7 @@ const App = () => {
           <Route path="/content-manager/no-content-types">
             <NoContentType />
           </Route>
-          <Route path="" component={NotFound} />
+          <Route path="" component={AnErrorOccurred} />
         </Switch>
       </ModelsContext.Provider>
     </Layout>

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

@@ -4,7 +4,7 @@
  */
 /* eslint-disable consistent-return */
 import produce from 'immer';
-import { GET_DATA, RESET_PROPS, SET_CONTENT_TYPE_LINKS } from './constants';
+import { GET_INIT_DATA, RESET_INIT_DATA, SET_INIT_DATA } from './constants';
 
 const initialState = {
   components: [],
@@ -20,22 +20,23 @@ const initialState = {
 const mainReducer = (state = initialState, action) =>
   produce(state, (draftState) => {
     switch (action.type) {
-      case GET_DATA: {
+      case GET_INIT_DATA: {
         draftState.status = 'loading';
         break;
       }
-      case RESET_PROPS: {
+      case RESET_INIT_DATA: {
         return initialState;
       }
-      case SET_CONTENT_TYPE_LINKS: {
-        draftState.collectionTypeLinks = action.data.authorizedCtLinks.filter(
+      case SET_INIT_DATA: {
+        draftState.collectionTypeLinks = action.data.authorizedCollectionTypeLinks.filter(
           ({ isDisplayed }) => isDisplayed
         );
-        draftState.singleTypeLinks = action.data.authorizedStLinks.filter(
+        draftState.singleTypeLinks = action.data.authorizedSingleTypeLinks.filter(
           ({ isDisplayed }) => isDisplayed
         );
         draftState.components = action.data.components;
         draftState.models = action.data.contentTypeSchemas;
+        draftState.fieldSizes = action.data.fieldSizes;
         draftState.status = 'resolved';
         break;
       }

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

@@ -23,10 +23,13 @@ const makeSelectModelAndComponentSchemas = () =>
     schemas: [...components, ...models],
   }));
 
+const selectFieldSizes = createSelector(selectAppDomain(), (state) => state.fieldSizes);
+
 export default makeSelectApp;
 export {
   makeSelectModelAndComponentSchemas,
   makeSelectModelLinks,
   makeSelectModels,
+  selectFieldSizes,
   selectAppDomain,
 };

package/admin/src/content-manager/pages/App/{useModels.js → useContentManagerInitData.js}

@@ -11,11 +11,11 @@ import axios from 'axios';
 import { useIntl } from 'react-intl';
 import { MUTATE_COLLECTION_TYPES_LINKS, MUTATE_SINGLE_TYPES_LINKS } from '../../../exposedHooks';
 import { getRequestUrl, getTrad } from '../../utils';
-import { getData, resetProps, setContentTypeLinks } from './actions';
+import { getInitData, resetInitData, setInitData } from './actions';
 import { selectAppDomain } from './selectors';
 import getContentTypeLinks from './utils/getContentTypeLinks';
 
-const useModels = () => {
+const useContentManagerInitData = () => {
   const dispatch = useDispatch();
   const toggleNotification = useNotification();
   const state = useSelector(selectAppDomain());
@@ -29,22 +29,14 @@ const useModels = () => {
   const { get } = useFetchClient();
 
   const fetchData = async () => {
-    dispatch(getData());
+    dispatch(getInitData());
 
     try {
-      const [
-        {
-          data: { data: components },
-        },
-        {
-          data: { data: models },
+      const {
+        data: {
+          data: { components, contentTypes: models, fieldSizes },
         },
-      ] = await Promise.all(
-        ['components', 'content-types'].map((endPoint) =>
-          get(getRequestUrl(endPoint), { cancelToken: source.token })
-        )
-      );
-
+      } = await get(getRequestUrl('init'), { cancelToken: source.token });
       notifyStatus(
         formatMessage({
           id: getTrad('App.schemas.data-loaded'),
@@ -52,22 +44,31 @@ const useModels = () => {
         })
       );
 
-      const { authorizedCtLinks, authorizedStLinks } = await getContentTypeLinks(
-        models,
-        allPermissions,
-        toggleNotification
-      );
-
-      const { ctLinks } = runHookWaterfall(MUTATE_COLLECTION_TYPES_LINKS, {
-        ctLinks: authorizedCtLinks,
+      const unmutatedContentTypeLinks = await getContentTypeLinks({
         models,
+        userPermissions: allPermissions,
+        toggleNotification,
       });
-      const { stLinks } = runHookWaterfall(MUTATE_SINGLE_TYPES_LINKS, {
-        stLinks: authorizedStLinks,
+
+      const { ctLinks: authorizedCollectionTypeLinks } = runHookWaterfall(
+        MUTATE_COLLECTION_TYPES_LINKS,
+        {
+          ctLinks: unmutatedContentTypeLinks.authorizedCollectionTypeLinks,
+          models,
+        }
+      );
+      const { stLinks: authorizedSingleTypeLinks } = runHookWaterfall(MUTATE_SINGLE_TYPES_LINKS, {
+        stLinks: unmutatedContentTypeLinks.authorizedSingleTypeLinks,
         models,
       });
 
-      const actionToDispatch = setContentTypeLinks(ctLinks, stLinks, models, components);
+      const actionToDispatch = setInitData({
+        authorizedCollectionTypeLinks,
+        authorizedSingleTypeLinks,
+        contentTypeSchemas: models,
+        components,
+        fieldSizes,
+      });
 
       dispatch(actionToDispatch);
     } catch (err) {
@@ -88,7 +89,7 @@ const useModels = () => {
 
     return () => {
       source.cancel('Operation canceled by the user.');
-      dispatch(resetProps());
+      dispatch(resetInitData());
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [dispatch, toggleNotification]);
@@ -96,4 +97,4 @@ const useModels = () => {
   return { ...state, refetchData: fetchDataRef.current };
 };
 
-export default useModels;
+export default useContentManagerInitData;

package/admin/src/content-manager/pages/App/utils/generateModelsLinks.js

@@ -52,12 +52,12 @@ const generateModelsLinks = (models, modelsConfigurations) => {
   const [collectionTypes, singleTypes] = sortBy(groupedModels, 'name');
 
   return {
-    collectionTypesSectionLinks: generateLinks(
+    collectionTypeSectionLinks: generateLinks(
       collectionTypes?.links || [],
       'collectionTypes',
       modelsConfigurations
     ),
-    singleTypesSectionLinks: generateLinks(singleTypes?.links ?? [], 'singleTypes'),
+    singleTypeSectionLinks: generateLinks(singleTypes?.links ?? [], 'singleTypes'),
   };
 };
 

package/admin/src/content-manager/pages/App/utils/getContentTypeLinks.js

@@ -3,36 +3,38 @@ import generateModelsLinks from './generateModelsLinks';
 import checkPermissions from './checkPermissions';
 import { getRequestUrl } from '../../../utils';
 
-const getContentTypeLinks = async (models, userPermissions, toggleNotification) => {
+const getContentTypeLinks = async ({ models, userPermissions, toggleNotification }) => {
   const { get } = getFetchClient();
   try {
     const {
       data: { data: contentTypeConfigurations },
     } = await get(getRequestUrl('content-types-settings'));
 
-    const { collectionTypesSectionLinks, singleTypesSectionLinks } = generateModelsLinks(
+    const { collectionTypeSectionLinks, singleTypeSectionLinks } = generateModelsLinks(
       models,
       contentTypeConfigurations
     );
 
-    // Content Types verifications
-    const ctLinksPermissionsPromises = checkPermissions(
-      userPermissions,
-      collectionTypesSectionLinks
+    // Collection Types verifications
+    const collectionTypeLinksPermissions = await Promise.all(
+      checkPermissions(userPermissions, collectionTypeSectionLinks)
     );
-    const ctLinksPermissions = await Promise.all(ctLinksPermissionsPromises);
-    const authorizedCtLinks = collectionTypesSectionLinks.filter(
-      (_, index) => ctLinksPermissions[index]
+    const authorizedCollectionTypeLinks = collectionTypeSectionLinks.filter(
+      (_, index) => collectionTypeLinksPermissions[index]
     );
 
     // Single Types verifications
-    const stLinksPermissionsPromises = checkPermissions(userPermissions, singleTypesSectionLinks);
-    const stLinksPermissions = await Promise.all(stLinksPermissionsPromises);
-    const authorizedStLinks = singleTypesSectionLinks.filter(
-      (_, index) => stLinksPermissions[index]
+    const singleTypeLinksPermissions = await Promise.all(
+      checkPermissions(userPermissions, singleTypeSectionLinks)
+    );
+    const authorizedSingleTypeLinks = singleTypeSectionLinks.filter(
+      (_, index) => singleTypeLinksPermissions[index]
     );
 
-    return { authorizedCtLinks, authorizedStLinks };
+    return {
+      authorizedCollectionTypeLinks,
+      authorizedSingleTypeLinks,
+    };
   } catch (err) {
     console.error(err);
 
@@ -41,7 +43,7 @@ const getContentTypeLinks = async (models, userPermissions, toggleNotification)
       message: { id: 'notification.error' },
     });
 
-    return { authorizedCtLinks: [], authorizedStLinks: [], contentTypes: [] };
+    return { authorizedCollectionTypeLinks: [], authorizedSingleTypeLinks: [] };
   }
 };
 

package/admin/src/content-manager/pages/EditSettingsView/components/ModalForm.js

@@ -6,7 +6,7 @@ import { useSelector, shallowEqual } from 'react-redux';
 import { useIntl } from 'react-intl';
 import { useLayoutDnd } from '../../../hooks';
 import { createPossibleMainFieldsForModelsAndComponents, getInputProps } from '../utils';
-import { makeSelectModelAndComponentSchemas } from '../../App/selectors';
+import { makeSelectModelAndComponentSchemas, selectFieldSizes } from '../../App/selectors';
 import getTrad from '../../../utils/getTrad';
 import GenericInput from './GenericInput';
 
@@ -17,8 +17,6 @@ const FIELD_SIZES = [
   [12, '100%'],
 ];
 
-const NON_RESIZABLE_FIELD_TYPES = ['dynamiczone', 'component', 'json', 'richtext'];
-
 const TIME_FIELD_OPTIONS = [1, 5, 10, 15, 30, 60];
 
 const TIME_FIELD_TYPES = ['datetime', 'time'];
@@ -28,6 +26,7 @@ const ModalForm = ({ onMetaChange, onSizeChange }) => {
   const { modifiedData, selectedField, attributes, fieldForm } = useLayoutDnd();
   const schemasSelector = useMemo(makeSelectModelAndComponentSchemas, []);
   const { schemas } = useSelector((state) => schemasSelector(state), shallowEqual);
+  const fieldSizes = useSelector(selectFieldSizes);
 
   const formToDisplay = useMemo(() => {
     if (!selectedField) {
@@ -103,7 +102,9 @@ const ModalForm = ({ onMetaChange, onSizeChange }) => {
     );
   });
 
-  const canResize = !NON_RESIZABLE_FIELD_TYPES.includes(attributes[selectedField].type);
+  // Check for a custom input provided by a custom field, or use the default one for that type
+  const { type, customField } = attributes[selectedField];
+  const { isResizable } = fieldSizes[customField] ?? fieldSizes[type];
 
   const sizeField = (
     <GridItem col={6} key="size">
@@ -152,7 +153,7 @@ const ModalForm = ({ onMetaChange, onSizeChange }) => {
   return (
     <>
       {metaFields}
-      {canResize && sizeField}
+      {isResizable && sizeField}
       {hasTimePicker && timeStepField}
     </>
   );

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

@@ -26,6 +26,7 @@ import {
   Divider,
 } from '@strapi/design-system';
 import { ArrowLeft, Check } from '@strapi/icons';
+import { useSelector } from 'react-redux';
 import { getTrad } from '../../utils';
 import reducer, { initialState } from './reducer';
 import init from './init';
@@ -34,6 +35,7 @@ import ModalForm from './components/FormModal';
 import LayoutDndProvider from '../../components/LayoutDndProvider';
 import { unformatLayout } from './utils/layout';
 import putCMSettingsEV from './utils/api';
+import { selectFieldSizes } from '../App/selectors';
 
 const EditSettingsView = ({ mainLayout, components, isContentTypeView, slug, updateLayout }) => {
   const [reducerState, dispatch] = useReducer(reducer, initialState, () =>
@@ -49,6 +51,7 @@ const EditSettingsView = ({ mainLayout, components, isContentTypeView, slug, upd
   const { formatMessage } = useIntl();
   const modelName = get(mainLayout, ['info', 'displayName'], '');
   const attributes = get(modifiedData, ['attributes'], {});
+  const fieldSizes = useSelector(selectFieldSizes);
 
   const entryTitleOptions = Object.keys(attributes).filter((attr) => {
     const type = get(attributes, [attr, 'type'], '');
@@ -318,6 +321,7 @@ const EditSettingsView = ({ mainLayout, components, isContentTypeView, slug, upd
                     dispatch({
                       type: 'ON_ADD_FIELD',
                       name: field,
+                      fieldSizes,
                     });
                   }}
                   onRemoveField={(rowId, index) => {

package/admin/src/content-manager/pages/EditSettingsView/reducer.js

@@ -2,9 +2,10 @@ import produce from 'immer';
 import set from 'lodash/set';
 import get from 'lodash/get';
 import cloneDeep from 'lodash/cloneDeep';
-
 import { arrayMoveItem } from '../../utils';
-import { formatLayout, getDefaultInputSize, getFieldSize, setFieldSize } from './utils/layout';
+import { formatLayout, getFieldSize, setFieldSize } from './utils/layout';
+
+const DEFAULT_FIELD_SIZE = 6;
 
 const initialState = {
   fieldForm: {},
@@ -29,9 +30,14 @@ const reducer = (state = initialState, action) =>
       }
       case 'ON_ADD_FIELD': {
         const newState = cloneDeep(state);
-        const size = getDefaultInputSize(
-          get(newState, ['modifiedData', 'attributes', action.name, 'type'], '')
-        );
+        const attribute = get(newState, ['modifiedData', 'attributes', action.name], {});
+
+        // Get the default size, checking custom fields first, then the type and generic defaults
+        const size =
+          action.fieldSizes[attribute?.customField]?.default ??
+          action.fieldSizes[attribute?.type]?.default ??
+          DEFAULT_FIELD_SIZE;
+
         const listSize = get(newState, layoutPathEdit, []).length;
         const actualRowContentPath = [...layoutPathEdit, listSize - 1, 'rowContent'];
         const rowContentToSet = get(newState, actualRowContentPath, []);
@@ -149,8 +155,7 @@ const reducer = (state = initialState, action) =>
         draftState.metaToEdit = action.name;
         draftState.metaForm = {
           metadata: get(state, ['modifiedData', 'metadatas', action.name, 'edit'], {}),
-          size:
-            getFieldSize(action.name, state.modifiedData?.layouts?.edit) ?? getDefaultInputSize(),
+          size: getFieldSize(action.name, state.modifiedData?.layouts?.edit) ?? DEFAULT_FIELD_SIZE,
         };
 
         break;

package/admin/src/content-manager/pages/EditSettingsView/utils/layout.js

@@ -1,4 +1,3 @@
-/* eslint-disable indent */
 const getRowSize = (arr) => arr.reduce((sum, value) => sum + value.size, 0);
 
 const createLayout = (arr) => {
@@ -75,26 +74,6 @@ const unformatLayout = (arr) => {
   }, []);
 };
 
-const getDefaultInputSize = (type) => {
-  switch (type) {
-    case 'boolean':
-    case 'date':
-    case 'integer':
-    case 'float':
-    case 'biginteger':
-    case 'decimal':
-    case 'time':
-      return 4;
-    case 'json':
-    case 'component':
-    case 'richtext':
-    case 'dynamiczone':
-      return 12;
-    default:
-      return 6;
-  }
-};
-
 const getFieldSize = (name, layouts = []) => {
   return layouts.reduce((acc, { rowContent }) => {
     const size = rowContent.find((row) => row.name === name)?.size ?? null;
@@ -124,12 +103,4 @@ const setFieldSize = (name, size, layouts = []) => {
   });
 };
 
-export {
-  createLayout,
-  formatLayout,
-  getDefaultInputSize,
-  getFieldSize,
-  setFieldSize,
-  getRowSize,
-  unformatLayout,
-};
+export { createLayout, formatLayout, getFieldSize, setFieldSize, getRowSize, unformatLayout };

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

@@ -8,14 +8,14 @@ import PropTypes from 'prop-types';
 import { getTrad } from '../../../utils';
 import { connect, select } from './utils';
 
-const DeleteLink = ({ isCreatingEntry, onDelete, onDeleteSucceeded, trackerProperty }) => {
-  const [showWarningDelete, setWarningDelete] = useState(false);
+const DeleteLink = ({ onDelete, trackerProperty }) => {
+  const [displayDeleteConfirmation, setDisplayDeleteConfirmation] = useState(false);
   const [isModalConfirmButtonLoading, setIsModalConfirmButtonLoading] = useState(false);
   const { formatMessage } = useIntl();
   const { formatAPIError } = useAPIErrorHandler(getTrad);
   const toggleNotification = useNotification();
 
-  const toggleWarningDelete = () => setWarningDelete((prevState) => !prevState);
+  const toggleWarningDelete = () => setDisplayDeleteConfirmation((prevState) => !prevState);
 
   const handleConfirmDelete = async () => {
     try {
@@ -27,7 +27,6 @@ const DeleteLink = ({ isCreatingEntry, onDelete, onDeleteSucceeded, trackerPrope
       setIsModalConfirmButtonLoading(false);
 
       toggleWarningDelete();
-      onDeleteSucceeded();
     } catch (err) {
       setIsModalConfirmButtonLoading(false);
       toggleWarningDelete();
@@ -38,10 +37,6 @@ const DeleteLink = ({ isCreatingEntry, onDelete, onDeleteSucceeded, trackerPrope
     }
   };
 
-  if (isCreatingEntry) {
-    return null;
-  }
-
   return (
     <>
       <Button onClick={toggleWarningDelete} size="S" startIcon={<Trash />} variant="danger-light">
@@ -50,9 +45,10 @@ const DeleteLink = ({ isCreatingEntry, onDelete, onDeleteSucceeded, trackerPrope
           defaultMessage: 'Delete this entry',
         })}
       </Button>
+
       <ConfirmDialog
         isConfirmButtonLoading={isModalConfirmButtonLoading}
-        isOpen={showWarningDelete}
+        isOpen={displayDeleteConfirmation}
         onConfirm={handleConfirmDelete}
         onToggleDialog={toggleWarningDelete}
       />
@@ -61,9 +57,7 @@ const DeleteLink = ({ isCreatingEntry, onDelete, onDeleteSucceeded, trackerPrope
 };
 
 DeleteLink.propTypes = {
-  isCreatingEntry: PropTypes.bool.isRequired,
   onDelete: PropTypes.func.isRequired,
-  onDeleteSucceeded: PropTypes.func.isRequired,
   trackerProperty: PropTypes.object.isRequired,
 };
 

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

@@ -76,7 +76,6 @@ const EditView = ({ allowedActions, isSingleType, goBack, slug, id, origin, user
         isCreatingEntry,
         isLoadingForData,
         onDelete,
-        onDeleteSucceeded,
         onPost,
         onPublish,
         onDraftRelationCheck,
@@ -220,12 +219,8 @@ const EditView = ({ allowedActions, isSingleType, goBack, slug, id, origin, user
                             </LinkButton>
                           </CheckPermissions>
 
-                          {allowedActions.canDelete && (
-                            <DeleteLink
-                              isCreatingEntry={isCreatingEntry}
-                              onDelete={onDelete}
-                              onDeleteSucceeded={onDeleteSucceeded}
-                            />
+                          {allowedActions.canDelete && !isCreatingEntry && (
+                            <DeleteLink onDelete={onDelete} />
                           )}
                         </Flex>
                       </Box>