@strapi/admin 4.15.0 → 4.15.2

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

@@ -1,260 +0,0 @@
-import React, { useEffect, useRef, useState } from 'react';
-
-import { Box, Flex, Typography } from '@strapi/design-system';
-import { Cross, Drag, Pencil } from '@strapi/icons';
-import PropTypes from 'prop-types';
-import { useDrag, useDrop } from 'react-dnd';
-import { getEmptyImage } from 'react-dnd-html5-backend';
-import { useIntl } from 'react-intl';
-import styled from 'styled-components';
-
-import { getTrad, ItemTypes } from '../../../utils';
-import { CardDragPreview } from '../../App/components/CardDragPreview';
-
-const ActionButton = styled.button`
-  display: flex;
-  align-items: center;
-  height: ${({ theme }) => theme.spaces[7]};
-
-  &:last-child {
-    padding: 0 ${({ theme }) => theme.spaces[3]};
-  }
-`;
-
-const DragButton = styled(ActionButton)`
-  padding: 0 ${({ theme }) => theme.spaces[3]};
-  border-right: 1px solid ${({ theme }) => theme.colors.neutral150};
-  cursor: all-scroll;
-
-  svg {
-    width: ${12 / 16}rem;
-    height: ${12 / 16}rem;
-  }
-`;
-
-const FieldContainer = styled(Flex)`
-  max-height: ${32 / 16}rem;
-  cursor: pointer;
-
-  svg {
-    width: ${10 / 16}rem;
-    height: ${10 / 16}rem;
-
-    path {
-      fill: ${({ theme }) => theme.colors.neutral600};
-    }
-  }
-
-  &:hover {
-    background-color: ${({ theme }) => theme.colors.primary100};
-    border-color: ${({ theme }) => theme.colors.primary200};
-
-    svg {
-      path {
-        fill: ${({ theme }) => theme.colors.primary600};
-      }
-    }
-
-    ${Typography} {
-      color: ${({ theme }) => theme.colors.primary600};
-    }
-
-    ${DragButton} {
-      border-right: 1px solid ${({ theme }) => theme.colors.primary200};
-    }
-  }
-`;
-
-const FieldWrapper = styled(Box)`
-  &:last-child {
-    padding-right: ${({ theme }) => theme.spaces[3]};
-  }
-`;
-
-const DraggableCard = ({
-  index,
-  isDraggingSibling,
-  labelField,
-  onClickEditField,
-  onMoveField,
-  onRemoveField,
-  name,
-  setIsDraggingSibling,
-}) => {
-  const { formatMessage } = useIntl();
-  const dragRef = useRef(null);
-  const dropRef = useRef(null);
-  const [, forceRerenderAfterDnd] = useState(false);
-  const editButtonRef = useRef();
-
-  const handleClickEditRow = () => {
-    if (editButtonRef.current) {
-      editButtonRef.current.click();
-    }
-  };
-
-  // TODO: this can be simplified a lot by using the useDragAndDrop() hook
-  const [, drop] = useDrop({
-    accept: ItemTypes.FIELD,
-    hover(item, monitor) {
-      if (!dropRef.current) {
-        return;
-      }
-      const dragIndex = item.index;
-      const hoverIndex = index;
-
-      // Don't replace items with themselves
-      if (dragIndex === hoverIndex) {
-        return;
-      }
-
-      // Determine rectangle on screen
-      const hoverBoundingRect = dropRef.current.getBoundingClientRect();
-      // Get vertical middle
-      const hoverMiddleX = (hoverBoundingRect.right - hoverBoundingRect.left) / 2;
-      // Determine mouse position
-      const clientOffset = monitor.getClientOffset();
-      // Get pixels to the top
-      const hoverClientX = clientOffset.x - hoverBoundingRect.left;
-
-      // Only perform the move when the mouse has crossed half of the items height
-      // When dragging downwards, only move when the cursor is below 50%
-      // When dragging upwards, only move when the cursor is above 50%
-      // Dragging downwards
-      if (dragIndex > hoverIndex && hoverClientX > hoverMiddleX) {
-        return;
-      }
-      // Dragging upwards
-      if (dragIndex < hoverIndex && hoverClientX < hoverMiddleX) {
-        return;
-      }
-
-      onMoveField(dragIndex, hoverIndex);
-
-      item.index = hoverIndex;
-    },
-  });
-
-  const [{ isDragging }, drag, preview] = useDrag({
-    type: ItemTypes.FIELD,
-    item() {
-      return { index, labelField, name };
-    },
-    collect: (monitor) => ({
-      isDragging: monitor.isDragging(),
-    }),
-    end() {
-      setIsDraggingSibling(false);
-    },
-  });
-
-  useEffect(() => {
-    preview(getEmptyImage(), { captureDraggingState: false });
-  }, [preview]);
-
-  useEffect(() => {
-    if (isDragging) {
-      setIsDraggingSibling(true);
-    }
-  }, [isDragging, setIsDraggingSibling]);
-
-  // Effect in order to force a rerender after reordering the components
-  // Since we are removing the Accordion when doing the DnD  we are losing the dragRef, therefore the replaced element cannot be dragged
-  // anymore, this hack forces a rerender in order to apply the dragRef
-  useEffect(() => {
-    if (!isDraggingSibling) {
-      forceRerenderAfterDnd((prev) => !prev);
-    }
-  }, [isDraggingSibling]);
-
-  // Create the refs
-  // We need 1 for the drop target
-  // 1 for the drag target
-  const refs = {
-    dragRef: drag(dragRef),
-    dropRef: drop(dropRef),
-  };
-
-  return (
-    <FieldWrapper ref={refs ? refs.dropRef : null}>
-      {isDragging && <CardDragPreview transparent labelField={labelField} />}
-      {!isDragging && isDraggingSibling && <CardDragPreview isSibling labelField={labelField} />}
-
-      {!isDragging && !isDraggingSibling && (
-        <FieldContainer
-          borderColor="neutral150"
-          background="neutral100"
-          hasRadius
-          justifyContent="space-between"
-          onClick={handleClickEditRow}
-          isDragging={isDragging}
-        >
-          <Flex gap={3}>
-            <DragButton
-              as="span"
-              aria-label={formatMessage(
-                {
-                  id: getTrad('components.DraggableCard.move.field'),
-                  defaultMessage: 'Move {item}',
-                },
-                { item: labelField }
-              )}
-              onClick={(e) => e.stopPropagation()}
-              ref={refs.dragRef}
-              type="button"
-            >
-              <Drag />
-            </DragButton>
-            <Typography fontWeight="bold">{labelField}</Typography>
-          </Flex>
-          <Flex paddingLeft={3}>
-            <ActionButton
-              ref={editButtonRef}
-              onClick={(e) => {
-                e.stopPropagation();
-                onClickEditField(name);
-              }}
-              aria-label={formatMessage(
-                {
-                  id: getTrad('components.DraggableCard.edit.field'),
-                  defaultMessage: 'Edit {item}',
-                },
-                { item: labelField }
-              )}
-              type="button"
-            >
-              <Pencil />
-            </ActionButton>
-            <ActionButton
-              onClick={onRemoveField}
-              data-testid={`delete-${name}`}
-              aria-label={formatMessage(
-                {
-                  id: getTrad('components.DraggableCard.delete.field'),
-                  defaultMessage: 'Delete {item}',
-                },
-                { item: labelField }
-              )}
-              type="button"
-            >
-              <Cross />
-            </ActionButton>
-          </Flex>
-        </FieldContainer>
-      )}
-    </FieldWrapper>
-  );
-};
-
-DraggableCard.propTypes = {
-  index: PropTypes.number.isRequired,
-  isDraggingSibling: PropTypes.bool.isRequired,
-  labelField: PropTypes.string.isRequired,
-  name: PropTypes.string.isRequired,
-  onClickEditField: PropTypes.func.isRequired,
-  onMoveField: PropTypes.func.isRequired,
-  onRemoveField: PropTypes.func.isRequired,
-  setIsDraggingSibling: PropTypes.func.isRequired,
-};
-
-export default DraggableCard;

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

