@strapi/admin 4.6.0-alpha.1 → 4.6.0-beta.1

package/admin/src/content-manager/components/RepeatableComponent/DraggedItem/index.js

@@ -1,322 +0,0 @@
-/* eslint-disable import/no-cycle */
-import React, { memo, useEffect, useRef, useState } from 'react';
-import PropTypes from 'prop-types';
-import { useDrag, useDrop } from 'react-dnd';
-import { getEmptyImage } from 'react-dnd-html5-backend';
-import styled from 'styled-components';
-import { useIntl } from 'react-intl';
-import toString from 'lodash/toString';
-import { Accordion, AccordionToggle, AccordionContent } from '@strapi/design-system/Accordion';
-import { Grid, GridItem } from '@strapi/design-system/Grid';
-import { Stack } from '@strapi/design-system/Stack';
-import { Box } from '@strapi/design-system/Box';
-import { Tooltip } from '@strapi/design-system/Tooltip';
-import Trash from '@strapi/icons/Trash';
-import Drag from '@strapi/icons/Drag';
-import ItemTypes from '../../../utils/ItemTypes';
-import getTrad from '../../../utils/getTrad';
-import Inputs from '../../Inputs';
-import FieldComponent from '../../FieldComponent';
-import Preview from './Preview';
-import DraggingSibling from './DraggingSibling';
-import { CustomIconButton } from './IconButtonCustoms';
-import { connect, select } from './utils';
-
-const DragButton = styled.span`
-  display: flex;
-  align-items: center;
-  height: ${({ theme }) => theme.spaces[7]};
-
-  padding: 0 ${({ theme }) => theme.spaces[3]};
-  cursor: all-scroll;
-
-  svg {
-    width: ${12 / 16}rem;
-    height: ${12 / 16}rem;
-  }
-`;
-
-/* eslint-disable react/no-array-index-key */
-
-// Issues:
-// https://github.com/react-dnd/react-dnd/issues/1368
-// https://github.com/frontend-collective/react-sortable-tree/issues/490
-
-const DraggedItem = ({
-  componentFieldName,
-  componentUid,
-  // Errors are retrieved from the AccordionGroupCustom cloneElement
-  hasErrorMessage,
-  hasErrors,
-  isDraggingSibling,
-  isOpen,
-  isReadOnly,
-  onClickToggle,
-  schema,
-  toggleCollapses,
-  // Retrieved from the select function
-  moveComponentField,
-  removeRepeatableField,
-  setIsDraggingSibling,
-  triggerFormValidation,
-  // checkFormErrors,
-  displayedValue,
-}) => {
-  const dragRef = useRef(null);
-  const dropRef = useRef(null);
-  const [, forceRerenderAfterDnd] = useState(false);
-  const { formatMessage } = useIntl();
-
-  const fields = schema.layouts.edit;
-
-  const [, drop] = useDrop({
-    accept: ItemTypes.COMPONENT,
-    canDrop() {
-      return false;
-    },
-    hover(item, monitor) {
-      if (!dropRef.current) {
-        return;
-      }
-
-      const dragPath = item.originalPath;
-      const hoverPath = componentFieldName;
-      const fullPathToComponentArray = dragPath.split('.');
-      const dragIndexString = fullPathToComponentArray.slice().splice(-1).join('');
-      const hoverIndexString = hoverPath.split('.').splice(-1).join('');
-      const pathToComponentArray = fullPathToComponentArray.slice(
-        0,
-        fullPathToComponentArray.length - 1
-      );
-      const dragIndex = parseInt(dragIndexString, 10);
-      const hoverIndex = parseInt(hoverIndexString, 10);
-
-      // Don't replace items with themselves
-      if (dragIndex === hoverIndex) {
-        return;
-      }
-
-      // Determine rectangle on screen
-      const hoverBoundingRect = dropRef.current.getBoundingClientRect();
-      // Get vertical middle
-      const hoverMiddleY = (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2;
-      // Determine mouse position
-      const clientOffset = monitor.getClientOffset();
-      // Get pixels to the top
-      const hoverClientY = clientOffset.y - hoverBoundingRect.top;
-
-      // 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 && hoverClientY < hoverMiddleY) {
-        return;
-      }
-      // Dragging upwards
-      if (dragIndex > hoverIndex && hoverClientY > hoverMiddleY) {
-        return;
-      }
-      // If They are not in the same level, should not move
-      if (dragPath.split('.').length !== hoverPath.split('.').length) {
-        return;
-      }
-      // Time to actually perform the action in the data
-      moveComponentField(pathToComponentArray, dragIndex, hoverIndex);
-
-      item.originalPath = hoverPath;
-    },
-  });
-  const [{ isDragging }, drag, preview] = useDrag({
-    type: ItemTypes.COMPONENT,
-    item() {
-      // Close all collapses
-      toggleCollapses(-1);
-
-      return {
-        displayedValue,
-        originalPath: componentFieldName,
-      };
-    },
-    end() {
-      // Update the errors
-      triggerFormValidation();
-      setIsDraggingSibling(false);
-    },
-    collect: (monitor) => ({
-      isDragging: monitor.isDragging(),
-    }),
-  });
-
-  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),
-  };
-
-  const accordionTitle = toString(displayedValue);
-  const accordionHasError = hasErrors ? 'error' : undefined;
-
-  return (
-    <Box ref={refs ? refs.dropRef : null}>
-      {isDragging && <Preview />}
-      {!isDragging && isDraggingSibling && (
-        <DraggingSibling displayedValue={accordionTitle} componentFieldName={componentFieldName} />
-      )}
-
-      {!isDragging && !isDraggingSibling && (
-        <Accordion
-          error={accordionHasError}
-          hasErrorMessage={hasErrorMessage}
-          expanded={isOpen}
-          onToggle={onClickToggle}
-          id={componentFieldName}
-          size="S"
-        >
-          <AccordionToggle
-            action={
-              isReadOnly ? null : (
-                <Stack horizontal spacing={0}>
-                  <CustomIconButton
-                    expanded={isOpen}
-                    noBorder
-                    onClick={() => {
-                      removeRepeatableField(componentFieldName);
-                      toggleCollapses();
-                    }}
-                    label={formatMessage({
-                      id: getTrad('containers.Edit.delete'),
-                      defaultMessage: 'Delete',
-                    })}
-                    icon={<Trash />}
-                  />
-                  {/* react-dnd is broken in firefox with our IconButton, maybe a ref issue */}
-                  <Tooltip
-                    description={formatMessage({
-                      id: getTrad('components.DragHandle-label'),
-                      defaultMessage: 'Drag',
-                    })}
-                  >
-                    <DragButton
-                      role="button"
-                      tabIndex={-1}
-                      ref={refs.dragRef}
-                      onClick={(e) => e.stopPropagation()}
-                    >
-                      <Drag />
-                    </DragButton>
-                  </Tooltip>
-                </Stack>
-              )
-            }
-            title={accordionTitle}
-            togglePosition="left"
-          />
-          <AccordionContent>
-            <Stack background="neutral100" padding={6} spacing={6}>
-              {fields.map((fieldRow, key) => {
-                return (
-                  <Grid gap={4} key={key}>
-                    {fieldRow.map(({ name, fieldSchema, metadatas, queryInfos, size }) => {
-                      const isComponent = fieldSchema.type === 'component';
-                      const keys = `${componentFieldName}.${name}`;
-
-                      if (isComponent) {
-                        const componentUid = fieldSchema.component;
-
-                        return (
-                          <GridItem col={size} s={12} xs={12} key={name}>
-                            <FieldComponent
-                              componentUid={componentUid}
-                              intlLabel={{
-                                id: metadatas.label,
-                                defaultMessage: metadatas.label,
-                              }}
-                              isRepeatable={fieldSchema.repeatable}
-                              isNested
-                              name={keys}
-                              max={fieldSchema.max}
-                              min={fieldSchema.min}
-                              required={fieldSchema.required}
-                            />
-                          </GridItem>
-                        );
-                      }
-
-                      return (
-                        <GridItem key={keys} col={size} s={12} xs={12}>
-                          <Inputs
-                            componentUid={componentUid}
-                            fieldSchema={fieldSchema}
-                            keys={keys}
-                            metadatas={metadatas}
-                            // onBlur={hasErrors ? checkFormErrors : null}
-                            queryInfos={queryInfos}
-                            size={size}
-                          />
-                        </GridItem>
-                      );
-                    })}
-                  </Grid>
-                );
-              })}
-            </Stack>
-          </AccordionContent>
-        </Accordion>
-      )}
-    </Box>
-  );
-};
-
-DraggedItem.defaultProps = {
-  componentUid: undefined,
-  isDraggingSibling: false,
-  isOpen: false,
-  setIsDraggingSibling() {},
-  toggleCollapses() {},
-};
-
-DraggedItem.propTypes = {
-  componentFieldName: PropTypes.string.isRequired,
-  componentUid: PropTypes.string,
-  hasErrorMessage: PropTypes.bool.isRequired,
-  hasErrors: PropTypes.bool.isRequired,
-  isDraggingSibling: PropTypes.bool,
-  isOpen: PropTypes.bool,
-  isReadOnly: PropTypes.bool.isRequired,
-  onClickToggle: PropTypes.func.isRequired,
-  schema: PropTypes.object.isRequired,
-  toggleCollapses: PropTypes.func,
-  moveComponentField: PropTypes.func.isRequired,
-  removeRepeatableField: PropTypes.func.isRequired,
-  setIsDraggingSibling: PropTypes.func,
-  triggerFormValidation: PropTypes.func.isRequired,
-  // checkFormErrors: PropTypes.func.isRequired,
-  displayedValue: PropTypes.string.isRequired,
-};
-
-const Memoized = memo(DraggedItem);
-
-export default connect(Memoized, select);
-
-export { DraggedItem };

