@strapi/admin 4.14.0-alpha.0 → 4.14.0

package/admin/src/content-manager/components/InputUID/index.js

@@ -1,4 +1,4 @@
-import React, { forwardRef, useEffect, useRef, useState } from 'react';
+import * as React from 'react';
 
 import { Flex, TextInput, Typography } from '@strapi/design-system';
 import {
@@ -10,16 +10,16 @@ import {
 import { CheckCircle, ExclamationMarkCircle, Loader, Refresh } from '@strapi/icons';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
+import { useMutation, useQuery } from 'react-query';
 
 import useDebounce from '../../../hooks/useDebounce';
 
 import { FieldActionWrapper, LoadingWrapper, TextValidation } from './endActionStyle';
 import UID_REGEX from './regex';
 
-const InputUID = forwardRef(
+const InputUID = React.forwardRef(
   (
     {
-      attribute,
       contentTypeUID,
       hint,
       disabled,
@@ -34,20 +34,16 @@ const InputUID = forwardRef(
     },
     forwardedRef
   ) => {
-    const { modifiedData, initialData, layout } = useCMEditViewDataManager();
-    const [isLoading, setIsLoading] = useState(false);
-    const [availability, setAvailability] = useState(null);
+    const [availability, setAvailability] = React.useState(null);
+    const [showRegenerate, setShowRegenerate] = React.useState(false);
+    /**
+     * @type {string | null}
+     */
     const debouncedValue = useDebounce(value, 300);
-    const generateUid = useRef();
+    const { modifiedData, initialData } = useCMEditViewDataManager();
     const toggleNotification = useNotification();
     const { formatAPIError } = useAPIErrorHandler();
-    const initialValue = initialData[name];
     const { formatMessage } = useIntl();
-    const createdAtName = layout?.options?.timestamps ?? 0;
-    const isCreation = !initialData[createdAtName];
-    const debouncedTargetFieldValue = useDebounce(modifiedData[attribute.targetField], 300);
-    const [isCustomized, setIsCustomized] = useState(false);
-    const [regenerateLabel, setRegenerateLabel] = useState(null);
     const { post } = useFetchClient();
 
     const label = intlLabel.id
@@ -64,76 +60,96 @@ const InputUID = forwardRef(
         )
       : '';
 
-    generateUid.current = async (shouldSetInitialValue = false) => {
-      setIsLoading(true);
+    /**
+     * @type {import('react-query').UseQueryResult<string>}
+     */
+    const { data: defaultGeneratedUID, isLoading: isGeneratingDefaultUID } = useQuery({
+      queryKey: ['uid', { contentTypeUID, field: name, data: modifiedData }],
+      async queryFn({ queryKey }) {
+        const [, body] = queryKey;
 
-      try {
         const {
           data: { data },
-        } = await post('/content-manager/uid/generate', {
-          contentTypeUID,
-          field: name,
-          data: modifiedData,
-        });
+        } = await post('/content-manager/uid/generate', body);
 
-        onChange({ target: { name, value: data, type: 'text' } }, shouldSetInitialValue);
-        setIsLoading(false);
-      } catch (error) {
-        setIsLoading(false);
+        return data;
+      },
+      onError(err) {
         toggleNotification({
           type: 'warning',
-          message: formatAPIError(error),
+          message: formatAPIError(err),
         });
-      }
-    };
+      },
+      enabled: !value && required,
+    });
 
-    const checkAvailability = async () => {
-      if (!value) {
-        return;
+    /**
+     * If the defaultGeneratedUID is available, then we set it as the value,
+     * but we also want to set it as the initialValue too.
+     */
+    React.useEffect(() => {
+      if (defaultGeneratedUID) {
+        onChange({ target: { name, value: defaultGeneratedUID, type: 'text' } }, true);
       }
+    }, [defaultGeneratedUID, name, onChange]);
 
-      setIsLoading(true);
-
-      try {
-        const { data } = await post('/content-manager/uid/check-availability', {
-          contentTypeUID,
-          field: name,
-          value: value ? value.trim() : '',
-        });
+    const { mutate: generateUID, isLoading: isGeneratingUID } = useMutation({
+      async mutationFn(body) {
+        const {
+          data: { data },
+        } = await post('/content-manager/uid/generate', body);
 
-        setIsLoading(false);
-        setAvailability(data);
-      } catch (error) {
-        setIsLoading(false);
+        return data;
+      },
+      onSuccess(data) {
+        onChange({ target: { name, value: data, type: 'text' } });
+      },
+      onError(err) {
         toggleNotification({
           type: 'warning',
-          message: formatAPIError(error),
+          message: formatAPIError(err),
         });
-      }
-    };
+      },
+    });
 
-    // FIXME: we need to find a better way to autofill the input when it is required.
-    useEffect(() => {
-      if (!value && attribute.required) {
-        generateUid.current(true);
-      }
-    }, [attribute.required, generateUid, value]);
+    /**
+     * @type {import('react-query').UseQueryResult<{ isAvailable: boolean }>
+     */
+    const { data: availabilityData, isLoading: isCheckingAvailability } = useQuery({
+      queryKey: [
+        'uid',
+        { contentTypeUID, field: name, value: debouncedValue ? debouncedValue.trim() : '' },
+      ],
+      async queryFn({ queryKey }) {
+        const [, body] = queryKey;
 
-    useEffect(() => {
-      if (debouncedValue?.trim().match(UID_REGEX) && debouncedValue !== initialValue) {
-        checkAvailability();
-      }
+        const { data } = await post('/content-manager/uid/check-availability', body);
 
-      if (!debouncedValue) {
-        setAvailability(null);
-      }
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [initialValue, debouncedValue]);
+        return data;
+      },
+      enabled: Boolean(
+        debouncedValue !== initialData[name] &&
+          debouncedValue &&
+          UID_REGEX.test(debouncedValue.trim())
+      ),
+      onError(err) {
+        toggleNotification({
+          type: 'warning',
+          message: formatAPIError(err),
+        });
+      },
+    });
+
+    React.useEffect(() => {
+      /**
+       * always store the data in state because that way as seen below
+       * we can then remove the data to stop showing the label.
+       */
+      setAvailability(availabilityData);
 
-    useEffect(() => {
       let timer;
 
-      if (availability?.isAvailable) {
+      if (availabilityData?.isAvailable) {
         timer = setTimeout(() => {
           setAvailability(null);
         }, 4000);
@@ -144,41 +160,9 @@ const InputUID = forwardRef(
           clearTimeout(timer);
         }
       };
-    }, [availability]);
-
-    useEffect(() => {
-      if (
-        !isCustomized &&
-        isCreation &&
-        debouncedTargetFieldValue &&
-        modifiedData[attribute.targetField] &&
-        !value
-      ) {
-        generateUid.current(true);
-      }
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [debouncedTargetFieldValue, isCustomized, isCreation]);
+    }, [availabilityData]);
 
-    const handleGenerateMouseEnter = () => {
-      setRegenerateLabel(
-        formatMessage({
-          id: 'content-manager.components.uid.regenerate',
-          defaultMessage: 'Regenerate',
-        })
-      );
-    };
-
-    const handleGenerateMouseLeave = () => {
-      setRegenerateLabel(null);
-    };
-
-    const handleChange = (e) => {
-      if (e.target.value && isCreation) {
-        setIsCustomized(true);
-      }
-
-      onChange(e);
-    };
+    const isLoading = isGeneratingDefaultUID || isGeneratingUID || isCheckingAvailability;
 
     return (
       <TextInput
@@ -187,7 +171,7 @@ const InputUID = forwardRef(
         error={error}
         endAction={
           <Flex position="relative" gap={1}>
-            {availability && !regenerateLabel && (
+            {availability && !showRegenerate && (
               <TextValidation
                 alignItems="center"
                 gap={1}
@@ -222,22 +206,25 @@ const InputUID = forwardRef(
 
             {!disabled && (
               <>
-                {regenerateLabel && (
+                {showRegenerate && (
                   <TextValidation alignItems="center" justifyContent="flex-end" gap={1}>
                     <Typography textColor="primary600" variant="pi">
-                      {regenerateLabel}
+                      {formatMessage({
+                        id: 'content-manager.components.uid.regenerate',
+                        defaultMessage: 'Regenerate',
+                      })}
                     </Typography>
                   </TextValidation>
                 )}
 
                 <FieldActionWrapper
-                  onClick={() => generateUid.current()}
+                  onClick={() => generateUID({ contentTypeUID, field: name, data: modifiedData })}
                   label={formatMessage({
                     id: 'content-manager.components.uid.regenerate',
                     defaultMessage: 'Regenerate',
                   })}
-                  onMouseEnter={handleGenerateMouseEnter}
-                  onMouseLeave={handleGenerateMouseLeave}
+                  onMouseEnter={() => setShowRegenerate(true)}
+                  onMouseLeave={() => setShowRegenerate(false)}
                 >
                   {isLoading ? (
                     <LoadingWrapper data-testid="loading-wrapper">
@@ -255,7 +242,7 @@ const InputUID = forwardRef(
         label={label}
         labelAction={labelAction}
         name={name}
-        onChange={handleChange}
+        onChange={onChange}
         placeholder={formattedPlaceholder}
         value={value || ''}
         required={required}
@@ -265,10 +252,6 @@ const InputUID = forwardRef(
 );
 
 InputUID.propTypes = {
-  attribute: PropTypes.shape({
-    targetField: PropTypes.string,
-    required: PropTypes.bool,
-  }).isRequired,
   contentTypeUID: PropTypes.string.isRequired,
   disabled: PropTypes.bool,
   error: PropTypes.string,
@@ -300,4 +283,4 @@ InputUID.defaultProps = {
   hint: '',
 };
 
-export default InputUID;
+export { InputUID };

package/admin/src/content-manager/components/Inputs/index.js

@@ -10,7 +10,8 @@ import { useIntl } from 'react-intl';
 
 import { useContentTypeLayout } from '../../hooks';
 import { getFieldName } from '../../utils';
-import InputUID from '../InputUID';
+import Blocks from '../BlocksEditor';
+import { InputUID } from '../InputUID';
 import { RelationInputDataManager } from '../RelationInputDataManager';
 import Wysiwyg from '../Wysiwyg';
 
@@ -207,6 +208,7 @@ function Inputs({
     uid: InputUID,
     media: fields.media,
     wysiwyg: Wysiwyg,
+    blocks: Blocks,
     ...fields,
     ...customFieldInputs,
   };

package/admin/src/content-manager/components/Inputs/utils/getInputType.js

@@ -2,6 +2,8 @@ import toLower from 'lodash/toLower';
 
 const getInputType = (type = '') => {
   switch (toLower(type)) {
+    case 'blocks':
+      return 'blocks';
     case 'boolean':
       return 'bool';
     case 'biginteger':

package/admin/src/content-manager/components/RelationInput/RelationInput.js

@@ -48,6 +48,10 @@ export const DisconnectButton = styled.button`
   }
 `;
 
+const ComboboxWrapper = styled(Box)`
+  align-self: flex-start;
+`;
+
 const RelationInput = ({
   canReorder,
   description,
@@ -192,13 +196,13 @@ const RelationInput = ({
       updatedRelationsWith.current === 'onChange' &&
       relations.length !== previewRelationsLength
     ) {
-      listRef.current.scrollToItem(relations.length, 'end');
+      listRef.current?.scrollToItem(relations.length, 'end');
       updatedRelationsWith.current = undefined;
     } else if (
       updatedRelationsWith.current === 'loadMore' &&
       relations.length !== previewRelationsLength
     ) {
-      listRef.current.scrollToItem(0, 'start');
+      listRef.current?.scrollToItem(0, 'start');
       updatedRelationsWith.current = undefined;
     }
   }, [previewRelationsLength, relations]);
@@ -206,58 +210,70 @@ const RelationInput = ({
   const ariaDescriptionId = `${name}-item-instructions`;
 
   return (
-    <Flex gap={3} justifyContent="space-between" alignItems="end" wrap="wrap">
-      <Flex direction="column" alignItems="stretch" basis={size <= 6 ? '100%' : '70%'} gap={2}>
-        <Combobox
-          ref={fieldRef}
-          autocomplete="list"
-          error={error}
-          name={name}
-          hint={description}
-          id={id}
-          required={required}
-          label={label}
-          labelAction={labelAction}
-          disabled={disabled}
-          placeholder={placeholder}
-          hasMoreItems={searchResults.hasNextPage}
-          loading={searchResults.isLoading}
-          onOpenChange={handleMenuOpen}
-          noOptionsMessage={() => noRelationsMessage}
-          loadingMessage={loadingMessage}
-          onLoadMore={() => {
-            onSearchNextPage();
-          }}
-          textValue={textValue}
-          onChange={(relationId) => {
-            if (!relationId) {
-              return;
-            }
-            onRelationConnect(options.find((opt) => opt.id === relationId));
-            updatedRelationsWith.current = 'onChange';
-          }}
-          onTextValueChange={(text) => {
-            setTextValue(text);
-          }}
-          onInputChange={(event) => {
-            onSearch(event.currentTarget.value);
-          }}
-        >
-          {options.map((opt) => {
-            return <Option key={opt.id} {...opt} />;
-          })}
-        </Combobox>
+    <Flex
+      direction="column"
+      gap={3}
+      justifyContent="space-between"
+      alignItems="stretch"
+      wrap="wrap"
+    >
+      <Flex direction="row" alignItems="end" justifyContent="end" gap={2} width="100%">
+        <ComboboxWrapper marginRight="auto" maxWidth={size <= 6 ? '100%' : '70%'} width="100%">
+          <Combobox
+            ref={fieldRef}
+            autocomplete="list"
+            error={error}
+            name={name}
+            hint={description}
+            id={id}
+            required={required}
+            label={label}
+            labelAction={labelAction}
+            disabled={disabled}
+            placeholder={placeholder}
+            hasMoreItems={searchResults.hasNextPage}
+            loading={searchResults.isLoading}
+            onOpenChange={handleMenuOpen}
+            noOptionsMessage={() => noRelationsMessage}
+            loadingMessage={loadingMessage}
+            onLoadMore={() => {
+              onSearchNextPage();
+            }}
+            textValue={textValue}
+            onChange={(relationId) => {
+              if (!relationId) {
+                return;
+              }
+              onRelationConnect(options.find((opt) => opt.id === relationId));
+              updatedRelationsWith.current = 'onChange';
+            }}
+            onTextValueChange={(text) => {
+              setTextValue(text);
+            }}
+            onInputChange={(event) => {
+              onSearch(event.currentTarget.value);
+            }}
+          >
+            {options.map((opt) => {
+              return <Option key={opt.id} {...opt} />;
+            })}
+          </Combobox>
+        </ComboboxWrapper>
+
         {shouldDisplayLoadMoreButton && (
           <TextButton
             disabled={paginatedRelations.isLoading || paginatedRelations.isFetchingNextPage}
             onClick={handleLoadMore}
             loading={paginatedRelations.isLoading || paginatedRelations.isFetchingNextPage}
             startIcon={<Refresh />}
+            // prevent the label from line-wrapping
+            shrink={0}
           >
             {labelLoadMore}
           </TextButton>
         )}
       </Flex>
+
       {relations.length > 0 && (
         <RelationList overflow={overflow}>
           <VisuallyHidden id={ariaDescriptionId}>{listAriaDescription}</VisuallyHidden>

package/admin/src/content-manager/components/Wysiwyg/EditorLayout.js

@@ -62,8 +62,8 @@ export const EditorLayout = ({ children, isExpandMode, error, previewContent, on
               hasRadius
               shadow="popupShadow"
               overflow="hidden"
-              width="70%"
-              height="70%"
+              width="90%"
+              height="90%"
               onClick={(e) => e.stopPropagation()}
             >
               <Flex height="100%" alignItems="flex-start">

package/admin/src/content-manager/hooks/useRelation/useRelation.js

@@ -9,100 +9,84 @@ export const useRelation = (cacheKey, { relation, search }) => {
   const [searchParams, setSearchParams] = useState({});
   const [currentPage, setCurrentPage] = useState(0);
   const { get } = useFetchClient();
-  /**
-   * This runs in `useInfiniteQuery` to actually fetch the data
-   */
-  const fetchRelations = async ({ pageParam = 1 }) => {
-    try {
-      const { data } = await get(relation?.endpoint, {
-        params: {
-          ...(relation.pageParams ?? {}),
-          page: pageParam,
-        },
-      });
-
-      setCurrentPage(pageParam);
-
-      return data;
-    } catch (err) {
-      return null;
-    }
-  };
-
-  const fetchSearch = async ({ pageParam = 1 }) => {
-    try {
-      const { data } = await get(search.endpoint, {
-        params: {
-          ...(search.pageParams ?? {}),
-          ...searchParams,
-          page: pageParam,
-        },
-      });
-
-      return data;
-    } catch (err) {
-      return null;
-    }
-  };
 
   const { onLoad: onLoadRelations, normalizeArguments = {} } = relation;
 
-  const relationsRes = useInfiniteQuery(['relation', ...cacheKey], fetchRelations, {
-    cacheTime: 0,
-    enabled: relation.enabled,
-    /**
-     * @type {(lastPage:
-     * | { data: null }
-     * | { results: any[],
-     *     pagination: {
-     *      page: number,
-     *      pageCount: number,
-     *      pageSize: number,
-     *      total: number
-     *     }
-     *   }
-     * ) => number}
-     */
-    getNextPageParam(lastPage) {
-      const isXToOneRelation = !lastPage?.pagination;
-
-      if (
-        !lastPage || // the API may send an empty 204 response
-        isXToOneRelation || // xToOne relations do not have a pagination
-        lastPage?.pagination.page >= lastPage?.pagination.pageCount
-      ) {
-        return undefined;
+  const relationsRes = useInfiniteQuery(
+    ['relation', ...cacheKey],
+    async ({ pageParam = 1 }) => {
+      try {
+        const { data } = await get(relation?.endpoint, {
+          params: {
+            ...(relation.pageParams ?? {}),
+            page: pageParam,
+          },
+        });
+
+        setCurrentPage(pageParam);
+
+        return data;
+      } catch (err) {
+        return null;
       }
-
-      // eslint-disable-next-line consistent-return
-      return lastPage.pagination.page + 1;
     },
-    select: (data) => ({
-      ...data,
-      pages: data.pages.map((page) => {
-        if (!page) {
-          return page;
-        }
-
-        const { data, results, pagination } = page;
-        const isXToOneRelation = !!data;
-        let normalizedResults = [];
+    {
+      cacheTime: 0,
+      enabled: relation.enabled,
+      /**
+       * @type {(lastPage:
+       * | { data: null }
+       * | { results: any[],
+       *     pagination: {
+       *      page: number,
+       *      pageCount: number,
+       *      pageSize: number,
+       *      total: number
+       *     }
+       *   }
+       * ) => number}
+       */
+      getNextPageParam(lastPage) {
+        const isXToOneRelation = !lastPage?.pagination;
 
-        // xToOne relations return an object, which we normalize so that relations
-        // always have the same shape
-        if (isXToOneRelation) {
-          normalizedResults = [data];
-        } else if (results) {
-          normalizedResults = [...results].reverse();
+        if (
+          !lastPage || // the API may send an empty 204 response
+          isXToOneRelation || // xToOne relations do not have a pagination
+          lastPage?.pagination.page >= lastPage?.pagination.pageCount
+        ) {
+          return undefined;
         }
 
-        return {
-          pagination,
-          results: normalizedResults,
-        };
+        // eslint-disable-next-line consistent-return
+        return lastPage.pagination.page + 1;
+      },
+      select: (data) => ({
+        ...data,
+        pages: data.pages.map((page) => {
+          if (!page) {
+            return page;
+          }
+
+          const { data, results, pagination } = page;
+          const isXToOneRelation = !!data;
+          let normalizedResults = [];
+
+          // xToOne relations return an object, which we normalize so that relations
+          // always have the same shape
+          if (isXToOneRelation) {
+            normalizedResults = [data];
+          } else if (results) {
+            normalizedResults = [...results].reverse();
+          }
+
+          return {
+            pagination,
+            results: normalizedResults,
+          };
+        }),
       }),
-    }),
-  });
+    }
+  );
 
   const { pageGoal } = relation;
 
@@ -137,7 +121,21 @@ export const useRelation = (cacheKey, { relation, search }) => {
 
   const searchRes = useInfiniteQuery(
     ['relation', ...cacheKey, 'search', JSON.stringify(searchParams)],
-    fetchSearch,
+    async ({ pageParam = 1 }) => {
+      try {
+        const { data } = await get(search.endpoint, {
+          params: {
+            ...(search.pageParams ?? {}),
+            ...searchParams,
+            page: pageParam,
+          },
+        });
+
+        return data;
+      } catch (err) {
+        return null;
+      }
+    },
     {
       enabled: Object.keys(searchParams).length > 0,
       /**