@@ -1,144 +0,0 @@
-import React from 'react';
-
-import {
-  Button,
-  Flex,
-  Grid,
-  GridItem,
-  ModalBody,
-  ModalFooter,
-  ModalHeader,
-  ModalLayout,
-  TextInput,
-  ToggleInput,
-  Typography,
-} from '@strapi/design-system';
-import upperFirst from 'lodash/upperFirst';
-import PropTypes from 'prop-types';
-import { useIntl } from 'react-intl';
-import styled from 'styled-components';
-
-import FieldTypeIcon from '../../../components/FieldTypeIcon';
-import { getTrad } from '../../../utils';
-
-const HeaderContainer = styled(Flex)`
-  svg {
-    width: ${32 / 16}rem;
-    height: ${24 / 16}rem;
-    margin-right: ${({ theme }) => theme.spaces[3]};
-  }
-`;
-
-export const EditFieldForm = ({
-  attributes,
-  fieldForm,
-  fieldToEdit,
-  onCloseModal,
-  onChangeEditLabel,
-  onSubmit,
-  type,
-}) => {
-  const { formatMessage } = useIntl();
-
-  const relationType = attributes[fieldToEdit].relationType;
-
-  let shouldDisplaySortToggle = !['media', 'relation'].includes(type);
-
-  if (['oneWay', 'oneToOne', 'manyToOne'].includes(relationType)) {
-    shouldDisplaySortToggle = true;
-  }
-
-  return (
-    <ModalLayout onClose={onCloseModal} labelledBy="title">
-      <form onSubmit={onSubmit}>
-        <ModalHeader>
-          <HeaderContainer>
-            <FieldTypeIcon type={type} />
-            <Typography fontWeight="bold" textColor="neutral800" as="h2" id="title">
-              {formatMessage(
-                {
-                  id: getTrad('containers.ListSettingsView.modal-form.edit-label'),
-                  defaultMessage: 'Edit {fieldName}',
-                },
-                { fieldName: upperFirst(fieldToEdit) }
-              )}
-            </Typography>
-          </HeaderContainer>
-        </ModalHeader>
-        <ModalBody>
-          <Grid gap={4}>
-            <GridItem s={12} col={6}>
-              <TextInput
-                id="label-input"
-                label={formatMessage({
-                  id: getTrad('form.Input.label'),
-                  defaultMessage: 'Label',
-                })}
-                name="label"
-                onChange={(e) => onChangeEditLabel(e)}
-                value={fieldForm.label}
-                hint={formatMessage({
-                  id: getTrad('form.Input.label.inputDescription'),
-                  defaultMessage: "This value overrides the label displayed in the table's head",
-                })}
-              />
-            </GridItem>
-            {shouldDisplaySortToggle && (
-              <GridItem s={12} col={6}>
-                <ToggleInput
-                  data-testid="Enable sort on this field"
-                  checked={fieldForm.sortable}
-                  label={formatMessage({
-                    id: getTrad('form.Input.sort.field'),
-                    defaultMessage: 'Enable sort on this field',
-                  })}
-                  name="sortable"
-                  onChange={(e) =>
-                    onChangeEditLabel({ target: { name: 'sortable', value: e.target.checked } })
-                  }
-                  onLabel={formatMessage({
-                    id: 'app.components.ToggleCheckbox.on-label',
-                    defaultMessage: 'on',
-                  })}
-                  offLabel={formatMessage({
-                    id: 'app.components.ToggleCheckbox.off-label',
-                    defaultMessage: 'off',
-                  })}
-                />
-              </GridItem>
-            )}
-          </Grid>
-        </ModalBody>
-        <ModalFooter
-          startActions={
-            <Button onClick={onCloseModal} variant="tertiary">
-              {formatMessage({ id: 'app.components.Button.cancel', defaultMessage: 'Cancel' })}
-            </Button>
-          }
-          endActions={
-            <Button type="submit">
-              {formatMessage({ id: 'global.finish', defaultMessage: 'Finish' })}
-            </Button>
-          }
-        />
-      </form>
-    </ModalLayout>
-  );
-};
-
-EditFieldForm.propTypes = {
-  attributes: PropTypes.objectOf(
-    PropTypes.shape({
-      relationType: PropTypes.string,
-    })
-  ).isRequired,
-  fieldForm: PropTypes.shape({
-    label: PropTypes.string,
-    sortable: PropTypes.bool,
-  }).isRequired,
-  fieldToEdit: PropTypes.string.isRequired,
-  onChangeEditLabel: PropTypes.func.isRequired,
-  onCloseModal: PropTypes.func.isRequired,
-  onSubmit: PropTypes.func.isRequired,
-  type: PropTypes.string.isRequired,
-};

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