package/admin/src/content-manager/components/RepeatableComponent/DraggedItem/utils/connect.js

@@ -1,11 +0,0 @@
-import React from 'react';
-
-function connect(WrappedComponent, select) {
-  return (props) => {
-    const selectors = select(props);
-
-    return <WrappedComponent {...props} {...selectors} />;
-  };
-}
-
-export default connect;

package/admin/src/content-manager/components/RepeatableComponent/DraggedItem/utils/index.js

@@ -1,2 +0,0 @@
-export { default as connect } from './connect';
-export { default as select } from './select';

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

@@ -1,30 +0,0 @@
-import { useMemo } from 'react';
-import { get, toString } from 'lodash';
-import { useCMEditViewDataManager } from '@strapi/helper-plugin';
-
-function useSelect({ schema, componentFieldName }) {
-  const {
-    checkFormErrors,
-    modifiedData,
-    moveComponentField,
-    removeRepeatableField,
-    triggerFormValidation,
-  } = useCMEditViewDataManager();
-
-  const mainField = useMemo(() => get(schema, ['settings', 'mainField'], 'id'), [schema]);
-  const displayedValue = toString(
-    get(modifiedData, [...componentFieldName.split('.'), mainField], '')
-  );
-
-  return {
-    displayedValue,
-    mainField,
-    checkFormErrors,
-    moveComponentField,
-    removeRepeatableField,
-    schema,
-    triggerFormValidation,
-  };
-}
-
-export default useSelect;

