@strapi/admin 4.12.4 → 4.12.6

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

@@ -70,7 +70,6 @@ const MarketPlacePage = () => {
           id: 'admin.pages.MarketPlacePage.production',
           defaultMessage: 'Manage plugins from the development environment',
         },
-        blockTransition: true,
       });
     }
   }, [toggleNotification, isInDevelopmentMode]);

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 {

package/admin/src/pages/SettingsPage/constants.js

@@ -1,167 +1,102 @@
-export const ROUTES_CE = [
-  {
-    async Component() {
-      const component = await import(
-        /* webpackChunkName: "admin-roles-list" */ './pages/Roles/ProtectedListPage'
-      );
+import * as React from 'react';
 
-      return component;
-    },
-    to: '/settings/roles',
-    exact: true,
+export const SETTINGS_ROUTES_CE = [
+  {
+    component: React.lazy(() =>
+      import(/* webpackChunkName: "admin-roles-list" */ './pages/Roles/ProtectedListPage')
+    ),
+    path: '/settings/roles',
   },
   {
-    async Component() {
-      const component = await import(
-        /* webpackChunkName: "admin-edit-roles-page" */ './pages/Roles/CreatePage'
-      );
-
-      return component;
-    },
-    to: '/settings/roles/duplicate/:id',
-    exact: true,
+    component: React.lazy(() =>
+      import(/* webpackChunkName: "admin-edit-roles-page" */ './pages/Roles/CreatePage')
+    ),
+    path: '/settings/roles/duplicate/:id',
   },
   {
-    async Component() {
-      const component = await import(
-        /* webpackChunkName: "admin-edit-roles-page" */ './pages/Roles/CreatePage'
-      );
-
-      return component;
-    },
-    to: '/settings/roles/new',
-    exact: true,
+    component: React.lazy(() =>
+      import(/* webpackChunkName: "admin-edit-roles-page" */ './pages/Roles/CreatePage')
+    ),
+    path: '/settings/roles/new',
   },
   {
-    async Component() {
-      const component = await import(
-        /* webpackChunkName: "admin-edit-roles-page" */ './pages/Roles/ProtectedEditPage'
-      );
-
-      return component;
-    },
-    to: '/settings/roles/:id',
-    exact: true,
+    component: React.lazy(() =>
+      import(/* webpackChunkName: "admin-edit-roles-page" */ './pages/Roles/ProtectedEditPage')
+    ),
+    path: '/settings/roles/:id',
   },
   {
-    async Component() {
-      const component = await import(
-        /* webpackChunkName: "admin-users" */ './pages/Users/ProtectedListPage'
-      );
-
-      return component;
-    },
-    to: '/settings/users',
-    exact: true,
+    component: React.lazy(() =>
+      import(/* webpackChunkName: "admin-users" */ './pages/Users/ProtectedListPage')
+    ),
+    path: '/settings/users',
   },
   {
-    async Component() {
-      const component = await import(
-        /* webpackChunkName: "admin-edit-users" */ './pages/Users/ProtectedEditPage'
-      );
-
-      return component;
-    },
-    to: '/settings/users/:id',
-    exact: true,
+    component: React.lazy(() =>
+      import(/* webpackChunkName: "admin-edit-users" */ './pages/Users/ProtectedEditPage')
+    ),
+    path: '/settings/users/:id',
   },
   {
-    async Component() {
-      const component = await import(
-        /* webpackChunkName: "webhook-edit-page" */ './pages/Webhooks/ProtectedCreateView'
-      );
-
-      return component;
-    },
-    to: '/settings/webhooks/create',
-    exact: true,
+    component: React.lazy(() =>
+      import(/* webpackChunkName: "webhook-edit-page" */ './pages/Webhooks/ProtectedCreateView')
+    ),
+    path: '/settings/webhooks/create',
   },
   {
-    async Component() {
-      const component = await import(
-        /* webpackChunkName: "webhook-edit-page" */ './pages/Webhooks/ProtectedEditView'
-      );
-
-      return component;
-    },
-    to: '/settings/webhooks/:id',
-    exact: true,
+    component: React.lazy(() =>
+      import(/* webpackChunkName: "webhook-edit-page" */ './pages/Webhooks/ProtectedEditView')
+    ),
+    path: '/settings/webhooks/:id',
   },
   {
-    async Component() {
-      const component = await import(
-        /* webpackChunkName: "webhook-list-page" */ './pages/Webhooks/ProtectedListView'
-      );
-
-      return component;
-    },
-    to: '/settings/webhooks',
-    exact: true,
+    component: React.lazy(() =>
+      import(/* webpackChunkName: "webhook-list-page" */ './pages/Webhooks/ProtectedListView')
+    ),
+    path: '/settings/webhooks',
   },
   {
-    async Component() {
-      const component = await import(
-        /* webpackChunkName: "api-tokens-list-page" */ './pages/ApiTokens/ProtectedListView'
-      );
-
-      return component;
-    },
-    to: '/settings/api-tokens',
-    exact: true,
+    component: React.lazy(() =>
+      import(/* webpackChunkName: "api-tokens-list-page" */ './pages/ApiTokens/ProtectedListView')
+    ),
+    path: '/settings/api-tokens',
   },
   {
-    async Component() {
-      const component = await import(
+    component: React.lazy(() =>
+      import(
         /* webpackChunkName: "api-tokens-create-page" */ './pages/ApiTokens/ProtectedCreateView'
-      );
-
-      return component;
-    },
-    to: '/settings/api-tokens/create',
-    exact: true,
+      )
+    ),
+    path: '/settings/api-tokens/create',
   },
   {
-    async Component() {
-      const component = await import(
-        /* webpackChunkName: "api-tokens-edit-page" */ './pages/ApiTokens/ProtectedEditView'
-      );
-
-      return component;
-    },
-    to: '/settings/api-tokens/:id',
-    exact: true,
+    component: React.lazy(() =>
+      import(/* webpackChunkName: "api-tokens-edit-page" */ './pages/ApiTokens/ProtectedEditView')
+    ),
+    path: '/settings/api-tokens/:id',
   },
   {
-    async Component() {
-      const component = await import(
+    component: React.lazy(() =>
+      import(
         /* webpackChunkName: "transfer-tokens-create-page" */ './pages/TransferTokens/ProtectedCreateView'
-      );
-
-      return component;
-    },
-    to: '/settings/transfer-tokens/create',
-    exact: true,
+      )
+    ),
+    path: '/settings/transfer-tokens/create',
   },
   {
-    async Component() {
-      const component = await import(
+    component: React.lazy(() =>
+      import(
         /* webpackChunkName: "transfer-tokens-list-page" */ './pages/TransferTokens/ProtectedListView'
-      );
-
-      return component;
-    },
-    to: '/settings/transfer-tokens',
-    exact: true,
+      )
+    ),
+    path: '/settings/transfer-tokens',
   },
   {
-    async Component() {
-      const component = await import(
+    component: React.lazy(() =>
+      import(
         /* webpackChunkName: "transfer-tokens-edit-page" */ './pages/TransferTokens/ProtectedEditView'
-      );
-
-      return component;
-    },
-    to: '/settings/transfer-tokens/:id',
-    exact: true,
+      )
+    ),
+    path: '/settings/transfer-tokens/:id',
   },
 ];

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

@@ -1,15 +1,4 @@
-/**
- *
- * SettingsPage
- *
- */
-
-// NOTE TO PLUGINS DEVELOPERS:
-// If you modify this file you also need to update the documentation accordingly
-// Here's the file: strapi/docs/3.0.0-beta.x/plugin-development/frontend-settings-api.md
-// IF THE DOC IS NOT UPDATED THE PULL REQUEST WILL NOT BE MERGED
-
-import React, { memo, useMemo } from 'react';
+import * as React from 'react';
 
 import { Layout } from '@strapi/design-system';
 import { LoadingIndicatorPage, useStrapiApp } from '@strapi/helper-plugin';
@@ -19,21 +8,21 @@ import { Redirect, Route, Switch, useParams } from 'react-router-dom';
 
 import { useSettingsMenu } from '../../hooks';
 import { useEnterprise } from '../../hooks/useEnterprise';
-import { createRoute, makeUniqueRoutes } from '../../utils';
+import { createRoute } from '../../utils/createRoute';
 
 import SettingsNav from './components/SettingsNav';
-import { ROUTES_CE } from './constants';
+import { SETTINGS_ROUTES_CE } from './constants';
 import ApplicationInfosPage from './pages/ApplicationInfosPage';
-import { createSectionsRoutes } from './utils';
 
-function SettingsPage() {
+export function SettingsPage() {
   const { settingId } = useParams();
   const { settings } = useStrapiApp();
   const { formatMessage } = useIntl();
   const { isLoading, menu } = useSettingsMenu();
   const routes = useEnterprise(
-    ROUTES_CE,
-    async () => (await import('../../../../ee/admin/pages/SettingsPage/constants')).ROUTES_EE,
+    SETTINGS_ROUTES_CE,
+    async () =>
+      (await import('../../../../ee/admin/pages/SettingsPage/constants')).SETTINGS_ROUTES_EE,
     {
       combine(ceRoutes, eeRoutes) {
         return [...ceRoutes, ...eeRoutes];
@@ -42,14 +31,19 @@ function SettingsPage() {
     }
   );
 
-  // Creates the admin routes
-  const adminRoutes = useMemo(() => {
-    return makeUniqueRoutes(
-      routes.map(({ to, Component, exact }) => createRoute(Component, to, exact))
-    );
-  }, [routes]);
+  /**
+   * `Component` is an async function, which is passed as property of the
+   * addSettingsLink() API during the plugin bootstrap 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 pluginsRoutes = createSectionsRoutes(settings);
+  const pluginSettingsRoutes = Object.values(settings).flatMap((section) =>
+    section.links.map((link) => createRoute(link.Component, link.to, link.exact || false))
+  );
 
   // Since the useSettingsMenu hook can make API calls in order to check the links permissions
   // We need to add a loading state to prevent redirecting the user while permissions are being checked
@@ -61,23 +55,24 @@ function SettingsPage() {
     return <Redirect to="/settings/application-infos" />;
   }
 
-  const settingTitle = formatMessage({
-    id: 'global.settings',
-    defaultMessage: 'Settings',
-  });
-
   return (
     <Layout sideNav={<SettingsNav menu={menu} />}>
-      <Helmet title={settingTitle} />
+      <Helmet
+        title={formatMessage({
+          id: 'global.settings',
+          defaultMessage: 'Settings',
+        })}
+      />
 
       <Switch>
         <Route path="/settings/application-infos" component={ApplicationInfosPage} exact />
-        {adminRoutes}
-        {pluginsRoutes}
+
+        {routes.map(({ path, component }) => (
+          <Route key={path} path={path} component={component} exact />
+        ))}
+
+        {pluginSettingsRoutes}
       </Switch>
     </Layout>
   );
 }
-
-export default memo(SettingsPage);
-export { SettingsPage };

package/admin/src/pages/SettingsPage/pages/ApiTokens/EditView/index.js

@@ -19,7 +19,7 @@ import { useSelector } from 'react-redux';
 import { useHistory, useRouteMatch } from 'react-router-dom';
 
 import { ApiTokenPermissionsContextProvider } from '../../../../../contexts/ApiTokenPermissions';
-import { formatAPIErrors } from '../../../../../utils';
+import { formatAPIErrors } from '../../../../../utils/formatAPIErrors';
 import { selectAdminPermissions } from '../../../../App/selectors';
 import { API_TOKEN_TYPE } from '../../../components/Tokens/constants';
 import FormHead from '../../../components/Tokens/FormHead';

package/admin/src/pages/SettingsPage/pages/ApiTokens/ListView/index.js

@@ -1,11 +1,12 @@
-import React, { useEffect, useRef } from 'react';
+import * as React from 'react';
 
-import { Button, ContentLayout, HeaderLayout, Main } from '@strapi/design-system';
+import { ContentLayout, HeaderLayout, Main } from '@strapi/design-system';
 import {
   LinkButton,
   NoContent,
   NoPermissions,
   SettingsPageTitle,
+  useAPIErrorHandler,
   useFetchClient,
   useFocusWhenNavigate,
   useGuidedTour,
@@ -38,16 +39,17 @@ const ApiTokenListView = () => {
   const { push } = useHistory();
   const { trackUsage } = useTracking();
   const { startSection } = useGuidedTour();
-  const startSectionRef = useRef(startSection);
+  const startSectionRef = React.useRef(startSection);
   const { get, del } = useFetchClient();
+  const { formatAPIError } = useAPIErrorHandler();
 
-  useEffect(() => {
+  React.useEffect(() => {
     if (startSectionRef.current) {
       startSectionRef.current('apiTokens');
     }
   }, []);
 
-  useEffect(() => {
+  React.useEffect(() => {
     push({ search: qs.stringify({ sort: 'name:ASC' }, { encode: false }) });
   }, [push]);
 
@@ -59,16 +61,13 @@ const ApiTokenListView = () => {
     },
   }));
 
-  const {
-    data: apiTokens,
-    status,
-    isFetching,
-  } = useQuery(
+  const { data: apiTokens, isLoading: isLoadingTokens } = useQuery(
     ['api-tokens'],
     async () => {
       trackUsage('willAccessTokenList', {
         tokenType: API_TOKEN_TYPE,
       });
+
       const {
         data: { data },
       } = await get(`/admin/api-tokens`);
@@ -78,19 +77,18 @@ const ApiTokenListView = () => {
       return data;
     },
     {
+      cacheTime: 0,
       enabled: canRead,
-      onError() {
+      onError(error) {
         toggleNotification({
           type: 'warning',
-          message: { id: 'notification.error', defaultMessage: 'An error occured' },
+          message: formatAPIError(error),
         });
       },
     }
   );
 
-  const isLoading =
-    canRead &&
-    ((status !== 'success' && status !== 'error') || (status === 'success' && isFetching));
+  const isLoading = isLoadingTokens;
 
   const deleteMutation = useMutation(
     async (id) => {
@@ -101,25 +99,20 @@ const ApiTokenListView = () => {
         await queryClient.invalidateQueries(['api-tokens']);
         trackUsage('didDeleteToken');
       },
-      onError(err) {
-        if (err?.response?.data?.data) {
-          toggleNotification({ type: 'warning', message: err.response.data.data });
-        } else {
-          toggleNotification({
-            type: 'warning',
-            message: { id: 'notification.error', defaultMessage: 'An error occured' },
-          });
-        }
+      onError(error) {
+        toggleNotification({ type: 'warning', message: formatAPIError(error) });
       },
     }
   );
 
-  const shouldDisplayDynamicTable = canRead && apiTokens;
-  const shouldDisplayNoContent = canRead && !apiTokens && !canCreate;
-  const shouldDisplayNoContentWithCreationButton = canRead && !apiTokens && canCreate;
+  const hasApiTokens = apiTokens && apiTokens.length > 0;
+  const shouldDisplayDynamicTable = canRead && hasApiTokens;
+  const shouldDisplayNoContent = canRead && !hasApiTokens && !canCreate;
+  const shouldDisplayNoContentWithCreationButton = canRead && !hasApiTokens && canCreate;
 
   return (
     <Main aria-busy={isLoading}>
+      {/* TODO: this needs to be translated */}
       <SettingsPageTitle name="API Tokens" />
       <HeaderLayout
         title={formatMessage({ id: 'Settings.apiTokens.title', defaultMessage: 'API Tokens' })}
@@ -128,7 +121,7 @@ const ApiTokenListView = () => {
           defaultMessage: 'List of generated tokens to consume the API',
         })}
         primaryAction={
-          canCreate ? (
+          canCreate && (
             <LinkButton
               data-testid="create-api-token-button"
               startIcon={<Plus />}
@@ -145,7 +138,7 @@ const ApiTokenListView = () => {
                 defaultMessage: 'Create new API Token',
               })}
             </LinkButton>
-          ) : undefined
+          )
         }
       />
       <ContentLayout>
@@ -169,12 +162,12 @@ const ApiTokenListView = () => {
               defaultMessage: 'Add your first API Token',
             }}
             action={
-              <Button variant="secondary" startIcon={<Plus />}>
+              <LinkButton variant="secondary" startIcon={<Plus />} to="/settings/api-tokens/create">
                 {formatMessage({
                   id: 'Settings.apiTokens.addNewToken',
                   defaultMessage: 'Add new API Token',
                 })}
-              </Button>
+              </LinkButton>
             }
           />
         )}