@strapi/admin 4.3.4 → 4.4.0-alpha.0

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

@@ -8,7 +8,7 @@ export const initialState = {
 };
 
 const reducer = (state, action) =>
-  produce(state, draftState => {
+  produce(state, (draftState) => {
     switch (action.type) {
       case 'GET_DATA': {
         draftState.isLoading = true;

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

@@ -2,7 +2,7 @@ import { useCallback, useReducer, useEffect } from 'react';
 import { request, useNotification } from '@strapi/helper-plugin';
 import reducer, { initialState } from './reducer';
 
-const useFetchRole = id => {
+const useFetchRole = (id) => {
   const toggleNotification = useNotification();
   const [state, dispatch] = useReducer(reducer, initialState);
 
@@ -20,10 +20,10 @@ const useFetchRole = id => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [id]);
 
-  const fetchRole = async roleId => {
+  const fetchRole = async (roleId) => {
     try {
       const [{ data: role }, { data: permissions }] = await Promise.all(
-        [`roles/${roleId}`, `roles/${roleId}/permissions`].map(endPoint =>
+        [`roles/${roleId}`, `roles/${roleId}/permissions`].map((endPoint) =>
           request(`/admin/${endPoint}`, { method: 'GET' })
         )
       );
@@ -46,7 +46,7 @@ const useFetchRole = id => {
     }
   };
 
-  const handleSubmitSucceeded = useCallback(data => {
+  const handleSubmitSucceeded = useCallback((data) => {
     dispatch({
       type: 'ON_SUBMIT_SUCCEEDED',
       ...data,

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

@@ -8,7 +8,7 @@ export const initialState = {
 };
 
 const reducer = (state, action) =>
-  produce(state, draftState => {
+  produce(state, (draftState) => {
     switch (action.type) {
       case 'GET_DATA_SUCCEEDED': {
         draftState.role = action.role;

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

@@ -43,7 +43,7 @@ const initialState = {
 };
 
 const reducer = (state = initialState, action) =>
-  produce(state, draftState => {
+  produce(state, (draftState) => {
     switch (action.type) {
       case 'SET_SECTION_LINKS': {
         const { authorizedGeneralSectionLinks, authorizedPluginSectionLinks } = action.data;

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

@@ -9,7 +9,9 @@ const getGeneralLinks = async (permissions, generalSectionRawLinks, shouldUpdate
     (_, index) => generalSectionLinksPermissions[index]
   );
 
-  const settingsLinkIndex = authorizedGeneralSectionLinks.findIndex(obj => obj.to === '/settings');
+  const settingsLinkIndex = authorizedGeneralSectionLinks.findIndex(
+    (obj) => obj.to === '/settings'
+  );
 
   if (settingsLinkIndex === -1) {
     return [];

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

@@ -18,7 +18,7 @@ const useModels = () => {
 
     try {
       const [{ data: components }, { data: contentTypes }] = await Promise.all(
-        ['components', 'content-types'].map(endPoint =>
+        ['components', 'content-types'].map((endPoint) =>
           request(`/content-manager/${endPoint}`, { method: 'GET' })
         )
       );

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

@@ -9,7 +9,7 @@ export const initialState = {
 };
 
 const reducer = (state, action) =>
-  produce(state, draftState => {
+  produce(state, (draftState) => {
     switch (action.type) {
       case 'GET_MODELS': {
         draftState.collectionTypes = initialState.collectionTypes;
@@ -26,9 +26,9 @@ const reducer = (state, action) =>
         break;
       }
       case 'GET_MODELS_SUCCEDED': {
-        const getContentTypeByKind = kind =>
+        const getContentTypeByKind = (kind) =>
           action.contentTypes.filter(
-            contentType => contentType.isDisplayed && contentType.kind === kind
+            (contentType) => contentType.isDisplayed && contentType.kind === kind
           );
 
         draftState.isLoading = false;

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

@@ -7,7 +7,7 @@ export const initialState = {
 };
 
 const reducer = (state, action) =>
-  produce(state, draftState => {
+  produce(state, (draftState) => {
     switch (action.type) {
       case 'GET_DATA': {
         draftState.isLoading = true;

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

@@ -61,7 +61,7 @@ const useSettingsForm = (endPoint, schema, cbSuccess, fieldsToPick) => {
     });
   };
 
-  const handleSubmit = async e => {
+  const handleSubmit = async (e) => {
     e.preventDefault();
 
     const errors = await checkFormValidity(modifiedData, schema);
@@ -82,7 +82,7 @@ const useSettingsForm = (endPoint, schema, cbSuccess, fieldsToPick) => {
         const cleanedData = omit(modifiedData, ['confirmPassword', 'registrationToken']);
 
         if (cleanedData.roles) {
-          cleanedData.roles = cleanedData.roles.map(role => role.id);
+          cleanedData.roles = cleanedData.roles.map((role) => role.id);
         }
 
         const { data } = await request(endPoint, {

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

@@ -13,7 +13,7 @@ const initialState = {
 };
 
 const reducer = (state, action) =>
-  produce(state, draftState => {
+  produce(state, (draftState) => {
     switch (action.type) {
       case 'GET_DATA_SUCCEEDED': {
         draftState.isLoading = false;

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

@@ -21,9 +21,9 @@ const useSettingsMenu = (noCheck = false) => {
         return { hasPermission, path };
       };
 
-      const generateArrayOfPromises = array => {
+      const generateArrayOfPromises = (array) => {
         return array.reduce((acc, current, sectionIndex) => {
-          const generateArrayOfPromises = array =>
+          const generateArrayOfPromises = (array) =>
             array.map((link, index) =>
               checkPermissions(array[index].permissions, `${sectionIndex}.links.${index}`)
             );

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

@@ -8,7 +8,7 @@ const init = (initialState, { settings, shouldUpdateStrapi }) => {
   // Retrieve the links that will be injected into the global section
   const pluginsGlobalLinks = settings.global.links;
   // Sort the links by name
-  const sortedGlobalLinks = sortLinks([...pluginsGlobalLinks, ...globalLinks]).map(link => ({
+  const sortedGlobalLinks = sortLinks([...pluginsGlobalLinks, ...globalLinks]).map((link) => ({
     ...link,
     hasNotification: link.id === '000-application-infos' && shouldUpdateStrapi,
   }));

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

@@ -8,10 +8,10 @@ const initialState = {
 
 const reducer = (state, action) =>
   // eslint-disable-next-line consistent-return
-  produce(state, draftState => {
+  produce(state, (draftState) => {
     switch (action.type) {
       case 'CHECK_PERMISSIONS_SUCCEEDED': {
-        action.data.forEach(checkedPermissions => {
+        action.data.forEach((checkedPermissions) => {
           if (checkedPermissions.hasPermission) {
             set(
               draftState,
@@ -24,7 +24,7 @@ const reducer = (state, action) =>
         // Remove the not needed links in each section
         draftState.menu.forEach((section, sectionIndex) => {
           draftState.menu[sectionIndex].links = section.links.filter(
-            link => link.isDisplayed === true
+            (link) => link.isDisplayed === true
           );
         });
 

package/admin/src/hooks/useSettingsMenu/utils/formatLinks.js

@@ -1,6 +1,6 @@
-const formatLinks = menu => {
-  return menu.map(menuSection => {
-    const formattedLinks = menuSection.links.map(link => ({
+const formatLinks = (menu) => {
+  return menu.map((menuSection) => {
+    const formattedLinks = menuSection.links.map((link) => ({
       ...link,
       isDisplayed: false,
     }));

package/admin/src/hooks/useSettingsMenu/utils/sortLinks.js

@@ -1,5 +1,5 @@
 import sortBy from 'lodash/sortBy';
 
-const sortLinks = links => sortBy(links, link => link.id);
+const sortLinks = (links) => sortBy(links, (link) => link.id);
 
 export default sortLinks;

package/admin/src/index.js

@@ -38,7 +38,7 @@ const run = async () => {
     window.strapi.features = {
       ...window.strapi.features,
       allFeatures: features,
-      isEnabled: f => features.includes(f),
+      isEnabled: (f) => features.includes(f),
     };
 
     window.strapi.projectType = isEE ? 'Enterprise' : 'Community';

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

@@ -15,7 +15,7 @@ const LocaleToggle = () => {
 
   return (
     <SimpleMenu label={localeNames[locale]}>
-      {Object.keys(localeNames).map(lang => (
+      {Object.keys(localeNames).map((lang) => (
         <MenuItem onClick={() => changeLocale(lang)} key={lang}>
           {localeNames[lang]}
         </MenuItem>

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

@@ -88,7 +88,7 @@ const Onboarding = () => {
   ];
 
   const handleClick = () => {
-    setIsOpen(prev => !prev);
+    setIsOpen((prev) => !prev);
   };
 
   return (
@@ -116,7 +116,7 @@ const Onboarding = () => {
             paddingBottom={2}
             paddingTop={2}
           >
-            {staticLinks.map(link => (
+            {staticLinks.map((link) => (
               <StyledLink
                 key={link.label}
                 rel="nofollow noreferrer noopener"

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

@@ -46,7 +46,7 @@ const SettingsPage = lazy(() =>
 const useTrackUsage = () => {
   const { trackUsage } = useTracking();
   const dispatch = useDispatch();
-  const appStatus = useSelector(state => state.admin_app.status);
+  const appStatus = useSelector((state) => state.admin_app.status);
 
   useEffect(() => {
     // Make sure the event is only send once after accessing the admin panel
@@ -68,7 +68,7 @@ const Admin = () => {
 
   const routes = useMemo(() => {
     return menu
-      .filter(link => link.Component)
+      .filter((link) => link.Component)
       .map(({ to, Component, exact }) => createRoute(Component, to, exact));
   }, [menu]);
 

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

@@ -11,7 +11,7 @@ import {
   auth,
   request,
   useNotification,
-  TrackingContext,
+  TrackingProvider,
   prefixFileUrlWithBackendUrl,
   useAppInfos,
 } from '@strapi/helper-plugin';
@@ -124,7 +124,15 @@ function App() {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [toggleNotification, updateProjectSettings]);
 
-  const setHasAdmin = hasAdmin => setState(prev => ({ ...prev, hasAdmin }));
+  const setHasAdmin = (hasAdmin) => setState((prev) => ({ ...prev, hasAdmin }));
+
+  const trackingInfo = useMemo(
+    () => ({
+      uuid,
+      telemetryProperties,
+    }),
+    [uuid, telemetryProperties]
+  );
 
   if (isLoading) {
     return <LoadingIndicatorPage />;
@@ -133,12 +141,12 @@ function App() {
   return (
     <Suspense fallback={<LoadingIndicatorPage />}>
       <SkipToContent>{formatMessage({ id: 'skipToContent' })}</SkipToContent>
-      <TrackingContext.Provider value={{ uuid, telemetryProperties }}>
+      <TrackingProvider value={trackingInfo}>
         <Switch>
           {authRoutes}
           <Route
             path="/auth/:authType"
-            render={routerProps => (
+            render={(routerProps) => (
               <AuthPage {...routerProps} setHasAdmin={setHasAdmin} hasAdmin={hasAdmin} />
             )}
             exact
@@ -147,7 +155,7 @@ function App() {
           <PrivateRoute path="/" component={AuthenticatedApp} />
           <Route path="" component={NotFoundPage} />
         </Switch>
-      </TrackingContext.Provider>
+      </TrackingProvider>
     </Suspense>
   );
 }

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

@@ -7,7 +7,7 @@ const initialState = {
 
 const reducer = (state = initialState, action) =>
   /* eslint-disable-next-line consistent-return */
-  produce(state, draftState => {
+  produce(state, (draftState) => {
     switch (action.type) {
       case SET_APP_RUNTIME_STATUS: {
         draftState.status = 'runtime';

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

@@ -103,7 +103,7 @@ const ForgotPassword = ({ onSubmit, schema }) => {
 };
 
 ForgotPassword.defaultProps = {
-  onSubmit: e => e.preventDefault(),
+  onSubmit: (e) => e.preventDefault(),
 };
 
 ForgotPassword.propTypes = {

package/admin/src/pages/AuthPage/components/Login/BaseLogin.js

@@ -113,9 +113,9 @@ const Login = ({ onSubmit, schema, children }) => {
                   type={passwordShown ? 'text' : 'password'}
                   endAction={
                     <FieldActionWrapper
-                      onClick={e => {
+                      onClick={(e) => {
                         e.stopPropagation();
-                        setPasswordShown(prev => !prev);
+                        setPasswordShown((prev) => !prev);
                       }}
                       label={formatMessage(
                         passwordShown
@@ -135,7 +135,7 @@ const Login = ({ onSubmit, schema, children }) => {
                   required
                 />
                 <Checkbox
-                  onValueChange={checked => {
+                  onValueChange={(checked) => {
                     handleChange({ target: { value: checked, name: 'rememberMe' } });
                   }}
                   value={values.rememberMe}
@@ -172,7 +172,7 @@ const Login = ({ onSubmit, schema, children }) => {
 
 Login.defaultProps = {
   children: null,
-  onSubmit: () => {},
+  onSubmit() {},
 };
 
 Login.propTypes = {

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

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import BaseLogin from './BaseLogin';
 import UnauthenticatedLayout from '../../../../layouts/UnauthenticatedLayout';
 
-const Login = loginProps => {
+const Login = (loginProps) => {
   return (
     <UnauthenticatedLayout>
       <BaseLogin {...loginProps} />
@@ -12,7 +12,7 @@ const Login = loginProps => {
 };
 
 Login.defaultProps = {
-  onSubmit: e => e.preventDefault(),
+  onSubmit: (e) => e.preventDefault(),
 };
 
 Login.propTypes = {

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

@@ -205,9 +205,9 @@ const Register = ({ authType, fieldsToDisable, noSignin, onSubmit, schema }) =>
                       endAction={
                         // eslint-disable-next-line react/jsx-wrap-multilines
                         <FieldActionWrapper
-                          onClick={e => {
+                          onClick={(e) => {
                             e.preventDefault();
-                            setPasswordShown(prev => !prev);
+                            setPasswordShown((prev) => !prev);
                           }}
                           label={formatMessage(
                             passwordShown
@@ -246,9 +246,9 @@ const Register = ({ authType, fieldsToDisable, noSignin, onSubmit, schema }) =>
                       endAction={
                         // eslint-disable-next-line react/jsx-wrap-multilines
                         <FieldActionWrapper
-                          onClick={e => {
+                          onClick={(e) => {
                             e.preventDefault();
-                            setConfirmPasswordShown(prev => !prev);
+                            setConfirmPasswordShown((prev) => !prev);
                           }}
                           label={formatMessage(
                             confirmPasswordShown
@@ -273,7 +273,7 @@ const Register = ({ authType, fieldsToDisable, noSignin, onSubmit, schema }) =>
                       type={confirmPasswordShown ? 'text' : 'password'}
                     />
                     <Checkbox
-                      onValueChange={checked => {
+                      onValueChange={(checked) => {
                         handleChange({ target: { value: checked, name: 'news' } });
                       }}
                       value={values.news}
@@ -338,7 +338,7 @@ const Register = ({ authType, fieldsToDisable, noSignin, onSubmit, schema }) =>
 Register.defaultProps = {
   fieldsToDisable: [],
   noSignin: false,
-  onSubmit: e => e.preventDefault(),
+  onSubmit: (e) => e.preventDefault(),
 };
 
 Register.propTypes = {

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

@@ -87,9 +87,9 @@ const ForgotPassword = ({ onSubmit, schema }) => {
                     }
                     endAction={
                       <FieldActionWrapper
-                        onClick={e => {
+                        onClick={(e) => {
                           e.preventDefault();
-                          setPasswordShown(prev => !prev);
+                          setPasswordShown((prev) => !prev);
                         }}
                         label={formatMessage(
                           passwordShown
@@ -132,9 +132,9 @@ const ForgotPassword = ({ onSubmit, schema }) => {
                     }
                     endAction={
                       <FieldActionWrapper
-                        onClick={e => {
+                        onClick={(e) => {
                           e.preventDefault();
-                          setConfirmPasswordShown(prev => !prev);
+                          setConfirmPasswordShown((prev) => !prev);
                         }}
                         label={formatMessage(
                           passwordShown
@@ -182,7 +182,7 @@ const ForgotPassword = ({ onSubmit, schema }) => {
 };
 
 ForgotPassword.defaultProps = {
-  onSubmit: e => e.preventDefault(),
+  onSubmit: (e) => e.preventDefault(),
 };
 
 ForgotPassword.propTypes = {

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

@@ -1,4 +1,4 @@
-const init = initialState => {
+const init = (initialState) => {
   return initialState;
 };
 

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',