@strapi/admin 4.5.0 → 4.5.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@strapi/admin",
-  "version": "4.5.0",
+  "version": "4.5.2",
   "description": "Strapi Admin",
   "repository": {
     "type": "git",
@@ -46,18 +46,18 @@
     "@casl/ability": "^5.4.3",
     "@fingerprintjs/fingerprintjs": "3.3.3",
     "@fortawesome/fontawesome-free": "^5.15.3",
-    "@fortawesome/fontawesome-svg-core": "6.1.2",
+    "@fortawesome/fontawesome-svg-core": "6.2.0",
     "@fortawesome/free-brands-svg-icons": "^5.15.3",
     "@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.5.0",
-    "@strapi/design-system": "1.2.7",
-    "@strapi/helper-plugin": "4.5.0",
-    "@strapi/icons": "1.2.7",
-    "@strapi/permissions": "4.5.0",
-    "@strapi/typescript-utils": "4.5.0",
-    "@strapi/utils": "4.5.0",
+    "@strapi/babel-plugin-switch-ee-ce": "4.5.2",
+    "@strapi/design-system": "1.3.1",
+    "@strapi/helper-plugin": "4.5.2",
+    "@strapi/icons": "1.3.1",
+    "@strapi/permissions": "4.5.2",
+    "@strapi/typescript-utils": "4.5.2",
+    "@strapi/utils": "4.5.2",
     "axios": "0.27.2",
     "babel-loader": "8.2.5",
     "babel-plugin-styled-components": "2.0.2",
@@ -66,12 +66,13 @@
     "chokidar": "^3.5.1",
     "codemirror": "^5.65.8",
     "cross-env": "^7.0.3",
-    "css-loader": "6.7.1",
+    "css-loader": "6.7.2",
     "date-fns": "2.29.2",
     "dotenv": "8.5.1",
     "esbuild-loader": "^2.20.0",
     "execa": "^1.0.0",
     "fast-deep-equal": "3.1.3",
+    "find-root": "1.1.0",
     "font-awesome": "^4.7.0",
     "fork-ts-checker-webpack-plugin": "7.2.1",
     "formik": "^2.2.6",
@@ -127,7 +128,7 @@
     "reselect": "^4.0.0",
     "rimraf": "3.0.2",
     "sanitize-html": "2.7.1",
-    "semver": "7.3.7",
+    "semver": "7.3.8",
     "sift": "16.0.0",
     "style-loader": "3.3.1",
     "styled-components": "5.3.3",
@@ -139,10 +140,10 @@
     "yup": "^0.32.9"
   },
   "devDependencies": {
-    "@testing-library/dom": "8.17.1",
-    "@testing-library/react": "11.2.7",
-    "@testing-library/react-hooks": "3.7.0",
-    "@testing-library/user-event": "13.5.0",
+    "@testing-library/dom": "8.19.0",
+    "@testing-library/react": "12.1.4",
+    "@testing-library/react-hooks": "8.0.1",
+    "@testing-library/user-event": "14.4.3",
     "duplicate-dependencies-webpack-plugin": "^1.0.2",
     "glob": "8.0.3",
     "react-test-renderer": "^17.0.2",
@@ -165,5 +166,5 @@
       }
     }
   },
-  "gitHead": "33debd57010667a3fc5dfa343a673206cfb956e1"
+  "gitHead": "bcb1b7f472aae2556a9b59d59ee66d241c497a3e"
 }

package/server/content-types/api-token.js

@@ -67,7 +67,7 @@ module.exports = {
       required: false,
     },
     lifespan: {
-      type: 'integer',
+      type: 'biginteger',
       configurable: false,
       required: false,
     },

package/webpack.alias.js

@@ -1,6 +1,7 @@
 'use strict';
 
 const path = require('path');
