@strapi/admin 4.12.4 → 4.12.6

package/admin/src/StrapiApp.js

@@ -22,7 +22,7 @@ import {
 } from './exposedHooks';
 import favicon from './favicon.png';
 import injectionZones from './injectionZones';
-import App from './pages/App';
+import { App } from './pages/App';
 import languageNativeNames from './translations/languageNativeNames';
 
 class StrapiApp {

package/admin/src/components/AuthenticatedApp.js

@@ -0,0 +1,229 @@
+import * as React from 'react';
+
+import {
+  AppInfoProvider,
+  auth,
+  LoadingIndicatorPage,
+  useFetchClient,
+  useGuidedTour,
+  useNotification,
+  useStrapiApp,
+} from '@strapi/helper-plugin';
+import { useQueries } from 'react-query';
+import { valid, lt } from 'semver';
+
+import packageJSON from '../../../package.json';
+import { useConfigurations } from '../hooks';
+import { Admin } from '../pages/Admin';
+import { getFullName } from '../utils/getFullName';
+import { hashAdminUserEmail } from '../utils/uniqueAdminHash';
+
+import RBACProvider from './RBACProvider';
+
+const strapiVersion = packageJSON.version;
+
+const checkLatestStrapiVersion = (currentPackageVersion, latestPublishedVersion) => {
+  if (!valid(currentPackageVersion) || !valid(latestPublishedVersion)) {
+    return false;
+  }
+
+  return lt(currentPackageVersion, latestPublishedVersion);
+};
+
+export const AuthenticatedApp = () => {
+  const { setGuidedTourVisibility } = useGuidedTour();
+  const toggleNotification = useNotification();
+  const userInfo = auth.getUserInfo();
+  const { get } = useFetchClient();
+  // TODO: replace with getDisplayName()
+  const [userDisplayName, setUserDisplayName] = React.useState(
+    userInfo?.userName ?? getFullName(userInfo.firstname, userInfo.lastname)
+  );
+  const [userId, setUserId] = React.useState(null);
+  const { showReleaseNotification } = useConfigurations();
+  const { plugins: appPlugins = {} } = useStrapiApp();
+  const [plugins, setPlugins] = React.useState(appPlugins);
+  const [
+    { data: appInfos, isLoading: isLoadingAppInfos },
+    { data: tagName },
+    { data: permissions, isLoading: isLoadingPermissions, refetch },
+    { data: userRoles },
+  ] = useQueries([
+    {
+      queryKey: 'information',
+      async queryFn() {
+        const {
+          data: { data },
+        } = await get('/admin/information');
+
+        return data;
+      },
+    },
+
+    {
+      queryKey: 'strapi-release',
+      async queryFn() {
+        const res = await fetch('https://api.github.com/repos/strapi/strapi/releases/latest');
+
+        if (!res.ok) {
+          throw new Error('Failed to fetch latest Strapi version.');
+        }
+
+        const { tag_name } = await res.json();
+
+        return tag_name;
+      },
+      enabled: showReleaseNotification,
+      initialData: strapiVersion,
+      onSuccess(data) {
+        const shouldUpdateStrapi = checkLatestStrapiVersion(strapiVersion, data.tag_name);
+
+        if (shouldUpdateStrapi && !JSON.parse(localStorage.getItem('STRAPI_UPDATE_NOTIF'))) {
+          toggleNotification({
+            type: 'info',
+            message: { id: 'notification.version.update.message' },
+            link: {
+              url: `https://github.com/strapi/strapi/releases/tag/${data.tag_name}`,
+              label: {
+                id: 'global.see-more',
+              },
+            },
+            blockTransition: true,
+            onClose: () => localStorage.setItem('STRAPI_UPDATE_NOTIF', true),
+          });
+        }
+      },
+      retry: false,
+    },
+    {
+      queryKey: ['users', 'me', 'permissions'],
+      async queryFn() {
+        const {
+          data: { data },
+        } = await get('/admin/users/me/permissions');
+
+        return data;
+      },
+      initialData: [],
+    },
+
+    {
+      queryKey: ['users', 'me'],
+      async queryFn() {
+        const {
+          data: {
+            data: { roles },
+          },
+        } = await get('/admin/users/me');
+
+        return roles;
+      },
+    },
+  ]);
+
+  // Display the guided tour conditionally for super admins in development mode
+  React.useEffect(() => {
+    if (userRoles) {
+      const isUserSuperAdmin = userRoles.find(({ code }) => code === 'strapi-super-admin');
+
+      if (isUserSuperAdmin && appInfos?.currentEnvironment === 'development') {
+        setGuidedTourVisibility(true);
+      }
+    }
+  }, [userRoles, appInfos, setGuidedTourVisibility]);
+
+  // Create a hash of the users email adress and use it as ID for tracking
+  React.useEffect(() => {
+    const generateUserId = async (userInfo) => {
+      const userId = await hashAdminUserEmail(userInfo);
+      setUserId(userId);
+    };
+
+    if (userInfo) {
+      generateUserId(userInfo);
+    }
+  }, [userInfo]);
+
+  /**
+   *
+   * I have spent some time trying to understand what is happening here, and wanted to
+   * leave that knowledge for my future me:
+   *
+   * `initializer` is an undocumented property of the `registerPlugin` API. At the time
+   * of writing it seems only to be used by the i18n plugin.
+   *
+   * How does it work?
+   *
+   * Every plugin that has an `initializer` component defined, receives the
+   * `setPlugin` function as a component prop. In the case of i18n the plugin fetches locales
+   * first and calls `setPlugin` with `pluginId` once they are loaded, which then triggers the
+   * reducer of the admin app defined above.
+   *
+   * Once all plugins are set to `isReady: true` the app renders.
+   *
+   * This API is used to block rendering of the admin app. We should remove that in v5 completely
+   * and make sure plugins can inject data into the global store before they are initialized, to avoid
+   * having a new prop-callback based communication channel between plugins and the core admin app.
+   *
+   */
+
+  const hasApluginNotReady = Object.values(plugins).some((plugin) => plugin.isReady === false);
+
+  if (
+    !userDisplayName ||
+    !userId ||
+    isLoadingAppInfos ||
+    isLoadingPermissions ||
+    hasApluginNotReady
+  ) {
+    const initializers = Object.keys(plugins).reduce((acc, current) => {
+      const InitializerComponent = plugins[current].initializer;
+
+      if (InitializerComponent) {
+        const key = plugins[current].pluginId;
+
+        acc.push(
+          <InitializerComponent
+            key={key}
+            setPlugin={(pluginId) => {
+              setPlugins((prev) => ({
+                ...prev,
+                [pluginId]: {
+                  ...prev[pluginId],
+                  isReady: true,
+                },
+              }));
+            }}
+          />
+        );
+      }
+
+      return acc;
+    }, []);
+
+    return (
+      <>
+        {initializers}
+        <LoadingIndicatorPage />
+      </>
+    );
+  }
+
+  return (
+    <AppInfoProvider
+      {...appInfos}
+      userId={userId}
+      latestStrapiReleaseTag={tagName}
+      // TODO: setUserDisplayName should not exist and be removed, as it is only used
+      // to update the displayName immediately, in case a user updates their profile.
+      // This information should be derived from the state.
+      setUserDisplayName={setUserDisplayName}
+      shouldUpdateStrapi={checkLatestStrapiVersion(strapiVersion, tagName)}
+      userDisplayName={userDisplayName}
+    >
+      <RBACProvider permissions={permissions} refetchPermissions={refetch}>
+        <Admin />
+      </RBACProvider>
+    </AppInfoProvider>
+  );
+};

package/admin/src/components/GuidedTour/Modal/index.js

@@ -9,7 +9,7 @@ import Modal from './components/Modal';
 import StepperModal from './components/Stepper';
 import reducer, { initialState } from './reducer';
 
-const GuidedTourModal = () => {
+export const GuidedTourModal = () => {
   const {
     currentStep,
     guidedTourState,
@@ -90,5 +90,3 @@ const GuidedTourModal = () => {
 
   return null;
 };
-
-export default GuidedTourModal;

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

@@ -61,7 +61,7 @@ function renderDraglayerItem({ type, item }) {
   }
 }
 
-const App = () => {
+export const ContentManger = () => {
   const contentTypeMatch = useRouteMatch(`/content-manager/:kind/:uid`);
   const { status, collectionTypeLinks, singleTypeLinks, models, refetchData } =
     useContentManagerInitData();
@@ -123,6 +123,10 @@ const App = () => {
 
   return (
     <Layout sideNav={<LeftMenu />}>
+      <Helmet
+        title={formatMessage({ id: getTrad('plugin.name'), defaultMessage: 'Content Manager' })}
+      />
+
       <DragLayer renderItem={renderDraglayerItem} />
       <ModelsContext.Provider value={{ refetchData }}>
         <Switch>
@@ -149,18 +153,3 @@ const App = () => {
     </Layout>
   );
 };
-
-export { App };
-
-export default function () {
-  const { formatMessage } = useIntl();
-
-  return (
-    <>
-      <Helmet
-        title={formatMessage({ id: getTrad('plugin.name'), defaultMessage: 'Content Manager' })}
-      />
-      <App />
-    </>
-  );
-}

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

@@ -5,7 +5,7 @@ import { useCMEditViewDataManager } from '@strapi/helper-plugin';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 
-import { getFullName } from '../../../../utils';
+import { getFullName } from '../../../../utils/getFullName';
 import { getTrad } from '../../../utils';
 
 import getUnits from './utils/getUnits';

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

@@ -32,7 +32,7 @@ import { useSelector } from 'react-redux';
 import { Link, useHistory } from 'react-router-dom';
 import styled from 'styled-components';
 
-import formatAPIError from '../../../../../../utils/formatAPIErrors';
+import { formatAPIErrors } from '../../../../../../utils/formatAPIErrors';
 import { getTrad, createYupSchema } from '../../../../../utils';
 import { listViewDomain } from '../../../selectors';
 import { Body } from '../../Body';
@@ -301,7 +301,7 @@ const SelectedEntriesModalContent = ({
       onError(error) {
         toggleNotification({
           type: 'warning',
-          message: formatAPIError(error),
+          message: formatAPIErrors(error),
         });
       },
     }

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

@@ -23,7 +23,7 @@ import { useIntl } from 'react-intl';
 import { Link, useHistory } from 'react-router-dom';
 
 import { useEnterprise } from '../../../../../hooks/useEnterprise';
-import { getFullName } from '../../../../../utils';
+import { getFullName } from '../../../../../utils/getFullName';
 import { usePluginsQueryParams } from '../../../../hooks';
 import { getTrad } from '../../../../utils';
 import CellContent from '../CellContent';

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;
   }