@strapi/admin 4.0.2 → 4.0.3

package/admin/src/components/LeftMenu/index.js

@@ -149,7 +149,7 @@ const LeftMenu = ({ generalSectionLinks, pluginsSectionLinks }) => {
         >
           <FocusTrap onEscape={handleToggleUserLinks}>
             <Stack size={0}>
-              <LinkUser onClick={handleToggleUserLinks} to="/me">
+              <LinkUser tabIndex={0} onClick={handleToggleUserLinks} to="/me">
                 <Typography>
                   {formatMessage({
                     id: 'app.components.LeftMenu.profile',
@@ -157,7 +157,7 @@ const LeftMenu = ({ generalSectionLinks, pluginsSectionLinks }) => {
                   })}
                 </Typography>
               </LinkUser>
-              <LinkUser onClick={handleLogout} logout="logout" to="/auth/login">
+              <LinkUser tabIndex={0} onClick={handleLogout} logout="logout" to="/auth/login">
                 <Typography textColor="danger600">
                   {formatMessage({
                     id: 'app.components.LeftMenu.logout',

package/admin/src/content-manager/components/DynamicTable/CellContent/CellValue.js

@@ -1,6 +1,7 @@
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 import toString from 'lodash/toString';
+import { getNumberOfDecimals } from './utils/getNumberOfDecimals';
 
 const CellValue = ({ type, value }) => {
   const { formatDate, formatTime, formatNumber } = useIntl();
@@ -27,8 +28,17 @@ const CellValue = ({ type, value }) => {
     });
   }
 
-  if (['float', 'integer', 'biginteger', 'decimal'].includes(type)) {
-    formattedValue = formatNumber(value);
+  if (['float', 'decimal'].includes(type)) {
+    const numberOfDecimals = getNumberOfDecimals(value);
+
+    formattedValue = formatNumber(value, {
+      minimumFractionDigits: numberOfDecimals,
+      maximumFractionDigits: numberOfDecimals,
+    });
+  }
+
+  if (['integer', 'biginteger'].includes(type)) {
+    formattedValue = formatNumber(value, { maximumFractionDigits: 0 });
   }
 
   return toString(formattedValue);

package/admin/src/content-manager/components/DynamicTable/CellContent/utils/getNumberOfDecimals.js

@@ -0,0 +1,8 @@
+export const getNumberOfDecimals = value => {
+  if (value % 1 !== 0) {
+    // value has decimals
+    return value.toString().split('.')[1].length;
+  }
+
+  return 0;
+};

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

@@ -32,6 +32,7 @@ const InputUID = ({
   onChange,
   value,
   placeholder,
+  required,
 }) => {
   const { modifiedData, initialData, layout } = useCMEditViewDataManager();
   const [isLoading, setIsLoading] = useState(false);
@@ -244,6 +245,7 @@ const InputUID = ({
       onChange={handleChange}
       placeholder={formattedPlaceholder}
       value={value || ''}
+      required={required}
     />
   );
 };
@@ -275,6 +277,7 @@ InputUID.propTypes = {
     defaultMessage: PropTypes.string.isRequired,
     values: PropTypes.object,
   }),
+  required: PropTypes.bool,
 };
 
 InputUID.defaultProps = {
@@ -284,6 +287,7 @@ InputUID.defaultProps = {
   labelAction: undefined,
   placeholder: undefined,
   value: '',
+  required: false,
 };
 
 export default InputUID;

package/admin/src/content-manager/components/PreviewWysiwyg/Wrapper.js

@@ -47,6 +47,10 @@ const Wrapper = styled.div`
     font-weight: 800;
   }
 
+  em {
+    font-style: italic;
+  }
+
   blockquote {
     margin-top: 41px;
     margin-bottom: 34px;

package/admin/src/content-manager/components/RepeatableComponent/DraggedItem/IconButtonCustoms.js

@@ -20,10 +20,6 @@ export const CustomIconButton = styled(IconButton)`
   }
 `;
 
-export const DragHandleWrapper = styled(CustomIconButton)`
-  cursor: move;
-`;
-
 export const CustomIconButtonSibling = styled(IconButton)`
   background-color: transparent;
 

package/admin/src/content-manager/components/RepeatableComponent/DraggedItem/index.js

@@ -3,12 +3,14 @@ import React, { memo, useEffect, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
 import { useDrag, useDrop } from 'react-dnd';
 import { getEmptyImage } from 'react-dnd-html5-backend';
+import styled from 'styled-components';
 import { useIntl } from 'react-intl';
 import toString from 'lodash/toString';
 import { Accordion, AccordionToggle, AccordionContent } from '@strapi/design-system/Accordion';
 import { Grid, GridItem } from '@strapi/design-system/Grid';
 import { Stack } from '@strapi/design-system/Stack';
 import { Box } from '@strapi/design-system/Box';
+import { Tooltip } from '@strapi/design-system/Tooltip';
 import Trash from '@strapi/icons/Trash';
 import Drag from '@strapi/icons/Drag';
 import ItemTypes from '../../../utils/ItemTypes';
@@ -17,9 +19,23 @@ import Inputs from '../../Inputs';
 import FieldComponent from '../../FieldComponent';
 import Preview from './Preview';
 import DraggingSibling from './DraggingSibling';
-import { CustomIconButton, DragHandleWrapper } from './IconButtonCustoms';
+import { CustomIconButton } from './IconButtonCustoms';
 import { connect, select } from './utils';
 
+const DragButton = styled.span`
+  display: flex;
+  align-items: center;
+  height: ${({ theme }) => theme.spaces[7]};
+
+  padding: 0 ${({ theme }) => theme.spaces[3]};
+  cursor: all-scroll;
+
+  svg {
+    width: ${12 / 16}rem;
+    height: ${12 / 16}rem;
+  }
+`;
+
 /* eslint-disable react/no-array-index-key */
 
 // Issues:
@@ -40,7 +56,7 @@ const DraggedItem = ({
   // Retrieved from the select function
   moveComponentField,
   removeRepeatableField,
-  setIsDraggingSiblig,
+  setIsDraggingSibling,
   triggerFormValidation,
   // checkFormErrors,
   displayedValue,
@@ -125,7 +141,7 @@ const DraggedItem = ({
     end: () => {
       // Update the errors
       triggerFormValidation();
-      setIsDraggingSiblig(false);
+      setIsDraggingSibling(false);
     },
     collect: monitor => ({
       isDragging: monitor.isDragging(),
@@ -138,9 +154,9 @@ const DraggedItem = ({
 
   useEffect(() => {
     if (isDragging) {
-      setIsDraggingSiblig(true);
+      setIsDraggingSibling(true);
     }
-  }, [isDragging, setIsDraggingSiblig]);
+  }, [isDragging, setIsDraggingSibling]);
 
   // Effect in order to force a rerender after reordering the components
   // Since we are removing the Accordion when doing the DnD  we are losing the dragRef, therefore the replaced element cannot be dragged
@@ -195,16 +211,22 @@ const DraggedItem = ({
                     })}
                     icon={<Trash />}
                   />
-                  <DragHandleWrapper
-                    expanded={isOpen}
-                    icon={<Drag />}
-                    label={formatMessage({
+                  {/* react-dnd is broken in firefox with our IconButton, maybe a ref issue */}
+                  <Tooltip
+                    description={formatMessage({
                       id: getTrad('components.DragHandle-label'),
                       defaultMessage: 'Drag',
                     })}
-                    noBorder
-                    ref={refs.dragRef}
-                  />
+                  >
+                    <DragButton
+                      role="button"
+                      tabIndex={-1}
+                      ref={refs.dragRef}
+                      onClick={e => e.stopPropagation()}
+                    >
+                      <Drag />
+                    </DragButton>
+                  </Tooltip>
                 </Stack>
               )
             }
@@ -268,7 +290,7 @@ const DraggedItem = ({
 DraggedItem.defaultProps = {
   isDraggingSibling: false,
   isOpen: false,
-  setIsDraggingSiblig: () => {},
+  setIsDraggingSibling: () => {},
   toggleCollapses: () => {},
 };
 
@@ -284,7 +306,7 @@ DraggedItem.propTypes = {
   toggleCollapses: PropTypes.func,
   moveComponentField: PropTypes.func.isRequired,
   removeRepeatableField: PropTypes.func.isRequired,
-  setIsDraggingSiblig: PropTypes.func,
+  setIsDraggingSibling: PropTypes.func,
   triggerFormValidation: PropTypes.func.isRequired,
   // checkFormErrors: PropTypes.func.isRequired,
   displayedValue: PropTypes.string.isRequired,

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

@@ -47,7 +47,7 @@ const RepeatableComponent = ({
   const toggleNotification = useNotification();
   const { formatMessage } = useIntl();
   const [collapseToOpen, setCollapseToOpen] = useState('');
-  const [isDraggingSibling, setIsDraggingSiblig] = useState(false);
+  const [isDraggingSibling, setIsDraggingSibling] = useState(false);
   const [, drop] = useDrop({ accept: ItemTypes.COMPONENT });
   const { getComponentLayout } = useContentTypeLayout();
   const componentLayoutData = useMemo(() => getComponentLayout(componentUid), [
@@ -173,7 +173,7 @@ const RepeatableComponent = ({
               }}
               parentName={name}
               schema={componentLayoutData}
-              setIsDraggingSiblig={setIsDraggingSiblig}
+              setIsDraggingSibling={setIsDraggingSibling}
               toggleCollapses={toggleCollapses}
             />
           );

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

@@ -43,14 +43,20 @@ const App = () => {
     );
   }
 
+  // Array of models that are displayed in the content manager
+  const supportedModelsToDisplay = models.filter(({ isDisplayed }) => isDisplayed);
+
   // Redirect the user to the 403 page
-  // FIXME when changing the routing
-  if (authorisedModels.length === 0 && models.length > 0 && pathname !== '/content-manager/403') {
+  if (
+    authorisedModels.length === 0 &&
+    supportedModelsToDisplay.length > 0 &&
+    pathname !== '/content-manager/403'
+  ) {
     return <Redirect to="/content-manager/403" />;
   }
 
   // Redirect the user to the create content type page
-  if (models.length === 0 && pathname !== '/content-manager/no-content-types') {
+  if (supportedModelsToDisplay.length === 0 && pathname !== '/content-manager/no-content-types') {
     return <Redirect to="/content-manager/no-content-types" />;
   }
 

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

@@ -341,7 +341,7 @@ const DisplayedFieldButton = ({
           isHidden={isHidden}
         >
           <DragButton
-            as="button"
+            as="span"
             type="button"
             ref={refs.dragRef}
             onClick={e => e.stopPropagation()}

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

@@ -24,7 +24,7 @@ const FieldButtonContent = ({ attribute, onEditField, onDeleteField, children })
 
   return (
     <Box overflow="hidden" width="100%">
-      <Flex paddingLeft={3} alignItems="baseline" justifyContent="space-between">
+      <Flex paddingLeft={3} alignItems="center" justifyContent="space-between">
         <Typography fontWeight="semiBold" textColor="neutral800" ellipsis>
           {children}
         </Typography>

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

@@ -91,7 +91,7 @@ const RelationalFieldButton = ({
       isDragging={isDragging}
     >
       <DragButton
-        as="button"
+        as="span"
         type="button"
         ref={dragButtonRef}
         onClick={e => e.stopPropagation()}

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

@@ -195,6 +195,7 @@ const DraggableCard = ({
         >
           <Stack horizontal size={3}>
             <DragButton
+              as='span'
               aria-label={formatMessage(
                 {
                   id: getTrad('components.DraggableCard.move.field'),

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

@@ -178,7 +178,10 @@ const Register = ({ fieldsToDisable, noSignin, onSubmit, schema }) => {
                         : undefined
                     }
                     required
-                    label={formatMessage({ id: 'Auth.form.email.label', defaultMessage: 'Email' })}
+                    label={formatMessage({
+                      id: 'Auth.form.email.label',
+                      defaultMessage: 'Email',
+                    })}
                     type="email"
                   />
                   <PasswordInput

package/admin/src/pages/AuthPage/utils/forms.js

@@ -94,6 +94,8 @@ const forms = {
       email: yup
         .string()
         .email(translatedErrors.email)
+        .strict()
+        .lowercase(translatedErrors.lowercase)
         .required(translatedErrors.required),
       confirmPassword: yup
         .string()

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

@@ -211,6 +211,7 @@ const ProfilePage = () => {
                               value={values.firstname || ''}
                               type="text"
                               name="firstname"
+                              required
                             />
                           </GridItem>
                           <GridItem s={12} col={6}>
@@ -234,6 +235,7 @@ const ProfilePage = () => {
                               value={values.email || ''}
                               type="email"
                               name="email"
+                              required
                             />
                           </GridItem>
                           <GridItem s={12} col={6}>

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

@@ -208,6 +208,7 @@ const ApiTokenCreateView = () => {
                             })}
                             onChange={handleChange}
                             value={values.name}
+                            required
                           />
                         </GridItem>
                         <GridItem key="description" col={6} xs={12}>

package/admin/src/pages/SettingsPage/pages/Users/EditPage/utils/layout.js

@@ -15,6 +15,7 @@ const layout = [
         col: 6,
         xs: 12,
       },
+      required: true,
     },
     {
       intlLabel: {
@@ -49,6 +50,7 @@ const layout = [
         col: 6,
         xs: 12,
       },
+      required: true,
     },
     {
       intlLabel: {

package/admin/src/pages/SettingsPage/pages/Users/ListPage/ModalForm/utils/layout.js

@@ -15,6 +15,7 @@ const layout = [
         col: 6,
         xs: 12,
       },
+      required: true,
     },
     {
       intlLabel: {
@@ -49,6 +50,7 @@ const layout = [
         col: 6,
         xs: 12,
       },
+      required: true,
     },
   ],
 ];

package/admin/src/pages/SettingsPage/pages/Users/components/SelectRoles/index.js

@@ -68,6 +68,7 @@ const SelectRoles = ({ disabled, error, onChange, value }) => {
       startIcon={startIcon}
       value={value}
       withTags
+      required
     >
       {(data || []).map(role => {
         return (

package/admin/src/pages/SettingsPage/pages/Webhooks/EditView/components/EventInput/index.js

@@ -100,7 +100,7 @@ const EventInput = ({ isDraftAndPublish }) => {
 
   return (
     <Stack size={1}>
-      <FieldLabel>
+      <FieldLabel required>
         {formatMessage({
           id: 'Settings.webhooks.form.events',
           defaultMessage: 'Events',

package/admin/src/pages/SettingsPage/pages/Webhooks/EditView/components/WebhookForm/index.js

@@ -114,6 +114,7 @@ const WebhookForm = ({
                           id: 'Settings.webhooks.form.name',
                           defaultMessage: 'Name',
                         })}
+                        required
                       />
                     </GridItem>
                     <GridItem col={12}>
@@ -125,6 +126,7 @@ const WebhookForm = ({
                           id: 'Settings.roles.form.input.url',
                           defaultMessage: 'Url',
                         })}
+                        required
                       />
                     </GridItem>
                   </Grid>

package/admin/src/translations/en.json

@@ -407,6 +407,7 @@
   "components.Input.error.password.noMatch": "Passwords do not match",
   "components.Input.error.validation.email": "This is an invalid email",
   "components.Input.error.validation.json": "This doesn't match the JSON format",
+  "components.Input.error.validation.lowercase": "The value must be a lowercase string",
   "components.Input.error.validation.max": "The value is too high.",
   "components.Input.error.validation.maxLength": "The value is too long.",
   "components.Input.error.validation.min": "The value is too low.",