@strapi/admin 4.12.5 → 4.12.6

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;

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

@@ -11,14 +11,14 @@ import { Redirect, useHistory, useRouteMatch } from 'react-router-dom';
 import persistStateToLocaleStorage from '../../components/GuidedTour/utils/persistStateToLocaleStorage';
 import useLocalesProvider from '../../components/LocalesProvider/useLocalesProvider';
 import { useEnterprise } from '../../hooks/useEnterprise';
-import formatAPIErrors from '../../utils/formatAPIErrors';
+import { formatAPIErrors } from '../../utils/formatAPIErrors';
 
 import { LoginCE } from './components/Login';
 import { FORMS } from './constants';
 import init from './init';
 import { initialState, reducer } from './reducer';
 
-const AuthPage = ({ hasAdmin, setHasAdmin }) => {
+export const AuthPage = ({ hasAdmin, setHasAdmin }) => {
   const {
     push,
     location: { search },
@@ -315,5 +315,3 @@ AuthPage.propTypes = {
   hasAdmin: PropTypes.bool,
   setHasAdmin: PropTypes.func.isRequired,
 };
-
-export default AuthPage;

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

@@ -89,7 +89,7 @@ export const HomePageCE = () => {
   );
 };
 
-function HomePageSwitch() {
+export function HomePage() {
   const HomePage = useEnterprise(
     HomePageCE,
     // eslint-disable-next-line import/no-cycle
@@ -103,5 +103,3 @@ function HomePageSwitch() {
 
   return <HomePage />;
 }
-
-export default HomePageSwitch;

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

@@ -9,7 +9,7 @@ import { selectAdminPermissions } from '../App/selectors';
 
 import Plugins from './Plugins';
 
-const InstalledPluginsPage = () => {
+export const PluginsPage = () => {
   const { formatMessage } = useIntl();
   const permissions = useSelector(selectAdminPermissions);
 
@@ -25,5 +25,3 @@ const InstalledPluginsPage = () => {
     </CheckPagePermissions>
   );
 };
-
-export default InstalledPluginsPage;

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

@@ -4,15 +4,16 @@
  * This is the page we show when the user gets a 500 error
  *
  */
-import React from 'react';
+import * as React from 'react';
 
 import { ContentLayout, EmptyStateLayout, HeaderLayout, Main } from '@strapi/design-system';
 import { LinkButton, 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 +47,3 @@ const InternalErrorPage = () => {
     </Main>
   );
 };
-
-export default InternalErrorPage;

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

@@ -11,7 +11,7 @@ import { LinkButton, 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 +46,3 @@ const NoContentType = () => {
     </Main>
   );
 };
-
-export default NoContentType;

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

@@ -28,14 +28,14 @@ import { useMutation, useQuery, useQueryClient } from 'react-query';
 
 import useLocalesProvider from '../../components/LocalesProvider/useLocalesProvider';
 import { useThemeToggle } from '../../hooks';
-import { getFullName } from '../../utils';
+import { getFullName } from '../../utils/getFullName';
 
 import Password from './components/Password';
 import Preferences from './components/Preferences';
 import UserInfo from './components/UserInfo';
 import schema from './utils/schema';
 
-const ProfilePage = () => {
+export const ProfilePage = () => {
   const { changeLocale, localeNames } = useLocalesProvider();
   const { setUserDisplayName } = useAppInfo();
   const queryClient = useQueryClient();
@@ -231,5 +231,3 @@ const ProfilePage = () => {
     </Main>
   );
 };
-
-export default ProfilePage;

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

@@ -12,14 +12,14 @@ import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 import { NavLink, useLocation } from 'react-router-dom';
 
-import { getSectionsToDisplay } from '../../utils';
-
 const SettingsNav = ({ menu }) => {
   const { formatMessage } = useIntl();
   const { trackUsage } = useTracking();
   const { pathname } = useLocation();
 
-  const filteredMenu = getSectionsToDisplay(menu);
+  const filteredMenu = menu.filter(
+    (section) => !section.links.every((link) => link.isDisplayed === false)
+  );
 
   const sections = filteredMenu.map((section) => {
     return {