@strapi/admin 4.12.7 → 4.13.0-alpha.1

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

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React, { forwardRef, useEffect, useRef, useState } from 'react';
 
 import { Flex, TextInput, Typography } from '@strapi/design-system';
 import {
@@ -16,247 +16,253 @@ import useDebounce from '../../../hooks/useDebounce';
 import { FieldActionWrapper, LoadingWrapper, TextValidation } from './endActionStyle';
 import UID_REGEX from './regex';
 
-const InputUID = ({
-  attribute,
-  contentTypeUID,
-  hint,
-  disabled,
-  error,
-  intlLabel,
-  labelAction,
-  name,
-  onChange,
-  value,
-  placeholder,
-  required,
-}) => {
-  const { modifiedData, initialData, layout } = useCMEditViewDataManager();
-  const [isLoading, setIsLoading] = useState(false);
-  const [availability, setAvailability] = useState(null);
-  const debouncedValue = useDebounce(value, 300);
-  const generateUid = useRef();
-  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 InputUID = forwardRef(
+  (
+    {
+      attribute,
+      contentTypeUID,
+      hint,
+      disabled,
+      error,
+      intlLabel,
+      labelAction,
+      name,
+      onChange,
+      value,
+      placeholder,
+      required,
+    },
+    forwardedRef
+  ) => {
+    const { modifiedData, initialData, layout } = useCMEditViewDataManager();
+    const [isLoading, setIsLoading] = useState(false);
+    const [availability, setAvailability] = useState(null);
+    const debouncedValue = useDebounce(value, 300);
+    const generateUid = useRef();
+    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
-    ? formatMessage(
-        { id: intlLabel.id, defaultMessage: intlLabel.defaultMessage },
-        { ...intlLabel.values }
-      )
-    : name;
+    const label = intlLabel.id
+      ? formatMessage(
+          { id: intlLabel.id, defaultMessage: intlLabel.defaultMessage },
+          { ...intlLabel.values }
+        )
+      : name;
 
-  const formattedPlaceholder = placeholder
-    ? formatMessage(
-        { id: placeholder.id, defaultMessage: placeholder.defaultMessage },
-        { ...placeholder.values }
-      )
-    : '';
+    const formattedPlaceholder = placeholder
+      ? formatMessage(
+          { id: placeholder.id, defaultMessage: placeholder.defaultMessage },
+          { ...placeholder.values }
+        )
+      : '';
 
-  generateUid.current = async (shouldSetInitialValue = false) => {
-    setIsLoading(true);
+    generateUid.current = async (shouldSetInitialValue = false) => {
+      setIsLoading(true);
 
-    try {
-      const {
-        data: { data },
-      } = await post('/content-manager/uid/generate', {
-        contentTypeUID,
-        field: name,
-        data: modifiedData,
-      });
+      try {
+        const {
+          data: { data },
+        } = await post('/content-manager/uid/generate', {
+          contentTypeUID,
+          field: name,
+          data: modifiedData,
+        });
 
-      onChange({ target: { name, value: data, type: 'text' } }, shouldSetInitialValue);
-      setIsLoading(false);
-    } catch (error) {
-      setIsLoading(false);
-      toggleNotification({
-        type: 'warning',
-        message: formatAPIError(error),
-      });
-    }
-  };
-
-  const checkAvailability = async () => {
-    if (!value) {
-      return;
-    }
-
-    setIsLoading(true);
+        onChange({ target: { name, value: data, type: 'text' } }, shouldSetInitialValue);
+        setIsLoading(false);
+      } catch (error) {
+        setIsLoading(false);
+        toggleNotification({
+          type: 'warning',
+          message: formatAPIError(error),
+        });
+      }
+    };
 
-    try {
-      const { data } = await post('/content-manager/uid/check-availability', {
-        contentTypeUID,
-        field: name,
-        value: value ? value.trim() : '',
-      });
+    const checkAvailability = async () => {
+      if (!value) {
+        return;
+      }
 
-      setIsLoading(false);
-      setAvailability(data);
-    } catch (error) {
-      setIsLoading(false);
-      toggleNotification({
-        type: 'warning',
-        message: formatAPIError(error),
-      });
-    }
-  };
+      setIsLoading(true);
 
-  // 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]);
+      try {
+        const { data } = await post('/content-manager/uid/check-availability', {
+          contentTypeUID,
+          field: name,
+          value: value ? value.trim() : '',
+        });
 
-  useEffect(() => {
-    if (debouncedValue?.trim().match(UID_REGEX) && debouncedValue !== initialValue) {
-      checkAvailability();
-    }
+        setIsLoading(false);
+        setAvailability(data);
+      } catch (error) {
+        setIsLoading(false);
+        toggleNotification({
+          type: 'warning',
+          message: formatAPIError(error),
+        });
+      }
+    };
 
-    if (!debouncedValue) {
-      setAvailability(null);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [initialValue, debouncedValue]);
+    // 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]);
 
-  useEffect(() => {
-    let timer;
+    useEffect(() => {
+      if (debouncedValue?.trim().match(UID_REGEX) && debouncedValue !== initialValue) {
+        checkAvailability();
+      }
 
-    if (availability?.isAvailable) {
-      timer = setTimeout(() => {
+      if (!debouncedValue) {
         setAvailability(null);
-      }, 4000);
-    }
+      }
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [initialValue, debouncedValue]);
+
+    useEffect(() => {
+      let timer;
 
-    return () => {
-      if (timer) {
-        clearTimeout(timer);
+      if (availability?.isAvailable) {
+        timer = setTimeout(() => {
+          setAvailability(null);
+        }, 4000);
       }
-    };
-  }, [availability]);
 
-  useEffect(() => {
-    if (
-      !isCustomized &&
-      isCreation &&
-      debouncedTargetFieldValue &&
-      modifiedData[attribute.targetField] &&
-      !value
-    ) {
-      generateUid.current(true);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [debouncedTargetFieldValue, isCustomized, isCreation]);
+      return () => {
+        if (timer) {
+          clearTimeout(timer);
+        }
+      };
+    }, [availability]);
 
-  const handleGenerateMouseEnter = () => {
-    setRegenerateLabel(
-      formatMessage({
-        id: 'content-manager.components.uid.regenerate',
-        defaultMessage: 'Regenerate',
-      })
-    );
-  };
+    useEffect(() => {
+      if (
+        !isCustomized &&
+        isCreation &&
+        debouncedTargetFieldValue &&
+        modifiedData[attribute.targetField] &&
+        !value
+      ) {
+        generateUid.current(true);
+      }
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [debouncedTargetFieldValue, isCustomized, isCreation]);
 
-  const handleGenerateMouseLeave = () => {
-    setRegenerateLabel(null);
-  };
+    const handleGenerateMouseEnter = () => {
+      setRegenerateLabel(
+        formatMessage({
+          id: 'content-manager.components.uid.regenerate',
+          defaultMessage: 'Regenerate',
+        })
+      );
+    };
 
-  const handleChange = (e) => {
-    if (e.target.value && isCreation) {
-      setIsCustomized(true);
-    }
+    const handleGenerateMouseLeave = () => {
+      setRegenerateLabel(null);
+    };
 
-    onChange(e);
-  };
+    const handleChange = (e) => {
+      if (e.target.value && isCreation) {
+        setIsCustomized(true);
+      }
 
-  return (
-    <TextInput
-      disabled={disabled}
-      error={error}
-      endAction={
-        <Flex position="relative" gap={1}>
-          {availability && !regenerateLabel && (
-            <TextValidation
-              alignItems="center"
-              gap={1}
-              justifyContent="flex-end"
-              available={!!availability?.isAvailable}
-              data-not-here-outer
-              position="absolute"
-              pointerEvents="none"
-              right={6}
-              width="100px"
-            >
-              {availability?.isAvailable ? <CheckCircle /> : <ExclamationMarkCircle />}
+      onChange(e);
+    };
 
-              <Typography
-                textColor={availability.isAvailable ? 'success600' : 'danger600'}
-                variant="pi"
+    return (
+      <TextInput
+        ref={forwardedRef}
+        disabled={disabled}
+        error={error}
+        endAction={
+          <Flex position="relative" gap={1}>
+            {availability && !regenerateLabel && (
+              <TextValidation
+                alignItems="center"
+                gap={1}
+                justifyContent="flex-end"
+                available={!!availability?.isAvailable}
+                data-not-here-outer
+                position="absolute"
+                pointerEvents="none"
+                right={6}
+                width="100px"
               >
-                {formatMessage(
-                  availability.isAvailable
-                    ? {
-                        id: 'content-manager.components.uid.available',
-                        defaultMessage: 'Available',
-                      }
-                    : {
-                        id: 'content-manager.components.uid.unavailable',
-                        defaultMessage: 'Unavailable',
-                      }
-                )}
-              </Typography>
-            </TextValidation>
-          )}
+                {availability?.isAvailable ? <CheckCircle /> : <ExclamationMarkCircle />}
 
-          {!disabled && (
-            <>
-              {regenerateLabel && (
-                <TextValidation alignItems="center" justifyContent="flex-end" gap={1}>
-                  <Typography textColor="primary600" variant="pi">
-                    {regenerateLabel}
-                  </Typography>
-                </TextValidation>
-              )}
+                <Typography
+                  textColor={availability.isAvailable ? 'success600' : 'danger600'}
+                  variant="pi"
+                >
+                  {formatMessage(
+                    availability.isAvailable
+                      ? {
+                          id: 'content-manager.components.uid.available',
+                          defaultMessage: 'Available',
+                        }
+                      : {
+                          id: 'content-manager.components.uid.unavailable',
+                          defaultMessage: 'Unavailable',
+                        }
+                  )}
+                </Typography>
+              </TextValidation>
+            )}
 
-              <FieldActionWrapper
-                onClick={() => generateUid.current()}
-                label={formatMessage({
-                  id: 'content-manager.components.uid.regenerate',
-                  defaultMessage: 'Regenerate',
-                })}
-                onMouseEnter={handleGenerateMouseEnter}
-                onMouseLeave={handleGenerateMouseLeave}
-              >
-                {isLoading ? (
-                  <LoadingWrapper data-testid="loading-wrapper">
-                    <Loader />
-                  </LoadingWrapper>
-                ) : (
-                  <Refresh />
+            {!disabled && (
+              <>
+                {regenerateLabel && (
+                  <TextValidation alignItems="center" justifyContent="flex-end" gap={1}>
+                    <Typography textColor="primary600" variant="pi">
+                      {regenerateLabel}
+                    </Typography>
+                  </TextValidation>
                 )}
-              </FieldActionWrapper>
-            </>
-          )}
-        </Flex>
-      }
-      hint={hint}
-      label={label}
-      labelAction={labelAction}
-      name={name}
-      onChange={handleChange}
-      placeholder={formattedPlaceholder}
-      value={value || ''}
-      required={required}
-    />
-  );
-};
+
+                <FieldActionWrapper
+                  onClick={() => generateUid.current()}
+                  label={formatMessage({
+                    id: 'content-manager.components.uid.regenerate',
+                    defaultMessage: 'Regenerate',
+                  })}
+                  onMouseEnter={handleGenerateMouseEnter}
+                  onMouseLeave={handleGenerateMouseLeave}
+                >
+                  {isLoading ? (
+                    <LoadingWrapper data-testid="loading-wrapper">
+                      <Loader />
+                    </LoadingWrapper>
+                  ) : (
+                    <Refresh />
+                  )}
+                </FieldActionWrapper>
+              </>
+            )}
+          </Flex>
+        }
+        hint={hint}
+        label={label}
+        labelAction={labelAction}
+        name={name}
+        onChange={handleChange}
+        placeholder={formattedPlaceholder}
+        value={value || ''}
+        required={required}
+      />
+    );
+  }
+);
 
 InputUID.propTypes = {
   attribute: PropTypes.shape({

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

@@ -12,6 +12,7 @@ import {
   VisuallyHidden,
   Combobox,
 } from '@strapi/design-system';
+import { useFocusInputField } from '@strapi/helper-plugin';
 import { Cross, Refresh } from '@strapi/icons';
 import PropTypes from 'prop-types';
 import { FixedSizeList as List } from 'react-window';
@@ -86,6 +87,8 @@ const RelationInput = ({
   const listRef = useRef();
   const outerListRef = useRef();
 
+  const fieldRef = useFocusInputField(name);
+
   const { data } = searchResults;
 
   const relations = paginatedRelations.data;
@@ -206,6 +209,7 @@ const RelationInput = ({
     <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}

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

@@ -1,8 +1,8 @@
 /* eslint-disable import/no-cycle */
-import React, { memo, useMemo, useState } from 'react';
+import React, { memo, useEffect, useMemo, useState } from 'react';
 
 import { Box, Flex, TextButton, VisuallyHidden } from '@strapi/design-system';
-import { useCMEditViewDataManager, useNotification } from '@strapi/helper-plugin';
+import { useCMEditViewDataManager, useNotification, useQuery } from '@strapi/helper-plugin';
 import { Plus } from '@strapi/icons';
 import get from 'lodash/get';
 import PropTypes from 'prop-types';
@@ -50,6 +50,36 @@ const RepeatableComponent = ({
     [componentUid, getComponentLayout]
   );
 
+  const search = useQuery();
+
+  /**
+   * Get the temp key of the component that has the field that is currently focussed
+   * as defined by the `field` query param. We can then force this specific component
+   * to be in it's "open" state.
+   */
+  const componentTmpKeyWithFocussedField = useMemo(() => {
+    if (search.has('field')) {
+      const field = search.get('field');
+
+      const [, path] = field.split(`${name}.`);
+
+      if (get(componentValue, path, undefined) !== undefined) {
+        const subpaths = path.split('.');
+
+        return get(componentValue, subpaths[0], undefined)?.__temp_key__;
+      }
+    }
+
+    // eslint-disable-next-line consistent-return
+    return undefined;
+  }, [componentValue, search, name]);
+
+  useEffect(() => {
+    if (typeof componentTmpKeyWithFocussedField === 'number') {
+      setCollapseToOpen(componentTmpKeyWithFocussedField);
+    }
+  }, [componentTmpKeyWithFocussedField]);
+
   const nextTempKey = useMemo(() => getMaxTempKey(componentValue || []) + 1, [componentValue]);
 
   const componentErrorKeys = getComponentErrorKeys(name, formErrors);