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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@strapi/admin",
-  "version": "4.6.0-alpha.0",
+  "version": "4.6.0-beta.0",
   "description": "Strapi Admin",
   "repository": {
     "type": "git",
@@ -51,13 +51,13 @@
     "@fortawesome/free-solid-svg-icons": "^5.15.3",
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@pmmmwh/react-refresh-webpack-plugin": "0.5.7",
-    "@strapi/babel-plugin-switch-ee-ce": "4.6.0-alpha.0",
-    "@strapi/design-system": "1.3.1",
-    "@strapi/helper-plugin": "4.6.0-alpha.0",
-    "@strapi/icons": "1.3.1",
-    "@strapi/permissions": "4.6.0-alpha.0",
-    "@strapi/typescript-utils": "4.6.0-alpha.0",
-    "@strapi/utils": "4.6.0-alpha.0",
+    "@strapi/babel-plugin-switch-ee-ce": "4.6.0-beta.0",
+    "@strapi/design-system": "1.4.0",
+    "@strapi/helper-plugin": "4.6.0-beta.0",
+    "@strapi/icons": "1.4.0",
+    "@strapi/permissions": "4.6.0-beta.0",
+    "@strapi/typescript-utils": "4.6.0-beta.0",
+    "@strapi/utils": "4.6.0-beta.0",
     "axios": "0.27.2",
     "babel-loader": "8.2.5",
     "babel-plugin-styled-components": "2.0.2",
@@ -102,7 +102,7 @@
     "markdown-it-sup": "1.0.0",
     "match-sorter": "^4.0.2",
     "mini-css-extract-plugin": "2.4.4",
-    "msw": "0.42.3",
+    "msw": "0.49.1",
     "node-polyfill-webpack-plugin": "2.0.1",
     "p-map": "4.0.0",
     "passport-local": "1.0.0",
@@ -110,10 +110,10 @@
     "qs": "6.10.1",
     "react": "^17.0.2",
     "react-copy-to-clipboard": "^5.1.0",
-    "react-dnd": "^14.0.2",
-    "react-dnd-html5-backend": "^14.0.0",
+    "react-dnd": "15.1.2",
+    "react-dnd-html5-backend": "15.1.2",
     "react-dom": "^17.0.2",
-    "react-error-boundary": "3.1.1",
+    "react-error-boundary": "3.1.4",
     "react-fast-compare": "^3.2.0",
     "react-helmet": "^6.1.0",
     "react-intl": "5.25.1",
@@ -122,12 +122,12 @@
     "react-redux": "7.2.8",
     "react-refresh": "0.14.0",
     "react-router": "5.2.0",
-    "react-router-dom": "5.2.0",
+    "react-router-dom": "5.3.4",
     "react-window": "1.8.7",
     "redux": "^4.0.1",
     "reselect": "^4.0.0",
     "rimraf": "3.0.2",
-    "sanitize-html": "2.7.1",
+    "sanitize-html": "2.7.3",
     "semver": "7.3.8",
     "sift": "16.0.0",
     "style-loader": "3.3.1",
@@ -166,5 +166,5 @@
       }
     }
   },
-  "gitHead": "b7a87dcffc6f44e18eedef92e354096ffe32ce0c"
+  "gitHead": "c0c3365ad801d088a6ab6c4eb95a014078429747"
 }

package/utils/get-plugins-path.js

@@ -1,6 +1,6 @@
 'use strict';
 
-const { join, resolve } = require('path');
+const { join, resolve, sep, posix } = require('path');
 const fs = require('fs-extra');
 // eslint-disable-next-line import/no-extraneous-dependencies
 const glob = require('glob');
