@strapi/admin 4.12.6 → 4.12.7

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

@@ -4,92 +4,80 @@
  *
  */
 
-import * as React from 'react';
+import React, { lazy, Suspense, useEffect, useMemo } 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 from '../../hooks/useConfigurations';
-import useMenu from '../../hooks/useMenu';
-import { createRoute } from '../../utils/createRoute';
+import { useConfigurations, useMenu } from '../../hooks';
+import AppLayout from '../../layouts/AppLayout';
+import { createRoute } from '../../utils';
 import { SET_APP_RUNTIME_STATUS } from '../App/constants';
 
-const CM = React.lazy(() =>
-  import(/* webpackChunkName: "content-manager" */ '../../content-manager/pages/App').then(
-    (module) => ({ default: module.ContentManger })
-  )
-);
-const GuidedTourModal = React.lazy(() =>
-  import(/* webpackChunkName: "Admin_GuidedTourModal" */ '../../components/GuidedTour/Modal').then(
-    (module) => ({ default: module.GuidedTourModal })
-  )
-);
-const HomePage = React.lazy(() =>
-  import(/* webpackChunkName: "Admin_homePage" */ '../HomePage').then((module) => ({
-    default: module.HomePage,
-  }))
+import Onboarding from './Onboarding';
+
+const CM = lazy(() =>
+  import(/* webpackChunkName: "content-manager" */ '../../content-manager/pages/App')
 );
-const InstalledPluginsPage = React.lazy(() =>
-  import(/* webpackChunkName: "Admin_pluginsPage" */ '../InstalledPluginsPage').then((module) => ({
-    default: module.PluginsPage,
-  }))
+const HomePage = lazy(() => import(/* webpackChunkName: "Admin_homePage" */ '../HomePage'));
+const InstalledPluginsPage = lazy(() =>
+  import(/* webpackChunkName: "Admin_pluginsPage" */ '../InstalledPluginsPage')
 );
-const MarketplacePage = React.lazy(() =>
+const MarketplacePage = lazy(() =>
   import(/* webpackChunkName: "Admin_marketplace" */ '../MarketplacePage')
 );
-const Onboarding = React.lazy(() =>
-  import(/* webpackChunkName: "Admin_Onboarding" */ './Onboarding').then((module) => ({
-    default: module.Onboarding,
-  }))
+const NotFoundPage = lazy(() =>
+  import(/* webpackChunkName: "Admin_NotFoundPage" */ '../NotFoundPage')
 );
-const ProfilePage = React.lazy(() =>
-  import(/* webpackChunkName: "Admin_profilePage" */ '../ProfilePage').then((module) => ({
-    default: module.ProfilePage,
-  }))
+const InternalErrorPage = lazy(() =>
+  import(/* webpackChunkName: "Admin_InternalErrorPage" */ '../InternalErrorPage')
+);
+
+const ProfilePage = lazy(() =>
+  import(/* webpackChunkName: "Admin_profilePage" */ '../ProfilePage')
 );
-const SettingsPage = React.lazy(() =>
-  import(/* webpackChunkName: "Admin_settingsPage" */ '../SettingsPage').then((module) => ({
-    default: module.SettingsPage,
-  }))
+const SettingsPage = lazy(() =>
+  import(/* webpackChunkName: "Admin_settingsPage" */ '../SettingsPage')
 );
 
-export const Admin = () => {
-  const { isLoading, generalSectionLinks, pluginsSectionLinks } = useMenu();
-  const { menu } = useStrapiApp();
-  const { showTutorials } = useConfigurations();
+// Simple hook easier for testing
+/**
+ * TODO: remove this, it's bad.
+ */
+const useTrackUsage = () => {
   const { trackUsage } = useTracking();
   const dispatch = useDispatch();
   const appStatus = useSelector((state) => state.admin_app.status);
 
-  React.useEffect(() => {
+  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 });
     }
-  }, [appStatus, dispatch, trackUsage]);
-
-  const routes = menu
-    .filter((link) => link.Component)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [appStatus]);
+};
 
-    /**
-     * `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.
-     */
+const Admin = () => {
+  useTrackUsage();
+  const { isLoading, generalSectionLinks, pluginsSectionLinks } = useMenu();
+  const { menu } = useStrapiApp();
+  const { showTutorials } = useConfigurations();
 
-    .map(({ to, Component, exact }) => createRoute(Component, to, exact));
+  const routes = useMemo(() => {
+    return menu
+      .filter((link) => link.Component)
+      .map(({ to, Component, exact }) => createRoute(Component, to, exact));
+  }, [menu]);
 
   if (isLoading) {
     return <LoadingIndicatorPage />;
@@ -97,34 +85,40 @@ export const Admin = () => {
 
   return (
     <DndProvider backend={HTML5Backend}>
-      <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
-        */}
+      <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>
         <GuidedTourModal />
 
         {showTutorials && <Onboarding />}
-      </Flex>
+      </AppLayout>
     </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 AUTH_ROUTES_CE = [];
+export const ROUTES_CE = [];

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

@@ -1,4 +1,10 @@
-import * as React from 'react';
+/**
+ *
+ * App.js
+ *
+ */
+
+import React, { lazy, Suspense, useEffect, useMemo, useState } from 'react';
 
 import { SkipToContent } from '@strapi/design-system';
 import {
@@ -6,57 +12,31 @@ 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/useConfigurations';
+import { useConfigurations } from '../../hooks';
 import { useEnterprise } from '../../hooks/useEnterprise';
+import { createRoute, makeUniqueRoutes } from '../../utils';
+import AuthPage from '../AuthPage';
+import NotFoundPage from '../NotFoundPage';
+import UseCasePage from '../UseCasePage';
 
-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 })
-  )
-);
+import { ROUTES_CE, SET_ADMIN_PERMISSIONS } from './constants';
 
-const UseCasePage = React.lazy(() =>
-  import(/* webpackChunkName: "Admin-UseCasePage" */ '../UseCasePage').then((module) => ({
-    default: module.UseCasePage,
-  }))
+const AuthenticatedApp = lazy(() =>
+  import(/* webpackChunkName: "Admin-authenticatedApp" */ '../../components/AuthenticatedApp')
 );
 
-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();
-
+function App() {
   const adminPermissions = useEnterprise(
     ADMIN_PERMISSIONS_CE,
     async () => (await import('../../../../ee/admin/constants')).ADMIN_PERMISSIONS_EE,
@@ -69,173 +49,155 @@ export function App() {
       defaultValue: ADMIN_PERMISSIONS_CE,
     }
   );
-
-  // 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,
+  const routes = useEnterprise(
+    ROUTES_CE,
+    async () => (await import('../../../../ee/admin/pages/App/constants')).ROUTES_EE,
     {
       defaultValue: [],
     }
   );
-
-  // TODO: this should be moved to redux
-  const [{ hasAdmin, uuid }, setState] = React.useState({
+  const toggleNotification = useNotification();
+  const { updateProjectSettings } = useConfigurations();
+  const { formatMessage } = useIntl();
+  const [{ isLoading, hasAdmin, uuid, deviceId }, setState] = useState({
+    isLoading: true,
     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);
 
-  // Store permissions in redux
-  React.useEffect(() => {
+  useEffect(() => {
     dispatch({ type: SET_ADMIN_PERMISSIONS, payload: adminPermissions });
   }, [adminPermissions, dispatch]);
 
-  const [
-    { data: token, error: errorRenewToken },
-    { data: initData, isLoading: isLoadingInit },
-    { data: telemetryProperties },
-  ] = useQueries([
-    {
-      queryKey: 'renew-token',
-      async queryFn() {
+  useEffect(() => {
+    const currentToken = auth.getToken();
+
+    const renewToken = async () => {
+      try {
         const {
           data: {
             data: { token },
           },
-        } = await post('/admin/renew-token', { token: auth.getToken() });
-
-        return token;
-      },
-
-      enabled: !!auth.getToken(),
-    },
+        } = await post('/admin/renew-token', { token: currentToken });
+        auth.updateToken(token);
+      } catch (err) {
+        // Refresh app
+        auth.clearAppStorage();
+        window.location.reload();
+      }
+    };
+
+    if (currentToken) {
+      renewToken();
+    }
+  }, [post]);
 
-    {
-      queryKey: 'init',
-      async queryFn() {
+  useEffect(() => {
+    const getData = async () => {
+      try {
         const {
-          data: { data },
+          data: {
+            data: { hasAdmin, uuid, menuLogo, authLogo },
+          },
         } = await get(`/admin/init`);
 
-        return data;
-      },
-    },
-
-    {
-      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,
+        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' },
+        });
+      }
+    };
 
-      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',
-      });
-    }
+    getData();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [toggleNotification, updateProjectSettings]);
 
-    if (uuid) {
-      trackInitEvent();
-    }
-  }, [telemetryProperties, uuid]);
+  const setHasAdmin = (hasAdmin) => setState((prev) => ({ ...prev, hasAdmin }));
 
-  const trackingContext = React.useMemo(
+  const trackingInfo = useMemo(
     () => ({
       uuid,
       telemetryProperties,
+      deviceId,
     }),
-    [uuid, telemetryProperties]
+    [uuid, telemetryProperties, deviceId]
   );
 
-  if (isLoadingInit) {
+  if (isLoading) {
     return <LoadingIndicatorPage />;
   }
 
   return (
-    <React.Suspense fallback={<LoadingIndicatorPage />}>
+    <Suspense fallback={<LoadingIndicatorPage />}>
       <SkipToContent>{formatMessage({ id: 'skipToContent' })}</SkipToContent>
-      <TrackingProvider value={trackingContext}>
+      <TrackingProvider value={trackingInfo}>
         <Switch>
-          {authRoutes.map(({ path, component }) => (
-            <Route key={path} path={path} component={component} exact />
-          ))}
-
+          {authRoutes}
           <Route
             path="/auth/:authType"
             render={(routerProps) => (
-              <AuthPage
-                {...routerProps}
-                setHasAdmin={(hasAdmin) => setState((prev) => ({ ...prev, hasAdmin }))}
-                hasAdmin={hasAdmin}
-              />
+              <AuthPage {...routerProps} setHasAdmin={setHasAdmin} 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>
-    </React.Suspense>
+    </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';
 
-export const AuthPage = ({ hasAdmin, setHasAdmin }) => {
+const AuthPage = ({ hasAdmin, setHasAdmin }) => {
   const {
     push,
     location: { search },
@@ -315,3 +315,5 @@ 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 = () => {
   );
 };
 
-export function HomePage() {
+function HomePageSwitch() {
   const HomePage = useEnterprise(
     HomePageCE,
     // eslint-disable-next-line import/no-cycle
@@ -103,3 +103,5 @@ export function HomePage() {
 
   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';
 
-export const PluginsPage = () => {
+const InstalledPluginsPage = () => {
   const { formatMessage } = useIntl();
   const permissions = useSelector(selectAdminPermissions);
 
@@ -25,3 +25,5 @@ export const PluginsPage = () => {
     </CheckPagePermissions>
   );
 };
+
+export default InstalledPluginsPage;

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

@@ -4,16 +4,15 @@
  * This is the page we show when the user gets a 500 error
  *
  */
-import * as React from 'react';
+import 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';
 
-export const InternalErrorPage = () => {
+const InternalErrorPage = () => {
   const { formatMessage } = useIntl();
-
   useFocusWhenNavigate();
 
   return (
@@ -47,3 +46,5 @@ export const InternalErrorPage = () => {
     </Main>
   );
 };
+
+export default InternalErrorPage;

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

@@ -11,7 +11,7 @@ import { LinkButton, useFocusWhenNavigate } from '@strapi/helper-plugin';
 import { ArrowRight, EmptyPictures } from '@strapi/icons';
 import { useIntl } from 'react-intl';
 
-export const NotFoundPage = () => {
+const NoContentType = () => {
   const { formatMessage } = useIntl();
   useFocusWhenNavigate();
 
@@ -46,3 +46,5 @@ export const NotFoundPage = () => {
     </Main>
   );
 };
+
+export default NoContentType;