package/admin/src/content-manager/components/RepeatableComponent/utils/connect.js

@@ -1,11 +0,0 @@
-import React from 'react';
-
-function connect(WrappedComponent, select) {
-  return (props) => {
-    const selectors = select(props);
-
-    return <WrappedComponent {...props} {...selectors} />;
-  };
-}
-
-export default connect;

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

@@ -1,12 +0,0 @@
-import { useCMEditViewDataManager } from '@strapi/helper-plugin';
-
-function useSelect() {
-  const { addRepeatableComponentToField, formErrors } = useCMEditViewDataManager();
-
-  return {
-    addRepeatableComponentToField,
-    formErrors,
-  };
-}
-
-export default useSelect;

package/admin/src/content-manager/components/SectionTitle/Title.js

@@ -1,11 +0,0 @@
-import styled from 'styled-components';
-
-const Title = styled.div`
-  color: #787e8f;
-  font-size: 11px;
-  font-weight: 700;
-  letter-spacing: 0.77px;
-  text-transform: uppercase;
-`;
-
-export default Title;

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

@@ -1,26 +0,0 @@
-import React, { memo } from 'react';
-import PropTypes from 'prop-types';
-import { FormattedMessage } from 'react-intl';
-import { getTrad } from '../../utils';
-import Title from './Title';
-
-const SectionTitle = ({ isSettings }) => {
-  const suffix = isSettings ? 'settings' : 'view';
-  const msgId = getTrad(`containers.SettingPage.${suffix}`);
-
-  return (
-    <div style={{ marginBottom: '18px' }}>
-      <FormattedMessage id={msgId}>{(msg) => <Title>{msg}</Title>}</FormattedMessage>
-    </div>
-  );
-};
-
-SectionTitle.propTypes = {
-  isSettings: PropTypes.bool,
-};
-
-SectionTitle.defaultProps = {
-  isSettings: false,
-};
-
-export default memo(SectionTitle);

