@strapi/admin 4.11.5 → 4.11.6

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

@@ -159,7 +159,7 @@ const SingleTypeFormWrapper = ({ allLayoutData, children, slug }) => {
         trackUsageRef.current('willDeleteEntry', trackerProperty);
 
         const { data } = await del(getRequestUrl(slug), {
-          params: query,
+          params,
         });
 
         toggleNotification({
@@ -181,7 +181,7 @@ const SingleTypeFormWrapper = ({ allLayoutData, children, slug }) => {
         return Promise.reject(err);
       }
     },
-    [del, slug, displayErrors, toggleNotification, query, dispatch, rawQuery]
+    [del, slug, params, toggleNotification, dispatch, rawQuery, displayErrors]
   );
 
   const onPost = useCallback(
@@ -265,7 +265,7 @@ const SingleTypeFormWrapper = ({ allLayoutData, children, slug }) => {
         endPoint,
         {},
         {
-          params: query,
+          params,
         }
       );
 
@@ -287,7 +287,7 @@ const SingleTypeFormWrapper = ({ allLayoutData, children, slug }) => {
 
       return Promise.reject(err);
     }
-  }, [post, cleanReceivedData, displayErrors, slug, query, dispatch, toggleNotification]);
+  }, [slug, dispatch, post, params, toggleNotification, cleanReceivedData, displayErrors]);
 
   const onPut = useCallback(
     async (body, trackerProperty) => {
@@ -341,7 +341,7 @@ const SingleTypeFormWrapper = ({ allLayoutData, children, slug }) => {
         endPoint,
         {},
         {
-          params: query,
+          params,
         }
       );
 
@@ -358,7 +358,7 @@ const SingleTypeFormWrapper = ({ allLayoutData, children, slug }) => {
       dispatch(setStatus('resolved'));
       displayErrors(err);
     }
-  }, [post, cleanReceivedData, toggleNotification, displayErrors, slug, dispatch, query]);
+  }, [slug, dispatch, post, params, toggleNotification, cleanReceivedData, displayErrors]);
 
   return children({
     componentsDataStructure,

package/admin/src/content-manager/pages/EditSettingsView/components/DisplayedFields.js

@@ -1,6 +1,7 @@
 import React from 'react';
 
-import { Box, Button, Flex, MenuItem, SimpleMenu, Typography } from '@strapi/design-system';
+import { Box, Flex, Typography } from '@strapi/design-system';
+import { Menu } from '@strapi/design-system/v2';
 import { Plus } from '@strapi/icons';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
@@ -41,26 +42,27 @@ const DisplayedFields = ({ editLayout, fields, onRemoveField, onAddField }) => {
           {editLayout.map((row, index) => (
             <RowsLayout key={row.rowId} row={row} rowIndex={index} onRemoveField={onRemoveField} />
           ))}
-          <SimpleMenu
-            id="label"
-            label={formatMessage({
-              id: getTrad('containers.SettingPage.add.field'),
-              defaultMessage: 'Insert another field',
-            })}
-            as={Button}
-            data-testid="add-field"
-            fullWidth
-            startIcon={<Plus />}
-            endIcon={null}
-            variant="secondary"
-            disabled={fields.length === 0}
-          >
-            {fields.map((field) => (
-              <MenuItem key={field} onClick={() => onAddField(field)}>
-                {field}
-              </MenuItem>
-            ))}
-          </SimpleMenu>
+          <Menu.Root>
+            <Menu.Trigger
+              startIcon={<Plus />}
+              endIcon={null}
+              disabled={fields.length === 0}
+              fullWidth
+              variant="secondary"
+            >
+              {formatMessage({
+                id: getTrad('containers.SettingPage.add.field'),
+                defaultMessage: 'Insert another field',
+              })}
+            </Menu.Trigger>
+            <Menu.Content>
+              {fields.map((field) => (
+                <Menu.Item key={field} onSelect={() => onAddField(field)}>
+                  {field}
+                </Menu.Item>
+              ))}
+            </Menu.Content>
+          </Menu.Root>
         </Flex>
       </Box>
     </Flex>

package/admin/src/content-manager/pages/EditSettingsView/components/ModalForm.js

@@ -105,32 +105,30 @@ const ModalForm = ({ onMetaChange, onSizeChange }) => {
   const { type, customField } = attributes[selectedField];
   const { isResizable } = fieldSizes[customField] ?? fieldSizes[type];
 
-  const sizeField = (
-    <GridItem col={6} key="size">
-      <Select
-        value={fieldForm?.size}
-        name="size"
-        onChange={(value) => {
-          onSizeChange({ name: selectedField, value });
-        }}
-        label={formatMessage({
-          id: getTrad('containers.SettingPage.editSettings.size.label'),
-          defaultMessage: 'Size',
-        })}
-      >
-        {FIELD_SIZES.map(([value, label]) => (
-          <Option key={value} value={value}>
-            {label}
-          </Option>
-        ))}
-      </Select>
-    </GridItem>
-  );
-
   return (
     <>
       {metaFields}
-      {isResizable && sizeField}
+      {isResizable && (
+        <GridItem col={6} key="size">
+          <Select
+            value={fieldForm?.size}
+            name="size"
+            onChange={(value) => {
+              onSizeChange({ name: selectedField, value });
+            }}
+            label={formatMessage({
+              id: getTrad('containers.SettingPage.editSettings.size.label'),
+              defaultMessage: 'Size',
+            })}
+          >
+            {FIELD_SIZES.map(([value, label]) => (
+              <Option key={value} value={value}>
+                {label}
+              </Option>
+            ))}
+          </Select>
+        </GridItem>
+      )}
     </>
   );
 };

package/admin/src/content-manager/pages/EditView/Information/index.js

@@ -124,7 +124,7 @@ Root.propTypes = {
   children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
 };
 
-export default {
+export const Information = {
   Root,
   Title,
   Body,

package/admin/src/content-manager/pages/EditView/InformationBox/InformationBoxCE.js

@@ -1,8 +1,7 @@
 import React from 'react';
 
-import Information from '../Information';
+import { Information } from '../Information';
 
-// This component is overwritten by the EE counterpart
 export function InformationBoxCE() {
   return (
     <Information.Root>

package/admin/src/content-manager/pages/EditView/InformationBox/index.js

@@ -1,3 +1 @@
-import { InformationBoxCE } from './InformationBoxCE';
-
-export default InformationBoxCE;
+export * from './InformationBoxCE';

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

@@ -9,12 +9,12 @@ import {
   useTracking,
 } from '@strapi/helper-plugin';
 import { Layer, Pencil } from '@strapi/icons';
-import InformationBox from 'ee_else_ce/content-manager/pages/EditView/InformationBox';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 import { useSelector } from 'react-redux';
 import { useLocation } from 'react-router-dom';
 
+import { useEnterprise } from '../../../hooks/useEnterprise';
 import { selectAdminPermissions } from '../../../pages/App/selectors';
 import { InjectionZone } from '../../../shared/components';
 import CollectionTypeFormWrapper from '../../components/CollectionTypeFormWrapper';
@@ -29,6 +29,7 @@ import DraftAndPublishBadge from './DraftAndPublishBadge';
 import GridRow from './GridRow';
 import Header from './Header';
 import { useOnce } from './hooks/useOnce';
+import { InformationBoxCE } from './InformationBox';
 import { selectCurrentLayout, selectAttributesLayout, selectCustomFieldUids } from './selectors';
 import { getFieldsActionMatchingPermissions } from './utils';
 
@@ -42,6 +43,12 @@ const EditView = ({ allowedActions, isSingleType, goBack, slug, id, origin, user
   const permissions = useSelector(selectAdminPermissions);
   const location = useLocation();
   const toggleNotification = useNotification();
+  const Information = useEnterprise(
+    InformationBoxCE,
+    async () =>
+      (await import('../../../../../ee/admin/content-manager/pages/EditView/InformationBox'))
+        .InformationBoxEE
+  );
 
   useOnce(() => {
     /**
@@ -91,6 +98,11 @@ const EditView = ({ allowedActions, isSingleType, goBack, slug, id, origin, user
     return <LoadingIndicatorPage />;
   }
 
+  // wait until the EE component is fully loaded before rendering, to prevent flickering
+  if (!Information) {
+    return null;
+  }
+
   return (
     <DataManagementWrapper allLayoutData={layout} slug={slug} id={id} origin={origin}>
       {({
@@ -202,7 +214,7 @@ const EditView = ({ allowedActions, isSingleType, goBack, slug, id, origin, user
                         paddingTop={6}
                         shadow="tableShadow"
                       >
-                        <InformationBox />
+                        <Information />
                         <InjectionZone area="contentManager.editView.informations" />
                       </Box>
                       <Box as="aside" aria-labelledby="links">

package/admin/src/content-manager/pages/ListSettingsView/components/SortDisplayedFields.js

@@ -1,6 +1,7 @@
 import React, { useEffect, useRef, useState } from 'react';
 
-import { Box, Flex, IconButton, MenuItem, SimpleMenu, Typography } from '@strapi/design-system';
+import { Box, Flex, VisuallyHidden, Typography } from '@strapi/design-system';
+import { Menu } from '@strapi/design-system/v2';
 import { Plus } from '@strapi/icons';
 import { PropTypes } from 'prop-types';
 import { useIntl } from 'react-intl';
@@ -10,19 +11,12 @@ import { getTrad } from '../../../utils';
 
 import DraggableCard from './DraggableCard';
 
-const FlexWrapper = styled(Box)`
+const ScrollableContainer = styled(Box)`
   flex: ${({ size }) => size};
-`;
-
-const ScrollableContainer = styled(FlexWrapper)`
   overflow-x: scroll;
   overflow-y: hidden;
 `;
 
-const SelectContainer = styled(FlexWrapper)`
-  max-width: ${32 / 16}rem;
-`;
-
 const SortDisplayedFields = ({
   displayedFields,
   listRemainingFields,
@@ -89,24 +83,32 @@ const SortDisplayedFields = ({
             ))}
           </Flex>
         </ScrollableContainer>
-        <SelectContainer size="auto" paddingBottom={4}>
-          <SimpleMenu
-            label={formatMessage({
-              id: getTrad('components.FieldSelect.label'),
-              defaultMessage: 'Add a field',
-            })}
-            as={IconButton}
-            icon={<Plus />}
+        <Menu.Root>
+          <Menu.Trigger
+            paddingLeft={2}
+            paddingRight={2}
+            justifyContent="center"
+            endIcon={null}
             disabled={listRemainingFields.length <= 0}
-            data-testid="add-field"
+            marginBottom={4}
+            variant="tertiary"
           >
+            <VisuallyHidden as="span">
+              {formatMessage({
+                id: getTrad('components.FieldSelect.label'),
+                defaultMessage: 'Add a field',
+              })}
+            </VisuallyHidden>
+            <Plus aria-hidden focusable={false} style={{ position: 'relative', top: 2 }} />
+          </Menu.Trigger>
+          <Menu.Content>
             {listRemainingFields.map((field) => (
-              <MenuItem key={field} onClick={() => handleAddField(field)}>
+              <Menu.Item key={field} onSelect={() => handleAddField(field)}>
                 {metadatas[field].list.label || field}
-              </MenuItem>
+              </Menu.Item>
             ))}
-          </SimpleMenu>
-        </SelectContainer>
+          </Menu.Content>
+        </Menu.Root>
       </Flex>
     </>
   );

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

@@ -1,16 +1,8 @@
-import React, { useMemo, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 
-import {
-  Badge,
-  Box,
-  Flex,
-  Loader,
-  MenuItem,
-  SimpleMenu,
-  Typography,
-  useNotifyAT,
-} from '@strapi/design-system';
-import { stopPropagation, useFetchClient } from '@strapi/helper-plugin';
+import { Badge, Flex, Loader, Typography, useNotifyAT } from '@strapi/design-system';
+import { Menu } from '@strapi/design-system/v2';
+import { useFetchClient } from '@strapi/helper-plugin';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 import { useQuery } from 'react-query';
@@ -19,54 +11,24 @@ import styled from 'styled-components';
 import { getRequestUrl, getTrad } from '../../../../../utils';
 import CellValue from '../CellValue';
 
-const TypographyMaxWidth = styled(Typography)`
-  max-width: 500px;
-`;
-
-const fetchRelation = async (endPoint, notifyStatus, get) => {
-  const {
-    data: { results, pagination },
-  } = await get(endPoint);
-
-  notifyStatus();
-
-  return { results, pagination };
-};
-
 const RelationMultiple = ({ fieldSchema, metadatas, name, entityId, value, contentType }) => {
   const { formatMessage } = useIntl();
   const { notifyStatus } = useNotifyAT();
-  const relationFetchEndpoint = useMemo(
-    () => getRequestUrl(`relations/${contentType.uid}/${entityId}/${name.split('.')[0]}`),
-    [entityId, name, contentType]
-  );
   const [isOpen, setIsOpen] = useState(false);
-  const { get } = useFetchClient();
-
-  const Label = (
-    <Flex gap={1} wrap="nowrap">
-      <Badge>{value.count}</Badge>
-      {formatMessage(
-        {
-          id: 'content-manager.containers.ListPage.items',
-          defaultMessage: '{number, plural, =0 {items} one {item} other {items}}',
-        },
-        { number: value.count }
-      )}
-    </Flex>
-  );
 
-  const notify = () => {
-    const message = formatMessage({
-      id: getTrad('DynamicTable.relation-loaded'),
-      defaultMessage: 'Relations have been loaded',
-    });
-    notifyStatus(message);
-  };
+  const { get } = useFetchClient();
 
   const { data, status } = useQuery(
     [fieldSchema.targetModel, entityId],
-    () => fetchRelation(relationFetchEndpoint, notify, get),
+    async () => {
+      const {
+        data: { results, pagination },
+      } = await get(
+        getRequestUrl(`relations/${contentType.uid}/${entityId}/${name.split('.')[0]}`)
+      );
+
+      return { results, pagination };
+    },
     {
       enabled: isOpen,
       staleTime: 0,
@@ -77,40 +39,58 @@ const RelationMultiple = ({ fieldSchema, metadatas, name, entityId, value, conte
     }
   );
 
+  useEffect(() => {
+    if (data) {
+      notifyStatus(
+        formatMessage({
+          id: getTrad('DynamicTable.relation-loaded'),
+          defaultMessage: 'Relations have been loaded',
+        })
+      );
+    }
+  }, [data, formatMessage, notifyStatus]);
+
   return (
-    <Box {...stopPropagation}>
-      <SimpleMenu
-        label={Label}
-        size="S"
-        onOpen={() => setIsOpen(true)}
-        onClose={() => setIsOpen(false)}
-      >
+    <Menu.Root onOpenChange={(isOpen) => setIsOpen(isOpen)}>
+      <MenuTrigger onClick={(e) => e.stopPropagation()}>
+        <Flex gap={1} wrap="nowrap">
+          <Badge>{value.count}</Badge>
+          {formatMessage(
+            {
+              id: 'content-manager.containers.ListPage.items',
+              defaultMessage: '{number, plural, =0 {items} one {item} other {items}}',
+            },
+            { number: value.count }
+          )}
+        </Flex>
+      </MenuTrigger>
+      <Menu.Content>
         {status !== 'success' && (
-          <MenuItem aria-disabled>
+          <Menu.Item disabled>
             <Loader small>
               {formatMessage({
                 id: getTrad('DynamicTable.relation-loading'),
                 defaultMessage: 'Relations are loading',
               })}
             </Loader>
-          </MenuItem>
+          </Menu.Item>
         )}
 
         {status === 'success' && (
           <>
             {data?.results.map((entry) => (
-              <MenuItem key={entry.id} aria-disabled>
+              <Menu.Item key={entry.id} disabled>
                 <TypographyMaxWidth ellipsis>
                   <CellValue
                     type={metadatas.mainField.schema.type}
                     value={entry[metadatas.mainField.name] || entry.id}
                   />
                 </TypographyMaxWidth>
-              </MenuItem>
+              </Menu.Item>
             ))}
 
             {data?.pagination.total > 10 && (
-              <MenuItem
+              <Menu.Item
                 aria-disabled
                 aria-label={formatMessage({
                   id: getTrad('DynamicTable.relation-more'),
@@ -118,12 +98,12 @@ const RelationMultiple = ({ fieldSchema, metadatas, name, entityId, value, conte
                 })}
               >
                 <Typography>…</Typography>
-              </MenuItem>
+              </Menu.Item>
             )}
           </>
         )}
-      </SimpleMenu>
-    </Box>
+      </Menu.Content>
+    </Menu.Root>
   );
 };
 
@@ -147,4 +127,18 @@ RelationMultiple.propTypes = {
   value: PropTypes.object.isRequired,
 };
 
+const TypographyMaxWidth = styled(Typography)`
+  max-width: 500px;
+`;
+
+/**
+ * TODO: this needs to be solved in the Design-System
+ */
+const MenuTrigger = styled(Menu.Trigger)`
+  svg {
+    width: ${6 / 16}rem;
+    height: ${4 / 16}rem;
+  }
+`;
+
 export default RelationMultiple;

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

@@ -1,7 +1,7 @@
 import React from 'react';
 
-import { Badge, Box, MenuItem, SimpleMenu, Typography } from '@strapi/design-system';
-import { stopPropagation } from '@strapi/helper-plugin';
+import { Badge, Typography } from '@strapi/design-system';
+import { Menu } from '@strapi/design-system/v2';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 import styled from 'styled-components';
@@ -18,31 +18,28 @@ const RepeatableComponentCell = ({ value, metadatas }) => {
     mainField: { type: mainFieldType, name: mainFieldName },
   } = metadatas;
 
-  const Label = (
-    <>
-      <Badge>{value.length}</Badge>{' '}
-      {formatMessage(
-        {
-          id: 'content-manager.containers.ListPage.items',
-          defaultMessage: '{number, plural, =0 {items} one {item} other {items}}',
-        },
-        { number: value.length }
-      )}
-    </>
-  );
-
   return (
-    <Box {...stopPropagation}>
-      <SimpleMenu label={Label} size="S">
+    <Menu.Root>
+      <MenuTrigger onClick={(e) => e.stopPropagation()}>
+        <Badge>{value.length}</Badge>{' '}
+        {formatMessage(
+          {
+            id: 'content-manager.containers.ListPage.items',
+            defaultMessage: '{number, plural, =0 {items} one {item} other {items}}',
+          },
+          { number: value.length }
+        )}
+      </MenuTrigger>
+      <Menu.Content>
         {value.map((item) => (
-          <MenuItem key={item.id} aria-disabled>
+          <Menu.Item key={item.id} disabled>
             <TypographyMaxWidth ellipsis>
               <CellValue type={mainFieldType} value={item[mainFieldName] || item.id} />
             </TypographyMaxWidth>
-          </MenuItem>
+          </Menu.Item>
         ))}
-      </SimpleMenu>
-    </Box>
+      </Menu.Content>
+    </Menu.Root>
   );
 };
 
@@ -57,4 +54,14 @@ RepeatableComponentCell.propTypes = {
   value: PropTypes.array.isRequired,
 };
 
+/**
+ * TODO: this needs to be solved in the Design-System
+ */
+const MenuTrigger = styled(Menu.Trigger)`
+  svg {
+    width: ${6 / 16}rem;
+    height: ${4 / 16}rem;
+  }
+`;
+
 export default RepeatableComponentCell;

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

@@ -193,6 +193,10 @@ export const TableRows = ({
                 );
               }
 
+              if (typeof cellFormatter === 'function') {
+                return <Td key={key}>{cellFormatter(data, { key, name, ...rest })}</Td>;
+              }
+
               return (
                 <Td key={key}>
                   <CellContent

package/admin/src/layouts/UnauthenticatedLayout/LocaleToggle/index.js

@@ -6,7 +6,7 @@
 
 import React from 'react';
 
-import { MenuItem, SimpleMenu } from '@strapi/design-system';
+import { SingleSelect, SingleSelectOption } from '@strapi/design-system';
 import { useIntl } from 'react-intl';
 
 import useLocalesProvider from '../../../components/LocalesProvider/useLocalesProvider';
@@ -16,13 +16,13 @@ const LocaleToggle = () => {
   const { locale } = useIntl();
 
   return (
-    <SimpleMenu label={localeNames[locale]}>
-      {Object.keys(localeNames).map((lang) => (
-        <MenuItem onClick={() => changeLocale(lang)} key={lang}>
-          {localeNames[lang]}
-        </MenuItem>
+    <SingleSelect value={locale} onChange={(language) => changeLocale(language)}>
+      {Object.entries(localeNames).map(([language, name]) => (
+        <SingleSelectOption key={language} value={language}>
+          {name}
+        </SingleSelectOption>
       ))}
-    </SimpleMenu>
+    </SingleSelect>
   );
 };
 

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

@@ -6,7 +6,7 @@ import UnauthenticatedLayout from '../../../../layouts/UnauthenticatedLayout';
 
 import BaseLogin from './BaseLogin';
 
-const Login = (loginProps) => {
+export const LoginCE = (loginProps) => {
   return (
     <UnauthenticatedLayout>
       <BaseLogin {...loginProps} />
@@ -14,12 +14,10 @@ const Login = (loginProps) => {
   );
 };
 
-Login.defaultProps = {
+LoginCE.defaultProps = {
   onSubmit: (e) => e.preventDefault(),
 };
 
-Login.propTypes = {
+LoginCE.propTypes = {
   onSubmit: PropTypes.func,
 };
-
-export default Login;

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

@@ -1,5 +1,4 @@
 import { translatedErrors } from '@strapi/helper-plugin';
-import Login from 'ee_else_ce/pages/AuthPage/components/Login';
 import * as yup from 'yup';
 
 import ForgotPassword from './components/ForgotPassword';
@@ -27,8 +26,10 @@ export const FORMS = {
     schema: null,
     inputsPrefix: '',
   },
+
+  // the `Component` attribute is set after all forms and CE/EE components are loaded, but since we
+  // are here outside of a React component we can not use the hook directly
   login: {
-    Component: Login,
     endPoint: 'login',
     fieldsToDisable: [],
     fieldsToOmit: ['rememberMe'],