@strapi/admin 4.3.4 → 4.3.7

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

@@ -14,77 +14,75 @@ const RoleForm = ({ disabled, role, values, errors, onChange, onBlur }) => {
   const { formatMessage } = useIntl();
 
   return (
-    <>
-      <Box background="neutral0" padding={6} shadow="filterShadow" hasRadius>
-        <Stack spacing={4}>
-          <Flex justifyContent="space-between">
+    <Box background="neutral0" padding={6} shadow="filterShadow" hasRadius>
+      <Stack spacing={4}>
+        <Flex justifyContent="space-between">
+          <Box>
             <Box>
-              <Box>
-                <Typography fontWeight="bold">
-                  {role
-                    ? role.name
-                    : formatMessage({
-                        id: 'global.details',
-                        defaultMessage: 'Details',
-                      })}
-                </Typography>
-              </Box>
-              <Box>
-                <Typography textColor="neutral500" variant="pi">
-                  {role
-                    ? role.description
-                    : formatMessage({
-                        id: 'Settings.roles.form.description',
-                        defaultMessage: 'Name and description of the role',
-                      })}
-                </Typography>
-              </Box>
+              <Typography fontWeight="bold">
+                {role
+                  ? role.name
+                  : formatMessage({
+                      id: 'global.details',
+                      defaultMessage: 'Details',
+                    })}
+              </Typography>
             </Box>
-            <Button disabled variant="secondary">
-              {formatMessage(
-                {
-                  id: 'Settings.roles.form.button.users-with-role',
-                  defaultMessage:
-                    '{number, plural, =0 {# users} one {# user} other {# users}} with this role',
-                },
-                { number: role.usersCount }
-              )}
-            </Button>
-          </Flex>
-          <Grid gap={4}>
-            <GridItem col={6}>
-              <TextInput
-                disabled={disabled}
-                name="name"
-                error={errors.name && formatMessage({ id: errors.name })}
-                label={formatMessage({
-                  id: 'global.name',
-                  defaultMessage: 'Name',
-                })}
-                onChange={onChange}
-                onBlur={onBlur}
-                value={values.name || ''}
-              />
-            </GridItem>
-            <GridItem col={6}>
-              <Textarea
-                disabled={disabled}
-                label={formatMessage({
-                  id: 'global.description',
-                  defaultMessage: 'Description',
-                })}
-                name="description"
-                error={errors.name && formatMessage({ id: errors.name })}
-                onChange={onChange}
-                onBlur={onBlur}
-              >
-                {values.description || ''}
-              </Textarea>
-            </GridItem>
-          </Grid>
-        </Stack>
-      </Box>
-    </>
+            <Box>
+              <Typography textColor="neutral500" variant="pi">
+                {role
+                  ? role.description
+                  : formatMessage({
+                      id: 'Settings.roles.form.description',
+                      defaultMessage: 'Name and description of the role',
+                    })}
+              </Typography>
+            </Box>
+          </Box>
+          <Button disabled variant="secondary">
+            {formatMessage(
+              {
+                id: 'Settings.roles.form.button.users-with-role',
+                defaultMessage:
+                  '{number, plural, =0 {# users} one {# user} other {# users}} with this role',
+              },
+              { number: role.usersCount }
+            )}
+          </Button>
+        </Flex>
+        <Grid gap={4}>
+          <GridItem col={6}>
+            <TextInput
+              disabled={disabled}
+              name="name"
+              error={errors.name && formatMessage({ id: errors.name })}
+              label={formatMessage({
+                id: 'global.name',
+                defaultMessage: 'Name',
+              })}
+              onChange={onChange}
+              onBlur={onBlur}
+              value={values.name || ''}
+            />
+          </GridItem>
+          <GridItem col={6}>
+            <Textarea
+              disabled={disabled}
+              label={formatMessage({
+                id: 'global.description',
+                defaultMessage: 'Description',
+              })}
+              name="description"
+              error={errors.name && formatMessage({ id: errors.name })}
+              onChange={onChange}
+              onBlur={onBlur}
+            >
+              {values.description || ''}
+            </Textarea>
+          </GridItem>
+        </Grid>
+      </Stack>
+    </Box>
   );
 };
 

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;
@@ -106,7 +102,7 @@ const RoleListPage = () => {
       <SettingsPageTitle name="Roles" />
       <HeaderLayout
         primaryAction={
-          <Button onClick={handleToggleModalForCreatingRole} startIcon={<Plus />} size="L">
+          <Button onClick={handleToggleModalForCreatingRole} startIcon={<Plus />} size="S">
             {formatMessage({
               id: 'Settings.roles.list.button.add',
               defaultMessage: 'Add new role',
@@ -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 {
@@ -97,16 +105,14 @@ const ListPage = () => {
       data-testid="create-user-button"
       onClick={handleToggle}
       startIcon={<Envelop />}
-      size="L"
+      size="S"
     >
       {formatMessage({
         id: 'Settings.permissions.users.create',
         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 });
 };