@strapi/admin 4.12.5 → 4.12.6

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

@@ -1,4 +1,4 @@
-import React, { useRef } from 'react';
+import * as React from 'react';
 
 import {
   Button,
@@ -14,8 +14,11 @@ import {
   Typography,
 } from '@strapi/design-system';
 import {
+  prefixFileUrlWithBackendUrl,
   SettingsPageTitle,
+  useAPIErrorHandler,
   useAppInfo,
+  useFetchClient,
   useFocusWhenNavigate,
   useNotification,
   useRBAC,
@@ -23,7 +26,7 @@ import {
 } from '@strapi/helper-plugin';
 import { Check, ExternalLink } from '@strapi/icons';
 import { useIntl } from 'react-intl';
-import { useMutation, useQuery, useQueryClient } from 'react-query';
+import { useMutation, useQuery } from 'react-query';
 import { useSelector } from 'react-redux';
 
 import { useConfigurations } from '../../../../hooks';
@@ -31,18 +34,20 @@ import { useEnterprise } from '../../../../hooks/useEnterprise';
 import { selectAdminPermissions } from '../../../App/selectors';
 
 import CustomizationInfos from './components/CustomizationInfos';
-import { fetchProjectSettings, postProjectSettings } from './utils/api';
 import getFormData from './utils/getFormData';
 
 const AdminSeatInfoCE = () => null;
 
 const ApplicationInfosPage = () => {
-  const inputsRef = useRef();
+  const inputsRef = React.useRef();
   const toggleNotification = useNotification();
   const { trackUsage } = useTracking();
   const { formatMessage } = useIntl();
-  const queryClient = useQueryClient();
-  useFocusWhenNavigate();
+  const { get, post } = useFetchClient();
+  const { updateProjectSettings } = useConfigurations();
+  const permissions = useSelector(selectAdminPermissions);
+  const { formatAPIError } = useAPIErrorHandler();
+
   const {
     communityEdition,
     latestStrapiReleaseTag,
@@ -50,8 +55,7 @@ const ApplicationInfosPage = () => {
     shouldUpdateStrapi,
     strapiVersion,
   } = useAppInfo();
-  const { updateProjectSettings } = useConfigurations();
-  const permissions = useSelector(selectAdminPermissions);
+
   const AdminSeatInfo = useEnterprise(
     AdminSeatInfoCE,
     async () =>
@@ -65,38 +69,68 @@ const ApplicationInfosPage = () => {
   const {
     allowedActions: { canRead, canUpdate },
   } = useRBAC(permissions.settings['project-settings']);
-  const canSubmit = canRead && canUpdate;
 
-  const { data, isLoading } = useQuery('project-settings', fetchProjectSettings, {
-    enabled: canRead,
-  });
+  useFocusWhenNavigate();
 
-  const submitMutation = useMutation((body) => postProjectSettings(body), {
-    async onSuccess({ menuLogo, authLogo }) {
-      await queryClient.invalidateQueries('project-settings', { refetchActive: true });
-      updateProjectSettings({ menuLogo: menuLogo?.url, authLogo: authLogo?.url });
+  const { data, isLoading } = useQuery(
+    ['project-settings'],
+    async () => {
+      const { data } = await get('/admin/project-settings');
+
+      return data;
     },
-  });
+    {
+      cacheTime: 0,
+      enabled: canRead,
+      select(data) {
+        return {
+          ...data,
 
-  const handleSubmit = (e) => {
-    e.preventDefault();
+          authLogo: data.authLogo
+            ? {
+                ...data.authLogo,
+                url: prefixFileUrlWithBackendUrl(data.authLogo.url),
+              }
+            : data.authLogo,
 
-    if (!canUpdate) return;
+          menuLogo: data.menuLogo
+            ? {
+                ...data.menuLogo,
+                url: prefixFileUrlWithBackendUrl(data.menuLogo.url),
+              }
+            : data.menuLogo,
+        };
+      },
+    }
+  );
 
-    const inputValues = inputsRef.current.getValues();
-    const formData = getFormData(inputValues);
+  const submitMutation = useMutation(
+    (body) =>
+      post('/admin/project-settings', body, {
+        headers: {
+          'Content-Type': 'multipart/form-data',
+        },
+      }),
+    {
+      onError(error) {
+        toggleNotification({
+          type: 'warning',
+          message: formatAPIError(error),
+        });
+      },
 
-    submitMutation.mutate(formData, {
-      onSuccess() {
-        const { menuLogo, authLogo } = inputValues;
+      async onSuccess(data) {
+        const { menuLogo, authLogo } = data;
 
-        if (menuLogo.rawFile) {
+        updateProjectSettings({ menuLogo: menuLogo?.url, authLogo: authLogo?.url });
+
+        if (menuLogo?.rawFile) {
           trackUsage('didChangeLogo', {
             logo: 'menu',
           });
         }
 
-        if (authLogo.rawFile) {
+        if (authLogo?.rawFile) {
           trackUsage('didChangeLogo', {
             logo: 'auth',
           });
@@ -107,13 +141,13 @@ const ApplicationInfosPage = () => {
           message: formatMessage({ id: 'app', defaultMessage: 'Saved' }),
         });
       },
-      onError() {
-        toggleNotification({
-          type: 'warning',
-          message: { id: 'notification.error', defaultMessage: 'An error occurred' },
-        });
-      },
-    });
+    }
+  );
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+
+    submitMutation.mutate(getFormData(inputsRef.current.getValues()));
   };
 
   // block rendering until the EE component is fully loaded
@@ -145,7 +179,7 @@ const ApplicationInfosPage = () => {
                 defaultMessage: 'Administration panel’s global information',
               })}
               primaryAction={
-                canSubmit && (
+                canUpdate && (
                   <Button type="submit" startIcon={<Check />}>
                     {formatMessage({ id: 'global.save', defaultMessage: 'Save' })}
                   </Button>

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

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

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

@@ -34,7 +34,8 @@ import { useHistory, useRouteMatch } from 'react-router-dom';
 
 import { useAdminUsers } from '../../../../../hooks/useAdminUsers';
 import { useEnterprise } from '../../../../../hooks/useEnterprise';
-import { formatAPIErrors, getFullName } from '../../../../../utils';
+import { formatAPIErrors } from '../../../../../utils/formatAPIErrors';
+import { getFullName } from '../../../../../utils/getFullName';
 import { MagicLinkCE } from '../components/MagicLink';
 import SelectRoles from '../components/SelectRoles';
 import { editValidation } from '../utils/validations/users';

package/admin/src/pages/SettingsPage/pages/Users/ListPage/DynamicTable/TableRows/index.js

@@ -16,7 +16,7 @@ import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 import { useHistory } from 'react-router-dom';
 
-import { getFullName } from '../../../../../../../utils';
+import { getFullName } from '../../../../../../../utils/getFullName';
 
 const TableRows = ({
   canDelete,