@strapi/admin 4.12.5 → 4.12.6

package/admin/src/StrapiApp.js

@@ -22,7 +22,7 @@ import {
 } from './exposedHooks';
 import favicon from './favicon.png';
 import injectionZones from './injectionZones';
-import App from './pages/App';
+import { App } from './pages/App';
 import languageNativeNames from './translations/languageNativeNames';
 
 class StrapiApp {

package/admin/src/components/AuthenticatedApp.js

@@ -0,0 +1,229 @@
+import * as React from 'react';
+
+import {
+  AppInfoProvider,
+  auth,
+  LoadingIndicatorPage,
+  useFetchClient,
+  useGuidedTour,
+  useNotification,
+  useStrapiApp,
+} from '@strapi/helper-plugin';
+import { useQueries } from 'react-query';
+import { valid, lt } from 'semver';
+
+import packageJSON from '../../../package.json';
+import { useConfigurations } from '../hooks';
+import { Admin } from '../pages/Admin';
+import { getFullName } from '../utils/getFullName';
+import { hashAdminUserEmail } from '../utils/uniqueAdminHash';
+
+import RBACProvider from './RBACProvider';
+
+const strapiVersion = packageJSON.version;
+
+const checkLatestStrapiVersion = (currentPackageVersion, latestPublishedVersion) => {
+  if (!valid(currentPackageVersion) || !valid(latestPublishedVersion)) {
+    return false;
+  }
+
+  return lt(currentPackageVersion, latestPublishedVersion);
+};
+
+export const AuthenticatedApp = () => {
+  const { setGuidedTourVisibility } = useGuidedTour();
+  const toggleNotification = useNotification();
+  const userInfo = auth.getUserInfo();
+  const { get } = useFetchClient();
+  // TODO: replace with getDisplayName()
+  const [userDisplayName, setUserDisplayName] = React.useState(
+    userInfo?.userName ?? getFullName(userInfo.firstname, userInfo.lastname)
+  );
+  const [userId, setUserId] = React.useState(null);
+  const { showReleaseNotification } = useConfigurations();
+  const { plugins: appPlugins = {} } = useStrapiApp();
+  const [plugins, setPlugins] = React.useState(appPlugins);
+  const [
+    { data: appInfos, isLoading: isLoadingAppInfos },
+    { data: tagName },
+    { data: permissions, isLoading: isLoadingPermissions, refetch },
+    { data: userRoles },
+  ] = useQueries([
+    {
+      queryKey: 'information',
+      async queryFn() {
+        const {
+          data: { data },
+        } = await get('/admin/information');
+
+        return data;
+      },
+    },
+
+    {
+      queryKey: 'strapi-release',
+      async queryFn() {
+        const res = await fetch('https://api.github.com/repos/strapi/strapi/releases/latest');
+
+        if (!res.ok) {
+          throw new Error('Failed to fetch latest Strapi version.');
+        }
+
+        const { tag_name } = await res.json();
+
+        return tag_name;
+      },
+      enabled: showReleaseNotification,
+      initialData: strapiVersion,
+      onSuccess(data) {
+        const shouldUpdateStrapi = checkLatestStrapiVersion(strapiVersion, data.tag_name);
+
+        if (shouldUpdateStrapi && !JSON.parse(localStorage.getItem('STRAPI_UPDATE_NOTIF'))) {
+          toggleNotification({
+            type: 'info',
+            message: { id: 'notification.version.update.message' },
+            link: {
+              url: `https://github.com/strapi/strapi/releases/tag/${data.tag_name}`,
+              label: {
+                id: 'global.see-more',
+              },
+            },
+            blockTransition: true,
+            onClose: () => localStorage.setItem('STRAPI_UPDATE_NOTIF', true),
+          });
+        }
+      },
+      retry: false,
+    },
+    {
+      queryKey: ['users', 'me', 'permissions'],
+      async queryFn() {
+        const {
+          data: { data },
+        } = await get('/admin/users/me/permissions');
+
+        return data;
+      },
+      initialData: [],
+    },
+
+    {
+      queryKey: ['users', 'me'],
+      async queryFn() {
+        const {
+          data: {
+            data: { roles },
+          },
+        } = await get('/admin/users/me');
+
+        return roles;
+      },
+    },
+  ]);
+
+  // Display the guided tour conditionally for super admins in development mode
+  React.useEffect(() => {
+    if (userRoles) {
+      const isUserSuperAdmin = userRoles.find(({ code }) => code === 'strapi-super-admin');
+
+      if (isUserSuperAdmin && appInfos?.currentEnvironment === 'development') {
+        setGuidedTourVisibility(true);
+      }
+    }
+  }, [userRoles, appInfos, setGuidedTourVisibility]);
+
+  // Create a hash of the users email adress and use it as ID for tracking
+  React.useEffect(() => {
+    const generateUserId = async (userInfo) => {
+      const userId = await hashAdminUserEmail(userInfo);
+      setUserId(userId);
+    };
+
+    if (userInfo) {
+      generateUserId(userInfo);
+    }
+  }, [userInfo]);
+
+  /**
+   *
+   * I have spent some time trying to understand what is happening here, and wanted to
+   * leave that knowledge for my future me:
+   *
+   * `initializer` is an undocumented property of the `registerPlugin` API. At the time
+   * of writing it seems only to be used by the i18n plugin.
+   *
+   * How does it work?
+   *
+   * Every plugin that has an `initializer` component defined, receives the
+   * `setPlugin` function as a component prop. In the case of i18n the plugin fetches locales
+   * first and calls `setPlugin` with `pluginId` once they are loaded, which then triggers the
+   * reducer of the admin app defined above.
+   *
+   * Once all plugins are set to `isReady: true` the app renders.
+   *
+   * This API is used to block rendering of the admin app. We should remove that in v5 completely
+   * and make sure plugins can inject data into the global store before they are initialized, to avoid
+   * having a new prop-callback based communication channel between plugins and the core admin app.
+   *
+   */
+
+  const hasApluginNotReady = Object.values(plugins).some((plugin) => plugin.isReady === false);
+
+  if (
+    !userDisplayName ||
+    !userId ||
+    isLoadingAppInfos ||
+    isLoadingPermissions ||
+    hasApluginNotReady
+  ) {
+    const initializers = Object.keys(plugins).reduce((acc, current) => {
+      const InitializerComponent = plugins[current].initializer;
+
+      if (InitializerComponent) {
+        const key = plugins[current].pluginId;
+
+        acc.push(
+          <InitializerComponent
+            key={key}
+            setPlugin={(pluginId) => {
+              setPlugins((prev) => ({
+                ...prev,
+                [pluginId]: {
+                  ...prev[pluginId],
+                  isReady: true,
+                },
+              }));
+            }}
+          />
+        );
+      }
+
+      return acc;
+    }, []);
+
+    return (
+      <>
+        {initializers}
+        <LoadingIndicatorPage />
+      </>
+    );
+  }
+
+  return (
+    <AppInfoProvider
+      {...appInfos}
+      userId={userId}
+      latestStrapiReleaseTag={tagName}
+      // TODO: setUserDisplayName should not exist and be removed, as it is only used
+      // to update the displayName immediately, in case a user updates their profile.
+      // This information should be derived from the state.
+      setUserDisplayName={setUserDisplayName}
+      shouldUpdateStrapi={checkLatestStrapiVersion(strapiVersion, tagName)}
+      userDisplayName={userDisplayName}
+    >
+      <RBACProvider permissions={permissions} refetchPermissions={refetch}>
+        <Admin />
+      </RBACProvider>
+    </AppInfoProvider>
+  );
+};

package/admin/src/components/GuidedTour/Modal/index.js

@@ -9,7 +9,7 @@ import Modal from './components/Modal';
 import StepperModal from './components/Stepper';
 import reducer, { initialState } from './reducer';
 
-const GuidedTourModal = () => {
+export const GuidedTourModal = () => {
   const {
     currentStep,
     guidedTourState,
@@ -90,5 +90,3 @@ const GuidedTourModal = () => {
 
   return null;
 };
-
-export default GuidedTourModal;

package/admin/src/content-manager/pages/App/index.js

@@ -61,7 +61,7 @@ function renderDraglayerItem({ type, item }) {
   }
 }
 
-const App = () => {
+export const ContentManger = () => {
   const contentTypeMatch = useRouteMatch(`/content-manager/:kind/:uid`);
   const { status, collectionTypeLinks, singleTypeLinks, models, refetchData } =
     useContentManagerInitData();
@@ -123,6 +123,10 @@ const App = () => {
 
   return (
     <Layout sideNav={<LeftMenu />}>
+      <Helmet
+        title={formatMessage({ id: getTrad('plugin.name'), defaultMessage: 'Content Manager' })}
+      />
+
       <DragLayer renderItem={renderDraglayerItem} />
       <ModelsContext.Provider value={{ refetchData }}>
         <Switch>
@@ -149,18 +153,3 @@ const App = () => {
     </Layout>
   );
 };
-
-export { App };
-
-export default function () {
-  const { formatMessage } = useIntl();
-
-  return (
-    <>
-      <Helmet
-        title={formatMessage({ id: getTrad('plugin.name'), defaultMessage: 'Content Manager' })}
-      />
-      <App />
-    </>
-  );
-}

package/admin/src/content-manager/pages/EditView/Information/index.js

@@ -5,7 +5,7 @@ import { useCMEditViewDataManager } from '@strapi/helper-plugin';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 
-import { getFullName } from '../../../../utils';
+import { getFullName } from '../../../../utils/getFullName';
 import { getTrad } from '../../../utils';
 
 import getUnits from './utils/getUnits';

package/admin/src/content-manager/pages/ListView/components/BulkActionButtons/SelectedEntriesModal/index.js

@@ -32,7 +32,7 @@ import { useSelector } from 'react-redux';
 import { Link, useHistory } from 'react-router-dom';
 import styled from 'styled-components';
 
-import formatAPIError from '../../../../../../utils/formatAPIErrors';
+import { formatAPIErrors } from '../../../../../../utils/formatAPIErrors';
 import { getTrad, createYupSchema } from '../../../../../utils';
 import { listViewDomain } from '../../../selectors';
 import { Body } from '../../Body';
@@ -301,7 +301,7 @@ const SelectedEntriesModalContent = ({
       onError(error) {
         toggleNotification({
           type: 'warning',
-          message: formatAPIError(error),
+          message: formatAPIErrors(error),
         });
       },
     }

package/admin/src/content-manager/pages/ListView/components/TableRows/index.js

@@ -23,7 +23,7 @@ import { useIntl } from 'react-intl';
 import { Link, useHistory } from 'react-router-dom';
 
 import { useEnterprise } from '../../../../../hooks/useEnterprise';
-import { getFullName } from '../../../../../utils';
+import { getFullName } from '../../../../../utils/getFullName';
 import { usePluginsQueryParams } from '../../../../hooks';
 import { getTrad } from '../../../../utils';
 import CellContent from '../CellContent';

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 = [];