@strapi/admin 4.10.0-beta.1 → 4.10.0

package/admin/src/content-manager/components/RepeatableComponent/components/Component.js

@@ -97,11 +97,17 @@ const DraggedItem = ({
   const accordionRef = useRef(null);
   const { formatMessage } = useIntl();
 
-  const [parentFieldName] = componentFieldName.split('.');
+  /**
+   * The last item in the fieldName array will be the index of this component.
+   * Drag and drop should be isolated to the parent component so nested repeatable
+   * components are not affected by the drag and drop of the parent component in
+   * their own re-ordering context.
+   */
+  const componentKey = componentFieldName.split('.').slice(0, -1).join('.');
 
   const [{ handlerId, isDragging, handleKeyDown }, boxRef, dropRef, dragRef, dragPreviewRef] =
     useDragAndDrop(!isReadOnly, {
-      type: `${ItemTypes.COMPONENT}_${parentFieldName}`,
+      type: `${ItemTypes.COMPONENT}_${componentKey}`,
       index,
       item: {
         displayedValue,

package/admin/src/content-manager/pages/EditSettingsView/components/ModalForm.js

@@ -102,7 +102,9 @@ const ModalForm = ({ onMetaChange, onSizeChange }) => {
     );
   });
 
-  const { isResizable } = fieldSizes[attributes[selectedField].type];
+  // Check for a custom input provided by a custom field, or use the default one for that type
+  const { type, customField } = attributes[selectedField];
+  const { isResizable } = fieldSizes[customField] ?? fieldSizes[type];
 
   const sizeField = (
     <GridItem col={6} key="size">

package/admin/src/content-manager/pages/EditSettingsView/reducer.js

@@ -30,8 +30,14 @@ const reducer = (state = initialState, action) =>
       }
       case 'ON_ADD_FIELD': {
         const newState = cloneDeep(state);
-        const type = get(newState, ['modifiedData', 'attributes', action.name, 'type'], '');
-        const size = action.fieldSizes[type]?.default ?? DEFAULT_FIELD_SIZE;
+        const attribute = get(newState, ['modifiedData', 'attributes', action.name], {});
+
+        // Get the default size, checking custom fields first, then the type and generic defaults
+        const size =
+          action.fieldSizes[attribute?.customField]?.default ??
+          action.fieldSizes[attribute?.type]?.default ??
+          DEFAULT_FIELD_SIZE;
+
         const listSize = get(newState, layoutPathEdit, []).length;
         const actualRowContentPath = [...layoutPathEdit, listSize - 1, 'rowContent'];
         const rowContentToSet = get(newState, actualRowContentPath, []);

package/admin/src/content-manager/pages/EditViewLayoutManager/reducer.js

@@ -12,18 +12,18 @@ export const initialState = {
 
 const editViewManagerReducer = (state = initialState, action) =>
   // eslint-disable-next-line consistent-return
-  produce(state, (drafState) => {
+  produce(state, (draftState) => {
     switch (action.type) {
       case RESET_PROPS: {
-        drafState.currentLayout = null;
+        draftState.currentLayout = null;
         break;
       }
       case SET_LAYOUT: {
-        drafState.currentLayout = action.layout;
+        draftState.currentLayout = action.layout;
         break;
       }
       default:
-        return drafState;
+        return draftState;
     }
   });
 

package/admin/src/content-manager/sharedReducers/crudReducer/actions.js

@@ -2,7 +2,6 @@ import {
   GET_DATA,
   GET_DATA_SUCCEEDED,
   INIT_FORM,
-  UPDATE_PARTIAL_DATA,
   RESET_PROPS,
   SET_DATA_STRUCTURES,
   SET_STATUS,
@@ -48,8 +47,3 @@ export const submitSucceeded = (data) => ({
 export const clearSetModifiedDataOnly = () => ({
   type: CLEAR_SET_MODIFIED_DATA_ONLY,
 });
-
-export const updatePartialData = (data) => ({
-  type: UPDATE_PARTIAL_DATA,
-  data,
-});

package/admin/src/content-manager/sharedReducers/crudReducer/constants.js

@@ -7,4 +7,3 @@ export const SET_STATUS = 'ContentManager/CrudReducer/SET_STATUS';
 export const SUBMIT_SUCCEEDED = 'ContentManager/CrudReducer/SUBMIT_SUCCEEDED';
 export const CLEAR_SET_MODIFIED_DATA_ONLY =
   'ContentManager/CrudReducer/CLEAR_SET_MODIFIED_DATA_ONLY';
-export const UPDATE_PARTIAL_DATA = 'ContentManager/CrudReducer/PARTIAL_DATA_UPDATE';

package/admin/src/content-manager/sharedReducers/crudReducer/reducer.js

@@ -12,7 +12,6 @@ import {
   GET_DATA,
   GET_DATA_SUCCEEDED,
   INIT_FORM,
-  UPDATE_PARTIAL_DATA,
   RESET_PROPS,
   SET_DATA_STRUCTURES,
   SET_STATUS,
@@ -54,10 +53,6 @@ const crudReducer = (state = crudInitialState, action) =>
         draftState.data = state.contentTypeDataStructure;
         break;
       }
-      case UPDATE_PARTIAL_DATA: {
-        draftState.data = { ...state.data, ...action.data };
-        break;
-      }
       case RESET_PROPS: {
         return crudInitialState;
       }

package/admin/src/hooks/useFetchPermissionsLayout/index.js

@@ -1,30 +1,39 @@
 import { useEffect, useReducer } from 'react';
-import { request } from '@strapi/helper-plugin';
+import { useFetchClient } from '@strapi/helper-plugin';
 
 import reducer, { initialState } from './reducer';
 
+/**
+ * TODO: refactor this to use react-query and move it to the `Roles` SettingsPage
+ */
 const useFetchPermissionsLayout = (id) => {
   const [{ data, error, isLoading }, dispatch] = useReducer(reducer, initialState);
+  const { get } = useFetchClient();
 
   useEffect(() => {
     const getData = async () => {
-      dispatch({
-        type: 'GET_DATA',
-      });
-
-      const { data } = await request('/admin/permissions', {
-        method: 'GET',
-        params: { role: id },
-      });
-
-      dispatch({
-        type: 'GET_DATA_SUCCEEDED',
-        data,
-      });
+      try {
+        dispatch({
+          type: 'GET_DATA',
+        });
+
+        const {
+          data: { data },
+        } = await get('/admin/permissions', {
+          params: { role: id },
+        });
+
+        dispatch({
+          type: 'GET_DATA_SUCCEEDED',
+          data,
+        });
+      } catch (err) {
+        // silence is golden
+      }
     };
 
     getData();
-  }, [id]);
+  }, [id, get]);
 
   return { data, error, isLoading };
 };

package/admin/src/hooks/useFetchRole/index.js

@@ -1,13 +1,48 @@
 import { useCallback, useReducer, useEffect } from 'react';
-import { request, useNotification } from '@strapi/helper-plugin';
+import { useFetchClient, useNotification } from '@strapi/helper-plugin';
 import reducer, { initialState } from './reducer';
 
 const useFetchRole = (id) => {
   const toggleNotification = useNotification();
   const [state, dispatch] = useReducer(reducer, initialState);
 
+  const { get } = useFetchClient();
+
   useEffect(() => {
     if (id) {
+      const fetchRole = async (roleId) => {
+        try {
+          const [
+            {
+              data: { data: role },
+            },
+            {
+              data: { data: permissions },
+            },
+          ] = await Promise.all(
+            [`roles/${roleId}`, `roles/${roleId}/permissions`].map((endPoint) =>
+              get(`/admin/${endPoint}`)
+            )
+          );
+
+          dispatch({
+            type: 'GET_DATA_SUCCEEDED',
+            role,
+            permissions,
+          });
+        } catch (err) {
+          console.error(err);
+
+          dispatch({
+            type: 'GET_DATA_ERROR',
+          });
+          toggleNotification({
+            type: 'warning',
+            message: { id: 'notification.error' },
+          });
+        }
+      };
+
       fetchRole(id);
     } else {
       dispatch({
@@ -16,35 +51,7 @@ const useFetchRole = (id) => {
         permissions: [],
       });
     }
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [id]);
-
-  const fetchRole = async (roleId) => {
-    try {
-      const [{ data: role }, { data: permissions }] = await Promise.all(
-        [`roles/${roleId}`, `roles/${roleId}/permissions`].map((endPoint) =>
-          request(`/admin/${endPoint}`, { method: 'GET' })
-        )
-      );
-
-      dispatch({
-        type: 'GET_DATA_SUCCEEDED',
-        role,
-        permissions,
-      });
-    } catch (err) {
-      console.error(err);
-
-      dispatch({
-        type: 'GET_DATA_ERROR',
-      });
-      toggleNotification({
-        type: 'warning',
-        message: { id: 'notification.error' },
-      });
-    }
-  };
+  }, [get, id, toggleNotification]);
 
   const handleSubmitSucceeded = useCallback((data) => {
     dispatch({

package/admin/src/hooks/useModels/index.js

@@ -1,26 +1,32 @@
-import { useReducer, useEffect } from 'react';
-import { request, useNotification } from '@strapi/helper-plugin';
+import { useReducer, useEffect, useCallback } from 'react';
+import { useFetchClient, useNotification } from '@strapi/helper-plugin';
 import reducer, { initialState } from './reducer';
 
+/**
+ * TODO: refactor this to not use the `useReducer` hook,
+ * it's not really necessary. Also use `useQuery`?
+ */
 const useModels = () => {
   const toggleNotification = useNotification();
   const [state, dispatch] = useReducer(reducer, initialState);
 
-  useEffect(() => {
-    fetchModels();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  const { get } = useFetchClient();
 
-  const fetchModels = async () => {
+  const fetchModels = useCallback(async () => {
     dispatch({
       type: 'GET_MODELS',
     });
 
     try {
-      const [{ data: components }, { data: contentTypes }] = await Promise.all(
-        ['components', 'content-types'].map((endPoint) =>
-          request(`/content-manager/${endPoint}`, { method: 'GET' })
-        )
+      const [
+        {
+          data: { data: components },
+        },
+        {
+          data: { data: contentTypes },
+        },
+      ] = await Promise.all(
+        ['components', 'content-types'].map((endPoint) => get(`/content-manager/${endPoint}`))
       );
 
       dispatch({
@@ -37,7 +43,11 @@ const useModels = () => {
         message: { id: 'notification.error' },
       });
     }
-  };
+  }, [toggleNotification, get]);
+
+  useEffect(() => {
+    fetchModels();
+  }, [fetchModels]);
 
   return {
     ...state,

package/admin/src/hooks/useSettingsForm/index.js

@@ -1,10 +1,15 @@
 import { useEffect, useReducer } from 'react';
-import { request, useNotification, useOverlayBlocker } from '@strapi/helper-plugin';
+import { useFetchClient, useNotification, useOverlayBlocker } from '@strapi/helper-plugin';
 import omit from 'lodash/omit';
 import { checkFormValidity, formatAPIErrors } from '../../utils';
 import { initialState, reducer } from './reducer';
 import init from './init';
 
+/**
+ * TODO: refactor this, it's confusing and hard to read.
+ * It's also only used in `Settings/pages/SingleSignOn` so it can
+ * probably be deleted and everything written there...
+ */
 const useSettingsForm = (endPoint, schema, cbSuccess, fieldsToPick) => {
   const [
     { formErrors, initialData, isLoading, modifiedData, showHeaderButtonLoader, showHeaderLoader },
@@ -13,10 +18,14 @@ const useSettingsForm = (endPoint, schema, cbSuccess, fieldsToPick) => {
   const toggleNotification = useNotification();
   const { lockApp, unlockApp } = useOverlayBlocker();
 
+  const { get, put } = useFetchClient();
+
   useEffect(() => {
     const getData = async () => {
       try {
-        const { data } = await request(endPoint, { method: 'GET' });
+        const {
+          data: { data },
+        } = await get(endPoint);
 
         dispatch({
           type: 'GET_DATA_SUCCEEDED',
@@ -85,10 +94,9 @@ const useSettingsForm = (endPoint, schema, cbSuccess, fieldsToPick) => {
           cleanedData.roles = cleanedData.roles.map((role) => role.id);
         }
 
-        const { data } = await request(endPoint, {
-          method: 'PUT',
-          body: cleanedData,
-        });
+        const {
+          data: { data },
+        } = await put(endPoint, cleanedData);
 
         cbSuccess(data);
 

package/admin/src/pages/App/index.js

@@ -6,17 +6,16 @@
 
 import React, { useEffect, useState, useMemo, lazy, Suspense } from 'react';
 import { Switch, Route } from 'react-router-dom';
+import axios from 'axios';
 import {
   LoadingIndicatorPage,
   auth,
-  request,
   useNotification,
   TrackingProvider,
   prefixFileUrlWithBackendUrl,
   useAppInfos,
   useFetchClient,
 } from '@strapi/helper-plugin';
-import axios from 'axios';
 import { SkipToContent } from '@strapi/design-system';
 import { useIntl } from 'react-intl';
 import PrivateRoute from '../../components/PrivateRoute';
@@ -41,7 +40,7 @@ function App() {
     hasAdmin: false,
   });
   const appInfo = useAppInfos();
-  const { get } = useFetchClient();
+  const { get, post } = useFetchClient();
 
   const authRoutes = useMemo(() => {
     return makeUniqueRoutes(
@@ -57,11 +56,10 @@ function App() {
     const renewToken = async () => {
       try {
         const {
-          data: { token },
-        } = await request('/admin/renew-token', {
-          method: 'POST',
-          body: { token: currentToken },
-        });
+          data: {
+            data: { token },
+          },
+        } = await post('/admin/renew-token', { token: currentToken });
         auth.updateToken(token);
       } catch (err) {
         // Refresh app
@@ -73,7 +71,7 @@ function App() {
     if (currentToken) {
       renewToken();
     }
-  }, []);
+  }, [post]);
 
   useEffect(() => {
     const getData = async () => {
@@ -82,7 +80,7 @@ function App() {
           data: {
             data: { hasAdmin, uuid, menuLogo, authLogo },
           },
-        } = await axios.get(`${strapi.backendURL}/admin/init`);
+        } = await get(`/admin/init`);
 
         updateProjectSettings({
           menuLogo: prefixFileUrlWithBackendUrl(menuLogo),
@@ -102,20 +100,17 @@ function App() {
           setTelemetryProperties(properties);
 
           try {
-            await fetch('https://analytics.strapi.io/api/v2/track', {
-              method: 'POST',
-              body: JSON.stringify({
-                // This event is anonymous
-                event: 'didInitializeAdministration',
-                userId: '',
-                deviceId,
-                eventPropeties: {},
-                userProperties: { environment: appInfo.currentEnvironment },
-                groupProperties: { ...properties, projectId: uuid },
-              }),
-              headers: {
-                'Content-Type': 'application/json',
-              },
+            /**
+             * TODO: remove this call to `axios`
+             */
+            await axios.post('https://analytics.strapi.io/api/v2/track', {
+              // This event is anonymous
+              event: 'didInitializeAdministration',
+              userId: '',
+              deviceId,
+              eventPropeties: {},
+              userProperties: { environment: appInfo.currentEnvironment },
+              groupProperties: { ...properties, projectId: uuid },
             });
           } catch (e) {
             // Silent.

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/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]
   );