@strapi/admin 4.10.0-beta.0 → 4.10.0

package/admin/src/pages/SettingsPage/components/Tokens/TokenTypeSelect/index.js

@@ -4,21 +4,21 @@ import { useIntl } from 'react-intl';
 
 import { Select, Option } from '@strapi/design-system';
 
-const TokenTypeSelect = ({ errors, values, onChange, canEditInputs, options, label }) => {
+const TokenTypeSelect = ({ name, errors, values, onChange, canEditInputs, options, label }) => {
   const { formatMessage } = useIntl();
 
   return (
     <Select
-      name="type"
+      name={name}
       label={formatMessage({
         id: label.id,
         defaultMessage: label.defaultMessage,
       })}
-      value={values?.type}
+      value={values && values[name]}
       error={
-        errors.type
+        errors[name]
           ? formatMessage(
-              errors.type?.id ? errors.type : { id: errors.type, defaultMessage: errors.type }
+              errors[name]?.id ? errors[name] : { id: errors[name], defaultMessage: errors[name] }
             )
           : null
       }
@@ -38,6 +38,7 @@ const TokenTypeSelect = ({ errors, values, onChange, canEditInputs, options, lab
 };
 
 TokenTypeSelect.propTypes = {
+  name: PropTypes.string,
   options: PropTypes.arrayOf(
     PropTypes.shape({
       label: PropTypes.shape({
@@ -62,6 +63,7 @@ TokenTypeSelect.propTypes = {
 };
 
 TokenTypeSelect.defaultProps = {
+  name: 'type',
   errors: {},
   options: [],
 };

package/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/components/LogoModalStepper/PendingLogoDialog.js

@@ -43,9 +43,7 @@ const PendingLogoDialog = ({ onClose, asset, prev, next, goTo, setLocalImage, on
             })}
           </Button>
         </Flex>
-        <Box maxWidth={pxToRem(180)}>
-          <ImageCardAsset asset={asset} />
-        </Box>
+        <Box maxWidth={pxToRem(180)}>{asset.url ? <ImageCardAsset asset={asset} /> : null}</Box>
       </Box>
       <ModalFooter
         startActions={

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

@@ -5,7 +5,7 @@ import {
   Form,
   LoadingIndicatorPage,
   SettingsPageTitle,
-  request,
+  useFetchClient,
   useNotification,
   useOverlayBlocker,
   useTracking,
@@ -59,6 +59,8 @@ const CreatePage = () => {
   const { isLoading: isLayoutLoading, data: permissionsLayout } = useFetchPermissionsLayout();
   const { permissions: rolePermissions, isLoading: isRoleLoading } = useFetchRole(id);
 
+  const { post, put } = useFetchClient();
+
   const handleCreateRoleSubmit = (data) => {
     lockApp();
     setIsSubmiting(true);
@@ -69,13 +71,8 @@ const CreatePage = () => {
       trackUsage('willCreateNewRole');
     }
 
-    Promise.resolve(
-      request('/admin/roles', {
-        method: 'POST',
-        body: data,
-      })
-    )
-      .then(async (res) => {
+    Promise.resolve(post('/admin/roles', data))
+      .then(async ({ data: res }) => {
         const { permissionsToSend } = permissionsRef.current.getPermissions();
 
         if (id) {
@@ -85,10 +82,7 @@ const CreatePage = () => {
         }
 
         if (res.data.id && !isEmpty(permissionsToSend)) {
-          await request(`/admin/roles/${res.data.id}/permissions`, {
-            method: 'PUT',
-            body: { permissions: permissionsToSend },
-          });
+          await put(`/admin/roles/${res.data.id}/permissions`, { permissions: permissionsToSend });
         }
 
         return res;

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

@@ -1,6 +1,6 @@
 import React, { useRef, useState } from 'react';
 import {
-  request,
+  useFetchClient,
   useNotification,
   useOverlayBlocker,
   useTracking,
@@ -37,6 +37,8 @@ const EditPage = () => {
     onSubmitSucceeded,
   } = useFetchRole(id);
 
+  const { put } = useFetchClient();
+
   const handleEditRoleSubmit = async (data) => {
     try {
       lockApp();
@@ -44,17 +46,11 @@ const EditPage = () => {
 
       const { permissionsToSend, didUpdateConditions } = permissionsRef.current.getPermissions();
 
-      await request(`/admin/roles/${id}`, {
-        method: 'PUT',
-        body: data,
-      });
+      await put(`/admin/roles/${id}`, data);
 
       if (role.code !== 'strapi-super-admin') {
-        await request(`/admin/roles/${id}/permissions`, {
-          method: 'PUT',
-          body: {
-            permissions: permissionsToSend,
-          },
+        await put(`/admin/roles/${id}/permissions`, {
+          permissions: permissionsToSend,
         });
 
         if (didUpdateConditions) {

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

@@ -4,8 +4,9 @@ import { Box, Flex, Td, Tr, Typography, IconButton } from '@strapi/design-system
 import { stopPropagation, onRowClick, pxToRem } from '@strapi/helper-plugin';
 import { useIntl } from 'react-intl';
 
-const RoleRow = ({ id, name, description, usersCount, icons, rowIndex }) => {
+const RoleRow = ({ id, name, description, usersCount, icons, rowIndex, canUpdate }) => {
   const { formatMessage } = useIntl();
+  const [, editObject] = icons;
 
   const usersCountText = formatMessage(
     {
@@ -19,9 +20,11 @@ const RoleRow = ({ id, name, description, usersCount, icons, rowIndex }) => {
     <Tr
       aria-rowindex={rowIndex}
       key={id}
-      {...onRowClick({
-        fn: icons[1].onClick,
-      })}
+      {...(canUpdate
+        ? onRowClick({
+            fn: editObject.onClick,
+          })
+        : {})}
     >
       <Td maxWidth={pxToRem(130)}>
         <Typography ellipsis textColor="neutral800">
@@ -58,6 +61,11 @@ RoleRow.propTypes = {
   usersCount: PropTypes.number.isRequired,
   icons: PropTypes.array.isRequired,
   rowIndex: PropTypes.number.isRequired,
+  canUpdate: PropTypes.bool,
+};
+
+RoleRow.defaultProps = {
+  canUpdate: false,
 };
 
 export default RoleRow;

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

@@ -9,6 +9,8 @@ import {
   useQueryParams,
   useRBAC,
   useFocusWhenNavigate,
+  useFilter,
+  useCollator,
 } from '@strapi/helper-plugin';
 import { Plus, Trash, Duplicate, Pencil } from '@strapi/icons';
 import {
@@ -27,7 +29,6 @@ import {
   VisuallyHidden,
 } from '@strapi/design-system';
 import get from 'lodash/get';
-import matchSorter from 'match-sorter';
 import { useIntl } from 'react-intl';
 import { useHistory } from 'react-router-dom';
 import { useRolesList } from '../../../../../hooks';
@@ -38,6 +39,7 @@ import reducer, { initialState } from './reducer';
 
 const useSortedRoles = () => {
   useFocusWhenNavigate();
+  const { locale } = useIntl();
   const {
     isLoading: isLoadingForPermissions,
     allowedActions: { canCreate, canDelete, canRead, canUpdate },
@@ -46,7 +48,23 @@ const useSortedRoles = () => {
   const { getData, roles, isLoading } = useRolesList(false);
   const [{ query }] = useQueryParams();
   const _q = query?._q || '';
-  const sortedRoles = matchSorter(roles, _q, { keys: ['name', 'description'] });
+
+  const { includes } = useFilter(locale, {
+    sensitivity: 'base',
+  });
+
+  /**
+   * @type {Intl.Collator}
+   */
+  const formatter = useCollator(locale, {
+    sensitivity: 'base',
+  });
+
+  const sortedRoles = (roles || [])
+    .filter((role) => includes(role.name, _q) || includes(role.description, _q))
+    .sort(
+      (a, b) => formatter.compare(a.name, b.name) || formatter.compare(a.description, b.description)
+    );
 
   useEffect(() => {
     if (!isLoadingForPermissions && canRead) {
@@ -356,6 +374,7 @@ const RoleListPage = () => {
                   usersCount={role.usersCount}
                   icons={getIcons(role)}
                   rowIndex={index + 2}
+                  canUpdate={canUpdate}
                 />
               ))}
             </Tbody>

package/admin/src/pages/SettingsPage/pages/TransferTokens/EditView/components/FormTransferTokenContainer/index.js

@@ -5,6 +5,7 @@ import { Box, Grid, GridItem, Flex, Typography } from '@strapi/design-system';
 import LifeSpanInput from '../../../../../components/Tokens/LifeSpanInput';
 import TokenName from '../../../../../components/Tokens/TokenName';
 import TokenDescription from '../../../../../components/Tokens/TokenDescription';
+import TokenTypeSelect from '../../../../../components/Tokens/TokenTypeSelect';
 
 const FormTransferTokenContainer = ({
   errors,
@@ -16,6 +17,30 @@ const FormTransferTokenContainer = ({
 }) => {
   const { formatMessage } = useIntl();
 
+  const typeOptions = [
+    {
+      value: 'push',
+      label: {
+        id: 'Settings.transferTokens.types.push',
+        defaultMessage: 'Push',
+      },
+    },
+    {
+      value: 'pull',
+      label: {
+        id: 'Settings.transferTokens.types.pull',
+        defaultMessage: 'Pull',
+      },
+    },
+    {
+      value: 'push-pull',
+      label: {
+        id: 'Settings.transferTokens.types.push-pull',
+        defaultMessage: 'Full Access',
+      },
+    },
+  ];
+
   return (
     <Box
       background="neutral0"
@@ -59,6 +84,22 @@ const FormTransferTokenContainer = ({
               token={transferToken}
             />
           </GridItem>
+          <GridItem key="permissions" col={6} xs={12}>
+            <TokenTypeSelect
+              name="permissions"
+              values={values}
+              errors={errors}
+              label={{
+                id: 'Settings.tokens.form.type',
+                defaultMessage: 'Token type',
+              }}
+              onChange={(value) => {
+                onChange({ target: { name: 'permissions', value } });
+              }}
+              options={typeOptions}
+              canEditInputs={canEditInputs}
+            />
+          </GridItem>
         </Grid>
       </Flex>
     </Box>

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

@@ -13,6 +13,7 @@ import {
   useGuidedTour,
   useRBAC,
   useFetchClient,
+  useAPIErrorHandler,
 } from '@strapi/helper-plugin';
 import { ContentLayout, Main, Flex } from '@strapi/design-system';
 import { formatAPIErrors } from '../../../../../utils';
@@ -52,6 +53,8 @@ const TransferTokenCreateView = () => {
 
   const isCreating = id === 'create';
 
+  const { formatAPIError } = useAPIErrorHandler();
+
   useEffect(() => {
     trackUsageRef.current(isCreating ? 'didAddTokenFromList' : 'didEditTokenFromList', {
       tokenType: TRANSFER_TOKEN_TYPE,
@@ -73,11 +76,22 @@ const TransferTokenCreateView = () => {
     },
     {
       enabled: !isCreating && !transferToken,
-      onError() {
-        toggleNotification({
-          type: 'warning',
-          message: { id: 'notification.error', defaultMessage: 'An error occured' },
-        });
+      onError(err) {
+        if (err.response.data.error.details?.code === 'INVALID_TOKEN_SALT') {
+          toggleNotification({
+            type: 'warning',
+            message: {
+              id: 'notification.error.invalid.configuration',
+              defaultMessage:
+                'You have an invalid configuration, check your server log for more information.',
+            },
+          });
+        } else {
+          toggleNotification({
+            type: 'warning',
+            message: formatAPIError(err),
+          });
+        }
       },
     }
   );
@@ -92,6 +106,8 @@ const TransferTokenCreateView = () => {
         ? parseInt(body.lifespan, 10)
         : null;
 
+    const permissions = body.permissions.split('-');
+
     try {
       const {
         data: { data: response },
@@ -99,13 +115,12 @@ const TransferTokenCreateView = () => {
         ? await post(`/admin/transfer/tokens`, {
             ...body,
             lifespan: lifespanVal,
-            permissions: ['push'],
+            permissions,
           })
         : await put(`/admin/transfer/tokens/${id}`, {
             name: body.name,
             description: body.description,
-            type: body.type,
-            permissions: ['push'],
+            permissions,
           });
 
       unlockApp();
@@ -132,7 +147,7 @@ const TransferTokenCreateView = () => {
       });
 
       trackUsageRef.current(isCreating ? 'didCreateToken' : 'didEditToken', {
-        type: transferToken?.type,
+        type: transferToken?.permissions,
         tokenType: TRANSFER_TOKEN_TYPE,
       });
     } catch (err) {
@@ -144,6 +159,15 @@ const TransferTokenCreateView = () => {
           type: 'warning',
           message: err.response.data.message || 'notification.error.tokennamenotunique',
         });
+      } else if (err?.response?.data?.error?.details?.code === 'INVALID_TOKEN_SALT') {
+        toggleNotification({
+          type: 'warning',
+          message: {
+            id: 'notification.error.invalid.configuration',
+            defaultMessage:
+              'You have an invalid configuration, check your server log for more information.',
+          },
+        });
       } else {
         toggleNotification({
           type: 'warning',
@@ -161,6 +185,24 @@ const TransferTokenCreateView = () => {
     return <LoadingView transferTokenName={transferToken?.name} />;
   }
 
+  const handleErrorRegenerate = (err) => {
+    if (err?.response?.data?.error?.details?.code === 'INVALID_TOKEN_SALT') {
+      toggleNotification({
+        type: 'warning',
+        message: {
+          id: 'notification.error.invalid.configuration',
+          defaultMessage:
+            'You have an invalid configuration, check your server log for more information.',
+        },
+      });
+    } else {
+      toggleNotification({
+        type: 'warning',
+        message: formatAPIError(err),
+      });
+    }
+  };
+
   return (
     <Main>
       <SettingsPageTitle name="Transfer Tokens" />
@@ -173,6 +215,7 @@ const TransferTokenCreateView = () => {
           lifespan: transferToken?.lifespan
             ? transferToken.lifespan.toString()
             : transferToken?.lifespan,
+          permissions: transferToken?.permissions.join('-'),
         }}
         enableReinitialize
         onSubmit={(body, actions) => handleSubmit(body, actions)}
@@ -192,6 +235,7 @@ const TransferTokenCreateView = () => {
                 canRegenerate={canRegenerate}
                 isSubmitting={isSubmitting}
                 regenerateUrl="/admin/transfer/tokens/"
+                onErrorRegenerate={handleErrorRegenerate}
               />
               <ContentLayout>
                 <Flex direction="column" alignItems="stretch" gap={6}>

package/admin/src/pages/SettingsPage/pages/TransferTokens/EditView/utils/schema.js

@@ -5,6 +5,7 @@ const schema = yup.object().shape({
   name: yup.string(translatedErrors.string).max(100).required(translatedErrors.required),
   description: yup.string().nullable(),
   lifespan: yup.number().integer().min(0).nullable().defined(translatedErrors.required),
+  permissions: yup.string(translatedErrors.string).required(translatedErrors.required),
 });
 
 export default schema;

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

@@ -77,11 +77,24 @@ const TransferTokenListView = () => {
     },
     {
       enabled: canRead,
-      onError() {
-        toggleNotification({
-          type: 'warning',
-          message: { id: 'notification.error', defaultMessage: 'An error occured' },
-        });
+      onError(err) {
+        console.log('error', err);
+
+        if (err?.response?.data?.error?.details?.code === 'INVALID_TOKEN_SALT') {
+          toggleNotification({
+            type: 'warning',
+            message: {
+              id: 'notification.error.invalid.configuration',
+              defaultMessage:
+                'You have an invalid configuration, check your server log for more information.',
+            },
+          });
+        } else {
+          toggleNotification({
+            type: 'warning',
+            message: { id: 'notification.error', defaultMessage: 'An error occured' },
+          });
+        }
       },
     }
   );
@@ -101,6 +114,15 @@ const TransferTokenListView = () => {
       onError(err) {
         if (err?.response?.data?.data) {
           toggleNotification({ type: 'warning', message: err.response.data.data });
+        } else if (err?.response?.data?.error?.details?.code === 'INVALID_TOKEN_SALT') {
+          toggleNotification({
+            type: 'warning',
+            message: {
+              id: 'notification.error.invalid.configuration',
+              defaultMessage:
+                'You have an invalid configuration, check your server log for more information.',
+            },
+          });
         } else {
           toggleNotification({
             type: 'warning',

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

@@ -3,12 +3,10 @@
  * EditView
  *
  */
-import React, { useCallback, useMemo } from 'react';
+import * as React from 'react';
 import {
   LoadingIndicatorPage,
-  request,
   SettingsPageTitle,
-  to,
   useNotification,
   useOverlayBlocker,
   useFetchClient,
@@ -30,19 +28,20 @@ const EditView = () => {
   const toggleNotification = useNotification();
   const queryClient = useQueryClient();
   const { isLoading: isLoadingForModels, collectionTypes } = useModels();
-  const { post } = useFetchClient();
+  const { put, get, post } = useFetchClient();
 
   const isCreating = id === 'create';
 
-  const fetchWebhook = useCallback(
-    async (id) => {
-      const [err, { data }] = await to(
-        request(`/admin/webhooks/${id}`, {
-          method: 'GET',
-        })
-      );
+  const { isLoading, data } = useQuery(
+    ['get-webhook', id],
+    async () => {
+      try {
+        const {
+          data: { data },
+        } = await get(`/admin/webhooks/${id}`);
 
-      if (err) {
+        return data;
+      } catch (err) {
         toggleNotification({
           type: 'warning',
           message: { id: 'notification.error' },
@@ -50,16 +49,12 @@ const EditView = () => {
 
         return null;
       }
-
-      return data;
     },
-    [toggleNotification]
+    {
+      enabled: !isCreating,
+    }
   );
 
-  const { isLoading, data } = useQuery(['get-webhook', id], () => fetchWebhook(id), {
-    enabled: !isCreating,
-  });
-
   const {
     isLoading: isTriggering,
     data: triggerResponse,
@@ -77,25 +72,15 @@ const EditView = () => {
       },
     });
 
-  const createWebhookMutation = useMutation((body) =>
-    request('/admin/webhooks', {
-      method: 'POST',
-      body,
-    })
-  );
+  const createWebhookMutation = useMutation((body) => post('/admin/webhooks', body));
 
-  const updateWebhookMutation = useMutation(({ id, body }) =>
-    request(`/admin/webhooks/${id}`, {
-      method: 'PUT',
-      body,
-    })
-  );
+  const updateWebhookMutation = useMutation(({ id, body }) => put(`/admin/webhooks/${id}`, body));
 
   const handleSubmit = async (data) => {
     if (isCreating) {
       lockApp();
       createWebhookMutation.mutate(cleanData(data), {
-        onSuccess(result) {
+        onSuccess({ data: result }) {
           toggleNotification({
             type: 'success',
             message: { id: 'Settings.webhooks.created' },
@@ -138,7 +123,7 @@ const EditView = () => {
     }
   };
 
-  const isDraftAndPublishEvents = useMemo(
+  const isDraftAndPublishEvents = React.useMemo(
     () => collectionTypes.some((ct) => ct.options.draftAndPublish === true),
     [collectionTypes]
   );