@strapi/admin 4.12.4 → 4.12.5

package/admin/src/content-manager/components/Wysiwyg/WysiwygNav.js

@@ -64,22 +64,16 @@ const WysiwygNav = ({
           </Select>
 
           <MainButtons>
-            <CustomIconButton disabled id="Bold" label="Bold" name="Bold" icon={<Bold />} />
-            <CustomIconButton disabled id="Italic" label="Italic" name="Italic" icon={<Italic />} />
-            <CustomIconButton
-              disabled
-              id="Underline"
-              label="Underline"
-              name="Underline"
-              icon={<Underline />}
-            />
+            <CustomIconButton disabled label="Bold" name="Bold" icon={<Bold />} />
+            <CustomIconButton disabled label="Italic" name="Italic" icon={<Italic />} />
+            <CustomIconButton disabled label="Underline" name="Underline" icon={<Underline />} />
           </MainButtons>
 
-          <MoreButton disabled id="more" label="More" icon={<More />} />
+          <MoreButton disabled label="More" icon={<More />} />
         </StyledFlex>
 
         {!isExpandMode && (
-          <Button onClick={onTogglePreviewMode} variant="tertiary" id="preview">
+          <Button onClick={onTogglePreviewMode} variant="tertiary">
             {formatMessage({
               id: 'components.Wysiwyg.ToggleMode.markdown-mode',
               defaultMessage: 'Markdown mode',
@@ -110,21 +104,18 @@ const WysiwygNav = ({
         <MainButtons>
           <CustomIconButton
             onClick={() => onActionClick('Bold', editorRef)}
-            id="Bold"
             label="Bold"
             name="Bold"
             icon={<Bold />}
           />
           <CustomIconButton
             onClick={() => onActionClick('Italic', editorRef)}
-            id="Italic"
             label="Italic"
             name="Italic"
             icon={<Italic />}
           />
           <CustomIconButton
             onClick={() => onActionClick('Underline', editorRef)}
-            id="Underline"
             label="Underline"
             name="Underline"
             icon={<Underline />}
@@ -134,37 +125,27 @@ const WysiwygNav = ({
         <MoreButton
           ref={buttonMoreRef}
           onClick={handleTogglePopover}
-          id="more"
           label="More"
           icon={<More />}
         />
         {visiblePopover && (
-          <Popover
-            onDismiss={handleTogglePopover}
-            centered
-            source={buttonMoreRef}
-            spacing={4}
-            id="popover"
-          >
+          <Popover onDismiss={handleTogglePopover} centered source={buttonMoreRef} spacing={4}>
             <Flex>
               <IconButtonGroupMargin>
                 <CustomIconButton
                   onClick={() => onActionClick('Strikethrough', editorRef, handleTogglePopover)}
-                  id="Strikethrough"
                   label="Strikethrough"
                   name="Strikethrough"
                   icon={<StrikeThrough />}
                 />
                 <CustomIconButton
                   onClick={() => onActionClick('BulletList', editorRef, handleTogglePopover)}
-                  id="BulletList"
                   label="BulletList"
                   name="BulletList"
                   icon={<BulletList />}
                 />
                 <CustomIconButton
                   onClick={() => onActionClick('NumberList', editorRef, handleTogglePopover)}
-                  id="NumberList"
                   label="NumberList"
                   name="NumberList"
                   icon={<NumberList />}
@@ -173,7 +154,6 @@ const WysiwygNav = ({
               <IconButtonGroup>
                 <CustomIconButton
                   onClick={() => onActionClick('Code', editorRef, handleTogglePopover)}
-                  id="Code"
                   label="Code"
                   name="Code"
                   icon={<Code />}
@@ -183,14 +163,12 @@ const WysiwygNav = ({
                     handleTogglePopover();
                     onToggleMediaLib();
                   }}
-                  id="Image"
                   label="Image"
                   name="Image"
                   icon={<Image />}
                 />
                 <CustomLinkIconButton
                   onClick={() => onActionClick('Link', editorRef, handleTogglePopover)}
-                  id="Link"
                   label="Link"
                   name="Link"
                   // eslint-disable-next-line jsx-a11y/anchor-is-valid
@@ -198,7 +176,6 @@ const WysiwygNav = ({
                 />
                 <CustomIconButton
                   onClick={() => onActionClick('Quote', editorRef, handleTogglePopover)}
-                  id="Quote"
                   label="Quote"
                   name="Quote"
                   icon={<Quote />}
@@ -210,7 +187,7 @@ const WysiwygNav = ({
       </StyledFlex>
 
       {onTogglePreviewMode && (
-        <Button onClick={onTogglePreviewMode} variant="tertiary" id="preview">
+        <Button onClick={onTogglePreviewMode} variant="tertiary">
           {formatMessage({
             id: 'components.Wysiwyg.ToggleMode.preview-mode',
             defaultMessage: 'Preview mode',

package/admin/src/content-manager/hooks/useSyncRbac/index.js

@@ -6,9 +6,10 @@ import { resetPermissions, setPermissions } from './actions';
 import { selectCollectionTypePermissions, selectPermissions } from './selectors';
 
 const useSyncRbac = (query, collectionTypeUID, containerName = 'listView') => {
+  const dispatch = useDispatch();
+
   const collectionTypesRelatedPermissions = useSelector(selectCollectionTypePermissions);
   const permissions = useSelector(selectPermissions);
-  const dispatch = useDispatch();
 
   const relatedPermissions = collectionTypesRelatedPermissions[collectionTypeUID];
 
@@ -24,7 +25,14 @@ const useSyncRbac = (query, collectionTypeUID, containerName = 'listView') => {
     return () => {};
   }, [relatedPermissions, dispatch, query, containerName]);
 
-  return permissions;
+  // Check if the permissions are related to the current collectionTypeUID
+  const isPermissionMismatch =
+    permissions?.some((permission) => permission.subject !== collectionTypeUID) ?? true;
+
+  return {
+    isValid: permissions && !isPermissionMismatch,
+    permissions,
+  };
 };
 
 export default useSyncRbac;

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

@@ -12,7 +12,7 @@ import { useFetchContentTypeLayout } from '../../hooks';
 import { formatLayoutToApi } from '../../utils';
 import EditSettingsView from '../EditSettingsView';
 import EditViewLayoutManager from '../EditViewLayoutManager';
-import ListSettingsView from '../ListSettingsView';
+import { ListSettingsView } from '../ListSettingsView';
 import ListViewLayout from '../ListViewLayoutManager';
 
 import ErrorFallback from './components/ErrorFallback';

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

@@ -16,7 +16,7 @@ const EditViewLayoutManager = ({ layout, ...rest }) => {
   const dispatch = useDispatch();
   const [{ query }] = useQueryParams();
   const { runHookWaterfall } = useStrapiApp();
-  const permissions = useSyncRbac(query, rest.slug, 'editView');
+  const { permissions, isValid: isValidPermissions } = useSyncRbac(query, rest.slug, 'editView');
 
   useEffect(() => {
     // Allow the plugins to extend the edit view layout
@@ -29,7 +29,7 @@ const EditViewLayoutManager = ({ layout, ...rest }) => {
     };
   }, [layout, dispatch, query, runHookWaterfall]);
 
-  if (!currentLayout || !permissions) {
+  if (!currentLayout || !isValidPermissions) {
     return <LoadingIndicatorPage />;
   }
 

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

@@ -1,4 +1,4 @@
-import React, { useContext, useReducer, useState } from 'react';
+import * as React from 'react';
 
 import {
   Button,
@@ -9,13 +9,7 @@ import {
   Layout,
   Main,
 } from '@strapi/design-system';
-import {
-  ConfirmDialog,
-  Link,
-  useFetchClient,
-  useNotification,
-  useTracking,
-} from '@strapi/helper-plugin';
+import { Link, useFetchClient, useNotification, useTracking } from '@strapi/helper-plugin';
 import { ArrowLeft, Check } from '@strapi/icons';
 import isEqual from 'lodash/isEqual';
 import upperFirst from 'lodash/upperFirst';
@@ -34,16 +28,14 @@ import { SortDisplayedFields } from './components/SortDisplayedFields';
 import { EXCLUDED_SORT_ATTRIBUTE_TYPES } from './constants';
 import reducer, { initialState } from './reducer';
 
-const ListSettingsView = ({ layout, slug }) => {
+export const ListSettingsView = ({ layout, slug }) => {
   const { put } = useFetchClient();
   const { formatMessage } = useIntl();
   const { trackUsage } = useTracking();
   const pluginsQueryParams = usePluginsQueryParams();
   const toggleNotification = useNotification();
-  const { refetchData } = useContext(ModelsContext);
-  const [showWarningSubmit, setWarningSubmit] = useState(false);
-  const toggleWarningSubmit = () => setWarningSubmit((prevState) => !prevState);
-  const [{ fieldToEdit, fieldForm, initialData, modifiedData }, dispatch] = useReducer(
+  const { refetchData } = React.useContext(ModelsContext);
+  const [{ fieldToEdit, fieldForm, initialData, modifiedData }, dispatch] = React.useReducer(
     reducer,
     initialState,
     () => ({
@@ -101,16 +93,6 @@ const ListSettingsView = ({ layout, slug }) => {
     }
   );
 
-  const handleConfirm = async () => {
-    const { layouts, settings, metadatas } = modifiedData;
-
-    mutate({
-      layouts,
-      settings,
-      metadatas,
-    });
-  };
-
   const handleAddField = (item) => {
     dispatch({
       type: 'ADD_FIELD',
@@ -134,9 +116,17 @@ const ListSettingsView = ({ layout, slug }) => {
     }
   };
 
-  const handleSubmit = (e) => {
-    e.preventDefault();
-    toggleWarningSubmit();
+  const handleSubmit = (event) => {
+    event.preventDefault();
+
+    const { layouts, settings, metadatas } = modifiedData;
+
+    mutate({
+      layouts,
+      settings,
+      metadatas,
+    });
+
     trackUsage('willSaveContentTypeLayout');
   };
 
@@ -253,19 +243,6 @@ const ListSettingsView = ({ layout, slug }) => {
               />
             </Flex>
           </ContentLayout>
-
-          <ConfirmDialog
-            bodyText={{
-              id: getTrad('popUpWarning.warning.updateAllSettings'),
-              defaultMessage: 'This will modify all your settings',
-            }}
-            iconRightButton={<Check />}
-            isConfirmButtonLoading={isSubmittingForm}
-            isOpen={showWarningSubmit}
-            onToggleDialog={toggleWarningSubmit}
-            onConfirm={handleConfirm}
-            variantRightButton="success-light"
-          />
         </form>
 
         {isModalFormOpen && (
@@ -305,5 +282,3 @@ ListSettingsView.propTypes = {
   }).isRequired,
   slug: PropTypes.string.isRequired,
 };
-
-export default ListSettingsView;

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

@@ -180,6 +180,22 @@ function ListView({
           data: { results, pagination: paginationResult },
         } = await fetchClient.get(endPoint, options);
 
+        // If user enters a page number that doesn't exist, redirect him to the last page
+        if (paginationResult.page > paginationResult.pageCount && paginationResult.pageCount > 0) {
+          const query = {
+            ...params,
+            page: paginationResult.pageCount,
+          };
+
+          push({
+            pathname,
+            state: { from: pathname },
+            search: stringify(query),
+          });
+
+          return;
+        }
+
         notifyStatus(
           formatMessage(
             {
@@ -219,7 +235,17 @@ function ListView({
         });
       }
     },
-    [formatMessage, getData, getDataSucceeded, notifyStatus, push, toggleNotification, fetchClient]
+    [
+      formatMessage,
+      getData,
+      getDataSucceeded,
+      notifyStatus,
+      push,
+      toggleNotification,
+      fetchClient,
+      params,
+      pathname,
+    ]
   );
 
   const handleConfirmDeleteAllData = React.useCallback(

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

@@ -14,7 +14,7 @@ const ListViewLayout = ({ layout, ...props }) => {
   const dispatch = useDispatch();
   const { replace } = useHistory();
   const [{ query, rawQuery }] = useQueryParams();
-  const permissions = useSyncRbac(query, props.slug, 'listView');
+  const { permissions, isValid: isValidPermissions } = useSyncRbac(query, props.slug, 'listView');
   const redirectionLink = useFindRedirectionLink(props.slug);
 
   useEffect(() => {
@@ -33,7 +33,7 @@ const ListViewLayout = ({ layout, ...props }) => {
     };
   }, [dispatch]);
 
-  if (!permissions) {
+  if (!isValidPermissions) {
     return null;
   }
 

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

@@ -70,7 +70,6 @@ const MarketPlacePage = () => {
           id: 'admin.pages.MarketPlacePage.production',
           defaultMessage: 'Manage plugins from the development environment',
         },
-        blockTransition: true,
       });
     }
   }, [toggleNotification, isInDevelopmentMode]);

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

@@ -1,11 +1,12 @@
-import React, { useEffect, useRef } from 'react';
+import * as React from 'react';
 
-import { Button, ContentLayout, HeaderLayout, Main } from '@strapi/design-system';
+import { ContentLayout, HeaderLayout, Main } from '@strapi/design-system';
 import {
   LinkButton,
   NoContent,
   NoPermissions,
   SettingsPageTitle,
+  useAPIErrorHandler,
   useFetchClient,
   useFocusWhenNavigate,
   useGuidedTour,
@@ -38,16 +39,17 @@ const ApiTokenListView = () => {
   const { push } = useHistory();
   const { trackUsage } = useTracking();
   const { startSection } = useGuidedTour();
-  const startSectionRef = useRef(startSection);
+  const startSectionRef = React.useRef(startSection);
   const { get, del } = useFetchClient();
+  const { formatAPIError } = useAPIErrorHandler();
 
-  useEffect(() => {
+  React.useEffect(() => {
     if (startSectionRef.current) {
       startSectionRef.current('apiTokens');
     }
   }, []);
 
-  useEffect(() => {
+  React.useEffect(() => {
     push({ search: qs.stringify({ sort: 'name:ASC' }, { encode: false }) });
   }, [push]);
 
@@ -59,16 +61,13 @@ const ApiTokenListView = () => {
     },
   }));
 
-  const {
-    data: apiTokens,
-    status,
-    isFetching,
-  } = useQuery(
+  const { data: apiTokens, isLoading: isLoadingTokens } = useQuery(
     ['api-tokens'],
     async () => {
       trackUsage('willAccessTokenList', {
         tokenType: API_TOKEN_TYPE,
       });
+
       const {
         data: { data },
       } = await get(`/admin/api-tokens`);
@@ -78,19 +77,18 @@ const ApiTokenListView = () => {
       return data;
     },
     {
+      cacheTime: 0,
       enabled: canRead,
-      onError() {
+      onError(error) {
         toggleNotification({
           type: 'warning',
-          message: { id: 'notification.error', defaultMessage: 'An error occured' },
+          message: formatAPIError(error),
         });
       },
     }
   );
 
-  const isLoading =
-    canRead &&
-    ((status !== 'success' && status !== 'error') || (status === 'success' && isFetching));
+  const isLoading = isLoadingTokens;
 
   const deleteMutation = useMutation(
     async (id) => {
@@ -101,25 +99,20 @@ const ApiTokenListView = () => {
         await queryClient.invalidateQueries(['api-tokens']);
         trackUsage('didDeleteToken');
       },
-      onError(err) {
-        if (err?.response?.data?.data) {
-          toggleNotification({ type: 'warning', message: err.response.data.data });
-        } else {
-          toggleNotification({
-            type: 'warning',
-            message: { id: 'notification.error', defaultMessage: 'An error occured' },
-          });
-        }
+      onError(error) {
+        toggleNotification({ type: 'warning', message: formatAPIError(error) });
       },
     }
   );
 
-  const shouldDisplayDynamicTable = canRead && apiTokens;
-  const shouldDisplayNoContent = canRead && !apiTokens && !canCreate;
-  const shouldDisplayNoContentWithCreationButton = canRead && !apiTokens && canCreate;
+  const hasApiTokens = apiTokens && apiTokens.length > 0;
+  const shouldDisplayDynamicTable = canRead && hasApiTokens;
+  const shouldDisplayNoContent = canRead && !hasApiTokens && !canCreate;
+  const shouldDisplayNoContentWithCreationButton = canRead && !hasApiTokens && canCreate;
 
   return (
     <Main aria-busy={isLoading}>
+      {/* TODO: this needs to be translated */}
       <SettingsPageTitle name="API Tokens" />
       <HeaderLayout
         title={formatMessage({ id: 'Settings.apiTokens.title', defaultMessage: 'API Tokens' })}
@@ -128,7 +121,7 @@ const ApiTokenListView = () => {
           defaultMessage: 'List of generated tokens to consume the API',
         })}
         primaryAction={
-          canCreate ? (
+          canCreate && (
             <LinkButton
               data-testid="create-api-token-button"
               startIcon={<Plus />}
@@ -145,7 +138,7 @@ const ApiTokenListView = () => {
                 defaultMessage: 'Create new API Token',
               })}
             </LinkButton>
-          ) : undefined
+          )
         }
       />
       <ContentLayout>
@@ -169,12 +162,12 @@ const ApiTokenListView = () => {
               defaultMessage: 'Add your first API Token',
             }}
             action={
-              <Button variant="secondary" startIcon={<Plus />}>
+              <LinkButton variant="secondary" startIcon={<Plus />} to="/settings/api-tokens/create">
                 {formatMessage({
                   id: 'Settings.apiTokens.addNewToken',
                   defaultMessage: 'Add new API Token',
                 })}
-              </Button>
+              </LinkButton>
             }
           />
         )}

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

@@ -1,6 +1,6 @@
 import React, { useEffect, useRef } from 'react';
 
-import { Button, ContentLayout, HeaderLayout, Main } from '@strapi/design-system';
+import { ContentLayout, HeaderLayout, Main } from '@strapi/design-system';
 import {
   LinkButton,
   NoContent,
@@ -136,9 +136,10 @@ const TransferTokenListView = () => {
     }
   );
 
-  const shouldDisplayDynamicTable = canRead && transferTokens;
-  const shouldDisplayNoContent = canRead && !transferTokens && !canCreate;
-  const shouldDisplayNoContentWithCreationButton = canRead && !transferTokens && canCreate;
+  const hasTransferTokens = transferTokens && transferTokens?.length > 0;
+  const shouldDisplayDynamicTable = canRead && hasTransferTokens;
+  const shouldDisplayNoContent = canRead && !hasTransferTokens && !canCreate;
+  const shouldDisplayNoContentWithCreationButton = canRead && !hasTransferTokens && canCreate;
 
   return (
     <Main aria-busy={isLoading}>
@@ -194,12 +195,16 @@ const TransferTokenListView = () => {
               defaultMessage: 'Add your first Transfer Token',
             }}
             action={
-              <Button variant="secondary" startIcon={<Plus />}>
+              <LinkButton
+                variant="secondary"
+                startIcon={<Plus />}
+                to="/settings/transfer-tokens/create"
+              >
                 {formatMessage({
                   id: 'Settings.transferTokens.addNewToken',
                   defaultMessage: 'Add new Transfer Token',
                 })}
-              </Button>
+              </LinkButton>
             }
           />
         )}

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

@@ -71,6 +71,8 @@ const EditPage = ({ canUpdate }) => {
   } = useAdminUsers(
     { id },
     {
+      cacheTime: 0,
+
       onError(error) {
         const { status } = error.response;
 

package/admin/src/pages/SettingsPage/pages/Users/ListPage/index.js

@@ -52,6 +52,7 @@ export const UserListPageCE = () => {
     isLoading,
     refetch: refetchAdminUsers,
   } = useAdminUsers(qs.parse(search, { ignoreQueryPrefix: true }), {
+    cacheTime: 0,
     enabled: canRead,
   });
   const CreateAction = useEnterprise(