@strapi/admin 4.11.1 → 4.11.2

package/admin/src/StrapiApp.js

@@ -1,27 +1,29 @@
 import React from 'react';
-import { BrowserRouter } from 'react-router-dom';
-import { lightTheme, darkTheme } from '@strapi/design-system';
+
+import { darkTheme, lightTheme } from '@strapi/design-system';
+import invariant from 'invariant';
+import isFunction from 'lodash/isFunction';
 import merge from 'lodash/merge';
 import pick from 'lodash/pick';
-import isFunction from 'lodash/isFunction';
-import invariant from 'invariant';
 import { Helmet } from 'react-helmet';
-import { basename, createHook } from './core/utils';
-import configureStore from './core/store/configureStore';
-import { customFields, Plugin } from './core/apis';
-import App from './pages/App';
+import { BrowserRouter } from 'react-router-dom';
+
 import Logo from './assets/images/logo-strapi-2022.svg';
+import localStorageKey from './components/LanguageProvider/utils/localStorageKey';
 import Providers from './components/Providers';
-import languageNativeNames from './translations/languageNativeNames';
+import { customFields, Plugin } from './core/apis';
+import configureStore from './core/store/configureStore';
+import { basename, createHook } from './core/utils';
 import {
   INJECT_COLUMN_IN_TABLE,
   MUTATE_COLLECTION_TYPES_LINKS,
   MUTATE_EDIT_VIEW_LAYOUT,
   MUTATE_SINGLE_TYPES_LINKS,
 } from './exposedHooks';
-import injectionZones from './injectionZones';
 import favicon from './favicon.png';
