@strapi/admin 4.12.0 → 4.12.2

package/admin/src/content-manager/pages/ListSettingsView/index.js

@@ -1,10 +1,10 @@
-import React, { memo, useContext, useReducer, useState } from 'react';
+import React, { useContext, useReducer, useState } from 'react';
 
 import {
-  Box,
   Button,
   ContentLayout,
   Divider,
+  Flex,
   HeaderLayout,
   Layout,
   Main,
@@ -17,10 +17,7 @@ import {
   useTracking,
 } from '@strapi/helper-plugin';
 import { ArrowLeft, Check } from '@strapi/icons';
-import get from 'lodash/get';
-import isEmpty from 'lodash/isEmpty';
 import isEqual from 'lodash/isEqual';
-import pick from 'lodash/pick';
 import upperFirst from 'lodash/upperFirst';
 import PropTypes from 'prop-types';
 import { stringify } from 'qs';
@@ -31,11 +28,10 @@ import ModelsContext from '../../contexts/ModelsContext';
 import { usePluginsQueryParams } from '../../hooks';
 import { checkIfAttributeIsDisplayable, getTrad } from '../../utils';
 
-import EditFieldForm from './components/EditFieldForm';
-import Settings from './components/Settings';
-import SortDisplayedFields from './components/SortDisplayedFields';
+import { EditFieldForm } from './components/EditFieldForm';
+import { Settings } from './components/Settings';
+import { SortDisplayedFields } from './components/SortDisplayedFields';
 import { EXCLUDED_SORT_ATTRIBUTE_TYPES } from './constants';
-import init from './init';
 import reducer, { initialState } from './reducer';
 
 const ListSettingsView = ({ layout, slug }) => {
@@ -45,14 +41,19 @@ const ListSettingsView = ({ layout, slug }) => {
   const pluginsQueryParams = usePluginsQueryParams();
   const toggleNotification = useNotification();
   const { refetchData } = useContext(ModelsContext);
-
   const [showWarningSubmit, setWarningSubmit] = useState(false);
   const toggleWarningSubmit = () => setWarningSubmit((prevState) => !prevState);
-  const [reducerState, dispatch] = useReducer(reducer, initialState, () =>
-    init(initialState, layout)
+  const [{ fieldToEdit, fieldForm, initialData, modifiedData }, dispatch] = useReducer(
+    reducer,
+    initialState,
+    () => ({
+      ...initialState,
+      initialData: layout,
+      modifiedData: layout,
+    })
   );
-  const { fieldToEdit, fieldForm, initialData, modifiedData } = reducerState;
-  const isModalFormOpen = !isEmpty(fieldForm);
+
+  const isModalFormOpen = Object.keys(fieldForm).length !== 0;
 
   const { attributes } = layout;
   const displayedFields = modifiedData.layouts.list;
@@ -84,9 +85,30 @@ const ListSettingsView = ({ layout, slug }) => {
     });
   };
 
+  const { isLoading: isSubmittingForm, mutate } = useMutation(
+    (body) => put(`/content-manager/content-types/${slug}/configuration`, body),
+    {
+      onSuccess() {
+        trackUsage('didEditListSettings');
+        refetchData();
+      },
+      onError() {
+        toggleNotification({
+          type: 'warning',
+          message: { id: 'notification.error' },
+        });
+      },
+    }
+  );
+
   const handleConfirm = async () => {
-    const body = pick(modifiedData, ['layouts', 'settings', 'metadatas']);
-    submitMutation.mutate(body);
+    const { layouts, settings, metadatas } = modifiedData;
+
+    mutate({
+      layouts,
+      settings,
+      metadatas,
+    });
   };
 
   const handleAddField = (item) => {
@@ -139,23 +161,6 @@ const ListSettingsView = ({ layout, slug }) => {
     handleCloseModal();
   };
 
-  const submitMutation = useMutation(
-    (body) => put(`/content-manager/content-types/${slug}/configuration`, body),
-    {
-      onSuccess() {
-        trackUsage('didEditListSettings');
-        refetchData();
-      },
-      onError() {
-        toggleNotification({
-          type: 'warning',
-          message: { id: 'notification.error' },
-        });
-      },
-    }
-  );
-  const { isLoading: isSubmittingForm } = submitMutation;
-
   const handleChangeEditLabel = ({ target: { name, value } }) => {
     dispatch({
       type: 'ON_CHANGE_FIELD_METAS',
@@ -217,8 +222,11 @@ const ListSettingsView = ({ layout, slug }) => {
             )}
           />
           <ContentLayout>
-            <Box
+            <Flex
+              alignItems="stretch"
               background="neutral0"
+              direction="column"
+              gap={6}
               hasRadius
               shadow="tableShadow"
               paddingTop={6}
@@ -231,9 +239,9 @@ const ListSettingsView = ({ layout, slug }) => {
                 onChange={handleChange}
                 sortOptions={sortOptions}
               />
-              <Box paddingTop={6} paddingBottom={6}>
-                <Divider />
-              </Box>
+
+              <Divider />
+
               <SortDisplayedFields
                 listRemainingFields={listRemainingFields}
                 displayedFields={displayedFields}
@@ -243,8 +251,9 @@ const ListSettingsView = ({ layout, slug }) => {
                 onRemoveField={handleRemoveField}
                 metadatas={modifiedData.metadatas}
               />
-            </Box>
+            </Flex>
           </ContentLayout>
+
           <ConfirmDialog
             bodyText={{
               id: getTrad('popUpWarning.warning.updateAllSettings'),
@@ -258,6 +267,7 @@ const ListSettingsView = ({ layout, slug }) => {
             variantRightButton="success-light"
           />
         </form>
+
         {isModalFormOpen && (
           <EditFieldForm
             attributes={attributes}
@@ -266,7 +276,7 @@ const ListSettingsView = ({ layout, slug }) => {
             onChangeEditLabel={handleChangeEditLabel}
             onCloseModal={handleCloseModal}
             onSubmit={handleSubmitFieldEdit}
-            type={get(attributes, [fieldToEdit, 'type'], 'text')}
+            type={attributes?.[fieldToEdit]?.type ?? 'text'}
           />
         )}
       </Main>
@@ -296,4 +306,4 @@ ListSettingsView.propTypes = {
   slug: PropTypes.string.isRequired,
 };
 
-export default memo(ListSettingsView);
+export default ListSettingsView;

package/admin/src/content-manager/pages/ListView/components/BulkActionButtons/SelectedEntriesModal/index.js

@@ -261,7 +261,11 @@ const SelectedEntriesModalContent = ({
   const selectedEntriesWithErrorsCount = rowsToDisplay.filter(
     ({ id }) => selectedEntries.includes(id) && validationErrors[id]
   ).length;
-  const selectedEntriesWithNoErrorsCount = selectedEntries.length - selectedEntriesWithErrorsCount;
+  const selectedEntriesPublished = rowsToDisplay.filter(
+    ({ id, publishedAt }) => selectedEntries.includes(id) && publishedAt
+  ).length;
+  const selectedEntriesWithNoErrorsCount =
+    selectedEntries.length - selectedEntriesWithErrorsCount - selectedEntriesPublished;
 
   const bulkPublishMutation = useMutation(
     (data) =>
@@ -331,11 +335,12 @@ const SelectedEntriesModalContent = ({
       {
         id: getTrad('containers.ListPage.selectedEntriesModal.selectedCount'),
         defaultMessage:
-          '<b>{readyToPublishCount}</b> {readyToPublishCount, plural, =0 {entries} one {entry} other {entries}} ready to publish. <b>{withErrorsCount}</b> {withErrorsCount, plural, =0 {entries} one {entry} other {entries}} waiting for action.',
+          '<b>{alreadyPublishedCount}</b> {alreadyPublishedCount, plural, =0 {entries} one {entry} other {entries}} already published. <b>{readyToPublishCount}</b> {readyToPublishCount, plural, =0 {entries} one {entry} other {entries}} ready to publish. <b>{withErrorsCount}</b> {withErrorsCount, plural, =0 {entries} one {entry} other {entries}} waiting for action.',
       },
       {
         readyToPublishCount: selectedEntriesWithNoErrorsCount,
         withErrorsCount: selectedEntriesWithErrorsCount,
+        alreadyPublishedCount: selectedEntriesPublished,
         b: BoldChunk,
       }
     );

package/admin/src/content-manager/pages/ListView/components/CellContent/RelationMultiple/index.js

@@ -8,7 +8,7 @@ import { useIntl } from 'react-intl';
 import { useQuery } from 'react-query';
 import styled from 'styled-components';
 
-import { getRequestUrl, getTrad } from '../../../../../utils';
+import { getTrad } from '../../../../../utils';
 import CellValue from '../CellValue';
 
 const RelationMultiple = ({ fieldSchema, metadatas, name, entityId, value, contentType }) => {
@@ -24,7 +24,7 @@ const RelationMultiple = ({ fieldSchema, metadatas, name, entityId, value, conte
       const {
         data: { results, pagination },
       } = await get(
-        getRequestUrl(`relations/${contentType.uid}/${entityId}/${name.split('.')[0]}`)
+        `/content-manager/relations/${contentType.uid}/${entityId}/${name.split('.')[0]}`
       );
 
       return { results, pagination };

package/admin/src/content-manager/pages/ListView/index.js

@@ -50,7 +50,7 @@ import { useEnterprise } from '../../../hooks/useEnterprise';
 import { selectAdminPermissions } from '../../../pages/App/selectors';
 import { InjectionZone } from '../../../shared/components';
 import AttributeFilter from '../../components/AttributeFilter';
-import { getRequestUrl, getTrad } from '../../utils';
+import { getTrad } from '../../utils';
 
 import { getData, getDataSucceeded, onChangeListHeaders, onResetListHeaders } from './actions';
 import { Body } from './components/Body';
@@ -247,7 +247,7 @@ function ListView({
       try {
         await del(`/content-manager/collection-types/${slug}/${idToDelete}`);
 
-        const requestUrl = getRequestUrl(`collection-types/${slug}`);
+        const requestUrl = `/content-manager/collection-types/${slug}`;
         fetchData(requestUrl, { params });
 
         toggleNotification({
@@ -273,7 +273,7 @@ function ListView({
     const source = CancelToken.source();
 
     const shouldSendRequest = canRead;
-    const requestUrl = getRequestUrl(`collection-types/${slug}`);
+    const requestUrl = `/content-manager/collection-types/${slug}`;
 
     if (shouldSendRequest && requestUrl.includes(requestUrlRef.current)) {
       fetchData(requestUrl, { cancelToken: source.token, params });
@@ -575,7 +575,7 @@ function ListView({
                         {/* Bulk action row checkbox */}
                         <Body.CheckboxDataCell rowId={rowData.id} index={index} />
                         {/* Field data */}
-                        {tableHeaders.map(({ key, name, ...rest }) => {
+                        {tableHeaders.map(({ key, name, cellFormatter, ...rest }) => {
                           if (hasDraftAndPublish && name === 'publishedAt') {
                             return (
                               <Td key={key}>
@@ -622,6 +622,12 @@ function ListView({
                             );
                           }
 
+                          if (typeof cellFormatter === 'function') {
+                            return (
+                              <Td key={key}>{cellFormatter(rowData, { key, name, ...rest })}</Td>
+                            );
+                          }
+
                           return (
                             <Td key={key}>
                               <CellContent

package/admin/src/content-manager/sharedReducers/crudReducer/reducer.js

@@ -4,7 +4,7 @@ import produce from 'immer';
 // NOTE: instead of creating a shared reducer here, we could also create a hook
 // that returns the dispatch and the state, however it will mess with the linter
 // and force us to either disable the linter for the hooks dependencies array rule or
-// require us to add the dispatch to the array wich is not wanted. This refacto does not require us to
+// require us to add the dispatch to the array which is not wanted. This refacto does not require us to
 // to do any of this.
 import {
   CLEAR_SET_MODIFIED_DATA_ONLY,

package/admin/src/content-manager/utils/checkIfAttributeIsDisplayable.js

@@ -1,10 +1,8 @@
-import toLower from 'lodash/toLower';
-
 const checkIfAttributeIsDisplayable = (attribute) => {
-  const type = attribute.type;
+  const { type } = attribute;
 
   if (type === 'relation') {
-    return !toLower(attribute.relationType).includes('morph');
+    return !(attribute?.relationType ?? '').toLowerCase().includes('morph');
   }
 
   return !['json', 'dynamiczone', 'richtext', 'password'].includes(type) && !!type;

package/admin/src/content-manager/utils/index.js

@@ -6,7 +6,6 @@ export { default as formatLayoutToApi } from './formatLayoutToApi';
 export { default as generatePermissionsObject } from './generatePermissionsObject';
 export { default as getFieldName } from './getFieldName';
 export { default as getMaxTempKey } from './getMaxTempKey';
-export { default as getRequestUrl } from './getRequestUrl';
 export { default as getTrad } from './getTrad';
 export { default as ItemTypes } from './ItemTypes';
 export { default as mergeMetasWithSchema } from './mergeMetasWithSchema';

package/admin/src/hooks/index.js

@@ -1,13 +1,10 @@
 export { default as useConfigurations } from './useConfigurations';
 export { useContentTypes } from './useContentTypes';
-export { default as useFetchPermissionsLayout } from './useFetchPermissionsLayout';
-export { default as useFetchRole } from './useFetchRole';
 export { default as useLicenseLimitNotification } from './useLicenseLimitNotification';
 export { default as useMenu } from './useMenu';
 export { default as usePermissionsDataManager } from './usePermissionsDataManager';
 export { default as useRegenerate } from './useRegenerate';
 export { default as useReleaseNotification } from './useReleaseNotification';
-export { default as useRolesList } from './useRolesList';
 export { default as useSettingsForm } from './useSettingsForm';
 export { default as useSettingsMenu } from './useSettingsMenu';
 export { default as useThemeToggle } from './useThemeToggle';

package/admin/src/hooks/useAdminRolePermissions/__mocks__/index.js

@@ -0,0 +1,5 @@
+export const useAdminRolePermissions = jest.fn().mockReturnValue({
+  permissions: [],
+  isLoading: false,
+  isError: false,
+});

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

@@ -0,0 +1,34 @@
+import { useFetchClient } from '@strapi/helper-plugin';
+import { useQuery } from 'react-query';
+
+export const useAdminRolePermissions = (params = {}, queryOptions = {}) => {
+  const { id, ...queryParams } = params;
+
+  const { get } = useFetchClient();
+
+  if (!id && (queryOptions?.enabled === undefined || !!queryOptions?.enabled === true)) {
+    throw new Error('"id" is a required argument');
+  }
+
+  const {
+    data: permissions,
+    error,
+    isError,
+    isLoading,
+    refetch,
+  } = useQuery(
+    ['roles', id, 'permissions', queryParams],
+    async () => {
+      const {
+        data: { data },
+      } = await get(`/admin/roles/${id}/permissions`, {
+        params: queryParams,
+      });
+
+      return data;
+    },
+    queryOptions
+  );
+
+  return { permissions, error, isError, isLoading, refetch };
+};

package/admin/src/hooks/useAdminRoles/__mocks__/index.js

@@ -0,0 +1,5 @@
+export const useAdminRoles = jest.fn().mockReturnValue({
+  roles: [],
+  isLoading: false,
+  isError: false,
+});

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

@@ -0,0 +1,40 @@
+import { useCollator, useFetchClient } from '@strapi/helper-plugin';
+import { useIntl } from 'react-intl';
+import { useQuery } from 'react-query';
+
+export const useAdminRoles = (params = {}, queryOptions = {}) => {
+  const { id = '', ...queryParams } = params;
+
+  const { get } = useFetchClient();
+  const { locale } = useIntl();
+  const formatter = useCollator(locale, {
+    sensitivity: 'base',
+  });
+  const { data, error, isError, isLoading, refetch } = useQuery(
+    ['roles', id, queryParams],
+    async () => {
+      const { data } = await get(`/admin/roles/${id ?? ''}`, {
+        params: queryParams,
+      });
+
+      return data;
+    },
+    queryOptions
+  );
+
+  let roles = [];
+
+  if (id && data) {
+    roles = [data.data];
+  } else if (Array.isArray(data?.data)) {
+    roles = data.data;
+  }
+
+  return {
+    roles: roles.sort((a, b) => formatter.compare(a.name, b.name)),
+    error,
+    isError,
+    isLoading,
+    refetch,
+  };
+};

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

@@ -98,6 +98,10 @@ const Register = ({ authType, fieldsToDisable, noSignin, onSubmit, schema }) =>
 
       if (!['password', 'confirmPassword'].includes(key) && typeof value === 'string') {
         normalizedvalue = normalizedvalue.trim();
+
+        if (key === 'lastname') {
+          normalizedvalue = normalizedvalue || null;
+        }
       }
 
       acc[key] = normalizedvalue;

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

@@ -55,7 +55,7 @@ export const FORMS = {
     fieldsToOmit: ['userInfo.confirmPassword', 'userInfo.news', 'userInfo.email'],
     schema: yup.object().shape({
       firstname: yup.string().trim().required(translatedErrors.required),
-      lastname: yup.string(),
+      lastname: yup.string().nullable(),
       password: yup
         .string()
         .min(8, translatedErrors.minLength)
@@ -79,7 +79,7 @@ export const FORMS = {
     fieldsToOmit: ['confirmPassword', 'news'],
     schema: yup.object().shape({
       firstname: yup.string().trim().required(translatedErrors.required),
-      lastname: yup.string(),
+      lastname: yup.string().nullable(),
       password: yup
         .string()
         .min(8, translatedErrors.minLength)

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

@@ -17,7 +17,7 @@ import {
 import { LoadingIndicatorPage, useFocusWhenNavigate } from '@strapi/helper-plugin';
 import { useIntl } from 'react-intl';
 
-import useFetchEnabledPlugins from '../../hooks/useFetchEnabledPlugins';
+import { usePlugins } from './hooks/usePlugins';
 
 const Plugins = () => {
   const { formatMessage } = useIntl();
@@ -41,7 +41,7 @@ const Plugins = () => {
     );
   };
 
-  const { status, data } = useFetchEnabledPlugins(notifyPluginPageLoad);
+  const { status, data } = usePlugins(notifyPluginPageLoad);
 
   const isLoading = status !== 'success' && status !== 'error';
 

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

@@ -0,0 +1,29 @@
+import { useFetchClient, useNotification } from '@strapi/helper-plugin';
+import { useQuery } from 'react-query';
+
+export const usePlugins = (notifyLoad) => {
+  const toggleNotification = useNotification();
+  const { get } = useFetchClient();
+
+  return useQuery(
+    ['plugins'],
+    async () => {
+      const { data } = await get('/admin/plugins');
+
+      return data;
+    },
+    {
+      onSuccess() {
+        if (notifyLoad) {
+          notifyLoad();
+        }
+      },
+      onError() {
+        toggleNotification({
+          type: 'warning',
+          message: { id: 'notification.error', defaultMessage: 'An error occured' },
+        });
+      },
+    }
+  );
+};

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

@@ -0,0 +1,44 @@
+import { useNotification } from '@strapi/helper-plugin';
+import qs from 'qs';
+import { useQuery } from 'react-query';
+
+import { MARKETPLACE_API_URL } from '../../constants';
+
+export const useFetchMarketplacePlugins = (notifyLoad, params = {}) => {
+  const toggleNotification = useNotification();
+
+  return useQuery(
+    ['marketplace', 'plugins', params],
+    async () => {
+      try {
+        const queryString = qs.stringify(qs.parse(params));
+        const res = await fetch(`${MARKETPLACE_API_URL}/plugins?${queryString}`);
+
+        if (!res.ok) {
+          throw new Error('Failed to fetch marketplace plugins.');
+        }
+
+        const data = await res.json();
+
+        return data;
+      } catch (error) {
+        // silence
+      }
+
+      return null;
+    },
+    {
+      onSuccess() {
+        if (notifyLoad) {
+          notifyLoad();
+        }
+      },
+      onError() {
+        toggleNotification({
+          type: 'warning',
+          message: { id: 'notification.error', defaultMessage: 'An error occured' },
+        });
+      },
+    }
+  );
+};

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

@@ -0,0 +1,44 @@
+import { useNotification } from '@strapi/helper-plugin';
+import qs from 'qs';
+import { useQuery } from 'react-query';
+
+import { MARKETPLACE_API_URL } from '../../constants';
+
+export const useFetchMarketplaceProviders = (notifyLoad, params = {}) => {
+  const toggleNotification = useNotification();
+
+  return useQuery(
+    ['marketplace', 'providers', params],
+    async () => {
+      try {
+        const queryString = qs.stringify(qs.parse(params));
+        const res = await fetch(`${MARKETPLACE_API_URL}/providers?${queryString}`);
+
+        if (!res.ok) {
+          throw new Error('Failed to fetch marketplace providers.');
+        }
+
+        const data = await res.json();
+
+        return data;
+      } catch (error) {
+        // silence
+      }
+
+      return null;
+    },
+    {
+      onSuccess() {
+        if (notifyLoad) {
+          notifyLoad();
+        }
+      },
+      onError() {
+        toggleNotification({
+          type: 'warning',
+          message: { id: 'notification.error', defaultMessage: 'An error occured' },
+        });
+      },
+    }
+  );
+};

package/admin/src/pages/MarketplacePage/utils/useMarketplaceData.js

@@ -3,8 +3,8 @@ import { useEffect, useState } from 'react';
 import { useNotifyAT } from '@strapi/design-system';
 import { useIntl } from 'react-intl';
 
-import useFetchMarketplacePlugins from '../../../hooks/marketplace/useFetchMarketplacePlugins';
-import useFetchMarketplaceProviders from '../../../hooks/marketplace/useFetchMarketplaceProviders';
+import { useFetchMarketplacePlugins } from '../hooks/useFetchMarketplacePlugins';
+import { useFetchMarketplaceProviders } from '../hooks/useFetchMarketplaceProviders';
 
 function useMarketplaceData({ npmPackageType, debouncedSearch, query, tabQuery }) {
   const { notifyStatus } = useNotifyAT();