@strapi/admin 4.12.1 → 4.12.4

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

@@ -133,7 +133,7 @@ const EditSettingsView = ({ mainLayout, components, isContentTypeView, slug, upd
       return put(
         isContentTypeView
           ? `/content-manager/content-types/${slug}/configuration`
-          : `components/${slug}/configuration`,
+          : `/content-manager/components/${slug}/configuration`,
         body
       );
     },

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/index.js

@@ -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/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/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();

package/admin/src/pages/SettingsPage/pages/Roles/CreatePage/index.js

@@ -27,16 +27,16 @@ import {
 import { ArrowLeft } from '@strapi/icons';
 import { format } from 'date-fns';
 import { Formik } from 'formik';
-import get from 'lodash/get';
 import isEmpty from 'lodash/isEmpty';
 import { useIntl } from 'react-intl';
 import { useSelector } from 'react-redux';
 import { useHistory, useRouteMatch } from 'react-router-dom';
 import styled from 'styled-components';
 
-import { useFetchPermissionsLayout, useFetchRole } from '../../../../../hooks';
+import { useAdminRolePermissions } from '../../../../../hooks/useAdminRolePermissions';
 import { selectAdminPermissions } from '../../../../App/selectors';
 import Permissions from '../EditPage/components/Permissions';
+import { useAdminRolePermissionLayout } from '../hooks/useAdminRolePermissionLayout';
 
 import schema from './utils/schema';
 
@@ -51,6 +51,7 @@ const UsersRoleNumber = styled.div`
 `;
 
 const CreatePage = () => {
+  const route = useRouteMatch('/settings/roles/duplicate/:id');
   const toggleNotification = useNotification();
   const { lockApp, unlockApp } = useOverlayBlocker();
   const { formatMessage } = useIntl();
@@ -58,17 +59,30 @@ const CreatePage = () => {
   const { replace } = useHistory();
   const permissionsRef = useRef();
   const { trackUsage } = useTracking();
-  const params = useRouteMatch('/settings/roles/duplicate/:id');
-  const id = get(params, 'params.id', null);
-  const { isLoading: isLayoutLoading, data: permissionsLayout } = useFetchPermissionsLayout();
-  const { permissions: rolePermissions, isLoading: isRoleLoading } = useFetchRole(id);
   const { post, put } = useFetchClient();
 
+  const { params } = route ?? {};
+
+  const { isLoading: isLoadingPermissionsLayout, data: permissionsLayout } =
+    useAdminRolePermissionLayout(params?.id, {
+      cacheTime: 0,
+    });
+
+  const { permissions: rolePermissions, isLoading: isLoadingRole } = useAdminRolePermissions(
+    { id: params?.id },
+    {
+      cacheTime: 0,
+
+      // only fetch permissions if a role is cloned
+      enabled: !!params?.id,
+    }
+  );
+
   const handleCreateRoleSubmit = (data) => {
     lockApp();
     setIsSubmiting(true);
 
-    if (id) {
+    if (params?.id) {
       trackUsage('willDuplicateRole');
     } else {
       trackUsage('willCreateNewRole');
@@ -78,7 +92,7 @@ const CreatePage = () => {
       .then(async ({ data: res }) => {
         const { permissionsToSend } = permissionsRef.current.getPermissions();
 
-        if (id) {
+        if (params?.id) {
           trackUsage('didDuplicateRole');
         } else {
           trackUsage('didCreateNewRole');
@@ -213,6 +227,7 @@ const CreatePage = () => {
                               defaultMessage: 'Name',
                             })}
                             onChange={handleChange}
+                            required
                             value={values.name}
                           />
                         </GridItem>
@@ -232,7 +247,7 @@ const CreatePage = () => {
                       </Grid>
                     </Flex>
                   </Box>
-                  {!isLayoutLoading && !isRoleLoading ? (
+                  {!isLoadingPermissionsLayout && !isLoadingRole ? (
                     <Box shadow="filterShadow" hasRadius>
                       <Permissions
                         isFormDisabled={false}

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

@@ -65,6 +65,7 @@ const RoleForm = ({ disabled, role, values, errors, onChange, onBlur }) => {
               })}
               onChange={onChange}
               onBlur={onBlur}
+              required
               value={values.name || ''}
             />
           </GridItem>

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

@@ -5,6 +5,7 @@ import {
   Link,
   LoadingIndicatorPage,
   SettingsPageTitle,
+  useAPIErrorHandler,
   useFetchClient,
   useNotification,
   useOverlayBlocker,
@@ -12,11 +13,12 @@ import {
 } from '@strapi/helper-plugin';
 import { ArrowLeft } from '@strapi/icons';
 import { Formik } from 'formik';
-import get from 'lodash/get';
 import { useIntl } from 'react-intl';
 import { useRouteMatch } from 'react-router-dom';
 
-import { useFetchPermissionsLayout, useFetchRole } from '../../../../../hooks';
+import { useAdminRolePermissions } from '../../../../../hooks/useAdminRolePermissions';
+import { useAdminRoles } from '../../../../../hooks/useAdminRoles';
+import { useAdminRolePermissionLayout } from '../hooks/useAdminRolePermissionLayout';
 
 import { Permissions, RoleForm } from './components';
 import schema from './utils/schema';
@@ -27,21 +29,37 @@ const EditPage = () => {
   const {
     params: { id },
   } = useRouteMatch('/settings/roles/:id');
+  const { put } = useFetchClient();
   const [isSubmitting, setIsSubmiting] = useState(false);
   const permissionsRef = useRef();
   const { lockApp, unlockApp } = useOverlayBlocker();
   const { trackUsage } = useTracking();
+  const { formatAPIError } = useAPIErrorHandler();
+
+  const { isLoading: isLoadingPermissionsLayout, data: permissionsLayout } =
+    useAdminRolePermissionLayout(id, {
+      cacheTime: 0,
+    });
 
-  const { isLoading: isLayoutLoading, data: permissionsLayout } = useFetchPermissionsLayout(id);
   const {
-    role,
-    permissions: rolePermissions,
+    roles: [role = {}],
     isLoading: isRoleLoading,
-    onSubmitSucceeded,
-  } = useFetchRole(id);
+    refetch: refetchRole,
+  } = useAdminRoles(
+    { id },
+    {
+      cacheTime: 0,
+    }
+  );
 
-  const { put } = useFetchClient();
+  const { permissions, isLoading: isLoadingPermissions } = useAdminRolePermissions(
+    { id },
+    {
+      cacheTime: 0,
+    }
+  );
 
+  // TODO: this should use a react-query mutation
   const handleEditRoleSubmit = async (data) => {
     try {
       lockApp();
@@ -62,21 +80,17 @@ const EditPage = () => {
       }
 
       permissionsRef.current.setFormAfterSubmit();
-      onSubmitSucceeded({ name: data.name, description: data.description });
+
+      await refetchRole();
 
       toggleNotification({
         type: 'success',
         message: { id: 'notification.success.saved' },
       });
-    } catch (err) {
-      console.error(err.response);
-
-      const errorMessage = get(err, 'response.payload.message', 'An error occured');
-      const message = get(err, 'response.payload.data.permissions[0]', errorMessage);
-
+    } catch (error) {
       toggleNotification({
         type: 'warning',
-        message,
+        message: formatAPIError(error),
       });
     } finally {
       setIsSubmiting(false);
@@ -84,7 +98,7 @@ const EditPage = () => {
     }
   };
 
-  const isFormDisabled = role.code === 'strapi-super-admin';
+  const isFormDisabled = !isRoleLoading && role.code === 'strapi-super-admin';
 
   return (
     <Main>
@@ -137,7 +151,7 @@ const EditPage = () => {
             <ContentLayout>
               <Flex direction="column" alignItems="stretch" gap={6}>
                 <RoleForm
-                  isLoading={isRoleLoading}
+                  isLoading={isRoleLoading || isLoadingPermissions}
                   disabled={isFormDisabled}
                   errors={errors}
                   values={values}
@@ -145,11 +159,11 @@ const EditPage = () => {
                   onBlur={handleBlur}
                   role={role}
                 />
-                {!isLayoutLoading && !isRoleLoading ? (
+                {!isLoadingPermissionsLayout && !isRoleLoading && !isLoadingPermissions ? (
                   <Box shadow="filterShadow" hasRadius>
                     <Permissions
                       isFormDisabled={isFormDisabled}
-                      permissions={rolePermissions}
+                      permissions={permissions}
                       ref={permissionsRef}
                       layout={permissionsLayout}
                     />