@strapi/admin 4.12.6 → 4.13.0-alpha.0

package/admin/src/content-manager/utils/getDisplayName.js

@@ -0,0 +1,33 @@
+/**
+ * Retrieves the display name of an admin panel user
+ * @typedef AdminUserNamesAttributes
+ * @property {string} firstname
+ * @property {string} lastname
+ * @property {string} username
+ * @property {string} email
+ *
+ * @type {(user: AdminUserNamesAttributes, formatMessage: import('react-intl').formatMessage) => string}
+ */
+const getDisplayName = ({ firstname, lastname, username, email }, formatMessage) => {
+  if (username) {
+    return username;
+  }
+
+  // firstname is not required if the user is created with a username
+  if (firstname) {
+    return formatMessage(
+      {
+        id: 'global.fullname',
+        defaultMessage: '{firstname} {lastname}',
+      },
+      {
+        firstname,
+        lastname,
+      }
+    ).trim();
+  }
+
+  return email;
+};
+
+export { getDisplayName };

package/admin/src/content-manager/utils/index.js

@@ -12,3 +12,4 @@ export { default as mergeMetasWithSchema } from './mergeMetasWithSchema';
 export { default as removeKeyInObject } from './removeKeyInObject';
 export { default as removePasswordFieldsFromData } from './removePasswordFieldsFromData';
 export { default as createYupSchema } from './schema';
+export { getDisplayName } from './getDisplayName';

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

@@ -1,14 +1,9 @@
 import { useEffect, useReducer } from 'react';
 
-import {
-  getYupInnerErrors,
-  useFetchClient,
-  useNotification,
-  useOverlayBlocker,
-} from '@strapi/helper-plugin';
+import { useFetchClient, useNotification, useOverlayBlocker } from '@strapi/helper-plugin';
 import omit from 'lodash/omit';
 
-import { formatAPIErrors } from '../../utils/formatAPIErrors';
+import { checkFormValidity, formatAPIErrors } from '../../utils';
 
 import init from './init';
 import { initialState, reducer } from './reducer';
@@ -81,13 +76,7 @@ const useSettingsForm = (endPoint, schema, cbSuccess, fieldsToPick) => {
   const handleSubmit = async (e) => {
     e.preventDefault();
 
-    let errors = null;
-
-    try {
-      await schema.validate(modifiedData, { abortEarly: false });
-    } catch (err) {
-      errors = getYupInnerErrors(err);
-    }
+    const errors = await checkFormValidity(modifiedData, schema);
 
     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 @@
-export const formatLinks = (menu) => {
+const formatLinks = (menu) => {
   return menu.map((menuSection) => {
     const formattedLinks = menuSection.links.map((link) => ({
       ...link,
@@ -8,3 +8,5 @@ export const formatLinks = (menu) => {
     return { ...menuSection, links: formattedLinks };
   });
 };
+
+export default formatLinks;

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

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

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: "StrapiApp" */ './StrapiApp');
+  const StrapiApp = await import(/* webpackChunkName: "admin-app" */ './StrapiApp');
 
   const app = StrapiApp.default({
     appPlugins: plugins,

package/admin/src/layouts/AppLayout/index.js

@@ -0,0 +1,33 @@
+import React from 'react';
+
+import { Box, Flex, SkipToContent } from '@strapi/design-system';
+import PropTypes from 'prop-types';
+import { useIntl } from 'react-intl';
+import styled from 'styled-components';
+
+const FlexBox = styled(Box)`
+  flex: 1;
+`;
+
+const AppLayout = ({ children, sideNav }) => {
+  const { formatMessage } = useIntl();
+
+  return (
+    <Box background="neutral100">
+      <SkipToContent>
+        {formatMessage({ id: 'skipToContent', defaultMessage: 'Skip to content' })}
+      </SkipToContent>
+      <Flex alignItems="flex-start">
+        {sideNav}
+        <FlexBox>{children}</FlexBox>
+      </Flex>
+    </Box>
+  );
+};
+
+AppLayout.propTypes = {
+  children: PropTypes.node.isRequired,
+  sideNav: PropTypes.node.isRequired,
+};
+
+export default AppLayout;

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

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

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

@@ -4,92 +4,82 @@
  *
  */
 
-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(() =>
+const SettingsPage = lazy(() =>
   import(/* webpackChunkName: "Admin_settingsPage" */ '../SettingsPage').then((module) => ({
     default: module.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 +87,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 = [];