@strapi/admin 4.13.0-beta.0 → 4.13.1

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

@@ -1,4 +1,4 @@
-import React, { useRef, useState } from 'react';
+import React, { forwardRef, useRef, useState } from 'react';
 
 import { Box, Flex, Typography } from '@strapi/design-system';
 import { prefixFileUrlWithBackendUrl, useLibrary } from '@strapi/helper-plugin';
@@ -30,160 +30,155 @@ const TypographyAsterisk = styled(Typography)`
   line-height: 0;
 `;
 
-const Wysiwyg = ({
-  hint,
-  disabled,
-  error,
-  intlLabel,
-  labelAction,
-  name,
-  onChange,
-  placeholder,
-  value,
-  required,
-}) => {
-  const { formatMessage } = useIntl();
-  const textareaRef = useRef(null);
-  const editorRef = useRef(null);
-  const [isPreviewMode, setIsPreviewMode] = useState(false);
-  const [mediaLibVisible, setMediaLibVisible] = useState(false);
-  const [isExpandMode, setIsExpandMode] = useState(false);
-  const { components } = useLibrary();
-
-  const MediaLibraryDialog = components['media-library'];
-
-  const handleToggleMediaLib = () => setMediaLibVisible((prev) => !prev);
-  const handleTogglePreviewMode = () => setIsPreviewMode((prev) => !prev);
-  const handleToggleExpand = () => {
-    setIsPreviewMode(false);
-    setIsExpandMode((prev) => !prev);
-  };
-
-  const handleActionClick = (value, currentEditorRef, togglePopover) => {
-    switch (value) {
-      case 'Link':
-      case 'Strikethrough': {
-        markdownHandler(currentEditorRef, value);
-        togglePopover();
-        break;
+const Wysiwyg = forwardRef(
+  (
+    { hint, disabled, error, intlLabel, labelAction, name, onChange, placeholder, value, required },
+    forwardedRef
+  ) => {
+    const { formatMessage } = useIntl();
+    const textareaRef = useRef(null);
+    const editorRef = useRef(null);
+    const [isPreviewMode, setIsPreviewMode] = useState(false);
+    const [mediaLibVisible, setMediaLibVisible] = useState(false);
+    const [isExpandMode, setIsExpandMode] = useState(false);
+    const { components } = useLibrary();
+
+    const MediaLibraryDialog = components['media-library'];
+
+    const handleToggleMediaLib = () => setMediaLibVisible((prev) => !prev);
+    const handleTogglePreviewMode = () => setIsPreviewMode((prev) => !prev);
+    const handleToggleExpand = () => {
+      setIsPreviewMode(false);
+      setIsExpandMode((prev) => !prev);
+    };
+
+    const handleActionClick = (value, currentEditorRef, togglePopover) => {
+      switch (value) {
+        case 'Link':
+        case 'Strikethrough': {
+          markdownHandler(currentEditorRef, value);
+          togglePopover();
+          break;
+        }
+        case 'Code':
+        case 'Quote': {
+          quoteAndCodeHandler(currentEditorRef, value);
+          togglePopover();
+          break;
+        }
+        case 'Bold':
+        case 'Italic':
+        case 'Underline': {
+          markdownHandler(currentEditorRef, value);
+          break;
+        }
+        case 'BulletList':
+        case 'NumberList': {
+          listHandler(currentEditorRef, value);
+          togglePopover();
+          break;
+        }
+        case 'h1':
+        case 'h2':
+        case 'h3':
+        case 'h4':
+        case 'h5':
+        case 'h6': {
+          titleHandler(currentEditorRef, value);
+          break;
+        }
+        default: {
+          // Nothing
+        }
       }
-      case 'Code':
-      case 'Quote': {
-        quoteAndCodeHandler(currentEditorRef, value);
-        togglePopover();
-        break;
-      }
-      case 'Bold':
-      case 'Italic':
-      case 'Underline': {
-        markdownHandler(currentEditorRef, value);
-        break;
-      }
-      case 'BulletList':
-      case 'NumberList': {
-        listHandler(currentEditorRef, value);
-        togglePopover();
-        break;
-      }
-      case 'h1':
-      case 'h2':
-      case 'h3':
-      case 'h4':
-      case 'h5':
-      case 'h6': {
-        titleHandler(currentEditorRef, value);
-        break;
-      }
-      default: {
-        // Nothing
-      }
-    }
-  };
-
-  const handleSelectAssets = (files) => {
-    const formattedFiles = files.map((f) => ({
-      alt: f.alternativeText || f.name,
-      url: prefixFileUrlWithBackendUrl(f.url),
-      mime: f.mime,
-    }));
-
-    insertFile(editorRef, formattedFiles);
-    setMediaLibVisible(false);
-  };
-
-  const formattedPlaceholder = placeholder
-    ? formatMessage(
-        { id: placeholder.id, defaultMessage: placeholder.defaultMessage },
-        { ...placeholder.values }
-      )
-    : '';
-
-  const label = intlLabel.id
-    ? formatMessage(
-        { id: intlLabel.id, defaultMessage: intlLabel.defaultMessage },
-        { ...intlLabel.values }
-      )
-    : name;
-
-  return (
-    <>
-      <Flex direction="column" alignItems="stretch" gap={1}>
-        <Flex gap={1}>
-          <Typography variant="pi" fontWeight="bold" textColor="neutral800">
-            {label}
-            {required && <TypographyAsterisk textColor="danger600">*</TypographyAsterisk>}
-          </Typography>
-          {labelAction && <LabelAction paddingLeft={1}>{labelAction}</LabelAction>}
-        </Flex>
-
-        <EditorLayout
-          isExpandMode={isExpandMode}
-          error={error}
-          previewContent={value}
-          onCollapse={handleToggleExpand}
-        >
-          <WysiwygNav
-            isExpandMode={isExpandMode}
-            editorRef={editorRef}
-            isPreviewMode={isPreviewMode}
-            onActionClick={handleActionClick}
-            onToggleMediaLib={handleToggleMediaLib}
-            onTogglePreviewMode={isExpandMode ? undefined : handleTogglePreviewMode}
-            disabled={disabled}
-          />
-
-          <Editor
-            disabled={disabled}
+    };
+
+    const handleSelectAssets = (files) => {
+      const formattedFiles = files.map((f) => ({
+        alt: f.alternativeText || f.name,
+        url: prefixFileUrlWithBackendUrl(f.url),
+        mime: f.mime,
+      }));
+
+      insertFile(editorRef, formattedFiles);
+      setMediaLibVisible(false);
+    };
+
+    const formattedPlaceholder = placeholder
+      ? formatMessage(
+          { id: placeholder.id, defaultMessage: placeholder.defaultMessage },
+          { ...placeholder.values }
+        )
+      : '';
+
+    const label = intlLabel.id
+      ? formatMessage(
+          { id: intlLabel.id, defaultMessage: intlLabel.defaultMessage },
+          { ...intlLabel.values }
+        )
+      : name;
+
+    return (
+      <>
+        <Flex direction="column" alignItems="stretch" gap={1}>
+          <Flex gap={1}>
+            <Typography variant="pi" fontWeight="bold" textColor="neutral800">
+              {label}
+              {required && <TypographyAsterisk textColor="danger600">*</TypographyAsterisk>}
+            </Typography>
+            {labelAction && <LabelAction paddingLeft={1}>{labelAction}</LabelAction>}
+          </Flex>
+
+          <EditorLayout
             isExpandMode={isExpandMode}
-            editorRef={editorRef}
             error={error}
-            isPreviewMode={isPreviewMode}
-            name={name}
-            onChange={onChange}
-            placeholder={formattedPlaceholder}
-            textareaRef={textareaRef}
-            value={value}
-          />
-
-          {!isExpandMode && <WysiwygFooter onToggleExpand={handleToggleExpand} />}
-        </EditorLayout>
-        <Hint hint={hint} name={name} error={error} />
-      </Flex>
-
-      {error && (
-        <Box paddingTop={1}>
-          <Typography variant="pi" textColor="danger600" data-strapi-field-error>
-            {error}
-          </Typography>
-        </Box>
-      )}
-
-      {mediaLibVisible && (
-        <MediaLibraryDialog onClose={handleToggleMediaLib} onSelectAssets={handleSelectAssets} />
-      )}
-    </>
-  );
-};
+            previewContent={value}
+            onCollapse={handleToggleExpand}
+          >
+            <WysiwygNav
+              isExpandMode={isExpandMode}
+              editorRef={editorRef}
+              isPreviewMode={isPreviewMode}
+              onActionClick={handleActionClick}
+              onToggleMediaLib={handleToggleMediaLib}
+              onTogglePreviewMode={isExpandMode ? undefined : handleTogglePreviewMode}
+              disabled={disabled}
+            />
+
+            <Editor
+              disabled={disabled}
+              isExpandMode={isExpandMode}
+              editorRef={editorRef}
+              error={error}
+              isPreviewMode={isPreviewMode}
+              name={name}
+              onChange={onChange}
+              placeholder={formattedPlaceholder}
+              textareaRef={textareaRef}
+              value={value}
+              ref={forwardedRef}
+            />
+
+            {!isExpandMode && <WysiwygFooter onToggleExpand={handleToggleExpand} />}
+          </EditorLayout>
+          <Hint hint={hint} name={name} error={error} />
+        </Flex>
+
+        {error && (
+          <Box paddingTop={1}>
+            <Typography variant="pi" textColor="danger600" data-strapi-field-error>
+              {error}
+            </Typography>
+          </Box>
+        )}
+
+        {mediaLibVisible && (
+          <MediaLibraryDialog onClose={handleToggleMediaLib} onSelectAssets={handleSelectAssets} />
+        )}
+      </>
+    );
+  }
+);
 
 Wysiwyg.defaultProps = {
   disabled: false,

package/admin/src/content-manager/constants/attributes.js

@@ -0,0 +1,3 @@
+const CREATOR_FIELDS = ['createdBy', 'updatedBy'];
+
+export { CREATOR_FIELDS };

package/admin/src/content-manager/hooks/useAllowedAttributes.js

@@ -1,8 +1,9 @@
 import { useRBACProvider, findMatchingPermissions } from '@strapi/helper-plugin';
 
+import { CREATOR_FIELDS } from '../constants/attributes';
+
 const NOT_ALLOWED_FILTERS = ['json', 'component', 'media', 'richtext', 'dynamiczone', 'password'];
 const TIMESTAMPS = ['createdAt', 'updatedAt'];
-const CREATOR_ATTRIBUTES = ['createdBy', 'updatedBy'];
 
 export const useAllowedAttributes = (contentType, slug) => {
   const { allPermissions } = useRBACProvider();
@@ -38,10 +39,5 @@ export const useAllowedAttributes = (contentType, slug) => {
     return true;
   });
 
-  return [
-    'id',
-    ...allowedAttributes,
-    ...TIMESTAMPS,
-    ...(canReadAdminUsers ? CREATOR_ATTRIBUTES : []),
-  ];
+  return ['id', ...allowedAttributes, ...TIMESTAMPS, ...(canReadAdminUsers ? CREATOR_FIELDS : [])];
 };

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/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');
   };
 
