@strapi/admin 4.3.2 → 4.3.5

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

@@ -72,15 +72,11 @@ const MarketPlacePage = () => {
     );
   };
 
-  const {
-    status: marketplacePluginsStatus,
-    data: marketplacePluginsResponse,
-  } = useFetchMarketplacePlugins(notifyMarketplaceLoad);
+  const { status: marketplacePluginsStatus, data: marketplacePluginsResponse } =
+    useFetchMarketplacePlugins(notifyMarketplaceLoad);
 
-  const {
-    status: marketplaceProvidersStatus,
-    data: marketplaceProvidersResponse,
-  } = useFetchMarketplaceProviders(notifyMarketplaceLoad);
+  const { status: marketplaceProvidersStatus, data: marketplaceProvidersResponse } =
+    useFetchMarketplaceProviders(notifyMarketplaceLoad);
 
   const isLoading = [marketplacePluginsStatus, marketplaceProvidersStatus].includes('loading');
 
@@ -172,7 +168,7 @@ const MarketPlacePage = () => {
     { target: searchQuery }
   );
 
-  const handleTabChange = selected => {
+  const handleTabChange = (selected) => {
     const packageType = selected === 0 ? 'plugin' : 'provider';
     setNpmPackageType(packageType);
   };
@@ -196,7 +192,7 @@ const MarketPlacePage = () => {
               name="searchbar"
               onClear={() => setSearchQuery('')}
               value={searchQuery}
-              onChange={e => setSearchQuery(e.target.value)}
+              onChange={(e) => setSearchQuery(e.target.value)}
               clearLabel={formatMessage({
                 id: 'admin.pages.MarketPlacePage.search.clear',
                 defaultMessage: 'Clear the search',

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

@@ -73,7 +73,7 @@ const ProfilePage = () => {
   useFocusWhenNavigate();
 
   const { status, data } = useQuery('user', () => fetchUser(), {
-    onSuccess: () => {
+    onSuccess() {
       notifyStatus(
         formatMessage({
           id: 'Settings.profile.form.notify.data.loaded',
@@ -81,7 +81,7 @@ const ProfilePage = () => {
         })
       );
     },
-    onError: () => {
+    onError() {
       toggleNotification({
         type: 'warning',
         message: { id: 'notification.error', defaultMessage: 'An error occured' },
@@ -91,8 +91,8 @@ const ProfilePage = () => {
 
   const isLoading = status !== 'success';
 
-  const submitMutation = useMutation(body => putUser(body), {
-    onSuccess: async data => {
+  const submitMutation = useMutation((body) => putUser(body), {
+    async onSuccess(data) {
       await queryClient.invalidateQueries('user');
 
       auth.setUserInfo(
@@ -109,7 +109,7 @@ const ProfilePage = () => {
         message: { id: 'notification.success.saved', defaultMessage: 'Saved' },
       });
     },
-    onSettled: () => {
+    onSettled() {
       unlockApp();
     },
     refetchActive: true,
@@ -124,7 +124,7 @@ const ProfilePage = () => {
     submitMutation.mutate(
       { ...body, username },
       {
-        onError: error => {
+        onError(error) {
           const res = error?.response?.data;
 
           if (res?.data) {
@@ -174,7 +174,7 @@ const ProfilePage = () => {
   }
 
   const themesToDisplay = Object.keys(allApplicationThemes).filter(
-    themeName => allApplicationThemes[themeName]
+    (themeName) => allApplicationThemes[themeName]
   );
 
   return (
@@ -315,9 +315,9 @@ const ProfilePage = () => {
                               type={currentPasswordShown ? 'text' : 'password'}
                               endAction={
                                 <FieldActionWrapper
-                                  onClick={e => {
+                                  onClick={(e) => {
                                     e.stopPropagation();
-                                    setCurrentPasswordShown(prev => !prev);
+                                    setCurrentPasswordShown((prev) => !prev);
                                   }}
                                   label={formatMessage(
                                     currentPasswordShown
@@ -360,9 +360,9 @@ const ProfilePage = () => {
                               autoComplete="new-password"
                               endAction={
                                 <FieldActionWrapper
-                                  onClick={e => {
+                                  onClick={(e) => {
                                     e.stopPropagation();
-                                    setPasswordShown(prev => !prev);
+                                    setPasswordShown((prev) => !prev);
                                   }}
                                   label={formatMessage(
                                     passwordShown
@@ -402,9 +402,9 @@ const ProfilePage = () => {
                               autoComplete="new-password"
                               endAction={
                                 <FieldActionWrapper
-                                  onClick={e => {
+                                  onClick={(e) => {
                                     e.stopPropagation();
-                                    setPasswordConfirmShown(prev => !prev);
+                                    setPasswordConfirmShown((prev) => !prev);
                                   }}
                                   label={formatMessage(
                                     passwordConfirmShown
@@ -446,8 +446,7 @@ const ProfilePage = () => {
                           <Typography>
                             {formatMessage(
                               {
-                                id:
-                                  'Settings.profile.form.section.experience.interfaceLanguageHelp',
+                                id: 'Settings.profile.form.section.experience.interfaceLanguageHelp',
                                 defaultMessage:
                                   'Preference changes will apply only to you. More information is available {here}.',
                               },
@@ -480,8 +479,7 @@ const ProfilePage = () => {
                                 defaultMessage: 'Select',
                               })}
                               hint={formatMessage({
-                                id:
-                                  'Settings.profile.form.section.experience.interfaceLanguage.hint',
+                                id: 'Settings.profile.form.section.experience.interfaceLanguage.hint',
                                 defaultMessage:
                                   'This will only display your own interface in the chosen language.',
                               })}
@@ -495,13 +493,13 @@ const ProfilePage = () => {
                                 defaultMessage: 'Clear the interface language selected',
                               })}
                               value={values.preferedLanguage}
-                              onChange={e => {
+                              onChange={(e) => {
                                 handleChange({
                                   target: { name: 'preferedLanguage', value: e },
                                 });
                               }}
                             >
-                              {Object.keys(localeNames).map(language => {
+                              {Object.keys(localeNames).map((language) => {
                                 const langName = localeNames[language];
 
                                 return (
@@ -527,18 +525,17 @@ const ProfilePage = () => {
                                 defaultMessage: 'Displays your interface in the chosen mode.',
                               })}
                               value={values.currentTheme}
-                              onChange={e => {
+                              onChange={(e) => {
                                 handleChange({
                                   target: { name: 'currentTheme', value: e },
                                 });
                               }}
                             >
-                              {themesToDisplay.map(theme => (
+                              {themesToDisplay.map((theme) => (
                                 <Option value={theme} key={theme}>
                                   {formatMessage(
                                     {
-                                      id:
-                                        'Settings.profile.form.section.experience.mode.option-label',
+                                      id: 'Settings.profile.form.section.experience.mode.option-label',
                                       defaultMessage: '{name} mode',
                                     },
                                     {

package/admin/src/pages/ProfilePage/utils/api.js

@@ -7,7 +7,7 @@ const fetchUser = async () => {
   return data.data;
 };
 
-const putUser = async body => {
+const putUser = async (body) => {
   const dataToSend = omit(body, ['confirmPassword', 'currentTheme']);
   const { data } = await axiosInstance.put('/admin/users/me', dataToSend);
 

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

@@ -16,11 +16,11 @@ const SettingsNav = ({ menu }) => {
 
   const filteredMenu = getSectionsToDisplay(menu);
 
-  const sections = filteredMenu.map(section => {
+  const sections = filteredMenu.map((section) => {
     return {
       ...section,
       title: section.intlLabel,
-      links: section.links.map(link => {
+      links: section.links.map((link) => {
         return {
           ...link,
           title: link.intlLabel,
@@ -39,9 +39,9 @@ const SettingsNav = ({ menu }) => {
     <SubNav ariaLabel={label}>
       <SubNavHeader label={label} />
       <SubNavSections>
-        {sections.map(section => (
+        {sections.map((section) => (
           <SubNavSection key={section.id} label={formatMessage(section.intlLabel)}>
-            {section.links.map(link => (
+            {section.links.map((link) => (
               <SubNavLink as={NavLink} withBullet={link.hasNotification} to={link.to} key={link.id}>
                 {formatMessage(link.intlLabel)}
               </SubNavLink>

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

@@ -68,7 +68,7 @@ const ApiTokenCreateView = () => {
     },
     {
       enabled: !isCreating && !apiToken,
-      onError: () => {
+      onError() {
         toggleNotification({
           type: 'warning',
           message: { id: 'notification.error', defaultMessage: 'An error occured' },
@@ -255,7 +255,7 @@ const ApiTokenCreateView = () => {
                                   )
                                 : null
                             }
-                            onChange={value => {
+                            onChange={(value) => {
                               handleChange({ target: { name: 'type', value } });
                             }}
                           >

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

@@ -1,4 +1,8 @@
 import React from 'react';
+import { useIntl } from 'react-intl';
+import PropTypes from 'prop-types';
+import { useHistory } from 'react-router-dom';
+
 import { Typography } from '@strapi/design-system/Typography';
 import { Tbody, Tr, Td } from '@strapi/design-system/Table';
 import { Flex } from '@strapi/design-system/Flex';
@@ -9,9 +13,7 @@ import {
   pxToRem,
   useTracking,
 } from '@strapi/helper-plugin';
-import { useIntl } from 'react-intl';
-import PropTypes from 'prop-types';
-import { useHistory } from 'react-router-dom';
+
 import DeleteButton from './DeleteButton';
 import UpdateButton from './UpdateButton';
 
@@ -33,12 +35,12 @@ const TableRows = ({ canDelete, canUpdate, onClickDelete, withBulkActions, rows
 
   return (
     <Tbody>
-      {apiTokens.map(apiToken => {
+      {apiTokens.map((apiToken) => {
         return (
           <Tr
             key={apiToken.id}
             {...onRowClick({
-              fn: () => {
+              fn() {
                 trackUsage('willEditTokenFromList');
                 push(`${pathname}/${apiToken.id}`);
               },
@@ -92,7 +94,7 @@ const TableRows = ({ canDelete, canUpdate, onClickDelete, withBulkActions, rows
 TableRows.defaultProps = {
   canDelete: false,
   canUpdate: false,
-  onClickDelete: () => {},
+  onClickDelete() {},
   rows: [],
   withBulkActions: false,
 };

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

@@ -1,5 +1,9 @@
 import React, { useEffect, useRef } from 'react';
 import { useIntl } from 'react-intl';
+import { useQuery, useMutation, useQueryClient } from 'react-query';
+import { useHistory } from 'react-router-dom';
+import qs from 'qs';
+
 import {
   SettingsPageTitle,
   useFocusWhenNavigate,
@@ -16,9 +20,7 @@ import { HeaderLayout, ContentLayout } from '@strapi/design-system/Layout';
 import { Main } from '@strapi/design-system/Main';
 import { Button } from '@strapi/design-system/Button';
 import Plus from '@strapi/icons/Plus';
-import { useQuery, useMutation, useQueryClient } from 'react-query';
-import { useHistory } from 'react-router-dom';
-import qs from 'qs';
+
 import { axiosInstance } from '../../../../../core/utils';
 import adminPermissions from '../../../../../permissions';
 import tableHeaders from './utils/tableHeaders';
@@ -47,7 +49,19 @@ const ApiTokenListView = () => {
     push({ search: qs.stringify({ sort: 'name:ASC' }, { encode: false }) });
   }, [push]);
 
-  const { data: apiTokens, status, isFetching } = useQuery(
+  const headers = tableHeaders.map((header) => ({
+    ...header,
+    metadatas: {
+      ...header.metadatas,
+      label: formatMessage(header.metadatas.label),
+    },
+  }));
+
+  const {
+    data: apiTokens,
+    status,
+    isFetching,
+  } = useQuery(
     ['api-tokens'],
     async () => {
       trackUsage('willAccessTokenList');
@@ -61,7 +75,7 @@ const ApiTokenListView = () => {
     },
     {
       enabled: canRead,
-      onError: () => {
+      onError() {
         toggleNotification({
           type: 'warning',
           message: { id: 'notification.error', defaultMessage: 'An error occured' },
@@ -75,15 +89,15 @@ const ApiTokenListView = () => {
     ((status !== 'success' && status !== 'error') || (status === 'success' && isFetching));
 
   const deleteMutation = useMutation(
-    async id => {
+    async (id) => {
       await axiosInstance.delete(`/admin/api-tokens/${id}`);
     },
     {
-      onSuccess: async () => {
+      async onSuccess() {
         await queryClient.invalidateQueries(['api-tokens']);
         trackUsage('didDeleteToken');
       },
-      onError: err => {
+      onError(err) {
         if (err?.response?.data?.data) {
           toggleNotification({ type: 'warning', message: err.response.data.data });
         } else {
@@ -123,21 +137,19 @@ const ApiTokenListView = () => {
                 defaultMessage: 'Create new API Token',
               })}
             </LinkButton>
-          ) : (
-            undefined
-          )
+          ) : undefined
         }
       />
       <ContentLayout>
         {!canRead && <NoPermissions />}
         {shouldDisplayDynamicTable && (
           <DynamicTable
-            headers={tableHeaders}
+            headers={headers}
             contentType="api-tokens"
             rows={apiTokens}
             withBulkActions={canDelete || canUpdate}
             isLoading={isLoading}
-            onConfirmDelete={id => deleteMutation.mutateAsync(id)}
+            onConfirmDelete={(id) => deleteMutation.mutateAsync(id)}
           >
             <TableRows
               canDelete={canDelete}

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

@@ -3,7 +3,10 @@ const tableHeaders = [
     name: 'name',
     key: 'name',
     metadatas: {
-      label: 'Name',
+      label: {
+        id: 'Settings.apiTokens.ListView.headers.name',
+        defaultMessage: 'Name',
+      },
       sortable: true,
     },
   },
@@ -11,7 +14,10 @@ const tableHeaders = [
     name: 'description',
     key: 'description',
     metadatas: {
-      label: 'Description',
+      label: {
+        id: 'Settings.apiTokens.ListView.headers.description',
+        defaultMessage: 'Description',
+      },
       sortable: false,
     },
   },
@@ -19,7 +25,10 @@ const tableHeaders = [
     name: 'type',
     key: 'type',
     metadatas: {
-      label: 'Token type',
+      label: {
+        id: 'Settings.apiTokens.ListView.headers.type',
+        defaultMessage: 'Token type',
+      },
       sortable: false,
     },
   },
@@ -27,7 +36,10 @@ const tableHeaders = [
     name: 'createdAt',
     key: 'createdAt',
     metadatas: {
-      label: 'Created at',
+      label: {
+        id: 'Settings.apiTokens.ListView.headers.createdAt',
+        defaultMessage: 'Created at',
+      },
       sortable: false,
     },
   },

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

@@ -20,7 +20,7 @@ const Form = forwardRef(({ projectSettingsStored }, ref) => {
     init(initialState, projectSettingsStored)
   );
 
-  const handleChangeMenuLogo = asset => {
+  const handleChangeMenuLogo = (asset) => {
     dispatch({
       type: 'SET_CUSTOM_MENU_LOGO',
       value: asset,

package/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/components/Form/reducer.js

@@ -18,7 +18,7 @@ const initialState = {
 };
 
 const reducer = (state = initialState, action) =>
-  produce(state, draftState => {
+  produce(state, (draftState) => {
     switch (action.type) {
       case 'SET_CUSTOM_MENU_LOGO': {
         draftState.menuLogo.display = action.value;

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

@@ -16,7 +16,7 @@ const LogoInput = ({ customLogo, defaultLogo, onChangeLogo, onResetMenuLogo }) =
   const { Component, next, prev, modalTitle } = stepper[currentStep] || {};
   const { formatMessage } = useIntl();
 
-  const goTo = to => {
+  const goTo = (to) => {
     dispatch({
       type: 'GO_TO',
       to,

package/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/components/LogoInput/reducer.js

@@ -12,7 +12,7 @@ const initialState = {
 };
 
 const reducer = (state = initialState, action) =>
-  produce(state, draftState => {
+  produce(state, (draftState) => {
     switch (action.type) {
       case 'GO_TO': {
         draftState.currentStep = action.to;

package/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/components/LogoModalStepper/FromComputerForm.js

@@ -33,7 +33,7 @@ const FromComputerForm = ({ setLocalImage, goTo, next, onClose }) => {
   const handleDragEnter = () => setDragOver(true);
   const handleDragLeave = () => setDragOver(false);
 
-  const handleClick = e => {
+  const handleClick = (e) => {
     e.preventDefault();
     inputRef.current.click();
   };

package/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/components/LogoModalStepper/FromUrlForm.js

@@ -14,7 +14,7 @@ const FromUrlForm = ({ goTo, next, onClose, setLocalImage }) => {
   const [logoUrl, setLogoUrl] = useState('');
   const [error, setError] = useState(null);
 
-  const handleChange = e => {
+  const handleChange = (e) => {
     setLogoUrl(e.target.value);
   };
 
@@ -36,7 +36,7 @@ const FromUrlForm = ({ goTo, next, onClose, setLocalImage }) => {
 
   return (
     <form
-      onSubmit={e => {
+      onSubmit={(e) => {
         e.preventDefault();
         handleSubmit();
       }}

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

@@ -18,7 +18,7 @@ const LogoModalStepper = ({
   const [{ localImage }, dispatch] = useReducer(reducer, initialState);
   const { formatMessage } = useIntl();
 
-  const setLocalImage = asset => {
+  const setLocalImage = (asset) => {
     dispatch({
       type: 'SET_LOCAL_IMAGE',
       value: asset,

package/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/components/LogoModalStepper/reducer.js

@@ -12,7 +12,7 @@ const initialState = {
 };
 
 const reducer = (state = initialState, action) =>
-  produce(state, draftState => {
+  produce(state, (draftState) => {
     switch (action.type) {
       case 'SET_LOCAL_IMAGE': {
         draftState.localImage = action.value;

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

@@ -43,8 +43,8 @@ const ApplicationInfosPage = () => {
     ? 'app.components.UpgradePlanModal.text-ce'
     : 'app.components.UpgradePlanModal.text-ee';
 
-  const submitMutation = useMutation(body => postProjectSettings(body), {
-    onSuccess: async ({ menuLogo }) => {
+  const submitMutation = useMutation((body) => postProjectSettings(body), {
+    async onSuccess({ menuLogo }) {
       await queryClient.invalidateQueries('project-settings', { refetchActive: true });
       updateProjectSettings({ menuLogo: menuLogo?.url });
     },
@@ -55,14 +55,14 @@ const ApplicationInfosPage = () => {
     const formData = getFormData(inputValues);
 
     submitMutation.mutate(formData, {
-      onSuccess: () => {
+      onSuccess() {
         const { menuLogo } = inputValues;
 
         if (menuLogo.rawFile) {
           trackUsage('didChangeLogo');
         }
       },
-      onError: () => {
+      onError() {
         toggleNotification({
           type: 'warning',
           message: { id: 'notification.error', defaultMessage: 'An error occurred' },

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

@@ -7,7 +7,7 @@ const fetchProjectSettings = async () => {
   return prefixAllUrls(data);
 };
 
-const postProjectSettings = async body => {
+const postProjectSettings = async (body) => {
   const { data } = await axiosInstance.post('/admin/project-settings', body);
 
   return prefixAllUrls(data);

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

@@ -1,4 +1,4 @@
-const getFormData = data => {
+const getFormData = (data) => {
   const formData = new FormData();
 
   Object.entries(data).forEach(([key, value]) => {

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

@@ -11,12 +11,12 @@ const FILE_SIZING_ERROR_MESSAGE = {
     'The file uploaded is too large (max dimension: {dimension}x{dimension}, max file size: {size}KB)',
 };
 
-const getFileDimensions = file => {
-  return new Promise(resolve => {
+const getFileDimensions = (file) => {
+  return new Promise((resolve) => {
     const reader = new FileReader();
     reader.onload = () => {
       const img = new Image();
-      img.onload = function() {
+      img.onload = function () {
         resolve({ width: img.width, height: img.height });
       };
       img.src = reader.result;
@@ -37,7 +37,7 @@ const rawFileToAsset = (rawFile, fileDimensions) => {
   };
 };
 
-export const parseFileMetadatas = async file => {
+export const parseFileMetadatas = async (file) => {
   let error;
 
   const isFormatAuthorized = ACCEPTED_FORMAT.includes(file.type);

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

@@ -1,7 +1,7 @@
 import transform from 'lodash/transform';
 import { prefixFileUrlWithBackendUrl } from '@strapi/helper-plugin';
 
-const prefixAllUrls = data =>
+const prefixAllUrls = (data) =>
   transform(
     data,
     (result, value, key) => {

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

@@ -1,6 +1,6 @@
 import axios from 'axios';
 
-const urlToFile = async url => {
+const urlToFile = async (url) => {
   try {
     const res = await axios.get(url, { responseType: 'blob', timeout: 8000 });
     const loadedFile = new File([res.data], res.config.url, {

package/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/ConditionsModal/ActionRow/index.js

@@ -28,7 +28,7 @@ const ActionRow = ({
     const [label, children] = curr;
     const obj = {
       label: upperFirst(label),
-      children: children.map(child => ({
+      children: children.map((child) => ({
         label: child.displayName,
         value: child.id,
       })),
@@ -39,7 +39,7 @@ const ActionRow = ({
 
   // Output: ['value1', 'value2']
   const values = Object.values(value)
-    .map(x =>
+    .map((x) =>
       Object.entries(x)
         .filter(([, value]) => value)
         .map(([key]) => key)
@@ -47,7 +47,7 @@ const ActionRow = ({
     .flat();
 
   // ! Only expects arrayOfOpt to be [['default', obj]] - might break in future changes
-  const handleChange = val => {
+  const handleChange = (val) => {
     const [[, values]] = arrayOfOptionsGroupedByCategory;
     const formattedValues = values.reduce(
       (acc, curr) => ({ [curr.id]: val.includes(curr.id), ...acc }),
@@ -83,7 +83,7 @@ const ActionRow = ({
       <Box style={{ maxWidth: 430, width: '100%' }}>
         <MultiSelectNested
           id={name}
-          customizeContent={values => `${values.length} currently selected`}
+          customizeContent={(values) => `${values.length} currently selected`}
           onChange={handleChange}
           value={values}
           options={options}

package/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/ConditionsModal/index.js

@@ -41,7 +41,7 @@ const ConditionsModal = ({ actions, headerBreadCrumbs, isFormDisabled, onClosed,
 
   const handleChange = (name, values) => {
     setState(
-      produce(draft => {
+      produce((draft) => {
         if (!draft[name]) {
           draft[name] = {};
         }
@@ -76,7 +76,7 @@ const ConditionsModal = ({ actions, headerBreadCrumbs, isFormDisabled, onClosed,
     <ModalLayout labelledBy="condition-modal-breadcrumbs" onClose={onClosed}>
       <ModalHeader>
         <Breadcrumbs id="condition-modal-breadcrumbs" label={headerBreadCrumbs.join(', ')}>
-          {headerBreadCrumbs.map(label => (
+          {headerBreadCrumbs.map((label) => (
             <Crumb key={label}>
               {upperFirst(
                 formatMessage({