-import localStorageKey from './components/LanguageProvider/utils/localStorageKey';
+import injectionZones from './injectionZones';
+import App from './pages/App';
+import languageNativeNames from './translations/languageNativeNames';
 
 class StrapiApp {
   constructor({ adminConfig, appPlugins, library, middlewares, reducers }) {

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

@@ -1,18 +1,22 @@
-import React, { useState, useEffect } from 'react';
-//  TODO: DS add loader
+import React, { useEffect, useState } from 'react';
+
 import {
+  AppInfoProvider,
   auth,
   LoadingIndicatorPage,
-  AppInfoProvider,
   useGuidedTour,
   useNotification,
 } from '@strapi/helper-plugin';
-import { useQueries } from 'react-query';
 import get from 'lodash/get';
+import { useQueries } from 'react-query';
+//  TODO: DS add loader
+
 import packageJSON from '../../../../package.json';
 import { useConfigurations } from '../../hooks';
+import { getFullName, hashAdminUserEmail } from '../../utils';
 import PluginsInitializer from '../PluginsInitializer';
 import RBACProvider from '../RBACProvider';
+
 import {
   fetchAppInfo,
   fetchCurrentUserPermissions,
@@ -20,7 +24,6 @@ import {
   fetchUserRoles,
 } from './utils/api';
 import checkLatestStrapiVersion from './utils/checkLatestStrapiVersion';
-import { getFullName, hashAdminUserEmail } from '../../utils';
 
 const strapiVersion = packageJSON.version;
 

package/admin/src/components/AuthenticatedApp/utils/api.js

@@ -1,7 +1,9 @@
 import { getFetchClient } from '@strapi/helper-plugin';
-import checkLatestStrapiVersion from './checkLatestStrapiVersion';
+
 import packageJSON from '../../../../../package.json';
 
+import checkLatestStrapiVersion from './checkLatestStrapiVersion';
+
 const strapiVersion = packageJSON.version;
 const showUpdateNotif = !JSON.parse(localStorage.getItem('STRAPI_UPDATE_NOTIF'));
 const { get } = getFetchClient();

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

@@ -1,6 +1,9 @@
 import React, { useCallback, useMemo, useReducer } from 'react';
+
 import PropTypes from 'prop-types';
+
 import { ConfigurationsContext } from '../../contexts';
+
 import reducer, { initialState } from './reducer';
 
 const ConfigurationsProvider = ({

package/admin/src/components/DragLayer/DragLayer.js

@@ -1,7 +1,8 @@
 import * as React from 'react';
+
+import { Box } from '@strapi/design-system';
 import PropTypes from 'prop-types';
 import { useDragLayer } from 'react-dnd';
-import { Box } from '@strapi/design-system';
 
 function getStyle(initialOffset, currentOffset, mouseOffset) {
   if (!initialOffset || !currentOffset) {

package/admin/src/components/GuidedTour/Homepage/components/Step.js

@@ -1,11 +1,13 @@
 import React from 'react';
-import { useIntl } from 'react-intl';
-import PropTypes from 'prop-types';
+
+import { Box, Flex, Typography } from '@strapi/design-system';
 import { pxToRem } from '@strapi/helper-plugin';
-import { Typography, Box, Flex } from '@strapi/design-system';
-import StepNumber from '../../Stepper/StepNumber';
+import PropTypes from 'prop-types';
+import { useIntl } from 'react-intl';
+
+import { IS_ACTIVE, IS_DONE, IS_NOT_DONE } from '../../constants';
 import StepLine from '../../Stepper/StepLine';
-import { IS_DONE, IS_ACTIVE, IS_NOT_DONE } from '../../constants';
+import StepNumber from '../../Stepper/StepNumber';
 
 const StepHomepage = ({ type, title, number, content, hasLine }) => {
   const { formatMessage } = useIntl();

package/admin/src/components/GuidedTour/Homepage/components/Stepper.js

@@ -1,8 +1,11 @@
 import React from 'react';
-import PropTypes from 'prop-types';
+
 import { Box } from '@strapi/design-system';
+import PropTypes from 'prop-types';
+
+import { IS_ACTIVE, IS_DONE, IS_NOT_DONE } from '../../constants';
+
 import StepHomepage from './Step';
-import { IS_DONE, IS_ACTIVE, IS_NOT_DONE } from '../../constants';
 
 const getType = (activeSectionIndex, index) => {
   if (activeSectionIndex === -1) {

package/admin/src/components/GuidedTour/Homepage/index.js

@@ -1,11 +1,14 @@
 import React from 'react';
-import { useGuidedTour, useTracking, LinkButton } from '@strapi/helper-plugin';
-import { useIntl } from 'react-intl';
-import { Flex, Box, Typography, Button } from '@strapi/design-system';
+
+import { Box, Button, Flex, Typography } from '@strapi/design-system';
+import { LinkButton, useGuidedTour, useTracking } from '@strapi/helper-plugin';
 import { ArrowRight } from '@strapi/icons';
-import StepperHomepage from './components/Stepper';
+import { useIntl } from 'react-intl';
+
 import layout from '../layout';
 
+import StepperHomepage from './components/Stepper';
+
 const GuidedTourHomepage = () => {
   const { guidedTourState, setSkipped } = useGuidedTour();
   const { formatMessage } = useIntl();

package/admin/src/components/GuidedTour/Modal/components/Content.js

@@ -1,8 +1,9 @@
 import React from 'react';
+
+import { Box, Flex, Typography } from '@strapi/design-system';
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
-import { Flex, Box, Typography } from '@strapi/design-system';
 import { useIntl } from 'react-intl';
+import styled from 'styled-components';
 
 const LiStyled = styled.li`
   list-style: disc;

package/admin/src/components/GuidedTour/Modal/components/Modal.js

@@ -1,10 +1,11 @@
 import React from 'react';
-import styled from 'styled-components';
-import PropTypes from 'prop-types';
-import { useIntl } from 'react-intl';
+
+import { Box, Button, Flex, FocusTrap, IconButton, Portal } from '@strapi/design-system';
 import { pxToRem } from '@strapi/helper-plugin';
-import { Portal, FocusTrap, Flex, Box, IconButton, Button } from '@strapi/design-system';
 import { Cross } from '@strapi/icons';
+import PropTypes from 'prop-types';
+import { useIntl } from 'react-intl';
+import styled from 'styled-components';
 
 const ModalWrapper = styled(Flex)`
   position: fixed;

package/admin/src/components/GuidedTour/Modal/components/StepNumberWithPadding.js

@@ -1,6 +1,8 @@
 import React from 'react';
-import PropTypes from 'prop-types';
+
 import { Box } from '@strapi/design-system';
+import PropTypes from 'prop-types';
+
 import StepNumber from '../../Stepper/StepNumber';
 
 const StepNumberWithPadding = ({ number, last, type }) => (

package/admin/src/components/GuidedTour/Modal/components/Stepper.js

@@ -1,13 +1,16 @@
 import React from 'react';
+
+import { Box, Button, Flex, Typography } from '@strapi/design-system';
+import { LinkButton, pxToRem } from '@strapi/helper-plugin';
+import { ArrowRight } from '@strapi/icons';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
-import { pxToRem, LinkButton } from '@strapi/helper-plugin';
-import { Typography, Button, Box, Flex } from '@strapi/design-system';
-import { ArrowRight } from '@strapi/icons';
-import Content from './Content';
+
+import { IS_ACTIVE, IS_DONE } from '../../constants';
 import StepLine from '../../Stepper/StepLine';
+
+import Content from './Content';
 import StepNumberWithPadding from './StepNumberWithPadding';
-import { IS_DONE, IS_ACTIVE } from '../../constants';
 
 const StepperModal = ({
   title,

package/admin/src/components/GuidedTour/Modal/index.js

@@ -1,10 +1,13 @@
-import React, { useEffect, useState, useReducer } from 'react';
-import at from 'lodash/at';
+import React, { useEffect, useReducer, useState } from 'react';
+
 import { useGuidedTour, useTracking } from '@strapi/helper-plugin';
+import at from 'lodash/at';
+
 import layout from '../layout';
+
 import Modal from './components/Modal';
-import reducer, { initialState } from './reducer';
 import StepperModal from './components/Stepper';
+import reducer, { initialState } from './reducer';
 
 const GuidedTourModal = () => {
   const {

package/admin/src/components/GuidedTour/Stepper/StepLine.js

@@ -1,8 +1,10 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-import { pxToRem } from '@strapi/helper-plugin';
+
 import { Box } from '@strapi/design-system';
-import { IS_DONE, IS_ACTIVE, IS_NOT_DONE } from '../constants';
+import { pxToRem } from '@strapi/helper-plugin';
+import PropTypes from 'prop-types';
+
+import { IS_ACTIVE, IS_DONE, IS_NOT_DONE } from '../constants';
 
 const StepLine = ({ type, ...props }) => {
   return (

package/admin/src/components/GuidedTour/Stepper/StepNumber.js

@@ -1,9 +1,11 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-import { pxToRem } from '@strapi/helper-plugin';
+
 import { Flex, Icon, Typography } from '@strapi/design-system';
+import { pxToRem } from '@strapi/helper-plugin';
 import { Check } from '@strapi/icons';
-import { IS_DONE, IS_ACTIVE, IS_NOT_DONE } from '../constants';
+import PropTypes from 'prop-types';
+
+import { IS_ACTIVE, IS_DONE, IS_NOT_DONE } from '../constants';
 
 const StepNumber = ({ type, number }) => {
   if (type === IS_DONE) {

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

@@ -1,12 +1,14 @@
 import React, { useReducer } from 'react';
-import PropTypes from 'prop-types';
-import get from 'lodash/get';
+
 import { GuidedTourProvider } from '@strapi/helper-plugin';
-import persistStateToLocaleStorage from './utils/persistStateToLocaleStorage';
+import get from 'lodash/get';
+import PropTypes from 'prop-types';
+
+import init from './init';
+import reducer, { initialState } from './reducer';
 import arePreviousSectionsDone from './utils/arePreviousSectionsDone';
 import arePreviousStepsDone from './utils/arePreviousStepsDone';
-import reducer, { initialState } from './reducer';
-import init from './init';
+import persistStateToLocaleStorage from './utils/persistStateToLocaleStorage';
 
 const GuidedTour = ({ children }) => {
   const [{ currentStep, guidedTourState, isGuidedTourVisible, isSkipped }, dispatch] = useReducer(

package/admin/src/components/GuidedTour/init.js

@@ -1,4 +1,5 @@
 import set from 'lodash/set';
+
 import persistStateToLocaleStorage, {
   COMPLETED_STEPS,
   CURRENT_STEP,

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

@@ -7,13 +7,16 @@
  */
 
 import React, { useEffect, useReducer } from 'react';
+
+import defaultsDeep from 'lodash/defaultsDeep';
 import PropTypes from 'prop-types';
 import { IntlProvider } from 'react-intl';
-import defaultsDeep from 'lodash/defaultsDeep';
+
 import LocalesProvider from '../LocalesProvider';
-import localStorageKey from './utils/localStorageKey';
+
 import init from './init';
 import reducer, { initialState } from './reducer';
+import localStorageKey from './utils/localStorageKey';
 
 const LanguageProvider = ({ children, localeNames, messages }) => {
   const [{ locale }, dispatch] = useReducer(reducer, initialState, () => init(localeNames));

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

@@ -1,27 +1,29 @@
 import React, { useRef, useState } from 'react';
-import styled from 'styled-components';
-import PropTypes from 'prop-types';
-import { useIntl } from 'react-intl';
-import { NavLink as RouterNavLink, useLocation, useHistory } from 'react-router-dom';
-import { Divider, FocusTrap, Box, Typography, Flex } from '@strapi/design-system';
+
+import { Box, Divider, Flex, FocusTrap, Typography } from '@strapi/design-system';
 import {
   MainNav,
   NavBrand,
-  NavSections,
+  NavCondense,
+  NavFooter,
   NavLink,
   NavSection,
+  NavSections,
   NavUser,
-  NavCondense,
-  NavFooter,
 } from '@strapi/design-system/v2';
-import { Write, Exit } from '@strapi/icons';
 import {
   auth,
-  usePersistentState,
+  getFetchClient,
   useAppInfo,
+  usePersistentState,
   useTracking,
-  getFetchClient,
 } from '@strapi/helper-plugin';
+import { Exit, Write } from '@strapi/icons';
+import PropTypes from 'prop-types';
+import { useIntl } from 'react-intl';
+import { NavLink as RouterNavLink, useHistory, useLocation } from 'react-router-dom';
+import styled from 'styled-components';
+
 import { useConfigurations } from '../../hooks';
 
 const LinkUserWrapper = styled(Box)`

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

@@ -1,5 +1,7 @@
 import React from 'react';
+
 import PropTypes from 'prop-types';
+
 import LocalesProviderContext from './context';
 
 const LocalesProvider = ({ changeLocale, children, localeNames }) => {

package/admin/src/components/LocalesProvider/useLocalesProvider.js

@@ -1,4 +1,5 @@
 import { useContext } from 'react';
+
 import LocalesProviderContext from './context';
 
 const useLocalesProvider = () => {

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

@@ -1,5 +1,7 @@
 import React, { useReducer, useRef } from 'react';
+
 import { LoadingIndicatorPage, useStrapiApp } from '@strapi/helper-plugin';
+
 import Admin from '../../pages/Admin';
 
 import init from './init';

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

@@ -8,9 +8,10 @@
  */
 
 import React, { memo } from 'react';
-import { Redirect, Route, useLocation } from 'react-router-dom';
-import PropTypes from 'prop-types';
+
 import { auth } from '@strapi/helper-plugin';
+import PropTypes from 'prop-types';
+import { Redirect, Route, useLocation } from 'react-router-dom';
 
 /* eslint-disable react/jsx-curly-newline */
 

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

@@ -1,21 +1,23 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-import { QueryClientProvider, QueryClient } from 'react-query';
+
 import {
-  LibraryProvider,
-  CustomFieldsProvider,
-  StrapiAppProvider,
   AutoReloadOverlayBlockerProvider,
-  OverlayBlockerProvider,
+  CustomFieldsProvider,
+  LibraryProvider,
   NotificationsProvider,
+  OverlayBlockerProvider,
+  StrapiAppProvider,
 } from '@strapi/helper-plugin';
+import PropTypes from 'prop-types';
+import { QueryClient, QueryClientProvider } from 'react-query';
 import { Provider } from 'react-redux';
+
 import { AdminContext } from '../../contexts';
 import ConfigurationsProvider from '../ConfigurationsProvider';
-import LanguageProvider from '../LanguageProvider';
 import GuidedTour from '../GuidedTour';
-import ThemeToggleProvider from '../ThemeToggleProvider';
+import LanguageProvider from '../LanguageProvider';
 import Theme from '../Theme';
+import ThemeToggleProvider from '../ThemeToggleProvider';
 
 const queryClient = new QueryClient({
   defaultOptions: {

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

@@ -1,7 +1,9 @@
 import React, { useEffect } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
+
 import { LoadingIndicatorPage, RBACProviderContext } from '@strapi/helper-plugin';
 import PropTypes from 'prop-types';
+import { useDispatch, useSelector } from 'react-redux';
+
 import { resetStore, setPermissions } from './actions';
 
 const RBACProvider = ({ children, permissions, refetchPermissions }) => {

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

@@ -1,7 +1,9 @@
 import React from 'react';
+
 import { DesignSystemProvider } from '@strapi/design-system';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
+
 import { useThemeToggle } from '../../hooks';
 import GlobalStyle from '../GlobalStyle';
 

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

@@ -4,8 +4,10 @@
  *
  */
 
-import React, { useState, useMemo, useCallback } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
+
 import PropTypes from 'prop-types';
+
 import { ThemeToggleContext } from '../../contexts';
 
 const THEME_KEY = 'STRAPI_THEME';

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

@@ -1,5 +1,7 @@
 import React from 'react';
+
 import styled from 'styled-components';
+
 import { useConfigurations } from '../../hooks';
 
 const Img = styled.img`

package/admin/src/content-manager/components/AttributeFilter/Filters.js

@@ -1,9 +1,10 @@
 import React, { useRef, useState } from 'react';
-import PropTypes from 'prop-types';
-import { useIntl } from 'react-intl';
+
 import { Box, Button } from '@strapi/design-system';
-import { Filter } from '@strapi/icons';
 import { FilterListURLQuery, FilterPopoverURLQuery, useTracking } from '@strapi/helper-plugin';
+import { Filter } from '@strapi/icons';
+import PropTypes from 'prop-types';
+import { useIntl } from 'react-intl';
 
 const Filters = ({ displayedFilters }) => {
   const [isVisible, setIsVisible] = useState(false);

package/admin/src/content-manager/components/AttributeFilter/hooks/useAllowedAttributes.js

@@ -1,5 +1,5 @@
+import { findMatchingPermissions, useRBACProvider } from '@strapi/helper-plugin';
 import get from 'lodash/get';
-import { useRBACProvider, findMatchingPermissions } from '@strapi/helper-plugin';
 
 const NOT_ALLOWED_FILTERS = ['json', 'component', 'media', 'richtext', 'dynamiczone', 'password'];
 const TIMESTAMPS = ['createdAt', 'updatedAt'];

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

@@ -1,8 +1,10 @@
 import React from 'react';
+
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
-import useAllowedAttributes from './hooks/useAllowedAttributes';
+
 import Filters from './Filters';
+import useAllowedAttributes from './hooks/useAllowedAttributes';
 
 const AttributeFilter = ({ contentType, slug, metadatas }) => {
   const { formatMessage } = useIntl();

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

@@ -1,27 +1,23 @@
 import { memo, useCallback, useEffect, useMemo, useRef } from 'react';
-import { useQueryClient } from 'react-query';
-import { useHistory } from 'react-router-dom';
-import axios from 'axios';
-import get from 'lodash/get';
+
 import {
-  useTracking,
-  useNotification,
-  useQueryParams,
-  formatContentTypeData,
   contentManagementUtilRemoveFieldsFromData,
-  useGuidedTour,
+  formatContentTypeData,
   useAPIErrorHandler,
   useFetchClient,
+  useGuidedTour,
+  useNotification,
+  useQueryParams,
+  useTracking,
 } from '@strapi/helper-plugin';
-import { useSelector, useDispatch } from 'react-redux';
-import PropTypes from 'prop-types';
+import axios from 'axios';
+import get from 'lodash/get';
 import isEqual from 'lodash/isEqual';
-import {
-  createDefaultForm,
-  getTrad,
-  getRequestUrl,
-  removePasswordFieldsFromData,
-} from '../../utils';
+import PropTypes from 'prop-types';
+import { useQueryClient } from 'react-query';
+import { useDispatch, useSelector } from 'react-redux';
+import { useHistory } from 'react-router-dom';
+
 import { useFindRedirectionLink } from '../../hooks';
 import {
   getData,
@@ -33,6 +29,12 @@ import {
   submitSucceeded,
 } from '../../sharedReducers/crudReducer/actions';
 import selectCrudReducer from '../../sharedReducers/crudReducer/selectors';
+import {
+  createDefaultForm,
+  getRequestUrl,
+  getTrad,
+  removePasswordFieldsFromData,
+} from '../../utils';
 
 // This container is used to handle the CRUD
 const CollectionTypeFormWrapper = ({ allLayoutData, children, slug, id, origin }) => {

package/admin/src/content-manager/components/ComponentIcon/ComponentIcon.js

@@ -1,7 +1,8 @@
-import PropTypes from 'prop-types';
 import React from 'react';
 
 import { Flex, Icon } from '@strapi/design-system';
+import PropTypes from 'prop-types';
+
 import { COMPONENT_ICONS } from './constants';
 
 export function ComponentIcon({ showBackground = true, size = 'M', icon }) {

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

@@ -1,10 +1,12 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-import styled from 'styled-components';
-import { useIntl } from 'react-intl';
-import { PlusCircle } from '@strapi/icons';
+
 import { Box, Flex, Typography } from '@strapi/design-system';
 import { pxToRem } from '@strapi/helper-plugin';
+import { PlusCircle } from '@strapi/icons';
+import PropTypes from 'prop-types';
+import { useIntl } from 'react-intl';
+import styled from 'styled-components';
+
 import { getTrad } from '../../utils';
 
 const IconWrapper = styled.span`

package/admin/src/content-manager/components/DynamicTable/BulkActionsBar/index.js

@@ -1,13 +1,15 @@
 import React, { useState } from 'react';
-import PropTypes from 'prop-types';
+
 import { Button, Dialog, DialogBody, DialogFooter, Flex, Typography } from '@strapi/design-system';
+import { useTracking } from '@strapi/helper-plugin';
 import { Check, ExclamationMarkCircle, Trash } from '@strapi/icons';
+import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 import { useSelector } from 'react-redux';
-import { useTracking } from '@strapi/helper-plugin';
+
+import { listViewDomain } from '../../../pages/ListView/selectors';
 import { getTrad } from '../../../utils';
 import InjectionZoneList from '../../InjectionZoneList';
-import { listViewDomain } from '../../../pages/ListView/selectors';
 
 const ConfirmBulkActionDialog = ({ onToggleDialog, isOpen, dialogBody, endAction }) => {
   const { formatMessage } = useIntl();

package/admin/src/content-manager/components/DynamicTable/CellContent/CellValue.js

@@ -1,7 +1,7 @@
+import parseISO from 'date-fns/parseISO';
+import toString from 'lodash/toString';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
-import toString from 'lodash/toString';
-import parseISO from 'date-fns/parseISO';
 
 const CellValue = ({ type, value }) => {
   const { formatDate, formatTime, formatNumber } = useIntl();