@strapi/admin 4.0.2 → 4.0.6

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

@@ -1,6 +1,7 @@
 import React, { useRef, useState } from 'react';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
+import { FocusTrap } from '@strapi/design-system/FocusTrap';
 import { Box } from '@strapi/design-system/Box';
 import { Button } from '@strapi/design-system/Button';
 import { IconButtonGroup } from '@strapi/design-system/IconButton';
@@ -27,7 +28,9 @@ import {
 } from './WysiwygStyles';
 
 const WysiwygNav = ({
+  disabled,
   editorRef,
+  isExpandMode,
   isPreviewMode,
   onActionClick,
   onToggleMediaLib,
@@ -41,9 +44,11 @@ const WysiwygNav = ({
   });
   const buttonMoreRef = useRef();
 
-  const handleTogglePopover = () => setVisiblePopover(prev => !prev);
+  const handleTogglePopover = () => {
+    setVisiblePopover(prev => !prev);
+  };
 
-  if (isPreviewMode) {
+  if (disabled || isPreviewMode) {
     return (
       <Box padding={2} background="neutral100">
         <Flex justifyContent="space-between">
@@ -81,15 +86,17 @@ const WysiwygNav = ({
               />
             </MainButtons>
 
-            <MoreButton disabled ref={buttonMoreRef} id="more" label="More" icon={<More />} />
+            <MoreButton disabled id="more" label="More" icon={<More />} />
           </Flex>
 
-          <Button onClick={onTogglePreviewMode} variant="tertiary" size="L" id="preview">
-            {formatMessage({
-              id: 'components.Wysiwyg.ToggleMode.markdown-mode',
-              defaultMessage: 'Markdown mode',
-            })}
-          </Button>
+          {!isExpandMode && (
+            <Button onClick={onTogglePreviewMode} variant="tertiary" id="preview">
+              {formatMessage({
+                id: 'components.Wysiwyg.ToggleMode.markdown-mode',
+                defaultMessage: 'Markdown mode',
+              })}
+            </Button>
+          )}
         </Flex>
       </Box>
     );
@@ -146,65 +153,67 @@ const WysiwygNav = ({
           />
           {visiblePopover && (
             <Popover centered source={buttonMoreRef} spacing={4} id="popover">
-              <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 />}
-                  />
-                </IconButtonGroupMargin>
-                <IconButtonGroup>
-                  <CustomIconButton
-                    onClick={() => onActionClick('Code', editorRef, handleTogglePopover)}
-                    id="Code"
-                    label="Code"
-                    name="Code"
-                    icon={<Code />}
-                  />
-                  <CustomIconButton
-                    onClick={() => {
-                      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
-                    icon={<Link />}
-                  />
-                  <CustomIconButton
-                    onClick={() => onActionClick('Quote', editorRef, handleTogglePopover)}
-                    id="Quote"
-                    label="Quote"
-                    name="Quote"
-                    icon={<Quote />}
-                  />
-                </IconButtonGroup>
-              </Flex>
+              <FocusTrap onEscape={handleTogglePopover} restoreFocus={false}>
+                <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 />}
+                    />
+                  </IconButtonGroupMargin>
+                  <IconButtonGroup>
+                    <CustomIconButton
+                      onClick={() => onActionClick('Code', editorRef, handleTogglePopover)}
+                      id="Code"
+                      label="Code"
+                      name="Code"
+                      icon={<Code />}
+                    />
+                    <CustomIconButton
+                      onClick={() => {
+                        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
+                      icon={<Link />}
+                    />
+                    <CustomIconButton
+                      onClick={() => onActionClick('Quote', editorRef, handleTogglePopover)}
+                      id="Quote"
+                      label="Quote"
+                      name="Quote"
+                      icon={<Quote />}
+                    />
+                  </IconButtonGroup>
+                </Flex>
+              </FocusTrap>
             </Popover>
           )}
         </Flex>
@@ -230,7 +239,9 @@ WysiwygNav.defaultProps = {
 };
 
 WysiwygNav.propTypes = {
+  disabled: PropTypes.bool.isRequired,
   editorRef: PropTypes.shape({ current: PropTypes.any }).isRequired,
+  isExpandMode: PropTypes.bool.isRequired,
   isPreviewMode: PropTypes.bool,
   onActionClick: PropTypes.func,
   onToggleMediaLib: PropTypes.func,

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

@@ -45,6 +45,7 @@ export const IconButtonGroupMargin = styled(IconButtonGroup)`
 
 export const EditorAndPreviewWrapper = styled.div`
   position: relative;
+  height: calc(100% - 48px);
 `;
 
 // FOOTER

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

@@ -26,6 +26,10 @@ const LabelAction = styled(Box)`
   }
 `;
 
+const TypographyAsterisk = styled(Typography)`
+  line-height: 0;
+`;
+
 const Wysiwyg = ({
   description,
   disabled,
@@ -36,6 +40,7 @@ const Wysiwyg = ({
   onChange,
   placeholder,
   value,
+  required,
 }) => {
   const { formatMessage } = useIntl();
   const textareaRef = useRef(null);
@@ -49,7 +54,10 @@ const Wysiwyg = ({
 
   const handleToggleMediaLib = () => setMediaLibVisible(prev => !prev);
   const handleTogglePreviewMode = () => setIsPreviewMode(prev => !prev);
-  const handleToggleExpand = () => setIsExpandMode(prev => !prev);
+  const handleToggleExpand = () => {
+    setIsPreviewMode(false);
+    setIsExpandMode(prev => !prev);
+  };
 
   const handleActionClick = (value, currentEditorRef, togglePopover) => {
     switch (value) {
@@ -124,6 +132,7 @@ const Wysiwyg = ({
         <Stack horizontal size={1}>
           <Typography variant="pi" fontWeight="bold" textColor="neutral800">
             {label}
+            {required && <TypographyAsterisk textColor="danger600">*</TypographyAsterisk>}
           </Typography>
           {labelAction && <LabelAction paddingLeft={1}>{labelAction}</LabelAction>}
         </Stack>
@@ -135,15 +144,18 @@ const Wysiwyg = ({
           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={errorMessage}
             isPreviewMode={isPreviewMode}
@@ -154,9 +166,7 @@ const Wysiwyg = ({
             value={value}
           />
 
-          {!isExpandMode && (
-            <WysiwygFooter isPreviewMode={isPreviewMode} onToggleExpand={handleToggleExpand} />
-          )}
+          {!isExpandMode && <WysiwygFooter onToggleExpand={handleToggleExpand} />}
         </EditorLayout>
         <Hint description={description} name={name} error={error} />
       </Stack>
@@ -178,10 +188,11 @@ const Wysiwyg = ({
 
 Wysiwyg.defaultProps = {
   description: null,
-  disabled: true,
+  disabled: false,
   error: '',
   labelAction: undefined,
   placeholder: null,
+  required: false,
   value: '',
 };
 
@@ -206,6 +217,7 @@ Wysiwyg.propTypes = {
     defaultMessage: PropTypes.string.isRequired,
     values: PropTypes.object,
   }),
+  required: PropTypes.bool,
   value: PropTypes.string,
 };
 

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/DisplayedFields.js

@@ -41,9 +41,7 @@ const DisplayedFields = ({ editLayout, editLayoutRemainingFields, onRemoveField,
       <Box padding={4} hasRadius borderStyle="dashed" borderWidth="1px" borderColor="neutral300">
         <Stack size={2}>
           {editLayout.map((row, index) => (
-            <React.Fragment key={row.rowId}>
-              <RowsLayout row={row} rowIndex={index} onRemoveField={onRemoveField} />
-            </React.Fragment>
+            <RowsLayout key={row.rowId} row={row} rowIndex={index} onRemoveField={onRemoveField} />
           ))}
           <SimpleMenu
             id="label"

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/ModalForm.js

@@ -47,19 +47,18 @@ const ModalForm = ({ onChange }) => {
   return formToDisplay.map(meta => {
     const formType = get(attributes, [selectedField, 'type']);
 
-    if (formType === 'dynamiczone' && !['label', 'description'].includes(meta)) {
+    if (
+      formType === 'dynamiczone' ||
+      (formType === 'component' && !['label', 'description'].includes(meta))
+    ) {
       return null;
     }
 
-    if ((formType === 'component' || formType === 'media') && meta !== 'label') {
+    if (formType === 'component' && meta !== 'label') {
       return null;
     }
 
-    if ((formType === 'json' || formType === 'boolean') && meta === 'placeholder') {
-      return null;
-    }
-
-    if (formType === 'richtext' && meta === 'editable') {
+    if (['media', 'json', 'boolean'].includes(formType) && meta === 'placeholder') {
       return null;
     }
 

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

@@ -27,6 +27,7 @@ const MarketplacePage = lazy(() =>
   import(/* webpackChunkName: "Admin_marketplace" */ '../MarketplacePage')
 );
 const NotFoundPage = lazy(() => import('../NotFoundPage'));
+const InternalErrorPage = lazy(() => import('../InternalErrorPage'));
 
 const ProfilePage = lazy(() =>
   import(/* webpackChunkName: "Admin_profilePage" */ '../ProfilePage')
@@ -87,6 +88,7 @@ const Admin = () => {
               <InstalledPluginsPage />
             </Route>
             <Route path="/404" component={NotFoundPage} />
+            <Route path="/500" component={InternalErrorPage} />
             <Route path="" component={NotFoundPage} />
           </Switch>
         </Suspense>

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

@@ -0,0 +1,53 @@
+/**
+ * InternalErrorPage
+ *
+ * This is the page we show when the user gets a 500 error
+ *
+ */
+import React from 'react';
+import { useFocusWhenNavigate } from '@strapi/helper-plugin';
+import { Main } from '@strapi/design-system/Main';
+import { LinkButton } from '@strapi/design-system/LinkButton';
+import { ContentLayout, HeaderLayout } from '@strapi/design-system/Layout';
+import { EmptyStateLayout } from '@strapi/design-system/EmptyStateLayout';
+import EmptyPictures from '@strapi/icons/EmptyPictures';
+import ArrowRight from '@strapi/icons/ArrowRight';
+import { useIntl } from 'react-intl';
+
+const InternalErrorPage = () => {
+  const { formatMessage } = useIntl();
+  useFocusWhenNavigate();
+
+  return (
+    <Main labelledBy="title">
+      <HeaderLayout
+        id="title"
+        title={formatMessage({
+          id: 'content-manager.pageNotFound',
+          defaultMessage: 'Page not found',
+        })}
+      />
+      <ContentLayout>
+        <EmptyStateLayout
+          action={
+            <LinkButton variant="secondary" endIcon={<ArrowRight />} to="/">
+              {formatMessage({
+                id: 'app.components.NotFoundPage.back',
+                defaultMessage: 'Back to homepage',
+              })}
+            </LinkButton>
+          }
+          content={formatMessage({
+            id: 'notification.error',
+            defaultMessage: 'An error occured',
+          })}
+          hasRadius
+          icon={<EmptyPictures width="10rem" />}
+          shadow="tableShadow"
+        />
+      </ContentLayout>
+    </Main>
+  );
+};
+
+export default InternalErrorPage;

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

@@ -4,7 +4,50 @@
  * This is the page we show when the user visits a url that doesn't have a route
  *
  */
+import React from 'react';
+import { useFocusWhenNavigate } from '@strapi/helper-plugin';
+import { Main } from '@strapi/design-system/Main';
+import { LinkButton } from '@strapi/design-system/LinkButton';
+import { ContentLayout, HeaderLayout } from '@strapi/design-system/Layout';
+import { EmptyStateLayout } from '@strapi/design-system/EmptyStateLayout';
+import EmptyPictures from '@strapi/icons/EmptyPictures';
+import ArrowRight from '@strapi/icons/ArrowRight';
+import { useIntl } from 'react-intl';
 
-const NotFoundPage = () => 'TODO NOT FOUND';
+const NoContentType = () => {
+  const { formatMessage } = useIntl();
+  useFocusWhenNavigate();
 
-export default NotFoundPage;
+  return (
+    <Main labelledBy="title">
+      <HeaderLayout
+        id="title"
+        title={formatMessage({
+          id: 'content-manager.pageNotFound',
+          defaultMessage: 'Page not found',
+        })}
+      />
+      <ContentLayout>
+        <EmptyStateLayout
+          action={
+            <LinkButton variant="secondary" endIcon={<ArrowRight />} to="/">
+              {formatMessage({
+                id: 'app.components.NotFoundPage.back',
+                defaultMessage: 'Back to homepage',
+              })}
+            </LinkButton>
+          }
+          content={formatMessage({
+            id: 'app.page.not.found',
+            defaultMessage: "Oops! We can't seem to find the page you're looging for...",
+          })}
+          hasRadius
+          icon={<EmptyPictures width="10rem" />}
+          shadow="tableShadow"
+        />
+      </ContentLayout>
+    </Main>
+  );
+};
+
+export default NoContentType;

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

@@ -63,7 +63,7 @@ const EventInput = ({ isDraftAndPublish }) => {
     : displayedData.events.default;
 
   const { formatMessage } = useIntl();
-  const { values, errors, handleChange: onChange } = useFormikContext();
+  const { values, handleChange: onChange } = useFormikContext();
 
   const inputName = 'events';
   const inputValue = values.events;
@@ -154,14 +154,6 @@ const EventInput = ({ isDraftAndPublish }) => {
           })}
         </tbody>
       </StyledTable>
-      {errors.events && (
-        <Typography variant="pi" textColor="danger600" data-strapi-field-error>
-          {formatMessage({
-            id: 'components.Input.error.validation.required',
-            defaultMessage: 'This value is required',
-          })}
-        </Typography>
-      )}
     </Stack>
   );
 };

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>