+const findRoot = require('find-root');
 
 const aliasExactMatch = [
   '@strapi/design-system',
@@ -39,8 +40,8 @@ const aliasExactMatch = [
 
 // See https://webpack.js.org/configuration/resolve/
 module.exports = {
-  ...aliasExactMatch.reduce((acc, name) => {
-    acc[`${name}$`] = require.resolve(name);
+  ...aliasExactMatch.reduce((acc, moduleName) => {
+    acc[`${moduleName}$`] = findRoot(require.resolve(moduleName));
     return acc;
   }, {}),
 

package/webpack.config.js

@@ -169,7 +169,19 @@ module.exports = ({
             },
           },
         },
-
+        /**
+         * This is used to avoid webpack import errors where
+         * the origin is strict EcmaScript Module.
+         *
+         * e. g. a module with javascript mimetype, a '.mjs' file,
+         * or a '.js' file where the package.json contains '"type": "module"'
+         */
+        {
+          test: /\.m?jsx?$/,
+          resolve: {
+            fullySpecified: false,
+          },
+        },
         {
           test: /\.css$/i,
           use: ['style-loader', 'css-loader'],

package/admin/src/content-manager/components/DynamicZone/components/Component/Rectangle.js

@@ -1,19 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-import { Box } from '@strapi/design-system/Box';
-import { Flex } from '@strapi/design-system/Flex';
-
-const StyledBox = styled(Box)`
-  width: ${({ theme }) => theme.spaces[2]};
-  height: ${({ theme }) => theme.spaces[4]};
-`;
-
-const Rectangle = () => {
-  return (
-    <Flex justifyContent="center">
-      <StyledBox background="neutral200" />
-    </Flex>
-  );
-};
-
-export default Rectangle;

package/admin/src/content-manager/components/DynamicZone/components/Component/index.js

@@ -1,191 +0,0 @@
-import React, { memo, Suspense, useMemo } from 'react';
-import PropTypes from 'prop-types';
-import styled from 'styled-components';
-import isEqual from 'react-fast-compare';
-import { useIntl } from 'react-intl';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { Accordion, AccordionToggle, AccordionContent } from '@strapi/design-system/Accordion';
-import { IconButton } from '@strapi/design-system/IconButton';
-import { FocusTrap } from '@strapi/design-system/FocusTrap';
-import { Box } from '@strapi/design-system/Box';
-import { Flex } from '@strapi/design-system/Flex';
-import { Stack } from '@strapi/design-system/Stack';
-import { Loader } from '@strapi/design-system/Loader';
-import Trash from '@strapi/icons/Trash';
-import ArrowDown from '@strapi/icons/ArrowDown';
-import ArrowUp from '@strapi/icons/ArrowUp';
-import { useContentTypeLayout } from '../../../../hooks';
-import { getTrad } from '../../../../utils';
-import FieldComponent from '../../../FieldComponent';
-import Rectangle from './Rectangle';
-
-const ActionStack = styled(Stack)`
-  svg {
-    path {
-      fill: ${({ theme, expanded }) =>
-        expanded ? theme.colors.primary600 : theme.colors.neutral600};
-    }
-  }
-`;
-
-const IconButtonCustom = styled(IconButton)`
-  background-color: transparent;
-`;
-
-const StyledBox = styled(Box)`
-  > div:first-child {
-    box-shadow: ${({ theme }) => theme.shadows.tableShadow};
-  }
-`;
-
-const AccordionContentRadius = styled(Box)`
-  border-radius: 0 0 ${({ theme }) => theme.spaces[1]} ${({ theme }) => theme.spaces[1]};
-`;
-
-const Component = ({
-  componentUid,
-  formErrors,
-  index,
-  isOpen,
-  isFieldAllowed,
-  moveComponentDown,
-  moveComponentUp,
-  name,
-  onToggle,
-  removeComponentFromDynamicZone,
-  showDownIcon,
-  showUpIcon,
-}) => {
-  const { formatMessage } = useIntl();
-  const { getComponentLayout } = useContentTypeLayout();
-  const { icon, friendlyName } = useMemo(() => {
-    const {
-      info: { icon, displayName },
-    } = getComponentLayout(componentUid);
-
-    return { friendlyName: displayName, icon };
-  }, [componentUid, getComponentLayout]);
-
-  const handleMoveComponentDown = () => moveComponentDown(name, index);
-
-  const handleMoveComponentUp = () => moveComponentUp(name, index);
-
-  const handleRemove = () => removeComponentFromDynamicZone(name, index);
-
-  const downLabel = formatMessage({
-    id: getTrad('components.DynamicZone.move-down-label'),
-    defaultMessage: 'Move component down',
-  });
-  const upLabel = formatMessage({
-    id: getTrad('components.DynamicZone.move-up-label'),
-    defaultMessage: 'Move component down',
-  });
-  const deleteLabel = formatMessage(
-    {
-      id: getTrad('components.DynamicZone.delete-label'),
-      defaultMessage: 'Delete {name}',
-    },
-    { name: friendlyName }
-  );
-
-  const formErrorsKeys = Object.keys(formErrors);
-
-  const fieldsErrors = formErrorsKeys.filter((errorKey) => {
-    const errorKeysArray = errorKey.split('.');
-
-    if (`${errorKeysArray[0]}.${errorKeysArray[1]}` === `${name}.${index}`) {
-      return true;
-    }
-
-    return false;
-  });
-
-  let errorMessage;
-
-  if (fieldsErrors.length > 0) {
-    errorMessage = formatMessage({
-      id: getTrad('components.DynamicZone.error-message'),
-      defaultMessage: 'The component contains error(s)',
-    });
-  }
-
-  return (
-    <Box>
-      <Rectangle />
-      <StyledBox hasRadius>
-        <Accordion expanded={isOpen} onToggle={() => onToggle(index)} size="S" error={errorMessage}>
-          <AccordionToggle
-            startIcon={<FontAwesomeIcon icon={icon} />}
-            action={
-              <ActionStack horizontal spacing={0} expanded={isOpen}>
-                {showDownIcon && (
-                  <IconButtonCustom
-                    noBorder
-                    label={downLabel}
-                    onClick={handleMoveComponentDown}
-                    icon={<ArrowDown />}
-                  />
-                )}
-                {showUpIcon && (
-                  <IconButtonCustom
-                    noBorder
-                    label={upLabel}
-                    onClick={handleMoveComponentUp}
-                    icon={<ArrowUp />}
-                  />
-                )}
-                {isFieldAllowed && (
-                  <IconButtonCustom
-                    noBorder
-                    label={deleteLabel}
-                    onClick={handleRemove}
-                    icon={<Trash />}
-                  />
-                )}
-              </ActionStack>
-            }
-            title={friendlyName}
-            togglePosition="left"
-          />
-          <AccordionContent>
-            <AccordionContentRadius background="neutral0">
-              <Suspense
-                fallback={
-                  <Flex justifyContent="center" paddingTop={4} paddingBottom={4}>
-                    <Loader>Loading content.</Loader>
-                  </Flex>
-                }
-              >
-                <FocusTrap onEscape={() => onToggle(index)}>
-                  <FieldComponent
-                    componentUid={componentUid}
-                    icon={icon}
-                    name={`${name}.${index}`}
-                    isFromDynamicZone
-                  />
-                </FocusTrap>
-              </Suspense>
-            </AccordionContentRadius>
-          </AccordionContent>
-        </Accordion>
-      </StyledBox>
-    </Box>
-  );
-};
-
-Component.propTypes = {
-  componentUid: PropTypes.string.isRequired,
-  formErrors: PropTypes.object.isRequired,
-  index: PropTypes.number.isRequired,
-  isFieldAllowed: PropTypes.bool.isRequired,
-  isOpen: PropTypes.bool.isRequired,
-  moveComponentDown: PropTypes.func.isRequired,
-  moveComponentUp: PropTypes.func.isRequired,
-  name: PropTypes.string.isRequired,
-  onToggle: PropTypes.func.isRequired,
-  removeComponentFromDynamicZone: PropTypes.func.isRequired,
-  showDownIcon: PropTypes.bool.isRequired,
-  showUpIcon: PropTypes.bool.isRequired,
-};
-
-export default memo(Component, isEqual);

package/admin/src/content-manager/icons/Bold/index.js

@@ -1,22 +0,0 @@
-import React from 'react';
-
-const Bold = () => {
-  return (
-    <svg width="9" height="10" xmlns="http://www.w3.org/2000/svg">
-      <text
-        transform="translate(-12 -10)"
-        fill="#333740"
-        fillRule="evenodd"
-        fontSize="13"
-        fontFamily="Baskerville-SemiBold, Baskerville"
-        fontWeight="500"
-      >
-        <tspan x="12" y="20">
-          B
-        </tspan>
-      </text>
-    </svg>
-  );
-};
-
-export default Bold;

package/admin/src/content-manager/icons/Code/index.js

@@ -1,13 +0,0 @@
-import React from 'react';
-
-const Code = () => {
-  return (
-    <svg width="12" height="8" xmlns="http://www.w3.org/2000/svg">
-      <g fill="#333740" fillRule="evenodd">
-        <path d="M3.653 7.385a.632.632 0 0 1-.452-.191L.214 4.154a.66.66 0 0 1 0-.922L3.201.19a.632.632 0 0 1 .905 0 .66.66 0 0 1 0 .921l-2.534 2.58 2.534 2.58a.66.66 0 0 1 0 .922.632.632 0 0 1-.453.19zM8.347 7.385a.632.632 0 0 0 .452-.191l2.987-3.04a.66.66 0 0 0 0-.922L8.799.19a.632.632 0 0 0-.905 0 .66.66 0 0 0 0 .921l2.534 2.58-2.534 2.58a.66.66 0 0 0 0 .922c.125.127.289.19.453.19z" />
-      </g>
-    </svg>
-  );
-};
-
-export default Code;

package/admin/src/content-manager/icons/Cross/index.js

@@ -1,28 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-const Cross = ({ fill, height, width, ...rest }) => {
-  return (
-    <svg {...rest} width={width} height={height} xmlns="http://www.w3.org/2000/svg">
-      <path
-        d="M7.78 6.72L5.06 4l2.72-2.72a.748.748 0 0 0 0-1.06.748.748 0 0 0-1.06 0L4 2.94 1.28.22a.748.748 0 0 0-1.06 0 .748.748 0 0 0 0 1.06L2.94 4 .22 6.72a.748.748 0 0 0 0 1.06.748.748 0 0 0 1.06 0L4 5.06l2.72 2.72a.748.748 0 0 0 1.06 0 .752.752 0 0 0 0-1.06z"
-        fill={fill}
-        fillRule="evenodd"
-      />
-    </svg>
-  );
-};
-
-Cross.defaultProps = {
-  fill: '#b3b5b9',
-  height: '8',
-  width: '8',
-};
-
-Cross.propTypes = {
-  fill: PropTypes.string,
-  height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-};
-
-export default Cross;

package/admin/src/content-manager/icons/Italic/index.js

@@ -1,23 +0,0 @@
-import React from 'react';
-
-const Italic = () => {
-  return (
-    <svg width="6" height="9" xmlns="http://www.w3.org/2000/svg">
-      <text
-        transform="translate(-13 -11)"
-        fill="#333740"
-        fillRule="evenodd"
-        fontWeight="500"
-        fontSize="13"
-        fontFamily="Baskerville-SemiBoldItalic, Baskerville"
-        fontStyle="italic"
-      >
-        <tspan x="13" y="20">
-          I
-        </tspan>
-      </text>
-    </svg>
-  );
-};
-
-export default Italic;

package/admin/src/content-manager/icons/Link/index.js

@@ -1,21 +0,0 @@
-import React from 'react';
-
-const Link = () => {
-  return (
-    <svg width="12" height="6" xmlns="http://www.w3.org/2000/svg">
-      <g fill="none" fillRule="evenodd">
-        <path d="M6.063 1.5H6h.063z" fill="#000" />
-        <path
-          d="M9.516 0H8s.813.531.988 1.5h.528c.55 0 .984.434.984.984v1c0 .55-.434 1.016-.984 1.016h-3.5A1.03 1.03 0 0 1 5 3.484V2.5H3.5v.984A2.518 2.518 0 0 0 6.016 6h3.5C10.896 6 12 4.866 12 3.484v-1A2.473 2.473 0 0 0 9.516 0z"
-          fill="#333740"
-        />
-        <path
-          d="M8.3 1.5A2.473 2.473 0 0 0 6.016 0h-3.5C1.134 0 0 1.103 0 2.484v1A2.526 2.526 0 0 0 2.516 6H4s-.806-.531-1.003-1.5h-.481A1.03 1.03 0 0 1 1.5 3.484v-1c0-.55.466-.984 1.016-.984h3.5c.55 0 .984.434.984.984V3.5h1.5V2.484c0-.35-.072-.684-.2-.984z"
-          fill="#333740"
-        />
-      </g>
-    </svg>
-  );
-};
-
-export default Link;

package/admin/src/content-manager/icons/Media/index.js

@@ -1,14 +0,0 @@
-import React from 'react';
-
-const Media = () => {
-  return (
-    <svg width="12" height="11" xmlns="http://www.w3.org/2000/svg">
-      <g fill="#333740" fillRule="evenodd">
-        <path d="M9 4.286a1.286 1.286 0 1 0 0-2.572 1.286 1.286 0 0 0 0 2.572z" />
-        <path d="M11.25 0H.75C.332 0 0 .34 0 .758v8.77c0 .418.332.758.75.758h10.5c.418 0 .75-.34.75-.758V.758A.752.752 0 0 0 11.25 0zM8.488 5.296a.46.46 0 0 0-.342-.167c-.137 0-.234.065-.343.153l-.501.423c-.105.075-.188.126-.308.126a.443.443 0 0 1-.295-.11 3.5 3.5 0 0 1-.115-.11L5.143 4.054a.59.59 0 0 0-.897.008L.857 8.148V1.171a.353.353 0 0 1 .351-.314h9.581a.34.34 0 0 1 .346.322l.008 6.975-2.655-2.858z" />
-      </g>
-    </svg>
-  );
-};
-
-export default Media;

package/admin/src/content-manager/icons/Na/index.js

@@ -1,39 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-const Na = ({ fill, fontFamily, fontSize, fontWeight, height, textFill, width, ...rest }) => {
-  return (
-    <svg {...rest} width={width} height={height} xmlns="http://www.w3.org/2000/svg">
-      <g fill="none" fillRule="evenodd">
-        <rect fill={fill} width={width} height={height} rx="17.5" />
-        <text fontFamily={fontFamily} fontSize={fontSize} fontWeight={fontWeight} fill={textFill}>
-          <tspan x="6" y="22">
-            N/A
-          </tspan>
-        </text>
-      </g>
-    </svg>
-  );
-};
-
-Na.defaultProps = {
-  fill: '#fafafb',
-  fontFamily: 'Lato-Medium, Lato',
-  fontSize: '12',
-  fontWeight: '400',
-  height: '35',
-  textFill: '#838383',
-  width: '35',
-};
-
-Na.propTypes = {
-  fill: PropTypes.string,
-  fontFamily: PropTypes.string,
-  fontSize: PropTypes.string,
-  fontWeight: PropTypes.string,
-  height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  textFill: PropTypes.string,
-  width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-};
-
-export default Na;

package/admin/src/content-manager/icons/Ol/index.js

@@ -1,13 +0,0 @@
-import React from 'react';
-
-const Ol = () => {
-  return (
-    <svg width="12" height="8" xmlns="http://www.w3.org/2000/svg">
-      <g fill="#333740" fillRule="evenodd">
-        <path d="M2.4 3H.594v-.214h.137c.123 0 .212-.01.266-.032.053-.022.086-.052.1-.092a.67.67 0 0 0 .018-.188V.74a.46.46 0 0 0-.03-.194C1.064.504 1.021.476.955.46A1.437 1.437 0 0 0 .643.435H.539V.23c.332-.035.565-.067.7-.096.135-.03.258-.075.37-.134h.275v2.507c0 .104.023.177.07.218.047.04.14.061.278.061H2.4V3zM2.736 6.695l-.132.528h-.246a.261.261 0 0 0 .015-.074c0-.058-.049-.087-.146-.087H.293v-.198c.258-.173.511-.367.76-.581.25-.215.457-.437.623-.667.166-.23.249-.447.249-.653a.49.49 0 0 0-.321-.478.794.794 0 0 0-.582-.006.482.482 0 0 0-.196.138.284.284 0 0 0-.07.182c0 .074.04.17.12.289.006.008.009.015.009.02 0 .012-.041.03-.123.053l-.19.057a.693.693 0 0 1-.115.03c-.031 0-.067-.038-.108-.114a.516.516 0 0 1 .071-.586.899.899 0 0 1 .405-.238c.18-.058.4-.087.657-.087.317 0 .566.044.749.132.183.087.306.187.37.3a.64.64 0 0 1 .094.312c0 .197-.089.389-.266.575a5.296 5.296 0 0 1-.916.74 62.947 62.947 0 0 1-.62.413h1.843zM4 0h8v1H4zM4 2h8v1H4zM4 4h8v1H4zM4 6h8v1H4z" />
-      </g>
-    </svg>
-  );
-};
-
-export default Ol;

package/admin/src/content-manager/icons/Quote/index.js

@@ -1,13 +0,0 @@
-import React from 'react';
-
-const Quote = () => {
-  return (
-    <svg width="9" height="9" xmlns="http://www.w3.org/2000/svg">
-      <g fill="#333740" fillRule="evenodd">
-        <path d="M3 0C2.047 0 1.301.263.782.782.263 1.302 0 2.047 0 3v6h3.75V3H1.5c0-.54.115-.93.343-1.157C2.07 1.615 2.46 1.5 3 1.5M8.25 0c-.953 0-1.699.263-2.218.782-.519.52-.782 1.265-.782 2.218v6H9V3H6.75c0-.54.115-.93.343-1.157.227-.228.617-.343 1.157-.343" />
-      </g>
-    </svg>
-  );
-};
-
-export default Quote;

package/admin/src/content-manager/icons/Striked/index.js

@@ -1,24 +0,0 @@
-import React from 'react';
-
-const Striked = () => {
-  return (
-    <svg width="19" height="10" xmlns="http://www.w3.org/2000/svg">
-      <g fill="none" fillRule="evenodd">
-        <text
-          fontFamily="Lato-Semibold, Lato"
-          fontSize="11"
-          fontWeight="500"
-          fill="#41464E"
-          transform="translate(0 -2)"
-        >
-          <tspan x="1" y="11">
-            abc
-          </tspan>
-        </text>
-        <path d="M.5 6.5h18" stroke="#2C3039" strokeLinecap="square" />
-      </g>
-    </svg>
-  );
-};
-
-export default Striked;

package/admin/src/content-manager/icons/Ul/index.js

@@ -1,15 +0,0 @@
-import React from 'react';
-
-const Ul = () => {
-  return (
-    <svg width="13" height="7" xmlns="http://www.w3.org/2000/svg">
-      <g fill="none" fillRule="evenodd">
-        <path fill="#333740" d="M5 0h8v1H5zM5 2h8v1H5zM5 4h8v1H5zM5 6h8v1H5z" />
-        <rect stroke="#333740" x=".5" y=".5" width="2" height="2" rx="1" />
-        <rect stroke="#333740" x=".5" y="4.5" width="2" height="2" rx="1" />
-      </g>
-    </svg>
-  );
-};
-
-export default Ul;

package/admin/src/content-manager/icons/Underline/index.js

@@ -1,22 +0,0 @@
-import React from 'react';
-
-const Underline = () => {
-  return (
-    <svg width="10" height="10" xmlns="http://www.w3.org/2000/svg">
-      <text
-        transform="translate(-10 -11)"
-        fill="#101622"
-        fillRule="evenodd"
-        fontSize="13"
-        fontFamily="Baskerville-SemiBold, Baskerville"
-        fontWeight="500"
-      >
-        <tspan x="10" y="20">
-          U
-        </tspan>
-      </text>
-    </svg>
-  );
-};
-
-export default Underline;