@strapi/admin 4.12.6 → 4.12.7

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;

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 = menu.filter(
-    (section) => !section.links.every((link) => link.isDisplayed === false)
-  );
+  const filteredMenu = getSectionsToDisplay(menu);
 
   const sections = filteredMenu.map((section) => {
     return {

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

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

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

@@ -1,4 +1,15 @@
-import * as React from 'react';
+/**
+ *
+ * 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 { Layout } from '@strapi/design-system';
 import { LoadingIndicatorPage, useStrapiApp } from '@strapi/helper-plugin';
@@ -8,21 +19,21 @@ import { Redirect, Route, Switch, useParams } from 'react-router-dom';
 
 import { useSettingsMenu } from '../../hooks';
 import { useEnterprise } from '../../hooks/useEnterprise';
-import { createRoute } from '../../utils/createRoute';
+import { createRoute, makeUniqueRoutes } from '../../utils';
 
 import SettingsNav from './components/SettingsNav';
-import { SETTINGS_ROUTES_CE } from './constants';
+import { ROUTES_CE } from './constants';
 import ApplicationInfosPage from './pages/ApplicationInfosPage';
+import { createSectionsRoutes } from './utils';
 
-export function SettingsPage() {
+function SettingsPage() {
   const { settingId } = useParams();
   const { settings } = useStrapiApp();
   const { formatMessage } = useIntl();
   const { isLoading, menu } = useSettingsMenu();
   const routes = useEnterprise(
-    SETTINGS_ROUTES_CE,
-    async () =>
-      (await import('../../../../ee/admin/pages/SettingsPage/constants')).SETTINGS_ROUTES_EE,
+    ROUTES_CE,
+    async () => (await import('../../../../ee/admin/pages/SettingsPage/constants')).ROUTES_EE,
     {
       combine(ceRoutes, eeRoutes) {
         return [...ceRoutes, ...eeRoutes];
@@ -31,19 +42,14 @@ export function SettingsPage() {
     }
   );
 
-  /**
-   * `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.
-   */
+  // Creates the admin routes
+  const adminRoutes = useMemo(() => {
+    return makeUniqueRoutes(
+      routes.map(({ to, Component, exact }) => createRoute(Component, to, exact))
+    );
+  }, [routes]);
 
-  const pluginSettingsRoutes = Object.values(settings).flatMap((section) =>
-    section.links.map((link) => createRoute(link.Component, link.to, link.exact || false))
-  );
+  const pluginsRoutes = createSectionsRoutes(settings);
 
   // 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
@@ -55,24 +61,23 @@ export function SettingsPage() {
     return <Redirect to="/settings/application-infos" />;
   }
 
+  const settingTitle = formatMessage({
+    id: 'global.settings',
+    defaultMessage: 'Settings',
+  });
+
   return (
     <Layout sideNav={<SettingsNav menu={menu} />}>
-      <Helmet
-        title={formatMessage({
-          id: 'global.settings',
-          defaultMessage: 'Settings',
-        })}
-      />
+      <Helmet title={settingTitle} />
 
       <Switch>
         <Route path="/settings/application-infos" component={ApplicationInfosPage} exact />
-
-        {routes.map(({ path, component }) => (
-          <Route key={path} path={path} component={component} exact />
-        ))}
-
-        {pluginSettingsRoutes}
+        {adminRoutes}
+        {pluginsRoutes}
       </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/formatAPIErrors';
+import { formatAPIErrors } from '../../../../../utils';
 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 * as React from 'react';
+import React, { useRef } from 'react';
 
 import {
   Button,
@@ -14,11 +14,8 @@ import {
   Typography,
 } from '@strapi/design-system';
 import {
-  prefixFileUrlWithBackendUrl,
   SettingsPageTitle,
-  useAPIErrorHandler,
   useAppInfo,
-  useFetchClient,
   useFocusWhenNavigate,
   useNotification,
   useRBAC,
@@ -26,7 +23,7 @@ import {
 } from '@strapi/helper-plugin';
 import { Check, ExternalLink } from '@strapi/icons';
 import { useIntl } from 'react-intl';
-import { useMutation, useQuery } from 'react-query';
+import { useMutation, useQuery, useQueryClient } from 'react-query';
 import { useSelector } from 'react-redux';
 
 import { useConfigurations } from '../../../../hooks';
@@ -34,20 +31,18 @@ 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 = React.useRef();
+  const inputsRef = useRef();
   const toggleNotification = useNotification();
   const { trackUsage } = useTracking();
   const { formatMessage } = useIntl();
-  const { get, post } = useFetchClient();
-  const { updateProjectSettings } = useConfigurations();
-  const permissions = useSelector(selectAdminPermissions);
-  const { formatAPIError } = useAPIErrorHandler();
-
+  const queryClient = useQueryClient();
+  useFocusWhenNavigate();
   const {
     communityEdition,
     latestStrapiReleaseTag,
@@ -55,7 +50,8 @@ const ApplicationInfosPage = () => {
     shouldUpdateStrapi,
     strapiVersion,
   } = useAppInfo();
-
+  const { updateProjectSettings } = useConfigurations();
+  const permissions = useSelector(selectAdminPermissions);
   const AdminSeatInfo = useEnterprise(
     AdminSeatInfoCE,
     async () =>
@@ -69,68 +65,38 @@ const ApplicationInfosPage = () => {
   const {
     allowedActions: { canRead, canUpdate },
   } = useRBAC(permissions.settings['project-settings']);
+  const canSubmit = canRead && canUpdate;
 
-  useFocusWhenNavigate();
+  const { data, isLoading } = useQuery('project-settings', fetchProjectSettings, {
+    enabled: canRead,
+  });
 
-  const { data, isLoading } = useQuery(
-    ['project-settings'],
-    async () => {
-      const { data } = await get('/admin/project-settings');
-
-      return data;
+  const submitMutation = useMutation((body) => postProjectSettings(body), {
+    async onSuccess({ menuLogo, authLogo }) {
+      await queryClient.invalidateQueries('project-settings', { refetchActive: true });
+      updateProjectSettings({ menuLogo: menuLogo?.url, authLogo: authLogo?.url });
     },
-    {
-      cacheTime: 0,
-      enabled: canRead,
-      select(data) {
-        return {
-          ...data,
-
-          authLogo: data.authLogo
-            ? {
-                ...data.authLogo,
-                url: prefixFileUrlWithBackendUrl(data.authLogo.url),
-              }
-            : data.authLogo,
+  });
 
-          menuLogo: data.menuLogo
-            ? {
-                ...data.menuLogo,
-                url: prefixFileUrlWithBackendUrl(data.menuLogo.url),
-              }
-            : data.menuLogo,
-        };
-      },
-    }
-  );
+  const handleSubmit = (e) => {
+    e.preventDefault();
 
-  const submitMutation = useMutation(
-    (body) =>
-      post('/admin/project-settings', body, {
-        headers: {
-          'Content-Type': 'multipart/form-data',
-        },
-      }),
-    {
-      onError(error) {
-        toggleNotification({
-          type: 'warning',
-          message: formatAPIError(error),
-        });
-      },
+    if (!canUpdate) return;
 
-      async onSuccess(data) {
-        const { menuLogo, authLogo } = data;
+    const inputValues = inputsRef.current.getValues();
+    const formData = getFormData(inputValues);
 
-        updateProjectSettings({ menuLogo: menuLogo?.url, authLogo: authLogo?.url });
+    submitMutation.mutate(formData, {
+      onSuccess() {
+        const { menuLogo, authLogo } = inputValues;
 
-        if (menuLogo?.rawFile) {
+        if (menuLogo.rawFile) {
           trackUsage('didChangeLogo', {
             logo: 'menu',
           });
         }
 
-        if (authLogo?.rawFile) {
+        if (authLogo.rawFile) {
           trackUsage('didChangeLogo', {
             logo: 'auth',
           });
@@ -141,13 +107,13 @@ const ApplicationInfosPage = () => {
           message: formatMessage({ id: 'app', defaultMessage: 'Saved' }),
         });
       },
-    }
-  );
-
-  const handleSubmit = (e) => {
-    e.preventDefault();
-
-    submitMutation.mutate(getFormData(inputsRef.current.getValues()));
+      onError() {
+        toggleNotification({
+          type: 'warning',
+          message: { id: 'notification.error', defaultMessage: 'An error occurred' },
+        });
+      },
+    });
   };
 
   // block rendering until the EE component is fully loaded
@@ -179,7 +145,7 @@ const ApplicationInfosPage = () => {
                 defaultMessage: 'Administration panel’s global information',
               })}
               primaryAction={
-                canUpdate && (
+                canSubmit && (
                   <Button type="submit" startIcon={<Check />}>
                     {formatMessage({ id: 'global.save', defaultMessage: 'Save' })}
                   </Button>

package/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/utils/api.js

@@ -0,0 +1,23 @@
+import { getFetchClient } from '@strapi/helper-plugin';
+
+import prefixAllUrls from './prefixAllUrls';
+
+const fetchProjectSettings = async () => {
+  const { get } = getFetchClient();
+  const { data } = await get('/admin/project-settings');
+
+  return prefixAllUrls(data);
+};
+
+const postProjectSettings = async (body) => {
+  const { post } = getFetchClient();
+  const { data } = await post('/admin/project-settings', body, {
+    headers: {
+      'Content-Type': 'multipart/form-data',
+    },
+  });
+
+  return prefixAllUrls(data);
+};
+
+export { fetchProjectSettings, postProjectSettings };

package/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/utils/prefixAllUrls.js

@@ -0,0 +1,17 @@
+import { prefixFileUrlWithBackendUrl } from '@strapi/helper-plugin';
+import transform from 'lodash/transform';
+
+const prefixAllUrls = (data) =>
+  transform(
+    data,
+    (result, value, key) => {
+      if (value && value.url) {
+        result[key] = { ...value, url: prefixFileUrlWithBackendUrl(value.url) };
+      } else {
+        result[key] = value;
+      }
+    },
+    {}
+  );
+
+export default prefixAllUrls;

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/formatAPIErrors';
+import { formatAPIErrors } from '../../../../../utils';
 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,8 +34,7 @@ import { useHistory, useRouteMatch } from 'react-router-dom';
 
 import { useAdminUsers } from '../../../../../hooks/useAdminUsers';
 import { useEnterprise } from '../../../../../hooks/useEnterprise';
-import { formatAPIErrors } from '../../../../../utils/formatAPIErrors';
-import { getFullName } from '../../../../../utils/getFullName';
+import { formatAPIErrors, getFullName } from '../../../../../utils';
 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/getFullName';
+import { getFullName } from '../../../../../../../utils';
 
 const TableRows = ({
   canDelete,

package/admin/src/pages/SettingsPage/utils/createSectionsRoutes.js

@@ -0,0 +1,11 @@
+import flatMap from 'lodash/flatMap';
+
+import { createRoute } from '../../../utils';
+
+const createSectionsRoutes = (settings) => {
+  const allLinks = flatMap(settings, (section) => section.links);
+
+  return allLinks.map((link) => createRoute(link.Component, link.to, link.exact || false));
+};
+
+export default createSectionsRoutes;

package/admin/src/pages/SettingsPage/utils/getSectionsToDisplay.js

@@ -0,0 +1,5 @@
+const getSectionsToDisplay = (menu) => {
+  return menu.filter((section) => !section.links.every((link) => link.isDisplayed === false));
+};
+
+export default getSectionsToDisplay;