@strapi/admin 4.3.4 → 4.3.7

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

@@ -7,30 +7,50 @@ const tableHeaders = [
   {
     name: 'firstname',
     key: 'firstname',
-    metadatas: { label: 'Firstname', sortable: true },
+    metadatas: {
+      label: {
+        id: 'Settings.permissions.users.firstname',
+        defaultMessage: 'Firstname',
+      },
+      sortable: true,
+    },
   },
   {
     name: 'lastname',
     key: 'lastname',
-    metadatas: { label: 'Lastname', sortable: true },
+    metadatas: {
+      label: {
+        id: 'Settings.permissions.users.lastname',
+        defaultMessage: 'Lastname',
+      },
+      sortable: true,
+    },
   },
   {
     key: 'email',
     name: 'email',
-    metadatas: { label: 'Email', sortable: true },
+    metadatas: {
+      label: { id: 'Settings.permissions.users.email', defaultMessage: 'Email' },
+      sortable: true,
+    },
   },
   {
     key: 'roles',
     name: 'roles',
-    metadatas: { label: 'Roles', sortable: false },
-    /* eslint-disable react/prop-types */
-    cellFormatter: ({ roles }, { formatMessage }) => {
+    metadatas: {
+      label: {
+        id: 'Settings.permissions.users.roles',
+        defaultMessage: 'Roles',
+      },
+      sortable: false,
+    },
+    cellFormatter({ roles }, { formatMessage }) {
       return (
         <Typography textColor="neutral800">
           {roles
-            .map(role =>
+            .map((role) =>
               formatMessage({
-                id: `global.${role.code}`,
+                id: `Settings.permissions.users.${role.code}`,
                 defaultMessage: role.name,
               })
             )
@@ -38,25 +58,37 @@ const tableHeaders = [
         </Typography>
       );
     },
-    /* eslint-enable react/prop-types */
   },
   {
     key: 'username',
     name: 'username',
-    metadatas: { label: 'Username', sortable: true },
+    metadatas: {
+      label: {
+        id: 'Settings.permissions.users.username',
+        defaultMessage: 'Username',
+      },
+      sortable: true,
+    },
   },
   {
     key: 'isActive',
     name: 'isActive',
-    metadatas: { label: 'User status', sortable: false },
-    // eslint-disable-next-line react/prop-types
-    cellFormatter: ({ isActive }, { formatMessage }) => {
+    metadatas: {
+      label: {
+        id: 'Settings.permissions.users.user-status',
+        defaultMessage: 'User status',
+      },
+      sortable: false,
+    },
+    cellFormatter({ isActive }, { formatMessage }) {
       return (
         <Flex>
           <Status isActive={isActive} variant={isActive ? 'success' : 'danger'} />
           <Typography textColor="neutral800">
             {formatMessage({
-              id: isActive ? 'global.active' : 'global.inactive',
+              id: isActive
+                ? 'Settings.permissions.users.active'
+                : 'Settings.permissions.users.inactive',
               defaultMessage: isActive ? 'Active' : 'Inactive',
             })}
           </Typography>

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

@@ -60,7 +60,7 @@ const SelectRoles = ({ disabled, error, onChange, value }) => {
       hint={hint}
       label={label}
       name="roles"
-      onChange={v => {
+      onChange={(v) => {
         onChange({ target: { name: 'roles', value: v } });
       }}
       placeholder={placeholder}
@@ -70,7 +70,7 @@ const SelectRoles = ({ disabled, error, onChange, value }) => {
       withTags
       required
     >
-      {(data || []).map(role => {
+      {(data || []).map((role) => {
         return (
           <Option key={role.id} value={role.id}>
             {formatMessage({

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

@@ -4,11 +4,7 @@ import { translatedErrors } from '@strapi/helper-plugin';
 export const commonUserSchema = {
   firstname: yup.mixed().required(translatedErrors.required),
   lastname: yup.mixed(),
-  email: yup
-    .string()
-    .email(translatedErrors.email)
-    .lowercase()
-    .required(translatedErrors.required),
+  email: yup.string().email(translatedErrors.email).lowercase().required(translatedErrors.required),
   username: yup.string().nullable(),
   password: yup
     .string()

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

@@ -2,10 +2,7 @@ import * as yup from 'yup';
 import { translatedErrors } from '@strapi/helper-plugin';
 
 const schema = {
-  roles: yup
-    .array()
-    .min(1, translatedErrors.required)
-    .required(translatedErrors.required),
+  roles: yup.array().min(1, translatedErrors.required).required(translatedErrors.required),
 };
 
 export default schema;

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

@@ -5,7 +5,7 @@ import { Checkbox } from '@strapi/design-system/Checkbox';
 import upperFirst from 'lodash/upperFirst';
 
 const EventRow = ({ disabledEvents, name, events, inputValue, handleChange, handleChangeAll }) => {
-  const enabledCheckboxes = events.filter(event => {
+  const enabledCheckboxes = events.filter((event) => {
     return !disabledEvents.includes(event);
   });
 
@@ -34,7 +34,7 @@ const EventRow = ({ disabledEvents, name, events, inputValue, handleChange, hand
         </Checkbox>
       </td>
 
-      {events.map(event => {
+      {events.map((event) => {
         return (
           <td key={event}>
             <BaseCheckbox
@@ -42,7 +42,7 @@ const EventRow = ({ disabledEvents, name, events, inputValue, handleChange, hand
               aria-label={event}
               name={event}
               value={inputValue.includes(event)}
-              onValueChange={value => handleChange({ target: { name: event, value } })}
+              onValueChange={(value) => handleChange({ target: { name: event, value } })}
             />
           </td>
         );
@@ -55,8 +55,8 @@ EventRow.defaultProps = {
   disabledEvents: [],
   events: [],
   inputValue: [],
-  handleChange: () => {},
-  handleChangeAll: () => {},
+  handleChange() {},
+  handleChangeAll() {},
 };
 
 EventRow.propTypes = {

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

@@ -29,16 +29,16 @@ const StyledTable = styled.table`
 const displayedData = {
   headers: {
     default: [
-      'Settings.webhooks.events.create',
-      'Settings.webhooks.events.update',
-      'app.utils.delete',
+      { id: 'Settings.webhooks.events.create', defaultMessage: 'Create' },
+      { id: 'Settings.webhooks.events.update', defaultMessage: 'Update' },
+      { id: 'app.utils.delete', defaultMessage: 'Delete' },
     ],
     draftAndPublish: [
-      'Settings.webhooks.events.create',
-      'Settings.webhooks.events.update',
-      'app.utils.delete',
-      'app.utils.publish',
-      'app.utils.unpublish',
+      { id: 'Settings.webhooks.events.create', defaultMessage: 'Create' },
+      { id: 'Settings.webhooks.events.update', defaultMessage: 'Update' },
+      { id: 'app.utils.delete', defaultMessage: 'Delete' },
+      { id: 'app.utils.publish', defaultMessage: 'Publish' },
+      { id: 'app.utils.unpublish', defaultMessage: 'Unpublish' },
     ],
   },
   events: {
@@ -87,13 +87,13 @@ const EventInput = ({ isDraftAndPublish }) => {
     let set = new Set(inputValue);
 
     if (value) {
-      events[name].forEach(event => {
+      events[name].forEach((event) => {
         if (!disabledEvents.includes(event)) {
           set.add(event);
         }
       });
     } else {
-      events[name].forEach(event => set.delete(event));
+      events[name].forEach((event) => set.delete(event));
     }
     onChange({ target: { name: inputName, value: Array.from(set) } });
   };
@@ -110,7 +110,7 @@ const EventInput = ({ isDraftAndPublish }) => {
         <thead>
           <tr>
             <td />
-            {headersName.map(header => {
+            {headersName.map((header) => {
               if (header === 'app.utils.publish' || header === 'app.utils.unpublish') {
                 return (
                   <td
@@ -122,7 +122,7 @@ const EventInput = ({ isDraftAndPublish }) => {
                     })}
                   >
                     <Typography variant="sigma" textColor="neutral600">
-                      {formatMessage({ id: header, defaultMessage: header })}
+                      {formatMessage(header)}
                     </Typography>
                   </td>
                 );
@@ -131,7 +131,7 @@ const EventInput = ({ isDraftAndPublish }) => {
               return (
                 <td key={header}>
                   <Typography variant="sigma" textColor="neutral600">
-                    {formatMessage({ id: header, defaultMessage: header })}
+                    {formatMessage(header)}
                   </Typography>
                 </td>
               );
@@ -139,7 +139,7 @@ const EventInput = ({ isDraftAndPublish }) => {
           </tr>
         </thead>
         <tbody>
-          {Object.keys(events).map(event => {
+          {Object.keys(events).map((event) => {
             return (
               <EventRow
                 disabledEvents={disabledEvents}

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

@@ -1,4 +1,4 @@
-const formatValue = value =>
+const formatValue = (value) =>
   value.reduce((acc, curr) => {
     const key = curr.split('.')[0];
 

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

@@ -6,12 +6,12 @@ import keys from './keys';
 const Combobox = ({ name, onChange, value, ...props }) => {
   const [options, setOptions] = useState(value ? [...keys, value] : keys);
 
-  const handleChange = value => {
+  const handleChange = (value) => {
     onChange({ target: { name, value } });
   };
 
-  const handleCreateOption = value => {
-    setOptions(prev => [...prev, value]);
+  const handleCreateOption = (value) => {
+    setOptions((prev) => [...prev, value]);
 
     onChange({ target: { name, value } });
   };
@@ -24,7 +24,7 @@ const Combobox = ({ name, onChange, value, ...props }) => {
       placeholder=""
       value={value}
     >
-      {options.map(key => (
+      {options.map((key) => (
         <ComboboxOption value={key} key={key}>
           {key}
         </ComboboxOption>

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

@@ -160,7 +160,7 @@ const TriggerContainer = ({ isPending, onCancel, response }) => {
 
 TriggerContainer.defaultProps = {
   isPending: false,
-  onCancel: () => {},
+  onCancel() {},
   response: {},
 };
 

package/admin/src/pages/SettingsPage/pages/Webhooks/EditView/components/utils/fieldsRegex.js

@@ -1,4 +1,4 @@
-const NAME_REGEX = new RegExp('(^$)|(^[A-Za-z][_0-9A-Za-z ]*$)');
-const URL_REGEX = new RegExp('(^$)|((https?://.*)(d*)/?(.*))');
+const NAME_REGEX = /(^$)|(^[A-Za-z][_0-9A-Za-z ]*$)/;
+const URL_REGEX = /(^$)|((https?:\/\/.*)(d*)\/?(.*))/;
 
 export { NAME_REGEX, URL_REGEX };

package/admin/src/pages/SettingsPage/pages/Webhooks/EditView/components/utils/schema.js

@@ -11,7 +11,7 @@ const schema = yup.object().shape({
     .string(translatedErrors.string)
     .required(translatedErrors.required)
     .matches(URL_REGEX, translatedErrors.regex),
-  headers: yup.lazy(array => {
+  headers: yup.lazy((array) => {
     let baseSchema = yup.array();
 
     if (array.length === 1) {

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

@@ -34,7 +34,7 @@ const EditView = () => {
   const isCreating = id === 'create';
 
   const fetchWebhook = useCallback(
-    async id => {
+    async (id) => {
       const [err, { data }] = await to(
         request(`/admin/webhooks/${id}`, {
           method: 'GET',
@@ -68,7 +68,7 @@ const EditView = () => {
 
   const triggerWebhook = () =>
     mutate(null, {
-      onError: () => {
+      onError() {
         toggleNotification({
           type: 'warning',
           message: { id: 'notification.error' },
@@ -76,7 +76,7 @@ const EditView = () => {
       },
     });
 
-  const createWebhookMutation = useMutation(body =>
+  const createWebhookMutation = useMutation((body) =>
     request('/admin/webhooks', {
       method: 'POST',
       body,
@@ -90,11 +90,11 @@ const EditView = () => {
     })
   );
 
-  const handleSubmit = async data => {
+  const handleSubmit = async (data) => {
     if (isCreating) {
       lockApp();
       createWebhookMutation.mutate(cleanData(data), {
-        onSuccess: result => {
+        onSuccess(result) {
           toggleNotification({
             type: 'success',
             message: { id: 'Settings.webhooks.created' },
@@ -102,7 +102,7 @@ const EditView = () => {
           replace(`/settings/webhooks/${result.data.id}`);
           unlockApp();
         },
-        onError: e => {
+        onError(e) {
           toggleNotification({
             type: 'warning',
             message: { id: 'notification.error' },
@@ -116,7 +116,7 @@ const EditView = () => {
       updateWebhookMutation.mutate(
         { id, body: cleanData(data) },
         {
-          onSuccess: () => {
+          onSuccess() {
             queryClient.invalidateQueries(['get-webhook', id]);
             toggleNotification({
               type: 'success',
@@ -124,7 +124,7 @@ const EditView = () => {
             });
             unlockApp();
           },
-          onError: e => {
+          onError(e) {
             toggleNotification({
               type: 'warning',
               message: { id: 'notification.error' },
@@ -138,7 +138,7 @@ const EditView = () => {
   };
 
   const isDraftAndPublishEvents = useMemo(
-    () => collectionTypes.some(ct => ct.options.draftAndPublish === true),
+    () => collectionTypes.some((ct) => ct.options.draftAndPublish === true),
     [collectionTypes]
   );
 

package/admin/src/pages/SettingsPage/pages/Webhooks/EditView/reducer.js

@@ -22,7 +22,7 @@ const initialState = {
 
 const reducer = (state, action) =>
   // eslint-disable-next-line consistent-return
-  produce(state, draftState => {
+  produce(state, (draftState) => {
     switch (action.type) {
       case 'ADD_NEW_HEADER': {
         draftState.modifiedData.headers.push(header);
@@ -33,7 +33,7 @@ const reducer = (state, action) =>
         let formattedHeaders = [header];
 
         if (Object.keys(headers).length > 0) {
-          formattedHeaders = Object.keys(headers).map(key => {
+          formattedHeaders = Object.keys(headers).map((key) => {
             return { key, value: headers[key] };
           });
         }

package/admin/src/pages/SettingsPage/pages/Webhooks/EditView/utils/formatData.js

@@ -1,6 +1,6 @@
 import { set } from 'lodash';
 
-const cleanData = data => {
+const cleanData = (data) => {
   const webhooks = { ...data };
 
   set(webhooks, 'headers', unformatHeaders(data.headers));
@@ -8,7 +8,7 @@ const cleanData = data => {
   return webhooks;
 };
 
-const unformatHeaders = headers => {
+const unformatHeaders = (headers) => {
   return headers.reduce((acc, current) => {
     const { key, value } = current;
 

package/admin/src/pages/SettingsPage/pages/Webhooks/ListView/index.js

@@ -60,7 +60,7 @@ const ListView = () => {
   const { pathname } = useLocation();
   const rowsCount = webhooks.length;
   const webhooksToDeleteLength = webhooksToDelete.length;
-  const getWebhookIndex = id => webhooks.findIndex(webhook => webhook.id === id);
+  const getWebhookIndex = (id) => webhooks.findIndex((webhook) => webhook.id === id);
 
   useEffect(() => {
     isMounted.current = true;
@@ -108,7 +108,7 @@ const ListView = () => {
   };
 
   const handleToggleModal = () => {
-    setShowModal(prev => !prev);
+    setShowModal((prev) => !prev);
   };
 
   const handleConfirmDelete = () => {
@@ -169,7 +169,7 @@ const ListView = () => {
     setShowModal(false);
   };
 
-  const handleDeleteClick = id => {
+  const handleDeleteClick = (id) => {
     setShowModal(true);
 
     if (id !== 'all') {
@@ -235,7 +235,7 @@ const ListView = () => {
     });
   };
 
-  const handleGoTo = to => {
+  const handleGoTo = (to) => {
     push(`${pathname}/${to}`);
   };
 
@@ -252,7 +252,7 @@ const ListView = () => {
           primaryAction={
             canCreate &&
             !loadingWebhooks && (
-              <LinkButton startIcon={<Plus />} variant="default" to={`${pathname}/create`} size="L">
+              <LinkButton startIcon={<Plus />} variant="default" to={`${pathname}/create`} size="S">
                 {formatMessage({
                   id: 'Settings.webhooks.list.button.add',
                   defaultMessage: 'Create new webhook',
@@ -363,7 +363,7 @@ const ListView = () => {
                     </Tr>
                   </Thead>
                   <Tbody>
-                    {webhooks.map(webhook => (
+                    {webhooks.map((webhook) => (
                       <Tr
                         key={webhook.id}
                         {...onRowClick({
@@ -378,7 +378,7 @@ const ListView = () => {
                               defaultMessage: 'Select',
                             })} ${webhook.name}`}
                             value={webhooksToDelete?.includes(webhook.id)}
-                            onValueChange={value => handleSelectOneCheckbox(value, webhook.id)}
+                            onValueChange={(value) => handleSelectOneCheckbox(value, webhook.id)}
                             id="select"
                             name="select"
                           />

package/admin/src/pages/SettingsPage/pages/Webhooks/ListView/reducer.js

@@ -10,7 +10,7 @@ const initialState = {
 
 const reducer = (state, action) =>
   // eslint-disable-next-line consistent-return
-  produce(state, draftState => {
+  produce(state, (draftState) => {
     switch (action.type) {
       case 'GET_DATA_SUCCEEDED': {
         draftState.webhooks = action.data;
@@ -36,14 +36,14 @@ const reducer = (state, action) =>
         if (action.value) {
           draftState.webhooksToDelete.push(action.id);
         } else {
-          draftState.webhooksToDelete = state.webhooksToDelete.filter(id => id !== action.id);
+          draftState.webhooksToDelete = state.webhooksToDelete.filter((id) => id !== action.id);
         }
 
         break;
       }
       case 'SET_ALL_WEBHOOKS_TO_DELETE': {
         if (state.webhooksToDelete.length === 0) {
-          draftState.webhooksToDelete = state.webhooks.map(webhook => webhook.id);
+          draftState.webhooksToDelete = state.webhooks.map((webhook) => webhook.id);
         } else {
           draftState.webhooksToDelete = [];
         }
@@ -52,7 +52,7 @@ const reducer = (state, action) =>
       }
       case 'WEBHOOKS_DELETED': {
         draftState.webhooks = state.webhooks.filter(
-          webhook => !state.webhooksToDelete.includes(webhook.id)
+          (webhook) => !state.webhooksToDelete.includes(webhook.id)
         );
         draftState.webhooksToDelete = [];
         break;

package/admin/src/pages/SettingsPage/utils/createSectionsRoutes.js

@@ -1,10 +1,10 @@
 import flatMap from 'lodash/flatMap';
 import { createRoute } from '../../../utils';
 
-const createSectionsRoutes = settings => {
-  const allLinks = flatMap(settings, section => section.links);
+const createSectionsRoutes = (settings) => {
+  const allLinks = flatMap(settings, (section) => section.links);
 
-  return allLinks.map(link => createRoute(link.Component, link.to, link.exact || false));
+  return allLinks.map((link) => createRoute(link.Component, link.to, link.exact || false));
 };
 
 export default createSectionsRoutes;

package/admin/src/pages/SettingsPage/utils/defaultRoutes.js

@@ -3,7 +3,7 @@ import ProtectedRolesListPage from 'ee_else_ce/pages/SettingsPage/pages/Roles/Pr
 
 const defaultRoutes = [
   {
-    Component: () => {
+    Component() {
       return { default: ProtectedRolesListPage };
     },
 
@@ -11,21 +11,21 @@ const defaultRoutes = [
     exact: true,
   },
   {
-    Component: () => {
+    Component() {
       return { default: RolesCreatePage };
     },
     to: '/settings/roles/duplicate/:id',
     exact: true,
   },
   {
-    Component: () => {
+    Component() {
       return { default: RolesCreatePage };
     },
     to: '/settings/roles/new',
     exact: true,
   },
   {
-    Component: async () => {
+    async Component() {
       const component = await import(
         /* webpackChunkName: "admin-edit-roles-page" */ '../pages/Roles/ProtectedEditPage'
       );
@@ -36,7 +36,7 @@ const defaultRoutes = [
     exact: true,
   },
   {
-    Component: async () => {
+    async Component() {
       const component = await import(
         /* webpackChunkName: "admin-users" */ '../pages/Users/ProtectedListPage'
       );
@@ -47,7 +47,7 @@ const defaultRoutes = [
     exact: true,
   },
   {
-    Component: async () => {
+    async Component() {
       const component = await import(
         /* webpackChunkName: "admin-edit-users" */ '../pages/Users/ProtectedEditPage'
       );
@@ -58,7 +58,7 @@ const defaultRoutes = [
     exact: true,
   },
   {
-    Component: async () => {
+    async Component() {
       const component = await import(
         /* webpackChunkName: "webhook-edit-page" */ '../pages/Webhooks/ProtectedCreateView'
       );
@@ -69,7 +69,7 @@ const defaultRoutes = [
     exact: true,
   },
   {
-    Component: async () => {
+    async Component() {
       const component = await import(
         /* webpackChunkName: "webhook-edit-page" */ '../pages/Webhooks/ProtectedEditView'
       );
@@ -80,7 +80,7 @@ const defaultRoutes = [
     exact: true,
   },
   {
-    Component: async () => {
+    async Component() {
       const component = await import(
         /* webpackChunkName: "webhook-list-page" */ '../pages/Webhooks/ProtectedListView'
       );
@@ -91,7 +91,7 @@ const defaultRoutes = [
     exact: true,
   },
   {
-    Component: async () => {
+    async Component() {
       const component = await import(
         /* webpackChunkName: "api-tokens-list-page" */ '../pages/ApiTokens/ProtectedListView'
       );
@@ -102,7 +102,7 @@ const defaultRoutes = [
     exact: true,
   },
   {
-    Component: async () => {
+    async Component() {
       const component = await import(
         /* webpackChunkName: "api-tokens-create-page" */ '../pages/ApiTokens/ProtectedCreateView'
       );
@@ -113,7 +113,7 @@ const defaultRoutes = [
     exact: true,
   },
   {
-    Component: async () => {
+    async Component() {
       const component = await import(
         /* webpackChunkName: "api-tokens-edit-page" */ '../pages/ApiTokens/ProtectedEditView'
       );

package/admin/src/pages/SettingsPage/utils/getSectionsToDisplay.js

@@ -1,5 +1,5 @@
-const getSectionsToDisplay = menu => {
-  return menu.filter(section => !section.links.every(link => link.isDisplayed === false));
+const getSectionsToDisplay = (menu) => {
+  return menu.filter((section) => !section.links.every((link) => link.isDisplayed === false));
 };
 
 export default getSectionsToDisplay;