@strapi/admin 4.11.2 → 4.11.4

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

@@ -16,10 +16,13 @@ import {
   useFetchClient,
   useNotification,
 } from '@strapi/helper-plugin';
+import merge from 'lodash/merge';
 import { useIntl } from 'react-intl';
+import { useDispatch } from 'react-redux';
 import { Route, Switch } from 'react-router-dom';
 
 import PrivateRoute from '../../components/PrivateRoute';
+import { ADMIN_PERMISSIONS_CE } from '../../constants';
 import { useConfigurations } from '../../hooks';
 import { useEnterprise } from '../../hooks/useEnterprise';
 import { createRoute, makeUniqueRoutes } from '../../utils';
@@ -27,7 +30,7 @@ import AuthPage from '../AuthPage';
 import NotFoundPage from '../NotFoundPage';
 import UseCasePage from '../UseCasePage';
 
-import { ROUTES_CE } from './constants';
+import { ROUTES_CE, SET_ADMIN_PERMISSIONS } from './constants';
 import { getUID } from './utils';
 
 const AuthenticatedApp = lazy(() =>
@@ -35,6 +38,14 @@ const AuthenticatedApp = lazy(() =>
 );
 
 function App() {
+  const adminPermissions = useEnterprise(ADMIN_PERMISSIONS_CE, async () => (await import('../../../../ee/admin/constants')).ADMIN_PERMISSIONS_EE, {
+    combine(cePermissions, eePermissions) {
+      // the `settings` NS e.g. are deep nested objects, that need a deep merge
+      return merge({}, cePermissions, eePermissions);
+    },
+
+    defaultValue: ADMIN_PERMISSIONS_CE,
+  })
   const routes = useEnterprise(
     ROUTES_CE,
     async () => (await import('../../../../ee/admin/pages/App/constants')).ROUTES_EE,
@@ -49,6 +60,7 @@ function App() {
     isLoading: true,
     hasAdmin: false,
   });
+  const dispatch = useDispatch();
   const appInfo = useAppInfo();
   const { get, post } = useFetchClient();
 
@@ -60,6 +72,10 @@ function App() {
 
   const [telemetryProperties, setTelemetryProperties] = useState(null);
 
+  useEffect(() => {
+    dispatch({ type: SET_ADMIN_PERMISSIONS, payload: adminPermissions });
+  }, [adminPermissions, dispatch]);
+
   useEffect(() => {
     const currentToken = auth.getToken();
 
@@ -110,14 +126,19 @@ function App() {
           setTelemetryProperties(properties);
 
           try {
+            const event = 'didInitializeAdministration';
             await post('https://analytics.strapi.io/api/v2/track', {
               // This event is anonymous
-              event: 'didInitializeAdministration',
+              event,
               userId: '',
               deviceId,
               eventPropeties: {},
               userProperties: { environment: appInfo.currentEnvironment },
               groupProperties: { ...properties, projectId: uuid },
+            }, {
+              headers: {
+                'X-Strapi-Event': event,
+              }
             });
           } catch (e) {
             // Silent.

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

@@ -1,8 +1,9 @@
 import produce from 'immer';
 
-import { SET_APP_RUNTIME_STATUS } from './constants';
+import { SET_APP_RUNTIME_STATUS, SET_ADMIN_PERMISSIONS } from './constants';
 
 const initialState = {
+  permissions: {},
   status: 'init',
 };
 
@@ -14,6 +15,12 @@ const reducer = (state = initialState, action) =>
         draftState.status = 'runtime';
         break;
       }
+
+      case SET_ADMIN_PERMISSIONS: {
+        draftState.permissions = action.payload;
+        break;
+      }
+
       default:
         return draftState;
     }

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

@@ -0,0 +1,12 @@
+import { createSelector } from 'reselect';
+
+import { initialState } from './reducer';
+
+const selectAppDomain = () => (state) => {
+  return state.admin_app || initialState;
+};
+
+export const selectAdminPermissions = createSelector(
+  selectAppDomain(),
+  (state) => state.permissions
+);

package/admin/src/pages/AuthPage/{utils/forms.js → constants.js}

@@ -2,13 +2,13 @@ import { translatedErrors } from '@strapi/helper-plugin';
 import Login from 'ee_else_ce/pages/AuthPage/components/Login';
 import * as yup from 'yup';
 
-import ForgotPassword from '../components/ForgotPassword';
-import ForgotPasswordSuccess from '../components/ForgotPasswordSuccess';
-import Oops from '../components/Oops';
-import Register from '../components/Register';
-import ResetPassword from '../components/ResetPassword';
+import ForgotPassword from './components/ForgotPassword';
+import ForgotPasswordSuccess from './components/ForgotPasswordSuccess';
+import Oops from './components/Oops';
+import Register from './components/Register';
+import ResetPassword from './components/ResetPassword';
 
-const forms = {
+export const FORMS = {
   'forgot-password': {
     Component: ForgotPassword,
     endPoint: 'forgot-password',
@@ -119,5 +119,3 @@ const forms = {
     }),
   },
 };
-
-export default forms;

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

@@ -2,7 +2,6 @@ import React, { useEffect, useReducer } from 'react';
 
 import { auth, useFetchClient, useGuidedTour, useQuery, useTracking } from '@strapi/helper-plugin';
 import axios from 'axios';
-import forms from 'ee_else_ce/pages/AuthPage/utils/forms';
 import camelCase from 'lodash/camelCase';
 import get from 'lodash/get';
 import omit from 'lodash/omit';
@@ -11,8 +10,10 @@ 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 { FORMS } from './constants';
 import init from './init';
 import { initialState, reducer } from './reducer';
 
@@ -28,10 +29,19 @@ const AuthPage = ({ hasAdmin, setHasAdmin }) => {
     params: { authType },
   } = useRouteMatch('/auth/:authType');
   const query = useQuery();
-  const { Component, endPoint, fieldsToDisable, fieldsToOmit, inputsPrefix, schema, ...rest } = get(
-    forms,
-    authType,
-    {}
+  const forms = useEnterprise(
+    FORMS,
+    async () => (await import('../../../../ee/admin/pages/AuthPage/constants')).FORMS,
+    {
+      combine(ceForms, eeForms) {
+        return {
+          ...ceForms,
+          ...eeForms,
+        };
+      },
+
+      defaultValue: FORMS,
+    }
   );
   const [{ formErrors, modifiedData, requestError }, dispatch] = useReducer(
     reducer,
@@ -40,6 +50,8 @@ const AuthPage = ({ hasAdmin, setHasAdmin }) => {
   );
   const CancelToken = axios.CancelToken;
   const source = CancelToken.source();
+  const { Component, endPoint, fieldsToDisable, fieldsToOmit, inputsPrefix, schema, ...rest } =
+    forms?.[authType] ?? {};
 
   useEffect(() => {
     // Cancel request on unmount

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

@@ -3,21 +3,24 @@ import React from 'react';
 import { CheckPagePermissions } from '@strapi/helper-plugin';
 import { Helmet } from 'react-helmet';
 import { useIntl } from 'react-intl';
+import { useSelector } from 'react-redux';
 
-import adminPermissions from '../../permissions';
+import { selectAdminPermissions } from '../App/selectors';
 
 import Plugins from './Plugins';
 
 const InstalledPluginsPage = () => {
   const { formatMessage } = useIntl();
-  const title = formatMessage({
-    id: 'global.plugins',
-    defaultMessage: 'Plugins',
-  });
+  const permissions = useSelector(selectAdminPermissions);
 
   return (
-    <CheckPagePermissions permissions={adminPermissions.marketplace.main}>
-      <Helmet title={title} />
+    <CheckPagePermissions permissions={permissions.marketplace.main}>
+      <Helmet
+        title={formatMessage({
+          id: 'global.plugins',
+          defaultMessage: 'Plugins',
+        })}
+      />
       <Plugins />
     </CheckPagePermissions>
   );

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

@@ -23,10 +23,11 @@ import {
 } from '@strapi/helper-plugin';
 import { Helmet } from 'react-helmet';
 import { useIntl } from 'react-intl';
+import { useSelector } from 'react-redux';
 
 import useDebounce from '../../hooks/useDebounce';
 import useNavigatorOnLine from '../../hooks/useNavigatorOnLine';
-import adminPermissions from '../../permissions';
+import { selectAdminPermissions } from '../App/selectors';
 
 import MissingPluginBanner from './components/MissingPluginBanner';
 import NpmPackagesFilters from './components/NpmPackagesFilters';
@@ -249,11 +250,15 @@ const MarketPlacePage = () => {
   );
 };
 
-const ProtectedMarketPlace = () => (
-  <CheckPagePermissions permissions={adminPermissions.marketplace.main}>
-    <MarketPlacePage />
-  </CheckPagePermissions>
-);
+const ProtectedMarketPlace = () => {
+  const permissions = useSelector(selectAdminPermissions);
+
+  return (
+    <CheckPagePermissions permissions={permissions.marketplace.main}>
+      <MarketPlacePage />
+    </CheckPagePermissions>
+  );
+};
 
 export { MarketPlacePage };
 export default ProtectedMarketPlace;

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

@@ -197,13 +197,13 @@ const ProfilePage = () => {
         validationSchema={schema}
         enableReinitialize
       >
-        {({ errors, values, handleChange, isSubmitting }) => {
+        {({ errors, values, handleChange, isSubmitting, dirty }) => {
           return (
             <Form>
               <HeaderLayout
                 title={data.username || getFullName(data.firstname, data.lastname)}
                 primaryAction={
-                  <Button startIcon={<Check />} loading={isSubmitting} type="submit">
+                  <Button startIcon={<Check />} loading={isSubmitting} type="submit" disabled={!dirty}>
                     {formatMessage({ id: 'global.save', defaultMessage: 'Save' })}
                   </Button>
                 }

package/admin/src/pages/SettingsPage/components/Tokens/Table/index.js

@@ -10,6 +10,7 @@ import {
   useTracking,
 } from '@strapi/helper-plugin';
 import PropTypes from 'prop-types';
+import { useIntl } from 'react-intl';
 import { useHistory } from 'react-router-dom';
 
 import DeleteButton from './DeleteButton';
@@ -28,6 +29,7 @@ const Table = ({
   const { canDelete, canUpdate, canRead } = permissions;
   const withBulkActions = canDelete || canUpdate || canRead;
   const [{ query }] = useQueryParams();
+  const { formatMessage } = useIntl();
   const [, sortOrder] = query ? query.sort.split(':') : 'ASC';
   const {
     push,
@@ -83,7 +85,19 @@ const Table = ({
               <Td>
                 {token.lastUsedAt && (
                   <Typography textColor="neutral800">
-                    <RelativeTime timestamp={new Date(token.lastUsedAt)} />
+                    <RelativeTime
+                      timestamp={new Date(token.lastUsedAt)}
+                      customIntervals={[
+                        {
+                          unit: 'hours',
+                          threshold: 1,
+                          text: formatMessage({
+                            id: 'Settings.apiTokens.lastHour',
+                            defaultMessage: 'last hour',
+                          }),
+                        },
+                      ]}
+                    />
                   </Typography>
                 )}
               </Td>

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

@@ -15,11 +15,12 @@ import {
 import { Formik } from 'formik';
 import { useIntl } from 'react-intl';
 import { useQuery } from 'react-query';
+import { useSelector } from 'react-redux';
 import { useHistory, useRouteMatch } from 'react-router-dom';
 
 import { ApiTokenPermissionsContextProvider } from '../../../../../contexts/ApiTokenPermissions';
-import adminPermissions from '../../../../../permissions';
 import { formatAPIErrors } from '../../../../../utils';
+import { selectAdminPermissions } from '../../../../App/selectors';
 import { API_TOKEN_TYPE } from '../../../components/Tokens/constants';
 import FormHead from '../../../components/Tokens/FormHead';
 import TokenBox from '../../../components/Tokens/TokenBox';
@@ -39,6 +40,7 @@ const ApiTokenCreateView = () => {
   const { lockApp, unlockApp } = useOverlayBlocker();
   const toggleNotification = useNotification();
   const history = useHistory();
+  const permissions = useSelector(selectAdminPermissions);
   const [apiToken, setApiToken] = useState(
     history.location.state?.apiToken.accessKey
       ? {
@@ -51,7 +53,7 @@ const ApiTokenCreateView = () => {
   const { setCurrentStep } = useGuidedTour();
   const {
     allowedActions: { canCreate, canUpdate, canRegenerate },
-  } = useRBAC(adminPermissions.settings['api-tokens']);
+  } = useRBAC(permissions.settings['api-tokens']);
   const [state, dispatch] = useReducer(reducer, initialState, (state) => init(state, {}));
   const {
     params: { id },

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

@@ -17,9 +17,10 @@ import { Plus } from '@strapi/icons';
 import qs from 'qs';
 import { useIntl } from 'react-intl';
 import { useMutation, useQuery, useQueryClient } from 'react-query';
+import { useSelector } from 'react-redux';
 import { useHistory } from 'react-router-dom';
 
-import adminPermissions from '../../../../../permissions';
+import { selectAdminPermissions } from '../../../../App/selectors';
 import { API_TOKEN_TYPE } from '../../../components/Tokens/constants';
 import Table from '../../../components/Tokens/Table';
 
@@ -30,9 +31,10 @@ const ApiTokenListView = () => {
   const queryClient = useQueryClient();
   const { formatMessage } = useIntl();
   const toggleNotification = useNotification();
+  const permissions = useSelector(selectAdminPermissions);
   const {
     allowedActions: { canCreate, canDelete, canUpdate, canRead },
-  } = useRBAC(adminPermissions.settings['api-tokens']);
+  } = useRBAC(permissions.settings['api-tokens']);
   const { push } = useHistory();
   const { trackUsage } = useTracking();
   const { startSection } = useGuidedTour();

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

@@ -1,13 +1,16 @@
 import React from 'react';
 
 import { CheckPagePermissions } from '@strapi/helper-plugin';
+import { useSelector } from 'react-redux';
 
-import adminPermissions from '../../../../../permissions';
+import { selectAdminPermissions } from '../../../../App/selectors';
 import EditView from '../EditView';
 
 const ProtectedApiTokenCreateView = () => {
+  const permissions = useSelector(selectAdminPermissions);
+
   return (
-    <CheckPagePermissions permissions={adminPermissions.settings['api-tokens'].create}>
+    <CheckPagePermissions permissions={permissions.settings['api-tokens'].create}>
       <EditView />
     </CheckPagePermissions>
   );

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

@@ -1,13 +1,16 @@
 import React from 'react';
 
 import { CheckPagePermissions } from '@strapi/helper-plugin';
+import { useSelector } from 'react-redux';
 
-import adminPermissions from '../../../../../permissions';
+import { selectAdminPermissions } from '../../../../App/selectors';
 import EditView from '../EditView';
 
 const ProtectedApiTokenCreateView = () => {
+  const permissions = useSelector(selectAdminPermissions);
+
   return (
-    <CheckPagePermissions permissions={adminPermissions.settings['api-tokens'].read}>
+    <CheckPagePermissions permissions={permissions.settings['api-tokens'].read}>
       <EditView />
     </CheckPagePermissions>
   );

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

@@ -1,14 +1,19 @@
 import React from 'react';
 
 import { CheckPagePermissions } from '@strapi/helper-plugin';
+import { useSelector } from 'react-redux';
 
-import adminPermissions from '../../../../../permissions';
+import { selectAdminPermissions } from '../../../../App/selectors';
 import ListView from '../ListView';
 
-const ProtectedApiTokenListView = () => (
-  <CheckPagePermissions permissions={adminPermissions.settings['api-tokens'].main}>
-    <ListView />
-  </CheckPagePermissions>
-);
+const ProtectedApiTokenListView = () => {
+  const permissions = useSelector(selectAdminPermissions);
+
+  return (
+    <CheckPagePermissions permissions={permissions.settings['api-tokens'].main}>
+      <ListView />
+    </CheckPagePermissions>
+  );
+};
 
 export default ProtectedApiTokenListView;