@strapi/admin 4.15.0-alpha.0 → 4.15.0

package/admin/src/pages/Admin/index.js

@@ -12,11 +12,12 @@ import { HTML5Backend } from 'react-dnd-html5-backend';
 import { useDispatch, useSelector } from 'react-redux';
 import { Route, Switch } from 'react-router-dom';
 
-import GuidedTourModal from '../../components/GuidedTour/Modal';
-import LeftMenu from '../../components/LeftMenu';
-import { useConfigurations, useMenu } from '../../hooks';
-import AppLayout from '../../layouts/AppLayout';
-import { createRoute } from '../../utils';
+import { GuidedTourModal } from '../../components/GuidedTour/Modal';
+import { LeftMenu } from '../../components/LeftMenu';
+import { useConfiguration } from '../../hooks/useConfiguration';
+import { useMenu } from '../../hooks/useMenu';
+import { AppLayout } from '../../layouts/AppLayout';
+import { createRoute } from '../../utils/createRoute';
 import { SET_APP_RUNTIME_STATUS } from '../App/constants';
 
 import Onboarding from './Onboarding';
@@ -32,10 +33,16 @@ const MarketplacePage = lazy(() =>
   import(/* webpackChunkName: "Admin_marketplace" */ '../MarketplacePage')
 );
 const NotFoundPage = lazy(() =>
-  import(/* webpackChunkName: "Admin_NotFoundPage" */ '../NotFoundPage')
+  import(/* webpackChunkName: "Admin_NotFoundPage" */ '../NotFoundPage').then(
+    ({ NotFoundPage }) => ({ default: NotFoundPage })
+  )
 );
 const InternalErrorPage = lazy(() =>
-  import(/* webpackChunkName: "Admin_InternalErrorPage" */ '../InternalErrorPage')
+  import(/* webpackChunkName: "Admin_InternalErrorPage" */ '../InternalErrorPage').then(
+    ({ InternalErrorPage }) => ({
+      default: InternalErrorPage,
+    })
+  )
 );
 
 const ProfilePage = lazy(() =>
@@ -73,7 +80,7 @@ const Admin = () => {
   useTrackUsage();
   const { isLoading, generalSectionLinks, pluginsSectionLinks } = useMenu();
   const { menu } = useStrapiApp();
-  const { showTutorials } = useConfigurations();
+  const { showTutorials } = useConfiguration();
 
   const routes = useMemo(() => {
     return menu

package/admin/src/pages/App/index.js

@@ -21,19 +21,22 @@ import { useIntl } from 'react-intl';
 import { useDispatch } from 'react-redux';
 import { Route, Switch } from 'react-router-dom';
 
-import PrivateRoute from '../../components/PrivateRoute';
+import { PrivateRoute } from '../../components/PrivateRoute';
 import { ADMIN_PERMISSIONS_CE } from '../../constants';
-import { useConfigurations } from '../../hooks';
+import { useConfiguration } from '../../hooks/useConfiguration';
 import { useEnterprise } from '../../hooks/useEnterprise';
-import { createRoute, makeUniqueRoutes } from '../../utils';
+import { createRoute } from '../../utils/createRoute';
+import { makeUniqueRoutes } from '../../utils/makeUniqueRoutes';
 import AuthPage from '../AuthPage';
-import NotFoundPage from '../NotFoundPage';
-import UseCasePage from '../UseCasePage';
+import { NotFoundPage } from '../NotFoundPage';
+import { UseCasePage } from '../UseCasePage';
 
 import { ROUTES_CE, SET_ADMIN_PERMISSIONS } from './constants';
 
 const AuthenticatedApp = lazy(() =>
-  import(/* webpackChunkName: "Admin-authenticatedApp" */ '../../components/AuthenticatedApp')
+  import(/* webpackChunkName: "Admin-authenticatedApp" */ '../../components/AuthenticatedApp').then(
+    (mod) => ({ default: mod.AuthenticatedApp })
+  )
 );
 
 function App() {
@@ -57,7 +60,7 @@ function App() {
     }
   );
   const toggleNotification = useNotification();
-  const { updateProjectSettings } = useConfigurations();
+  const { updateProjectSettings } = useConfiguration();
   const { formatMessage } = useIntl();
   const [{ isLoading, hasAdmin, uuid, deviceId }, setState] = useState({
     isLoading: true,
@@ -180,7 +183,9 @@ function App() {
 
   return (
     <Suspense fallback={<LoadingIndicatorPage />}>
-      <SkipToContent>{formatMessage({ id: 'skipToContent' })}</SkipToContent>
+      <SkipToContent>
+        {formatMessage({ id: 'skipToContent', defaultMessage: 'Skip to content' })}
+      </SkipToContent>
       <TrackingProvider value={trackingInfo}>
         <Switch>
           {authRoutes}

package/admin/src/pages/App/selectors.js

@@ -1,4 +1,4 @@
-import { createSelector } from 'reselect';
+import { createSelector } from '@reduxjs/toolkit';
 
 import { initialState } from './reducer';
 

package/admin/src/pages/AuthPage/components/ForgotPassword/index.js

@@ -6,10 +6,11 @@ import { Formik } from 'formik';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 
-import Logo from '../../../../components/UnauthenticatedLogo';
-import UnauthenticatedLayout, {
+import { Logo } from '../../../../components/UnauthenticatedLogo';
+import {
   Column,
   LayoutContent,
+  UnauthenticatedLayout,
 } from '../../../../layouts/UnauthenticatedLayout';
 
 const ForgotPassword = ({ onSubmit, schema }) => {

package/admin/src/pages/AuthPage/components/ForgotPasswordSuccess/index.js

@@ -4,10 +4,11 @@ import { Box, Flex, Main, Typography } from '@strapi/design-system';
 import { Link } from '@strapi/helper-plugin';
 import { useIntl } from 'react-intl';
 
-import Logo from '../../../../components/UnauthenticatedLogo';
-import UnauthenticatedLayout, {
+import { Logo } from '../../../../components/UnauthenticatedLogo';
+import {
   Column,
   LayoutContent,
+  UnauthenticatedLayout,
 } from '../../../../layouts/UnauthenticatedLayout';
 
 const ForgotPasswordSuccess = () => {

package/admin/src/pages/AuthPage/components/Login/BaseLogin.js

@@ -8,7 +8,7 @@ import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 import styled from 'styled-components';
 
-import Logo from '../../../../components/UnauthenticatedLogo';
+import { Logo } from '../../../../components/UnauthenticatedLogo';
 import { Column, LayoutContent } from '../../../../layouts/UnauthenticatedLayout';
 import FieldActionWrapper from '../FieldActionWrapper';
 

package/admin/src/pages/AuthPage/components/Login/index.js

@@ -2,7 +2,7 @@ import React from 'react';
 
 import PropTypes from 'prop-types';
 
-import UnauthenticatedLayout from '../../../../layouts/UnauthenticatedLayout';
+import { UnauthenticatedLayout } from '../../../../layouts/UnauthenticatedLayout';
 
 import BaseLogin from './BaseLogin';
 

package/admin/src/pages/AuthPage/components/Oops/index.js

@@ -4,10 +4,11 @@ import { Box, Flex, Main, Typography } from '@strapi/design-system';
 import { Link, useQuery } from '@strapi/helper-plugin';
 import { useIntl } from 'react-intl';
 
-import Logo from '../../../../components/UnauthenticatedLogo';
-import UnauthenticatedLayout, {
+import { Logo } from '../../../../components/UnauthenticatedLogo';
+import {
   Column,
   LayoutContent,
+  UnauthenticatedLayout,
 } from '../../../../layouts/UnauthenticatedLayout';
 
 const Oops = () => {

package/admin/src/pages/AuthPage/components/Register/index.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useState } from 'react';
 
 import {
   Box,
@@ -26,12 +26,13 @@ import { Formik } from 'formik';
 import omit from 'lodash/omit';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
+import { useQuery as useReactQuery } from 'react-query';
 import { useHistory } from 'react-router-dom';
 import styled from 'styled-components';
 
-import { useNpsSurveySettings } from '../../../../components/NpsSurvey/hooks/useNpsSurveySettings';
-import Logo from '../../../../components/UnauthenticatedLogo';
-import UnauthenticatedLayout, { LayoutContent } from '../../../../layouts/UnauthenticatedLayout';
+import { useNpsSurveySettings } from '../../../../components/NpsSurvey';
+import { Logo } from '../../../../components/UnauthenticatedLogo';
+import { LayoutContent, UnauthenticatedLayout } from '../../../../layouts/UnauthenticatedLayout';
 import FieldActionWrapper from '../FieldActionWrapper';
 
 const A = styled.a`
@@ -50,7 +51,6 @@ const Register = ({ authType, fieldsToDisable, noSignin, onSubmit, schema }) =>
   const [passwordShown, setPasswordShown] = useState(false);
   const [confirmPasswordShown, setConfirmPasswordShown] = useState(false);
   const [submitCount, setSubmitCount] = useState(0);
-  const [userInfo, setUserInfo] = useState({});
   const { trackUsage } = useTracking();
   const { formatMessage } = useIntl();
   const query = useQuery();
@@ -60,39 +60,34 @@ const Register = ({ authType, fieldsToDisable, noSignin, onSubmit, schema }) =>
 
   const registrationToken = query.get('registrationToken');
 
-  useEffect(() => {
-    if (registrationToken) {
-      const getData = async () => {
-        try {
-          const {
-            data: { data },
-          } = await get(`/admin/registration-info`, {
-            params: {
-              registrationToken,
-            },
-          });
+  const { data: userInfo } = useReactQuery({
+    queryKey: ['admin', 'registration-info', registrationToken],
+    async queryFn() {
+      const {
+        data: { data },
+      } = await get(`/admin/registration-info`, {
+        params: {
+          registrationToken,
+        },
+      });
 
-          if (data) {
-            setUserInfo(data);
-          }
-        } catch (error) {
-          const message = formatAPIError(error);
+      return data;
+    },
+    enabled: !!registrationToken,
+    initialData: {},
+    onError(err) {
+      const message = formatAPIError(err);
 
-          toggleNotification({
-            type: 'warning',
-            message,
-          });
+      toggleNotification({
+        type: 'warning',
+        message,
+      });
 
-          // Redirect to the oops page in case of an invalid token
-          // @alexandrebodin @JAB I am not sure it is the wanted behavior
-          push(`/auth/oops?info=${encodeURIComponent(message)}`);
-        }
-      };
-
-      getData();
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [registrationToken]);
+      // Redirect to the oops page in case of an invalid token
+      // @alexandrebodin @JAB I am not sure it is the wanted behavior
+      push(`/auth/oops?info=${encodeURIComponent(message)}`);
+    },
+  });
 
   function normalizeData(data) {
     return Object.entries(data).reduce((acc, [key, value]) => {

package/admin/src/pages/AuthPage/components/ResetPassword/index.js

@@ -8,10 +8,11 @@ import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 import styled from 'styled-components';
 
-import Logo from '../../../../components/UnauthenticatedLogo';
-import UnauthenticatedLayout, {
+import { Logo } from '../../../../components/UnauthenticatedLogo';
+import {
   Column,
   LayoutContent,
+  UnauthenticatedLayout,
 } from '../../../../layouts/UnauthenticatedLayout';
 import FieldActionWrapper from '../FieldActionWrapper';
 

package/admin/src/pages/AuthPage/index.js

@@ -8,10 +8,9 @@ import omit from 'lodash/omit';
 import PropTypes from 'prop-types';
 import { Redirect, useHistory, useRouteMatch } from 'react-router-dom';
 
-import persistStateToLocaleStorage from '../../components/GuidedTour/utils/persistStateToLocaleStorage';
-import useLocalesProvider from '../../components/LocalesProvider/useLocalesProvider';
+import { useLocales } from '../../components/LanguageProvider';
 import { useEnterprise } from '../../hooks/useEnterprise';
-import formatAPIErrors from '../../utils/formatAPIErrors';
+import { formatAPIErrors} from '../../utils/formatAPIErrors';
 
 import { LoginCE } from './components/Login';
 import { FORMS } from './constants';
@@ -23,7 +22,7 @@ const AuthPage = ({ hasAdmin, setHasAdmin }) => {
     push,
     location: { search },
   } = useHistory();
-  const { changeLocale } = useLocalesProvider();
+  const { changeLocale } = useLocales();
   const { setSkipped } = useGuidedTour();
   const { trackUsage } = useTracking();
   const {
@@ -181,7 +180,7 @@ const AuthPage = ({ hasAdmin, setHasAdmin }) => {
         const isUserSuperAdmin = roles.find(({ code }) => code === 'strapi-super-admin');
 
         if (isUserSuperAdmin) {
-          persistStateToLocaleStorage.setSkipped(false);
+          auth.set(false, 'GUIDED_TOUR_SKIPPED', true);
           setSkipped(false);
           trackUsage('didLaunchGuidedtour');
         }

package/admin/src/pages/HomePage/index.js

@@ -12,8 +12,7 @@ import { FormattedMessage } from 'react-intl';
 import { useHistory } from 'react-router-dom';
 import styled from 'styled-components';
 
-import GuidedTourHomepage from '../../components/GuidedTour/Homepage';
-import isGuidedTourCompleted from '../../components/GuidedTour/utils/isGuidedTourCompleted';
+import { GuidedTourHomepage } from '../../components/GuidedTour/Homepage';
 import { useContentTypes } from '../../hooks/useContentTypes';
 import { useEnterprise } from '../../hooks/useEnterprise';
 
@@ -37,7 +36,11 @@ export const HomePageCE = () => {
   const { collectionTypes, singleTypes, isLoading: isLoadingForModels } = useContentTypes();
   const { guidedTourState, isGuidedTourVisible, isSkipped } = useGuidedTour();
   const showGuidedTour =
-    !isGuidedTourCompleted(guidedTourState) && isGuidedTourVisible && !isSkipped;
+    !Object.values(guidedTourState).every((section) =>
+      Object.values(section).every((step) => step)
+    ) &&
+    isGuidedTourVisible &&
+    !isSkipped;
   const { push } = useHistory();
   const handleClick = (e) => {
     e.preventDefault();

package/admin/src/pages/{InternalErrorPage/index.js → InternalErrorPage.tsx}

@@ -4,15 +4,21 @@
  * This is the page we show when the user gets a 500 error
  *
  */
-import React from 'react';
 
-import { ContentLayout, EmptyStateLayout, HeaderLayout, Main } from '@strapi/design-system';
-import { LinkButton, useFocusWhenNavigate } from '@strapi/helper-plugin';
+import {
+  ContentLayout,
+  EmptyStateLayout,
+  HeaderLayout,
+  LinkButton,
+  Main,
+} from '@strapi/design-system';
+import { useFocusWhenNavigate } from '@strapi/helper-plugin';
 import { ArrowRight, EmptyPictures } from '@strapi/icons';
 import { useIntl } from 'react-intl';
 
-const InternalErrorPage = () => {
+export const InternalErrorPage = () => {
   const { formatMessage } = useIntl();
+
   useFocusWhenNavigate();
 
   return (
@@ -46,5 +52,3 @@ const InternalErrorPage = () => {
     </Main>
   );
 };
-
-export default InternalErrorPage;

package/admin/src/pages/MarketplacePage/components/NpmPackageCard/index.js

@@ -16,11 +16,9 @@ import PackageStats from './PackageStats';
 
 // Custom component to have an ellipsis after the 2nd line
 const EllipsisText = styled(Typography)`
-  /* stylelint-disable value-no-vendor-prefix, property-no-vendor-prefix */
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
-  /* stylelint-enable value-no-vendor-prefix, property-no-vendor-prefix */
   overflow: hidden;
 `;
 

package/admin/src/pages/MarketplacePage/hooks/__mocks__/useNavigatorOnline.ts

@@ -0,0 +1 @@
+export const useNavigatorOnline = () => true;

package/admin/src/{hooks/useNavigatorOnLine/index.js → pages/MarketplacePage/hooks/useNavigatorOnline.ts}

@@ -1,21 +1,21 @@
-import { useEffect, useState } from 'react';
+import * as React from 'react';
 
 /**
  * For more details about this hook see:
  * https://www.30secondsofcode.org/react/s/use-navigator-on-line
  */
-const useNavigatorOnLine = () => {
+export const useNavigatorOnline = (): boolean => {
   const onlineStatus =
     typeof navigator !== 'undefined' && typeof navigator.onLine === 'boolean'
       ? navigator.onLine
       : true;
 
-  const [isOnline, setIsOnline] = useState(onlineStatus);
+  const [isOnline, setIsOnline] = React.useState(onlineStatus);
 
   const setOnline = () => setIsOnline(true);
   const setOffline = () => setIsOnline(false);
 
-  useEffect(() => {
+  React.useEffect(() => {
     window.addEventListener('online', setOnline);
     window.addEventListener('offline', setOffline);
 
@@ -27,5 +27,3 @@ const useNavigatorOnLine = () => {
 
   return isOnline;
 };
-
-export default useNavigatorOnLine;

package/admin/src/pages/MarketplacePage/index.js

@@ -25,8 +25,7 @@ import { Helmet } from 'react-helmet';
 import { useIntl } from 'react-intl';
 import { useSelector } from 'react-redux';
 
-import useDebounce from '../../hooks/useDebounce';
-import useNavigatorOnLine from '../../hooks/useNavigatorOnLine';
+import { useDebounce } from '../../hooks/useDebounce';
 import { selectAdminPermissions } from '../App/selectors';
 
 import MissingPluginBanner from './components/MissingPluginBanner';
@@ -36,6 +35,7 @@ import NpmPackagesPagination from './components/NpmPackagesPagination';
 import OfflineLayout from './components/OfflineLayout';
 import PageHeader from './components/PageHeader';
 import SortSelect from './components/SortSelect';
+import { useNavigatorOnline } from './hooks/useNavigatorOnline';
 import useMarketplaceData from './utils/useMarketplaceData';
 
 const MarketPlacePage = () => {
@@ -47,7 +47,7 @@ const MarketPlacePage = () => {
   const debouncedSearch = useDebounce(query?.search, 500) || '';
 
   const { autoReload: isInDevelopmentMode, dependencies, useYarn, strapiVersion } = useAppInfo();
-  const isOnline = useNavigatorOnLine();
+  const isOnline = useNavigatorOnline();
 
   const npmPackageType = query?.npmPackageType || 'plugin';
 

package/admin/src/pages/{NotFoundPage/index.js → NotFoundPage.tsx}

@@ -4,14 +4,18 @@
  * This is the page we show when the user visits a url that doesn't have a route
  *
  */
-import React from 'react';
-
-import { ContentLayout, EmptyStateLayout, HeaderLayout, Main } from '@strapi/design-system';
-import { LinkButton, useFocusWhenNavigate } from '@strapi/helper-plugin';
+import {
+  ContentLayout,
+  EmptyStateLayout,
+  HeaderLayout,
+  LinkButton,
+  Main,
+} from '@strapi/design-system';
+import { useFocusWhenNavigate } from '@strapi/helper-plugin';
 import { ArrowRight, EmptyPictures } from '@strapi/icons';
 import { useIntl } from 'react-intl';
 
-const NoContentType = () => {
+export const NotFoundPage = () => {
   const { formatMessage } = useIntl();
   useFocusWhenNavigate();
 
@@ -46,5 +50,3 @@ const NoContentType = () => {
     </Main>
   );
 };
-
-export default NoContentType;

package/admin/src/pages/ProfilePage/components/Preferences/index.js

@@ -1,6 +1,14 @@
 import React from 'react';
 
-import { Box, Flex, Grid, GridItem, Option, Select, Typography } from '@strapi/design-system';
+import {
+  Box,
+  Flex,
+  Grid,
+  GridItem,
+  SingleSelect,
+  SingleSelectOption,
+  Typography,
+} from '@strapi/design-system';
 import upperFirst from 'lodash/upperFirst';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
@@ -57,7 +65,7 @@ const Preferences = ({ onChange, values, localeNames, allApplicationThemes }) =>
         </Flex>
         <Grid gap={5}>
           <GridItem s={12} col={6}>
-            <Select
+            <SingleSelect
               label={formatMessage({
                 id: 'Settings.profile.form.section.experience.interfaceLanguage',
                 defaultMessage: 'Interface language',
@@ -87,14 +95,14 @@ const Preferences = ({ onChange, values, localeNames, allApplicationThemes }) =>
               }}
             >
               {Object.entries(localeNames).map(([language, langName]) => (
-                <Option value={language} key={language}>
+                <SingleSelectOption value={language} key={language}>
                   {langName}
-                </Option>
+                </SingleSelectOption>
               ))}
-            </Select>
+            </SingleSelect>
           </GridItem>
           <GridItem s={12} col={6}>
-            <Select
+            <SingleSelect
               label={formatMessage({
                 id: 'Settings.profile.form.section.experience.mode.label',
                 defaultMessage: 'Interface mode',
@@ -114,8 +122,14 @@ const Preferences = ({ onChange, values, localeNames, allApplicationThemes }) =>
                 });
               }}
             >
+              <SingleSelectOption value="system">
+                {formatMessage({
+                  id: 'Settings.profile.form.section.experience.mode.option-system-label',
+                  defaultMessage: 'Use system settings',
+                })}
+              </SingleSelectOption>
               {themesToDisplay.map((theme) => (
-                <Option value={theme} key={theme}>
+                <SingleSelectOption value={theme} key={theme}>
                   {formatMessage(
                     {
                       id: 'Settings.profile.form.section.experience.mode.option-label',
@@ -128,9 +142,9 @@ const Preferences = ({ onChange, values, localeNames, allApplicationThemes }) =>
                       }),
                     }
                   )}
-                </Option>
+                </SingleSelectOption>
               ))}
-            </Select>
+            </SingleSelect>
           </GridItem>
         </Grid>
       </Flex>

package/admin/src/pages/ProfilePage/index.js

@@ -26,9 +26,9 @@ import { Helmet } from 'react-helmet';
 import { useIntl } from 'react-intl';
 import { useMutation, useQuery, useQueryClient } from 'react-query';
 
-import useLocalesProvider from '../../components/LocalesProvider/useLocalesProvider';
-import { useThemeToggle } from '../../hooks';
-import { getFullName } from '../../utils';
+import { useLocales } from '../../components/LanguageProvider';
+import { useThemeToggle } from '../../hooks/useThemeToggle';
+import { getFullName } from '../../utils/getFullName';
 
 import Password from './components/Password';
 import Preferences from './components/Preferences';
@@ -36,7 +36,7 @@ import UserInfo from './components/UserInfo';
 import schema from './utils/schema';
 
 const ProfilePage = () => {
-  const { changeLocale, localeNames } = useLocalesProvider();
+  const { changeLocale, localeNames } = useLocales();
   const { setUserDisplayName } = useAppInfo();
   const queryClient = useQueryClient();
   const { formatMessage } = useIntl();

package/admin/src/pages/SettingsPage/components/SettingsNav/index.js

@@ -1,5 +1,6 @@
 import React from 'react';
 
+import { Icon } from '@strapi/design-system';
 import {
   SubNav,
   SubNavHeader,
@@ -8,9 +9,21 @@ import {
   SubNavSections,
 } from '@strapi/design-system/v2';
 import { useTracking } from '@strapi/helper-plugin';
+import { Lock } from '@strapi/icons';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 import { NavLink, useLocation } from 'react-router-dom';
+import styled from 'styled-components';
+
+/**
+ * TODO: refactor the SubNav entirely, we shouldn't have
+ * to do this hack to work a lock at the end. It's a bit hacky.
+ */
+
+const CustomIcon = styled(Icon)`
+  right: 15px;
+  position: absolute;
+`;
 
 const SettingsNav = ({ menu }) => {
   const { formatMessage } = useIntl();
@@ -60,6 +73,13 @@ const SettingsNav = ({ menu }) => {
                   key={link.id}
                 >
                   {formatMessage(link.intlLabel)}
+                  {link?.lockIcon && (
+                    <CustomIcon
+                      width={`${15 / 16}rem`}
+                      height={`${15 / 16}rem`}
+                      as={Lock}
+                    />
+                  )}
                 </SubNavLink>
               );
             })}

package/admin/src/pages/SettingsPage/components/Tokens/Regenerate/index.js

@@ -6,7 +6,7 @@ import { Refresh } from '@strapi/icons';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 
-import { useRegenerate } from '../../../../../hooks';
+import { useRegenerate } from '../../../hooks/useRegenerate';
 
 export const Regenerate = ({ onRegenerate, idToRegenerate, backUrl, onError }) => {
   const { formatMessage } = useIntl();