@strapi/admin 4.3.4 → 4.3.7

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

@@ -9,7 +9,7 @@ const initialState = {
 };
 
 const reducer = (state, action) =>
-  produce(state, draftState => {
+  produce(state, (draftState) => {
     switch (action.type) {
       case 'ON_CHANGE': {
         set(draftState.modifiedData, action.keys.split('.'), action.value);

package/admin/src/pages/AuthPage/utils/forms.js

@@ -14,10 +14,7 @@ const forms = {
     fieldsToDisable: [],
     fieldsToOmit: [],
     schema: yup.object().shape({
-      email: yup
-        .string()
-        .email(translatedErrors.email)
-        .required(translatedErrors.required),
+      email: yup.string().email(translatedErrors.email).required(translatedErrors.required),
     }),
     inputsPrefix: '',
   },
@@ -35,10 +32,7 @@ const forms = {
     fieldsToDisable: [],
     fieldsToOmit: ['rememberMe'],
     schema: yup.object().shape({
-      email: yup
-        .string()
-        .email(translatedErrors.email)
-        .required(translatedErrors.required),
+      email: yup.string().email(translatedErrors.email).required(translatedErrors.required),
       password: yup.string().required(translatedErrors.required),
       rememberMe: yup.bool().nullable(),
     }),

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

@@ -16,7 +16,7 @@ const ContentBlocks = () => {
   const { formatMessage } = useIntl();
   const { trackUsage } = useTracking();
 
-  const handleClick = eventName => {
+  const handleClick = (eventName) => {
     trackUsage(eventName);
   };
 

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

@@ -176,7 +176,7 @@ const SocialLinks = () => {
         </Stack>
       </Box>
       <GridGap>
-        {socialLinks.map(socialLink => {
+        {socialLinks.map((socialLink) => {
           return (
             <GridItem col={6} s={12} key={socialLink.name}>
               <LinkCustom

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

@@ -39,14 +39,14 @@ const HomePage = () => {
     !isGuidedTourCompleted(guidedTourState) && isGuidedTourVisible && !isSkipped;
 
   const { push } = useHistory();
-  const handleClick = e => {
+  const handleClick = (e) => {
     e.preventDefault();
 
     push('/plugins/content-type-builder/content-types/create-content-type');
   };
 
   const hasAlreadyCreatedContentTypes = useMemo(() => {
-    const filterContentTypes = contentTypes => contentTypes.filter(c => c.isDisplayed);
+    const filterContentTypes = (contentTypes) => contentTypes.filter((c) => c.isDisplayed);
 
     return (
       filterContentTypes(collectionTypes).length > 1 || filterContentTypes(singleTypes).length > 0
@@ -60,7 +60,7 @@ const HomePage = () => {
   return (
     <Layout>
       <FormattedMessage id="HomePage.helmet.title" defaultMessage="Homepage">
-        {title => <Helmet title={title[0]} />}
+        {(title) => <Helmet title={title[0]} />}
       </FormattedMessage>
       <Main>
         <LogoContainer>

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

@@ -55,7 +55,7 @@ const Plugins = () => {
           })}
         />
         <ContentLayout>
-          <Table colCount={2} rowCount={data?.plugins.length + 1}>
+          <Table colCount={2} rowCount={data?.plugins?.length ?? 0 + 1}>
             <Thead>
               <Tr>
                 <Th>

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

@@ -12,13 +12,13 @@ const NpmPackagesGrid = ({
 }) => {
   // Check if an individual package is in the dependencies
   const isAlreadyInstalled = useCallback(
-    npmPackageName => installedPackageNames.includes(npmPackageName),
+    (npmPackageName) => installedPackageNames.includes(npmPackageName),
     [installedPackageNames]
   );
 
   return (
     <Grid gap={4}>
-      {npmPackages.map(npmPackage => (
+      {npmPackages.map((npmPackage) => (
         <GridItem col={4} s={6} xs={12} style={{ height: '100%' }} key={npmPackage.id}>
           <NpmPackageCard
             npmPackage={npmPackage}

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 {
@@ -114,7 +128,7 @@ const ApiTokenListView = () => {
             <LinkButton
               data-testid="create-api-token-button"
               startIcon={<Plus />}
-              size="L"
+              size="S"
               onClick={() => trackUsage('willAddTokenFromList')}
               to="/settings/api-tokens/create"
             >
@@ -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' },