@strapi/admin 4.14.5 → 4.15.0

package/admin/src/{constants.js → constants.ts}

@@ -88,3 +88,51 @@ export const ADMIN_PERMISSIONS_CE = {
     },
   },
 };
+
+export const HOOKS = {
+  /**
+   * Hook that allows to mutate the displayed headers of the list view table
+   * @constant
+   * @type {string}
+   */
+  INJECT_COLUMN_IN_TABLE: 'Admin/CM/pages/ListView/inject-column-in-table',
+
+  /**
+   * Hook that allows to mutate the CM's collection types links pre-set filters
+   * @constant
+   * @type {string}
+   */
+  MUTATE_COLLECTION_TYPES_LINKS: 'Admin/CM/pages/App/mutate-collection-types-links',
+
+  /**
+   * Hook that allows to mutate the CM's edit view layout
+   * @constant
+   * @type {string}
+   */
+  MUTATE_EDIT_VIEW_LAYOUT: 'Admin/CM/pages/EditView/mutate-edit-view-layout',
+
+  /**
+   * Hook that allows to mutate the CM's single types links pre-set filters
+   * @constant
+   * @type {string}
+   */
+  MUTATE_SINGLE_TYPES_LINKS: 'Admin/CM/pages/App/mutate-single-types-links',
+};
+
+export const INJECTION_ZONES = {
+  admin: {
+    // Temporary injection zone, support for the react-tour plugin in foodadvisor
+    tutorials: {
+      links: [],
+    },
+  },
+  contentManager: {
+    editView: { informations: [], 'right-links': [] },
+    listView: {
+      actions: [],
+      deleteModalAdditionalInfos: [],
+      publishModalAdditionalInfos: [],
+      unpublishModalAdditionalInfos: [],
+    },
+  },
+};

package/admin/src/content-manager/components/BlocksEditor/Toolbar/index.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 
 import * as Toolbar from '@radix-ui/react-toolbar';
-import { Flex, Icon, Tooltip, Select, Option, Box, Typography } from '@strapi/design-system';
+import { Flex, Icon, Tooltip, SingleSelect, SingleSelectOption, Box } from '@strapi/design-system';
 import { pxToRem, prefixFileUrlWithBackendUrl, useLibrary } from '@strapi/helper-plugin';
 import { Link } from '@strapi/icons';
 import PropTypes from 'prop-types';
@@ -42,6 +42,29 @@ const FlexButton = styled(Flex).attrs({ as: 'button' })`
   }
 `;
 
