@strapi/admin 4.12.4 → 4.12.6

package/admin/src/hooks/useSettingsForm/index.js

@@ -1,9 +1,14 @@
 import { useEffect, useReducer } from 'react';
 
-import { useFetchClient, useNotification, useOverlayBlocker } from '@strapi/helper-plugin';
+import {
+  getYupInnerErrors,
+  useFetchClient,
+  useNotification,
+  useOverlayBlocker,
+} from '@strapi/helper-plugin';
 import omit from 'lodash/omit';
 
-import { checkFormValidity, formatAPIErrors } from '../../utils';
+import { formatAPIErrors } from '../../utils/formatAPIErrors';
 
 import init from './init';
 import { initialState, reducer } from './reducer';
@@ -76,7 +81,13 @@ const useSettingsForm = (endPoint, schema, cbSuccess, fieldsToPick) => {
   const handleSubmit = async (e) => {
     e.preventDefault();
 
-    const errors = await checkFormValidity(modifiedData, schema);
+    let errors = null;
+
+    try {
+      await schema.validate(modifiedData, { abortEarly: false });
+    } catch (err) {
+      errors = getYupInnerErrors(err);
+    }
 
     dispatch({
       type: 'SET_ERRORS',

package/admin/src/hooks/useSettingsMenu/index.js

@@ -7,8 +7,8 @@ import { selectAdminPermissions } from '../../pages/App/selectors';
 import { useEnterprise } from '../useEnterprise';
 
 import { LINKS_CE } from './constants';
-import formatLinks from './utils/formatLinks';
-import sortLinks from './utils/sortLinks';
+import { formatLinks } from './utils/formatLinks';
+import { sortLinks } from './utils/sortLinks';
 
 const useSettingsMenu = () => {
   const [{ isLoading, menu }, setData] = useState({

package/admin/src/hooks/useSettingsMenu/utils/formatLinks.js

@@ -1,4 +1,4 @@
-const formatLinks = (menu) => {
+export const formatLinks = (menu) => {
   return menu.map((menuSection) => {
     const formattedLinks = menuSection.links.map((link) => ({
       ...link,
@@ -8,5 +8,3 @@ const formatLinks = (menu) => {
     return { ...menuSection, links: formattedLinks };
   });
 };
-
-export default formatLinks;

package/admin/src/hooks/useSettingsMenu/utils/sortLinks.js

@@ -1,5 +1,3 @@
 import sortBy from 'lodash/sortBy';
 
-const sortLinks = (links) => sortBy(links, (link) => link.id);
-
-export default sortLinks;
+export const sortLinks = (links) => sortBy(links, (link) => link.id);

package/admin/src/index.js

@@ -52,7 +52,7 @@ const run = async () => {
 
   // We need to make sure to fetch the project type before importing the StrapiApp
   // otherwise the strapi-babel-plugin does not work correctly
-  const StrapiApp = await import(/* webpackChunkName: "admin-app" */ './StrapiApp');
+  const StrapiApp = await import(/* webpackChunkName: "StrapiApp" */ './StrapiApp');
 
   const app = StrapiApp.default({
     appPlugins: plugins,

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

@@ -75,7 +75,7 @@ const TextLink = styled(TypographyLineHeight)`
   }
 `;
 
-const Onboarding = () => {
+export const Onboarding = () => {
   const triggerRef = useRef();
   const [isOpen, setIsOpen] = useState(false);
   const { formatMessage } = useIntl();
@@ -222,5 +222,3 @@ const Onboarding = () => {
     </Box>
   );
 };
-
-export default Onboarding;

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

@@ -4,80 +4,92 @@
  *
  */
 
-import React, { lazy, Suspense, useEffect, useMemo } from 'react';
+import * as React from 'react';
 
+import { Box, Flex } from '@strapi/design-system';
 import { LoadingIndicatorPage, useStrapiApp, useTracking } from '@strapi/helper-plugin';
 import { DndProvider } from 'react-dnd';
 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 useConfigurations from '../../hooks/useConfigurations';
+import useMenu from '../../hooks/useMenu';
+import { createRoute } from '../../utils/createRoute';
 import { SET_APP_RUNTIME_STATUS } from '../App/constants';
 
-import Onboarding from './Onboarding';
-
-const CM = lazy(() =>
-  import(/* webpackChunkName: "content-manager" */ '../../content-manager/pages/App')
+const CM = React.lazy(() =>
+  import(/* webpackChunkName: "content-manager" */ '../../content-manager/pages/App').then(
+    (module) => ({ default: module.ContentManger })
+  )
 );
-const HomePage = lazy(() => import(/* webpackChunkName: "Admin_homePage" */ '../HomePage'));
-const InstalledPluginsPage = lazy(() =>
-  import(/* webpackChunkName: "Admin_pluginsPage" */ '../InstalledPluginsPage')
+const GuidedTourModal = React.lazy(() =>
+  import(/* webpackChunkName: "Admin_GuidedTourModal" */ '../../components/GuidedTour/Modal').then(
+    (module) => ({ default: module.GuidedTourModal })
+  )
 );
-const MarketplacePage = lazy(() =>
-  import(/* webpackChunkName: "Admin_marketplace" */ '../MarketplacePage')
+const HomePage = React.lazy(() =>
+  import(/* webpackChunkName: "Admin_homePage" */ '../HomePage').then((module) => ({
+    default: module.HomePage,
+  }))
 );
-const NotFoundPage = lazy(() =>
-  import(/* webpackChunkName: "Admin_NotFoundPage" */ '../NotFoundPage')
+const InstalledPluginsPage = React.lazy(() =>
+  import(/* webpackChunkName: "Admin_pluginsPage" */ '../InstalledPluginsPage').then((module) => ({
+    default: module.PluginsPage,
+  }))
 );
-const InternalErrorPage = lazy(() =>
-  import(/* webpackChunkName: "Admin_InternalErrorPage" */ '../InternalErrorPage')
+const MarketplacePage = React.lazy(() =>
+  import(/* webpackChunkName: "Admin_marketplace" */ '../MarketplacePage')
 );
-
-const ProfilePage = lazy(() =>
-  import(/* webpackChunkName: "Admin_profilePage" */ '../ProfilePage')
+const Onboarding = React.lazy(() =>
+  import(/* webpackChunkName: "Admin_Onboarding" */ './Onboarding').then((module) => ({
+    default: module.Onboarding,
+  }))
+);
+const ProfilePage = React.lazy(() =>
+  import(/* webpackChunkName: "Admin_profilePage" */ '../ProfilePage').then((module) => ({
+    default: module.ProfilePage,
+  }))
 );
-const SettingsPage = lazy(() =>
-  import(/* webpackChunkName: "Admin_settingsPage" */ '../SettingsPage')
+const SettingsPage = React.lazy(() =>
+  import(/* webpackChunkName: "Admin_settingsPage" */ '../SettingsPage').then((module) => ({
+    default: module.SettingsPage,
+  }))
 );
 
-// Simple hook easier for testing
-/**
- * TODO: remove this, it's bad.
- */
-const useTrackUsage = () => {
+export const Admin = () => {
+  const { isLoading, generalSectionLinks, pluginsSectionLinks } = useMenu();
+  const { menu } = useStrapiApp();
+  const { showTutorials } = useConfigurations();
   const { trackUsage } = useTracking();
   const dispatch = useDispatch();
   const appStatus = useSelector((state) => state.admin_app.status);
 
-  useEffect(() => {
+  React.useEffect(() => {
     // Make sure the event is only send once after accessing the admin panel
     // and not at runtime for example when regenerating the permissions with the ctb
     // or with i18n
     if (appStatus === 'init') {
       trackUsage('didAccessAuthenticatedAdministration');
-
       dispatch({ type: SET_APP_RUNTIME_STATUS });
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [appStatus]);
-};
+  }, [appStatus, dispatch, trackUsage]);
 
-const Admin = () => {
-  useTrackUsage();
-  const { isLoading, generalSectionLinks, pluginsSectionLinks } = useMenu();
-  const { menu } = useStrapiApp();
-  const { showTutorials } = useConfigurations();
+  const routes = menu
+    .filter((link) => link.Component)
 
-  const routes = useMemo(() => {
-    return menu
-      .filter((link) => link.Component)
-      .map(({ to, Component, exact }) => createRoute(Component, to, exact));
-  }, [menu]);
+    /**
+     * `Component` is an async function, which is passed as property of the
+     * addMenuLink() API during the plugin registration step.
+     *
+     * Because of that we can't just render <Route component={Component} />,
+     * but have to await the function.
+     *
+     * This isn't a good React pattern and should be reconsidered.
+     */
+
+    .map(({ to, Component, exact }) => createRoute(Component, to, exact));
 
   if (isLoading) {
     return <LoadingIndicatorPage />;
@@ -85,40 +97,34 @@ const Admin = () => {
 
   return (
     <DndProvider backend={HTML5Backend}>
-      <AppLayout
-        sideNav={
-          <LeftMenu
-            generalSectionLinks={generalSectionLinks}
-            pluginsSectionLinks={pluginsSectionLinks}
-          />
-        }
-      >
-        <Suspense fallback={<LoadingIndicatorPage />}>
-          <Switch>
-            <Route path="/" component={HomePage} exact />
-            <Route path="/me" component={ProfilePage} exact />
-            <Route path="/content-manager" component={CM} />
-            {routes}
-            <Route path="/settings/:settingId" component={SettingsPage} />
-            <Route path="/settings" component={SettingsPage} exact />
-            <Route path="/marketplace">
-              <MarketplacePage />
-            </Route>
-            <Route path="/list-plugins" exact>
-              <InstalledPluginsPage />
-            </Route>
-            <Route path="/404" component={NotFoundPage} />
-            <Route path="/500" component={InternalErrorPage} />
-            <Route path="" component={NotFoundPage} />
-          </Switch>
-        </Suspense>
+      <Flex alignItems="stretch">
+        <LeftMenu
+          generalSectionLinks={generalSectionLinks}
+          pluginsSectionLinks={pluginsSectionLinks}
+        />
+
+        <Box flex="1">
+          <React.Suspense fallback={<LoadingIndicatorPage />}>
+            <Switch>
+              <Route path="/" component={HomePage} exact />
+              <Route path="/me" component={ProfilePage} exact />
+              <Route path="/content-manager" component={CM} />
+              {routes}
+              <Route path="/settings/:settingId" component={SettingsPage} />
+              <Route path="/settings" component={SettingsPage} exact />
+              <Route path="/marketplace" component={MarketplacePage} />
+              <Route path="/list-plugins" component={InstalledPluginsPage} exact />
+            </Switch>
+          </React.Suspense>
+        </Box>
+
+        {/* TODO: we should move the logic to determine whether the guided tour is displayed
+            or not out of the component, to make the code-splitting more effective
+        */}
         <GuidedTourModal />
 
         {showTutorials && <Onboarding />}
-      </AppLayout>
+      </Flex>
     </DndProvider>
   );
 };
-
-export default Admin;
-export { useTrackUsage };

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

@@ -1,4 +1,4 @@
 export const SET_APP_RUNTIME_STATUS = 'StrapiAdmin/APP/SET_APP_RUNTIME_STATUS';
 export const SET_ADMIN_PERMISSIONS = 'StrapiAdmin/App/SET_ADMIN_PERMISSIONS';
 
-export const ROUTES_CE = [];
+export const AUTH_ROUTES_CE = [];

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

@@ -1,10 +1,4 @@
-/**
- *
- * App.js
- *
- */
-
-import React, { lazy, Suspense, useEffect, useMemo, useState } from 'react';
+import * as React from 'react';
 
 import { SkipToContent } from '@strapi/design-system';
 import {
@@ -12,31 +6,57 @@ import {
   LoadingIndicatorPage,
   prefixFileUrlWithBackendUrl,
   TrackingProvider,
-  useAppInfo,
   useFetchClient,
-  useNotification,
 } from '@strapi/helper-plugin';
 import merge from 'lodash/merge';
 import { useIntl } from 'react-intl';
+import { useQueries } from 'react-query';
 import { useDispatch } from 'react-redux';
 import { Route, Switch } from 'react-router-dom';
 
 import PrivateRoute from '../../components/PrivateRoute';
 import { ADMIN_PERMISSIONS_CE } from '../../constants';
-import { useConfigurations } from '../../hooks';
+import useConfigurations from '../../hooks/useConfigurations';
 import { useEnterprise } from '../../hooks/useEnterprise';
-import { createRoute, makeUniqueRoutes } from '../../utils';
-import AuthPage from '../AuthPage';
-import NotFoundPage from '../NotFoundPage';
-import UseCasePage from '../UseCasePage';
 
-import { ROUTES_CE, SET_ADMIN_PERMISSIONS } from './constants';
+import { AUTH_ROUTES_CE, SET_ADMIN_PERMISSIONS } from './constants';
+
+const AuthPage = React.lazy(() =>
+  import(/* webpackChunkName: "Admin-AuthPage" */ '../AuthPage').then((module) => ({
+    default: module.AuthPage,
+  }))
+);
+
+const AuthenticatedApp = React.lazy(() =>
+  import(/* webpackChunkName: "Admin-AuthenticatedApp" */ '../../components/AuthenticatedApp').then(
+    (module) => ({ default: module.AuthenticatedApp })
+  )
+);
 
-const AuthenticatedApp = lazy(() =>
-  import(/* webpackChunkName: "Admin-authenticatedApp" */ '../../components/AuthenticatedApp')
+const UseCasePage = React.lazy(() =>
+  import(/* webpackChunkName: "Admin-UseCasePage" */ '../UseCasePage').then((module) => ({
+    default: module.UseCasePage,
+  }))
 );
 
-function App() {
+const NotFoundPage = React.lazy(() =>
+  import(/* webpackChunkName: "Admin_NotFoundPage" */ '../NotFoundPage').then((module) => ({
+    default: module.NotFoundPage,
+  }))
+);
+
+const InternalErrorPage = React.lazy(() =>
+  import(/* webpackChunkName: "Admin_InternalErrorPage" */ '../InternalErrorPage').then(
+    (module) => ({ default: module.InternalErrorPage })
+  )
+);
+
+export function App() {
+  const { updateProjectSettings } = useConfigurations();
+  const { formatMessage } = useIntl();
+  const dispatch = useDispatch();
+  const { get, post } = useFetchClient();
+
   const adminPermissions = useEnterprise(
     ADMIN_PERMISSIONS_CE,
     async () => (await import('../../../../ee/admin/constants')).ADMIN_PERMISSIONS_EE,
@@ -49,155 +69,173 @@ function App() {
       defaultValue: ADMIN_PERMISSIONS_CE,
     }
   );
-  const routes = useEnterprise(
-    ROUTES_CE,
-    async () => (await import('../../../../ee/admin/pages/App/constants')).ROUTES_EE,
+
+  // Load authentication routes for CE and EE (SSO)
+  const authRoutes = useEnterprise(
+    AUTH_ROUTES_CE,
+    async () => (await import('../../../../ee/admin/pages/App/constants')).AUTH_ROUTES_EE,
     {
       defaultValue: [],
     }
   );
-  const toggleNotification = useNotification();
-  const { updateProjectSettings } = useConfigurations();
-  const { formatMessage } = useIntl();
-  const [{ isLoading, hasAdmin, uuid, deviceId }, setState] = useState({
-    isLoading: true,
+
+  // TODO: this should be moved to redux
+  const [{ hasAdmin, uuid }, setState] = React.useState({
     hasAdmin: false,
+    uuid: undefined,
   });
-  const dispatch = useDispatch();
-  const appInfo = useAppInfo();
-  const { get, post } = useFetchClient();
-
-  const authRoutes = useMemo(() => {
-    return makeUniqueRoutes(
-      routes.map(({ to, Component, exact }) => createRoute(Component, to, exact))
-    );
-  }, [routes]);
-
-  const [telemetryProperties, setTelemetryProperties] = useState(null);
 
-  useEffect(() => {
+  // Store permissions in redux
+  React.useEffect(() => {
     dispatch({ type: SET_ADMIN_PERMISSIONS, payload: adminPermissions });
   }, [adminPermissions, dispatch]);
 
-  useEffect(() => {
-    const currentToken = auth.getToken();
-
-    const renewToken = async () => {
-      try {
+  const [
+    { data: token, error: errorRenewToken },
+    { data: initData, isLoading: isLoadingInit },
+    { data: telemetryProperties },
+  ] = useQueries([
+    {
+      queryKey: 'renew-token',
+      async queryFn() {
         const {
           data: {
             data: { token },
           },
-        } = await post('/admin/renew-token', { token: currentToken });
-        auth.updateToken(token);
-      } catch (err) {
-        // Refresh app
-        auth.clearAppStorage();
-        window.location.reload();
-      }
-    };
-
-    if (currentToken) {
-      renewToken();
-    }
-  }, [post]);
+        } = await post('/admin/renew-token', { token: auth.getToken() });
+
+        return token;
+      },
+
+      enabled: !!auth.getToken(),
+    },
 
-  useEffect(() => {
-    const getData = async () => {
-      try {
+    {
+      queryKey: 'init',
+      async queryFn() {
         const {
-          data: {
-            data: { hasAdmin, uuid, menuLogo, authLogo },
-          },
+          data: { data },
         } = await get(`/admin/init`);
 
-        updateProjectSettings({
-          menuLogo: prefixFileUrlWithBackendUrl(menuLogo),
-          authLogo: prefixFileUrlWithBackendUrl(authLogo),
-        });
+        return data;
+      },
+    },
 
-        if (uuid) {
-          const {
-            data: { data: properties },
-          } = await get(`/admin/telemetry-properties`, {
-            // NOTE: needed because the interceptors of the fetchClient redirect to /login when receive a 401 and it would end up in an infinite loop when the user doesn't have a session.
-            validateStatus: (status) => status < 500,
-          });
-
-          setTelemetryProperties(properties);
-
-          try {
-            const event = 'didInitializeAdministration';
-            await post(
-              'https://analytics.strapi.io/api/v2/track',
-              {
-                // This event is anonymous
-                event,
-                userId: '',
-                deviceId,
-                eventPropeties: {},
-                userProperties: { environment: appInfo.currentEnvironment },
-                groupProperties: { ...properties, projectId: uuid },
-              },
-              {
-                headers: {
-                  'X-Strapi-Event': event,
-                },
-              }
-            );
-          } catch (e) {
-            // Silent.
-          }
-        }
-
-        setState({ isLoading: false, hasAdmin, uuid, deviceId });
-      } catch (err) {
-        toggleNotification({
-          type: 'warning',
-          message: { id: 'app.containers.App.notification.error.init' },
+    {
+      queryKey: 'telemetry-properties',
+      async queryFn() {
+        const {
+          data: { data },
+        } = await get(`/admin/telemetry-properties`, {
+          // NOTE: needed because the interceptors of the fetchClient redirect to /login when receive a
+          // 401 and it would end up in an infinite loop when the user doesn't have a session.
+          validateStatus: (status) => status < 500,
         });
-      }
-    };
 
-    getData();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [toggleNotification, updateProjectSettings]);
+        return data;
+      },
+
+      enabled: !!auth.getToken(),
+    },
+  ]);
+
+  React.useEffect(() => {
+    // If the renew token could not be fetched, logout the user
+    if (errorRenewToken) {
+      auth.clearAppStorage();
+      window.location.reload();
+    } else if (token) {
+      auth.updateToken(token);
+    }
+  }, [errorRenewToken, token]);
+
+  // Store the fetched project settings (e.g. logos)
+  // TODO: this should be moved to redux
+  React.useEffect(() => {
+    if (!isLoadingInit && initData) {
+      updateProjectSettings({
+        menuLogo: prefixFileUrlWithBackendUrl(initData.menuLogo),
+        authLogo: prefixFileUrlWithBackendUrl(initData.authLogo),
+      });
+
+      // TODO: this should be stored in redux
+      setState((prev) => ({
+        ...prev,
+        hasAdmin: initData.hasAdmin,
+        uuid: initData.uuid,
+      }));
+    }
+  }, [initData, isLoadingInit, updateProjectSettings]);
+
+  // We can't use useTracking here, because `App` is not wrapped in the tracking provider
+  // context, which we can't do because the context values contain data that can only be
+  // accessed when a user is logged in.
+  // This should not use `useFetchClient`, because it does not communicate to the admin API.
+  React.useEffect(() => {
+    async function trackInitEvent() {
+      await fetch('https://analytics.strapi.io/api/v2/track', {
+        body: JSON.stringify({
+          event: 'didInitializeAdministration',
+          // This event is anonymous
+          userId: '',
+          eventPropeties: {},
+          userProperties: {},
+          groupProperties: { ...telemetryProperties, projectId: uuid },
+        }),
+
+        headers: {
+          'Content-Type': 'application/json',
+          'X-Strapi-Event': 'didInitializeAdministration',
+        },
+
+        method: 'POST',
+      });
+    }
 
-  const setHasAdmin = (hasAdmin) => setState((prev) => ({ ...prev, hasAdmin }));
+    if (uuid) {
+      trackInitEvent();
+    }
+  }, [telemetryProperties, uuid]);
 
-  const trackingInfo = useMemo(
+  const trackingContext = React.useMemo(
     () => ({
       uuid,
       telemetryProperties,
-      deviceId,
     }),
-    [uuid, telemetryProperties, deviceId]
+    [uuid, telemetryProperties]
   );
 
-  if (isLoading) {
+  if (isLoadingInit) {
     return <LoadingIndicatorPage />;
   }
 
   return (
-    <Suspense fallback={<LoadingIndicatorPage />}>
+    <React.Suspense fallback={<LoadingIndicatorPage />}>
       <SkipToContent>{formatMessage({ id: 'skipToContent' })}</SkipToContent>
-      <TrackingProvider value={trackingInfo}>
+      <TrackingProvider value={trackingContext}>
         <Switch>
-          {authRoutes}
+          {authRoutes.map(({ path, component }) => (
+            <Route key={path} path={path} component={component} exact />
+          ))}
+
           <Route
             path="/auth/:authType"
             render={(routerProps) => (
-              <AuthPage {...routerProps} setHasAdmin={setHasAdmin} hasAdmin={hasAdmin} />
+              <AuthPage
+                {...routerProps}
+                setHasAdmin={(hasAdmin) => setState((prev) => ({ ...prev, hasAdmin }))}
+                hasAdmin={hasAdmin}
+              />
             )}
             exact
           />
           <PrivateRoute path="/usecase" component={UseCasePage} />
           <PrivateRoute path="/" component={AuthenticatedApp} />
+          <Route path="/404" component={NotFoundPage} />
+          <Route path="/500" component={InternalErrorPage} />
           <Route path="" component={NotFoundPage} />
         </Switch>
       </TrackingProvider>
-    </Suspense>
+    </React.Suspense>
   );
 }
-
-export default App;