@@ -1,203 +0,0 @@
-import React from 'react';
-
-import {
-  Box,
-  Flex,
-  Grid,
-  GridItem,
-  Option,
-  Select,
-  ToggleInput,
-  Typography,
-} from '@strapi/design-system';
-import { useCollator } from '@strapi/helper-plugin';
-import PropTypes from 'prop-types';
-import { useIntl } from 'react-intl';
-
-import { useEnterprise } from '../../../../hooks/useEnterprise';
-import { getTrad } from '../../../utils';
-
-export const Settings = ({
-  contentTypeOptions,
-  modifiedData,
-  onChange,
-  sortOptions: sortOptionsCE,
-}) => {
-  const { formatMessage, locale } = useIntl();
-  const formatter = useCollator(locale, {
-    sensitivity: 'base',
-  });
-  const sortOptions = useEnterprise(
-    sortOptionsCE,
-    async () =>
-      (await import('../../../../../../ee/admin/content-manager/pages/ListSettingsView/constants'))
-        .REVIEW_WORKFLOW_STAGE_SORT_OPTION_NAME,
-    {
-      combine(ceOptions, eeOption) {
-        return [...ceOptions, { ...eeOption, label: formatMessage(eeOption.label) }];
-      },
-
-      defaultValue: sortOptionsCE,
-
-      enabled: !!contentTypeOptions?.reviewWorkflows,
-    }
-  );
-
-  const sortOptionsSorted = sortOptions.sort((a, b) => formatter.compare(a.label, b.label));
-  const { settings } = modifiedData;
-
-  return (
-    <Flex direction="column" alignItems="stretch" gap={4}>
-      <Typography variant="delta" as="h2">
-        {formatMessage({
-          id: getTrad('containers.SettingPage.settings'),
-          defaultMessage: 'Settings',
-        })}
-      </Typography>
-
-      <Flex justifyContent="space-between" gap={4}>
-        <Box width="100%">
-          <ToggleInput
-            label={formatMessage({
-              id: getTrad('form.Input.search'),
-              defaultMessage: 'Enable search',
-            })}
-            onChange={(e) => {
-              onChange({ target: { name: 'settings.searchable', value: e.target.checked } });
-            }}
-            onLabel={formatMessage({
-              id: 'app.components.ToggleCheckbox.on-label',
-              defaultMessage: 'on',
-            })}
-            offLabel={formatMessage({
-              id: 'app.components.ToggleCheckbox.off-label',
-              defaultMessage: 'off',
-            })}
-            name="settings.searchable"
-            checked={settings.searchable}
-          />
-        </Box>
-
-        <Box width="100%">
-          <ToggleInput
-            label={formatMessage({
-              id: getTrad('form.Input.filters'),
-              defaultMessage: 'Enable filters',
-            })}
-            onChange={(e) => {
-              onChange({ target: { name: 'settings.filterable', value: e.target.checked } });
-            }}
-            onLabel={formatMessage({
-              id: 'app.components.ToggleCheckbox.on-label',
-              defaultMessage: 'on',
-            })}
-            offLabel={formatMessage({
-              id: 'app.components.ToggleCheckbox.off-label',
-              defaultMessage: 'off',
-            })}
-            name="settings.filterable"
-            checked={settings.filterable}
-          />
-        </Box>
-
-        <Box width="100%">
-          <ToggleInput
-            label={formatMessage({
-              id: getTrad('form.Input.bulkActions'),
-              defaultMessage: 'Enable bulk actions',
-            })}
-            onChange={(e) => {
-              onChange({ target: { name: 'settings.bulkable', value: e.target.checked } });
-            }}
-            onLabel={formatMessage({
-              id: 'app.components.ToggleCheckbox.on-label',
-              defaultMessage: 'on',
-            })}
-            offLabel={formatMessage({
-              id: 'app.components.ToggleCheckbox.off-label',
-              defaultMessage: 'off',
-            })}
-            name="settings.bulkable"
-            checked={settings.bulkable}
-          />
-        </Box>
-      </Flex>
-
-      <Grid gap={4}>
-        <GridItem s={12} col={6}>
-          <Select
-            label={formatMessage({
-              id: getTrad('form.Input.pageEntries'),
-              defaultMessage: 'Entries per page',
-            })}
-            hint={formatMessage({
-              id: getTrad('form.Input.pageEntries.inputDescription'),
-              defaultMessage:
-                'Note: You can override this value in the Collection Type settings page.',
-            })}
-            onChange={(value) => onChange({ target: { name: 'settings.pageSize', value } })}
-            name="settings.pageSize"
-            value={modifiedData.settings.pageSize || ''}
-          >
-            {[10, 20, 50, 100].map((pageSize) => (
-              <Option key={pageSize} value={pageSize}>
-                {pageSize}
-              </Option>
-            ))}
-          </Select>
-        </GridItem>
-        <GridItem s={12} col={3}>
-          <Select
-            label={formatMessage({
-              id: getTrad('form.Input.defaultSort'),
-              defaultMessage: 'Default sort attribute',
-            })}
-            onChange={(value) => onChange({ target: { name: 'settings.defaultSortBy', value } })}
-            name="settings.defaultSortBy"
-            value={modifiedData.settings.defaultSortBy || ''}
-          >
-            {sortOptionsSorted.map(({ value, label }) => (
-              <Option key={value} value={value}>
-                {label}
-              </Option>
-            ))}
-          </Select>
-        </GridItem>
-        <GridItem s={12} col={3}>
-          <Select
-            label={formatMessage({
-              id: getTrad('form.Input.sort.order'),
-              defaultMessage: 'Default sort order',
-            })}
-            onChange={(value) => onChange({ target: { name: 'settings.defaultSortOrder', value } })}
-            name="settings.defaultSortOrder"
-            value={modifiedData.settings.defaultSortOrder || ''}
-          >
-            {['ASC', 'DESC'].map((order) => (
-              <Option key={order} value={order}>
-                {order}
-              </Option>
-            ))}
-          </Select>
-        </GridItem>
-      </Grid>
-    </Flex>
-  );
-};
-
-Settings.defaultProps = {
-  modifiedData: {},
-  sortOptions: [],
-};
-
-Settings.propTypes = {
-  contentTypeOptions: PropTypes.object.isRequired,
-  modifiedData: PropTypes.object,
-  onChange: PropTypes.func.isRequired,
-  sortOptions: PropTypes.arrayOf(
-    PropTypes.shape({
-      value: PropTypes.string,
-      label: PropTypes.string,
-    }).isRequired
-  ),
-};