@strapi/admin 4.7.0-exp.3d6a31eb083e9d44afcf98f68c107fb7567e5720 → 4.7.0

package/admin/src/components/Notifications/Notification/index.js

@@ -67,7 +67,14 @@ const Notification = ({ dispatch, notification }) => {
   }
 
   if (title) {
-    alertTitle = typeof title === 'string' ? title : formatMessage(title);
+    alertTitle =
+      typeof title === 'string'
+        ? title
+        : formattedMessage({
+            id: title?.id || title,
+            defaultMessage: title?.defaultMessage || title?.id || title,
+            values: title?.values,
+          });
   }
 
   return (

package/admin/src/hooks/index.js

@@ -10,3 +10,5 @@ export { default as usePermissionsDataManager } from './usePermissionsDataManage
 export { default as useReleaseNotification } from './useReleaseNotification';
 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/useLicenseLimitNotification/index.js

@@ -0,0 +1,5 @@
+const useLicenseLimitNotification = () => {
+  return null;
+};
+
+export default useLicenseLimitNotification;

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

@@ -0,0 +1,3 @@
+const useLicenseLimits = () => {};
+
+export default useLicenseLimits;

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

@@ -10,6 +10,7 @@ import { Helmet } from 'react-helmet';
 import { useHistory } from 'react-router-dom';
 import { LoadingIndicatorPage, useGuidedTour } from '@strapi/helper-plugin';
 import { Layout, Main, Box, Grid, GridItem } from '@strapi/design-system';
+import useLicenseLimitNotification from 'ee_else_ce/hooks/useLicenseLimitNotification';
 import cornerOrnamentPath from './assets/corner-ornament.svg';
 import { useModels } from '../../hooks';
 import isGuidedTourCompleted from '../../components/GuidedTour/utils/isGuidedTourCompleted';
@@ -32,6 +33,7 @@ const HomePage = () => {
   // Temporary until we develop the menu API
   const { collectionTypes, singleTypes, isLoading: isLoadingForModels } = useModels();
   const { guidedTourState, isGuidedTourVisible, isSkipped } = useGuidedTour();
+  useLicenseLimitNotification();
 
   const showGuidedTour =
     !isGuidedTourCompleted(guidedTourState) && isGuidedTourVisible && !isSkipped;

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

@@ -12,7 +12,7 @@ const LifeSpanInput = ({ token, errors, values, onChange, isCreating }) => {
       <Select
         name="lifespan"
         label={formatMessage({
-          id: 'Settings.apiTokens.form.duration',
+          id: 'Settings.tokens.form.duration',
           defaultMessage: 'Token duration',
         })}
         value={values.lifespan !== null ? values.lifespan : '0'}

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

@@ -30,14 +30,14 @@ export const Regenerate = ({ onRegenerate, idToRegenerate, backUrl }) => {
         name="regenerate"
       >
         {formatMessage({
-          id: 'Settings.apiTokens.regenerate',
+          id: 'Settings.tokens.regenerate',
           defaultMessage: 'Regenerate',
         })}
       </Button>
 
       <ConfirmDialog
         bodyText={{
-          id: 'Settings.apiTokens.popUpWarning.message',
+          id: 'Settings.tokens.popUpWarning.message',
           defaultMessage: 'Are you sure you want to regenerate this token?',
         }}
         iconRightButton={<Refresh />}
@@ -46,15 +46,15 @@ export const Regenerate = ({ onRegenerate, idToRegenerate, backUrl }) => {
         onToggleDialog={() => setShowConfirmDialog(false)}
         onConfirm={handleConfirmRegeneration}
         leftButtonText={{
-          id: 'Settings.apiTokens.Button.cancel',
+          id: 'Settings.tokens.Button.cancel',
           defaultMessage: 'Cancel',
         }}
         rightButtonText={{
-          id: 'Settings.apiTokens.Button.regenerate',
+          id: 'Settings.tokens.Button.regenerate',
           defaultMessage: 'Regenerate',
         }}
         title={{
-          id: 'Settings.apiTokens.RegenerateDialog.title',
+          id: 'Settings.tokens.RegenerateDialog.title',
           defaultMessage: 'Regenerate token',
         }}
       />

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

@@ -31,7 +31,7 @@ const Table = ({
     push,
     location: { pathname },
   } = useHistory();
-  const { trackUsage } = useTracking(); // TODO: Track different types of tokens
+  const { trackUsage } = useTracking();
 
   const sortedTokens = tokens.sort((a, b) => {
     const comparison = a.name.localeCompare(b.name);

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

@@ -9,7 +9,7 @@ import { CopyToClipboard } from 'react-copy-to-clipboard';
 const TokenBox = ({ token, tokenType }) => {
   const { formatMessage } = useIntl();
   const toggleNotification = useNotification();
-  const { trackUsage } = useTracking(); // TODO: Track different types of tokens
+  const { trackUsage } = useTracking();
   const trackUsageRef = useRef(trackUsage);
 
   return (

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

@@ -38,21 +38,21 @@ const FormApiTokenContainer = ({
     {
       value: 'read-only',
       label: {
-        id: 'Settings.apiTokens.types.read-only',
+        id: 'Settings.tokens.types.read-only',
         defaultMessage: 'Read-only',
       },
     },
     {
       value: 'full-access',
       label: {
-        id: 'Settings.apiTokens.types.full-access',
+        id: 'Settings.tokens.types.full-access',
         defaultMessage: 'Full access',
       },
     },
     {
       value: 'custom',
       label: {
-        id: 'Settings.apiTokens.types.custom',
+        id: 'Settings.tokens.types.custom',
         defaultMessage: 'Custom',
       },
     },
@@ -107,7 +107,7 @@ const FormApiTokenContainer = ({
               values={values}
               errors={errors}
               label={{
-                id: 'Settings.apiTokens.form.type',
+                id: 'Settings.tokens.form.type',
                 defaultMessage: 'Token type',
               }}
               onChange={(value) => {

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

@@ -30,14 +30,14 @@ export const Regenerate = ({ onRegenerate, idToRegenerate }) => {
         name="regenerate"
       >
         {formatMessage({
-          id: 'Settings.apiTokens.regenerate',
+          id: 'Settings.tokens.regenerate',
           defaultMessage: 'Regenerate',
         })}
       </Button>
 
       <ConfirmDialog
         bodyText={{
-          id: 'Settings.apiTokens.popUpWarning.message',
+          id: 'Settings.tokens.popUpWarning.message',
           defaultMessage: 'Are you sure you want to regenerate this token?',
         }}
         iconRightButton={<Refresh />}
@@ -46,15 +46,15 @@ export const Regenerate = ({ onRegenerate, idToRegenerate }) => {
         onToggleDialog={() => setShowConfirmDialog(false)}
         onConfirm={handleConfirmRegeneration}
         leftButtonText={{
-          id: 'Settings.apiTokens.Button.cancel',
+          id: 'Settings.tokens.Button.cancel',
           defaultMessage: 'Cancel',
         }}
         rightButtonText={{
-          id: 'Settings.apiTokens.Button.regenerate',
+          id: 'Settings.tokens.Button.regenerate',
           defaultMessage: 'Regenerate',
         }}
         title={{
-          id: 'Settings.apiTokens.RegenerateDialog.title',
+          id: 'Settings.tokens.RegenerateDialog.title',
           defaultMessage: 'Regenerate token',
         }}
       />

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

@@ -193,11 +193,11 @@ const ApiTokenCreateView = () => {
         type: 'success',
         message: isCreating
           ? formatMessage({
-              id: 'notification.success.tokencreated',
+              id: 'notification.success.apitokencreated',
               defaultMessage: 'API Token successfully created',
             })
           : formatMessage({
-              id: 'notification.success.tokenedited',
+              id: 'notification.success.apitokenedited',
               defaultMessage: 'API Token successfully edited',
             }),
       });

package/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/components/AdminSeatInfo/index.js

@@ -0,0 +1,5 @@
+const AdminSeatInfo = () => {
+  return null;
+};
+
+export default AdminSeatInfo;

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

@@ -23,6 +23,7 @@ import {
   Typography,
 } from '@strapi/design-system';
 import { ExternalLink, Check } from '@strapi/icons';
+import AdminSeatInfo from 'ee_else_ce/pages/SettingsPage/pages/ApplicationInfosPage/components/AdminSeatInfo';
 
 import adminPermissions from '../../../../permissions';
 import { useConfigurations } from '../../../../hooks';
@@ -195,6 +196,7 @@ const ApplicationInfosPage = () => {
                     </Typography>
                     <Typography as="dd">{appInfos.nodeVersion}</Typography>
                   </GridItem>
+                  <AdminSeatInfo />
                 </Grid>
               </Stack>
               {canRead && data && (

package/admin/src/pages/SettingsPage/pages/TransferTokens/ListView/utils/tableHeaders.js

@@ -4,7 +4,7 @@ const tableHeaders = [
     key: 'name',
     metadatas: {
       label: {
-        id: 'Settings.transferTokens.ListView.headers.name',
+        id: 'Settings.tokens.ListView.headers.name',
         defaultMessage: 'Name',
       },
       sortable: true,
@@ -15,7 +15,7 @@ const tableHeaders = [
     key: 'description',
     metadatas: {
       label: {
-        id: 'Settings.transferTokens.ListView.headers.description',
+        id: 'Settings.tokens.ListView.headers.description',
         defaultMessage: 'Description',
       },
       sortable: false,
@@ -26,7 +26,7 @@ const tableHeaders = [
     key: 'createdAt',
     metadatas: {
       label: {
-        id: 'Settings.transferTokens.ListView.headers.createdAt',
+        id: 'Settings.tokens.ListView.headers.createdAt',
         defaultMessage: 'Created at',
       },
       sortable: false,
@@ -37,7 +37,7 @@ const tableHeaders = [
     key: 'lastUsedAt',
     metadatas: {
       label: {
-        id: 'Settings.transferTokens.ListView.headers.lastUsedAt',
+        id: 'Settings.tokens.ListView.headers.lastUsedAt',
         defaultMessage: 'Last used',
       },
       sortable: false,

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

@@ -47,15 +47,12 @@ const EditPage = ({ canUpdate }) => {
   } = useRouteMatch('/settings/users/:id');
   const { push } = useHistory();
   const { setUserDisplayName } = useAppInfos();
-
   const toggleNotification = useNotification();
   const { lockApp, unlockApp } = useOverlayBlocker();
   useFocusWhenNavigate();
 
   const { status, data } = useQuery(['user', id], () => fetchUser(id), {
     retry: false,
-    keepPreviousData: false,
-    staleTime: 1000 * 20,
     onError(err) {
       const status = err.response.status;
 
@@ -109,7 +106,7 @@ const EditPage = ({ canUpdate }) => {
       actions.setErrors(fieldsErrors);
       toggleNotification({
         type: 'warning',
-        message: get(err, 'response.data.message', 'notification.error'),
+        message: get(err, 'response.data.error.message', 'notification.error'),
       });
     }
 

package/admin/src/pages/SettingsPage/pages/Users/ListPage/CreateAction/index.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import { useIntl } from 'react-intl';
+import PropTypes from 'prop-types';
+import { Button } from '@strapi/design-system';
+import { Envelop } from '@strapi/icons';
+
+const CreateAction = ({ onClick }) => {
+  const { formatMessage } = useIntl();
+
+  return (
+    <Button onClick={onClick} startIcon={<Envelop />} size="S">
+      {formatMessage({
+        id: 'Settings.permissions.users.create',
+        defaultMessage: 'Invite new user',
+      })}
+    </Button>
+  );
+};
+
+CreateAction.propTypes = {
+  onClick: PropTypes.func.isRequired,
+};
+
+export default CreateAction;

package/admin/src/pages/SettingsPage/pages/Users/ListPage/ModalForm/index.js

@@ -49,7 +49,10 @@ const ModalForm = ({ queryName, onToggle }) => {
     {
       async onSuccess({ data }) {
         setRegistrationToken(data.data.registrationToken);
-        await queryClient.invalidateQueries(queryName);
+
+        await queryClient.refetchQueries(queryName);
+        await queryClient.refetchQueries(['ee', 'license-limit-info']);
+
         goNext();
         setIsSubmitting(false);
       },

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

@@ -7,19 +7,20 @@ import {
   useNotification,
   useFocusWhenNavigate,
   NoPermissions,
+  useAPIErrorHandler,
 } from '@strapi/helper-plugin';
 import {
   ActionLayout,
   ContentLayout,
   HeaderLayout,
-  Button,
   Main,
   useNotifyAT,
 } from '@strapi/design-system';
-import { Envelop } from '@strapi/icons';
 import { useLocation } from 'react-router-dom';
 import { useIntl } from 'react-intl';
 import { useMutation, useQuery, useQueryClient } from 'react-query';
+import CreateAction from 'ee_else_ce/pages/SettingsPage/pages/Users/ListPage/CreateAction';
+import useLicenseLimitNotification from 'ee_else_ce/hooks/useLicenseLimitNotification';
 import adminPermissions from '../../../../../permissions';
 import TableRows from './DynamicTable/TableRows';
 import Filters from '../../../components/Filters';
@@ -30,6 +31,7 @@ import displayedFilters from './utils/displayedFilters';
 import tableHeaders from './utils/tableHeaders';
 
 const ListPage = () => {
+  const { formatAPIError } = useAPIErrorHandler();
   const [isModalOpened, setIsModalOpen] = useState(false);
   const {
     allowedActions: { canCreate, canDelete, canRead },
@@ -39,6 +41,7 @@ const ListPage = () => {
   const { formatMessage } = useIntl();
   const { search } = useLocation();
   useFocusWhenNavigate();
+  useLicenseLimitNotification();
   const { notifyStatus } = useNotifyAT();
   const queryName = ['users', search];
 
@@ -69,13 +72,15 @@ const ListPage = () => {
 
   const { status, data, isFetching } = useQuery(queryName, () => fetchData(search, notifyLoad), {
     enabled: canRead,
-    keepPreviousData: true,
     retry: false,
-    staleTime: 1000 * 20,
-    onError() {
+    onError(error) {
       toggleNotification({
         type: 'warning',
-        message: { id: 'notification.error', defaultMessage: 'An error occured' },
+        message: {
+          id: 'notification.error',
+          message: formatAPIError(error),
+          defaultMessage: 'An error occured',
+        },
       });
     },
   });
@@ -86,17 +91,20 @@ const ListPage = () => {
 
   const deleteAllMutation = useMutation((ids) => deleteData(ids), {
     async onSuccess() {
-      await queryClient.invalidateQueries(queryName);
+      await queryClient.refetchQueries(queryName);
+
+      // Toggle enabled/ disabled state on the invite button
+      await queryClient.refetchQueries(['ee', 'license-limit-info']);
     },
-    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: {
+          id: 'notification.error',
+          message: formatAPIError(error),
+          defaultMessage: 'An error occured',
+        },
+      });
     },
   });
 
@@ -104,25 +112,11 @@ const ListPage = () => {
   const isLoading =
     (status !== 'success' && status !== 'error') || (status === 'success' && isFetching);
 
-  const createAction = canCreate ? (
-    <Button
-      data-testid="create-user-button"
-      onClick={handleToggle}
-      startIcon={<Envelop />}
-      size="S"
-    >
-      {formatMessage({
-        id: 'Settings.permissions.users.create',
-        defaultMessage: 'Invite new user',
-      })}
-    </Button>
-  ) : undefined;
-
   return (
     <Main aria-busy={isLoading}>
       <SettingsPageTitle name="Users" />
       <HeaderLayout
-        primaryAction={createAction}
+        primaryAction={canCreate && <CreateAction onClick={handleToggle} />}
         title={title}
         subtitle={formatMessage({
           id: 'Settings.permissions.users.listview.header.subtitle',

package/admin/src/translations/ca.json

@@ -80,16 +80,16 @@
   "Settings.PageTitle": "Configuració - {name}",
   "Settings.apiTokens.addFirstToken": "Afegeix el teu primer token d'API",
   "Settings.apiTokens.addNewToken": "Afegir nou token d'API",
-  "Settings.apiTokens.copy.editMessage": "Per raons de seguretat, només podeu veure el seu token una vegada.",
-  "Settings.apiTokens.copy.editTitle": "Aquest token ja no és accessible.",
-  "Settings.apiTokens.copy.lastWarning": "Assegureu-vos de copiar aquest token, no podreu tornar-lo a veure!",
+  "Settings.tokens.copy.editMessage": "Per raons de seguretat, només podeu veure el seu token una vegada.",
+  "Settings.tokens.copy.editTitle": "Aquest token ja no és accessible.",
+  "Settings.tokens.copy.lastWarning": "Assegureu-vos de copiar aquest token, no podreu tornar-lo a veure!",
   "Settings.apiTokens.create": "Afegir entrada",
   "Settings.apiTokens.description": "Llista de tokens generats per consumir l'API",
   "Settings.apiTokens.emptyStateLayout": "Encara no tens cap contingut...",
-  "Settings.apiTokens.notification.copied": "Token copiat al porta-retalls.",
+  "Settings.tokens.notification.copied": "Token copiat al porta-retalls.",
   "Settings.apiTokens.title": "Tokens d'API",
-  "Settings.apiTokens.types.full-access": "Accés complet",
-  "Settings.apiTokens.types.read-only": "Només lectura",
+  "Settings.tokens.types.full-access": "Accés complet",
+  "Settings.tokens.types.read-only": "Només lectura",
   "Settings.application.Strapi-version": "versió de Strapi",
   "Settings.application.StrapiVersion": "versió de Strapi",
   "Settings.application.description": "Informació global del panell d'administració",

package/admin/src/translations/de.json

@@ -80,16 +80,16 @@
   "Settings.PageTitle": "Einstellungen - {name}",
   "Settings.apiTokens.addFirstToken": "Deinen ersten API-Token hinzufügen",
   "Settings.apiTokens.addNewToken": "Neuen API-Token hinzufügen",
-  "Settings.apiTokens.copy.editMessage": "Aus Sicherheitsgründen kannst du deinen Token nur einmal sehen.",
-  "Settings.apiTokens.copy.editTitle": "Auf diesen Token kann nicht mehr zugegriffen werden.",
-  "Settings.apiTokens.copy.lastWarning": "Stell sicher, dass dieser Token kopiert wurde, da du ihn nicht noch einmal sehen können wirst!",
+  "Settings.tokens.copy.editMessage": "Aus Sicherheitsgründen kannst du deinen Token nur einmal sehen.",
+  "Settings.tokens.copy.editTitle": "Auf diesen Token kann nicht mehr zugegriffen werden.",
+  "Settings.tokens.copy.lastWarning": "Stell sicher, dass dieser Token kopiert wurde, da du ihn nicht noch einmal sehen können wirst!",
   "Settings.apiTokens.create": "Neuen API-Token erstellen",
   "Settings.apiTokens.description": "Liste der generierten Tokens mit Zugriff auf die API",
   "Settings.apiTokens.emptyStateLayout": "Du hast noch keinen Inhalt...",
-  "Settings.apiTokens.notification.copied": "Token wurde in die Zwischenablage kopiert.",
+  "Settings.tokens.notification.copied": "Token wurde in die Zwischenablage kopiert.",
   "Settings.apiTokens.title": "API-Tokens",
-  "Settings.apiTokens.types.full-access": "Voller Zugriff",
-  "Settings.apiTokens.types.read-only": "Nur Lesezugriff",
+  "Settings.tokens.types.full-access": "Voller Zugriff",
+  "Settings.tokens.types.read-only": "Nur Lesezugriff",
   "Settings.application.description": "Globale Informationen über die Administrationsoberfläche",
   "Settings.application.edition-title": "Aktuelle Version",
   "Settings.application.get-help": "Hilfe",

package/admin/src/translations/dk.json

@@ -78,16 +78,16 @@
   "Settings.PageTitle": "Indstillinger - {name}",
   "Settings.apiTokens.addFirstToken": "Tilføj dit første API token",
   "Settings.apiTokens.addNewToken": "Tilføj nyt API token",
-  "Settings.apiTokens.copy.editMessage": "Af sikkerhedsmæssige årsager, kan du kun se dit token én gang.",
-  "Settings.apiTokens.copy.editTitle": "Dette token er ikke længere tilgængeligt.",
-  "Settings.apiTokens.copy.lastWarning": "Kopiér dette token, du kommer ikke til at se det igen!",
+  "Settings.tokens.copy.editMessage": "Af sikkerhedsmæssige årsager, kan du kun se dit token én gang.",
+  "Settings.tokens.copy.editTitle": "Dette token er ikke længere tilgængeligt.",
+  "Settings.tokens.copy.lastWarning": "Kopiér dette token, du kommer ikke til at se det igen!",
   "Settings.apiTokens.create": "Tilføj element",
   "Settings.apiTokens.description": "Liste over genererede tokens til at bruge API'et",
   "Settings.apiTokens.emptyStateLayout": "Du har endnu ikke noget indhold...",
-  "Settings.apiTokens.notification.copied": "Token er kopieret til klippebordet.",
+  "Settings.tokens.notification.copied": "Token er kopieret til klippebordet.",
   "Settings.apiTokens.title": "API Tokens",
-  "Settings.apiTokens.types.full-access": "Fuld adgang",
-  "Settings.apiTokens.types.read-only": "Read-only",
+  "Settings.tokens.types.full-access": "Fuld adgang",
+  "Settings.tokens.types.read-only": "Read-only",
   "Settings.application.description": "Se dit projekts detaljer",
   "Settings.application.edition-title": "NUVÆRENDE PLAN",
   "Settings.application.get-help": "Få hjælp",