@strapi/admin 4.3.4 → 4.4.0-alpha.0

package/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/RowLabelWithCheckbox/index.js

@@ -37,13 +37,14 @@ const RowLabelWithCheckbox = ({
           )}
           disabled={isFormDisabled}
           // Keep same signature as packages/core/admin/admin/src/components/Roles/Permissions/index.js l.91
-          onValueChange={value =>
+          onValueChange={(value) =>
             onChange({
               target: {
                 name: checkboxName,
                 value,
               },
-            })}
+            })
+          }
           indeterminate={someChecked}
           value={value}
         />
@@ -76,7 +77,7 @@ const RowLabelWithCheckbox = ({
 RowLabelWithCheckbox.defaultProps = {
   children: null,
   checkboxName: '',
-  onChange: () => {},
+  onChange() {},
   value: false,
   someChecked: false,
   isCollapsable: false,

package/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/utils/createArrayOfValues.js

@@ -1,12 +1,12 @@
 import { flattenDeep, isObject } from 'lodash';
 
-const createArrayOfValues = obj => {
+const createArrayOfValues = (obj) => {
   if (!isObject(obj)) {
     return [];
   }
 
   return flattenDeep(
-    Object.values(obj).map(value => {
+    Object.values(obj).map((value) => {
       if (isObject(value)) {
         return createArrayOfValues(value);
       }

package/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/utils/getCheckboxState.js

@@ -1,7 +1,7 @@
 import createArrayOfValues from './createArrayOfValues';
 import removeConditionKeyFromData from './removeConditionKeyFromData';
 
-const getCheckboxState = dataObj => {
+const getCheckboxState = (dataObj) => {
   const dataWithoutCondition = removeConditionKeyFromData(dataObj);
 
   const arrayOfValues = createArrayOfValues(dataWithoutCondition);
@@ -10,8 +10,8 @@ const getCheckboxState = dataObj => {
     return { hasAllActionsSelected: false, hasSomeActionsSelected: false };
   }
 
-  const hasAllActionsSelected = arrayOfValues.every(val => val);
-  const hasSomeActionsSelected = arrayOfValues.some(val => val) && !hasAllActionsSelected;
+  const hasAllActionsSelected = arrayOfValues.every((val) => val);
+  const hasSomeActionsSelected = arrayOfValues.some((val) => val) && !hasAllActionsSelected;
 
   return { hasAllActionsSelected, hasSomeActionsSelected };
 };

package/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/utils/removeConditionKeyFromData.js

@@ -1,4 +1,4 @@
-const removeConditionKeyFromData = obj => {
+const removeConditionKeyFromData = (obj) => {
   if (!obj) {
     return null;
   }

package/admin/src/pages/SettingsPage/pages/Roles/EditPage/index.js

@@ -41,7 +41,7 @@ const EditPage = () => {
     onSubmitSucceeded,
   } = useFetchRole(id);
 
-  const handleEditRoleSubmit = async data => {
+  const handleEditRoleSubmit = async (data) => {
     try {
       lockApp();
       setIsSubmiting(true);
@@ -106,68 +106,66 @@ const EditPage = () => {
       >
         {({ handleSubmit, values, errors, handleChange, handleBlur }) => (
           <form onSubmit={handleSubmit}>
-            <>
-              <HeaderLayout
-                primaryAction={
-                  <Stack horizontal spacing={2}>
-                    <Button
-                      disabled={role.code === 'strapi-super-admin'}
-                      onClick={handleSubmit}
-                      loading={isSubmitting}
-                      size="L"
-                    >
-                      {formatMessage({
-                        id: 'global.save',
-                        defaultMessage: 'Save',
-                      })}
-                    </Button>
-                  </Stack>
-                }
-                title={formatMessage({
-                  id: 'Settings.roles.edit.title',
-                  defaultMessage: 'Edit a role',
-                })}
-                subtitle={formatMessage({
-                  id: 'Settings.roles.create.description',
-                  defaultMessage: 'Define the rights given to the role',
-                })}
-                navigationAction={
-                  <Link startIcon={<ArrowLeft />} to="/settings/roles">
+            <HeaderLayout
+              primaryAction={
+                <Stack horizontal spacing={2}>
+                  <Button
+                    disabled={role.code === 'strapi-super-admin'}
+                    onClick={handleSubmit}
+                    loading={isSubmitting}
+                    size="L"
+                  >
                     {formatMessage({
-                      id: 'global.back',
-                      defaultMessage: 'Back',
+                      id: 'global.save',
+                      defaultMessage: 'Save',
                     })}
-                  </Link>
-                }
-              />
-              <ContentLayout>
-                <Stack spacing={6}>
-                  <RoleForm
-                    isLoading={isRoleLoading}
-                    disabled={isFormDisabled}
-                    errors={errors}
-                    values={values}
-                    onChange={handleChange}
-                    onBlur={handleBlur}
-                    role={role}
-                  />
-                  {!isLayoutLoading && !isRoleLoading ? (
-                    <Box shadow="filterShadow" hasRadius>
-                      <Permissions
-                        isFormDisabled={isFormDisabled}
-                        permissions={rolePermissions}
-                        ref={permissionsRef}
-                        layout={permissionsLayout}
-                      />
-                    </Box>
-                  ) : (
-                    <Box background="neutral0" padding={6} shadow="filterShadow" hasRadius>
-                      <LoadingIndicatorPage />
-                    </Box>
-                  )}
+                  </Button>
                 </Stack>
-              </ContentLayout>
-            </>
+              }
+              title={formatMessage({
+                id: 'Settings.roles.edit.title',
+                defaultMessage: 'Edit a role',
+              })}
+              subtitle={formatMessage({
+                id: 'Settings.roles.create.description',
+                defaultMessage: 'Define the rights given to the role',
+              })}
+              navigationAction={
+                <Link startIcon={<ArrowLeft />} to="/settings/roles">
+                  {formatMessage({
+                    id: 'global.back',
+                    defaultMessage: 'Back',
+                  })}
+                </Link>
+              }
+            />
+            <ContentLayout>
+              <Stack spacing={6}>
+                <RoleForm
+                  isLoading={isRoleLoading}
+                  disabled={isFormDisabled}
+                  errors={errors}
+                  values={values}
+                  onChange={handleChange}
+                  onBlur={handleBlur}
+                  role={role}
+                />
+                {!isLayoutLoading && !isRoleLoading ? (
+                  <Box shadow="filterShadow" hasRadius>
+                    <Permissions
+                      isFormDisabled={isFormDisabled}
+                      permissions={rolePermissions}
+                      ref={permissionsRef}
+                      layout={permissionsLayout}
+                    />
+                  </Box>
+                ) : (
+                  <Box background="neutral0" padding={6} shadow="filterShadow" hasRadius>
+                    <LoadingIndicatorPage />
+                  </Box>
+                )}
+              </Stack>
+            </ContentLayout>
           </form>
         )}
       </Formik>

package/admin/src/pages/SettingsPage/pages/Roles/ListPage/index.js

@@ -40,14 +40,14 @@ const useRoleActions = () => {
   const { push } = useHistory();
 
   const handleGoTo = useCallback(
-    id => {
+    (id) => {
       push(`/settings/roles/${id}`);
     },
     [push]
   );
 
   const handleToggle = useCallback(() => {
-    setIsModalOpen(prev => !prev);
+    setIsModalOpen((prev) => !prev);
   }, []);
 
   const handleToggleModalForCreatingRole = useCallback(() => {
@@ -56,7 +56,7 @@ const useRoleActions = () => {
   }, [trackUsage]);
 
   const getIcons = useCallback(
-    role => [
+    (role) => [
       {
         onClick: handleToggle,
         label: formatMessage({ id: 'app.utils.duplicate', defaultMessage: 'Duplicate' }),
@@ -89,12 +89,8 @@ const RoleListPage = () => {
   useFocusWhenNavigate();
 
   const { sortedRoles, isLoading } = useSortedRoles();
-  const {
-    isModalOpen,
-    handleToggle,
-    handleToggleModalForCreatingRole,
-    getIcons,
-  } = useRoleActions();
+  const { isModalOpen, handleToggle, handleToggleModalForCreatingRole, getIcons } =
+    useRoleActions();
 
   const rowCount = sortedRoles.length + 1;
   const colCount = 5;
@@ -172,7 +168,7 @@ const RoleListPage = () => {
             </Tr>
           </Thead>
           <Tbody>
-            {sortedRoles?.map(role => (
+            {sortedRoles?.map((role) => (
               <RoleRow
                 key={role.id}
                 id={role.id}

package/admin/src/pages/SettingsPage/pages/Users/EditPage/index.js

@@ -53,7 +53,7 @@ const EditPage = ({ canUpdate }) => {
     retry: false,
     keepPreviousData: false,
     staleTime: 1000 * 20,
-    onError: err => {
+    onError(err) {
       const status = err.response.status;
 
       // Redirect the use to the homepage if is not allowed to read
@@ -223,8 +223,8 @@ const EditPage = ({ canUpdate }) => {
                         })}
                       </Typography>
                       <Grid gap={5}>
-                        {layout.map(row => {
-                          return row.map(input => {
+                        {layout.map((row) => {
+                          return row.map((input) => {
                             return (
                               <GridItem key={input.name} {...input.size}>
                                 <GenericInput

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

@@ -1,6 +1,6 @@
 import { axiosInstance } from '../../../../../../core/utils';
 
-const fetchUser = async id => {
+const fetchUser = async (id) => {
   const { data } = await axiosInstance.get(`/admin/users/${id}`);
 
   return data.data;

package/admin/src/pages/SettingsPage/pages/Users/ListPage/DynamicTable/TableRows/index.js

@@ -31,8 +31,8 @@ const TableRows = ({
 
   return (
     <Tbody>
-      {rows.map(data => {
-        const isChecked = entriesToDelete.findIndex(id => id === data.id) !== -1;
+      {rows.map((data) => {
+        const isChecked = entriesToDelete.findIndex((id) => id === data.id) !== -1;
 
         return (
           <Tr
@@ -110,8 +110,8 @@ const TableRows = ({
 TableRows.defaultProps = {
   canDelete: false,
   entriesToDelete: [],
-  onClickDelete: () => {},
-  onSelectRow: () => {},
+  onClickDelete() {},
+  onSelectRow() {},
   rows: [],
   withBulkActions: false,
   withMainAction: false,

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

@@ -12,7 +12,7 @@ const Filters = ({ displayedFilters }) => {
   const buttonRef = useRef();
 
   const handleToggle = () => {
-    setIsVisible(prev => !prev);
+    setIsVisible((prev) => !prev);
   };
 
   return (

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

@@ -34,14 +34,14 @@ const ModalForm = ({ queryName, onToggle }) => {
   const { formatMessage } = useIntl();
   const toggleNotification = useNotification();
   const { lockApp, unlockApp } = useOverlayBlocker();
-  const postMutation = useMutation(body => axiosInstance.post('/admin/users', body), {
-    onSuccess: async ({ data }) => {
+  const postMutation = useMutation((body) => axiosInstance.post('/admin/users', body), {
+    async onSuccess({ data }) {
       setRegistrationToken(data.data.registrationToken);
       await queryClient.invalidateQueries(queryName);
       goNext();
       setIsSubmitting(false);
     },
-    onError: err => {
+    onError(err) {
       setIsSubmitting(false);
 
       toggleNotification({
@@ -51,7 +51,7 @@ const ModalForm = ({ queryName, onToggle }) => {
 
       throw err;
     },
-    onSettled: () => {
+    onSettled() {
       unlockApp();
     },
   });
@@ -124,8 +124,8 @@ const ModalForm = ({ queryName, onToggle }) => {
                     <Box paddingTop={4}>
                       <Stack spacing={1}>
                         <Grid gap={5}>
-                          {layout.map(row => {
-                            return row.map(input => {
+                          {layout.map((row) => {
+                            return row.map((input) => {
                               return (
                                 <GridItem key={input.name} {...input.size}>
                                   <GenericInput
@@ -160,8 +160,8 @@ const ModalForm = ({ queryName, onToggle }) => {
                             value={values.roles}
                           />
                         </GridItem>
-                        {roleSettingsForm.map(row => {
-                          return row.map(input => {
+                        {roleSettingsForm.map((row) => {
+                          return row.map((input) => {
                             return (
                               <GridItem key={input.name} {...input.size}>
                                 <GenericInput

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

@@ -4,14 +4,8 @@ import { translatedErrors } from '@strapi/helper-plugin';
 const schema = yup.object().shape({
   firstname: yup.string().required(translatedErrors.required),
   lastname: yup.string(),
-  email: yup
-    .string()
-    .email(translatedErrors.email)
-    .required(translatedErrors.required),
-  roles: yup
-    .array()
-    .min(1, translatedErrors.required)
-    .required(translatedErrors.required),
+  email: yup.string().email(translatedErrors.email).required(translatedErrors.required),
+  roles: yup.array().min(1, translatedErrors.required).required(translatedErrors.required),
 });
 
 export default schema;

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

@@ -38,6 +38,14 @@ const ListPage = () => {
   const { notifyStatus } = useNotifyAT();
   const queryName = ['users', search];
 
+  const headers = tableHeaders.map((header) => ({
+    ...header,
+    metadatas: {
+      ...header.metadatas,
+      label: formatMessage(header.metadatas.label),
+    },
+  }));
+
   const title = formatMessage({
     id: 'global.users',
     defaultMessage: 'Users',
@@ -60,7 +68,7 @@ const ListPage = () => {
     keepPreviousData: true,
     retry: false,
     staleTime: 1000 * 20,
-    onError: () => {
+    onError() {
       toggleNotification({
         type: 'warning',
         message: { id: 'notification.error', defaultMessage: 'An error occured' },
@@ -69,14 +77,14 @@ const ListPage = () => {
   });
 
   const handleToggle = () => {
-    setIsModalOpen(prev => !prev);
+    setIsModalOpen((prev) => !prev);
   };
 
-  const deleteAllMutation = useMutation(ids => deleteData(ids), {
-    onSuccess: async () => {
+  const deleteAllMutation = useMutation((ids) => deleteData(ids), {
+    async onSuccess() {
       await queryClient.invalidateQueries(queryName);
     },
-    onError: err => {
+    onError(err) {
       if (err?.response?.data?.data) {
         toggleNotification({ type: 'warning', message: err.response.data.data });
       } else {
@@ -104,9 +112,7 @@ const ListPage = () => {
         defaultMessage: 'Invite new user',
       })}
     </Button>
-  ) : (
-    undefined
-  );
+  ) : undefined;
 
   return (
     <Main aria-busy={isLoading}>
@@ -144,15 +150,15 @@ const ListPage = () => {
               contentType="Users"
               isLoading={isLoading}
               onConfirmDeleteAll={deleteAllMutation.mutateAsync}
-              onConfirmDelete={id => deleteAllMutation.mutateAsync([id])}
-              headers={tableHeaders}
+              onConfirmDelete={(id) => deleteAllMutation.mutateAsync([id])}
+              headers={headers}
               rows={data?.results}
               withBulkActions
               withMainAction={canDelete}
             >
               <TableRows
                 canDelete={canDelete}
-                headers={tableHeaders}
+                headers={headers}
                 rows={data?.results || []}
                 withBulkActions
                 withMainAction={canDelete}

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

@@ -10,7 +10,7 @@ const fetchData = async (search, notify) => {
   return data;
 };
 
-const deleteData = async ids => {
+const deleteData = async (ids) => {
   await axiosInstance.post('/admin/users/batch-delete', { ids });
 };
 

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 = {