@strapi/admin 4.12.6 → 4.13.0-alpha.0

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/components/Register/index.js

@@ -29,6 +29,7 @@ import { useIntl } from 'react-intl';
 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 FieldActionWrapper from '../FieldActionWrapper';
@@ -55,6 +56,7 @@ const Register = ({ authType, fieldsToDisable, noSignin, onSubmit, schema }) =>
   const query = useQuery();
   const { formatAPIError } = useAPIErrorHandler();
   const { get } = useFetchClient();
+  const { setNpsSurveySettings } = useNpsSurveySettings();
 
   const registrationToken = query.get('registrationToken');
 
@@ -143,6 +145,9 @@ const Register = ({ authType, fieldsToDisable, noSignin, onSubmit, schema }) =>
               } else {
                 onSubmit(normalizedData, formik);
               }
+
+              // Only enable EE survey if user accepted the newsletter
+              setNpsSurveySettings({ enabled: data.news });
             } catch (err) {
               const errors = getYupInnerErrors(err);
               setSubmitCount(submitCount + 1);

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;

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/getFullName';
+import { getFullName } from '../../utils';
 
 import Password from './components/Password';
 import Preferences from './components/Preferences';
 import UserInfo from './components/UserInfo';
 import schema from './utils/schema';
 
-export const ProfilePage = () => {
+const ProfilePage = () => {
   const { changeLocale, localeNames } = useLocalesProvider();
   const { setUserDisplayName } = useAppInfo();
   const queryClient = useQueryClient();
@@ -231,3 +231,5 @@ export const ProfilePage = () => {
     </Main>
   );
 };
+
+export default ProfilePage;