@strapi/admin 4.10.1 → 4.10.2

package/ee/server/services/review-workflows/review-workflows.js

@@ -94,7 +94,7 @@ function persistStagesJoinTables({ strapi }) {
       // Persist the stage join table
       const { attributes, tableName } = strapi.db.metadata.get(contentTypeUID);
       const joinTableName = attributes[ENTITY_STAGE_ATTRIBUTE].joinTable.name;
-      return { name: joinTableName, dependsOn: { name: tableName } };
+      return { name: joinTableName, dependsOn: [{ name: tableName }] };
     };
 
     const joinTablesToPersist = pipe([

package/ee/server/services/review-workflows/stages.js

@@ -208,7 +208,7 @@ function getDiffBetweenStages(sourceStages, comparisonStages) {
 
       if (!srcStage) {
         acc.created.push(stageToCompare);
-      } else if (srcStage.name !== stageToCompare.name) {
+      } else if (srcStage.name !== stageToCompare.name || srcStage.color !== stageToCompare.color) {
         acc.updated.push(stageToCompare);
       }
       return acc;

package/ee/server/utils/persisted-tables.js

@@ -124,6 +124,9 @@ const persistTablesWithPrefix = async (tableNamePrefix) => {
 const removePersistedTablesWithSuffix = async (tableNameSuffix) => {
   const tableNameRegex = new RegExp(`.*${tableNameSuffix}$`);
   const tableNames = await findTables({ strapi }, tableNameRegex);
+  if (!tableNames.length) {
+    return;
+  }
   await removePersistedTables({ strapi }, tableNames);
 };
 

package/ee/server/validation/review-workflows.js

@@ -5,9 +5,15 @@ const { yup, validateYupSchema } = require('@strapi/utils');
 const stageObject = yup.object().shape({
   id: yup.number().integer().min(1),
   name: yup.string().max(255).required(),
+  color: yup.string().matches(/^#(?:[0-9a-fA-F]{3}){1,2}$/i), // hex color
 });
 
-const validateUpdateStagesSchema = yup.array().of(stageObject).required();
+const validateUpdateStagesSchema = yup
+  .array()
+  .of(stageObject)
+  .required()
+  .max(200, 'You can not create more than 200 stages');
+
 const validateUpdateStageOnEntity = yup
   .object()
   .shape({

package/jest.config.front.js

@@ -3,4 +3,5 @@
 module.exports = {
   preset: '../../../jest-preset.front.js',
   collectCoverageFrom: ['<rootDir>/packages/core/admin/admin/**/*.js'],
+  displayName: 'Core admin',
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@strapi/admin",
-  "version": "4.10.1",
+  "version": "4.10.2",
   "description": "Strapi Admin",
   "repository": {
     "type": "git",
@@ -48,15 +48,15 @@
     "@casl/ability": "^5.4.3",
     "@fingerprintjs/fingerprintjs": "3.3.6",
     "@pmmmwh/react-refresh-webpack-plugin": "0.5.10",
-    "@strapi/babel-plugin-switch-ee-ce": "4.10.1",
-    "@strapi/data-transfer": "4.10.1",
+    "@strapi/babel-plugin-switch-ee-ce": "4.10.2",
+    "@strapi/data-transfer": "4.10.2",
     "@strapi/design-system": "1.6.6",
-    "@strapi/helper-plugin": "4.10.1",
+    "@strapi/helper-plugin": "4.10.2",
     "@strapi/icons": "1.6.6",
-    "@strapi/permissions": "4.10.1",
-    "@strapi/provider-audit-logs-local": "4.10.1",
-    "@strapi/typescript-utils": "4.10.1",
-    "@strapi/utils": "4.10.1",
+    "@strapi/permissions": "4.10.2",
+    "@strapi/provider-audit-logs-local": "4.10.2",
+    "@strapi/typescript-utils": "4.10.2",
+    "@strapi/utils": "4.10.2",
     "axios": "1.3.4",
     "babel-loader": "^9.1.2",
     "babel-plugin-styled-components": "2.0.2",
@@ -117,7 +117,7 @@
     "react-error-boundary": "3.1.4",
     "react-fast-compare": "^3.2.0",
     "react-helmet": "^6.1.0",
-    "react-intl": "6.3.2",
+    "react-intl": "6.4.1",
     "react-is": "^17.0.2",
     "react-query": "3.24.3",
     "react-redux": "8.0.5",
@@ -168,5 +168,5 @@
       }
     }
   },
-  "gitHead": "23b531cef55c1583ea7d526b2baf2340a3129dad"
+  "gitHead": "a02b19866a3bcc1f30c2395698afae6e9c3e0515"
 }

package/admin/src/components/AutoReloadOverlayBlockerProvider/Blocker.js

@@ -1,95 +0,0 @@
-import React, { useEffect } from 'react';
-import ReactDOM from 'react-dom';
-import PropTypes from 'prop-types';
-import { useIntl } from 'react-intl';
-import styled, { keyframes } from 'styled-components';
-import { pxToRem } from '@strapi/helper-plugin';
-import { Clock, Refresh } from '@strapi/icons';
-import { Link } from '@strapi/design-system/v2';
-import { Box, Flex, Typography } from '@strapi/design-system';
-import { Content, IconBox, Overlay } from './Overlay';
-
-const overlayContainer = document.createElement('div');
-const ID = 'autoReloadOverlayBlocker';
-overlayContainer.setAttribute('id', ID);
-
-const rotation = keyframes`
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(359deg);
-  }
-`;
-
-const LoaderReload = styled(Refresh)`
-  animation: ${rotation} 1s infinite linear;
-`;
-
-const Blocker = ({ displayedIcon, description, title, isOpen }) => {
-  const { formatMessage } = useIntl();
-
-  useEffect(() => {
-    document.body.appendChild(overlayContainer);
-
-    return () => {
-      document.body.removeChild(overlayContainer);
-    };
-  }, []);
-
-  if (isOpen) {
-    return ReactDOM.createPortal(
-      <Overlay>
-        <Content direction="column" alignItems="stretch" gap={6}>
-          <Flex direction="column" alignItems="stretch" gap={2}>
-            <Flex justifyContent="center">
-              <Typography as="h1" variant="alpha">
-                {formatMessage(title)}
-              </Typography>
-            </Flex>
-            <Flex justifyContent="center">
-              <Typography as="h2" textColor="neutral600" fontSize={4} fontWeight="regular">
-                {formatMessage(description)}
-              </Typography>
-            </Flex>
-          </Flex>
-          <Flex justifyContent="center">
-            {displayedIcon === 'reload' && (
-              <IconBox padding={6} background="primary100" borderColor="primary200">
-                <LoaderReload width={pxToRem(36)} height={pxToRem(36)} />
-              </IconBox>
-            )}
-
-            {displayedIcon === 'time' && (
-              <IconBox padding={6} background="primary100" borderColor="primary200">
-                <Clock width={pxToRem(40)} height={pxToRem(40)} />
-              </IconBox>
-            )}
-          </Flex>
-          <Flex justifyContent="center">
-            <Box paddingTop={2}>
-              <Link href="https://docs.strapi.io" isExternal>
-                {formatMessage({
-                  id: 'global.documentation',
-                  defaultMessage: 'Read the documentation',
-                })}
-              </Link>
-            </Box>
-          </Flex>
-        </Content>
-      </Overlay>,
-      overlayContainer
-    );
-  }
-
-  return null;
-};
-
-Blocker.propTypes = {
-  displayedIcon: PropTypes.oneOfType([PropTypes.string, PropTypes.array]).isRequired,
-  description: PropTypes.object.isRequired,
-  isOpen: PropTypes.bool.isRequired,
-  title: PropTypes.object.isRequired,
-};
-
-export default Blocker;

package/admin/src/components/AutoReloadOverlayBlockerProvider/Overlay.js

@@ -1,42 +0,0 @@
-import styled from 'styled-components';
-import { Box, Flex } from '@strapi/design-system';
-import { pxToRem } from '@strapi/helper-plugin';
-
-const Overlay = styled(Box)`
-  position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  z-index: 1140;
-  &:before {
-    content: '';
-    position: fixed;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    background: ${({ theme }) => theme.colors.neutral0};
-    opacity: 0.9;
-  }
-`;
-
-const Content = styled(Flex)`
-  position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  padding-top: ${pxToRem(160)};
-`;
-
-const IconBox = styled(Box)`
-  border-radius: 50%;
-  svg {
-    > path {
-      fill: ${({ theme }) => theme.colors.primary600} !important;
-    }
-  }
-`;
-
-export { Content, IconBox, Overlay };

package/admin/src/components/AutoReloadOverlayBlockerProvider/index.js

@@ -1,99 +0,0 @@
-import React, { useEffect, useMemo, useRef, useState } from 'react';
-import PropTypes from 'prop-types';
-import { AutoReloadOverlayBockerContext } from '@strapi/helper-plugin';
-import Blocker from './Blocker';
-
-const ELAPSED = 30;
-
-const AutoReloadOverlayBlockerProvider = ({ children }) => {
-  const [isOpen, setIsOpen] = useState(false);
-  const [{ elapsed }, setState] = useState({ elapsed: 0, start: 0 });
-  const [config, setConfig] = useState(undefined);
-
-  const lockAppWithAutoreload = (config = undefined) => {
-    setIsOpen(true);
-    setConfig(config);
-    setState((prev) => ({ ...prev, start: Date.now() }));
-  };
-
-  const unlockAppWithAutoreload = () => {
-    setIsOpen(false);
-    setState({ start: 0, elapsed: 0 });
-    setConfig(undefined);
-  };
-
-  const lockApp = useRef(lockAppWithAutoreload);
-  const unlockApp = useRef(unlockAppWithAutoreload);
-
-  useEffect(() => {
-    let timer = null;
-
-    if (isOpen) {
-      timer = setInterval(() => {
-        if (elapsed > ELAPSED) {
-          clearInterval(timer);
-
-          return null;
-        }
-
-        setState((prev) => ({ ...prev, elapsed: Math.round(Date.now() - prev.start) / 1000 }));
-
-        return null;
-      }, 1000);
-    } else {
-      clearInterval(timer);
-    }
-
-    return () => {
-      clearInterval(timer);
-    };
-  }, [isOpen, elapsed]);
-
-  let displayedIcon = config?.icon || 'reload';
-
-  let description = {
-    id: config?.description || 'components.OverlayBlocker.description',
-    defaultMessage:
-      "You're using a feature that needs the server to restart. Please wait until the server is up.",
-  };
-  let title = {
-    id: config?.title || 'components.OverlayBlocker.title',
-    defaultMessage: 'Waiting for restart',
-  };
-
-  if (elapsed > ELAPSED) {
-    displayedIcon = 'time';
-
-    description = {
-      id: 'components.OverlayBlocker.description.serverError',
-      defaultMessage: 'The server should have restarted, please check your logs in the terminal.',
-    };
-
-    title = {
-      id: 'components.OverlayBlocker.title.serverError',
-      defaultMessage: 'The restart is taking longer than expected',
-    };
-  }
-
-  const autoReloadValue = useMemo(() => {
-    return { lockApp: lockApp.current, unlockApp: unlockApp.current };
-  }, [lockApp, unlockApp]);
-
-  return (
-    <AutoReloadOverlayBockerContext.Provider value={autoReloadValue}>
-      <Blocker
-        displayedIcon={displayedIcon}
-        isOpen={isOpen}
-        description={description}
-        title={title}
-      />
-      {children}
-    </AutoReloadOverlayBockerContext.Provider>
-  );
-};
-
-AutoReloadOverlayBlockerProvider.propTypes = {
-  children: PropTypes.element.isRequired,
-};
-
-export default AutoReloadOverlayBlockerProvider;

package/admin/src/components/Notifications/Notification/index.js

@@ -1,159 +0,0 @@
-import React, { useEffect, useCallback } from 'react';
-import PropTypes from 'prop-types';
-import { useIntl } from 'react-intl';
-import { Alert } from '@strapi/design-system';
-import { Link } from '@strapi/design-system/v2';
-
-const Notification = ({ dispatch, notification }) => {
-  const { formatMessage } = useIntl();
-  const { message, link, type, id, onClose, timeout, blockTransition, title } = notification;
-
-  const formattedMessage = (msg) =>
-    typeof msg === 'string' ? msg : formatMessage(msg, msg.values);
-  const handleClose = useCallback(() => {
-    if (onClose) {
-      onClose();
-    }
-
-    dispatch({
-      type: 'HIDE_NOTIFICATION',
-      id,
-    });
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [id]);
-
-  useEffect(() => {
-    let timeoutToClear;
-
-    if (!blockTransition) {
-      timeoutToClear = setTimeout(() => {
-        handleClose();
-      }, timeout || 2500);
-    }
-
-    return () => clearTimeout(timeoutToClear);
-  }, [blockTransition, handleClose, timeout]);
-
-  let variant;
-  let alertTitle;
-
-  // TODO break out this logic into separate file
-  if (type === 'info') {
-    variant = 'default';
-    alertTitle = formatMessage({
-      id: 'notification.default.title',
-      defaultMessage: 'Information:',
-    });
-  } else if (type === 'warning') {
-    // type should be renamed to danger in the future, but it might introduce changes if done now
-    variant = 'danger';
-    alertTitle = formatMessage({
-      id: 'notification.warning.title',
-      defaultMessage: 'Warning:',
-    });
-  } else if (type === 'softWarning') {
-    // type should be renamed to just warning in the future
-    variant = 'warning';
-    alertTitle = formatMessage({
-      id: 'notification.warning.title',
-      defaultMessage: 'Warning:',
-    });
-  } else {
-    variant = 'success';
-    alertTitle = formatMessage({
-      id: 'notification.success.title',
-      defaultMessage: 'Success:',
-    });
-  }
-
-  if (title) {
-    alertTitle =
-      typeof title === 'string'
-        ? title
-        : formattedMessage({
-            id: title?.id || title,
-            defaultMessage: title?.defaultMessage || title?.id || title,
-            values: title?.values,
-          });
-  }
-
-  return (
-    <Alert
-      action={
-        link ? (
-          <Link href={link.url} isExternal>
-            {formatMessage({
-              id: link.label?.id || link.label,
-              defaultMessage: link.label?.defaultMessage || link.label?.id || link.label,
-            })}
-          </Link>
-        ) : undefined
-      }
-      onClose={handleClose}
-      closeLabel="Close"
-      title={alertTitle}
-      variant={variant}
-    >
-      {formattedMessage({
-        id: message?.id || message,
-        defaultMessage: message?.defaultMessage || message?.id || message,
-        values: message?.values,
-      })}
-    </Alert>
-  );
-};
-
-Notification.defaultProps = {
-  notification: {
-    id: 1,
-    type: 'success',
-    message: {
-      id: 'notification.success.saved',
-      defaultMessage: 'Saved',
-    },
-    onClose: () => null,
-    timeout: 2500,
-    blockTransition: false,
-  },
-};
-
-Notification.propTypes = {
-  dispatch: PropTypes.func.isRequired,
-  notification: PropTypes.shape({
-    id: PropTypes.number,
-    message: PropTypes.oneOfType([
-      PropTypes.string,
-      PropTypes.shape({
-        id: PropTypes.string.isRequired,
-        defaultMessage: PropTypes.string,
-        values: PropTypes.object,
-      }),
-    ]),
-    link: PropTypes.shape({
-      target: PropTypes.string,
-      url: PropTypes.string.isRequired,
-      label: PropTypes.oneOfType([
-        PropTypes.string,
-        PropTypes.shape({
-          id: PropTypes.string.isRequired,
-          defaultMessage: PropTypes.string,
-          values: PropTypes.object,
-        }),
-      ]).isRequired,
-    }),
-    type: PropTypes.string,
-    onClose: PropTypes.func,
-    timeout: PropTypes.number,
-    blockTransition: PropTypes.bool,
-    title: PropTypes.oneOfType([
-      PropTypes.string,
-      PropTypes.shape({
-        id: PropTypes.string.isRequired,
-        defaultMessage: PropTypes.string,
-        values: PropTypes.object,
-      }),
-    ]),
-  }),
-};
-
-export default Notification;

package/admin/src/components/Notifications/index.js

@@ -1,46 +0,0 @@
-import { NotificationsProvider } from '@strapi/helper-plugin';
-import React, { useReducer } from 'react';
-import PropTypes from 'prop-types';
-import { Flex } from '@strapi/design-system';
-import Notification from './Notification';
-import reducer, { initialState } from './reducer';
-
-const Notifications = ({ children }) => {
-  const [{ notifications }, dispatch] = useReducer(reducer, initialState);
-
-  const displayNotification = (config) => {
-    dispatch({
-      type: 'SHOW_NOTIFICATION',
-      config,
-    });
-  };
-
-  return (
-    <NotificationsProvider toggleNotification={displayNotification}>
-      <Flex
-        left="50%"
-        marginLeft="-250px"
-        position="fixed"
-        direction="column"
-        alignItems="stretch"
-        gap={2}
-        top={`${46 / 16}rem`}
-        width={`${500 / 16}rem`}
-        zIndex={10}
-      >
-        {notifications.map((notification) => {
-          return (
-            <Notification key={notification.id} dispatch={dispatch} notification={notification} />
-          );
-        })}
-      </Flex>
-      {children}
-    </NotificationsProvider>
-  );
-};
-
-Notifications.propTypes = {
-  children: PropTypes.element.isRequired,
-};
-
-export default Notifications;

package/admin/src/components/Notifications/reducer.js

@@ -1,47 +0,0 @@
-import produce from 'immer';
-import get from 'lodash/get';
-
-const initialState = {
-  notifId: 0,
-  notifications: [],
-};
-
-const notificationReducer = (state = initialState, action) =>
-  // eslint-disable-next-line consistent-return
-  produce(state, (draftState) => {
-    switch (action.type) {
-      case 'SHOW_NOTIFICATION': {
-        draftState.notifications.push({
-          // No action.config spread to limit the notification API and avoid customization
-          id: state.notifId,
-          type: get(action, ['config', 'type'], 'success'),
-          message: get(action, ['config', 'message'], {
-            id: 'notification.success.saved',
-            defaultMessage: 'Saved',
-          }),
-          link: get(action, ['config', 'link'], null),
-          timeout: get(action, ['config', 'timeout'], 2500),
-          blockTransition: get(action, ['config', 'blockTransition'], false),
-          onClose: get(action, ['config', 'onClose'], null),
-          title: get(action, ['config', 'title'], null),
-        });
-        draftState.notifId = state.notifId + 1;
-        break;
-      }
-      case 'HIDE_NOTIFICATION': {
-        const indexToRemove = state.notifications.findIndex((notif) => notif.id === action.id);
-
-        if (indexToRemove !== -1) {
-          draftState.notifications.splice(indexToRemove, 1);
-        }
-        break;
-      }
-
-      default: {
-        return draftState;
-      }
-    }
-  });
-
-export default notificationReducer;
-export { initialState };

package/admin/src/components/OverlayBlocker/index.js

@@ -1,67 +0,0 @@
-/**
- *
- * OverlayBlockerProvider
- *
- */
-import React, { useEffect, useState } from 'react';
-import ReactDOM from 'react-dom';
-import PropTypes from 'prop-types';
-import styled from 'styled-components';
-import { OverlayBlockerContext } from '@strapi/helper-plugin';
-
-const overlayContainer = document.createElement('div');
-overlayContainer.setAttribute('id', 'overlayBlocker');
-
-const Overlay = styled.div`
-  position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  z-index: 1140;
-`;
-
-const Portal = ({ isOpen }) => {
-  useEffect(() => {
-    document.body.appendChild(overlayContainer);
-
-    return () => {
-      document.body.removeChild(overlayContainer);
-    };
-  }, []);
-
-  if (isOpen) {
-    return ReactDOM.createPortal(<Overlay />, overlayContainer);
-  }
-
-  return null;
-};
-
-Portal.propTypes = {
-  isOpen: PropTypes.bool.isRequired,
-};
-
-const OverlayBlockerProvider = ({ children }) => {
-  const [isOpen, setIsOpen] = useState(false);
-
-  const lockApp = () => {
-    setIsOpen(true);
-  };
-
-  const unlockApp = () => {
-    setIsOpen(false);
-  };
-
-  return (
-    <OverlayBlockerContext.Provider value={{ lockApp, unlockApp }}>
-      {children}
-      <Portal isOpen={isOpen} />
-    </OverlayBlockerContext.Provider>
-  );
-};
-
-OverlayBlockerProvider.propTypes = {
-  children: PropTypes.node.isRequired,
-};
-
-export default OverlayBlockerProvider;