@strapi/admin 4.0.3 → 4.0.7

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/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/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/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/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/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;
@@ -100,7 +100,7 @@ const EventInput = ({ isDraftAndPublish }) => {
 
   return (
     <Stack size={1}>
-      <FieldLabel required>
+      <FieldLabel>
         {formatMessage({
           id: 'Settings.webhooks.form.events',
           defaultMessage: '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/utils/schema.js

@@ -29,10 +29,7 @@ const schema = yup.object().shape({
       })
     );
   }),
-  events: yup
-    .array()
-    .min(1, translatedErrors.min)
-    .required(translatedErrors.required),
+  events: yup.array(),
 });
 
 export default schema;