@@ -257,19 +247,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 && (
@@ -309,5 +286,3 @@ ListSettingsView.propTypes = {
   }).isRequired,
   slug: PropTypes.string.isRequired,
 };
-
-export default ListSettingsView;

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

@@ -32,7 +32,13 @@ export const ViewSettingsMenu = ({ slug, layout }) => {
         onClick={handleToggle}
       />
       {isVisible && (
-        <Popover placement="bottom-end" source={cogButtonRef} onDismiss={handleToggle} padding={2}>
+        <Popover
+          placement="bottom-end"
+          source={cogButtonRef}
+          onDismiss={handleToggle}
+          spacing={4}
+          padding={3}
+        >
           <Flex alignItems="stretch" direction="column" gap={3}>
             <CheckPermissions
               permissions={permissions.contentManager.collectionTypesConfigurations}

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

@@ -49,6 +49,7 @@ import { useEnterprise } from '../../../hooks/useEnterprise';
 import { InjectionZone } from '../../../shared/components';
 import { Filter } from '../../components/Filter';
 import { AdminUsersFilter } from '../../components/Filter/CustomInputs/AdminUsersFilter';
+import { CREATOR_FIELDS } from '../../constants/attributes';
 import { useAllowedAttributes } from '../../hooks/useAllowedAttributes';
 import { getTrad, getDisplayName } from '../../utils';
 
@@ -63,8 +64,7 @@ import { buildValidGetParams } from './utils';
 const REVIEW_WORKFLOW_COLUMNS_CE = null;
 const REVIEW_WORKFLOW_COLUMNS_CELL_CE = () => null;
 const REVIEW_WORKFLOW_FILTER_CE = [];
-const CREATOR_ATTRIBUTES = ['createdBy', 'updatedBy'];
-const USER_FILTER_ATTRIBUTES = [...CREATOR_ATTRIBUTES, 'strapi_assignee'];
+const USER_FILTER_ATTRIBUTES = [...CREATOR_FIELDS, 'strapi_assignee'];
 
 function ListView({
   canCreate,
@@ -785,9 +785,7 @@ function ListView({
                                 <Td key={key}>
                                   {rowData.strapi_assignee ? (
                                     <ReviewWorkflowsColumns.ReviewWorkflowsAssigneeEE
-                                      firstname={rowData.strapi_assignee.firstname}
-                                      lastname={rowData?.strapi_assignee?.lastname}
-                                      displayname={rowData?.strapi_assignee?.username}
+                                      user={rowData.strapi_assignee}
                                     />
                                   ) : (
                                     <Typography textColor="neutral800">-</Typography>
@@ -808,6 +806,17 @@ function ListView({
                             );
                           }
 
+                          if (['createdBy', 'updatedBy'].includes(name.split('.')[0])) {
+                            // Display the users full name
+                            return (
+                              <Td key={key}>
+                                <Typography textColor="neutral800">
+                                  {getDisplayName(rowData[name.split('.')[0]], formatMessage)}
+                                </Typography>
+                              </Td>
+                            );
+                          }
+
                           if (typeof cellFormatter === 'function') {
                             return (
                               <Td key={key}>{cellFormatter(rowData, { key, name, ...rest })}</Td>

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

@@ -42,7 +42,9 @@ const ProfilePage = lazy(() =>
   import(/* webpackChunkName: "Admin_profilePage" */ '../ProfilePage')
 );
 const SettingsPage = lazy(() =>
-  import(/* webpackChunkName: "Admin_settingsPage" */ '../SettingsPage')
+  import(/* webpackChunkName: "Admin_settingsPage" */ '../SettingsPage').then((module) => ({
+    default: module.SettingsPage,
+  }))
 );
 
 // Simple hook easier for testing

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

@@ -29,6 +29,7 @@ import { useIntl } from 'react-intl';
 import { useHistory } from 'react-router-dom';
 import styled from 'styled-components';
 
+import { useNpsSurveySettings } from '../../../../components/NpsSurvey/hooks/useNpsSurveySettings';
 import Logo from '../../../../components/UnauthenticatedLogo';
 import UnauthenticatedLayout, { LayoutContent } from '../../../../layouts/UnauthenticatedLayout';
 import FieldActionWrapper from '../FieldActionWrapper';
@@ -55,6 +56,7 @@ const Register = ({ authType, fieldsToDisable, noSignin, onSubmit, schema }) =>
   const query = useQuery();
   const { formatAPIError } = useAPIErrorHandler();
   const { get } = useFetchClient();
+  const { setNpsSurveySettings } = useNpsSurveySettings();
 
   const registrationToken = query.get('registrationToken');
 
@@ -143,6 +145,9 @@ const Register = ({ authType, fieldsToDisable, noSignin, onSubmit, schema }) =>
               } else {
                 onSubmit(normalizedData, formik);
               }
+
+              // Only enable EE survey if user accepted the newsletter
+              setNpsSurveySettings({ enabled: data.news });
             } catch (err) {
               const errors = getYupInnerErrors(err);
               setSubmitCount(submitCount + 1);

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

@@ -12,14 +12,14 @@ import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 import { NavLink, useLocation } from 'react-router-dom';
 
-import { getSectionsToDisplay } from '../../utils';
-
 const SettingsNav = ({ menu }) => {
   const { formatMessage } = useIntl();
   const { trackUsage } = useTracking();
   const { pathname } = useLocation();
 
-  const filteredMenu = getSectionsToDisplay(menu);
+  const filteredMenu = menu.filter(
+    (section) => !section.links.every((link) => link.isDisplayed === false)
+  );
 
   const sections = filteredMenu.map((section) => {
     return {

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

@@ -1,15 +1,4 @@
-/**
- *
- * SettingsPage
- *
- */
-
-// NOTE TO PLUGINS DEVELOPERS:
-// If you modify this file you also need to update the documentation accordingly
-// Here's the file: strapi/docs/3.0.0-beta.x/plugin-development/frontend-settings-api.md
-// IF THE DOC IS NOT UPDATED THE PULL REQUEST WILL NOT BE MERGED
-
-import React, { memo, useMemo } from 'react';
+import * as React from 'react';
 
 import { Layout } from '@strapi/design-system';
 import { LoadingIndicatorPage, useStrapiApp } from '@strapi/helper-plugin';
@@ -19,14 +8,14 @@ import { Redirect, Route, Switch, useParams } from 'react-router-dom';
 
 import { useSettingsMenu } from '../../hooks';
 import { useEnterprise } from '../../hooks/useEnterprise';
-import { createRoute, makeUniqueRoutes } from '../../utils';
+import createRoute from '../../utils/createRoute';
+import makeUniqueRoutes from '../../utils/makeUniqueRoutes';
 
 import SettingsNav from './components/SettingsNav';
 import { ROUTES_CE } from './constants';
 import ApplicationInfosPage from './pages/ApplicationInfosPage';
-import { createSectionsRoutes } from './utils';
 
-function SettingsPage() {
+export function SettingsPage() {
   const { settingId } = useParams();
   const { settings } = useStrapiApp();
   const { formatMessage } = useIntl();
@@ -43,13 +32,17 @@ function SettingsPage() {
   );
 
   // Creates the admin routes
-  const adminRoutes = useMemo(() => {
+  const adminRoutes = React.useMemo(() => {
     return makeUniqueRoutes(
       routes.map(({ to, Component, exact }) => createRoute(Component, to, exact))
     );
   }, [routes]);
 
-  const pluginsRoutes = createSectionsRoutes(settings);
+  const pluginsRoutes = Object.values(settings).flatMap((section) => {
+    const { links } = section;
+
+    return links.map((link) => createRoute(link.Component, link.to, link.exact || false));
+  });
 
   // Since the useSettingsMenu hook can make API calls in order to check the links permissions
   // We need to add a loading state to prevent redirecting the user while permissions are being checked
@@ -61,14 +54,14 @@ function SettingsPage() {
     return <Redirect to="/settings/application-infos" />;
   }
 
-  const settingTitle = formatMessage({
-    id: 'global.settings',
-    defaultMessage: 'Settings',
-  });
-
   return (
     <Layout sideNav={<SettingsNav menu={menu} />}>
-      <Helmet title={settingTitle} />
+      <Helmet
+        title={formatMessage({
+          id: 'global.settings',
+          defaultMessage: 'Settings',
+        })}
+      />
 
       <Switch>
         <Route path="/settings/application-infos" component={ApplicationInfosPage} exact />
@@ -78,6 +71,3 @@ function SettingsPage() {
     </Layout>
   );
 }
-
-export default memo(SettingsPage);
-export { SettingsPage };