+const SelectWrapper = styled(Box)`
+  // Styling changes to SingleSelect component don't work, so adding wrapper to target SingleSelect
+  div[role='combobox'] {
+    border: none;
+    cursor: pointer;
+
+    &[aria-disabled='false']:hover {
+      cursor: pointer;
+      background: ${({ theme }) => theme.colors.primary100};
+    }
+
+    &[aria-disabled] {
+      background: transparent;
+      cursor: inherit;
+
+      // Select text and icons should also have disabled color
+      span {
+        color: ${({ theme }) => theme.colors.neutral600};
+      }
+    }
+  }
+`;
+
 const ToolbarButton = ({ icon, name, label, isActive, disabled, handleClick }) => {
   const editor = useSlate();
   const { formatMessage } = useIntl();
@@ -152,8 +175,6 @@ const toggleBlock = (editor, value) => {
   ReactEditor.focus(editor);
 };
 
-const ALLOWED_MEDIA_TYPE = 'images';
-
 const IMAGE_SCHEMA_FIELDS = [
   'name',
   'alternativeText',
@@ -189,12 +210,30 @@ const ImageDialog = ({ handleClose }) => {
   const MediaLibraryDialog = components['media-library'];
 
   const insertImages = (images) => {
-    // Image node created using select or existing selection node needs to be deleted before adding new image nodes
+    // If the selection is inside a list, split the list so that the modified block is outside of it
+    Transforms.unwrapNodes(editor, {
+      match: (node) => node.type === 'list',
+      split: true,
+    });
+
+    // Save the path of the node that is being replaced by an image to insert the images there later
+    // It's the closest full block node above the selection
+    const [, pathToInsert] = Editor.above(editor, {
+      match(node) {
+        const isInlineNode = ['text', 'link'].includes(node.type);
+
+        return !isInlineNode;
+      },
+    });
+
+    // Remove the previous node that is being replaced by an image
     Transforms.removeNodes(editor);
-    images.forEach((img) => {
-      const image = { type: 'image', image: img, children: [{ type: 'text', text: '' }] };
-      Transforms.insertNodes(editor, image);
+
+    // Convert images to nodes and insert them
+    const nodesToInsert = images.map((image) => {
+      return { type: 'image', image, children: [{ type: 'text', text: '' }] };
     });
+    Transforms.insertNodes(editor, nodesToInsert, { at: pathToInsert });
   };
 
   const handleSelectAssets = (images) => {
@@ -221,7 +260,7 @@ const ImageDialog = ({ handleClose }) => {
 
   return (
     <MediaLibraryDialog
-      allowedTypes={[ALLOWED_MEDIA_TYPE]}
+      allowedTypes={['images']}
       onClose={handleClose}
       onSelectAssets={handleSelectAssets}
     />
@@ -340,28 +379,30 @@ const BlocksDropdown = ({ disabled }) => {
 
   return (
     <>
-      <Select
-        startIcon={<Icon as={blocks[blockSelected].icon} />}
-        onChange={selectOption}
-        placeholder={blocks[blockSelected].label}
-        value={blockSelected}
-        onCloseAutoFocus={preventSelectFocus}
-        aria-label={formatMessage({
-          id: 'components.Blocks.blocks.selectBlock',
-          defaultMessage: 'Select a block',
-        })}
-        disabled={disabled}
-      >
-        {blockKeysToInclude.map((key) => (
-          <BlockOption
-            key={key}
-            value={key}
-            label={blocks[key].label}
-            icon={blocks[key].icon}
-            blockSelected={blockSelected}
-          />
-        ))}
-      </Select>
+      <SelectWrapper>
+        <SingleSelect
+          startIcon={<Icon as={blocks[blockSelected].icon} />}
+          onChange={selectOption}
+          placeholder={blocks[blockSelected].label}
+          value={blockSelected}
+          onCloseAutoFocus={preventSelectFocus}
+          aria-label={formatMessage({
+            id: 'components.Blocks.blocks.selectBlock',
+            defaultMessage: 'Select a block',
+          })}
+          disabled={disabled}
+        >
+          {blockKeysToInclude.map((key) => (
+            <BlockOption
+              key={key}
+              value={key}
+              label={blocks[key].label}
+              icon={blocks[key].icon}
+              blockSelected={blockSelected}
+            />
+          ))}
+        </SingleSelect>
+      </SelectWrapper>
       {isMediaLibraryVisible && <ImageDialog handleClose={() => setIsMediaLibraryVisible(false)} />}
     </>
   );
@@ -377,12 +418,12 @@ const BlockOption = ({ value, icon, label, blockSelected }) => {
   const isSelected = value === blockSelected;
 
   return (
-    <Option
+    <SingleSelectOption
       startIcon={<Icon as={icon} color={isSelected ? 'primary600' : 'neutral600'} />}
       value={value}
     >
       {formatMessage(label)}
-    </Option>
+    </SingleSelectOption>
   );
 };
 
@@ -583,15 +624,6 @@ LinkButton.propTypes = {
   disabled: PropTypes.bool.isRequired,
 };
 
-// TODO: Remove after the RTE Blocks Beta release
-const BetaTag = styled(Box)`
-  background-color: ${({ theme }) => theme.colors.secondary100};
-  border: ${({ theme }) => `1px solid ${theme.colors.secondary200}`};
-  border-radius: ${({ theme }) => theme.borderRadius};
-  font-size: ${({ theme }) => theme.fontSizes[0]};
-  padding: ${({ theme }) => `${2 / 16}rem ${theme.spaces[1]}`};
-`;
-
 const BlocksToolbar = ({ disabled }) => {
   const modifiers = useModifiersStore();
   const blocks = useBlocksStore();
@@ -624,9 +656,9 @@ const BlocksToolbar = ({ disabled }) => {
 
   return (
     <Toolbar.Root aria-disabled={disabled} asChild>
-      {/* Remove after the RTE Blocks Beta release (paddingRight and width) */}
-      <ToolbarWrapper gap={2} padding={2} paddingRight={4} width="100%">
+      <ToolbarWrapper gap={2} padding={2}>
         <BlocksDropdown disabled={disabled} />
+        <Separator />
         <Toolbar.ToggleGroup type="multiple" asChild>
           <Flex gap={1} marginLeft={1}>
             {Object.entries(modifiers).map(([name, modifier]) => (
@@ -650,14 +682,6 @@ const BlocksToolbar = ({ disabled }) => {
             <ListButton block={blocks['list-ordered']} disabled={disabled} />
           </Flex>
         </Toolbar.ToggleGroup>
-        {/* TODO: Remove after the RTE Blocks Beta release */}
-        <Flex grow={1} justifyContent="flex-end">
-          <BetaTag>
-            <Typography textColor="secondary600" variant="sigma">
-              BETA
-            </Typography>
-          </BetaTag>
-        </Flex>
       </ToolbarWrapper>
     </Toolbar.Root>
   );

package/admin/src/content-manager/components/BlocksEditor/hooks/useBlocksStore.js

@@ -2,15 +2,16 @@ import * as React from 'react';
 
 import {
   Box,
+  Icon,
   Typography,
   BaseLink,
   Popover,
-  IconButton,
   Field,
   FieldLabel,
   FieldInput,
   Flex,
   Button,
+  Tooltip,
 } from '@strapi/design-system';
 import {
   Code,
@@ -164,10 +165,31 @@ const handleBackspaceKeyOnList = (editor, event) => {
   const [currentListItem, currentListItemPath] = Editor.parent(editor, editor.selection.anchor);
   const [currentList, currentListPath] = Editor.parent(editor, currentListItemPath);
   const isListEmpty = currentList.children.length === 1 && currentListItem.children[0].text === '';
+  const isNodeStart = Editor.isStart(editor, editor.selection.anchor, currentListItemPath);
+  const isFocusAtTheBeginningOfAChild =
+    editor.selection.focus.offset === 0 && editor.selection.focus.path.at(-1) === 0;
 
   if (isListEmpty) {
     event.preventDefault();
     replaceListWithEmptyBlock(editor, currentListPath);
+  } else if (isNodeStart) {
+    Transforms.liftNodes(editor, {
+      match: (n) => n.type === 'list-item',
+    });
+    // Transforms the list item into a paragraph
+    Transforms.setNodes(
+      editor,
+      { type: 'paragraph' },
+      {
+        hanging: true,
+      }
+    );
+  } else if (isFocusAtTheBeginningOfAChild) {
+    Transforms.liftNodes(editor, {
+      match: (n) => n.type === 'list-item',
+    });
+    // If the focus is at the beginning of a child node we need to replace it with a paragraph
+    Transforms.setNodes(editor, { type: 'paragraph' });
   }
 };
 
@@ -255,6 +277,18 @@ Image.propTypes = {
   }).isRequired,
 };
 
+// Make sure the tooltip is above the popover
+const TooltipCustom = styled(Tooltip)`
+  z-index: 6;
+`;
+
+// Used for the Edit and Cancel buttons in the link popover
+const CustomButton = styled(Button)`
+  & > span {
+    line-height: normal;
+  }
+`;
+
 const Link = React.forwardRef(({ element, children, ...attributes }, forwardedRef) => {
   const { formatMessage } = useIntl();
   const editor = useSlate();
@@ -376,25 +410,49 @@ const Link = React.forwardRef(({ element, children, ...attributes }, forwardedRe
                 </StyledBaseLink>
               </Typography>
               <Flex justifyContent="end" width="100%" gap={2}>
-                <IconButton
-                  icon={<Trash />}
-                  size="L"
-                  variant="danger"
-                  onClick={() => removeLink(editor)}
-                  label={formatMessage({
+                <TooltipCustom
+                  description={formatMessage({
                     id: 'components.Blocks.popover.delete',
                     defaultMessage: 'Delete',
                   })}
-                />
-                <IconButton
-                  icon={<Pencil />}
-                  size="L"
-                  onClick={() => setIsEditing(true)}
-                  label={formatMessage({
+                >
+                  <CustomButton
+                    size="S"
+                    width="2rem"
+                    variant="danger-light"
+                    onClick={() => removeLink(editor)}
+                    aria-label={formatMessage({
+                      id: 'components.Blocks.popover.delete',
+                      defaultMessage: 'Delete',
+                    })}
+                    type="button"
+                    justifyContent="center"
+                  >
+                    <Icon width={3} height={3} as={Trash} />
+                  </CustomButton>
+                </TooltipCustom>
+
+                <TooltipCustom
+                  description={formatMessage({
                     id: 'components.Blocks.popover.edit',
                     defaultMessage: 'Edit',
                   })}
-                />
+                >
+                  <CustomButton
+                    size="S"
+                    width="2rem"
+                    variant="tertiary"
+                    onClick={() => setIsEditing(true)}
+                    aria-label={formatMessage({
+                      id: 'components.Blocks.popover.edit',
+                      defaultMessage: 'Edit',
+                    })}
+                    type="button"
+                    justifyContent="center"
+                  >
+                    <Icon width={3} height={3} as={Pencil} />
+                  </CustomButton>
+                </TooltipCustom>
               </Flex>
             </Flex>
           )}

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

@@ -1,4 +1,4 @@
-import { createSelector } from 'reselect';
+import { createSelector } from '@reduxjs/toolkit';
 
 import { initialState } from './reducer';
 

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

@@ -11,13 +11,15 @@ import axios from 'axios';
 import { useIntl } from 'react-intl';
 import { useDispatch, useSelector } from 'react-redux';
 
-import { MUTATE_COLLECTION_TYPES_LINKS, MUTATE_SINGLE_TYPES_LINKS } from '../../../exposedHooks';
+import { HOOKS } from '../../../constants';
 import { getTrad } from '../../utils';
 
 import { getInitData, resetInitData, setInitData } from './actions';
 import { selectAppDomain } from './selectors';
 import getContentTypeLinks from './utils/getContentTypeLinks';
 
+const { MUTATE_COLLECTION_TYPES_LINKS, MUTATE_SINGLE_TYPES_LINKS } = HOOKS;
+
 const useContentManagerInitData = () => {
   const dispatch = useDispatch();
   const toggleNotification = useNotification();

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

@@ -1,4 +1,4 @@
-import { createSelector } from 'reselect';
+import { createSelector } from '@reduxjs/toolkit';
 
 import { createAttributesLayout, getCustomFieldUidsFromLayout } from './utils';
 

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

@@ -4,13 +4,15 @@ import { LoadingIndicatorPage, useQueryParams, useStrapiApp } from '@strapi/help
 import PropTypes from 'prop-types';
 import { useDispatch, useSelector } from 'react-redux';
 
-import { MUTATE_EDIT_VIEW_LAYOUT } from '../../../exposedHooks';
+import { HOOKS } from '../../../constants';
 import { useSyncRbac } from '../../hooks';
 
 import { resetProps, setLayout } from './actions';
 import Permissions from './Permissions';
 import selectLayout from './selectors';
 
+const { MUTATE_EDIT_VIEW_LAYOUT } = HOOKS;
+
 const EditViewLayoutManager = ({ layout, ...rest }) => {
   const currentLayout = useSelector(selectLayout);
   const dispatch = useDispatch();

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

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { BaseCheckbox, IconButton, Td, Flex } from '@strapi/design-system';
+import { BaseCheckbox, IconButton, Flex } from '@strapi/design-system';
 import { useTracking, useTableContext, Table } from '@strapi/helper-plugin';
 import { Trash, Duplicate, Pencil } from '@strapi/icons';
 import PropTypes from 'prop-types';
@@ -29,15 +29,14 @@ const CheckboxDataCell = ({ rowId, index }) => {
   );
 
   return (
-    <Td onClick={stopPropagation}>
-      <BaseCheckbox
-        aria-label={ariaLabel}
-        checked={isChecked}
-        onChange={() => {
-          onSelectRow({ name: rowId, value: !isChecked });
-        }}
-      />
-    </Td>
+    <BaseCheckbox
+      aria-label={ariaLabel}
+      checked={isChecked}
+      onClick={stopPropagation}
+      onChange={() => {
+        onSelectRow({ name: rowId, value: !isChecked });
+      }}
+    />
   );
 };
 
@@ -75,61 +74,59 @@ const EntityActionsDataCell = ({
   );
 
   return (
-    <Td>
-      <Flex gap={1} justifyContent="end" onClick={stopPropagation}>
+    <Flex gap={1} justifyContent="end" onClick={stopPropagation}>
+      <IconButton
+        forwardedAs={Link}
+        onClick={() => {
+          trackUsage('willEditEntryFromButton');
+        }}
+        to={{
+          pathname: `${pathname}/${rowId}`,
+          state: { from: pathname },
+          search: pluginsQueryParams,
+        }}
+        label={formatMessage(
+          { id: 'app.component.table.edit', defaultMessage: 'Edit {target}' },
+          { target: itemLineText }
+        )}
+        noBorder
+      >
+        <Pencil />
+      </IconButton>
+
+      {canCreate && (
+        <IconButton
+          onClick={handleCloneClick(rowId)}
+          label={formatMessage(
+            {
+              id: 'app.component.table.duplicate',
+              defaultMessage: 'Duplicate {target}',
+            },
+            { target: itemLineText }
+          )}
+          noBorder
+        >
+          <Duplicate />
+        </IconButton>
+      )}
+
+      {canDelete && (
         <IconButton
-          forwardedAs={Link}
           onClick={() => {
-            trackUsage('willEditEntryFromButton');
-          }}
-          to={{
-            pathname: `${pathname}/${rowId}`,
-            state: { from: pathname },
-            search: pluginsQueryParams,
+            trackUsage('willDeleteEntryFromList');
+            setSelectedEntries([rowId]);
+            setIsConfirmDeleteRowOpen(true);
           }}
           label={formatMessage(
-            { id: 'app.component.table.edit', defaultMessage: 'Edit {target}' },
+            { id: 'global.delete-target', defaultMessage: 'Delete {target}' },
             { target: itemLineText }
           )}
           noBorder
         >
-          <Pencil />
+          <Trash />
         </IconButton>
-
-        {canCreate && (
-          <IconButton
-            onClick={handleCloneClick(rowId)}
-            label={formatMessage(
-              {
-                id: 'app.component.table.duplicate',
-                defaultMessage: 'Duplicate {target}',
-              },
-              { target: itemLineText }
-            )}
-            noBorder
-          >
-            <Duplicate />
-          </IconButton>
-        )}
-
-        {canDelete && (
-          <IconButton
-            onClick={() => {
-              trackUsage('willDeleteEntryFromList');
-              setSelectedEntries([rowId]);
-              setIsConfirmDeleteRowOpen(true);
-            }}
-            label={formatMessage(
-              { id: 'global.delete-target', defaultMessage: 'Delete {target}' },
-              { target: itemLineText }
-            )}
-            noBorder
-          >
-            <Trash />
-          </IconButton>
-        )}
-      </Flex>
-    </Td>
+      )}
+    </Flex>
   );
 };
 

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

@@ -32,7 +32,7 @@ import { useSelector } from 'react-redux';
 import { Link, useHistory } from 'react-router-dom';
 import styled from 'styled-components';
 
-import formatAPIError from '../../../../../../utils/formatAPIErrors';
+import { formatAPIErrors } from '../../../../../../utils/formatAPIErrors';
 import { getTrad, createYupSchema } from '../../../../../utils';
 import { listViewDomain } from '../../../selectors';
 import { Body } from '../../Body';
@@ -156,7 +156,9 @@ const SelectedEntriesTableContent = ({
       <Table.Body>
         {rowsToDisplay.map((row, index) => (
           <Tr key={row.id}>
-            <Body.CheckboxDataCell rowId={row.id} index={index} />
+            <Td>
+              <Body.CheckboxDataCell rowId={row.id} index={index} />
+            </Td>
             <Td>
               <Typography>{row.id}</Typography>
             </Td>
@@ -301,7 +303,7 @@ const SelectedEntriesModalContent = ({
       onError(error) {
         toggleNotification({
           type: 'warning',
-          message: formatAPIError(error),
+          message: formatAPIErrors(error),
         });
       },
     }

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

@@ -23,7 +23,7 @@ import { useIntl } from 'react-intl';
 import { Link, useHistory } from 'react-router-dom';
 
 import { useEnterprise } from '../../../../../hooks/useEnterprise';
-import { getFullName } from '../../../../../utils';
+import { getFullName } from '../../../../../utils/getFullName';
 import { usePluginsQueryParams } from '../../../../hooks';
 import { getTrad } from '../../../../utils';
 import CellContent from '../CellContent';