@@ -8,8 +8,22 @@ const glob = require('glob');
 // Only for dev environement
 const getPluginsPath = () => {
   const rootPath = resolve(__dirname, '..', join('..', '..', '..', 'packages'));
-  const corePath = join(rootPath, 'core', '*');
-  const pluginsPath = join(rootPath, 'plugins', '*');
+  /**
+   * So `glob` only supports '/' as a path separator, so we need to replace
+   * the path separator for the current OS with '/'. e.g. on windows it's `\`.
+   *
+   * see https://github.com/isaacs/node-glob/#windows for more information
+   *
+   * and see https://github.com/isaacs/node-glob/issues/467#issuecomment-1114240501 for the recommended fix.
+   */
+  let corePath = join(rootPath, 'core', '*');
+  let pluginsPath = join(rootPath, 'plugins', '*');
+
+  if (process.platform === 'win32') {
+    corePath = corePath.split(sep).join(posix.sep);
+    pluginsPath = pluginsPath.split(sep).join(posix.sep);
+  }
+
   const corePackageDirs = glob.sync(corePath);
   const pluginsPackageDirs = glob.sync(pluginsPath);
 

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

@@ -1,122 +0,0 @@
-import React, { Children, cloneElement } from 'react';
-import PropTypes from 'prop-types';
-import { useIntl } from 'react-intl';
-import styled from 'styled-components';
-import { Box } from '@strapi/design-system/Box';
-import { Typography } from '@strapi/design-system/Typography';
-import { Flex } from '@strapi/design-system/Flex';
-import { KeyboardNavigable } from '@strapi/design-system/KeyboardNavigable';
-
-const AccordionFooter = styled(Box)`
-  overflow: hidden;
-  border-bottom: 1px solid ${({ theme }) => theme.colors.neutral200};
-  border-right: 1px solid ${({ theme }) => theme.colors.neutral200};
-  border-left: 1px solid ${({ theme }) => theme.colors.neutral200};
-  border-radius: 0 0 ${({ theme }) => theme.borderRadius} ${({ theme }) => theme.borderRadius};
-`;
-
-const EnhancedGroup = styled(Box)`
-  > div {
-    & > * {
-      border-radius: unset;
-      border-right: 1px solid ${({ theme }) => theme.colors.neutral200};
-      border-left: 1px solid ${({ theme }) => theme.colors.neutral200};
-      border-bottom: 1px solid ${({ theme }) => theme.colors.neutral200};
-    }
-    > div {
-      > div:first-of-type {
-        border-radius: unset;
-      }
-    }
-  }
-
-  > div:first-of-type {
-    > div {
-      border-radius: ${({ theme }) => theme.borderRadius} ${({ theme }) => theme.borderRadius} 0 0;
-      > div:first-of-type {
-        border-radius: ${({ theme }) => theme.borderRadius} ${({ theme }) => theme.borderRadius} 0 0;
-      }
-    }
-
-    > div:not([data-strapi-expanded='true']) {
-      border-top: 1px solid ${({ theme }) => theme.colors.neutral200};
-
-      &:hover {
-        border-top: 1px solid ${({ theme }) => theme.colors.primary600};
-      }
-    }
-
-    > span {
-      border-radius: ${({ theme }) => theme.borderRadius} ${({ theme }) => theme.borderRadius} 0 0;
-      border-top: 1px solid ${({ theme }) => theme.colors.neutral200};
-    }
-  }
-
-  & [data-strapi-expanded='true'] {
-    border: 1px solid ${({ theme }) => theme.colors.primary600};
-  }
-
-  ${({ theme, footer }) => `
-    &:not(${footer}) {
-      & > *:last-of-type {
-        border-radius: 0 0 ${theme.borderRadius} ${theme.borderRadius};
-      }
-    }
-  `}
-`;
-
-const LabelAction = styled(Box)`
-  svg path {
-    fill: ${({ theme }) => theme.colors.neutral500};
-  }
-`;
-
-const AccordionGroupCustom = ({ children, footer, label, labelAction, error }) => {
-  const { formatMessage } = useIntl();
-  const childrenArray = Children.toArray(children).map((child) => {
-    return cloneElement(child, { hasErrorMessage: false });
-  });
-
-  return (
-    <KeyboardNavigable attributeName="data-strapi-accordion-toggle">
-      {label && (
-        <Flex paddingBottom={1}>
-          <Typography as="label" textColor="neutral800" variant="pi" fontWeight="bold">
-            {label}
-          </Typography>
-          {labelAction && <LabelAction paddingLeft={1}>{labelAction}</LabelAction>}
-        </Flex>
-      )}
-      <EnhancedGroup footer={footer}>{childrenArray}</EnhancedGroup>
-      {footer && <AccordionFooter>{footer}</AccordionFooter>}
-      {error && (
-        <Box paddingTop={1}>
-          <Typography variant="pi" textColor="danger600">
-            {formatMessage({ id: error.id, defaultMessage: error.id }, { ...error.values })}
-          </Typography>
-        </Box>
-      )}
-    </KeyboardNavigable>
-  );
-};
-
-AccordionGroupCustom.defaultProps = {
-  error: undefined,
-  footer: null,
-  label: null,
-  labelAction: undefined,
-};
-
-AccordionGroupCustom.propTypes = {
-  children: PropTypes.node.isRequired,
-  error: PropTypes.shape({
-    id: PropTypes.string.isRequired,
-    defaultMessage: PropTypes.string.isRequired,
-    values: PropTypes.object,
-  }),
-  footer: PropTypes.node,
-  label: PropTypes.string,
-  labelAction: PropTypes.node,
-};
-
-export default AccordionGroupCustom;

package/admin/src/content-manager/components/RepeatableComponent/AddFieldButton.js

@@ -1,58 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import styled from 'styled-components';
-import { useIntl } from 'react-intl';
-import { Box } from '@strapi/design-system/Box';
-import { Flex } from '@strapi/design-system/Flex';
-import { Typography } from '@strapi/design-system/Typography';
-import Plus from '@strapi/icons/Plus';
-import { pxToRem } from '@strapi/helper-plugin';
-import { getTrad } from '../../utils';
-
-const StyledButton = styled(Box)`
-  width: 100%;
-  border-top: 1px solid ${({ theme }) => theme.colors.neutral200};
-  cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
-`;
-
-const StyledIcon = styled(Plus)`
-  width: ${pxToRem(10)};
-  height: ${pxToRem(10)};
-  margin-right: ${({ theme }) => theme.spaces[2]};
-
-  > path {
-    fill: ${({ theme }) => theme.colors.primary600};
-  }
-`;
-
-const Button = ({ disabled, onClick }) => {
-  const { formatMessage } = useIntl();
-
-  return (
-    <StyledButton
-      as="button"
-      disabled={disabled}
-      type="button"
-      paddingTop={2}
-      paddingBottom={2}
-      onClick={onClick}
-    >
-      <Flex justifyContent="center">
-        <Typography fontWeight="bold" textColor="primary600">
-          <StyledIcon />
-          {formatMessage({
-            id: getTrad('containers.EditView.add.new-entry'),
-            defaultMessage: 'Add an entry',
-          })}
-        </Typography>
-      </Flex>
-    </StyledButton>
-  );
-};
-
-Button.propTypes = {
-  disabled: PropTypes.bool.isRequired,
-  onClick: PropTypes.func.isRequired,
-};
-
-export default Button;

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

@@ -1,72 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-import PropTypes from 'prop-types';
-import { Stack } from '@strapi/design-system/Stack';
-import { Flex } from '@strapi/design-system/Flex';
-import { TextButton } from '@strapi/design-system/TextButton';
-import { Icon } from '@strapi/design-system/Icon';
-import { Typography } from '@strapi/design-system/Typography';
-import Trash from '@strapi/icons/Trash';
-import Drag from '@strapi/icons/Drag';
-import DropdownIcon from '@strapi/icons/CarretDown';
-import { CustomIconButtonSibling } from './IconButtonCustoms';
-
-const SiblingWrapper = styled.span`
-  display: flex;
-  justify-content: space-between;
-  padding-left: ${({ theme }) => theme.spaces[4]};
-  padding-right: ${({ theme }) => theme.spaces[4]};
-  background-color: ${({ theme }) => theme.colors.neutral0};
-  height: ${50 / 16}rem;
-`;
-
-const ToggleButton = styled(TextButton)`
-  text-align: left;
-
-  svg {
-    width: ${14 / 16}rem;
-    height: ${14 / 16}rem;
-
-    path {
-      fill: ${({ theme, expanded }) =>
-        expanded ? theme.colors.primary600 : theme.colors.neutral500};
-    }
-  }
-`;
-
-const DraggingSibling = ({ displayedValue }) => {
-  return (
-    <SiblingWrapper>
-      <Stack horizontal spacing={3} flex={1}>
-        <Flex
-          justifyContent="center"
-          borderRadius="50%"
-          height={`${24 / 16}rem}`}
-          width={`${24 / 16}rem}`}
-          aria-hidden
-          as="span"
-          background="neutral200"
-        >
-          <Icon as={DropdownIcon} width={`${8 / 16}rem}`} color="neutral600" />
-        </Flex>
-
-        <ToggleButton onClick={() => {}} flex={1}>
-          <Typography fontWeight="bold" textColor="neutral700">
-            {displayedValue}
-          </Typography>
-        </ToggleButton>
-      </Stack>
-
-      <Stack horizontal spacing={0}>
-        <CustomIconButtonSibling noBorder onClick={() => {}} icon={<Trash />} />
-        <CustomIconButtonSibling icon={<Drag />} noBorder />
-      </Stack>
-    </SiblingWrapper>
-  );
-};
-
-DraggingSibling.propTypes = {
-  displayedValue: PropTypes.string.isRequired,
-};
-
-export default DraggingSibling;

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

@@ -1,32 +0,0 @@
-import styled from 'styled-components';
-import { IconButton } from '@strapi/design-system/IconButton';
-
-export const CustomIconButton = styled(IconButton)`
-  background-color: transparent;
-
-  svg {
-    path {
-      fill: ${({ theme, expanded }) =>
-        expanded ? theme.colors.primary600 : theme.colors.neutral600};
-    }
-  }
-
-  &:hover {
-    svg {
-      path {
-        fill: ${({ theme }) => theme.colors.primary600};
-      }
-    }
-  }
-`;
-
-export const CustomIconButtonSibling = styled(IconButton)`
-  background-color: transparent;
-
-  svg {
-    path {
-      fill: ${({ theme, expanded }) =>
-        expanded ? theme.colors.primary600 : theme.colors.neutral600};
-    }
-  }
-`;