@strapi/admin 4.11.1-beta.2 → 4.11.2

package/admin/src/hooks/index.js

@@ -2,13 +2,13 @@ export { default as useConfigurations } from './useConfigurations';
 export { useContentTypes } from './useContentTypes';
 export { default as useFetchPermissionsLayout } from './useFetchPermissionsLayout';
 export { default as useFetchRole } from './useFetchRole';
+export { default as useLicenseLimitNotification } from './useLicenseLimitNotification';
+export { default as useLicenseLimit } from './useLicenseLimits';
 export { default as useMenu } from './useMenu';
-export { default as useRolesList } from './useRolesList';
-export { default as useSettingsMenu } from './useSettingsMenu';
-export { default as useSettingsForm } from './useSettingsForm';
 export { default as usePermissionsDataManager } from './usePermissionsDataManager';
+export { default as useRegenerate } from './useRegenerate';
 export { default as useReleaseNotification } from './useReleaseNotification';
+export { default as useRolesList } from './useRolesList';
+export { default as useSettingsForm } from './useSettingsForm';
+export { default as useSettingsMenu } from './useSettingsMenu';
 export { default as useThemeToggle } from './useThemeToggle';
-export { default as useRegenerate } from './useRegenerate';
-export { default as useLicenseLimit } from './useLicenseLimits';
-export { default as useLicenseLimitNotification } from './useLicenseLimitNotification';

package/admin/src/hooks/marketplace/useFetchMarketplacePlugins/index.js

@@ -1,6 +1,7 @@
-import { useQuery } from 'react-query';
 import { useNotification } from '@strapi/helper-plugin';
 import qs from 'qs';