package/admin/src/content-manager/hooks/__test__/usePrev.test.js

@@ -1,26 +0,0 @@
-import { renderHook } from '@testing-library/react-hooks';
-
-import { usePrev } from '../usePrev';
-
-describe('usePrev', () => {
-  const setup = () => renderHook(({ state }) => usePrev(state), { initialProps: { state: 0 } });
-
-  it('should return undefined on initial render', () => {
-    const { result } = setup();
-
-    expect(result.current).toBeUndefined();
-  });
-
-  it('should always return previous state after each update', () => {
-    const { result, rerender } = setup();
-
-    rerender({ state: 2 });
-    expect(result.current).toBe(0);
-
-    rerender({ state: 4 });
-    expect(result.current).toBe(2);
-
-    rerender({ state: 6 });
-    expect(result.current).toBe(4);
-  });
-});

package/admin/src/pages/SettingsPage/pages/AuditLogs/ListView/DynamicTable/TableRows/CellValue.js

@@ -1,19 +0,0 @@
-import PropTypes from 'prop-types';
-import useFormatTimeStamp from '../../hooks/useFormatTimeStamp';
-
-const CellValue = ({ type, value }) => {
-  const formatTimeStamp = useFormatTimeStamp();
-
-  if (type === 'date') {
-    return formatTimeStamp(value);
-  }
-
-  return value || '-';
-};
-
-CellValue.propTypes = {
-  type: PropTypes.string.isRequired,
-  value: PropTypes.any.isRequired,
-};
-
-export default CellValue;

package/admin/src/pages/SettingsPage/pages/AuditLogs/ListView/DynamicTable/TableRows/index.js

@@ -1,65 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { useIntl } from 'react-intl';
-import { IconButton } from '@strapi/design-system/IconButton';
-import { Flex } from '@strapi/design-system/Flex';
-import { Typography } from '@strapi/design-system/Typography';
-import { Tbody, Td, Tr } from '@strapi/design-system/Table';
-import Eye from '@strapi/icons/Eye';
-import { onRowClick, stopPropagation } from '@strapi/helper-plugin';
-import CellValue from './CellValue';
-
-const TableRows = ({ headers, rows, onModalToggle }) => {
-  const { formatMessage } = useIntl();
-
-  return (
-    <Tbody>
-      {rows.map((data) => {
-        return (
-          <Tr
-            key={data.id}
-            {...onRowClick({
-              fn: () => onModalToggle(data.id),
-            })}
-          >
-            {headers.map(({ key, name }) => {
-              return (
-                <Td key={key}>
-                  <Typography textColor="neutral800">
-                    <CellValue type={key} value={data[name]} />
-                  </Typography>
-                </Td>
-              );
-            })}
-
-            <Td {...stopPropagation}>
-              <Flex justifyContent="end">
-                <IconButton
-                  onClick={() => onModalToggle(data.id)}
-                  aria-label={formatMessage(
-                    { id: 'app.component.table.view', defaultMessage: '{target} details' },
-                    { target: `${data.action} action` }
-                  )}
-                  noBorder
-                  icon={<Eye />}
-                />
-              </Flex>
-            </Td>
-          </Tr>
-        );
-      })}
-    </Tbody>
-  );
-};
-
-TableRows.defaultProps = {
-  rows: [],
-};
-
-TableRows.propTypes = {
-  headers: PropTypes.array.isRequired,
-  rows: PropTypes.array,
-  onModalToggle: PropTypes.func.isRequired,
-};
-
-export default TableRows;

package/admin/src/pages/SettingsPage/pages/AuditLogs/ListView/ModalDialog/ActionItem.js

