@strapi/admin 4.12.6 → 4.13.0-alpha.0

package/admin/src/components/PluginsInitializer/init.js

@@ -0,0 +1,11 @@
+const init = (plugins) => {
+  return {
+    plugins: Object.keys(plugins).reduce((acc, current) => {
+      acc[current] = { ...plugins[current] };
+
+      return acc;
+    }, {}),
+  };
+};
+
+export default init;

package/admin/src/components/PluginsInitializer/reducer.js

@@ -0,0 +1,22 @@
+import produce from 'immer';
+import set from 'lodash/set';
+
+const initialState = {
+  plugins: null,
+};
+
+const reducer = (state = initialState, action) =>
+  /* eslint-disable-next-line consistent-return */
+  produce(state, (draftState) => {
+    switch (action.type) {
+      case 'SET_PLUGIN_READY': {
+        set(draftState, ['plugins', action.pluginId, 'isReady'], true);
+        break;
+      }
+      default:
+        return draftState;
+    }
+  });
+
+export { initialState };
+export default reducer;

package/admin/src/content-manager/components/DynamicTable/CellContent/ReviewWorkflowsStage/getTableColumns.js

@@ -0,0 +1,2 @@
+// Overwritten in EE
+export default () => [];

package/admin/src/content-manager/components/DynamicZone/components/DynamicZoneLabel.js

@@ -29,7 +29,7 @@ export const DynamicZoneLabel = ({
         paddingBottom={3}
         paddingRight={4}
         paddingLeft={4}
-        borderRadius={26}
+        borderRadius="26px"
         background="neutral0"
         shadow="filterShadow"
         color="neutral500"

package/admin/src/content-manager/components/EditViewDataManagerProvider/reducer.js

@@ -239,7 +239,14 @@ const reducer = (state, action) =>
           (value) => {
             return value.type === 'relation';
           },
-          (_, { path }) => {
+          (value, { path }) => {
+            const relationFieldName = path[path.length - 1];
+
+            // When editing, we don't want to fetch the relations with creator fields because we already have it
+            if (value && (relationFieldName === 'createdBy' || relationFieldName === 'updatedBy')) {
+              return value;
+            }
+
             if (state.modifiedData?.id === data.id && get(state.modifiedData, path)) {
               return get(state.modifiedData, path);
             }

package/admin/src/content-manager/components/Filter/CustomInputs/AdminUsersFilter.js

@@ -0,0 +1,42 @@
+import React from 'react';
+
+import { Combobox, ComboboxOption } from '@strapi/design-system';
+import PropTypes from 'prop-types';
+import { useIntl } from 'react-intl';
+
+import { useAdminUsers } from '../../../../hooks/useAdminUsers';
+import { getDisplayName } from '../../../utils';
+
+export const AdminUsersFilter = ({ value, onChange }) => {
+  const { formatMessage } = useIntl();
+  const { users, isLoading } = useAdminUsers();
+
+  return (
+    <Combobox
+      value={value}
+      aria-label={formatMessage({
+        id: 'content-manager.components.Filters.usersSelect.label',
+        defaultMessage: 'Search and select an user to filter',
+      })}
+      onChange={onChange}
+      loading={isLoading}
+    >
+      {users.map((user) => {
+        return (
+          <ComboboxOption key={user.id} value={user.id.toString()}>
+            {getDisplayName(user, formatMessage)}
+          </ComboboxOption>
+        );
+      })}
+    </Combobox>
+  );
+};
+
+AdminUsersFilter.propTypes = {
+  onChange: PropTypes.func.isRequired,
+  value: PropTypes.string,
+};
+
+AdminUsersFilter.defaultProps = {
+  value: '',
+};

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

@@ -0,0 +1,54 @@
+import React from 'react';
+
+import { Button } from '@strapi/design-system';
+import { FilterListURLQuery, FilterPopoverURLQuery, useTracking } from '@strapi/helper-plugin';
+import { Filter as FilterIcon } from '@strapi/icons';
+import PropTypes from 'prop-types';
+import { useIntl } from 'react-intl';
+
+export const Filter = ({ displayedFilters }) => {
+  const [isVisible, setIsVisible] = React.useState(false);
+  const { formatMessage } = useIntl();
+  const buttonRef = React.useRef();
+  const { trackUsage } = useTracking();
+
+  const handleToggle = () => {
+    if (!isVisible) {
+      trackUsage('willFilterEntries');
+    }
+    setIsVisible((prev) => !prev);
+  };
+
+  return (
+    <>
+      <Button
+        variant="tertiary"
+        ref={buttonRef}
+        startIcon={<FilterIcon />}
+        onClick={handleToggle}
+        size="S"
+      >
+        {formatMessage({ id: 'app.utils.filters', defaultMessage: 'Filters' })}
+      </Button>
+      {isVisible && (
+        <FilterPopoverURLQuery
+          displayedFilters={displayedFilters}
+          isVisible={isVisible}
+          onToggle={handleToggle}
+          source={buttonRef}
+        />
+      )}
+      <FilterListURLQuery filtersSchema={displayedFilters} />
+    </>
+  );
+};
+
+Filter.propTypes = {
+  displayedFilters: PropTypes.arrayOf(
+    PropTypes.shape({
+      name: PropTypes.string.isRequired,
+      metadatas: PropTypes.shape({ label: PropTypes.string }),
+      fieldSchema: PropTypes.shape({ type: PropTypes.string }),
+    })
+  ).isRequired,
+};

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

@@ -0,0 +1 @@
+export * from './Filter';

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}