+import { useQuery } from 'react-query';
+
 import { MARKETPLACE_API_URL } from '../constants';
 
 const fetchMarketplacePlugins = async (params = {}) => {

package/admin/src/hooks/marketplace/useFetchMarketplaceProviders/index.js

@@ -1,6 +1,7 @@
-import { useQuery } from 'react-query';
 import { useNotification } from '@strapi/helper-plugin';
 import qs from 'qs';
+import { useQuery } from 'react-query';
+
 import { MARKETPLACE_API_URL } from '../constants';
 
 const fetchMarketplaceProviders = async (params = {}) => {

package/admin/src/hooks/useAdminUsers/useAdminUsers.js

@@ -1,6 +1,6 @@
-import { useQuery } from 'react-query';
 import { useFetchClient } from '@strapi/helper-plugin';
 import { stringify } from 'qs';
+import { useQuery } from 'react-query';
 
 export function useAdminUsers(params = {}, queryOptions = {}) {
   const { id = '', ...queryParams } = params;

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

@@ -1,4 +1,5 @@
 import { useContext } from 'react';
+
 import { ConfigurationsContext } from '../../contexts';
 
 const useConfigurations = () => {

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

@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react';
+import { useEffect, useState } from 'react';
 
 const useDebounce = (value, delay) => {
   const [debouncedValue, setDebouncedValue] = useState(value);

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

@@ -0,0 +1 @@
+export * from './useEnterprise';

package/admin/src/hooks/useEnterprise/useEnterprise.js

@@ -0,0 +1,36 @@
+import * as React from 'react';
+
+import { useCallbackRef } from '@strapi/helper-plugin';
+
+function isEnterprise() {
+  return window.strapi.isEE;
+}
+
+export function useEnterprise(
+  ceData,
+  eeCallback,
+  { defaultValue = null, combine = (ceData, eeData) => eeData } = {}
+) {
+  const eeCallbackRef = useCallbackRef(eeCallback);
+  const combineCallbackRef = useCallbackRef(combine);
+
+  // We have to use a nested object here, because functions (e.g. Components)
+  // can not be stored as value directly
+  const [{ data }, setData] = React.useState({
+    data: isEnterprise() ? defaultValue : ceData,
+  });
+
+  React.useEffect(() => {
+    async function importEE() {
+      const eeData = await eeCallbackRef();
+
+      setData({ data: combineCallbackRef(ceData, eeData) });
+    }
+
+    if (isEnterprise()) {
+      importEE();
+    }
+  }, [ceData, eeCallbackRef, combineCallbackRef]);
+
+  return data;
+}

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

@@ -1,5 +1,6 @@
-import { useQuery } from 'react-query';
 import { useNotification } from '@strapi/helper-plugin';
+import { useQuery } from 'react-query';
+
 import { fetchEnabledPlugins } from './utils/api';
 
 const useFetchEnabledPlugins = (notifyLoad) => {

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

@@ -1,4 +1,5 @@
 import { useEffect, useReducer } from 'react';
+
 import { useFetchClient } from '@strapi/helper-plugin';
 
 import reducer, { initialState } from './reducer';

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

@@ -1,5 +1,7 @@
-import { useCallback, useReducer, useEffect } from 'react';
+import { useCallback, useEffect, useReducer } from 'react';
+
 import { useFetchClient, useNotification } from '@strapi/helper-plugin';
+
 import reducer, { initialState } from './reducer';
 
 const useFetchRole = (id) => {

package/admin/src/hooks/useInjectReducer/useInjectReducer.js

@@ -1,4 +1,5 @@
 import { useEffect } from 'react';
+
 import { useStore } from 'react-redux';
 
 /**

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

@@ -1,8 +1,10 @@
 import { useEffect, useReducer, useRef } from 'react';
-import { useRBACProvider, useAppInfo, useStrapiApp } from '@strapi/helper-plugin';
-import getPluginSectionLinks from './utils/getPluginSectionLinks';
-import getGeneralLinks from './utils/getGeneralLinks';
+
+import { useAppInfo, useRBACProvider, useStrapiApp } from '@strapi/helper-plugin';
+
 import reducer, { initialState } from './reducer';
+import getGeneralLinks from './utils/getGeneralLinks';
+import getPluginSectionLinks from './utils/getPluginSectionLinks';
 
 const useMenu = () => {
   const [state, dispatch] = useReducer(reducer, initialState);

package/admin/src/hooks/useMenu/reducer.js

@@ -1,6 +1,7 @@
 /* eslint-disable consistent-return */
-import produce from 'immer';
 import { Cog, Puzzle, ShoppingCart } from '@strapi/icons';
+import produce from 'immer';
+
 import adminPermissions from '../../permissions';
 
 const initialState = {

package/admin/src/hooks/useMenu/utils/getGeneralLinks.js

@@ -1,4 +1,5 @@
 import cloneDeep from 'lodash/cloneDeep';
+
 import checkPermissions from './checkPermissions';
 
 const getGeneralLinks = async (permissions, generalSectionRawLinks, shouldUpdateStrapi) => {

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

@@ -1,4 +1,5 @@
 import { useContext } from 'react';
+
 import { PermissionsDataManagerContext } from '../../contexts';
 
 const usePermissionsDataManager = () => useContext(PermissionsDataManagerContext);

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

@@ -1,5 +1,6 @@
 import { useState } from 'react';
-import { useFetchClient, useNotification, useAPIErrorHandler } from '@strapi/helper-plugin';
+
+import { useAPIErrorHandler, useFetchClient, useNotification } from '@strapi/helper-plugin';
 
 const useRegenerate = (url, id, onRegenerate, onError) => {
   const [isLoadingConfirmation, setIsLoadingConfirmation] = useState(false);

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

@@ -1,4 +1,5 @@
 import { useEffect } from 'react';
+
 import { useAppInfo, useNotification } from '@strapi/helper-plugin';
 
 const showUpdateNotif = !JSON.parse(localStorage.getItem('STRAPI_UPDATE_NOTIF'));

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

@@ -1,6 +1,8 @@
-import { useEffect, useReducer, useCallback } from 'react';
+import { useCallback, useEffect, useReducer } from 'react';
+
 import { getFetchClient, useNotification } from '@strapi/helper-plugin';
 import get from 'lodash/get';
+
 import init from './init';
 import reducer, { initialState } from './reducer';
 

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

@@ -1,9 +1,12 @@
 import { useEffect, useReducer } from 'react';
+
 import { useFetchClient, useNotification, useOverlayBlocker } from '@strapi/helper-plugin';
 import omit from 'lodash/omit';
+
 import { checkFormValidity, formatAPIErrors } from '../../utils';
-import { initialState, reducer } from './reducer';
+
 import init from './init';
+import { initialState, reducer } from './reducer';
 
 /**
  * TODO: refactor this, it's confusing and hard to read.

package/admin/src/hooks/useSettingsMenu/constants.js

@@ -0,0 +1,46 @@
+import adminPermissions from '../../permissions';
+
+export const LINKS_CE = {
+  global: [
+    {
+      intlLabel: { id: 'Settings.application.title', defaultMessage: 'Overview' },
+      to: '/settings/application-infos',
+      id: '000-application-infos',
+      permissions: [],
+    },
+    {
+      intlLabel: { id: 'Settings.webhooks.title', defaultMessage: 'Webhooks' },
+      to: '/settings/webhooks',
+      id: 'webhooks',
+      permissions: adminPermissions.settings.webhooks.main,
+    },
+    {
+      intlLabel: { id: 'Settings.apiTokens.title', defaultMessage: 'API Tokens' },
+      to: '/settings/api-tokens?sort=name:ASC',
+      id: 'api-tokens',
+      permissions: adminPermissions.settings['api-tokens'].main,
+    },
+    {
+      intlLabel: { id: 'Settings.transferTokens.title', defaultMessage: 'Transfer Tokens' },
+      to: '/settings/transfer-tokens?sort=name:ASC',
+      id: 'transfer-tokens',
+      permissions: adminPermissions.settings['transfer-tokens'].main,
+    },
+  ],
+
+  admin: [
+    {
+      intlLabel: { id: 'global.roles', defaultMessage: 'Roles' },
+      to: '/settings/roles',
+      id: 'roles',
+      permissions: adminPermissions.settings.roles.main,
+    },
+    {
+      intlLabel: { id: 'global.users' },
+      // Init the search params directly
+      to: '/settings/users?pageSize=10&page=1&sort=firstname',
+      id: 'users',
+      permissions: adminPermissions.settings.users.main,
+    },
+  ],
+};

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

@@ -1,55 +1,95 @@
-import { useEffect, useReducer } from 'react';
+import { useState, useEffect } from 'react';
+
 import { hasPermissions, useRBACProvider, useStrapiApp, useAppInfo } from '@strapi/helper-plugin';
 
-import reducer, { initialState } from './reducer';
-import init from './init';
+import { useEnterprise } from '../useEnterprise';
+
+import { LINKS_CE } from './constants';
+import formatLinks from './utils/formatLinks';
+import sortLinks from './utils/sortLinks';
 
-const useSettingsMenu = (noCheck = false) => {
+const useSettingsMenu = () => {
+  const [{ isLoading, menu }, setData] = useState({
+    isLoading: true,
+    menu: [],
+  });
   const { allPermissions: permissions } = useRBACProvider();
   const { shouldUpdateStrapi } = useAppInfo();
   const { settings } = useStrapiApp();
-
-  const [{ isLoading, menu }, dispatch] = useReducer(reducer, initialState, () =>
-    init(initialState, { settings, shouldUpdateStrapi })
+  const { global: globalLinks, admin: adminLinks } = useEnterprise(
+    LINKS_CE,
+    async () => (await import('../../../../ee/admin/hooks/useSettingsMenu/constants')).LINKS_EE,
+    {
+      combine(ceLinks, eeLinks) {
+        return {
+          admin: [...eeLinks.admin, ...ceLinks.admin],
+          global: [...ceLinks.global, ...eeLinks.global],
+        };
+      },
+      defaultValue: {
+        admin: [],
+        global: [],
+      },
+    }
   );
 
   useEffect(() => {
     const getData = async () => {
-      const checkPermissions = async (permissionsToCheck, path) => {
-        const hasPermission = await hasPermissions(permissions, permissionsToCheck);
+      const buildMenuPermissions = (sections) =>
+        Promise.all(
+          sections.reduce((acc, section, sectionIndex) => {
+            const buildMenuPermissions = (links) =>
+              links.map(async (link, linkIndex) => ({
+                hasPermission: await hasPermissions(permissions, link.permissions),
+                sectionIndex,
+                linkIndex,
+              }));
 
-        return { hasPermission, path };
-      };
+            return [...acc, ...buildMenuPermissions(section.links)];
+          }, [])
+        );
 
-      const generateArrayOfPromises = (array) => {
-        return array.reduce((acc, current, sectionIndex) => {
-          const generateArrayOfPromises = (array) =>
-            array.map((link, index) =>
-              checkPermissions(array[index].permissions, `${sectionIndex}.links.${index}`)
-            );
+      const menuPermissions = await buildMenuPermissions(sections);
 
-          return [...acc, ...generateArrayOfPromises(current.links)];
-        }, []);
-      };
-
-      const generalSectionLinksArrayOfPromises = generateArrayOfPromises(menu);
-
-      const data = await Promise.all(generalSectionLinksArrayOfPromises);
+      setData((prev) => ({
+        ...prev,
+        isLoading: false,
+        menu: sections.map((section, sectionIndex) => ({
+          ...section,
+          links: section.links.map((link, linkIndex) => {
+            const permission = menuPermissions.find(
+              (permission) =>
+                permission.sectionIndex === sectionIndex && permission.linkIndex === linkIndex
+            );
 
-      dispatch({
-        type: 'CHECK_PERMISSIONS_SUCCEEDED',
-        data,
-      });
+            return {
+              ...link,
+              isDisplayed: Boolean(permission.hasPermission),
+            };
+          }),
+        })),
+      }));
     };
 
-    // This hook is also used by the main LeftMenu component in order to know which sections it needs to display/hide
-    // Therefore, we don't need to make the checking all the times when the hook is used.
-    if (!noCheck) {
-      getData();
-    }
+    const { global, ...otherSections } = settings;
+    const sections = formatLinks([
+      {
+        ...settings.global,
+        links: sortLinks([...settings.global.links, ...globalLinks]).map((link) => ({
+          ...link,
+          hasNotification: link.id === '000-application-infos' && shouldUpdateStrapi,
+        })),
+      },
+      {
+        id: 'permissions',
+        intlLabel: { id: 'Settings.permissions', defaultMessage: 'Administration Panel' },
+        links: adminLinks,
+      },
+      ...Object.values(otherSections),
+    ]);
 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [permissions, noCheck]);
+    getData();
+  }, [adminLinks, globalLinks, permissions, settings, shouldUpdateStrapi]);
 
   return { isLoading, menu };
 };

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

@@ -1,4 +1,5 @@
 import { useContext } from 'react';
+
 import { ThemeToggleContext } from '../../contexts';
 
 const useThemeToggle = () => {

package/admin/src/index.js

@@ -1,5 +1,6 @@
 import { getFetchClient } from '@strapi/helper-plugin';
 import { createRoot } from 'react-dom/client';
+
 import appCustomisations from './app';
 import { Components, Fields, Middlewares, Reducers } from './core/apis';
 // eslint-disable-next-line import/extensions

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

@@ -1,8 +1,9 @@
 import React from 'react';
+
 import { Box, Flex, SkipToContent } from '@strapi/design-system';
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
 import { useIntl } from 'react-intl';
+import styled from 'styled-components';
 
 const FlexBox = styled(Box)`
   flex: 1;

package/admin/src/layouts/UnauthenticatedLayout/LocaleToggle/index.js

@@ -5,8 +5,10 @@
  */
 
 import React from 'react';
+
+import { MenuItem, SimpleMenu } from '@strapi/design-system';
 import { useIntl } from 'react-intl';
-import { SimpleMenu, MenuItem } from '@strapi/design-system';
+
 import useLocalesProvider from '../../../components/LocalesProvider/useLocalesProvider';
 
 const LocaleToggle = () => {

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

@@ -1,7 +1,9 @@
 import React from 'react';
-import styled from 'styled-components';
-import PropTypes from 'prop-types';
+
 import { Box, Flex } from '@strapi/design-system';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+
 import LocaleToggle from './LocaleToggle';
 
 const Wrapper = styled(Box)`

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

@@ -1,22 +1,24 @@
 import React, { useRef, useState } from 'react';
-import styled from 'styled-components';
-import { useIntl } from 'react-intl';
-import { useAppInfo } from '@strapi/helper-plugin';
+
 import {
   Box,
   Button,
   Divider,
   Flex,
   Icon,
-  Portal,
   PopoverPrimitives,
+  Portal,
   Typography,
   VisuallyHidden,
 } from '@strapi/design-system';
+import { useAppInfo } from '@strapi/helper-plugin';
 import { Cross, Message, Play, Question } from '@strapi/icons';
+import { useIntl } from 'react-intl';
+import styled from 'styled-components';
 
 import onboardingPreview from '../../../assets/images/onboarding-preview.png';
-import { VIDEO_LINKS, DOCUMENTATION_LINKS, WATCH_MORE } from './constants';
+
+import { DOCUMENTATION_LINKS, VIDEO_LINKS, WATCH_MORE } from './constants';
 
 // TODO: use new Button props derived from Box props with next DS release
 const HelperButton = styled(Button)`

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

@@ -4,19 +4,21 @@
  *
  */
 
-import React, { Suspense, useEffect, useMemo, lazy } from 'react';
-import { Switch, Route } from 'react-router-dom';
-import { useTracking, LoadingIndicatorPage, useStrapiApp } from '@strapi/helper-plugin';
-import { useDispatch, useSelector } from 'react-redux';
+import React, { lazy, Suspense, useEffect, useMemo } from 'react';
+
+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 { useMenu, useConfigurations } from '../../hooks';
 import { createRoute } from '../../utils';
 import { SET_APP_RUNTIME_STATUS } from '../App/constants';
+
 import Onboarding from './Onboarding';
 
 const CM = lazy(() =>

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

@@ -1 +1,3 @@
 export const SET_APP_RUNTIME_STATUS = 'StrapiAdmin/APP/SET_APP_RUNTIME_STATUS';
+
+export const ROUTES_CE = [];

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

@@ -4,33 +4,44 @@
  *
  */
 
-import React, { useEffect, useState, useMemo, lazy, Suspense } from 'react';
-import { Switch, Route } from 'react-router-dom';
+import React, { lazy, Suspense, useEffect, useMemo, useState } from 'react';
+
+import { SkipToContent } from '@strapi/design-system';
 import {
-  LoadingIndicatorPage,
   auth,
-  useNotification,
-  TrackingProvider,
+  LoadingIndicatorPage,
   prefixFileUrlWithBackendUrl,
+  TrackingProvider,
   useAppInfo,
   useFetchClient,
+  useNotification,
 } from '@strapi/helper-plugin';
-import { SkipToContent } from '@strapi/design-system';
 import { useIntl } from 'react-intl';
+import { Route, Switch } from 'react-router-dom';
+
 import PrivateRoute from '../../components/PrivateRoute';
+import { useConfigurations } from '../../hooks';
+import { useEnterprise } from '../../hooks/useEnterprise';
 import { createRoute, makeUniqueRoutes } from '../../utils';
 import AuthPage from '../AuthPage';
 import NotFoundPage from '../NotFoundPage';
 import UseCasePage from '../UseCasePage';
+
+import { ROUTES_CE } from './constants';
 import { getUID } from './utils';
-import routes from './utils/routes';
-import { useConfigurations } from '../../hooks';
 
 const AuthenticatedApp = lazy(() =>
   import(/* webpackChunkName: "Admin-authenticatedApp" */ '../../components/AuthenticatedApp')
 );
 
 function App() {
+  const routes = useEnterprise(
+    ROUTES_CE,
+    async () => (await import('../../../../ee/admin/pages/App/constants')).ROUTES_EE,
+    {
+      defaultValue: [],
+    }
+  );
   const toggleNotification = useNotification();
   const { updateProjectSettings } = useConfigurations();
   const { formatMessage } = useIntl();
@@ -45,7 +56,7 @@ function App() {
     return makeUniqueRoutes(
       routes.map(({ to, Component, exact }) => createRoute(Component, to, exact))
     );
-  }, []);
+  }, [routes]);
 
   const [telemetryProperties, setTelemetryProperties] = useState(null);
 

package/admin/src/pages/App/reducer.js

@@ -1,4 +1,5 @@
 import produce from 'immer';
+
 import { SET_APP_RUNTIME_STATUS } from './constants';
 
 const initialState = {

package/admin/src/pages/App/utils/index.js

@@ -1,3 +1,3 @@
 /* eslint-disable import/prefer-default-export */
+
 export { default as getUID } from './unique-identifier';
-export { default as routes } from './routes';

package/admin/src/pages/AuthPage/components/FieldActionWrapper/index.js

@@ -1,5 +1,5 @@
-import styled from 'styled-components';
 import { FieldAction } from '@strapi/design-system';
+import styled from 'styled-components';
 
 const FieldActionWrapper = styled(FieldAction)`
   svg {

package/admin/src/pages/AuthPage/components/ForgotPassword/index.js

@@ -1,14 +1,16 @@
 import React from 'react';
-import { useIntl } from 'react-intl';
-import PropTypes from 'prop-types';
+
+import { Box, Button, Flex, Main, TextInput, Typography } from '@strapi/design-system';
 import { Form, Link } from '@strapi/helper-plugin';
-import { Box, Flex, Main, Button, TextInput, Typography } from '@strapi/design-system';
 import { Formik } from 'formik';
+import PropTypes from 'prop-types';
+import { useIntl } from 'react-intl';
+
+import Logo from '../../../../components/UnauthenticatedLogo';
 import UnauthenticatedLayout, {
   Column,
   LayoutContent,
 } from '../../../../layouts/UnauthenticatedLayout';
-import Logo from '../../../../components/UnauthenticatedLogo';
 
 const ForgotPassword = ({ onSubmit, schema }) => {
   const { formatMessage } = useIntl();

package/admin/src/pages/AuthPage/components/ForgotPasswordSuccess/index.js

@@ -1,12 +1,14 @@
 import React from 'react';
-import { useIntl } from 'react-intl';
+
+import { Box, Flex, Main, Typography } from '@strapi/design-system';
 import { Link } from '@strapi/helper-plugin';
-import { Box, Main, Flex, Typography } from '@strapi/design-system';
+import { useIntl } from 'react-intl';
+
+import Logo from '../../../../components/UnauthenticatedLogo';
 import UnauthenticatedLayout, {
   Column,
   LayoutContent,
 } from '../../../../layouts/UnauthenticatedLayout';
-import Logo from '../../../../components/UnauthenticatedLogo';
 
 const ForgotPasswordSuccess = () => {
   const { formatMessage } = useIntl();