@strapi/admin 4.0.0-beta.12 → 4.0.0-beta.16

package/admin/src/pages/SettingsPage/pages/Users/ListPage/ModalForm/index.js

@@ -12,7 +12,7 @@ import { Breadcrumbs, Crumb } from '@strapi/design-system/Breadcrumbs';
 import { Box } from '@strapi/design-system/Box';
 import { Button } from '@strapi/design-system/Button';
 import { Stack } from '@strapi/design-system/Stack';
-import { H2 } from '@strapi/design-system/Text';
+import { Typography } from '@strapi/design-system/Typography';
 
 import { Formik } from 'formik';
 import { Form, GenericInput, useNotification, useOverlayBlocker } from '@strapi/helper-plugin';
@@ -67,6 +67,8 @@ const ModalForm = ({ queryName, onToggle }) => {
     try {
       await postMutation.mutateAsync(body);
     } catch (err) {
+      unlockApp();
+
       if (err?.response?.data.message === 'Email already taken') {
         setErrors({ email: err.response.data.message });
       }
@@ -113,12 +115,12 @@ const ModalForm = ({ queryName, onToggle }) => {
                 <Stack size={6}>
                   {currentStep !== 'create' && <MagicLink registrationToken={registrationToken} />}
                   <Box>
-                    <H2>
+                    <Typography variant="beta" as="h2">
                       {formatMessage({
                         id: 'app.components.Users.ModalCreateBody.block-title.details',
                         defaultMessage: 'Details',
                       })}
-                    </H2>
+                    </Typography>
                     <Box paddingTop={4}>
                       <Stack size={1}>
                         <Grid gap={5}>
@@ -142,12 +144,12 @@ const ModalForm = ({ queryName, onToggle }) => {
                     </Box>
                   </Box>
                   <Box>
-                    <H2>
+                    <Typography variant="beta" as="h2">
                       {formatMessage({
                         id: 'app.components.Users.ModalCreateBody.block-title.login',
                         defaultMessage: 'Login settings',
                       })}
-                    </H2>
+                    </Typography>
                     <Box paddingTop={4}>
                       <Grid gap={5}>
                         <GridItem col={6} xs={12}>

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

@@ -3,7 +3,7 @@ import { translatedErrors } from '@strapi/helper-plugin';
 
 const schema = yup.object().shape({
   firstname: yup.string().required(translatedErrors.required),
-  lastname: yup.string().required(translatedErrors.required),
+  lastname: yup.string(),
   email: yup
     .string()
     .email(translatedErrors.email)

package/admin/src/pages/SettingsPage/pages/Users/ListPage/PaginationFooter/index.js

@@ -6,7 +6,7 @@ import { PaginationURLQuery, PageSizeURLQuery } from '@strapi/helper-plugin';
 
 const PaginationFooter = ({ pagination }) => {
   return (
-    <Box paddingTop={6}>
+    <Box paddingTop={4}>
       <Flex alignItems="flex-end" justifyContent="space-between">
         <PageSizeURLQuery />
         <PaginationURLQuery pagination={pagination} />

package/admin/src/pages/SettingsPage/pages/Users/ListPage/utils/tableHeaders.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Flex } from '@strapi/design-system/Flex';
-import { Text } from '@strapi/design-system/Text';
+import { Typography } from '@strapi/design-system/Typography';
 import { Status } from '@strapi/helper-plugin';
 
 const tableHeaders = [
@@ -25,7 +25,9 @@ const tableHeaders = [
     metadatas: { label: 'Roles', sortable: false },
     /* eslint-disable react/prop-types */
     cellFormatter: ({ roles }) => {
-      return <Text textColor="neutral800">{roles.map(role => role.name).join(',\n')}</Text>;
+      return (
+        <Typography textColor="neutral800">{roles.map(role => role.name).join(',\n')}</Typography>
+      );
     },
     /* eslint-enable react/prop-types */
   },
@@ -43,7 +45,7 @@ const tableHeaders = [
       return (
         <Flex>
           <Status isActive={isActive} variant={isActive ? 'success' : 'danger'} />
-          <Text textColor="neutral800">{isActive ? 'Active' : 'Inactive'}</Text>
+          <Typography textColor="neutral800">{isActive ? 'Active' : 'Inactive'}</Typography>
         </Flex>
       );
     },

package/admin/src/pages/SettingsPage/pages/Users/components/MagicLink/MagicLinkWrapper.js

@@ -44,6 +44,7 @@ const MagicLinkWrapper = ({ children, target }) => {
         </CopyToClipboard>
       }
       title={target}
+      titleEllipsis
       subtitle={children}
       icon={<Envelope />}
       iconBackground="neutral100"

package/admin/src/pages/SettingsPage/pages/Users/utils/validations/users/edit.js

@@ -1,9 +1,9 @@
 import * as yup from 'yup';
-import profileValidation from './profile';
+import { commonUserSchema } from './profile';
 import rolesValidation from './roles';
 
 const schema = yup.object().shape({
-  ...profileValidation,
+  ...commonUserSchema,
   isActive: yup.bool(),
   ...rolesValidation,
 });

package/admin/src/pages/SettingsPage/pages/Users/utils/validations/users/profile.js

@@ -1,9 +1,9 @@
 import * as yup from 'yup';
 import { translatedErrors } from '@strapi/helper-plugin';
 
-const schema = {
+export const commonUserSchema = {
   firstname: yup.mixed().required(translatedErrors.required),
-  lastname: yup.mixed().required(translatedErrors.required),
+  lastname: yup.mixed(),
   email: yup
     .string()
     .email(translatedErrors.email)
@@ -23,6 +23,10 @@ const schema = {
     .when('password', (password, passSchema) => {
       return password ? passSchema.required(translatedErrors.required) : passSchema;
     }),
+};
+
+const schema = {
+  ...commonUserSchema,
   currentPassword: yup
     .string()
     .when(['password', 'confirmPassword'], (password, confirmPassword, passSchema) => {

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

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { FieldLabel } from '@strapi/design-system/Field';
 import { Stack } from '@strapi/design-system/Stack';
-import { P, TableLabel } from '@strapi/design-system/Text';
+import { Typography } from '@strapi/design-system/Typography';
 import { useFormikContext } from 'formik';
 import { useIntl } from 'react-intl';
 import styled from 'styled-components';
@@ -121,14 +121,18 @@ const EventInput = ({ isDraftAndPublish }) => {
                         'This event only exists for contents with Draft/Publish system enabled',
                     })}
                   >
-                    <TableLabel textColor="neutral600">{formatMessage({ id: header })}</TableLabel>
+                    <Typography variant="sigma" textColor="neutral600">
+                      {formatMessage({ id: header, defaultMessage: header })}
+                    </Typography>
                   </td>
                 );
               }
 
               return (
                 <td key={header}>
-                  <TableLabel textColor="neutral600">{formatMessage({ id: header })}</TableLabel>
+                  <Typography variant="sigma" textColor="neutral600">
+                    {formatMessage({ id: header, defaultMessage: header })}
+                  </Typography>
                 </td>
               );
             })}
@@ -151,12 +155,12 @@ const EventInput = ({ isDraftAndPublish }) => {
         </tbody>
       </StyledTable>
       {errors.events && (
-        <P small textColor="danger600" data-strapi-field-error>
+        <Typography variant="pi" textColor="danger600" data-strapi-field-error>
           {formatMessage({
             id: 'components.Input.error.validation.required',
             defaultMessage: 'This value is required',
           })}
-        </P>
+        </Typography>
       )}
     </Stack>
   );

package/admin/src/pages/SettingsPage/pages/Webhooks/EditView/components/HeadersInput/Combobox.js

@@ -3,8 +3,8 @@ import PropTypes from 'prop-types';
 import { ComboboxOption, CreatableCombobox } from '@strapi/design-system/Combobox';
 import keys from './keys';
 
-const Combobox = ({ name, onChange, ...props }) => {
-  const [options, setOptions] = useState(keys);
+const Combobox = ({ name, onChange, value, ...props }) => {
+  const [options, setOptions] = useState(value ? [...keys, value] : keys);
 
   const handleChange = value => {
     onChange({ target: { name, value } });
@@ -22,6 +22,7 @@ const Combobox = ({ name, onChange, ...props }) => {
       onChange={handleChange}
       onCreateOption={handleCreateOption}
       placeholder=""
+      value={value}
     >
       {options.map(key => (
         <ComboboxOption value={key} key={key}>
@@ -32,9 +33,14 @@ const Combobox = ({ name, onChange, ...props }) => {
   );
 };
 
+Combobox.defaultProps = {
+  value: undefined,
+};
+
 Combobox.propTypes = {
   name: PropTypes.string.isRequired,
   onChange: PropTypes.func.isRequired,
+  value: PropTypes.string,
 };
 
 export default Combobox;

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

@@ -1,15 +1,16 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { useIntl } from 'react-intl';
+import styled from 'styled-components';
+import { pxToRem } from '@strapi/helper-plugin';
 import Check from '@strapi/icons/Check';
 import Cross from '@strapi/icons/Cross';
 import Loader from '@strapi/icons/Loader';
 import { Box } from '@strapi/design-system/Box';
 import { Flex } from '@strapi/design-system/Flex';
-import { Text } from '@strapi/design-system/Text';
+import { Typography } from '@strapi/design-system/Typography';
 import { Stack } from '@strapi/design-system/Stack';
 import { Grid, GridItem } from '@strapi/design-system/Grid';
-import { useIntl } from 'react-intl';
-import styled from 'styled-components';
 
 // Being discussed in Notion: create a <Icon /> component in Parts
 const Icon = styled.svg(
@@ -30,9 +31,9 @@ const Status = ({ isPending, statusCode }) => {
     return (
       <Stack horizontal size={2} style={{ alignItems: 'center' }}>
         <Icon as={Loader} />
-        <Text>
+        <Typography>
           {formatMessage({ id: 'Settings.webhooks.trigger.pending', defaultMessage: 'pending' })}
-        </Text>
+        </Typography>
       </Stack>
     );
   }
@@ -41,9 +42,9 @@ const Status = ({ isPending, statusCode }) => {
     return (
       <Stack horizontal size={2} style={{ alignItems: 'center' }}>
         <Icon as={Check} color="success700" />
-        <Text>
+        <Typography>
           {formatMessage({ id: 'Settings.webhooks.trigger.success', defaultMessage: 'success' })}
-        </Text>
+        </Typography>
       </Stack>
     );
   }
@@ -52,9 +53,9 @@ const Status = ({ isPending, statusCode }) => {
     return (
       <Stack horizontal size={2} style={{ alignItems: 'center' }}>
         <Icon as={Cross} color="danger700" />
-        <Text>
+        <Typography>
           {formatMessage({ id: 'Settings.error', defaultMessage: 'error' })} {statusCode}
-        </Text>
+        </Typography>
       </Stack>
     );
   }
@@ -75,29 +76,24 @@ const Message = ({ statusCode, message }) => {
   if (statusCode >= 200 && statusCode < 300) {
     return (
       <Flex justifyContent="flex-end">
-        <Text>
+        <Typography textColor="neutral600" ellipsis>
           {formatMessage({
             id: 'Settings.webhooks.trigger.success.label',
-            defaultMessage: 'success',
+            defaultMessage: 'Trigger succeeded',
           })}
-        </Text>
+        </Typography>
       </Flex>
     );
   }
 
   if (statusCode >= 300) {
     return (
-      <Flex justifyContent="flex-end" title={message}>
-        <Text
-          // ! REMOVE THIS WHEN DS IS UPDATED WITH ELLIPSIS PROP
-          style={{
-            overflow: 'hidden',
-            whiteSpace: 'nowrap',
-            textOverflow: 'ellipsis',
-          }}
-        >
-          {message}
-        </Text>
+      <Flex justifyContent="flex-end">
+        <Flex maxWidth={pxToRem(250)} justifyContent="flex-end" title={message}>
+          <Typography ellipsis textColor="neutral600">
+            {message}
+          </Typography>
+        </Flex>
       </Flex>
     );
   }
@@ -120,9 +116,9 @@ const CancelButton = ({ onCancel }) => {
     <Flex justifyContent="flex-end">
       <button onClick={onCancel} type="button">
         <Stack horizontal size={2} style={{ alignItems: 'center' }}>
-          <Text textColor="neutral400">
+          <Typography textColor="neutral400">
             {formatMessage({ id: 'Settings.webhooks.trigger.cancel', defaultMessage: 'cancel' })}
-          </Text>
+          </Typography>
           <Icon as={Cross} color="neutral400" />
         </Stack>
       </button>
@@ -140,12 +136,12 @@ const TriggerContainer = ({ isPending, onCancel, response }) => {
     <Box background="neutral0" padding={5} shadow="filterShadow" hasRadius>
       <Grid gap={4} style={{ alignItems: 'center' }}>
         <GridItem col={3}>
-          <Text>
+          <Typography>
             {formatMessage({
               id: 'Settings.webhooks.trigger.test',
-              defaultMessage: 'test-trigger',
+              defaultMessage: 'Test-trigger',
             })}
-          </Text>
+          </Typography>
         </GridItem>
         <GridItem col={3}>
           <Status isPending={isPending} statusCode={statusCode} />