@strapi/admin 4.12.0-beta.1 → 4.12.0-beta.3

package/admin/src/content-manager/components/CollectionTypeFormWrapper/index.js

@@ -301,9 +301,7 @@ const CollectionTypeFormWrapper = ({ allLayoutData, children, slug, id, origin }
     try {
       trackUsageRef.current('willCheckDraftRelations');
 
-      const endPoint = getRequestUrl(
-        `collection-types/${slug}/${id}/actions/numberOfDraftRelations`
-      );
+      const endPoint = getRequestUrl(`collection-types/${slug}/${id}/actions/countDraftRelations`);
       dispatch(setStatus('draft-relation-check-pending'));
 
       const numberOfDraftRelations = await fetchClient.get(endPoint);

package/admin/src/content-manager/components/RelationInput/components/Option.js

@@ -20,6 +20,7 @@ const StyledBullet = styled.div`
 
 export const Option = ({ publicationState, mainField, id }) => {
   const { formatMessage } = useIntl();
+  const stringifiedDisplayValue = (mainField ?? id).toString();
 
   if (publicationState) {
     const isDraft = publicationState === 'draft';
@@ -34,18 +35,18 @@ export const Option = ({ publicationState, mainField, id }) => {
     const title = isDraft ? formatMessage(draftMessage) : formatMessage(publishedMessage);
 
     return (
-      <ComboboxOption value={id} textValue={mainField ?? id}>
+      <ComboboxOption value={id} textValue={stringifiedDisplayValue}>
         <Flex>
           <StyledBullet title={title} isDraft={isDraft} />
-          <Typography ellipsis>{mainField ?? id}</Typography>
+          <Typography ellipsis>{stringifiedDisplayValue}</Typography>
         </Flex>
       </ComboboxOption>
     );
   }
 
   return (
-    <ComboboxOption value={id} textValue={mainField ?? id}>
-      {mainField ?? id}
+    <ComboboxOption value={id} textValue={stringifiedDisplayValue}>
+      {stringifiedDisplayValue}
     </ComboboxOption>
   );
 };
@@ -57,6 +58,6 @@ Option.defaultProps = {
 
 Option.propTypes = {
   id: PropTypes.number.isRequired,
-  mainField: PropTypes.string,
+  mainField: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   publicationState: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
 };

package/admin/src/content-manager/components/SingleTypeFormWrapper/index.js

@@ -159,7 +159,7 @@ const SingleTypeFormWrapper = ({ allLayoutData, children, slug }) => {
         trackUsageRef.current('willDeleteEntry', trackerProperty);
 
         const { data } = await del(getRequestUrl(slug), {
-          params: query,
+          params,
         });
 
         toggleNotification({
@@ -181,7 +181,7 @@ const SingleTypeFormWrapper = ({ allLayoutData, children, slug }) => {
         return Promise.reject(err);
       }
     },
-    [del, slug, displayErrors, toggleNotification, query, dispatch, rawQuery]
+    [del, slug, params, toggleNotification, dispatch, rawQuery, displayErrors]
   );
 
   const onPost = useCallback(
@@ -237,7 +237,7 @@ const SingleTypeFormWrapper = ({ allLayoutData, children, slug }) => {
     try {
       trackUsageRef.current('willCheckDraftRelations');
 
-      const endPoint = getRequestUrl(`${slug}/actions/numberOfDraftRelations`);
+      const endPoint = getRequestUrl(`${slug}/actions/countDraftRelations`);
       dispatch(setStatus('draft-relation-check-pending'));
 
       const numberOfDraftRelations = await fetchClient.get(endPoint);
@@ -265,7 +265,7 @@ const SingleTypeFormWrapper = ({ allLayoutData, children, slug }) => {
         endPoint,
         {},
         {
-          params: query,
+          params,
         }
       );
 
@@ -287,7 +287,7 @@ const SingleTypeFormWrapper = ({ allLayoutData, children, slug }) => {
 
       return Promise.reject(err);
     }
-  }, [post, cleanReceivedData, displayErrors, slug, query, dispatch, toggleNotification]);
+  }, [slug, dispatch, post, params, toggleNotification, cleanReceivedData, displayErrors]);
 
   const onPut = useCallback(
     async (body, trackerProperty) => {
@@ -341,7 +341,7 @@ const SingleTypeFormWrapper = ({ allLayoutData, children, slug }) => {
         endPoint,
         {},
         {
-          params: query,
+          params,
         }
       );
 
@@ -358,7 +358,7 @@ const SingleTypeFormWrapper = ({ allLayoutData, children, slug }) => {
       dispatch(setStatus('resolved'));
       displayErrors(err);
     }
-  }, [post, cleanReceivedData, toggleNotification, displayErrors, slug, dispatch, query]);
+  }, [slug, dispatch, post, params, toggleNotification, cleanReceivedData, displayErrors]);
 
   return children({
     componentsDataStructure,

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

@@ -1,6 +1,7 @@
 import React from 'react';
 
-import { Box, Button, Flex, MenuItem, SimpleMenu, Typography } from '@strapi/design-system';
+import { Box, Flex, Typography } from '@strapi/design-system';
+import { Menu } from '@strapi/design-system/v2';
 import { Plus } from '@strapi/icons';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
@@ -41,26 +42,27 @@ const DisplayedFields = ({ editLayout, fields, onRemoveField, onAddField }) => {
           {editLayout.map((row, index) => (
             <RowsLayout key={row.rowId} row={row} rowIndex={index} onRemoveField={onRemoveField} />
           ))}
-          <SimpleMenu
-            id="label"
-            label={formatMessage({
-              id: getTrad('containers.SettingPage.add.field'),
-              defaultMessage: 'Insert another field',
-            })}
-            as={Button}
-            data-testid="add-field"
-            fullWidth
-            startIcon={<Plus />}
-            endIcon={null}
-            variant="secondary"
-            disabled={fields.length === 0}
-          >
-            {fields.map((field) => (
-              <MenuItem key={field} onClick={() => onAddField(field)}>
-                {field}
-              </MenuItem>
-            ))}
-          </SimpleMenu>
+          <Menu.Root>
+            <Menu.Trigger
+              startIcon={<Plus />}
+              endIcon={null}
+              disabled={fields.length === 0}
+              fullWidth
+              variant="secondary"
+            >
+              {formatMessage({
+                id: getTrad('containers.SettingPage.add.field'),
+                defaultMessage: 'Insert another field',
+              })}
+            </Menu.Trigger>
+            <Menu.Content>
+              {fields.map((field) => (
+                <Menu.Item key={field} onSelect={() => onAddField(field)}>
+                  {field}
+                </Menu.Item>
+              ))}
+            </Menu.Content>
+          </Menu.Root>
         </Flex>
       </Box>
     </Flex>

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

@@ -105,32 +105,30 @@ const ModalForm = ({ onMetaChange, onSizeChange }) => {
   const { type, customField } = attributes[selectedField];
   const { isResizable } = fieldSizes[customField] ?? fieldSizes[type];
 
-  const sizeField = (
-    <GridItem col={6} key="size">
-      <Select
-        value={fieldForm?.size}
-        name="size"
-        onChange={(value) => {
-          onSizeChange({ name: selectedField, value });
-        }}
-        label={formatMessage({
-          id: getTrad('containers.SettingPage.editSettings.size.label'),
-          defaultMessage: 'Size',
-        })}
-      >
-        {FIELD_SIZES.map(([value, label]) => (
-          <Option key={value} value={value}>
-            {label}
-          </Option>
-        ))}
-      </Select>
-    </GridItem>
-  );
-
   return (
     <>
       {metaFields}
-      {isResizable && sizeField}
+      {isResizable && (
+        <GridItem col={6} key="size">
+          <Select
+            value={fieldForm?.size}
+            name="size"
+            onChange={(value) => {
+              onSizeChange({ name: selectedField, value });
+            }}
+            label={formatMessage({
+              id: getTrad('containers.SettingPage.editSettings.size.label'),
+              defaultMessage: 'Size',
+            })}
+          >
+            {FIELD_SIZES.map(([value, label]) => (
+              <Option key={value} value={value}>
+                {label}
+              </Option>
+            ))}
+          </Select>
+        </GridItem>
+      )}
     </>
   );
 };

package/admin/src/content-manager/pages/ListSettingsView/components/SortDisplayedFields.js

@@ -1,6 +1,7 @@
 import React, { useEffect, useRef, useState } from 'react';
 
-import { Box, Flex, IconButton, MenuItem, SimpleMenu, Typography } from '@strapi/design-system';
+import { Box, Flex, VisuallyHidden, Typography } from '@strapi/design-system';
+import { Menu } from '@strapi/design-system/v2';
 import { Plus } from '@strapi/icons';
 import { PropTypes } from 'prop-types';
 import { useIntl } from 'react-intl';
@@ -10,19 +11,12 @@ import { getTrad } from '../../../utils';
 
 import DraggableCard from './DraggableCard';
 
-const FlexWrapper = styled(Box)`
+const ScrollableContainer = styled(Box)`
   flex: ${({ size }) => size};
-`;
-
-const ScrollableContainer = styled(FlexWrapper)`
   overflow-x: scroll;
   overflow-y: hidden;
 `;
 
-const SelectContainer = styled(FlexWrapper)`
-  max-width: ${32 / 16}rem;
-`;
-
 const SortDisplayedFields = ({
   displayedFields,
   listRemainingFields,
@@ -89,24 +83,32 @@ const SortDisplayedFields = ({
             ))}
           </Flex>
         </ScrollableContainer>
-        <SelectContainer size="auto" paddingBottom={4}>
-          <SimpleMenu
-            label={formatMessage({
-              id: getTrad('components.FieldSelect.label'),
-              defaultMessage: 'Add a field',
-            })}
-            as={IconButton}
-            icon={<Plus />}
+        <Menu.Root>
+          <Menu.Trigger
+            paddingLeft={2}
+            paddingRight={2}
+            justifyContent="center"
+            endIcon={null}
             disabled={listRemainingFields.length <= 0}
-            data-testid="add-field"
+            marginBottom={4}
+            variant="tertiary"
           >
+            <VisuallyHidden as="span">
+              {formatMessage({
+                id: getTrad('components.FieldSelect.label'),
+                defaultMessage: 'Add a field',
+              })}
+            </VisuallyHidden>
+            <Plus aria-hidden focusable={false} style={{ position: 'relative', top: 2 }} />
+          </Menu.Trigger>
+          <Menu.Content>
             {listRemainingFields.map((field) => (
-              <MenuItem key={field} onClick={() => handleAddField(field)}>
+              <Menu.Item key={field} onSelect={() => handleAddField(field)}>
                 {metadatas[field].list.label || field}
-              </MenuItem>
+              </Menu.Item>
             ))}
-          </SimpleMenu>
-        </SelectContainer>
+          </Menu.Content>
+        </Menu.Root>
       </Flex>
     </>
   );

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

@@ -0,0 +1,191 @@
+import React from 'react';
+
+import { BaseCheckbox, IconButton, Td, 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';
+import { useIntl } from 'react-intl';
+import { Link, useHistory } from 'react-router-dom';
+
+import { usePluginsQueryParams } from '../../../../hooks';
+import { ConfirmDialogDelete } from '../ConfirmDialogDelete';
+
+const stopPropagation = (e) => e.stopPropagation();
+
+/* -------------------------------------------------------------------------------------------------
+ * CheckboxDataCell
+ * -----------------------------------------------------------------------------------------------*/
+
+const CheckboxDataCell = ({ rowId, index }) => {
+  const { selectedEntries, onSelectRow } = useTableContext();
+  const { formatMessage } = useIntl();
+  const isChecked = selectedEntries.findIndex((id) => id === rowId) !== -1;
+  const ariaLabel = formatMessage(
+    {
+      id: 'app.component.table.select.one-entry',
+      defaultMessage: `Select {target}`,
+    },
+    { target: index + 1 }
+  );
+
+  return (
+    <Td onClick={stopPropagation}>
+      <BaseCheckbox
+        aria-label={ariaLabel}
+        checked={isChecked}
+        onChange={() => {
+          onSelectRow({ name: rowId, value: !isChecked });
+        }}
+      />
+    </Td>
+  );
+};
+
+CheckboxDataCell.propTypes = {
+  rowId: PropTypes.number.isRequired,
+  index: PropTypes.number.isRequired,
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * EntityActionsDataCell
+ * -----------------------------------------------------------------------------------------------*/
+
+const EntityActionsDataCell = ({
+  rowId,
+  index,
+  canCreate,
+  canDelete,
+  setIsConfirmDeleteRowOpen,
+  handleCloneClick,
+}) => {
+  const { formatMessage } = useIntl();
+  const { trackUsage } = useTracking();
+  const { setSelectedEntries } = useTableContext();
+  const pluginsQueryParams = usePluginsQueryParams();
+  const {
+    location: { pathname },
+  } = useHistory();
+
+  const itemLineText = formatMessage(
+    {
+      id: 'content-manager.components.ListViewTable.row-line',
+      defaultMessage: 'item line {number}',
+    },
+    { number: index + 1 }
+  );
+
+  return (
+    <Td>
+      <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
+            onClick={() => {
+              trackUsage('willDeleteEntryFromList');
+              setSelectedEntries([rowId]);
+              setIsConfirmDeleteRowOpen(true);
+            }}
+            label={formatMessage(
+              { id: 'global.delete-target', defaultMessage: 'Delete {target}' },
+              { target: itemLineText }
+            )}
+            noBorder
+          >
+            <Trash />
+          </IconButton>
+        )}
+      </Flex>
+    </Td>
+  );
+};
+
+EntityActionsDataCell.defaultProps = {
+  canCreate: false,
+  canDelete: false,
+};
+
+EntityActionsDataCell.propTypes = {
+  rowId: PropTypes.number.isRequired,
+  index: PropTypes.number.isRequired,
+  setIsConfirmDeleteRowOpen: PropTypes.func.isRequired,
+  handleCloneClick: PropTypes.func.isRequired,
+  canCreate: PropTypes.bool,
+  canDelete: PropTypes.bool,
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * Root
+ * -----------------------------------------------------------------------------------------------*/
+
+const Root = ({ children, onConfirmDelete, isConfirmDeleteRowOpen, setIsConfirmDeleteRowOpen }) => {
+  const [isLoading, setIsLoading] = React.useState(false);
+  const { selectedEntries, setSelectedEntries } = useTableContext();
+
+  const handleConfirmDelete = async () => {
+    try {
+      setIsLoading(true);
+      await onConfirmDelete(selectedEntries[0]);
+      setIsConfirmDeleteRowOpen(false);
+      setIsLoading(false);
+      setSelectedEntries([]);
+    } catch (error) {
+      setIsLoading(false);
+      setIsConfirmDeleteRowOpen(false);
+    }
+  };
+
+  return (
+    <Table.Body>
+      {children}
+      <ConfirmDialogDelete
+        isConfirmButtonLoading={isLoading}
+        onConfirm={handleConfirmDelete}
+        onToggleDialog={() => setIsConfirmDeleteRowOpen(!isConfirmDeleteRowOpen)}
+        isOpen={isConfirmDeleteRowOpen}
+      />
+    </Table.Body>
+  );
+};
+
+Root.propTypes = {
+  children: PropTypes.node.isRequired,
+  onConfirmDelete: PropTypes.func.isRequired,
+  isConfirmDeleteRowOpen: PropTypes.bool.isRequired,
+  setIsConfirmDeleteRowOpen: PropTypes.func.isRequired,
+};
+
+export const Body = { CheckboxDataCell, EntityActionsDataCell, Root };

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

@@ -0,0 +1,164 @@
+import * as React from 'react';
+
+import { Button, Flex, Dialog, DialogBody, DialogFooter, Typography } from '@strapi/design-system';
+import {
+  useTableContext,
+  useFetchClient,
+  useNotification,
+  useAPIErrorHandler,
+} from '@strapi/helper-plugin';
+import { Check, ExclamationMarkCircle } from '@strapi/icons';
+import PropTypes from 'prop-types';
+import { useIntl } from 'react-intl';
+import { useQuery } from 'react-query';
+import { useSelector } from 'react-redux';
+
+import InjectionZoneList from '../../../../../components/InjectionZoneList';
+import { getTrad } from '../../../../../utils';
+import { listViewDomain } from '../../../selectors';
+
+const ConfirmBulkActionDialog = ({ onToggleDialog, isOpen, dialogBody, endAction }) => {
+  const { formatMessage } = useIntl();
+
+  return (
+    <Dialog
+      onClose={onToggleDialog}
+      title={formatMessage({
+        id: 'app.components.ConfirmDialog.title',
+        defaultMessage: 'Confirmation',
+      })}
+      isOpen={isOpen}
+    >
+      <DialogBody icon={<ExclamationMarkCircle />}>
+        <Flex direction="column" alignItems="stretch" gap={2}>
+          {dialogBody}
+        </Flex>
+      </DialogBody>
+      <DialogFooter
+        startAction={
+          <Button onClick={onToggleDialog} variant="tertiary">
+            {formatMessage({
+              id: 'app.components.Button.cancel',
+              defaultMessage: 'Cancel',
+            })}
+          </Button>
+        }
+        endAction={endAction}
+      />
+    </Dialog>
+  );
+};
+
+ConfirmBulkActionDialog.propTypes = {
+  isOpen: PropTypes.bool.isRequired,
+  onToggleDialog: PropTypes.func.isRequired,
+  dialogBody: PropTypes.node.isRequired,
+  endAction: PropTypes.node.isRequired,
+};
+
+export const confirmDialogsPropTypes = {
+  isConfirmButtonLoading: PropTypes.bool.isRequired,
+  isOpen: PropTypes.bool.isRequired,
+  onConfirm: PropTypes.func.isRequired,
+  onToggleDialog: PropTypes.func.isRequired,
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * BoldChunk
+ * -----------------------------------------------------------------------------------------------*/
+
+const BoldChunk = (chunks) => <Typography fontWeight="bold">{chunks}</Typography>;
+
+/* -------------------------------------------------------------------------------------------------
+ * ConfirmDialogPublishAll
+ * -----------------------------------------------------------------------------------------------*/
+
+const ConfirmDialogPublishAll = ({ isOpen, onToggleDialog, isConfirmButtonLoading, onConfirm }) => {
+  const { formatMessage } = useIntl();
+  const { get } = useFetchClient();
+  const { selectedEntries } = useTableContext();
+  const toggleNotification = useNotification();
+  const { formatAPIError } = useAPIErrorHandler(getTrad);
+  const {
+    contentType: { uid: slug },
+  } = useSelector(listViewDomain());
+
+  const {
+    data: countDraftRelations,
+    isLoading,
+    isError,
+  } = useQuery(
+    ['content-manager', 'draft-relations', slug, selectedEntries],
+    async () => {
+      const {
+        data: { data },
+      } = await get(
+        `/content-manager/collection-types/${slug}/actions/countManyEntriesDraftRelations`,
+        {
+          params: {
+            ids: selectedEntries,
+          },
+        }
+      );
+
+      return data;
+    },
+    {
+      onError(error) {
+        toggleNotification({ type: 'warning', message: formatAPIError(error) });
+      },
+    }
+  );
+
+  if (isError) {
+    return null;
+  }
+
+  return (
+    <ConfirmBulkActionDialog
+      isOpen={isOpen && !isLoading}
+      onToggleDialog={onToggleDialog}
+      dialogBody={
+        <>
+          <Typography id="confirm-description" textAlign="center">
+            {countDraftRelations > 0 &&
+              formatMessage(
+                {
+                  id: getTrad(`popUpwarning.warning.bulk-has-draft-relations.message`),
+                  defaultMessage:
+                    '<b>{count} {count, plural, one { relation } other { relations } } out of {entities} { entities, plural, one { entry } other { entries } } {count, plural, one { is } other { are } }</b> not published yet and might lead to unexpected behavior. ',
+                },
+                {
+                  b: BoldChunk,
+                  count: countDraftRelations,
+                  entities: selectedEntries.length,
+                }
+              )}
+            {formatMessage({
+              id: getTrad('popUpWarning.bodyMessage.contentType.publish.all'),
+              defaultMessage: 'Are you sure you want to publish these entries?',
+            })}
+          </Typography>
+          <InjectionZoneList area="contentManager.listView.publishModalAdditionalInfos" />
+        </>
+      }
+      endAction={
+        <Button
+          onClick={onConfirm}
+          variant="secondary"
+          startIcon={<Check />}
+          loading={isConfirmButtonLoading}
+        >
+          {formatMessage({
+            id: 'app.utils.publish',
+            defaultMessage: 'Publish',
+          })}
+        </Button>
+      }
+    />
+  );
+};
+
+ConfirmDialogPublishAll.propTypes = confirmDialogsPropTypes;
+
+export { ConfirmDialogPublishAll, ConfirmBulkActionDialog };