@@ -1,25 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { useIntl } from 'react-intl';
-import { Flex } from '@strapi/design-system/Flex';
-import { Typography } from '@strapi/design-system/Typography';
-
-const ActionItem = ({ actionLabel, actionName }) => {
-  const { formatMessage } = useIntl();
-
-  return (
-    <Flex direction="column" alignItems="baseline" gap={1}>
-      <Typography textColor="neutral600" variant="sigma">
-        {formatMessage(actionLabel)}
-      </Typography>
-      <Typography textColor="neutral600">{actionName}</Typography>
-    </Flex>
-  );
-};
-
-ActionItem.propTypes = {
-  actionLabel: PropTypes.object.isRequired,
-  actionName: PropTypes.string.isRequired,
-};
-
-export default ActionItem;

package/admin/src/pages/SettingsPage/pages/AuditLogs/ListView/ModalDialog/index.js

@@ -1,76 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { useIntl } from 'react-intl';
-import { ModalLayout, ModalHeader, ModalBody } from '@strapi/design-system/ModalLayout';
-import { Breadcrumbs, Crumb } from '@strapi/design-system/Breadcrumbs';
-import { Grid } from '@strapi/design-system/Grid';
-import { Box } from '@strapi/design-system/Box';
-import { Typography } from '@strapi/design-system/Typography';
-import { pxToRem } from '@strapi/helper-plugin';
-import useFormatTimeStamp from '../hooks/useFormatTimeStamp';
-import ActionItem from './ActionItem';
-
-const ModalDialog = ({ onToggle, data: { date, user, action } }) => {
-  const { formatMessage } = useIntl();
-  const formatTimeStamp = useFormatTimeStamp();
-  const formattedDate = formatTimeStamp(date);
-
-  return (
-    <ModalLayout onClose={onToggle} labelledBy="title">
-      <ModalHeader>
-        <Breadcrumbs label={formattedDate}>
-          <Crumb>{formattedDate}</Crumb>
-        </Breadcrumbs>
-      </ModalHeader>
-      <ModalBody>
-        <Box marginBottom={pxToRem(12)}>
-          <Typography variant="delta" id="title">
-            {formatMessage({
-              id: 'Settings.permissions.auditLogs.details',
-              defaultMessage: 'Log Details',
-            })}
-          </Typography>
-        </Box>
-        <Grid
-          gap={4}
-          gridCols={2}
-          paddingTop={4}
-          paddingBottom={4}
-          paddingLeft={6}
-          paddingRight={6}
-          background="neutral100"
-          hasRadius
-        >
-          <ActionItem
-            actionLabel={{
-              id: 'Settings.permissions.auditLogs.action',
-              defaultMessage: 'Action',
-            }}
-            actionName={action}
-          />
-          <ActionItem
-            actionLabel={{
-              id: 'Settings.permissions.auditLogs.date',
-              defaultMessage: 'Date',
-            }}
-            actionName={formattedDate}
-          />
-          <ActionItem
-            actionLabel={{
-              id: 'Settings.permissions.auditLogs.user',
-              defaultMessage: 'User',
-            }}
-            actionName={user}
-          />
-        </Grid>
-      </ModalBody>
-    </ModalLayout>
-  );
-};
-
-ModalDialog.propTypes = {
-  onToggle: PropTypes.func.isRequired,
-  data: PropTypes.object.isRequired,
-};
-
-export default ModalDialog;

package/admin/src/pages/SettingsPage/pages/AuditLogs/ListView/hooks/useFormatTimeStamp.js

@@ -1,24 +0,0 @@
-import { useIntl } from 'react-intl';
-import parseISO from 'date-fns/parseISO';
-
-const useFormatTimeStamp = () => {
-  const { formatDate } = useIntl();
-
-  const formatTimeStamp = (value) => {
-    const date = parseISO(value);
-
-    const formattedDate = formatDate(date, {
-      dateStyle: 'long',
-    });
-    const formattedTime = formatDate(date, {
-      timeStyle: 'medium',
-      hourCycle: 'h24',
-    });
-
-    return `${formattedDate}, ${formattedTime}`;
-  };
-
-  return formatTimeStamp;
-};
-
-export default useFormatTimeStamp;